dyf-vue-ui/src/views/homeIndex/components/AlarmEvent.vue

<template>

    <!-- 图表容器，设置宽高 -->
    <div class="vchartPage">
        <div ref="chartRef" class="chartRef"></div>
    </div>

</template>

<script setup lang="ts">
import * as echarts from 'echarts'; // 引入 ECharts
const chartRef = ref<HTMLDivElement | null>(null); // 图表容器的 ref
const echartData = ref<any>({});
const props = defineProps({
    alarmOverview: {
        type: Object,
        required: true,
    },
});

watch(() => props.alarmOverview, (newVal) => {
    echartData.value = newVal;
    console.log('newVal:', newVal);
}, { immediate: true, deep: true });

onMounted(() => {
    setTimeout(() => {
        if (chartRef.value) {
            const {
                forcedAlarms,
                intrusionImpactAlarms,
                autoAlarms,
                geoFenceAlarms
            } = echartData.value;
            // 初始化 ECharts 实例
            const myChart = echarts.init(chartRef.value);
            // 配置图表参数
            const option = {
                tooltip: {
                    trigger: 'axis', // 触发方式：坐标轴触发
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '3%',
                    top: '15%',
                    containLabel: true, // 网格包含坐标轴标签
                },
                xAxis: {
                    type: 'category',
                    data: ['强制报警', '撞击闯入', '自动报警', '电子围栏告警'], // X 轴类目
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.1)', // X 轴线颜色
                        },
                    },
                    axisLabel: {
                        color: '#DEEFFF', // X 轴文字颜色
                    },
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#1e3a8a', // Y 轴线颜色
                        },
                    },
                    axisLabel: {
                        color: '#DEEFFF', // Y 轴标签文字颜色
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.1)', // Y 轴分割
                            type: 'dashed', // 分割线为虚线
                        },
                    },
                },
                series: [
                    {
                        name: '报警次数',
                        type: 'bar',
                        data: [forcedAlarms, intrusionImpactAlarms, autoAlarms, geoFenceAlarms],
                        barWidth: '20px', // 柱子宽度
                        // 为不同柱子设置渐变色
                        itemStyle: {
                            color: function (params: any) {
                                const colorList = [
                                    // 强制报警：蓝色渐变
                                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: '#0F3352' },
                                        { offset: 1, color: '#00A8FF' },
                                    ]),
                                    // 撞击闯入：黄色渐变
                                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: '#0F3352' },
                                        { offset: 1, color: '#E4B90C' },
                                    ]),
                                    // 自动报警：青蓝渐变
                                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: '#0F3352' },
                                        { offset: 1, color: '#15DBCB' },
                                    ]),
                                    // 电子围栏告警：红色渐变
                                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: '#0F3352' },
                                        { offset: 1, color: '#F00C0C' },
                                    ]),
                                ];
                                return colorList[params.dataIndex];
                            },
                            borderRadius: 4
                        },
                    },
                ],
            };

            // 将配置项设置到图表实例
            myChart.setOption(option);

            // 窗口resize时，图表自适应
            window.addEventListener('resize', () => {
                myChart.resize();
            });
        }
    }, 200)


});

</script>
<style scoped lang="scss">
.vchartPage {
    margin-top:4.8vh;
}

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