yudao-init/src/mixins/chart.js

import * as echarts from "echarts";

function __resizeHandler(entries) {
  console.log(entries)
  for (const entry of entries) {
    if (entry.contentBoxSize) {
    const contentBoxSize = Array.isArray(entry.contentBoxSize)
          ? entry.contentBoxSize[0]
          : entry.contentBoxSize;
        this.chart_mixin_chartInstance.resize({
          width:
            contentBoxSize.inlineSize < this.MIN_WIDTH
              ? this.MIN_WIDTH
              : contentBoxSize.inlineSize,
          height: contentBoxSize.blockSize,
        });
    } else {
      // manipulate contentRect
      this.chart_mixin_chartInstance.resize({
        width:
          entry.contentRect.width < this.MIN_WIDTH
            ? this.MIN_WIDTH
            : entry.contentRect.width,
        height: entry.contentRect.height,
      });
    }
  }
}

export default {
  data() {
    const resizeObserver = new ResizeObserver(__resizeHandler.bind(this));

    return {
      MIN_WIDTH: 390,
      chart_mixin_chartInstance: null,
      chart_mixin_observer: resizeObserver,
      chart_mixin_options: {
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        tooltip: {},
        legend: {
          data: ["Sales"],
        },
        xAxis: {
          data: [
            "shirt",
            "cardign",
            "chiffon shirt",
            "pants",
            "heels",
            "socks",
          ],
        },
        yAxis: {},
        series: [
          {
            name: "Sales",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      },
    };
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.initChart().then(() => {
    //     this.initOptions(this.chart_mixin_options);
    //     this.initListener();
    //   });
    // });
    this.initChart();
    this.initListener();
  },
  methods: {
    initChart() {
      (this.$refs.chart ||
        console.warn('[mixins/chart] 注意是否有 ref="chart" 的元素存在')) &&
        (this.chart_mixin_chartInstance = echarts.init(this.$refs.chart));
      //   return new Promise((resolve, reject) => {
      //     this.$refs.chart ? resolve(true) : reject(false);
      //   });
    },
    initOptions(options) {
      this.chart_mixin_chartInstance.setOption(options);
    },
    initListener() {
      this.chart_mixin_observer.observe(this.$refs.chart);
    },
  },
  beforeDestroy() {
    if (this.chart_mixin_chartInstance) {
      this.chart_mixin_chartInstance.dispose();
    }
  },
};