Echarts+ajax实现多条折线图

深碍√TFBOYSˉ_ 2022-12-23 00:50 163阅读 0赞

需求：  
统计不同的时间段里面，监测到的血压数据，分别是高血压的数据和低血压的数据，需要使用两条折线图表示出来，这里就要用到了Echarts的多条折线图的demo了，并且使用ajax请求json数据，将请求到的数据渲染到图表里面进行表示~~

示例代码如下:

<!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>
                // 折线图
                $.ajax({
                    url: "test.json",
                    data: {},
                    type: 'GET',
                    success: function(data) {
                        console.log(JSON.stringify(data))
                        bloodFun(data.echatX, data.echatY, data.echatY2);
                    },
                });
                
                // 血压
                var bloodChart = echarts.init(document.getElementById('main'));
                // 指定图表的配置项和数据
                function bloodFun(x_data, y_data, y2_data) {
                    
                    bloodChart.setOption({
                        title : {
                            text : ''
                        },
                        tooltip : {
                            trigger : 'axis',
                            axisPointer : {
                                type : 'cross',
                                label : {
                                    backgroundColor : '#6a7985'
                                }
                            }
                        },
                        legend : {
                            y : '35px',
                            textStyle : { // 图例文字的样式
                                color : '#fff',
                            },
                        /* data: ['高血压', '低血压'] */
                        },
                
                        xAxis : {
                            splitLine : {
                                show : false
                            },
                            /* 改变x轴颜色 */
                            axisLine : {
                                lineStyle : {
                                    color : '#00a2e2',
                                    width : 1, // 这里是为了突出显示加上的
                                }
                            },
                            type : 'category',
                            boundaryGap : false,
                            data : x_data,
                        },
                        yAxis : {
                            splitLine : {
                                show : false
                            },
                            type : 'value',
                
                            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
                        }, {
                            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 : y2_data
                        } ]
                    });
                }
           
            </script>
        </body>
    </html>

json

{
        "echatX": ["2020-11-18 00:08:36", "2020-11-18 00:18:42", "2020-11-18 00:28:46", "2020-11-18 00:38:33",
            "2020-11-18 00:48:43", "2020-11-18 00:58:36", "2020-11-18 01:08:40", "2020-11-18 01:18:36", "2020-11-18 01:28:42",
            "2020-11-18 01:38:39", "2020-11-18 01:48:45", "2020-11-18 01:58:35", "2020-11-18 02:08:34", "2020-11-18 02:18:32",
            "2020-11-18 02:28:38", "2020-11-18 02:38:37", "2020-11-18 02:48:44", "2020-11-18 02:58:49", "2020-11-18 03:08:38",
            "2020-11-18 03:18:42", "2020-11-18 03:28:35", "2020-11-18 03:38:44", "2020-11-18 03:48:35", "2020-11-18 03:58:50",
            "2020-11-18 04:08:40", "2020-11-18 04:18:46", "2020-11-18 04:28:48", "2020-11-18 04:38:46", "2020-11-18 04:48:35",
            "2020-11-18 04:58:46", "2020-11-18 05:08:38", "2020-11-18 05:18:34", "2020-11-18 05:28:46", "2020-11-18 05:38:35",
            "2020-11-18 05:48:41", "2020-11-18 05:58:38", "2020-11-18 06:08:41", "2020-11-18 06:18:49", "2020-11-18 06:28:46",
            "2020-11-18 06:38:43", "2020-11-18 06:48:40", "2020-11-18 06:58:47", "2020-11-18 07:08:36", "2020-11-18 07:18:35",
            "2020-11-18 07:28:51", "2020-11-18 07:38:45", "2020-11-18 07:48:39", "2020-11-18 07:58:42", "2020-11-18 08:08:51",
            "2020-11-18 08:18:37", "2020-11-18 08:28:43", "2020-11-18 08:38:46", "2020-11-18 08:48:54", "2020-11-18 08:58:52",
            "2020-11-18 09:08:51", "2020-11-18 09:18:36", "2020-11-18 09:28:41", "2020-11-18 09:38:42", "2020-11-18 09:48:48",
            "2020-11-18 09:58:52", "2020-11-18 10:08:48", "2020-11-18 10:18:38", "2020-11-18 10:28:49", "2020-11-18 10:38:44",
            "2020-11-18 10:48:37", "2020-11-18 11:08:49"
        ],
        "echatY": [111, 155, 143, 171, 159, 134, 123, 114, 156, 180, 131, 170, 123, 123, 129, 102, 119, 144, 180, 125, 102,
            107, 113, 131, 152, 125, 105, 162, 122, 111, 129, 128, 180, 116, 167, 141, 180, 138, 109, 144, 147, 110, 180, 123,
            120, 146, 158, 108, 126, 144, 131, 119, 111, 125, 126, 162, 131, 122, 180, 159, 138, 180, 180, 110, 167, 132
        ],
        "echatY2": [69, 73, 75, 74, 76, 79, 82, 71, 74, 73, 77, 73, 77, 82, 71, 73, 79, 76, 76, 73, 63, 76, 70, 72, 81, 68, 75,
            78, 76, 69, 76, 75, 82, 72, 81, 74, 73, 82, 68, 76, 78, 68, 78, 82, 80, 77, 75, 77, 69, 76, 77, 74, 69, 68, 74, 78,
            72, 76, 76, 76, 82, 81, 80, 68, 81, 78
        ]
    }

效果大致是这样的：

![24ee3eadd208756d6301f55db7be1e01.png][]

[24ee3eadd208756d6301f55db7be1e01.png]: /images/20221120/3bd6836705ba46a79df84b0b690f1095.png