需求：
统计不同的时间段里面，监测到的血压数据，分别是高血压的数据和低血压的数据，需要使用两条折线图表示出来，这里就要用到了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 ] }
效果大致是这样的：
