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 }] });
只需要将数据填充进入就可以了。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对毛票票的支持。