<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 bar = ref<HTMLElement>(); // 组件实例
let barChart: echarts.ECharts | null = null;

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

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

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

</script>

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

<style scoped>

</style>