mpvue 使用echarts動態繪製圖表（數據改變從新渲染圖表）

　　最近在公司開發一款微信小程序，按照客戶需求用餅狀圖顯示當前設備狀態（開機、故障、關機），因而就在網上尋找各類資料，找了不少mpvue使用關於echarts繪製圖表，最終功夫不負有心人，找到一篇關於mpvue使用echarts的文章，連接點擊這裏，須要的同窗自行查看。這裏面說明了如何使用echarts繪製圖表，其中echarts的配置項option你們能夠查看echarts的官方文檔進行配置，請移步這裏，點擊對應的實例，裏面就有詳細的option配置，還有一些關於echarts使用參數及配置手冊請看這裏。

　　下面我將爲你們介紹如何會根據後臺返回的數據屢次渲染圖表，先給你們看一段mpvue中使用echarts的代碼

　　

 1 <template>
 2   <div class="container">
 3     <div class="echarts">
 4       <div class="wrap">
 5         <mpvue-echarts :echarts="echarts" :onInit="initChart" />
 6       </div>
 7     </div>
 8   </div>
 9 </template>
10 <script>
11 import machineList from './machineList'
12 import * as echarts from '../../../static/echarts/echarts.min'
13 import mpvueEcharts from 'mpvue-echarts'
14 let chart = null
15 export default { 16  data () { 17     return { 18  echarts, 19       IN_PRODUCTION: 1, 20       IN_STAND: 1, 21       OFF_LINE: 1, 22       BREAKDOWN: 1, 23  machineList: [], 24       showState: false, 25       machineState: 'IN_PRODUCTION'
26  } 27  }, 28  components: { 29  mpvueEcharts, 30  machineList 31  }, 32  onLoad () { 33     this.getMachineStateInfo() 34  }, 35  methods: { 36  stateChange (val) { 37       this.machineState = val 38  }, 39  test () { 40       var option = { 41         calculable: false, 42  series: [ 43  { 44             type: 'pie', 45             radius: '55%', 46             center: ['50%', '60%'], 47  data: [ 48               {value: this.IN_PRODUCTION, name: '開機 : ' + this.IN_PRODUCTION}, 49               {value: this.OFF_LINE, name: '關機 : ' + this.OFF_LINE}, 50               {value: this.BREAKDOWN, name: '故障 : ' + this.BREAKDOWN} 51  ] 52  } 53  ] 54  } 55  chart.setOption(option) 56  }, 57  initChart (canvas, width, height) { 58       chart = echarts.init(canvas, 'light', { 59  width: width, 60  height: height 61  }) 62  canvas.setChart(chart) 63       return chart 64  }, 65  async getMachineStateInfo () { 66       let resp = await this.$http.get('machine/state/count') 67       if (resp.data.code === 1) { 68         this.IN_PRODUCTION = resp.data.data.machineOpen 69         this.OFF_LINE = resp.data.data.machineClosed 70         this.BREAKDOWN = resp.data.data.machineAlarm 71         setTimeout(() => { 72           this.test() 73         },1000) 74       } else { 75  wx.showToast({ 76  title: resp.data.message, 77           icon: 'none', 78           duration: 3000
79  }) 80  } 81  } 82  } 83 } 84 </script>
85 
86 <style scoped>
87  .echarts{ 88     width: 100%; 89     font-size: 14px; 90  } 91  .wrap { 92     width: 100%; 93  height: 200px; 94  margin: 30px auto; 95     margin-top: 0px; 96  } 97 </style>

mpvue 使用 echarts

　　按照其餘博客介紹，echarts的option配置選項是寫到圖表初始化函數initChart中，我這裏把配置項option提出來寫到test函數中目的就是根據後臺數據屢次渲染圖表，echarts圖表屢次渲染的原理就是更換配置項中的某些值，而後chart.setOption(option)。這裏有一個getMachineStateInfo函數，就是從後臺讀取渲染圖表須要的數據。若是看了代碼還有什麼不懂的能夠評論區評論或者留言，我將會在第一時間解答。