修改

src/views/home/costComponents/operatingLineBar.vue

@@ -175,7 +175,7 @@ export default {
               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)' }
+                { offset: 1, color: 'rgba(40, 138, 255, 0)' }
               ])
             },
             data: proportion,
@@ -188,10 +188,26 @@ export default {
             yAxisIndex: 0,
             barWidth: 14,
             itemStyle: {
-              color: 'rgba(40, 137, 255, 1)',
+              // 移除多余的 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: 'rgba(75, 157, 255, 1)' }
+                ]
+              },
               borderRadius: [4, 4, 0, 0],
               borderWidth: 0
             },
+            // itemStyle: {
+            //   color: 'rgba(40, 137, 255, 1)',
+            //   borderRadius: [4, 4, 0, 0],
+            //   borderWidth: 0
+            // },
             data: target
           },
           {
@@ -200,13 +216,39 @@ export default {
             yAxisIndex: 0,
             barWidth: 14,
             itemStyle: {
-              // 使用处理后的 safeFlag 避免 undefined
+              // 根据 safeFlag 动态返回不同的渐变色
               color: (params) => {
                 const dataIndex = params.dataIndex;
-                const currentFlag = safeFlag[dataIndex] || 0; // 双重保险，防止越界
-                return currentFlag === 1
-                  ? 'rgba(118, 218, 190, 1)'
-                  : 'rgba(249, 164, 74, 1)';
+                const currentFlag = safeFlag[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],
               borderWidth: 0