echarts 实时数据展示
由于 是嵌套数组,写着写着脑子很痛,就不愿思考,细节也无法完全把控,估计脑子在自我保护
写的时候一定得先想清楚数据结构是什么,我虽然想了,但是只想了一个大概就开写了,犯了大错。
一定要想清 那些是需要遍历 那些只需要遍历一次。先把外层模板搭建好,里面的就可以push进去。
function Myecharts() {
//由于最外层是不会变化的,第一遍获取数据就只需要把外层模板搭建好。
getajax(function (data) {
realTime.push(data)
for (var i = 0; i < realTime.length; i++) {
xAxis.push(realTime[i]['time'])
for (var j = 0; j < openName.length; j++) {
series.push({
name: openName[j],
stack: "总量",
type: "line",
data: [realTime[i][openName[j]]]
})
}
}
});
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('RealTimeCurve'));
// 指定图表的配置项和数据
var option = {
legend: {
data: openName,
icon: 'circle',
bottom: '0%',
itemWidth: 20,
itemHeight: 20,
itemGap: 60
},
grid: {
left: '3%',
top:"5%",
right: '4%',
bottom: '10%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: xAxis
},
yAxis: {
type: 'value'
},
series: series
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//每多少时间获取接口
setInterval(function () {
getajax(function (data) {
var MyData = data
//遍历获取到的值,找到对应的值push进去
Object.keys(MyData).forEach(function (key) {
if (key == 'time') {
xAxis.push(MyData[key])
}
})
//里面数组数据push
for (var i = 0; i < series.length; i++) {
Object.keys(MyData).forEach(function (key) {
if (series[i].name == key) {
console.log(key)
series[i].data.push(MyData[key])
}
});
}
console.log(xAxis, series, "111")
myChart.setOption(option);
});
},20000);
}