hnyz_dcs/ui/src/components/HnyzDcs/AlarmBarChartComponent.vue

<template>
    <el-skeleton :loading="loading" animated>
        <template #default>
            <div style="height: 235px;">
                <v-chart class="h-full" :option="option" />
            </div>
        </template>
    </el-skeleton>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { use } from 'echarts/core'
import VChart from 'vue-echarts'

import {
    BarChart
} from 'echarts/charts'

import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent
} from 'echarts/components'

import {
    CanvasRenderer
} from 'echarts/renderers'

import { getAlarmEventWeeklyCount } from '@/api/hnyz/alarmEvent'
use([
    CanvasRenderer,
    BarChart,
    TitleComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent
])
const loading = ref(true)
const option = ref({})

const { proxy } = getCurrentInstance()
const { alarm_type } = proxy.useDict('alarm_type')

onMounted(() => {
    getAlarmEventWeeklyCount().then(res => {
        if (res.code === 200) {
            const xAxisLabels = alarm_type.value.map(item => item.label)
            const valueMap = Object.fromEntries(res.data.map(item => [item.alarm_type, item.alarmCount]))
            const barData = alarm_type.value.map(item => valueMap[item.value] || 0)

            option.value = {
                title: { text: '近期告警统计', left: 'center' },
                tooltip: {},
                xAxis: {
                    type: 'category',
                    data: xAxisLabels
                },
                yAxis: { type: 'value' },
                series: [
                    {
                        name: '告警次数',
                        type: 'bar',
                        data: barData,
                        itemStyle: {
                            color: '#f56c6c'
                        }
                    }
                ]
            }
            loading.value = false
        }
    })
})

</script>

<style scoped lang="scss">
.stat-card {
    display: flex;
    align-items: center;
}
</style>