修改

src/views/home/operatingComponents/dataTrendBar.vue

@@ -151,52 +151,63 @@ export default {
               width: 68,
               height: 20,
               // 关键：去掉换行，让文字在一行显示，适配小尺寸
-              formatter: function (params) {
+              formatter: (params) => {
                 const diff = data.diffs || [];
+                const flags = data.flags || [];
                 const currentDiff = diff[params.dataIndex] || 0;
-                return `{rate|${currentDiff}}{text|差值}`;
+                const currentFlag = flags[params.dataIndex] || 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,
+                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
                 }