修改

src/views/home/grossMarginComponents/dataTrend.vue

@@ -98,11 +98,11 @@ export default {
         const diff = Number(item.diff) || 0;
 
         // 计算达标标识（≥100 → 1，<100 → 0）
-        const flag = this.getRateFlag(rate);
+        const flag = this.getRateFlag(rate, real, budget);
 
         // 填充数组
         months.push(month);
-        rates.push(Math.round(rate * 100)); // 转为百分比并取整
+        rates.push(rate); // 转为百分比并取整
         reals.push(real);
         budgets.push(budget);
         diffs.push(diff);
@@ -127,12 +127,18 @@ export default {
      * @param {Number} rate - 完成率（原始值，如1.2 → 120%）
      * @returns {Number} 1: 达标（≥100%），0: 未达标（<100%）
      */
-    getRateFlag(rate) {
-      if (isNaN(rate) || rate === null || rate === undefined) return 0;
-      // 原始rate若为小数（如0.8 → 80%，1.1 → 110%），则*100后判断
-      const ratePercent = rate;
-      return ratePercent >= 100 ? 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>

src/views/home/grossMarginComponents/dataTrendBar.vue

@@ -152,52 +152,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
                 }
@@ -234,88 +245,6 @@ export default {
         ]
       };
 
-      // 毛利率场景数据
-      const grossProfitData = {
-        series: [
-          // 1. 完成率（折线图）
-          {
-            name: '完成率',
-            type: 'line',
-            yAxisIndex: 1,
-            lineStyle: { color: 'rgba(40, 138, 255, .5)', width: 2 },
-            itemStyle: {
-              color: 'rgba(40, 138, 255, 1)',
-              borderColor: 'rgba(40, 138, 255, 1)',
-              borderWidth: 2,
-              radius: 4
-            },
-            areaStyle: {
-              opacity: 0.2,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(40, 138, 255, .9)' },
-                { offset: 1, color: 'rgba(40, 138, 255, 0)' }
-              ])
-            },
-            data: [106.7, 96.9, 106.5, 106.1, 93.8, 105.9], // 毛利率完成率（%）
-            symbol: 'circle',
-            symbolSize: 6
-          },
-          // 2. 目标（柱状图）
-          {
-            name: '预算',
-            type: 'bar',
-            yAxisIndex: 0,
-            barWidth: 14,
-            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
-            },
-            data: [30, 32, 31, 33, 32, 34] // 目标毛利率（万元）
-          },
-          // 3. 实际（柱状图）
-          {
-            name: '实际',
-            type: 'bar',
-            yAxisIndex: 0,
-            barWidth: 14,
-            itemStyle: {
-              color: (params) => {
-                const safeFlag = [1, 0, 1, 1, 0, 1]; // 达标状态
-                const currentFlag = safeFlag[params.dataIndex] || 0;
-                return currentFlag === 1
-                  ? {
-                    type: 'linear',
-                    x: 0, y: 0, x2: 0, y2: 1,
-                    colorStops: [
-                      { offset: 0, color: 'rgba(174, 239, 224, 1)' },
-                      { offset: 1, color: 'rgba(118, 218, 190, 1)' }
-                    ]
-                  }
-                  : {
-                    type: 'linear',
-                    x: 0, y: 0, x2: 0, y2: 1,
-                    colorStops: [
-                      { offset: 0, color: 'rgba(253, 209, 129, 1)' },
-                      { offset: 1, color: 'rgba(249, 164, 74, 1)' }
-                    ]
-                  };
-              },
-              borderRadius: [4, 4, 0, 0],
-              borderWidth: 0
-            },
-            data: [32, 31, 33, 35, 30, 36] // 实际毛利率（万元）
-          }
-        ]
-      };
-
       // 根据按钮状态返回对应数据
       return salesData;
     }

src/views/home/grossMarginComponents/monthlyRelatedMetrics.vue

@@ -84,10 +84,18 @@ export default {
         }
       })
     },
-    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(data) {
       // 修复核心：正确获取默认值（调用 factory 函数）
@@ -104,12 +112,12 @@ export default {
       // 整合flag字段
       this.ytdIncomeData = {
         ...incomeItem,
-        flag: this.getRateFlag(incomeItem.rate)
+        flag: this.getRateFlag(incomeItem.rate, incomeItem.real, incomeItem.budget)
       };
 
       this.ytdCostData = {
         ...costItem,
-        flag: this.getRateFlag(costItem.rate)
+        flag: this.getRateFlag(costItem.rate, costItem.real, costItem.budget)
       };
 
       console.log('累计收入数据：', this.ytdIncomeData);

src/views/home/grossMarginComponents/operatingBar.vue

@@ -181,8 +181,20 @@ export default {
               height: 20,
               formatter: (params) => {
                 const diff = data.diff || [];
+                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',
@@ -210,11 +222,20 @@ export default {
                   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
                 }

src/views/home/grossMarginComponents/operatingLineBarSale.vue

@@ -67,15 +67,39 @@ export default {
       this.myChart = echarts.init(chartDom);
 
       // 绑定点击事件（只绑定一次，永久生效）
-      this.myChart.on('click', (params) => {
-        // 提取点击的基地名称
-        const itemName = params.name;
-        // 根据映射表获取对应的序号（未匹配到则返回0或其他默认值）
-        const baseIndex = this.baseNameToIndexMap[itemName] || 0;
+      // this.myChart.on('click', (params) => {
+      //   // 提取点击的基地名称
+      //   const itemName = params.name;
+      //   // 根据映射表获取对应的序号（未匹配到则返回0或其他默认值）
+      //   const baseIndex = this.baseNameToIndexMap[itemName] || 0;
 
-        // 兼容不同图表类型的value：柱状图value是数值，折线图是[横坐标, 纵坐标]
-        // const itemValue = Array.isArray(params.value) ? params.value[1] : params.value;
-        // const seriesName = params.seriesName;
+      //   // 兼容不同图表类型的value：柱状图value是数值，折线图是[横坐标, 纵坐标]
+      //   // const itemValue = Array.isArray(params.value) ? params.value[1] : params.value;
+      //   // const seriesName = params.seriesName;
+
+      //   console.log(`你点击了【${itemName}】(序号：${baseIndex})`);
+      this.myChart.getZr().on('click', (params) => {
+        console.log('params', params);
+
+        // 提取点击的基地名称
+        // const itemName = params.name;
+        let itemName = undefined
+        // 根据映射表获取对应的序号（未匹配到则返回0或其他默认值）
+        let pointInPixel = [params.offsetX, params.offsetY];
+        if (this.myChart.containPixel('grid', pointInPixel)) {
+          let pointInGrid = this.myChart.convertFromPixel({
+            seriesIndex: 0
+          }, pointInPixel);
+          let xIndex = pointInGrid[0]; //索引
+          let handleIndex = Number(xIndex);
+          let seriesObj = this.myChart.getOption(); //图表object对象
+          var op = this.myChart.getOption();
+          //获得图表中点击的列
+          itemName = op.xAxis[0].data[handleIndex];  //获取点击的列名
+          console.log(itemName, 'monthmonthmonth');
+          console.log(handleIndex, seriesObj);
+        };
+        const baseIndex = this.baseNameToIndexMap[itemName] || 0;
 
         console.log(`你点击了【${itemName}】(序号：${baseIndex})`);
 

src/views/home/grossMarginComponents/operatingLineChart.vue

@@ -89,10 +89,18 @@ export default {
      * @param {number} rate 处理后的rate值（已*100）
      * @returns {0|1} flag值
      */
-    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;
+},
 
     /**
      * 核心处理函数：在所有数据都准备好后，才组装 chartData
@@ -107,7 +115,7 @@ export default {
       const groupReal = [this.groupData.real];     // 实际值数组
       const groupRate = [this.groupData.rate];     // 完成率数组
       // 新增：集团rate对应的flag
-      const groupFlag = [this.getRateFlag(groupRate[0])];
+      const groupFlag = [this.getRateFlag(groupRate[0], groupReal[0], groupTarget[0])];
 
       console.log('集团数据数组：', {
         groupTarget,
@@ -128,7 +136,7 @@ export default {
       const factoryRate = this.factoryData.map(item => item.rate || 0);
       const factoryDiff = this.factoryData.map(item => item.diff || 0);
       // 新增：每个工厂rate对应的flag数组
-      const factoryFlags = factoryRate.map(rate => this.getRateFlag(rate));
+      const factoryFlags = this.factoryData.map(item => this.getRateFlag(item.rate, item.real, item.budget));
 
       // 3. 组装最终的chartData（供子组件使用）
       this.chartData = {

src/views/home/grossMarginComponents/operatingLineChartCumulative.vue

@@ -84,10 +84,18 @@ export default {
      * @returns {0|1} flag值
      */
 
-    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;
+},
 
     /**
      * 核心处理函数：在所有数据都准备好后，才组装 chartData
@@ -102,7 +110,7 @@ export default {
       const groupReal = [this.groupData.real];     // 实际值数组
       const groupRate = [this.groupData.rate];     // 完成率数组
       // 新增：集团rate对应的flag
-      const groupFlag = [this.getRateFlag(groupRate[0])];
+      const groupFlag = [this.getRateFlag(groupRate[0], groupReal[0], groupTarget[0])];
 
       console.log('集团数据数组：', {
         groupTarget,
@@ -123,7 +131,7 @@ export default {
       const factoryRate = this.factoryData.map(item => item.rate || 0);
       const factoryDiff = this.factoryData.map(item => item.diff || 0);
       // 新增：每个工厂rate对应的flag数组
-      const factoryFlags = factoryRate.map(rate => this.getRateFlag(rate));
+      const factoryFlags = this.factoryData.map(item => this.getRateFlag(item.rate, item.rate, item.budget));
 
       // 3. 组装最终的chartData（供子组件使用）
       this.chartData = {

src/views/home/grossMarginComponents/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?.flag || 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
               }

src/views/home/grossMarginComponents/operatingTopBar.vue

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

src/views/home/grossMarginComponents/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
                   }

src/views/home/grossMarginComponents/yearRelatedMetrics.vue

@@ -90,10 +90,18 @@ export default {
       })
     },
     // 保留原flag判断逻辑（≥100返回1，<100返回0）
-    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(data) {
       // 数据兜底：确保是数组且长度≥2
@@ -108,12 +116,12 @@ export default {
       // 整合flag字段到收入/全成本数据中
       this.incomeData = {
         ...incomeItem,
-        flag: this.getRateFlag(incomeItem.rate)
+        flag: this.getRateFlag(incomeItem.rate, incomeItem.real, incomeItem.budget)
       };
 
       this.totalCostData = {
         ...totalCostItem,
-        flag: this.getRateFlag(totalCostItem.rate)
+        flag: this.getRateFlag(totalCostItem.rate, totalCostItem.real, totalCostItem.budget)
       };
 
       // 调试：确认数据赋值正确