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) {
        // console.log(newVal, '2dbwquduiqh')
        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>