<script lang="ts" setup>
import { onBeforeUnmount, onMounted, ref, watch } from "vue";
import * as echarts from "echarts";
import { EChartsOption } from "echarts";

let chart: echarts.ECharts | null = null;

const chartRef = ref<HTMLElement | undefined>();

const props = defineProps({
  option: {
    type: Object as () => EChartsOption | {},
    required: true,
  },
});

function applyOption(option?: EChartsOption | Record<string, never>) {
  if (!chart || !option) {
    return;
  }

  chart.clear();
  chart.setOption(option);
}

onMounted(() => {
  chart = echarts.init(chartRef.value, "t-theme");
  applyOption(props.option);
});

watch(
  () => props.option,
  (value) => {
    applyOption(value);
  },
  { deep: true },
);

onBeforeUnmount(() => {
  if (chart) {
    chart.dispose();
    chart = null;
  }
});
</script>

<template>
  <div ref="chartRef" class="t-chart" />
</template>

<style scoped>
.t-chart {
  width: 100%;
  height: 100%;
}
</style>
