前言

最近在學習eCharts，學習到了異步更新和數據加載這一塊，覺著有必要總結一下，方法以后的時候參考學習，在開始本文之前，對eCharts不熟悉的朋友們可以參考下這篇文章：//m.survivalescaperooms.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} (iwvjtn8m0%)"    },    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)   })