echarts ajax請求demo

時間 2019-12-14

標籤 echarts ajax 請求 demo 欄目 Ajax 简体版

原文原文鏈接

<body>
 <!--爲ECharts準備一個具有大小（寬高）的Dom-->
<div id="main" style="width: 1000px;height:600px;margin-left: 20px"></div>
<script type="text/javascript">
    // 基於準備好的dom，初始化echarts實例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定圖表的配置項和數據
    var option = {};
    var seriesData = []
    var xAxisData = [];
    $(function () {
        $.ajax({
            type: 'GET',
            url: 'admin/logData',
            dataType: 'JSON',
            success: function (res) {
                if(res.code !="000"){
                    return;
                }
                var data = res.data;
                for(var i=0;i<data.length;i++){
                    xAxisData.unshift(data[i].hour);
                    seriesData.unshift(data[i].count);
                }
                setOptions(xAxisData,seriesData);
            }
        });

    })
    function setOptions(xAxisData,seriesData){
        option = {
            title: {
                text: '訪問次數',
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#283b56'
                    }
                }
            },
            legend: {
                data:['訪問次數']
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: {readOnly: false},
                    restore: {},
                    saveAsImage: {}
                }
            },
            dataZoom: {
                show: false,
                start: 0,
                end: 100
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: true,
                    data: xAxisData,
                },
                {
                    type: 'category',
                    boundaryGap: true,
                    data: (function (){
                        var res = [];
                        return res;
                    })()
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    scale: true,
                    name: '訪問次數',
                    max: 10,
                    min: 0,
                    boundaryGap: [1, 1]
                },
                {
                    type: 'value',
                    scale: true,
                    name: '訪問次數',
                    max: 10,
                    min: 0,
                    boundaryGap: [1, 1]
                }
            ],
            series: [
                {
                    name:'訪問次數',
                    type:'bar',
                    xAxisIndex: 1,
                    yAxisIndex: 1,
                    data:seriesData
                },
                {
                    name:'訪問次數',
                    type:'line',
                    data:seriesData
                }
            ]
        };
        // 使用剛指定的配置項和數據顯示圖表。
        myChart.setOption(option);
    };


</script>
</body>

請求數據參考：http://www.javashuo.com/article/p-uzkvlmed-cx.htmljavascript

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。