在uniapp开发一个复杂图表时遇见一个选型问题,在pc端基本echarts是不二选择,在uniapp移动端应该用什么呢
具体建议如何选择可以直接看总结
echarts
一开始直接从官网下载js文件操作画图在电脑上画图,然后发到真机测试发现问题了,注册echarts时有下面一个操作
const echarts=document.getElementById('#echarts')
即获取dom然后生成canvas,H5可以直接获得,但是打包成的app不能,不支持直接获取dom元素,document不存在
找半天兼容方法,发现在插件市场找到了有兼容echarts的插件如下
具体引入方法上面有文档,不再具体介绍
优点
api多,配置项多,支持配置复杂图表
缺点
包大,完整包1M左右,可以通知定制版替换,但依然不小,我选择了两个图表大概在400多KB
定制打包链接:echarts.apache.org/zh/builder.…
小插曲
我在通过该方法引用后,发现监听事件一直报错 如下
最后发现是电脑点击事件才会报这个错误,调成模拟成手机就好了,这个错误不影响正常使用,手机模式下不会报错
ucharts
在插件市场这个是图表类下载最高的
我们项目一开始就引入的该插件,具体介绍可见官网
优点
插件体积小,完整版也只有170KB左右,用户量大,兼容性好
缺点
配置没有echarts丰富,定制版要收费
总结
图表较为复杂、不考虑体积大小、只有H5页面选echarts
多端、体积小、对图表要求不复杂选ucharts