制造成本分析修改

src/views/home/electricityCostAnalysisComponents/verticalBarChart.vue

@@ -1,8 +1,8 @@
 <template>
   <div style="width: 100%; height: 210px;position: relative;">
     <div style='font-size: 16px;position: absolute;right: 20px;top:10px'>
-      <span>完成率:<span style='color: #0B58FF;'>{{detailData.rate}}%</span></span>
-      <span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:detailData.flags>0?'#30B590':'#FF9423'}" >{{detailData.diff}}</span></span>
+      <span>完成率:<span style='color: #0B58FF;'>{{detailData.completeRate}}%</span></span>
+      <span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:detailData.flag>0?'#30B590':'#FF9423'}" >{{detailData.diff}}</span></span>
     </div>
     <div :ref="refName" id="coreLineChart" style="width: 100%; height: 210px;"></div>
   </div>
@@ -14,88 +14,70 @@ export default {
   components: {},
   data() {
     return {
-      myChart: null // 存储图表实例，避免重复创建
+      myChart: null
     };
   },
   props: {
-    // 明确接收的props结构，增强可读性
     refName: {
       type: String,
-      default: () => 'verticalBarChart',
+      default: 'verticalBarChart',
     },
     detailData: {
       type: Object,
       default: () => ({
+        completeRate: 0,
+        diff: 0,
+        real: 0,
+        target: 0,
+        thb: 0,
+        flag: 0
       }),
     }
   },
   mounted() {
-    this.$nextTick(() => {
-      this.updateChart();
-    });
+    this.$nextTick(() => this.updateChart());
   },
-
-  // 新增：监听 chartData 变化
   watch: {
-    // 深度监听数据变化，仅更新图表配置（不销毁实例）
     detailData: {
       handler() {
-        console.log(this.chartData, 'chartData');
-
         this.updateChart();
       },
       deep: true,
-      immediate: true // 初始化时立即执行
+      immediate: true
     }
   },
   methods: {
-    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) {
         console.error('图表容器未找到！');
         return;
       }
+      console.log('this.detailData', this.detailData);
 
+      // 修复：优化实例销毁逻辑，避免重复dispose
       if (this.myChart) {
-        this.myChart.dispose();
+        this.myChart.clear(); // 先清空，再重新渲染
+      } else {
+        this.myChart = echarts.init(chartDom);
       }
 
-      this.myChart = echarts.init(chartDom);
-      const diff = this.detailData.diff || 0
-      const rate = this.detailData.rate || 0
-      const flagValue = this.getRateFlag(this.detailData.rate, this.detailData.real, this.detailData.target)  || 0
+      // 解构数据，避免重复取值
+      const { diff, completeRate, real, target, flag } = this.detailData;
+      // 确保数值为数字类型
+      const realValue = Number(real) || 0;
+      const targetValue = Number(target) || 0;
+      const diffValue = Number(diff) || 0;
+      const rateValue = Number(completeRate) || 0;
+      const flagValue = Number(flag) || 0;
 
       const option = {
         tooltip: {
           trigger: 'axis',
           axisPointer: {
             type: 'cross',
-            label: {
-              backgroundColor: '#6a7985'
-            }
-          },
-          // formatter: (params) => {
-          //   let html = `${params[0].axisValue}<br/>`;
-          //   params.forEach(item => {
-          //     const unit = item.seriesName === '完成率' ? '%' : (
-          //       ['产量', '销量'].includes(this.$parent.selectedProfit) ? '片' : '万元'
-          //     );
-          //     html += `${item.marker} ${item.seriesName}: ${item.value}${unit}<br/>`;
-          //   });
-          //   return html;
-          // }
+            label: { backgroundColor: '#6a7985' }
+          }
         },
         grid: {
           top: 40,
@@ -103,122 +85,98 @@ export default {
           right: 80,
           left: 10,
           containLabel: true,
-          show: false // 隐藏grid背景，避免干扰
+          show: false
         },
         xAxis: {
-          // 横向柱状图的x轴必须设为数值轴，否则无法正常展示数值
           type: 'value',
-          // offset: 0,
-          // boundaryGap: true  ,
-          // boundaryGap: [10, 0], // 可根据需要开启，控制轴的留白
           axisTick: { show: false },
           min: 0,
-          //
           splitNumber: 4,
-          axisLine: {
-            show: true,
-            lineStyle: { color: 'rgba(0, 0, 0, 0.15)' }
-          },
-          axisLabel: {
-            color: 'rgba(0, 0, 0, 0.45)',
-            fontSize: 12,
-            interval: 0,
-            padding: [5, 0, 0, 0]
-          },
-          // data: xData // 数值轴不需要手动设置data，由series的数据自动生成
+          axisLine: { show: true, lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
+          axisLabel: { color: 'rgba(0, 0, 0, 0.45)', fontSize: 12, interval: 0, padding: [5, 0, 0, 0] }
         },
         yAxis: {
           type: 'category',
-          axisLabel: {
-            color: 'rgba(0, 0, 0, 0.75)',
-            fontSize: 12,
-            interval: 0,
-            padding: [5, 0, 0, 0]
-          },
-          axisLine: {
-            show: true, // 显示Y轴轴线（关键）
-            lineStyle: {
-              color: '#E5E6EB', // 轴线颜色（浅灰色，可自定义）
-              width: 1, // 轴线宽度
-              type: 'solid' // 实线（可选：dashed虚线、dotted点线）
-            }
-          },
+          axisLabel: { color: 'rgba(0, 0, 0, 0.75)', fontSize: 12, interval: 0, padding: [5, 0, 0, 0] },
+          axisLine: { show: true, lineStyle: { color: '#E5E6EB', width: 1, type: 'solid' } },
           axisTick: { show: false },
-          // padding: [300, 100, 100, 100],
-          data: ['实际', '预算'] // y轴分类：实际、预算
+          data: ['实际', '预算']
         },
         series: [
           {
-            // name: '预算',
             type: 'bar',
             barWidth: 24,
-            // barCategoryGap: '50', // 柱子之间的间距（相对于柱子宽度）
-            // 数据长度与yAxis的分类数量匹配（实际、预算各一个值）
-            data: [{
-              value: this.detailData.real,
-              label: {
-                show: true,
-                position: 'right',
-                fontSize: 14,
+            // 修复：拆分数据项，确保每个柱子的样式独立生效
+            data: [
+              // 实际值柱子（核心：绑定flag颜色）
+              {
+                value: realValue,
+                label: {
+                  show: true,
+                  position: 'right',
+                  fontSize: 14
+                },
+                // 修复：flag颜色判断独立绑定到实际值柱子
+                itemStyle: {
+                  color: flagValue === 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]
+                }
               },
-              itemStyle: {
-                color: flagValue === 1
-                  ? {
+              // 预算值柱子（固定蓝色渐变）
+              {
+                value: targetValue,
+                label: {
+                  show: true,
+                  position: 'right',
+                  fontSize: 14
+                },
+                itemStyle: {
+                  color: {
                     type: 'linear',
-                    x: 0, y: 0, x2: 0, y2: 1,
+                    x: 1, 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)' }
+                      { offset: 0, color: '#82CCFF' },
+                      { offset: 1, color: '#4B9DFF' }
                     ]
                   },
-                borderRadius: [4, 4, 0, 0]
+                  borderRadius: [4, 4, 0, 0],
+                  borderWidth: 0
+                }
               }
-            }, {
-              value: this.detailData.target,
-              label: {
-                show: true,
-                position: 'right',
-                fontSize: 14,
-              },
-              itemStyle: {
-                // 预算的渐变颜色（蓝系渐变）
-                color: {
-                  type: 'linear',
-                  x: 1, y: 0, x2: 0, y2: 1,
-                  colorStops: [
-                    { offset: 0, color: '#82CCFF' }, // 浅蓝
-                    { offset: 1, color: '#4B9DFF' }  // 深蓝
-                  ]
-                },
-                borderRadius: [4, 4, 0, 0],
-                borderWidth: 0
-              },
-            },],
-
-          },
+            ]
+          }
         ]
       };
 
-      option && this.myChart.setOption(option);
+      this.myChart.setOption(option, true); // 新增：true表示替换所有配置，避免缓存
 
-      // 窗口缩放适配和销毁逻辑保持不变
-      window.addEventListener('resize', () => {
+      // 优化：防抖resize，避免频繁触发
+      const resizeHandler = () => {
         this.myChart && this.myChart.resize();
-      });
+      };
+      window.removeEventListener('resize', resizeHandler); // 先移除再添加，避免重复绑定
+      window.addEventListener('resize', resizeHandler);
 
       this.$once('hook:destroyed', () => {
-        window.removeEventListener('resize', () => {
-          this.myChart && this.myChart.resize();
-        });
+        window.removeEventListener('resize', resizeHandler);
         this.myChart && this.myChart.dispose();
+        this.myChart = null;
       });
     }
   },