【封装echarts】vue中使用echarts

注意点：

以下三个问题解决方法

1. 刷新变大
2. 屏幕 resize
3. echarts 自适应
4. 解决echarts警告提示 echarts.js?1be7:2168 There is a chart instance already initialized on the dom.
   

父组件中使用

如果options里面是动态数据，请放在computed

动态数据加载 ajax，监听options

警告报错
解决echarts警告提示 echarts.js?1be7:2168 There is a chart instance already initialized on the dom.

echarts组件

<template>
  <div>
    <div :id="chartId" :style="{ width: width, height: height }"></div>
  </div>
</template>

<script>
export default {
  name: 'MyChart',
  props: {
    chartId: {
      type: String,
      required: true,
    },
    width: {
      type: String,
      default: '',
    },
    height: {
      type: String,
      default: '500px',
    },
    chartOptions: {
      type: Object,
      required: true,
    },
  },
  watch: {
    chartOptions: {
      handler(_n, _o) {
        this.createChart();
      },
      deep: true,
    },
  },
  mounted() {
    // 说明你刚进来初始化的时候echarts获取到dom的宽就是那么宽，
    // 可能你的容器还没完全加载完，可以给容器固定百分比宽，或者加载方法都调用完在$nextTick里给所有图表resize
    this.$nextTick(() => {
      this.createChart();
    });
  },
  methods: {
    createChart() {
      // 基于准备好的dom，初始化echarts实例
      //有的话就获取已有echarts实例的DOM节点。
      let chart = this.$echarts.getInstanceByDom(document.getElementById(this.chartId));
      if (chart == null) {
        // 如果不存在，就进行初始化
        chart = this.$echarts.init(document.getElementById(this.chartId));
      }
      chart.setOption(this.chartOptions);
      window.addEventListener('resize', () => {
        chart.resize();
      });
    },
  },
};
</script>