這是我參與8月更文挑戰的第8天,活動詳情查看: 8月更文挑戰web
學習過程當中將筆記跟你們分享,但願對你們也有所幫助,共同成長進步💪~
若是你們喜歡,能夠點贊或留言~~~~,謝謝你們💕~~~ajax
ECharts動態獲取後臺傳過來的json數據進行多個折線圖的顯示,折線的數據由後臺傳過來json
ECharts 多個折線圖動態獲取json數據,文章原生js處理方式數組
效果圖以下:markdown
js部分:echarts
function mychart1(datetime,dateNums1,dateNums2,dateNums3,dateNums4) {
myChart1 = echarts.init(document.getElementById('main1'));
option = {
title: {
text: '',
left: 'left',
top: '4%',
textStyle: {
color: '#000000',
fontSize: 16
},
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c}'
},
legend: {
data:['溼垃圾收運量','可回收收運量','有毒有害收運量','幹垃圾收運量']
},
xAxis: {
type: 'category',
boundaryGap: false,
name: '天',
splitLine: {
show: true, //網格線是否顯示
lineStyle: {
color: '#323B4E' // 修改網格線顏色
}
},
axisLine: {
// symbol: ['none', 'arrow'], //箭頭
lineStyle: {
color: '#696C72',
}
},
axisTick: { //qu刻度線
show: false
},
axisLabel: { //x軸時間文字顯示不全問題
interval: 0,
rotate: 40
},
data: datetime
},
grid: {
left: '5%',
right: '8%',
bottom: '0%',
top: '16%',
containLabel: true
},
yAxis: {
type: 'value',
// min: 0, //y軸最小值設置
// max: 100, //y軸最大值設置
name: 'kg',
nameLocation: 'end',
nameTextStyle: {
padding: -10,
},
splitLine: {
show: true, //網格線是否顯示
lineStyle: {
color: '#323B4E' // 修改網格線顏色
}
},
axisLine: {
// symbol: ['none', 'arrow'],
lineStyle: {
color: '#696C72' //0c3b71
}
},
axisTick: {
show: false
},
},
series: [{
symbol: 'circle',
symbolSize: 8,
itemStyle: {
normal: {
color: "#01ff19",
lineStyle: {
color: "#01ff19",
}
}
},
name: '溼垃圾收運量',
type: 'line',
data: dateNums1
},{
symbol: 'circle',
symbolSize: 8,
itemStyle: {
normal: {
color: "#31A4FF",
lineStyle: {
color: "#31A4FF",
}
}
},
name: '可回收收運量',
type: 'line',
data: dateNums2
},{
symbol: 'circle',
symbolSize: 8,
itemStyle: {
normal: {
color: "#F13A30",
lineStyle: {
color: "#F13A30",
}
}
},
name: '有毒有害收運量',
type: 'line',
data: dateNums3
},{
symbol: 'circle',
symbolSize: 8,
itemStyle: {
normal: {
color: "#C7C7C7",
lineStyle: {
color: "#C7C7C7",
}
}
},
name: '幹垃圾收運量',
type: 'line',
data: dateNums4
}]
};
myChart1.setOption(option);
}
function echarsfun1() {
var param = {
"name": houseName
}
var paramStr = $.param(param)
ajaxGet("largeScreenDisplayController.do?todayTrend&" + paramStr, function(data) {
var data = JSON.parse(data)
if(data) {
var data = data.data
console.log(data)
var datetime = []; //時間
var dateNums1 = []; //溼垃圾
var dateNums2 = []; //可回收
var dateNums3 = []; //有毒有害
var dateNums4 = []; //幹垃圾
//溼垃圾
$.each(data.yfgarWeightMapList, function (index, item) {
datetime.push(item.times); //挨個取出類別並填入類別數組
dateNums1.push(item.yfgarWeight);
});
//可回收
$.each(data.recycleWeightMapList, function (index, item) {
dateNums2.push(item.recycleWeight);
});
//有毒有害
$.each(data.youduWeightMapList, function (index, item) {
dateNums3.push(item.youduWeight);
});
//幹垃圾
$.each(data.otherWeightMapList, function (index, item) {
dateNums4.push(item.otherWeight);
});
mychart1(datetime,dateNums1,dateNums2,dateNums3,dateNums4)
}
})
}
複製代碼
後臺傳過來的json數據格式post
{
"msg": "獲取成功",
"code": 0,
"data": {
"otherWeightMapList": [{
"times": "2019-11-07",
"otherWeight": "160"
}, {
"times": "2019-11-08",
"otherWeight": "170"
}, {
"times": "2019-11-09",
"otherWeight": "165"
}, {
"times": "2019-11-10",
"otherWeight": "163"
}],
"recycleWeightMapList": [{
"times": "2019-11-07",
"recycleWeight": "0"
}, {
"times": "2019-11-08",
"recycleWeight": "0"
}, {
"times": "2019-11-09",
"recycleWeight": "0"
}, {
"times": "2019-11-10",
"recycleWeight": "0"
}],
"youduWeightMapList": [{
"times": "2019-11-07",
"youduWeight": "0"
}, {
"times": "2019-11-08",
"youduWeight": "0"
}, {
"times": "2019-11-09",
"youduWeight": "0"
}, {
"times": "2019-11-10",
"youduWeight": "0"
}],
"yfgarWeightMapList": [{
"yfgarWeight": "156",
"times": "2019-11-07"
}, {
"yfgarWeight": "169",
"times": "2019-11-08"
}, {
"yfgarWeight": "136",
"times": "2019-11-09"
}, {
"yfgarWeight": "137",
"times": "2019-11-10"
}]
}
}
複製代碼