修改

src/views/home/components/KFAPMiddleBar.vue

@@ -7,7 +7,7 @@
       <div class="right-container">
         <div class="legend">
           <span class="legend-item">
-            <span class="legend-icon line yield"></span>
+            <span class="legend-icon square yield"></span>
             利润
           </span>
           <span class="legend-item">
@@ -60,39 +60,13 @@ export default {
     // 原有计算属性（allPlaceNames、profitProportionData 等）保持不变
     // 新增：定义图表 series 配置
     chartSeries() {
-      const { allPlaceNames, incomeValueData, profitProportionData, costValueData, costCompletedData } = this.chartData
+      const { allPlaceNames, incomeValueData, profitListData, costValueData, costCompletedData } = this.chartData
       // 处理空数据默认值
       const incomeData = incomeValueData || Array(allPlaceNames.length).fill(0);
-      const profitData = profitProportionData || Array(allPlaceNames.length).fill(0);
+      const profitData = profitListData || Array(allPlaceNames.length).fill(0);
       const costData = costValueData || Array(allPlaceNames.length).fill(0);
 
       return [
-        // 1. 利润占比：折线图
-        {
-          name: '利润',
-          type: 'line',
-          yAxisIndex: 1,
-          lineStyle: {
-            color: 'rgba(40, 138, 255, .5)',
-            width: 2
-          },
-          itemStyle: {
-            color: 'rgba(40, 138, 255, 1)',
-            borderColor: 'rgba(40, 138, 255, 1)',
-            borderWidth: 2,
-            radius: 4
-          },
-          areaStyle: {
-            opacity: 0.2,
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: 'rgba(40, 138, 255, .9)' },
-              { offset: 1, color: 'rgba(255, 132, 0, 0)' }
-            ])
-          },
-          data: profitData,
-          symbol: 'circle',
-          symbolSize: 6
-        },
         // 2. 营业收入：柱状图
         {
           name: '营业收入',
@@ -100,26 +74,106 @@ export default {
           yAxisIndex: 0,
           barWidth: 18,
           itemStyle: {
-            color: '#2889FF',
-            borderRadius: [4, 4, 0, 0]
+            // 移除多余的 normal 层级，直接配置 color 渐变
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 0, color: 'rgba(130, 204, 255, 1)' },
+                { offset: 1, color: '#2889FF' }
+              ]
+            },
+            borderRadius: [4, 4, 0, 0],
+            borderWidth: 0
           },
+          // itemStyle: {
+          //   color: '#2889FF',
+          //   borderRadius: [4, 4, 0, 0]
+          // },
           data: incomeData
         },
         // 3. 成本：柱状图（动态颜色）
         {
           name: '成本',
           type: 'bar',
+          stack: 'total', // 堆叠分组名（与利润保持一致）
           yAxisIndex: 0,
           barWidth: 18,
           itemStyle: {
+            // 根据 safeFlag 动态返回不同的渐变色
             color: (params) => {
-              const completed = costCompletedData?.[params.dataIndex] ?? 0;
-              return completed === 1 ? 'rgba(255, 132, 0, 1)' : 'rgba(40, 203, 151, 1)';
+              const dataIndex = params.dataIndex;
+              const currentFlag = costCompletedData[dataIndex] || 0; // 默认为0（不达标）
+
+              // 达标时的渐变（绿色系）
+              if (currentFlag === 1) {
+                return {
+                  type: 'linear',
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    { offset: 0, color: 'rgba(174, 239, 224, 1)' }, // 浅绿
+                    { offset: 1, color: 'rgba(118, 218, 190, 1)' }  // 深绿
+                  ]
+                };
+              }
+              // 不达标时的渐变（橙色系）
+              else {
+                return {
+                  type: 'linear',
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    { offset: 0, color: 'rgba(253, 209, 129, 1)' }, // 浅橙
+                    { offset: 1, color: 'rgba(249, 164, 74, 1)' }   // 深橙
+                  ]
+                };
+              }
             },
-            borderRadius: [4, 4, 0, 0]
+            borderRadius: [4, 4, 0, 0],
+            borderWidth: 0
           },
           data: costData
-        }
+        },
+        {
+          name: '利润',
+          type: 'bar',
+          yAxisIndex: 0,
+          // lineStyle: {
+          //   color: 'rgba(40, 138, 255, .5)',
+          //   width: 2
+          // },
+          stack: 'total', // 堆叠分组名（与利润保持一致）
+          barWidth: 18,
+          itemStyle: {
+            // 移除多余的 normal 层级，直接配置 color 渐变
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 0, color: 'rgba(130, 204, 255, 1)' },
+                { offset: 1, color: '#288aff' }
+              ]
+            },
+            borderRadius: [4, 4, 0, 0],
+            borderWidth: 0
+          },
+          // itemStyle: {
+          //   color: '#288aff',
+          //   borderRadius: [4, 4, 0, 0]
+          // },
+          data: profitData,
+        },
       ];
     }
   },