Taro3+Vue3 uses echarts

Picture first, hang without picture

One. Taro supports echarts

Official description: https://taro-docs.jd.com/blog/2018-09-18-taro-1-0-0#Support citing third-party component libraries on the applet side

2. Introduce echarts-for-weixin plug-in

github address: https://github.com/ecomfe/echarts-for-weixin

Only import wx-canvas.js under the ec-canvas folder

3. Custom download echarts

Address: https://echarts.apache.org/zh/builder.html

You can choose the version yourself, the author tested both 5.3.3 and 5.4.1 to support

Get echarts.min.js after downloading

Please choose the chart you need to package and download according to your needs. I only chose the default pie chart, column chart, and line chart;

4. Packaging component ec-canvas.vue

<template>
  <canvas type="2d" class="ec-canvas" :canvas-id="canvasId" @touchStart="touchStart" @touchMove="touchMove"
    @touchEnd="touchEnd"></canvas>
</template>

Introduce the echarts.min.js and wx-canvas just downloaded

import Taro from "@tarojs/taro";
import WxCanvas from "./wx-canvas";
import * as echarts from "./echarts-5.4.1.min";

<script lang="js">
//Customize the downloaded echarts.min.js file. To use it, you need to use js, and ts needs to declare the file
import Taro from "@tarojs/taro";
import WxCanvas from "./wx-canvas";
import * as echarts from "./echarts-5.4.1.min";

export default {
  name: "EcCanvas",
  props: {
    canvasId: {
      type: String,
      default: ""
    },
    ec: {
      type: Object,
      default: null
    }
  },
  mounted() {
    echarts.registerPreprocessor(option => {
      if (option & amp; & amp; 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.ec) {
      console. warn(
        'The component needs to bind the ec variable, for example: <ec-canvas id="mychart-dom-bar" ' +
        'canvas-id="mychart-bar" ec="{<!-- -->{ ec }}"></ec-canvas>'
      );
      return;
    }
    if (!this.ec.lazyLoad) {
      this.init();
    }
  },
  methods: {
    init(callback) {
      this.initByNewWay(callback);
    },
    initByNewWay(callback) {
      const query = Taro. createSelectorQuery();
      query
        .select(".ec-canvas")
        .fields({
          node: true,
          size: true
        })
        .exec(res => {
          if (!res || res.length == 0 || res[0] == null || res[0].node == null) {
            console.error('The dom node of the canvas is not obtained, please confirm that after the page rendering is completed or the node, the life cycle of the page rendering completion in taro is useReady');
            return
          }
          const canvasNode = res[0].node;
          // this. canvasNode = canvasNode;

          const canvasDpr = Taro.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;
          });

          if (typeof callback === "function") {
            this.chart = callback(canvas, canvasWidth, canvasHeight, canvasDpr);
          } else if (typeof this.ec.onInit === "function") {
            this.chart = this.ec.onInit(
              canvas,
              canvasWidth,
              canvasHeight,
              canvasDpr
            );
          } else {
            this.triggerEvent('init', {
              canvas: canvas,
              width: canvasWidth,
              height: canvasHeight,
              dpr: canvasDpr
            })
          }
        });
    },
    canvasToTempFilePath(opt) {
      const query = Taro.createSelectorQuery().in(this);
      query
        .select(".ec-canvas")
        .fields({
          node: true,
          size: true
        })
        .exec(res => {
          const canvasNode = res[0].node;
          opt.canvas = canvasNode;
          Taro. canvasToTempFilePath(opt);
        });
    },
    touchStart(e) {
      if (this.chart & amp; & amp; 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(this.wrapTouch(e), "start");
      }
    },
    touchMove(e) {
      if (this.chart & amp; & amp; 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(this.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(this.wrapTouch(e), "end");
      }
    },
    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>
.ec-canvas {
  width: 100%;
  height: 100%;
}
</style>

5. Package e-chart.vue component