欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-20 21:52:58
前言 最近在学习echarts,学习到了异步更新和数据加载这一块,觉着有必要总结一下,方法以后的时候参考学习,在开始本文之前,对echarts不熟悉的朋友们可以参考下这篇...

前言

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

使用方法

使用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

 }]

});

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

总结

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