修改

src/views/home/operatingProfitComponents/operatingSingleBar.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="lineBottom" style="height: 180px; width: 100%">
-    <operatingLineBarSaleSingle :chartData="chartD" style="height: 99%; width: 100%" />
+    <operatingLineBarSaleSingle :refName="'totalOperating'" :chartData="chartD" style="height: 99%; width: 100%" />
   </div>
 </template>
 
@@ -11,10 +11,9 @@ import * as echarts from 'echarts';
 export default {
   name: "Container",
   components: { operatingLineBarSaleSingle },
-  props: ["chartData"],
+  props: ["detailData"],
   data() {
     return {
-      activeButton: 0,
     };
   },
   computed: {
@@ -24,10 +23,13 @@ export default {
     chartD() {
       // 背景图片路径（若不需要可注释）
       // const bgImageUrl = require('@/assets/img/labelBg.png');
+      const rate = this.detailData?.proportion ? Number(this.detailData?.proportion).toFixed(2) : 0
+      const diff = this.detailData?.diffValue || 0
+      console.log('diff', diff);
 
       const seriesData = [
         {
-          value: 131744,
+          value: this.detailData?.targetValue || 0,
           flag: 1, // 实际项：达标（绿色）
           label: {
             show: true,
@@ -37,7 +39,9 @@ export default {
             width: 68,
             height: 20,
             // 关键：去掉换行，让文字在一行显示，适配小尺寸
-            formatter: '{value|完成率}{rate|139%}',
+            formatter: function (params) {
+              return `{value|完成率}{rate|${rate}%}`;
+            },
             // 核心样式：匹配CSS需求
             backgroundColor: {
               type: 'linear',
@@ -91,8 +95,8 @@ export default {
           },
         },
         {
-          value: 630230,
-          flag: 0, // 预算项：未达标（橙色）
+          value: this.detailData?.value || 0,
+          flag: this.detailData?.completed, // 实际项：达标（绿色）
           label: {
             show: true,
             position: 'top',
@@ -101,8 +105,11 @@ export default {
             width: 68,
             height: 20,
             // 关键：去掉换行，让文字在一行显示，适配小尺寸
-            formatter: '{rate|139%}{text|差值}',
-            // 核心样式：匹配CSS需求
+            formatter: function (params) {
+              // 假设 params.data 是完成率数值（如 139）
+              // // 2. 模板字符串拼接富文本标签 + 动态值
+              return `{rate|${diff}}{text|差值}`;
+            },
             backgroundColor: {
               type: 'linear',
               x: 0,
@@ -189,6 +196,7 @@ export default {
           },
         ],
       };
+      console.log('data', data);
 
       return data;
     }