psy_web_share/unpackage/dist/dev/mp-toutiao/components/echarts-uniapp/echarts-uniapp.js

"use strict";
const common_vendor = require("../../common/vendor.js");
var chartList = {};
const _sfc_main = {
  // props: ["canvasId", "reference", "scoreList",'option'],
  props: {
    canvasId: {
      type: String,
      default: "echarts"
    },
    option: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  watch: {
    option: {
      immediate: true,
      handler(newValue, oldValue) {
        this.initChart(newValue);
      }
    }
  },
  data() {
    return {
      ctx: null
    };
  },
  mounted() {
    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;
        }
      }
    });
  },
  methods: {
    getCanvasAttr2d() {
      return new Promise((resolve, reject) => {
        const query = common_vendor.index.createSelectorQuery().in(this);
        query.select("#" + this.canvasId).fields({
          node: true,
          size: true
        }).exec((res) => {
          const canvasNode = res[0].node;
          this.canvasNode = canvasNode;
          const canvasDpr = common_vendor.index.getSystemInfoSync().pixelRatio;
          const canvasWidth = res[0].width;
          const canvasHeight = res[0].height;
          this.ctx = canvasNode.getContext("2d");
          const canvas = new WxCanvas(this.ctx, this.canvasId, true, canvasNode);
          echarts.setCanvasCreator(() => {
            return canvas;
          });
          resolve({
            canvas,
            canvasWidth,
            canvasHeight,
            canvasDpr
          });
        });
      });
    },
    getCanvasAttr() {
      return new Promise((resolve, reject) => {
        this.ctx = common_vendor.index.createCanvasContext(this.canvasId, this);
        var canvas = new WxCanvas(this.ctx, this.canvasId, false);
        echarts.setCanvasCreator(() => {
          return canvas;
        });
        const canvasDpr = 1;
        var query = common_vendor.index.createSelectorQuery().in(this);
        query.select("#" + this.canvasId).boundingClientRect((res) => {
          const canvasWidth = res.width;
          const canvasHeight = res.height;
          resolve({
            canvas,
            canvasWidth,
            canvasHeight,
            canvasDpr
          });
        }).exec();
      });
    },
    //绘制图表
    async initChart(option) {
      const canvasAttr = await this.getCanvasAttr2d();
      const {
        canvas,
        canvasWidth,
        canvasHeight,
        canvasDpr
      } = canvasAttr;
      chartList[this.canvasId] = echarts.init(canvas, null, {
        width: canvasWidth,
        height: canvasHeight,
        devicePixelRatio: canvasDpr
        // new
      });
      canvas.setChart(chartList[this.canvasId]);
      chartList[this.canvasId].setOption(option ? option : this.option);
    },
    //生成图片
    canvasToTempFilePath(opt) {
      var query = common_vendor.index.createSelectorQuery().in(this);
      query.select("#" + this.canvasId).fields({
        node: true,
        size: true
      }).exec((res) => {
        const canvasNode = res[0].node;
        opt.canvas = canvasNode;
        common_vendor.index.canvasToTempFilePath(opt, this);
      });
    },
    touchStart(e) {
      if (chartList[this.canvasId] && e.touches.length > 0) {
        var touch = e.touches[0];
        var handler = chartList[this.canvasId].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 (chartList[this.canvasId] && e.touches.length > 0) {
        var touch = e.touches[0];
        var handler = chartList[this.canvasId].getZr().handler;
        handler.dispatch("mousemove", {
          zrX: touch.x,
          zrY: touch.y
        });
        handler.processGesture(wrapTouch(e), "change");
      }
    },
    touchEnd(e) {
      if (chartList[this.canvasId]) {
        const touch = e.changedTouches ? e.changedTouches[0] : {};
        var handler = chartList[this.canvasId].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;
}
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return {
    a: $props.canvasId,
    b: $props.canvasId,
    c: common_vendor.o((...args) => $options.touchStart && $options.touchStart(...args)),
    d: common_vendor.o((...args) => $options.touchMove && $options.touchMove(...args)),
    e: common_vendor.o((...args) => $options.touchEnd && $options.touchEnd(...args))
  };
}
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-ed5954d6"], ["__file", "E:/psy_web_share/components/echarts-uniapp/echarts-uniapp.vue"]]);
tt.createComponent(Component);