实现组件，echarts 图表小程序版本

Tevin

2022-08-11 a600126b80bd91fff84b0033bf471dc390aebfca

实现组件，echarts 图表小程序版本

 plugins/echarts/CECharts.weapp.vue

New file
@@ -0,0 +1,180 @@
/**
 * CECharts
 * @author Tevin
 */

<template>
    <view class="c-echarts">
        123
        <canvas
            class="c-echarts-canvas"
            type="2d"
            :id="canvasId"
            :canvasId="canvasId"
            :bindtouchstart="evt => disableTouch ? null : touchStart(evt)"
            :bindtouchmove="evt => disableTouch ? null : touchMove(evt)"
            :bindtouchend="evt => disableTouch ? null : touchEnd(evt)"
        ></canvas>
    </view>
</template>

<script>
import WxCanvas from './wxCanvas';
import * as echarts from './echarts';
import './cECharts.scss';

let canvasCount = 0;
const 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;
};

export default {
    name: 'CECharts',
    components: {},
    props: {
        canvasId: {
            type: String,
            default: 'ec-canvas-' + ++canvasCount + '-' + parseInt(Math.random() * 10000),
        },
        disableTouch: {
            type: Boolean,
            default: false,
        },
        onReady: Function,
    },
    data() {
        return {};
    },
    methods: {
        init(callback) {
            // 基础库必须 2.9.0 以上，使用 <canvas type="2d"></canvas>，不支持旧版
            const query = wx.createSelectorQuery();
            query
                .select('#' + this.canvasId)
                .fields({ node: true, size: true })
                .exec(res => {
                    console.log(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.canvasId, true, canvasNode);
                    echarts.setCanvasCreator(() => {
                        return canvas;
                    });
                    console.log(typeof callback);
                    if (typeof callback === 'function') {
                        callback(canvas, canvasWidth, canvasHeight, canvasDpr);
                    } else {
                        this.triggerEvent('init', {
                            canvas: canvas,
                            width: canvasWidth,
                            height: canvasHeight,
                            dpr: canvasDpr,
                        });
                    }
                });
        },
        canvasToTempFilePath(opt) {
            const query = wx.createSelectorQuery().in(this);
            query
                .select('#' + this.canvasId)
                .fields({ node: true, size: true })
                .exec(res => {
                    const canvasNode = res[0].node;
                    opt.canvas = canvasNode;
                    wx.canvasToTempFilePath(opt);
                });
        },
        touchStart(e) {
            if (this.chart && e.touches.length > 0) {
                const touch = e.touches[0];
                const 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) {
                const touch = e.touches[0];
                const 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] : {};
                const 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');
            }
        },
    },
    mounted() {
        // 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;
                }
            }
        });
        setTimeout(() => {
            this.init((canvas, width, height, dpr) => {
                this.chart = echarts.init(canvas, null, {
                    width: width,
                    height: height,
                    devicePixelRatio: dpr, // 像素
                });
                canvas.setChart(this.chart);
                this.onReady && this.onReady(this.chart);
            });
        }, 100);
    },
};
</script>

 plugins/echarts/cECharts.scss

New file
@@ -0,0 +1,14 @@
/**
 * CECharts
 * @author Tevin
 */

@import "../../common/sassMixin";

.c-echarts {
    .c-echarts-canvas {
        display: block;
        width: 100%;
        height: 100%;
    }
}

 plugins/echarts/echarts.js

New file
Diff too large

 plugins/echarts/index.js

New file
@@ -0,0 +1,10 @@
/**
 * qrcode
 * @author Tevin
 */

import CECharts from '@components/plugins/echarts/CECharts';

export {
    CECharts
}

 plugins/echarts/wxCanvas.js

New file
@@ -0,0 +1,111 @@
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
  }
}