echart二次封装组件

VUE2

<template>
  <div :id="id" class="echart"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  props: {
    id: {
      type: String,
      default: () => {
        return 'mychart';
      }
    },
    options: {
      type: Object
    }
  },
  data() {
    return {
      myChart: null,
    };
  },
 
  mounted() {
    const el = document.querySelector(`#${this.id}`);
    if (el) {
      this.myChart = echarts.init(el);
      if (this.options) {
        const opt = JSON.parse(JSON.stringify(this.options));
        this.myChart.setOption(opt);
      }
      setTimeout(() => {
        this.resizeChart();
      }, 0);
      
      window.addEventListener('resize', this.resizeChart);
    }
  },
  destroyed() {
    window.removeEventListener('resize', this.resizeChart);
  },

  methods: {
    resizeChart() {
      this.myChart.resize();
    },
    changeOptions() {
      const opt = JSON.parse(JSON.stringify(this.options));
      this.myChart.setOption(opt);
    }
  },
  watch: {
    options: {
      handler() {
        this.changeOptions();
      },
      deep: true
    }
  }
};
</script>
<style lang="scss" scoped>
.echart {
  width: 100%;
  height: 100%;
}
</style>

用法

          <SkChart id="stockCharts" :options="stockOpt" class="chart" />
          //id旨在唯一化图表 可在一个页面通过不同id去区分不同图表 options就是echarts配置项

VUE3

<template>
  <div :id="id" class="echart"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted, onUnmounted, PropType, toRaw, watch } from 'vue';
import * as echarts from 'echarts';
import { EChartsType } from 'echarts';

export default defineComponent({
  props: {
    id: {
      type: String as PropType<string>,
      default: () => {
        return 'mychart';
      },
      requierd: true,
    },
    options: {
      type: Object as PropType<any>,
    },
  },
  setup(props, ctx) {
    
    let myChart: EChartsType | null = null;
    //   监听设置项数据改变
    // 页面布局变化
    const resizeChart = () => {
      myChart?.resize();
    };
    // 图表数据改变
    const changeOptions = () => {
      let opt = toRaw(props.options) as any;
      myChart?.setOption(opt);
      if (props.isImage) {
        setTimeout(() => {
          ctx.emit('getImg', getImageData());
        }, 0);
      }
    };
    watch(
      () => props.options,
      () => {
        changeOptions();
      },
      {
        deep: true,
        immediate: true,
      }
    );

    onMounted(() => {
      let el: HTMLElement | null = document.querySelector(`#${props.id}`);
      if (el) {
        myChart = echarts.init(el);
        if (props.options) {
          let opt = toRaw(props.options) as any;
          myChart.setOption(opt);
        }
        setTimeout(() => {
          resizeChart();
        }, 0);
        window.addEventListener('resize', resizeChart);
      }
    });
    onUnmounted(() => {
      window.removeEventListener('resize', resizeChart);
    });

    return { myChart};
  },
});
</script>
<style lang="scss" scoped>
.echart {
  width: 100%;
  height: 100%;
}
</style>

用法

    <SkChart id="invoiceTrendChart" :options="lineOption" class="chart"></SkChart>