187 lines
5.1 KiB
Vue
187 lines
5.1 KiB
Vue
<template>
|
||
<div class="vchartPage">
|
||
<div ref="chartRef" class="chartRef"></div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import * as echarts from 'echarts'
|
||
import { getMonthlyAlarmStatistics } from '@/api/homeIndex';
|
||
|
||
const chartRef = ref<HTMLDivElement | null>(null);
|
||
let myChart: echarts.ECharts | null = null;
|
||
let dataTimer: NodeJS.Timeout | null = null;
|
||
|
||
// 初始化图表
|
||
const initChart = () => {
|
||
if (!chartRef.value) return;
|
||
myChart = echarts.init(chartRef.value);
|
||
updateChartData();
|
||
window.addEventListener('resize', handleResize);
|
||
};
|
||
// 更新图表数据
|
||
const updateChartData = () => {
|
||
if (!myChart) return;
|
||
getMonthlyAlarmStatistics({}).then((res) => {
|
||
const monthlyData = res.data.monthlyStatistics || {};
|
||
// 提取1-12月数据并转为数字
|
||
const alarmData = [
|
||
monthlyData.m1,
|
||
monthlyData.m2,
|
||
monthlyData.m3,
|
||
monthlyData.m4,
|
||
monthlyData.m5,
|
||
monthlyData.m6,
|
||
monthlyData.m7,
|
||
monthlyData.m8,
|
||
monthlyData.m9,
|
||
monthlyData.m10,
|
||
monthlyData.m11,
|
||
monthlyData.m12
|
||
].map(Number);
|
||
|
||
const maxValue = Math.max(...alarmData);
|
||
const maxIndex = alarmData.indexOf(maxValue);
|
||
const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
|
||
|
||
const option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
},
|
||
grid: {
|
||
left: '5%',
|
||
right: '5%',
|
||
bottom: '10%',
|
||
top: '15%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: months,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.2)'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: '#DEEFFF',
|
||
fontSize: 12
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
color: '#DEEFFF',
|
||
fontSize: 12,
|
||
formatter: '{value}'
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.1)',
|
||
type: 'dashed'
|
||
}
|
||
},
|
||
boundaryGap: [0, '30%']
|
||
},
|
||
series: [
|
||
{
|
||
type: 'line',
|
||
data: alarmData,
|
||
smooth: true,
|
||
symbol: 'circle',
|
||
symbolSize: 6,
|
||
emphasis: {
|
||
showSymbol: true,
|
||
symbolSize: 8
|
||
},
|
||
lineStyle: {
|
||
color: '#22E1DB',
|
||
width: 2
|
||
},
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: 'rgba(34,225,219, 0.6)' },
|
||
{ offset: 1, color: 'rgba(34,225,219, 0)' }
|
||
])
|
||
},
|
||
itemStyle: {
|
||
color: (params: any) => {
|
||
if (params.dataIndex === maxIndex) {
|
||
return '#fff'; // 最大值的点标为白色
|
||
}
|
||
return '#22E1DB';
|
||
}
|
||
},
|
||
label: {
|
||
show: (params: any) => params.dataIndex === maxIndex,
|
||
position: 'top',
|
||
color: '#22E1DB',
|
||
formatter: '{c}', // 显示当前数据值
|
||
fontSize: 12,
|
||
}
|
||
}
|
||
],
|
||
};
|
||
|
||
myChart.setOption(option);
|
||
}).catch(err => {
|
||
console.error('获取月度报警统计数据失败:', err);
|
||
});
|
||
};
|
||
|
||
const handleResize = () => {
|
||
if (myChart) {
|
||
myChart.resize();
|
||
}
|
||
};
|
||
// 开始数据定时器
|
||
const startDataTimer = () => {
|
||
if (dataTimer) {
|
||
clearInterval(dataTimer);
|
||
}
|
||
// 每300秒（5分钟
|
||
dataTimer = setInterval(updateChartData, 300000);
|
||
};
|
||
|
||
// 清除数据定时器
|
||
const clearDataTimer = () => {
|
||
if (dataTimer) {
|
||
clearInterval(dataTimer);
|
||
dataTimer = null;
|
||
}
|
||
};
|
||
|
||
onMounted(() => {
|
||
initChart();
|
||
startDataTimer();
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
// 清除定时器
|
||
clearDataTimer();
|
||
// 移除事件监听
|
||
window.removeEventListener('resize', handleResize);
|
||
// 销毁图表
|
||
if (myChart) {
|
||
myChart.dispose();
|
||
myChart = null;
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.vchartPage {
|
||
margin-top: 7.4vh;
|
||
}
|
||
|
||
.chartRef {
|
||
width: 100%;
|
||
height: 24vh;
|
||
}
|
||
</style> |