前言
最近在学习eCharts，学习到了异步更新和数据加载这一块，觉着有必要总结一下，方法以后的时候参考学习，在开始本文之前，对eCharts不熟悉的朋友们可以参考下这篇文章： 下面话不多说了，来一起看看详细的介绍吧。
使用方法
使用Echarts首先得先把Echarts.js引进来（放在文件的入口html文件里面）
在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器
初始化一个 echarts 实例并通过 setOption 方法生成一个你想要的图表类型,
首先先把，echarts里setOption的option,单独领出来，初始化放在data里
getSetOption: {//折线图
title: {
text: null
},tooltip: {
trigger: 'axis'
},grid: {
left: '3%',right: '4%',bottom: '3%',containLabel: true
},yAxis: {
type: 'value'
},legend: {
data: []
},xAxis: {
type: 'category',data: []
},series: [
{
name: null,type: 'line',stack: '总人数',data: []
}
]},getPieOption: {//饼图
title: {
text: null
},tooltip: {
tooltip: 'item',formatter: "{a} <br/> {b} : {c} ({d}%)"
},series : [
{
type: 'pie',radius: '55%',data:[
].sort(function(a,b){return a.value - b.value;}),roseType: 'angle',}
]}, }
}
下面是在methods里初始化的一个方法，
this.lineChartOrder.setOption(this.getSetOption);
},
接下来就就是数据异步加载与更新了。
以下的代码是本地的json类型，异步加载数据时只要填入数据，然后在series里根据名字对应到相应的系列就可以了。
.then(res => {
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: '订单<a href="https://www.jb51.cc/tag/tongji/" target="_blank" class="keywords">统计</a>'
},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()@H_403_53@ ，清空option，最后this.lineChartOrder.setOption(option,false,false)@H_403_53@ 。
这样就可以清掉了。
以下是官网异步数据加载与更新的方法，会相对简单些。
// 填入数据
myChart.setOption({
xAxis: {
data: data.categories
},series: [{
// 根据名字对应到相应的系列
name: '销量',data: data.data
}]
});
只需要将数据填充进入就可以了。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对编程之家的支持。
原文链接：https://www.f2er.com/vue/35084.html