Echart显示封装成组件vue

echarts通用组件

echarts.vue

<template>
  <div style="width: 100%; height: 100%"></div>
</template>

<script setup>
import {
  ref,
  onMounted,
  nextTick,
  onBeforeUnmount,
  onActivated,
  onDeactivated
} from 'vue';
import { useDebounceFn } from '@vueuse/core';
import * as echarts from 'echarts';

const props = defineProps({
  options: {
    type: Object,
    default() {
      return {
        echartsType: 1
      };
    }
  },
  echartRef: {
    type: Object
  }
  //   echartRef: {}
});
const echartsResize = ref();
onMounted(() => {
  nextTick(() => {
    initEchart();
  });
//echart宽度自适应
setTimeout(() => {
    //   this.myCharts();
    const resizeOb = new ResizeObserver((entries) => {
      for (const entry of entries) {
        echarts.getInstanceByDom(entry.target).resize();
      }
    });
    resizeOb.observe(props.echartRef);
  });
});
const initEchart = () => {
  let myChart = echarts.getInstanceByDom(props.echartRef);
  if (myChart === null || myChart === undefined) {
    myChart = echarts.init(props.echartRef);
  }
  useEcharts(myChart, props.options);
};
const useEcharts = (myChart, options) => {
  if (options && typeof options === 'object') {
    myChart.setOption(options, true);
  }
//监听尺寸变化进行重绘
  echartsResize.value = useDebounceFn(() => {
    myChart && myChart.resize();
  }, 100);
  window.addEventListener('resize', echartsResize.value);
};
onBeforeUnmount(() => {
  window.removeEventListener('resize', echartsResize.value);
});

onActivated(() => {
  window.addEventListener('resize', echartsResize.value);
});

onDeactivated(() => {
  window.removeEventListener('resize', echartsResize.value);
});
watch(
  () => props.options,
  (val) => {
    if (val) {
      nextTick(() => {
        initEchart();
      });
    }
  },
  { deep: true }
);
</script>

<style lang="scss" scoped>
.ml-20 {
  margin-left: 20px;
}

.card-phone {
  height: 500px;
  width: 800px;
  margin: 0 auto;
}
</style>