小程序双折线图

素颜马尾好姑娘i 2022-05-27 00:12 115阅读 0赞

##### 注意要点： #####

1，通过小程序提供的canvas组件来绘制。需要注意地方是自定义的组件的包含canvas的时候，创建 canvas 绘图上下文需要使用wx.createCanvasContext(canvasId, this)，有疑问请查看微信小程序api介绍[https://developers.weixin.qq.com/miniprogram/dev/api/canvas/create-canvas-context.html][https_developers.weixin.qq.com_miniprogram_dev_api_canvas_create-canvas-context.html]  
2，使用canvasContext.setLineDash虚线完成之后，可以通过以下方式让之后的线条变回实线。

canvasContext.setLineDash([10,0],0)

3，使用canvasContext.createLinearGradient渐变之后，可以通过以下方式让之后的画笔回归正常效果

let bgrd = context.createLinearGradient(0, 0, 1, 1);
      bgrd.addColorStop(0, items.point.bColor)
      bgrd.addColorStop(1, items.point.bColor)
      context.setFillStyle(bgrd);

4,监听滑动查看效果的时候不用频率太快，只需要每次滑动大小大于x轴间距的一般就行，不然会出现渲染缓慢。

if (Math.abs(e.touches[0].x - this.config.touchDetail.x) > this.config.xAxis.padd / 2) {
        this.config.touchDetail.isShow = true;
        this.config.touchDetail.x = e.touches[0].x;
        this.config.touchDetail.y = e.touches[0].y;
        drawCharts.call(this, this.config.type, this.opts, this.config, this.context);
    }

##### 效果图： #####

![双折线图][70]  
git地址：[https://github.com/fuxingkai/frankui-weapp][https_github.com_fuxingkai_frankui-weapp]

[https_developers.weixin.qq.com_miniprogram_dev_api_canvas_create-canvas-context.html]: https://developers.weixin.qq.com/miniprogram/dev/api/canvas/create-canvas-context.html
[70]: /images/20220527/93c57f56f99847a3b0d8cfd1efe63eb8.png
[https_github.com_fuxingkai_frankui-weapp]: https://github.com/fuxingkai/frankui-weapp