This article has participated in the activity of “New person creation Ceremony”, and started the road of digging gold creation together.

This period of time has been in the development of wechat small program, Echarts map surface components with more, so share with you the most rapid development method. (After writing a small achievement, I think it is very interesting, I will share with you)

1. First of all, the chart class generally creates components on canvas

According to the version of wechat small program developer tool and mobile wechat, it can be divided into two versions of Canvas, old and new, so that it can be used regardless of the new and old versions.

Old: <canvas wx:else class="ec-canvas" Canvas-id ="{{canvasId}}" bindinit="init" bindTouchStart ="{{ec.disabletouch? '' : 'touchStart' }}" bindtouchmove="{{ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? ':'touchEnd'}}"></canvas> <canvas wx:if="{{isUseNewCanvas}}" type="2d" class="ec-canvas" canvas-id="{{ canvasId }}" bindinit="init" bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"></canvas>Copy the code

Note: Canvas-id, Bindinit, BindTouchStart, BindTouchMove, bindTouchEnd are all mandatory

2. Define parameters

Because this is a Component, we receive arguments in Component({})

Component({
  properties: {
    canvasId: {
      type: String,
      value: 'ec-canvas'
    },

    ec: {
      type: Object
    },
  }
})
Copy the code

CanvasId: the id and ec of the current canvas. This is mandatory. This means whether the canvas is lazy to load

3. Development of some common methods for developing this component (to support normal use of the current component)

Introduction of ECharts JS package (Baidu search echarts.js download)

import * as echarts from './echarts';
Copy the code

inreadyEcharts register handler setup

ready: function () { echarts.registerPreprocessor(option => { if (option && option.series) { if (option.series.length > 0) { option.series.forEach(series => { series.progressive = 0; }); } else if (typeof option.series === 'object') { option.series.progressive = 0; }}}); if (! This.data.ec) {console.warn(' Components need to bind ec variables, for example: <ec-canvas id="mychart-dom-bar" ' + 'canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>'); return; } if (! this.data.ec.lazyLoad) { this.init(); }},Copy the code

Next up is themethodsinechartsInitialization of (old and new are included)

methods:{ init: function (callback) { const version = wx.getSystemInfoSync().SDKVersion const canUseNewCanvas = compareVersion(version, '2.9.0') > = 0; const forceUseOldCanvas = this.data.forceUseOldCanvas; const isUseNewCanvas = canUseNewCanvas && ! forceUseOldCanvas; this.setData({ isUseNewCanvas }); If (forceUseOldCanvas && canUseNewCanvas) {console.warn(' developer forced to use old canvas, recommended to close '); } if (isUseNewCanvas) {// console.log(' wechat Base library version is greater than 2.9.0, start using <canvas type="2d"/>'); // 2.9.0 Can use <canvas type="2d"></canvas> this.initBynewWay (callback); } else {const isValid = compareVersion(version, '1.9.91') >= 0 if (! IsValid) {console.error(' wechat base library version is too early, must be greater than or equal to 1.9.91. '+' a '+' see: https://github.com/ecomfe/echarts-for-weixin E4 AE BE E5 # % % % % % BF % % E7%89% 88% E6 A1 A6 E8 AC % % % % 9 c % 81% % E6 B1%82 '); return; } else {console.warn(' It is recommended to adjust the wechat base library to version 2.9.0 or higher. Drawing will have better performance after upgrade '); this.initByOldWay(callback); }, initByOldWay(callback) {// 1.9.91 <= version < 2.9.0: CTX = wx.createcanvasContext (this.data.canvasid, this); const canvas = new WxCanvas(ctx, this.data.canvasId, false); echarts.setCanvasCreator(() => { return canvas; }); // const canvasDpr = wx.getSystemInfosync ().pixelRatio const canvasDpr = 1 var query = wx.createSelectorQuery().in(this); query.select('.ec-canvas').boundingClientRect(res => { if (typeof callback === 'function') { this.chart = callback(canvas, res.width, res.height, canvasDpr); } else if (this.data.ec && typeof this.data.ec.onInit === 'function') { this.chart = this.data.ec.onInit(canvas, res.width, res.height, canvasDpr); } else { this.triggerEvent('init', { canvas: canvas, width: res.width, height: res.height, canvasDpr: CanvasDpr // added DPR to facilitate external echarts.init}); } }).exec(); InitByNewWay (callback) {// version >= 2.9.0: Const Query = wx.createsElectorQuery ().in(this) query.select ('.ec-canvas').fields({node: true, size: true }) .exec(res => { const canvasNode = res[0].node this.canvasNode = canvasNode const canvasDpr = wx.getSystemInfoSync().pixelRatio const canvasWidth = res[0].width const canvasHeight = res[0].height const ctx = canvasNode.getContext('2d') const canvas = new WxCanvas(ctx, this.data.canvasId, true, canvasNode) echarts.setCanvasCreator(() => { return canvas }) if (typeof callback === 'function') { this.chart = callback(canvas, canvasWidth, canvasHeight, canvasDpr) } else if (this.data.ec && typeof this.data.ec.onInit === 'function') { this.chart = this.data.ec.onInit(canvas, canvasWidth, canvasHeight, canvasDpr) } else { this.triggerEvent('init', { canvas: canvas, width: canvasWidth, height: canvasHeight, dpr: canvasDpr }) } }) }, CanvasToTempFilePath (opt) {if (this.data.isusenewCanvas) {// New const query = wx.createsElectorQuery ().in(this) query .select('.ec-canvas') .fields({ node: true, size: true }) .exec(res => { const canvasNode = res[0].node opt.canvas = canvasNode wx.canvasToTempFilePath(opt) }) } else { // Old if (! opt.canvasId) { opt.canvasId = this.data.canvasId; } ctx.draw(true, () => { wx.canvasToTempFilePath(opt, this); }); }}},Copy the code

Bindtouchstart, BindTouchMove, bindTouchEndMethod development (touch method, which is an essential feature of mobile terminal)

touchStart(e) { if (this.chart && e.touches.length > 0) { var touch = e.touches[0]; var handler = this.chart.getZr().handler; handler.dispatch('mousedown', { zrX: touch.x, zrY: touch.y }); handler.dispatch('mousemove', { zrX: touch.x, zrY: touch.y }); handler.processGesture(wrapTouch(e), 'start'); } }, touchMove(e) { if (this.chart && e.touches.length > 0) { var touch = e.touches[0]; var handler = this.chart.getZr().handler; handler.dispatch('mousemove', { zrX: touch.x, zrY: touch.y }); handler.processGesture(wrapTouch(e), 'change'); } }, touchEnd(e) { if (this.chart) { const touch = e.changedTouches ? e.changedTouches[0] : {}; var handler = this.chart.getZr().handler; handler.dispatch('mouseup', { zrX: touch.x, zrY: touch.y }); handler.dispatch('click', { zrX: touch.x, zrY: touch.y }); handler.processGesture(wrapTouch(e), 'end'); }}Copy the code

4. To summarize

It doesn’t feel too technical, since I’m using the official Echarts library, but I’ve combined it with applets (it’s not the only one) just because I think it works. As a final note of caution, it’s going to be a lot harder to debug but don’t worry, it’s going to run very smoothly once it’s online. (I thought there was something wrong with my phone…)