mpvue 使用echarts动态绘制图表（数据改变重新渲染图表）

　　最近在公司开发一款微信小程序，按照客户需求用饼状图显示当前设备状态（开机、故障、关机），于是就在网上寻找各种资料，找了很多mpvue使用关于echarts绘制图表，最终功夫不负有心人，找到一篇关于mpvue使用echarts的文章，链接点击这里，需要的同学自行查看。这里面说明了如何使用echarts绘制图表，其中echarts的配置项option大家可以查看echarts的官方文档进行配置，请移步这里，点击对应的实例，里面就有详细的option配置，还有一些关于echarts使用参数及配置手册请看这里。

　　下面我将为大家介绍如何会根据后台返回的数据多次渲染图表，先给大家看一段mpvue中使用echarts的代码

　　

 <template>
   <div class="container">
     <div class="echarts">
       <div class="wrap">
         <mpvue-echarts :echarts="echarts" :onInit="initChart" />
       </div>
     </div>
   </div>
 </template>
 <script>
 import machineList from './machineList'
 import * as echarts from '../../../static/echarts/echarts.min'
 import mpvueEcharts from 'mpvue-echarts'
 let chart = null
 export default {
   data () {
     return {
       echarts,
       IN_PRODUCTION: 1,
       IN_STAND: 1,
       OFF_LINE: 1,
       BREAKDOWN: 1,
       machineList: [],
       showState: false,
       machineState: 'IN_PRODUCTION'
     }
   },
   components: {
     mpvueEcharts,
     machineList
   },
   onLoad () {
     this.getMachineStateInfo()
   },
   methods: {
     stateChange (val) {
       this.machineState = val
     },
     test () {
       var option = {
         calculable: false,
         series: [
           {
             type: 'pie',
             radius: '55%',
             center: ['50%', '60%'],
             data: [
               {value: this.IN_PRODUCTION, name: '开机 : ' + this.IN_PRODUCTION},
               {value: this.OFF_LINE, name: '关机 : ' + this.OFF_LINE},
               {value: this.BREAKDOWN, name: '故障 : ' + this.BREAKDOWN}
             ]
           }
         ]
       }
       chart.setOption(option)
     },
     initChart (canvas, width, height) {
       chart = echarts.init(canvas, 'light', {
         width: width,
         height: height
       })
       canvas.setChart(chart)
       return chart
     },
     async getMachineStateInfo () {
       let resp = await this.$http.get('machine/state/count')
       if (resp.data.code === 1) {
         this.IN_PRODUCTION = resp.data.data.machineOpen
         this.OFF_LINE = resp.data.data.machineClosed
         this.BREAKDOWN = resp.data.data.machineAlarm
         setTimeout(() => {
           this.test()
         },1000)
       } else {
         wx.showToast({
           title: resp.data.message,
           icon: 'none',
           duration: 3000
         })
       }
     }
   }
 }
 </script>

 <style scoped>
   .echarts{
     width: 100%;
     font-size: 14px;
   }
   .wrap {
     width: 100%;
     height: 200px;
     margin: 30px auto;
     margin-top: 0px;
   }
 </style>

mpvue 使用 echarts

　　按照其他博客介绍，echarts的option配置选项是写到图表初始化函数initChart中，我这里把配置项option提出来写到test函数中目的就是根据后台数据多次渲染图表，echarts图表多次渲染的原理就是更换配置项中的某些值，然后chart.setOption(option)。这里有一个getMachineStateInfo函数，就是从后台读取渲染图表需要的数据。如果看了代码还有什么不懂的可以评论区评论或者留言，我将会在第一时间解答。