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

const props = defineProps({
  option: {type: Object, default: {
      title: {
        text: '数据加载失败',
        show: true
      }
    }}
});


const line = ref<HTMLElement>(); // 组件实例
let lineChart: echarts.ECharts | null = null;

onMounted(() => {
  if (line.value) {
    lineChart = echarts.init(line.value);
    lineChart.setOption(props.option);
  }
});

// 监听option变化，更新图表
watch(() => props.option, (newOption) => {
  if (lineChart) {
    lineChart.setOption(newOption);
  }
}, { deep: true });

// 组件卸载时清理
onUnmounted(() => {
  if (lineChart) {
    lineChart.dispose();
    lineChart = null;
  }
});

</script>

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

<style scoped>

</style>