F

src/subpkg1/components/chart/index.jsx

@@ -2,7 +2,6 @@ import React from "react";
 // import * as echarts from '@/subpkg1/components/ec-canvas/echarts';
 import * as echarts from "echarts";
 
-import { View } from "@tarojs/components";
 
 /**
  * 使用本组件前, 页面组件必须引入 ec-canvas 组件
@@ -13,7 +12,6 @@ import { View } from "@tarojs/components";
 export default function Chart(props) {
   const { option, className, style } = props;
 
-  const [inited, setInited] = React.useState(false);
   const chartRef = React.useRef();
   const domRef = React.useRef();
 

src/subpkg1/components/ec-canvas/ec-canvas.js

@@ -1,265 +0,0 @@
-import WxCanvas from './wx-canvas';
-import * as echarts from './echarts';
-
-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 () {
-    // Disable prograssive because drawImage doesn't support DOM as parameter
-    // See https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.drawImage.html
-    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('组件需绑定 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 = 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('开发者强制使用旧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 = wx.createCanvasContext(this.data.canvasId, this);
-      const canvas = new WxCanvas(ctx, this.data.canvasId, false);
-
-      echarts.setCanvasCreator(() => {
-        return canvas;
-      });
-      // const canvasDpr = wx.getSystemInfoSync().pixelRatio // 微信旧的canvas不能传入dpr
-      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 // 增加了dpr，可方便外面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) {
-        // 新版
-        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 {
-        // 旧的
-        if (!opt.canvasId) {
-          opt.canvasId = this.data.canvasId;
-        }
-        ctx.draw(true, () => {
-          wx.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,
-          preventDefault: () => {},
-          stopImmediatePropagation: () => {},
-          stopPropagation: () => {}
-        });
-        handler.dispatch('mousemove', {
-          zrX: touch.x,
-          zrY: touch.y,
-          preventDefault: () => {},
-          stopImmediatePropagation: () => {},
-          stopPropagation: () => {}
-        });
-        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,
-          preventDefault: () => {},
-          stopImmediatePropagation: () => {},
-          stopPropagation: () => {}
-        });
-        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,
-          preventDefault: () => {},
-          stopImmediatePropagation: () => {},
-          stopPropagation: () => {}
-        });
-        handler.dispatch('click', {
-          zrX: touch.x,
-          zrY: touch.y,
-          preventDefault: () => {},
-          stopImmediatePropagation: () => {},
-          stopPropagation: () => {}
-        });
-        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;
-}

src/subpkg1/components/ec-canvas/ec-canvas.json

@@ -1,4 +0,0 @@
-{
-  "component": true,
-  "usingComponents": {}
-}

src/subpkg1/components/ec-canvas/ec-canvas.wxml

@@ -1,4 +0,0 @@
-<!-- 新的：接口对其了H5 -->
-<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>
-<!-- 旧的 -->
-<canvas wx:else class="ec-canvas" canvas-id="{{ canvasId }}" bindinit="init" bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"></canvas>

src/subpkg1/components/ec-canvas/ec-canvas.wxss

@@ -1,4 +0,0 @@
-.ec-canvas {
-  width: 100%;
-  height: 100%;
-}

src/subpkg1/components/ec-canvas/wx-canvas.js

@@ -1,111 +0,0 @@
-export default class WxCanvas {
-  constructor(ctx, canvasId, isNew, canvasNode) {
-    this.ctx = ctx;
-    this.canvasId = canvasId;
-    this.chart = null;
-    this.isNew = isNew
-    if (isNew) {
-      this.canvasNode = canvasNode;
-    }
-    else {
-      this._initStyle(ctx);
-    }
-
-    // this._initCanvas(zrender, ctx);
-
-    this._initEvent();
-  }
-
-  getContext(contextType) {
-    if (contextType === '2d') {
-      return this.ctx;
-    }
-  }
-
-  // canvasToTempFilePath(opt) {
-  //   if (!opt.canvasId) {
-  //     opt.canvasId = this.canvasId;
-  //   }
-  //   return wx.canvasToTempFilePath(opt, this);
-  // }
-
-  setChart(chart) {
-    this.chart = chart;
-  }
-
-  addEventListener() {
-    // noop
-  }
-
-  attachEvent() {
-    // noop
-  }
-
-  detachEvent() {
-    // noop
-  }
-
-  _initCanvas(zrender, ctx) {
-    zrender.util.getContext = function () {
-      return ctx;
-    };
-
-    zrender.util.$override('measureText', function (text, font) {
-      ctx.font = font || '12px sans-serif';
-      return ctx.measureText(text);
-    });
-  }
-
-  _initStyle(ctx) {
-    ctx.createRadialGradient = () => {
-      return ctx.createCircularGradient(arguments);
-    };
-  }
-
-  _initEvent() {
-    this.event = {};
-    const eventNames = [{
-      wxName: 'touchStart',
-      ecName: 'mousedown'
-    }, {
-      wxName: 'touchMove',
-      ecName: 'mousemove'
-    }, {
-      wxName: 'touchEnd',
-      ecName: 'mouseup'
-    }, {
-      wxName: 'touchEnd',
-      ecName: 'click'
-    }];
-    eventNames.forEach(name => {
-      this.event[name.wxName] = e => {
-        const touch = e.touches[0];
-        this.chart.getZr().handler.dispatch(name.ecName, {
-          zrX: name.wxName === 'tap' ? touch.clientX : touch.x,
-          zrY: name.wxName === 'tap' ? touch.clientY : touch.y,
-          preventDefault: () => {},
-          stopImmediatePropagation: () => {},
-          stopPropagation: () => {}
-        });
-      };
-    });
-  }
-
-  set width(w) {
-    if (this.canvasNode) this.canvasNode.width = w
-  }
-  set height(h) {
-    if (this.canvasNode) this.canvasNode.height = h
-  }
-
-  get width() {
-    if (this.canvasNode)
-      return this.canvasNode.width
-    return 0
-  }
-  get height() {
-    if (this.canvasNode)
-      return this.canvasNode.height
-    return 0
-  }
-}