uniapp引入图表,是用echarts?还是ucharts?各有利弊

18 阅读2分钟

在uniapp开发一个复杂图表时遇见一个选型问题,在pc端基本echarts是不二选择,在uniapp移动端应该用什么呢

具体建议如何选择可以直接看总结

echarts

一开始直接从官网下载js文件操作画图在电脑上画图,然后发到真机测试发现问题了,注册echarts时有下面一个操作

const echarts=document.getElementById('#echarts')

即获取dom然后生成canvas,H5可以直接获得,但是打包成的app不能,不支持直接获取dom元素,document不存在

找半天兼容方法,发现在插件市场找到了有兼容echarts的插件如下

image-20250620144043477

链接在这

具体引入方法上面有文档,不再具体介绍

优点

api多,配置项多,支持配置复杂图表

缺点

包大,完整包1M左右,可以通知定制版替换,但依然不小,我选择了两个图表大概在400多KB

定制打包链接:echarts.apache.org/zh/builder.…

小插曲

我在通过该方法引用后,发现监听事件一直报错 如下 image.png 最后发现是电脑点击事件才会报这个错误,调成模拟成手机就好了,这个错误不影响正常使用,手机模式下不会报错

ucharts

在插件市场这个是图表类下载最高的

image-20250620145424283

我们项目一开始就引入的该插件,具体介绍可见官网

优点

插件体积小,完整版也只有170KB左右,用户量大,兼容性好

缺点

配置没有echarts丰富,定制版要收费

总结

图表较为复杂、不考虑体积大小、只有H5页面选echarts

多端、体积小、对图表要求不复杂选ucharts