在 web 中引入echart可视化图表是很常见的操作,那在小程序当中又如何引入使用呢

在引用ec-canvas时,相对路径引入正确即可

 
 
 
 
 
 

 


 

 唯一需要注意的是,不要更改图表渲染的内部数据结构,当后台返回的接口中的数据结构字段与图表不一致时
 


 

 比如:上面的legend与series下的data中的name与value字段,当后端返回的子段不一样时,只需要在前台重新处理一下即可
 
 

 上面的更新数据中后台返回字段时money与type,在更新数据时,需要重新赋值
 
 

 最后需要setOption重新设置数据,否则图表数据是不会更新的,这个与vue-echarts与单独使用echarts有点不一样
 
 
 

 
 
 
 

 主要介绍了在小程序中怎么引入图表echarts,是使用ec-canvas这个组件,在使用ec-canvas时,需要注意:
 
 

 引入ec-canvas组件的路径,同时,还需要在使用的页面当中,引入组件的echart.js文件
 
 

 图表的基本配置,可以参考echarts的官方文档,更新图表的数据时,需要注意:保持结构一致性,不要修改图表内部数据结构的字段
 
 

 当后端返回的数据字段与图表字段不一致时,在你拿到数据接口的数据后,重新赋值即可.最后不要忘记重新setOption设置数据
 

以前我也遇到过这个问题，没找到方法解决。但是echarts最近更新了不少配置，现在很容易就可以实现你这个需求了。