vue在使用ECharts时的异步更新和数据加载详解
前言
最近在学习eCharts，学习到了异步更新和数据加载这一块，觉着有必要总结一下，方法以后的时候参考学习，在开始本文之前，对eCharts不熟悉的朋友们可以参考下这篇文章：https://www.nhooo.com/article/128790.htm 下面话不多说了，来一起看看详细的介绍吧。
使用方法
使用Echarts首先得先把Echarts.js引进来（放在文件的入口html文件里面）
在绘图前我们需要为ECharts准备一个具备高宽的DOM容器
初始化一个echarts实例并通过setOption方法生成一个你想要的图表类型,
首先先把，echarts里setOption的option,单独领出来，初始化放在data里
data(){return{
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}
{b}:{c}({d}%)"
},
series:[
{
type:'pie',
radius:'55%',
data:[
].sort(function(a,b){returna.value-b.value;}),
roseType:'angle',
}
]
},
}
}
下面是在methods里初始化的一个方法，
drawLineChart(){
this.lineChartOrder=echarts.init(document.getElementById('lineChartOrder'));
this.lineChartOrder.setOption(this.getSetOption);
},
然后在mounted里调用这个方法
this.drawLineChart(),
接下来就就是数据异步加载与更新了。
以下的代码是本地的json类型，异步加载数据时只要填入数据，然后在series里根据名字对应到相应的系列就可以了。
getOrderTotal(){//获取一段时间内的订单统计
api.getOrderStatistical(this.begin,this.end,this.kId)
.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:'订单统计'
},
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
}]
});
只需要将数据填充进入就可以了。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。