Echarts+ajax实现多条折线图

简介: Echarts+ajax实现多条折线图

需求:

统计不同的时间段里面,监测到的血压数据,分别是高血压的数据和低血压的数据,需要使用两条折线图表示出来,这里就要用到了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>
        <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
        <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
    ]
}

效果大致是这样的:

相关文章
|
7月前
echarts 柱状图/折线图x轴坐标间隔
echarts 柱状图/折线图x轴坐标间隔
259 0
|
7月前
|
JavaScript 应用服务中间件 nginx
【报错】nginx部署项目后Echarts折线图无法展示
在Vue3+TS+Arco项目中,打包后使用Nginx部署的Echarts折线图显示异常,报`Cannot read properties of undefined(reading &#39;setOption&#39;)`错误。问题源于在定义div时使用了Vue2的`$refs`语法,导致DOM元素无法正确初始化Echarts。解决方法有两种:1) 不推荐使用`document.getElementById`获取DOM并初始化Echarts;2) 推荐在Vue3中通过`ref`获取DOM,在`onMounted`中使用`echarts.init`并借助`nextTick`异步绘制数据。
166 3
|
2月前
|
算法 Java Linux
java制作海报五:java 后端整合 echarts 画出 折线图,项目放在linux上,echarts图上不显示中文,显示方框口口口
这篇文章介绍了如何在Java后端整合ECharts库来绘制折线图,并讨论了在Linux环境下ECharts图表中文显示问题。
52 1
|
4月前
Echarts——饼图折线图柱状图相互转换
Echarts——饼图折线图柱状图相互转换
152 0
|
6月前
|
搜索推荐 数据可视化 BI
ECharts 蓝色系-荧光图标折线图01案例
ECharts 案例展示了一周内各路线数据的蓝色荧光折线图,揭示流量趋势。预览包括静态图片和动态GIF。使用ECharts 5.2.0配置图表,包含背景、网格、图例及数据。代码示例初始化图表、定义X轴类别和Y轴值,以及系列颜色。完整案例可在链接中下载。案例结合动态效果与个性化设计,增强数据可视化的吸引力。
70 0
ECharts 蓝色系-荧光图标折线图01案例
|
5月前
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
491 0
|
7月前
【统计图】Echarts实现多条折线图渐变堆叠效果
【统计图】Echarts实现多条折线图渐变堆叠效果
|
JSON 数据格式
Echarts分段折线图图例样式visualMap颜色修改
Echarts分段折线图图例样式visualMap颜色修改
227 1
|
7月前
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
|
JSON 数据格式
ECharts折线图渲染json格式数据(格式为对象)
ECharts折线图渲染json格式数据(格式为对象)
152 0