装备配置率配置

src/views/rent-facility/index.vue

@@ -141,9 +141,13 @@ export default {
             const nameMap = { xianlu: '线路', dianlan: '电缆', biandian: '变电' }
             return nameMap[name] || name
           },
-          right: '10%'
+          itemGap: 20,
+          bottom: 15, // 核心1：改为数值（px），预留图例+间距空间，值越大间距越宽
+          left: 'center',
+          orient: 'horizontal'
         },
-        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+        // 核心2：调整grid.bottom为15%（字符串格式），释放底部空间，避免圆角被挤压
+        grid: { left: '3%', right: '4%', bottom: '15%', containLabel: true },
         xAxis: {
           type: 'category',
           data: [],
@@ -166,9 +170,57 @@ export default {
         },
         yAxis: { type: 'value', axisLabel: { formatter: '{value}' } },
         series: [
-          { name: 'xianlu', type: 'bar', data: [], itemStyle: { color: '#409EFF' } },
-          { name: 'dianlan', type: 'bar', data: [], itemStyle: { color: '#67C23A' } },
-          { name: 'biandian', type: 'bar', data: [], itemStyle: { color: '#E6A23C' } }
+          {
+            name: 'xianlu',
+            type: 'bar',
+            data: [],
+            barBorderRadius: [10, 10, 0, 0], // 圆角正常生效
+            itemStyle: {
+              color: {
+                type: 'linear',
+                x: 0, y: 0,
+                x2: 0, y2: 1,
+                colorStops: [
+                  { offset: 0, color: '#46A8FF' },
+                  { offset: 1, color: '#7BC2FF' }
+                ]
+              }
+            }
+          },
+          {
+            name: 'dianlan',
+            type: 'bar',
+            data: [],
+            barBorderRadius: [10, 10, 0, 0], // 圆角正常生效
+            itemStyle: {
+              color: {
+                type: 'linear',
+                x: 0, y: 0,
+                x2: 0, y2: 1,
+                colorStops: [
+                  { offset: 0, color: '#5EDDCA' },
+                  { offset: 1, color: '#32E1C6' }
+                ]
+              }
+            }
+          },
+          {
+            name: 'biandian',
+            type: 'bar',
+            data: [],
+            barBorderRadius: [10, 10, 0, 0], // 圆角正常生效
+            itemStyle: {
+              color: {
+                type: 'linear',
+                x: 0, y: 0,
+                x2: 0, y2: 1,
+                colorStops: [
+                  { offset: 0, color: '#fdbe56' },
+                  { offset: 1, color: '#FFC468' }
+                ]
+              }
+            }
+          }
         ]
       },
       resizeTimer: null,
@@ -213,8 +265,8 @@ export default {
       const chartDom = this.$refs.chartRef
       if (!chartDom || this.chartInstance) return
 
-      const clientWidth = chartDom.clientWidth || 800
-      const clientHeight = chartDom.clientHeight || 400
+      const clientWidth = chartDom.clientWidth || 600
+      const clientHeight = chartDom.clientHeight || 300
       if (clientWidth === 0 || clientHeight === 0) {
         chartDom.style.width = '100%'
         chartDom.style.height = '450px'