【前端统计图】echart折线图ajax请求json数据
先上图，写了一个echart折线图ajax请求json数据的小demo，帮助自己更好的理解图表知识。
自己写了一段json数据，放在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": [
0,
10,3,43,5,47,8,39,0,1
],
"echatY2": [
0
]
}然后开始写代码
<!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))
hrFun(data.echatX, data.echatY);
},
});
// 心率
var hrChart = echarts.init(document.getElementById("main"));
function hrFun(x_data, y_data) {
hrChart.setOption({
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
data: ['心率值']
},
grid: {
left: '3%',
right: '20%',
bottom: '20%',
containLabel: true
},
xAxis: [{
type: 'category',
data: x_data,
}],
yAxis: [{ // 纵轴标尺固定
type: 'value',
scale: true,
name: '心率值',
max: 140,
min: 0,
splitNumber: 20,
boundaryGap: [0.2, 0.2]
}],
series: [{
name: '心率',
type: 'line',
data: y_data
}]
}, true);
}
</script>
</body>
</html>好了，如果实在实际项目里面，只需要把url的接口换一下即可。
原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019.07.15 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
