dyf-vue-ui/src/views/homeIndex/components/AlarmCount.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);
onMounted(() => {
    if (chartRef.value) {
        const myChart = echarts.init(chartRef.value);
        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) => {
                               if (params.dataIndex === maxIndex) {
                                    return '#fff'; // 最大值的点标为白色
                                }
                                return '#22E1DB';
                            }
                        },
                        label: {
                            show: (params) => params.dataIndex === maxIndex,
                            position: 'top',
                            color: '#22E1DB',
                            formatter: '{c}', // 显示当前数据值
                            fontSize: 12,
                        }
                    }
                ],
            };

            myChart.setOption(option);
        }).catch(err => {
        });

        window.addEventListener('resize', () => {
            myChart.resize();
        });
    }
});
</script>
<style scoped lang="scss">
.vchartPage {
    margin-top: 7.4vh;
}

.chartRef {
    width: 100%;
    height: 24vh;
}
</style>