数据大屏图表接口对接

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/DeviceCategory.vue
+++ b/src/views/homeIndex/components/DeviceCategory.vue
@ -1,6 +1,120 @@
 <template>
-    <div></div>
+    <div class="vchartPage">
+        <div ref="chartRef" class="chartRef"></div>
+    </div>
 </template>
-<script setup lang="ts"> 
+<script setup lang="ts">
+import { getDeviceCommunicationModeStatistics } from '@/api/homeIndex/index';
+import * as echarts from 'echarts';
+const chartRef = ref<HTMLDivElement | null>(null);
+onMounted(() => {
+    if (chartRef.value) {
+        const myChart = echarts.init(chartRef.value);
+    
+        getDeviceCommunicationModeStatistics().then((res) => {
+            console.log(res, '接口数据');
+            const dataList = res.data || [];
+            // 1.（通信方式名称）
+            const xAxisData = dataList.map(item => item.communicationModeName);
+            // 2. 总数数据
+            const totalData = dataList.map(item => item.totalDevices);
+            // 3. 异常数数据
+            const abnormalData = dataList.map(item => item.abnormalDevices);
+            // 图表配置）
+            const option = {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: { type: 'shadow' }
+                },
+                legend: {
+                    data: ['总数', '异常'],
+                    right: '20px',
+                    textStyle: { color: '#DEEFFF' },
+                    itemWidth: 12,
+                    itemHeight: 12
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    top: '15%',
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'category',
+                    data: xAxisData, 
+                    axisLine: {
+                        lineStyle: { color: 'rgba(255,255,255,0.1)' }
+                    },
+                    axisLabel: {
+                        color: '#DEEFFF' 
+                    }
+                },
+                yAxis: {
+                    type: 'value',
+                    axisLine: { show: false }, 
+                    axisLabel: { color: '#fff' },
+                    splitLine: {
+                        lineStyle: {
+                            color: 'rgba(255, 255, 255, 0.1)',
+                            type: 'dashed'
+                        }
+                    }
+                },
+                series: [
+                    {
+                        name: '总数',
+                        type: 'bar',
+                        data: totalData,
+                        itemStyle: {
+                            color: new echarts.graphic.LinearGradient(
+                                0, 0, 0, 1,
+                                [
+                                    { offset: 0, color: 'rgba(0,166,255,1)' },
+                                    { offset: 1, color: 'rgba(0,125,221, 0.6)' }
+                                ]
+                            ),
+                            borderRadius: 4
+                        },
+                        barWidth: '20px'
+                    },
+                    {
+                        name: '异常',
+                        type: 'bar',
+                        data: abnormalData,
+                        itemStyle: {
+                            color: new echarts.graphic.LinearGradient(
+                                0, 0, 0, 1,
+                                [
+                                    { offset: 0, color: 'rgba(232,69,37,1)' },
+                                    { offset: 1, color: 'rgba(240,12,12, 0.6)' }
+                                ]
+                            ),
+                            borderRadius: 4
+                        },
+                        barWidth: '20px'
+                    }
+                ]
+            };
+
+            myChart.setOption(option);
+        }).catch(err => {
+            console.log('获取数据失败', err);
+        });
+        // 窗口 resize 时自适应
+        window.addEventListener('resize', () => {
+            myChart.resize();
+        });
+    }
+});
 </script>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.vchartPage {
+    margin-top: 7.8vh;
+}
+
+.chartRef {
+    width: 100%;
+    height: 22vh;
+}
+</style>