58 lines
1.6 KiB
Vue
58 lines
1.6 KiB
Vue
|
<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>
|