shanxian-work-app/component/canvas.vue

<template>
	<!-- 新的：接口对其了H5 -->
	<canvas v-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>
	<!-- 旧的 -->
	<canvas v-else class="ec-canvas" canvas-id=" canvasId " bindinit="init" bindtouchstart=" ec.disableTouch ? '' : 'touchStart' " bindtouchmove=" ec.disableTouch ? '' : 'touchMove' " bindtouchend=" ec.disableTouch ? '' : 'touchEnd' "></canvas>

</template>

<script>
	import WxCanvas from './wx-canvas';
	import * as echarts from './echarts.min';
	
	let ctx;
	
	function compareVersion(v1, v2) {
	  v1 = v1.split('.')
	  v2 = v2.split('.')
	  const len = Math.max(v1.length, v2.length)
	
	  while (v1.length < len) {
	    v1.push('0')
	  }
	  while (v2.length < len) {
	    v2.push('0')
	  }
	
	  for (let i = 0; i < len; i++) {
	    const num1 = parseInt(v1[i])
	    const num2 = parseInt(v2[i])
	
	    if (num1 > num2) {
	      return 1
	    } else if (num1 < num2) {
	      return -1
	    }
	  }
	  return 0
	}
	
	Component({
	  properties: {
	    canvasId: {
	      type: String,
	      value: 'ec-canvas'
	    },
	
	    ec: {
	      type: Object
	    },
	
	    forceUseOldCanvas: {
	      type: Boolean,
	      value: false
	    }
	  },
	
	  data: {
	    isUseNewCanvas: false
	  },
	
	  ready: function () {
	    if (!this.data.ec) {
	      console.warn('组件需绑定 ec 变量，例：<ec-canvas id="mychart-dom-bar" '
	        + 'canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>');
	      return;
	    }
	
	    if (!this.data.ec.lazyLoad) {
	      this.init();
	    }
	  },
	
	  methods: {
	    init: function (callback) {
	      const version = uni.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('开发者强制使用旧canvas,建议关闭');
	      }
	
	      if (isUseNewCanvas) {
	        // console.log('微信基础库版本大于2.9.0，开始使用<canvas type="2d"/>');
	        // 2.9.0 可以使用 <canvas type="2d"></canvas>
	        this.initByNewWay(callback);
	      } else {
	        const isValid = compareVersion(version, '1.9.91') >= 0
	        if (!isValid) {
	          console.error('微信基础库版本过低，需大于等于 1.9.91。'
	            + '参见：https://github.com/ecomfe/echarts-for-weixin'
	            + '#%E5%BE%AE%E4%BF%A1%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82');
	          return;
	        } else {
	          console.warn('建议将微信基础库调整大于等于2.9.0版本。升级后绘图将有更好性能');
	          this.initByOldWay(callback);
	        }
	      }
	    },
	
	    initByOldWay(callback) {
	      // 1.9.91 <= version < 2.9.0：原来的方式初始化
	      ctx = uni.createCanvasContext(this.data.canvasId, this);
	      const canvas = new WxCanvas(ctx, this.data.canvasId, false);
	
	      echarts.setCanvasCreator(() => {
	        return canvas;
	      });
	      // const canvasDpr = uni.getSystemInfoSync().pixelRatio // 微信旧的canvas不能传入dpr
	      const canvasDpr = 1
	      var query = uni.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 // 增加了dpr，可方便外面echarts.init
	          });
	        }
	      }).exec();
	    },
	
	    initByNewWay(callback) {
	      // version >= 2.9.0：使用新的方式初始化
	      const query = uni.createSelectorQuery().in(this)
	      query
	        .select('.ec-canvas')
	        .fields({ node: true, size: true })
	        .exec(res => {
	          const canvasNode = res[0].node
	          this.canvasNode = canvasNode
	
	          const canvasDpr = uni.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) {
	        // 新版
	        const query = uni.createSelectorQuery().in(this)
	        query
	          .select('.ec-canvas')
	          .fields({ node: true, size: true })
	          .exec(res => {
	            const canvasNode = res[0].node
	            opt.canvas = canvasNode
	            uni.canvasToTempFilePath(opt)
	          })
	      } else {
	        // 旧的  
	        if (!opt.canvasId) {
	          opt.canvasId = this.data.canvasId;
	        }
	        ctx.draw(true, () => {
	          uni.canvasToTempFilePath(opt, this);
	        });
	      }
	    },
	
	    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');
	      }
	    }
	  }
	});
	
	function wrapTouch(event) {
	  for (let i = 0; i < event.touches.length; ++i) {
	    const touch = event.touches[i];
	    touch.offsetX = touch.x;
	    touch.offsetY = touch.y;
	  }
	  return event;
	}

</script>

<style>
</style>