<script lang="ts" setup>
import {
  ref,
  onMounted,
  defineProps,
  withDefaults,
  watchEffect,
  Ref,
  defineExpose
} from "vue";
import { EChartsOption } from "echarts";
import { useEchart } from "./../hooks/useEchart";
interface IProps {
  width?: string;
  height?: string;
  option: EChartsOption;
}

const props = withDefaults(defineProps<IProps>(), {
  width: "100%",
  height: "300px"
});
const echartDivRef = ref<HTMLDivElement>();
const instance = ref<any>();

onMounted(() => {
  const { setOption, echartInstance } = useEchart(
    echartDivRef as Ref<HTMLDivElement>
  );

  instance.value = echartInstance;
  watchEffect(() => {
    setOption(props.option);
  });
});

defineExpose({
  instance
});
</script>

<template>
  <div class="echart__wrapper" ref="echartDivRef" :style="{ width, height }" />
</template>
