<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
  data: {
    type: [Object, Array],
    required: true
  },
  type: {
    type: String,
    validator: (value) => ['line', 'bar'].includes(value),
    required: true
  },
  title: {
    type: String,
    required: false
  }
});

let chart = null;

const initChart = () => {
  const chartDom = document.getElementById('monitorChart');
  if (!chartDom) return;

  chart = echarts.init(chartDom);
  const option = {
    title: {
      text: props.title
    },
    tooltip: {
      trigger: 'axis'
    },
    // ... 其他配置
  };

  chart.setOption(option);
};

onMounted(() => {
  initChart();
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
  chart?.dispose();
});

const handleResize = () => {
  chart?.resize();
};
</script>

<template>
  <div id="monitorChart" style="width: 100%; height: 400px"></div>
</template>