canvas画条形图 微信小程序_微信小程序内使用canvas绘制自定义折线图表

话不多说，最终实现效果如下：

图中难点：

最左或者最右边的气泡需要做动态偏移

本项目是由mpvue写的小程序：所以用的是vue的书写格式(微信小程序可以自行修改)：

使用方法：

将下列代码新建linechart.vue文件

再项目中调用本组件的drawAll方法传入日期和值即可

代码中有少量注解请不懂的给我留言

export default {

data() {

return {

canvasWidth: 375,

canvasHeight: 123,

date: ['-/-','-/-','-/-','-/-','-/-','-/-','-/-'],

value: [0,0,8,10,6,0,0,],

len: 4,

xcoords: []

}

},

onLoad() {

this.drawAll()

},

methods: {

drawAll(date, value) {

this.date = date || this.date

this.value = value || this.value

var ctx = wx.createCanvasContext('canvasline')

this.roundRect(ctx, this.px2PX(10), 0, this.px2PX(this.canvasWidth) - this.px2PX(20), this.px2PX(this.canvasHeight), this.px2PX(8), '#F5F3ED');

this.drawYLine(ctx, this.px2PX(20), 0, this.px2PX(20), this.px2PX(this.canvasHeight),this.px2PX(55), this.px2PX(1), 'white')

this.drawXLine(ctx, this.len, this.px2PX(1), 'white');

this.drawLine(ctx, this.px2PX(1.5), this.px2PX(3))

ctx.draw()

},

px2PX(px) { // px (Int) 375为设计稿宽度，根据屏幕动态设置像素大小解决模糊问题和适配

return (wx.getSystemInfoSync().screenWidth / 375) * Number(px)

},

/**

*

* @param {CanvasContext} ctx canvas上下文

* @param {number} x 圆角矩形选