图表

src/views/pms/stat/maintain.vue

@@ -136,7 +136,7 @@
             <span class="text-base font-medium text-gray-600">故障上报状态统计</span>
           </div>
         </template>
-        <el-row class="h-[240px]">
+        <el-row class="h-[220px]">
           <el-col :span="6" class="flex flex-col items-center">
             <div ref="reportingChartRef" class="h-[160px] w-full"></div>
             <div class="text-center mt-2">
@@ -171,7 +171,7 @@
             <span class="text-base font-medium text-gray-600">维修工单状态统计</span>
           </div>
         </template>
-        <el-row class="h-[240px]">
+        <el-row class="h-[220px]">
           <el-col :span="12" class="flex flex-col items-center">
             <div ref="writeChartRef" class="h-[160px] w-full"></div>
             <div class="text-center mt-2">
@@ -193,7 +193,12 @@
   <el-row>
     <el-col :span="24">
       <el-card class="chart-card" shadow="never">
-        <div ref="chartContainer" class="chart-container"></div>
+        <template #header>
+          <div class="flex items-center justify-between">
+            <span class="text-base font-medium text-gray-600">近一年数量统计</span>
+          </div>
+        </template>
+        <div ref="chartContainer" class="h-[300px]"></div>
       </el-card>
     </el-col>
   </el-row>
@@ -203,6 +208,8 @@
 
 <script setup lang="ts" name="Index">
 import * as echarts from 'echarts/core'
+import { BarChart } from 'echarts/charts'; // 显式导入柱状图模块
+
 import {
   GridComponent,
   LegendComponent,
@@ -237,7 +244,8 @@ echarts.use([
   GridComponent,
   LineChart,
   UniversalTransition,
-  GaugeChart
+  GaugeChart,
+  BarChart
 ])
 
 const timeRange = ref('7d') // 修改默认选择为近一周
@@ -507,7 +515,7 @@ const initGaugeChart = (el: any, value: number, color: string) => {
           color: color,
           offsetCenter: [0, '0'],
           formatter: (value: number) => {
-            return `${value} 个`
+            return `${value} `
           }
         },
         data: [{ value: value }]
@@ -716,8 +724,7 @@ const initChart = async () => {
         barGap: 0,
         itemStyle: {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: '#83bff6' },
-            { offset: 0.5, color: '#188df0' },
+            { offset: 0, color: '#188df0' },
             { offset: 1, color: '#188df0' }
           ])
         },
@@ -731,9 +738,9 @@ const initChart = async () => {
         type: 'bar',
         itemStyle: {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: '#37a2da' },
-            { offset: 0.5, color: '#37a2da' },
-            { offset: 1, color: '#67e0e3' }
+            { offset: 0, color: '#d3a137' },
+
+            { offset: 1, color: '#d3a137' }
           ])
         },
         emphasis: {
@@ -769,20 +776,4 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.chart-container {
-  width: 100%;
-  height: 600px;
-  margin: 20px auto;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-  padding: 20px;
-}
-
-@media (max-width: 768px) {
-  .chart-container {
-    height: 400px;
-    padding: 10px;
-  }
-}
 </style>