performance-test/src/components/EchartsCom.vue

<template>
  <!-- 定义标签 -->
  <div
    v-resize="resize"
    :id="id"
    v-if="option"
    :style="{
      width: width,
      height: height,
    }"
  ></div>
</template>

<script>
import { myMixin } from "@/mixins/echartsMixin";
import * as echarts from "echarts";
import "echarts/extension/bmap/bmap";
// 2.生成一个 id 值给标签，目的是为了当多次使用组件防止id重复
const uid = function () {
  return new Date().getTime();
};
export default {
  mixins: [myMixin],
  //1.获取传过来的值
  props: {
    width: {
      type: String,
      default: "",
    },
    height: {
      type: String,
      default: "",
    },
    option: {
      typeof: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      //3.在这定义 id 与 myChart图表实例 ， 方便管理
      id: null,
      myChart: null,
    };
  },
  watch: {
    option: {
      handler(newVal, oldVal) {
        if (this.myChart) {
          this.id = uid();
          this.$nextTick(() => {
            this.myChart.setOption(newVal);
          });
        }
      },
      deep: true, // 深度监听,
      // immediate: true, //要立即监听
    },
  },
  mounted() {
    setTimeout(() => {
      window.addEventListener("resize", this.myChart);
      this.id = uid();
      this.initEcharts();
    }, 0);
  },
  created() {
    // 4.id赋值
  },
  methods: {
    initEcharts() {
      this.$nextTick(() => {
        const _this = this;
        //   5. 创建echarts图表实例
        _this.myChart = echarts.init(document.getElementById(this.id));
        // 指定图表的配置项和数据
        const option = this.option;
        // 使用刚指定的配置项和数据显示图表。
        _this.myChart.clear();
        const that = _this;
        _this.myChart.setOption(option);
        window.onresize = function () {
          that.myChart.resize();
        };
      });
    },
  },
  destroyed() {
    window.removeEventListener("resize", this.myChart);
  },
};
</script>