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

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根据需要，是否都需要刷新。

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

首先登陆微信公布的简易教程网页，登陆上去后，点击导航栏上方的“工具”按钮。然后点击左侧边的导航栏“下载”按钮。 微信小程序开发工具有windows 64,windows 32和mac版本，根据自己的电脑情况，下载适合自己的版本。 把微信小程序开发工具下载回

在进行 小程序开发之前，你首先需要一个 小程序账号，才能进行开发设计。点击公众平台的链接，正登陆和注册之间，选择注册。你会看到有好几个选择，如订阅号、企业号、服务号和小程序，选择小程序点击确定；小程序注册的前提是，没有注册过任何的微公众平，如未注册过订阅号、服务号之类的。邮箱要求也是“未被公众平台注册，未被开放平台注册，未被个人 号绑定的邮箱”；根据自己的信息，进行邮箱的填写和密码的输入。如果邮箱正确就没有错误提示，在明确密码以及重复确认密码之后，输入验证码，勾选协议就可以实现注册；在点击注册之后，会有一个邮箱的验证，登录邮箱，在收件箱你会看到一个weixinteam的邮件，打开，点击验证链接。点击验证链接之后，会直接跳转到注册的第三步，信息的登记填写，选择相应的小程序主体类型，可以看到只有四个选项，选择；主体选择类型之后，可以看到需要类型、名称、营业等。如果是个人的话，可以随便写一下，到时候会验证失败，不影响小程序的测试，直接进行下面管理员信息登记；在管理员身份认证的时候，需要填写身份z、姓名、手机号、以及手机号验证和 管理员的身份验证等。点击确定之后，会d出一个信息确认的消息（一经确定就不能更改的消息）。然后点击确定，就会告诉你信息填写完整，但是审核还未通过，但是可以测试小程序了。进入主体之后，就可以各种测试、开发小程序了。当然如果上线测试的话，还是需要验证通过才可以。

---