微信小程序:自定义柱状图

如题所述

第1个回答  2022-06-22

1
EChart在某些配置较低的手机上出现无法交互的情况,换成自定义控件解决了这个问题。

2
新建一个自定义组件,布局如下
wxml

根据官方文档的说法,最好使用canvas2d进行绘制。

3
js
通过SelectorQuery获取canvas对象,这里的in方法用于获取自定义组件中的节点。

node属性用于获取节点实例,即canvas对象,size用于获取节点尺寸,就是canvas的宽高。这里有一个坑,通过节点获取到的画布宽高,仅仅是画布的宽高,想要在真机上正常显示,还需要获取手机的密度,并将画布的宽高乘以密度,canvasContext同样缩放屏幕密度倍数。

pixelRatio,官方说明为像素比,应该就是开发android时,1dp等于多少px。

4
绘制柱状图,其实并不复杂,统计图的要素就那么多。

首先是标题,如果需要标题的话,那么就要在绘制标题时,就需要指定标题的样式,然后预留出标题周围需要的边距。然后可以把绘制标题的方法抽取一个单独的方法。

坐标轴,确认坐标轴原点的位置,要考虑预留出坐标轴名称的位置,预留刻度名称的位置。

当获取到数据时,绘制跟数据有关的部分,也就是刷新方法。

如果需要动态刷新,js的canvas需要把原有的画布内容清空,于是要有一个clear方法。

5
提示条canvas的要覆盖在统计图canvas上,同理要根据屏幕密度对画布进行调整。同时初始化一组跟统计图canvas同样的坐标系
绑定屏幕点击事件bindtouchastart,点击屏幕时记录点击的位置,显示提示条。

6
当手指在屏幕上滑动时,监听事件bindtouchmove,根据滑动距离变化触发页面刷新,统计图canvas,提示条canvas根据需要,是否都需要刷新。

大致思路是这样, 源码 供参考。

相似回答