先上圖，寫了一個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
90後前端妹子，愛編程，愛運營，文藝與代碼齊飛，魅力與智慧共存的程序媛一枚，歡迎關注【編程微刊】公衆號，回覆【領取資源】,500G編程學習資源乾貨免費送。