修改

src/views/home/operatingProfitComponents/operatingSingleBar.vue

@@ -90,8 +90,16 @@ export default {
             }
           },
           itemStyle: {
+            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,
+            borderWidth: 0
           },
         },
         {
@@ -105,52 +113,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 = this.detailData?.completed || 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|差值}`;
+              }
             },
             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
               }