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

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

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

  
 1 
10 
85 
86 
mpvue 使用 echarts

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

你可能感兴趣的:(mpvue 使用echarts动态绘制图表(数据改变重新渲染图表))