首页优化

src/views/home/components/provincial/Bottom1-1.vue

@@ -55,7 +55,50 @@ export default {
       const myChart = echarts.init(chartDom)
 
       const xData = this.chartData.map((item) => item.name)
-      const yData = this.chartData.map((item) => item.value)
+      const BAR_COLOR_MAP = [
+        {
+          bottom: '#51ABF7',
+          top: '#78C5FF',
+        },
+        {
+          bottom: '#5EDDCA',
+          top: '#32E1C6',
+        },
+        {
+          bottom: '#FFB644',
+          top: '#FFC468',
+        },
+        {
+          bottom: '#FFAB6F',
+          top: '#F8AC86',
+        },
+      ]
+      const seriesData = this.chartData.map((item, index) => {
+        const color = BAR_COLOR_MAP[index] || BAR_COLOR_MAP[0]
+
+        return {
+          value: item.value,
+
+          // ✅ 柱体颜色（静态）
+          itemStyle: {
+            borderRadius: [50, 50, 0, 0],
+            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+              { offset: 0, color: color.bottom },
+              { offset: 1, color: color.top },
+            ]),
+          },
+
+          // ✅ label 颜色（静态）
+          label: {
+            show: true,
+            position: 'top',
+            fontSize: 16,
+            fontWeight: 'bold',
+            color: color.top,
+            formatter: `${item.value}/${item.proportion}%`,
+          },
+        }
+      })
 
       const option = {
         title: [
@@ -137,37 +180,10 @@ export default {
         series: [
           {
             type: 'bar',
-            barWidth: 28, // 👉 宽度 = 28px
+            barWidth: 20, // 👉 宽度 = 28px
+            barMinHeight: 6,
             z: 10,
-
-            itemStyle: {
-              borderRadius: [5, 5, 0, 0], // 👉 圆角 5px 5px 0 0
-              color: {
-                type: 'linear',
-                x: 0,
-                y: 1,
-                x2: 0,
-                y2: 0, // 👉 0deg = 从下到上
-                colorStops: [
-                  { offset: 0, color: '#31B5C4' }, // 底部
-                  { offset: 1, color: '#5DDAE2' }, // 顶部
-                ],
-              },
-            },
-
-            label: {
-              show: true,
-              position: 'top',
-              fontSize: 16,
-              fontWeight: 'bold',
-              color: '#333',
-              formatter: (params) => {
-                const proportion = this.chartData[params.dataIndex].proportion
-                return `${params.value}/${proportion}%`
-              },
-            },
-
-            data: yData,
+            data: seriesData,
           },
         ],
       }

src/views/home/components/provincial/Center1.vue

@@ -146,6 +146,5 @@ export default {
 
 .table-sty ::v-deep .el-table__cell {
   padding: 7px 0;
-  border: 0.5px solid #333;
 }
 </style>