修改

src/views/home/components/profitBar.vue

@@ -50,6 +50,8 @@
 
 <script>
 import operatingLineBar from './operatingBottomLineBar.vue';
+import * as echarts from 'echarts'
+
 export default {
   name: "Container",
   components: { operatingLineBar },
@@ -69,7 +71,7 @@ export default {
     // 核心：将原计算属性改为方法，主动处理数据
     getChartData() {
       const currentKey = this.selectedProfit
-      console.log(this.formattedData,'22222');
+      // console.log(this.formattedData,'22222');
 
       // 严格判断数据有效性
       if (
@@ -89,13 +91,23 @@ export default {
           name: '完成率',
           type: 'line',
           yAxisIndex: 1,
-          lineStyle: { color: 'rgba(40, 138, 255, .5)', width: 2 },
+          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(40, 138, 255, 0)' }
+            ])
+          },
           data: targetData.map(item => item.proportion),
           symbol: 'circle',
           symbolSize: 6
@@ -117,11 +129,42 @@ export default {
           yAxisIndex: 0,
           barWidth: 18,
           itemStyle: {
+            // 根据 safeFlag 动态返回不同的渐变色
             color: (params) => {
-              const completed = targetData[params.dataIndex].completed;
-              return completed === 1 ? 'rgba(255, 132, 0, 1)' : 'rgba(40, 203, 151, 1)';
+              const dataIndex = params.dataIndex;
+              const currentFlag = targetData[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: targetData.map(item => item.value)
         }