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

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

// --- 原始数据 ---
const originalData = {
    '2024-06-25 15:05': 169, '2024-06-25 21:05': 186, '2024-06-26 03:05': 31,
    '2024-06-26 09:05': 8, '2024-06-26 15:05': 1, '2024-06-26 21:05': 2,
    '2024-06-27 03:05': 1, '2024-06-27 09:05': 0, '2024-06-27 15:05': 1,
    '2024-06-27 21:05': 0, '2024-06-28 03:05': 0, '2024-06-28 09:05': 0,
    '2024-06-28 15:05': 0, '2024-06-28 21:05': 0, '2024-06-29 03:05': 0,
    '2024-06-29 09:05': 0, '2024-06-29 15:05': 0, '2024-06-29 21:05': 0,
    '2024-06-30 03:05': 0, '2024-06-30 09:05': 1
};

// --- Y轴镜像转换 ---
const xAxisData = Object.keys(originalData);
const yAxisMirroredData = Object.values(originalData).reverse();

// --- ECharts 核心逻辑 ---
const chartRef = ref(null);
let myChart = null;

const option = {
  title: {
    text: '事件热度预测',
    left: 'center'
  },
  tooltip: { trigger: 'axis' },
  grid: { left: '3%', right: '4%', bottom: '10%', containLabel: true },
  xAxis: {
    type: 'category',
    data: xAxisData,
    axisLabel: { rotate: 30 }
  },
  yAxis: { type: 'value' },
  series: [{
    name: '热度',
    data: yAxisMirroredData,
    type: 'line',
    itemStyle: { color: '#ee6666' }
  }]
};

onMounted(() => {
  myChart = echarts.init(chartRef.value);
  myChart.setOption(option);
  window.addEventListener('resize', () => myChart.resize());
});

onUnmounted(() => {
  myChart?.dispose();
});
</script>