修改

src/views/home/rawSheetYieldComponents/verticalBarChart.vue

@@ -43,10 +43,18 @@ export default {
     }
   },
   methods: {
-    getRateFlag(rate) {
-      if (isNaN(rate) || rate === null || rate === undefined) return 0;
-      return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→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;
+},
     updateChart() {
       const chartDom = this.$refs[this.refName];
       if (!chartDom) {
@@ -61,7 +69,7 @@ export default {
       this.myChart = echarts.init(chartDom);
       const diff = this.detailData.diff || 0
       const rate = this.detailData.rate || 0
-      const flagValue = this.getRateFlag(this.detailData.rate) || 0
+      const flagValue = this.getRateFlag(this.detailData.rate, this.detailData.real, this.detailData.target) || 0
 
       const option = {
         tooltip: {
@@ -150,54 +158,64 @@ export default {
                 width: 68,
                 height: 20,
                 // 关键：去掉换行，让文字在一行显示，适配小尺寸
-                formatter: function (params) {
-                  // 假设 params.data 是完成率数值（如 139）
-                  // // 2. 模板字符串拼接富文本标签 + 动态值
-                  return `{rate|${diff}}{text|差值}`;
+                formatter: (params) => {
+
+                  // const flags = flags || [];
+                  const currentDiff = diff || 0;
+                  const currentFlag = flagValue || 0;
+                  // console.log('flags[params.dataIndex]', flags);
+
+                  const prefix = currentFlag === 1 ? '+' : '-';
+
+                  // 根据标志位选择不同的样式类
+                  if (currentFlag === 1) {
+                    // 达标 - 使用 rate-achieved 样式
+                    return `{achieved|${prefix}${currentDiff}}{text|差值}`;
+                  } else {
+                    // 未达标 - 使用 rate-unachieved 样式
+                    return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
+                  }
                 },
-                // formatter: '',
-                // 核心样式：匹配CSS需求
                 backgroundColor: {
                   type: 'linear',
-                  x: 0,
-                  y: 0,
-                  x2: 0,
-                  y2: 1,
+                  x: 0, y: 0, x2: 0, y2: 1,
                   colorStops: [
-                    { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, // 顶部0px位置：阴影最强
-                    // { offset: 0.1, color: 'rgba(205, 215, 224, 0.4)' }, // 1px位置：阴影减弱（对应1px）
-                    // { offset: 0.15, color: 'rgba(205, 215, 224, 0.6)' }, // 3px位置：阴影几乎消失（对应3px扩散）
-                    { offset: 0.2, color: '#ffffff' }, // 主体白色
+                    { offset: 0, color: 'rgba(205, 215, 224, 0.6)' },
+                    { offset: 0.2, color: '#ffffff' },
                     { offset: 1, color: '#ffffff' }
                   ]
                 },
-                // 外阴影：0px 2px 2px 0px rgba(191,203,215,0.5)
                 shadowColor: 'rgba(191,203,215,0.5)',
                 shadowBlur: 2,
                 shadowOffsetX: 0,
                 shadowOffsetY: 2,
-                // 圆角：4px
                 borderRadius: 4,
-                // 移除边框
                 borderColor: '#BFCBD577',
                 borderWidth: 0,
-                // 文字垂直居中（针对富文本）
                 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
                   }