多条折线图的mysql_Echarts+ajax实现多条折线图

需求：

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

示例代码如下:

// 折线图

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

} ]

});

}

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

]

}

效果大致是这样的：