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
]
}效果大致是这样的：
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读