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

发布时间：2020-12-17 02:42:40 所属栏目：百科来源：网络整理

导读：前言最近在学习eCharts，学习到了异步更新和数据加载这一块，觉着有必要总结一下，方法以后的时候参考学习，在开始本文之前，对eCharts不熟悉的朋友们可以参考下这篇文章：下面话不多说了，来一起看看详细的介绍吧。使用方法使用Echarts首先得先把Echart

前言

最近在学习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 = echarts.init(document.getElementById('lineChartOrder'));

this.lineChartOrder.setOption(this.getSetOption);

然后在mounted里调用这个方法

接下来就就是数据异步加载与更新了。

以下的代码是本地的json类型，异步加载数据时只要填入数据，然后在series里根据名字对应到相应的系列就可以了。

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

}]

});

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

总结

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!