微信小程序绘图 uniapp项目 echarts 使用

3,711 阅读1分钟

小程序如何绘图?

小程序项目首次接触绘图,内心恍惚,但是作为一名合格的coder,表面还是要保持蛋定。

对于绘图,一般都是PC端使用echarts,移动端使用antv F2。

在看过UI设计的图之后,果断选择了echarts。为啥?因为UI直接在echarts扩展里找的图啊,有现成的配置,直接要地址简单修改下,为啥还要浪费时间去配置绘图呢?😜

绘图使用:

mpvue-echarts的echart.vue文件需要进行如下修改 + .in(this)

image.png

简单看下mpvue-echarts上的使用 (github.com/avocadowang…

事例展示的是静态的数据,但是在我们的项目中的话数据都是变化的,这时候看下github.com/avocadowang… 这个事例懒加载数据,非常nice。

image.png echarts在小程序上有些暂不支持的功能需要注意

看完git上的事例,再加上echarts绘图配置,基本能实现产品的需求了

绘图总结

绘图到这就完成了,但是呢,实际的效果体验上会有一些奇奇怪怪的问题(从项目中提现的问题👇👇👇)

缺点

在实际体验中苹果系统和安卓系统的体验会相差很大,苹果系统上体验都很正常,而在安卓手机上绘图的tooltip会有问题,体验较差

优点

对于熟悉echarts的coder来说,可以快速、尽情的还原设计图