58 lines
1.5 KiB
Vue
58 lines
1.5 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-19 15:57': 2280, '2024-06-20 15:57': 612, '2024-06-21 15:57': 261,
|
||
'2024-06-22 15:57': 258, '2024-06-23 15:57': 110, '2024-06-24 15:57': 80,
|
||
'2024-06-25 15:57': 51, '2024-06-26 15:57': 18, '2024-06-27 15:57': 10,
|
||
'2024-06-28 15:57': 10, '2024-06-29 15:57': 2, '2024-06-30 15:57': 2,
|
||
'2024-07-01 15:57': 2
|
||
};
|
||
|
||
// --- Y轴镜像转换 ---
|
||
const xAxisData = Object.keys(originalData);
|
||
// 关键：将Y轴数据数组反转
|
||
const yAxisMirroredData = Object.values(originalData).reverse();
|
||
|
||
// --- ECharts 核心逻辑 ---
|
||
const chartRef = ref(null);
|
||
let myChart = null;
|
||
|
||
const option = {
|
||
title: {
|
||
text: '中国海警首次登检菲律宾运补船只 (Y轴镜像)',
|
||
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',
|
||
smooth: true,
|
||
areaStyle: {} // 添加面积图样式
|
||
}]
|
||
};
|
||
|
||
onMounted(() => {
|
||
myChart = echarts.init(chartRef.value);
|
||
myChart.setOption(option);
|
||
window.addEventListener('resize', () => myChart.resize());
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
myChart?.dispose();
|
||
});
|
||
</script> |