小程序如何绘图?
小程序项目首次接触绘图,内心恍惚,但是作为一名合格的coder,表面还是要保持蛋定。
对于绘图,一般都是PC端使用echarts,移动端使用antv F2。
在看过UI设计的图之后,果断选择了echarts。为啥?因为UI直接在echarts扩展里找的图啊,有现成的配置,直接要地址简单修改下,为啥还要浪费时间去配置绘图呢?😜
绘图使用:
- mpvue-charts (github.com/avocadowang…)
- echarts.apache.org/zh/builder.… (按需下载自己所需的绘图组件)
- echarts绘图配置(echarts.apache.org/zh/tutorial…
mpvue-echarts的echart.vue文件需要进行如下修改 + .in(this)
简单看下mpvue-echarts上的使用 (github.com/avocadowang…
事例展示的是静态的数据,但是在我们的项目中的话数据都是变化的,这时候看下github.com/avocadowang… 这个事例懒加载数据,非常nice。
echarts在小程序上有些暂不支持的功能需要注意
看完git上的事例,再加上echarts绘图配置,基本能实现产品的需求了
绘图总结
绘图到这就完成了,但是呢,实际的效果体验上会有一些奇奇怪怪的问题(从项目中提现的问题👇👇👇)
缺点
在实际体验中苹果系统和安卓系统的体验会相差很大,苹果系统上体验都很正常,而在安卓手机上绘图的tooltip会有问题,体验较差
优点
对于熟悉echarts的coder来说,可以快速、尽情的还原设计图