修改

src/views/home/fullCostAnalysisComponents/dataTrendBar.vue

@@ -104,7 +104,7 @@ export default {
         diffs.push(monthData.diff || 0);
 
         // 生成达标状态（复用 getRateFlag 逻辑）
-        flags.push(this.getRateFlag(completeRate));
+        flags.push(this.getRateFlag(completeRate, monthData.real, monthData.target));
       });
 
       return {
@@ -122,7 +122,9 @@ export default {
     // 重构 chartD：替换硬编码数据为动态解析数据
     chartD() {
       // 获取动态解析的趋势数据
-      const { months, rates, reals, targets, flags,diffs } = this.trendParsedData;
+      const { months, rates, reals, targets, flags, diffs } = this.trendParsedData;
+      console.log('flags',flags);
+
       // 销量场景数据（保留原有结构，替换数据来源）
       const salesData = {
         allPlaceNames: months, // 优先用基地名称，无则用月份
@@ -189,8 +191,21 @@ export default {
               // 关键：去掉换行，让文字在一行显示，适配小尺寸
               formatter: function (params) {
                 const diff = diffs || [];
+                // const flags = flags || [];
                 const currentDiff = diff[params.dataIndex] || 0;
-                return `{rate|${currentDiff}}{text|差值}`;
+                const currentFlag = flags[params.dataIndex] || 0;
+                console.log('currentFlag', flags, params.dataIndex);
+
+                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',
@@ -220,19 +235,27 @@ export default {
               lineHeight: 20,
               rich: {
                 text: {
-                  // 缩小宽度和内边距，适配68px容器
-                  width: 'auto', // 自动宽度，替代固定40px
-                  padding: [5, 10, 5, 0], // 缩小内边距
+                  width: 'auto',
+                  padding: [5, 10, 5, 0],
                   align: 'center',
-                  color: '#464646', // 文字灰色
-                  fontSize: 11, // 缩小字体，适配小尺寸
-                  lineHeight: 20 // 垂直居中
+                  color: '#464646',
+                  fontSize: 11,
+                  lineHeight: 20
                 },
-                rate: {
+                achieved: {
                   width: 'auto',
                   padding: [5, 0, 5, 10],
                   align: 'center',
-                  color: '#30B590',
+                  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
                 }
@@ -277,10 +300,18 @@ export default {
       this.isDropdownShow = false;
     },
     // 复用达标状态判断方法
-    getRateFlag(rate) {
-      if (isNaN(rate) || rate === null || rate === undefined) return 0;
-      return (rate >= 100 || rate === 0) ? 1 : 0;
-    }
+getRateFlag(rate, real, target) {
+  if (isNaN(rate) || rate === null || rate === undefined) return 0;
+
+  // 1. 完成率 >= 100 => 达标
+  if (rate >= 100) return 1;
+
+  // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
+  if (rate === 0 && target === 0) return 1;
+
+  // 其他情况 => 未达标
+  return 0;
+},
   }
 };
 </script>