【前端统计图】echart多条折线图ajax请求json数据
关于echart折线图，用到的地方和场景也很多，昨天写的demo,基础之上可以继续扩展，今天的demo是echart多条折线图ajax请求json数据。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 折线统计图 -->
<div class="row">
<div id="main" style="width: 900px; height: 350px; margin-top:80px;"></div>
</div>
</body>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
// 折线图
$.ajax({
url: "test.json",
data: {},
type: 'GET',
success: function(data) {
console.log(JSON.stringify(data))
bloodFun(data.echatX, data.echatY,data.echatY2);
},
});
// 基于准备好的dom，初始化echarts实例
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: {},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
data: x_data,
}],
yAxis: [{
type: 'value'
}],
series: [{
name: '高血压',
type: 'line',
areaStyle: {
normal: {
color: '#fff' //改变区域颜色
}
},
itemStyle: {
normal: {
color: '#8cd5c2', //改变折线点的颜色
lineStyle: {
color: '#8cd5c2' //改变折线颜色
}
}
},
data: y_data
},
{
name: '低血压',
type: 'line',
areaStyle: {
normal: {
color: '#fff' //改变区域颜色
}
},
itemStyle: {
normal: {
color: '#8cd5c2', //改变折线点的颜色
lineStyle: {
color: '#8cd5c2' //改变折线颜色
}
}
},
data: y2_data
}
]
});
}
</script>
</html>test.json
{
"echatX": [
"2019-07-02",
"2019-07-03",
"2019-07-04",
"2019-07-05",
"2019-07-06",
"2019-07-07",
"2019-07-08",
"2019-07-09",
"2019-07-10",
"2019-07-11",
"2019-07-12",
"2019-07-13",
"2019-07-14",
"2019-07-15"
],
"echatY": [
120,121,123,123,125,127,128,129,120,123,122,126,129,122
],
"echatY2": [
60,64,63,63,65,67,68,69,61,66,65,68,69,65
]
}原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1 90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019.07.16 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读