数据大屏图表接口对接

2025-09-28 15:28:15 +08:00
parent c4d00bfdc3
commit b202de76ec
15 changed files with 755 additions and 64 deletions
--- a/src/views/homeIndex/components/AlarmEvent.vue
+++ b/src/views/homeIndex/components/AlarmEvent.vue
@ -1,6 +1,140 @@
 <template>
-    <div></div>
+
+    <!-- 图表容器，设置宽高 -->
+    <div class="vchartPage">
+        <div ref="chartRef" class="chartRef"></div>
+    </div>
+
 </template>
-<script setup lang="ts"> 
+
+<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"></style>
+<style scoped lang="scss">
+.vchartPage {
+    margin-top: 7.2vh;
+}
+
+.chartRef {
+    width: 100%;
+    height: 23vh;
+}
+</style>