ECharts折線圖渲染json格式數據(格式爲數組)

ECharts折線圖渲染json格式數據(json格式,爲數組)
需要對數組進行循環取值,將取到的值分別賦值給x軸和y軸

json格式,data爲數組

{
    "msg": "查詢成功",
    "code": 1,
    "data": [{      
        "statTime": "2021-03",      
        "noPatrolNum": 21
    }, {        
        "statTime": "2021-04",
        "noPatrolNum": 15
    }]
}

demo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
    </head>
    <body>
        <!-- 爲ECharts準備一個具備大小(寬高)的Dom -->
        <div id="main" class="col-md-12  col-sm-12 col-xs-12" style="height: 400px;"></div>
        <script>
            // 折線圖
            var names = []; //類別數組(實際用來盛放X軸座標值)    
            var series = [];
            $.ajax({
                url: "test.json",
                data: {},
                type: 'GET',
                success: function(data) {
                    //請求成功時執行該函數內容,data即爲服務器返回的json對象           
                    $.each(data.data, function(index, item) {
                        names.push(item.statTime); //挨個取出類別並填入類別數組
                        series.push(item.noPatrolNum);
                    });
                    hFun(names, series);
                },
            });
            // 心率
            var hrChart = echarts.init(document.getElementById("main"));

            function hFun(x_data, y_data) {
                hrChart.setOption({
                    color: ['#1e63d8'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 座標軸指示器,座標軸觸發有效
                            type: 'shadow' // 默認爲直線,可選爲:'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: ['漏檢次數']
                    },
                    grid: {
                        left: '3%',
                        right: '20%',
                        bottom: '20%',
                        containLabel: true
                    },
                    xAxis: {
                        splitLine: {
                            show: false
                        },
                        /* 改變x軸顏色 */
                        axisLine: {
                            lineStyle: {
                                color: '#00a2e2',
                                width: 1, // 這裏是爲了突出顯示加上的
                            }
                        },
                        type: 'category',
                        data: x_data,
                    },
                    yAxis: { // 縱軸標尺固定
                        splitLine: {
                            show: false
                        },

                        type: 'value',
                        scale: true,
                        name: '漏檢次數',
                        min: 0, // 就是這兩個 最小值
                        max: 'dataMax', // 最大值
                        splitNumber: 10,
                        /* 改變y軸顏色 */
                        axisLine: {
                            lineStyle: {
                                color: '#00a2e2',
                                width: 1, // 這裏是爲了突出顯示加上的
                            }
                        },
                        boundaryGap: [0.2, 0.2]
                    },
                    series: [{
                        name: '漏檢次數',
                        type: 'line',
                        symbol: 'circle', // 折線點設置爲實心點
                        symbolSize: 6, // 折線點的大小
                        itemStyle: {
                            normal: {
                                color: "#1bdaf8", // 折線點的顏色
                                lineStyle: {
                                    color: "#0d427e" // 折線的顏色
                                }
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: "#0e4b7a" // 0% 處的顏色
                                }, {
                                    offset: 0.6,
                                    color: "#0d3f70" // 60% 處的顏色
                                }, {
                                    offset: 1,
                                    color: "#0c3367" // 100% 處的顏色
                                }], false)
                            }
                        },
                        data: y_data
                    }]
                }, true);
            }
        </script>
    </body>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章