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函数，就是从后台读取渲染图表须要的数据。若是看了代码还有什么不懂的能够评论区评论或者留言，我将会在第一时间解答。