<script setup>
import * as echarts from "echarts";
import { onMounted, ref, markRaw, watch, onBeforeUnmount } from "vue";

const props = defineProps({
  option: Object, // 圖表配置選項
  class: String,  // 類名
  id: String,     // 圖表ID
});

let chart = ref(null); // 用於儲存圖表實例
let dom = ref(null);   // 用於儲存DOM元素引用

// 初始化圖表的函數
function init() {
  if (dom.value) {
    let echart = echarts;
    chart.value = markRaw(echart.init(dom.value)); // 初始化圖表
    chart.value.setOption(props.option);           // 設定初始選項
  }
}

// 當組件掛載完成後初始化圖表
onMounted(() => {
  if (!chart.value && dom.value) {
    init();
  }
});

// 監聽 props.option 的變化，重新設置圖表選項
watch(
  () => props.option,
  (newOption) => {
    if (chart.value) {
      chart.value.setOption(newOption); // 更新圖表選項
    }
  },
  { deep: true }
);

// 當組件卸載時銷毀圖表，防止內存洩漏
onBeforeUnmount(() => {
  if (chart.value) {
    chart.value.dispose(); // 銷毀圖表實例
  }
});

defineExpose({
  chart, // 對外暴露 chart 變量
});
</script>

<template>
  <div :id="id" :class="class" ref="dom" style="height: 100%; width: 100%;"></div>
</template>

<style lang="scss" scoped></style>
