修改

src/views/home/fullCostAnalysisComponents/verticalBarChart.vue

@@ -56,6 +56,8 @@ export default {
       }
 
       // 解构数据，避免重复取值
+      console.log('this.detailData', this.detailData);
+
       const { diff, completeRate, real, target, flag } = this.detailData;
       // 确保数值为数字类型
       const realValue = Number(real) || 0;
@@ -110,7 +112,21 @@ export default {
                   offset: [0, 25],
                   width: 68,
                   height: 20,
-                  formatter: `{rate|${diffValue}}{text|差值}`,
+                  formatter: (params) => {
+                    const currentDiff = diffValue || 0;
+                    const currentFlag = flagValue || 0;
+
+                    const prefix = currentFlag === 1 ? '+' : '';
+
+                    // 根据标志位选择不同的样式类
+                    if (currentFlag === 1) {
+                      // 达标 - 使用 rate-achieved 样式
+                      return `{achieved|${prefix}${currentDiff}}{text|差值}`;
+                    } else {
+                      // 未达标 - 使用 rate-unachieved 样式
+                      return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
+                    }
+                  },
                   backgroundColor: {
                     type: 'linear',
                     x: 0, y: 0, x2: 0, y2: 1,
@@ -125,11 +141,35 @@ export default {
                   shadowOffsetX: 0,
                   shadowOffsetY: 2,
                   borderRadius: 4,
+                  borderColor: '#BFCBD577',
                   borderWidth: 0,
                   lineHeight: 20,
                   rich: {
-                    text: { width: 'auto', padding: [5, 10, 5, 0], align: 'center', color: '#464646', fontSize: 11, lineHeight: 20 },
-                    rate: { width: 'auto', padding: [5, 0, 5, 10], align: 'center', color: '#30B590', fontSize: 11, lineHeight: 20 }
+                    text: {
+                      width: 'auto',
+                      padding: [5, 10, 5, 0],
+                      align: 'center',
+                      color: '#464646',
+                      fontSize: 11,
+                      lineHeight: 20
+                    },
+                    achieved: {
+                      width: 'auto',
+                      padding: [5, 0, 5, 10],
+                      align: 'center',
+                      color: '#76DABE', // 与达标的 offset: 1 颜色一致
+                      fontSize: 11,
+                      lineHeight: 20
+                    },
+                    // 未达标样式
+                    unachieved: {
+                      width: 'auto',
+                      padding: [5, 0, 5, 10],
+                      align: 'center',
+                      color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
+                      fontSize: 11,
+                      lineHeight: 20
+                    }
                   }
                 },
                 // 修复：flag颜色判断独立绑定到实际值柱子