ECharts折线图渲染json格式数据（格式为数组）

超、凢脫俗 2022-11-17 03:50 225阅读 0赞

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>
            
            <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>

![f681ace14fcaea258226bb93c2d57fd3.png][]

[f681ace14fcaea258226bb93c2d57fd3.png]: /images/20221022/4d40ee0f799544caad68740642ef4294.png