摘要：
最近，我们在该公司开发了一个微信小部件，根据客户的需求用饼图显示当前设备状态。所以我们在网上搜索了各种各样的资料，找到了许多mpvue使用eccharts的图表，最后找到了一篇关于mpvue如何使用ecchart的文章。点击这里的链接，需要学生自己检查。这说明了如何使用椭圆曲线绘制图表。您可以查看eccharts的官方文档以配置eccharts配置项选项。请移至此处并单击相应的示例。有详细的选项配置。还有一些关于eccharts的参数和配置手册。
最近在公司开发一款微信小程序，按照客户需求用饼状图显示当前设备状态（开机、故障、关机），于是就在网上寻找各种资料，找了很多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, 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 100%; 89 font-size: 14px; 90 } 91 .wrap { 92 100%; 93 height: 200px; 94 margin: 30px auto; 95 margin-top: 0px; 96 } 97 </style>
按照其他博客介绍，echarts的option配置选项是写到图表初始化函数initChart中，我这里把配置项option提出来写到test函数中目的就是根据后台数据多次渲染图表，echarts图表多次渲染的原理就是更换配置项中的某些值，然后chart.setOption(option)。这里有一个getMachineStateInfo函数，就是从后台读取渲染图表需要的数据。如果看了代码还有什么不懂的可以评论区评论或者留言，我将会在第一时间解答。