vue在使用ECharts时的异步更新和数据加载详解

2020-06-16 05:55:57易采站长站整理

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

}]

});

只需要将数据填充进入就可以了。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对软件开发网的支持。