优化

src/views/rent-facility/index.vue

@@ -43,7 +43,7 @@
           <template #header>
             <span class="custom-sort-header">
               总配置率
-              <i class="el-icon-sort" style="color: #2cbab2;" />
+              <i class="el-icon-sort" style="color: #2cbab2" />
             </span>
           </template>
         </el-table-column>
@@ -124,6 +124,7 @@ export default {
       this.$nextTick(() => {
         this.initChart()
         this.updateChartData(this.tableData)
+        this.chartInstance.resize()
       })
     },
     // 初始化页面数据：请求成功后再初始化图表
@@ -190,11 +191,7 @@ export default {
       } else {
         this.chartInstance.setOption({
           xAxis: { data: xAxis },
-          series: [
-            { name: '线路配置率', data: xianlu },
-            { name: '电缆配置率', data: dianlan },
-            { name: '变电配置率', data: biandian },
-          ],
+          series: [{ data: xianlu }, { data: dianlan }, { data: biandian }],
         })
       }
 
@@ -205,7 +202,23 @@ export default {
     getTotalOption() {
       return {
         tooltip: { trigger: 'axis' },
-        grid: { left: '3%', right: '4%', bottom: '15%', containLabel: true },
+        graphic: {
+          type: 'text',
+          left: 20,
+          top: 10,
+          style: {
+            text: '单位：分',
+            fill: '#666',
+            fontSize: 14,
+          },
+        },
+        grid: {
+          top: 60,
+          left: '3%',
+          right: '4%',
+          bottom: '15%',
+          containLabel: true,
+        },
         xAxis: {
           type: 'category',
           data: [],
@@ -252,23 +265,52 @@ export default {
     /** Tab2 配置 */
     getSubOption() {
       return {
-        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { type: 'shadow' },
+        },
+
+        // 👉 单位说明（左上角）
+        graphic: {
+          type: 'text',
+          left: 20,
+          top: 10,
+          style: {
+            text: '单位：分',
+            fill: '#666',
+            fontSize: 14,
+          },
+        },
+
+        // 👉 右上角图例
         legend: {
           right: 20,
           top: 10,
-          data: ['xianlu', 'dianlan', 'biandian'],
-          formatter(name) {
-            return { xianlu: '线路', dianlan: '电缆', biandian: '变电' }[name]
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: 'roundRect',
+          textStyle: {
+            color: '#666',
+            fontSize: 14,
           },
+          data: ['线路装备配置率', '电缆设备配置率', '变电设备配置率'],
         },
-        grid: { left: '3%', right: '4%', bottom: '15%', containLabel: true },
+
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '15%',
+          top: 60,
+          containLabel: true,
+        },
+
         xAxis: {
           type: 'category',
           data: [],
           axisLabel: {
-            interval: 0, // 必须
+            interval: 0,
             formatter(value) {
-              const max = 6 // 每行最多 6 个字
+              const max = 6
               let res = ''
               for (let i = 0; i < value.length; i++) {
                 res += value[i]
@@ -280,11 +322,15 @@ export default {
             },
           },
         },
-        yAxis: { type: 'value' },
+
+        yAxis: {
+          type: 'value',
+        },
+
         series: [
-          this.barSeries('xianlu', ['#46A8FF', '#7BC2FF']),
-          this.barSeries('dianlan', ['#5EDDCA', '#32E1C6']),
-          this.barSeries('biandian', ['#FDBE56', '#FFC468']),
+          this.barSeries('线路装备配置率', ['#46A8FF', '#7BC2FF']),
+          this.barSeries('电缆设备配置率', ['#5EDDCA', '#32E1C6']),
+          this.barSeries('变电设备配置率', ['#FDBE56', '#FFC468']),
         ],
       }
     },
@@ -397,10 +443,10 @@ export default {
   flex-direction: column;
   gap: 16px;
 
-  ::v-deep.el-loading-mask{
-    background-color:#E5EEF5;
+  ::v-deep.el-loading-mask {
+    background-color: #e5eef5;
   }
-  ::v-deep.el-loading-spinner{
+  ::v-deep.el-loading-spinner {
     position: absolute;
     top: 40%;
     left: 44%;
@@ -412,7 +458,7 @@ export default {
     background-repeat: no-repeat;
     background-position: center;
   }
-  ::v-deep.el-loading-spinner>svg{
+  ::v-deep.el-loading-spinner > svg {
     display: none;
   }
 }