<template>
  <div ref="chartDom" style="width:600px;height:400px;"></div>
</template>
    <script setup>
import { ref, onMounted, onUnmounted, nextTick } from "vue";
import * as echarts from "echarts";
import { fillMissingMonths } from "@/utils/index.js";
import { listLineChartTable } from "@/api/sidebar/reportAnalytics.js";
// 创建一个响应式引用来保存DOM元素
const chartDom = ref(null);
let chartInstance = null;

var option = {
  title: {
    text: "年上报趋势图"
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    axisLabel: {
      interval: 0 // 尝试强制显示全部标签
      // rotate: 45 // 如果需要，旋转标签以避免重叠
    },
    data: [
      "一月",
      "二月",
      "三月",
      "四月",
      "五月",
      "六月",
      "七月",
      "八月",
      "九月",
      "十月",
      "十一月",
      "十二月"
    ]
  },
  yAxis: {
    type: "value"
  },
  tooltip: {
    axisPointer: {
      type: "axis",
      label: {
        backgroundColor: "#6a7985"
      }
    }
  },
  series: [
    {
      name: "上报总量",
      smooth: true,
      radius: "55%",
      center: ["50%", "60%"],
      data: [],
      type: "line",
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgb(215,212,244,0.5)"
          }
        ])
      }
    }
  ]
};

const getList = function() {
  listLineChartTable().then(res => {
    const seriesList = res.data;
    option.series[0].data = seriesList;
    if (chartInstance) {
      chartInstance.setOption(option);
    }
  });
};

// 初始化ECharts实例并设置配置项
onMounted(async () => {
  await nextTick(); // 确保DOM已经渲染完成
  chartInstance = echarts.init(chartDom.value);
  getList(); // 初始化后获取数据
});

// 销毁ECharts实例
onUnmounted(() => {
  if (chartInstance != null && chartInstance.dispose) {
    chartInstance.dispose();
  }
});

getList();
</script>
    
<style scoped>
/* 添加一些CSS样式来美化图表容器（可选） */
</style>
    