1. 程式人生 > >小程式柱狀折線雙圖

小程式柱狀折線雙圖

注意要點:

1,通過小程式提供的canvas元件來繪製。需要注意地方是自定義的元件的包含canvas的時候,建立 canvas 繪圖上下文需要使用wx.createCanvasContext(canvasId, this),有疑問請檢視微信小程式api介紹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); }
效果圖: