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

2019-11-19 14:52:45

字体：大中小

来源：转载

供稿：网友

前言

最近在学习eCharts，学习到了异步更新和数据加载这一块，觉着有必要总结一下，方法以后的时候参考学习，在开始本文之前，对eCharts不熟悉的朋友们可以参考下这篇文章：//www.VeVB.COm/article/128790.htm 下面话不多说了，来一起看看详细的介绍吧。

使用方法

使用Echarts首先得先把Echarts.js引进来（放在文件的入口html文件里面）

<script src="public/js/echarts.common.min.js"></script>

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器

<div id="main" style="width: 600px;height:400px;"></div>

初始化一个 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} <br/> {b} : {c} ({d}%)"    },    series : [     {      type: 'pie',      radius: '55%',      data:[      ].sort(function(a,b){return a.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 }]});

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

总结

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

上一篇：vue.js开发实现全局调用的MessageBox组件实例代码

下一篇：echarts学习笔记之箱线图的分析与绘制详解