ECharts折線圖渲染json格式數(shù)據(jù)（json格式，為數(shù)組）
需要對(duì)數(shù)組進(jìn)行循環(huán)取值，將取到的值分別賦值給x軸和y軸
json格式著隆，data為數(shù)組
{
"msg": "查詢成功",
"code": 1,
"data": [{
"statTime": "2021-03",
"noPatrolNum": 21
}, {
"statTime": "2021-04",
"noPatrolNum": 15
}]
}
demo
<!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準(zhǔn)備一個(gè)具備大薪葡唷（寬高）的Dom -->
<div id="main" class="col-md-12 col-sm-12 col-xs-12" style="height: 400px;"></div>
<script>
// 折線圖
var names = []; //類別數(shù)組（實(shí)際用來盛放X軸坐標(biāo)值）
var series = [];
$.ajax({
url: "test.json",
data: {},
type: 'GET',
success: function(data) {
//請(qǐng)求成功時(shí)執(zhí)行該函數(shù)內(nèi)容，data即為服務(wù)器返回的json對(duì)象
$.each(data.data, function(index, item) {
names.push(item.statTime); //挨個(gè)取出類別并填入類別數(shù)組
series.push(item.noPatrolNum);
});
hFun(names, series);
},
});
// 心率
var hrChart = echarts.init(document.getElementById("main"));
function hFun(x_data, y_data) {
hrChart.setOption({
color: ['#1e63d8'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐標(biāo)軸指示器褪迟，坐標(biāo)軸觸發(fā)有效
type: 'shadow' // 默認(rèn)為直線冗恨，可選為：'line' | 'shadow'
}
},
legend: {
data: ['漏檢次數(shù)']
},
grid: {
left: '3%',
right: '20%',
bottom: '20%',
containLabel: true
},
xAxis: {
splitLine: {
show: false
},
/* 改變x軸顏色 */
axisLine: {
lineStyle: {
color: '#00a2e2',
width: 1, // 這里是為了突出顯示加上的
}
},
type: 'category',
data: x_data,
},
yAxis: { // 縱軸標(biāo)尺固定
splitLine: {
show: false
},
type: 'value',
scale: true,
name: '漏檢次數(shù)',
min: 0, // 就是這兩個(gè) 最小值
max: 'dataMax', // 最大值
splitNumber: 10,
/* 改變y軸顏色 */
axisLine: {
lineStyle: {
color: '#00a2e2',
width: 1, // 這里是為了突出顯示加上的
}
},
boundaryGap: [0.2, 0.2]
},
series: [{
name: '漏檢次數(shù)',
type: 'line',
symbol: 'circle', // 折線點(diǎn)設(shè)置為實(shí)心點(diǎn)
symbolSize: 6, // 折線點(diǎn)的大小
itemStyle: {
normal: {
color: "#1bdaf8", // 折線點(diǎn)的顏色
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
}]
}, true);
}
</script>
</body>
</html>
