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

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

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

在实现选座组件前，我们这里先介绍一下，我们需要的座位表数据结果

其中x、y代表这个座位在整个座位表中的横轴和纵轴坐标，下面我们就针对这个数据结果展开实现这个选座组件

下面创建并且在init初始化模版:

这里还需要动态的计算 seatComponent 和 seat-container 的大小

在渲染座位前，我们先写一个 setData 方法来注入座位信息

通过 _getWrapperSize 方法算出最大x和y，然后根据容器的大小算出每一个座位占用的大小。绝对定位每一个座位，一个座位的left：“座位大小 座位的x+偏移量”，top：“座位大小 座位的y”，这样遍历整个座位列表我们就可以得到整个座位图:

接下去实现，拖动座位图和放大缩小功能:

这里监听容器的 touchstart 、touchmove 、touchend 判断etoucheslength长度来判断指数，进行缩放或者移动的处理。

下面写监听点击了座位的事件，并抛出外部数据

以上基本已经完成了座位表的功能，不过有一个缺点，不能根据指定缩放位置缩放

taro单独为某个项目切换taro版本环境

单独为某一个项目升级#这样做的好处是全局的 Taro 版本还是 1x 的，多个项目间的依赖不冲突，其余项目依然可以用旧版本开发。 如果你的项目里没有安装 Taro CLI，你需要先装一个：

# 如果你使用 NPM

$ npm install --save-dev @tarojs/cli@2x

# 如果你使用 Yarn

$ yarn add -D @tarojs/cli@2x

echarts在小程序中滑动卡顿

由于微信小程序中，echarts的层级最高，无论设置多大层级也无法遮住echarts。而且小程序中好像只能用echarts吧。所以为了解决这个bug，我只能委屈求全了。打开ec-canvaswxml文件，将touchStart、touchMove和touchEnd去掉了，直接删除就好啦。这三个事件应该是做缩放的吧，我们也没有这个缩放的需求。所以就去掉了。虽然暂时满足的需求，还是没有真正的解决问题。

原：

bindinit="init"

bindtouchstart="{{ ecdisableTouch '' : 'touchStart' }}"

bindtouchmove="{{ ecdisableTouch '' : 'touchMove' }}"

bindtouchend="{{ ecdisableTouch '' : 'touchEnd' }}"

现：

bindinit="init"

echarts在小程序中无法跟随页面滑动

在卡顿问题中能与echarts交互少的，可以直接使用代替cannvas，即在echarts渲染完毕后将它替换为一张。

如果我更新了数据，那么就重新放出echarts，等它渲染完毕后，再次替换为一张。

charton('finished', () => {

getCurrentInstance()pageselectComponent(id)canvasToTempFilePath({

success: res => {

consolelog('restempFilePath====',restempFilePath)

thissetState({

echartImgSrc: restempFilePath

      })

},

    fail: res =>consolelog('转换失败', res)

});

})

render:

thisstateechartImgSrc ==''

  ref={thisrefChart}

id={thisstateid}

canvas-id="mychart-area"

  force-use-old-canvas="true"

  ec={thisstateec}

/>

:

<CoverImage src={thisstateechartImgSrc}></CoverImage>

以上就是关于微信小程序：自定义柱状图全部的内容，包括:微信小程序：自定义柱状图、小程序实现在线选座实战(中)、微信小程序开发中遇到的坑及解决办法等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！