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

<script lang="ts" setup>
import * as echarts from "echarts";
import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
let echartDom = ref(<HTMLElement | null>null);
let emits = defineEmits(["update"]);
let props = defineProps({
  option: {
    type: Object,
    default: () => {
      return {
        title: {
          text: "ECharts 入门示例",
        },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      };
    },
  },
});
function echartResize() {
  let chartInstance = echarts.getInstanceByDom(echartDom.value as HTMLElement);
  chartInstance?.resize();
}
let resizeObserver = new ResizeObserver(() => {
  echartResize();
});
onMounted(() => {
  let chartInstance = echarts.init(echartDom.value);
  chartInstance.setOption(props.option);

  resizeObserver.observe(echartDom.value as HTMLElement);
});

onBeforeUnmount(() => {
  resizeObserver.disconnect();
});
</script>
<style lang="scss" scoped></style>
