快捷導(dǎo)航

vue在使用ECharts時(shí)的異步更新和數(shù)據(jù)加載詳解

更新時(shí)間：2017年11月22日 11:31:32 作者：Mona-雅

這篇文章主要給大家介紹了關(guān)于vue在使用ECharts時(shí)的異步更新和數(shù)據(jù)加載的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。

前言

最近在學(xué)習(xí)eCharts，學(xué)習(xí)到了異步更新和數(shù)據(jù)加載這一塊，覺(jué)著有必要總結(jié)一下，方法以后的時(shí)候參考學(xué)習(xí)，在開(kāi)始本文之前，對(duì)eCharts不熟悉的朋友們可以參考下這篇文章：http://www.dbjr.com.cn/article/128790.htm 下面話(huà)不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹吧。

使用方法

使用Echarts首先得先把Echarts.js引進(jìn)來(lái)（放在文件的入口html文件里面）

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

在繪圖前我們需要為 ECharts 準(zhǔn)備一個(gè)具備高寬的 DOM 容器

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

初始化一個(gè) echarts 實(shí)例并通過(guò) setOption 方法生成一個(gè)你想要的圖表類(lèi)型,

首先先把，echarts里setOption的option,單獨(dú)領(lǐng)出來(lái)，初始化放在data里

data() { return { 

　　　　

getSetOption: {//折線(xiàn)圖

    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: '總?cè)藬?shù)',

      data: []

     }

    ]

   },

 

   getPieOption: {//餅圖

    title: { 

     text: null 

    },

 

    tooltip: {

     tooltip: 'item',

     formatter: "{a} <br/>  : {c} (vvxyksv9kd%)"

    },

    series : [

     {

      type: 'pie',

      radius: '55%',

      data:[

      ].sort(function(a,b){return a.value - b.value;}),

      roseType: 'angle',

     }

    ]

   },

　　}

}

下面是在methods里初始化的一個(gè)方法，

drawLineChart() {

   this.lineChartOrder = echarts.init(document.getElementById('lineChartOrder'));

   this.lineChartOrder.setOption(this.getSetOption); 

  },

然后在mounted里調(diào)用這個(gè)方法

  this.drawLineChart(),

接下來(lái)就就是數(shù)據(jù)異步加載與更新了。

以下的代碼是本地的json類(lèi)型，異步加載數(shù)據(jù)時(shí)只要填入數(shù)據(jù)，然后在series里根據(jù)名字對(duì)應(yīng)到相應(yīng)的系列就可以了。

   getOrderTotal(){//獲取一段時(shí)間內(nèi)的訂單統(tǒng)計(jì)

   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: '訂單統(tǒng)計(jì)'

      },

      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的數(shù)據(jù)是直接merge的，所以當(dāng)出現(xiàn)多條折線(xiàn)時(shí)，如果當(dāng)天的數(shù)據(jù)為0，或者后臺(tái)傳過(guò)來(lái)的數(shù)據(jù)為空的時(shí)候，setOption的值根本就沒(méi)有更新，而是直接merge了，所以這個(gè)問(wèn)題就頭大了。

對(duì)于這個(gè)問(wèn)題的解決方法是

用getOption取到已經(jīng)存在的option, 然后用this.lineChartOrder.setOption.clear() ，清空option，最后this.lineChartOrder.setOption(option, false, false) 。

這樣就可以清掉了。

以下是官網(wǎng)異步數(shù)據(jù)加載與更新的方法，會(huì)相對(duì)簡(jiǎn)單些。

// 異步加載數(shù)據(jù)

 $.get('data.json').done(function (data) {

// 填入數(shù)據(jù)

 

myChart.setOption({

 

 xAxis: {

  data: data.categories

 },

 series: [{

  // 根據(jù)名字對(duì)應(yīng)到相應(yīng)的系列

  name: '銷(xiāo)量',

  data: data.data

 }]

});

只需要將數(shù)據(jù)填充進(jìn)入就可以了。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: