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

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

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

首先看看官方提供的模态d窗

api如下：

示例：

这样的模态d窗，充其量只能做个alert，提示一下信息。

但是并不能使用它来处理复杂性的d窗业务，因此写了Michael从新自定义了一个，采用了仿原生的样式写法

wxml：

wxss：

js:

相关连接： >

原生小程序前端设置灰色模式：

wxml

<view class="grayscale"> <view class="content"></view> 小程序代码</view>

wxss

grayscale content,grayscale text,grayscale button { -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%);}

第三方UI组件/库（如：vant）

grayscale van-goods-action,grayscale van-submit-bar,grayscale van-swipe-cell { -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%);}

切忌直接设置

page { filter: grayscale(100%);}

小结：简单来说，就是把样式控制明确到具体的标签。 接下来讲我们利用小程序的数据预拉取来实现动态开关。

之所以选择使用数据预拉取来控制，是因为灰色模式并不是我们日常运营所需，如果单独封装到一个请求中去，会造成不必要的资源浪费，而且数据预拉取会在用户每次访问小程序的时候都会执行一次，所以能够保证尽可能实时获取到最新的状态，但是因为本身也是异步请求，所以无法100%保证页面加载完之前，就能够实时响应，所以返回的class并没有直接设置在全局变量globalData中，而是先存到本地存储Storage里，当我们在小程序后台关闭数据预拉取后，小程序端便不会再去请求相关接口，这样就做到了随时控制开关的效果了

一、在 appjson 的 window 对象中定义导航的样式：

这样你会发现所有页面的导航栏都不见了。如果还有其他页面需要导航栏的，那就模仿小程序的导航栏按照以下步骤。

二、首先要在 appjs 的 onLaunch 方法里面获取手机状态栏高度，全局定义导航高度 navHeight ：

注意！！！全局定义导航高度 navHeight ！！！

我发现很多人会遇到 navHeight 是 undefined 这个问题。在这里说明一下，这个 navHeight 需要在 appjson 里面定义好：

三、在需要导航的 页面 Page 拿到全局变量导航高度：

四、页面展示：

五、附上样式，可以写在 appwxss ：

六、界面效果：

以上就是关于微信小程序：自定义柱状图全部的内容，包括:微信小程序：自定义柱状图、微信小程序之自定义模态d窗（带动画）实例、小程序样式如何变黑白等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！