首页提交

src/views/dashboard/dashboard.vue

@@ -111,7 +111,7 @@
                 <SubTitle title="运营数据" />
                 <div class="chart-content">
                     <BaseChart width="100%" height="50%" :option="checkOption" />
-                    <BaseChart width="100%" height="50%" :option="checkOption" />
+                    <BaseChart width="100%" height="50%" :option="lineOption" />
                 </div>
             </el-card>
         </div>
@@ -348,12 +348,17 @@ const checkOption = computed(() => {
             }
         },
         legend: {
-            show: true
+            show: true,
+            left: '10%',
+            top: '5%',
+            itemWidth: 15,
+            itemHeight: 10
         },
         grid: {
             left: '3%',
             right: '4%',
-            bottom: '3%',
+            bottom: '1%',
+            top: '20%',
             containLabel: true
         },
         xAxis: [
@@ -375,13 +380,102 @@ const checkOption = computed(() => {
                 name: '巡检设备数',
                 type: 'bar',
                 barWidth: '12',
-                data: checkData.map((item) => item.yData1)
+                data: checkData.map((item) => item.yData1),
+                itemStyle: {
+                    color: '#6395FA'
+                }
             },
             {
                 name: '维修设备数',
                 type: 'bar',
                 barWidth: '12',
-                data: checkData.map((item) => item.yData2)
+                data: checkData.map((item) => item.yData2),
+                itemStyle: {
+                    color: '#65DAAB'
+                }
+            }
+        ]
+    };
+});
+const lineData = getRecentWeekDates().map((item) => ({
+    xData: item.substr(5),
+    yData1: Math.floor(Math.random() * 100),
+    yData2: Math.floor(Math.random() * 100),
+    yData3: Math.floor(Math.random() * 100)
+}));
+const lineOption = computed(() => {
+    return {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'cross',
+                label: {
+                    backgroundColor: '#6a7985'
+                }
+            }
+        },
+        legend: {
+            show: true,
+            left: '10%',
+            top: '5%',
+            itemWidth: 20,
+            itemHeight: 10
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            top: '20%',
+            containLabel: true
+        },
+        xAxis: [
+            {
+                type: 'category',
+                boundaryGap: false,
+                data: lineData.map((item) => item.xData)
+            }
+        ],
+        yAxis: [
+            {
+                type: 'value'
+            }
+        ],
+        series: [
+            {
+                name: '故障数',
+                type: 'line',
+                itemStyle: {
+                    color: '#6395FA'
+                },
+                areaStyle: {},
+                emphasis: {
+                    focus: 'series'
+                },
+                data: lineData.map((item) => item.yData1)
+            },
+            {
+                name: '告警数',
+                type: 'line',
+                itemStyle: {
+                    color: '#5AD8A6'
+                },
+                areaStyle: {},
+                emphasis: {
+                    focus: 'series'
+                },
+                data: lineData.map((item) => item.yData2)
+            },
+            {
+                name: '离线数',
+                type: 'line',
+                itemStyle: {
+                    color: '#5E7092'
+                },
+                areaStyle: {},
+                emphasis: {
+                    focus: 'series'
+                },
+                data: lineData.map((item) => item.yData3)
             }
         ]
     };
@@ -419,6 +513,7 @@ const checkOption = computed(() => {
     .el-card {
         height: 350px;
         background: #fff;
+
         &:not(:first-child) {
             margin-left: 5px;
         }
@@ -487,6 +582,7 @@ const checkOption = computed(() => {
 .warningTable {
     :deep(.cell) {
         padding: 0 3px !important;
+        font-size: 12px;
     }
 }
 </style>