在uniapp中使用 echarts 图表 记录

2,116 阅读1分钟

大家好,最近接到的需求,绘制相应的图表。项目是在uniapp开发的,运行在微信小程序。

由于是图表的相关的需求,一时间就想到了echarts,官网的echarts也支持了小程序的开发(不过是原生的),通过网上搜索的方案和插件市场的最后选择了mpvue-charts 这个库来解决图表问题

1.通过npm 下载 mpvue-charts
2.封装组件

首先将node_modules中的mpvue-echarts文件夹放入components目录下,只保留其中的src文件夹

image.png

3.通过echarts 官网自定义选择相应的需要用的类型,之后下载相应的js包(本人使用的5.10版本),放入到你需要放入的项目文件地址

4.修改相应的代码 导入相应的文件 image.png
注释掉props 中的echarts image.png 在生命周期中重新添加echarts 属性 image.png 修改this image.png

5.在文件中使用 image.png option 配置可以看ehcarts文档配置 image.png

6.由于项目中使用到了echarts地图,在用该方法绘制时会报错,查询后通过降低版本的方式来解决了错误 echarts 版本 <=4.90即可(下载了4.90版本来解决) image.png 以上就是我在uniapp中使用 mpvue-charts 使用和踩坑记录,希望能帮到你.