if (res.data.ok && res.data.r.length) {
const
results = res.data.r,
legends = results.map(item => ({
name: item.channelName,
data: item.dateStatisticals
}))
this.lineChartOrder.setOption({
title: {
text: '订单统计'
},
legend: {
data: legends.map(item => item.name)
},
xAxis: {
data: legends[0].data.map(item => item.date)
},
series: legends.map(item => {
return {
type: 'line',
name: item.name,
data: item.data.map(item => item.count)
}
})
})
}
}).catch(err => {
// console.log(err)
})
但是,echarts的数据是直接merge的,所以当出现多条折线时,如果当天的数据为0,或者后台传过来的数据为空的时候,setOption的值根本就没有更新,而是直接merge了,所以这个问题就头大了。
对于这个问题的解决方法是
用getOption取到已经存在的option, 然后用
this.lineChartOrder.setOption.clear() ,清空option,最后
this.lineChartOrder.setOption(option, false, false) 。这样就可以清掉了。
以下是官网异步数据加载与更新的方法,会相对简单些。
// 异步加载数据 $.get('data.json').done(function (data) {
// 填入数据
myChart.setOption({
xAxis: {
data: data.categories
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: data.data
}]
});
只需要将数据填充进入就可以了。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对软件开发网的支持。










