今天就跟大家聊聊有关怎么在vue项目中使用ECharts实现异步更新，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

使用方法

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

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

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

<div id="main" ></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项目中使用ECharts实现异步更新有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注亿速云行业资讯频道，感谢大家的支持。