大家好,最近接到的需求,绘制相应的图表。项目是在uniapp开发的,运行在微信小程序。
由于是图表的相关的需求,一时间就想到了echarts,官网的echarts也支持了小程序的开发(不过是原生的),通过网上搜索的方案和插件市场的最后选择了mpvue-charts 这个库来解决图表问题
1.通过npm 下载 mpvue-charts
2.封装组件
首先将node_modules中的mpvue-echarts文件夹放入components目录下,只保留其中的src文件夹
3.通过echarts 官网自定义选择相应的需要用的类型,之后下载相应的js包(本人使用的5.10版本),放入到你需要放入的项目文件地址
4.修改相应的代码
导入相应的文件
注释掉props 中的echarts
在生命周期中重新添加echarts 属性
修改this
5.在文件中使用
option 配置可以看ehcarts文档配置
6.由于项目中使用到了echarts地图,在用该方法绘制时会报错,查询后通过降低版本的方式来解决了错误
echarts 版本 <=4.90即可(下载了4.90版本来解决)
以上就是我在uniapp中使用 mpvue-charts 使用和踩坑记录,希望能帮到你.