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

<script setup>
import { onMounted, onBeforeUnmount, ref } from 'vue';
import * as echarts from 'echarts';
import { getLineOption } from '@/utils/chart';

const chartRef = ref(null);
let chartInstance = null;

const initChart = () => {
  if (chartRef.value) {
    chartInstance = echarts.init(chartRef.value);
    const xData = ['01', '02', '03', '04', '05', '06', '07'];
    const seriesData = [120, 200, 150, 80, 60, 110, 120];
    const option = getLineOption(xData, seriesData);
    chartInstance.setOption(option);
  }
};

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

onBeforeUnmount(() => {
  chartInstance?.dispose();
});
</script>

<style scoped>
.chart-line {
  width: 100%;
  height: calc(100% - 22px);
}
</style>
  