vue3 中使用echarts和echarts自适应

参考：
https://blog.csdn.net/m0_58293192/article/details/128001932

引入依赖：npm install element-resize-detect

<div :id="id" :class="className" :style="{ height, width }"></div>
 import elementResizeDetectorMaker from 'element-resize-detector';

const props = defineProps({
  id: {
    type: String,
    default: "barChart",
  },
  className: {
    type: String,
    default: "",
  },
  width: {
    type: String,
    default: "200px",
    required: true,
  },
  height: {
    type: String,
    default: "200px",
    required: true,
  },
});

const chart = ref<any>("");
const main = ref(null);
onMounted(() => {
  // 图表初始化
  chart.value = markRaw(
    echarts.init(document.getElementById(props.id) as HTMLDivElement)
  );

  chart.value.setOption(options);

  // 左侧菜单切换时大小自适应
  const erd = elementResizeDetectorMaker();
      erd.listenTo(main.value, function(element) {
      chart.value.resize();
  });

  // 屏幕窗口大小自适应
  window.addEventListener("resize", () => {
    chart.value.resize();
  });
});