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函數，就是從後臺讀取渲染圖表須要的數據。若是看了代碼還有什麼不懂的能夠評論區評論或者留言，我將會在第一時間解答。