<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>
