修改

src/views/home/costComponents/costBaseBarChart.vue

@@ -8,27 +8,68 @@ import * as echarts from 'echarts';
 export default {
   components: {},
   data() {
-    return {};
+    return {
+      myChart: null // 保存图表实例，方便更新
+    };
   },
   props: {
     yName: {
       type: String,
       default: () => '元/㎡'
     },
+    chartData: {
+      type: Object,
+      default: () => { }
+    },
+  },
+  watch: {
+    chartData: {
+      handler() {
+        this.updateChart(); // 数据变化时更新图表
+      },
+      deep: true,
+      immediate: true
+    }
   },
   mounted() {
     this.$nextTick(() => {
-      this.initData();
+      this.initChart();
     });
   },
   methods: {
-    initData() {
+    initChart() {
       const chartDom = this.$refs.cockpitEffChip;
       if (!chartDom) {
         console.error('图表容器未找到！');
         return;
       }
-      const myChart = echarts.init(chartDom);
+      this.myChart = echarts.init(chartDom);
+      this.updateChart(); // 初始化图表数据
+
+      // 窗口缩放适配
+      window.addEventListener('resize', () => {
+        this.myChart && this.myChart.resize();
+      });
+
+      // 组件销毁清理
+      this.$once('hook:destroyed', () => {
+        window.removeEventListener('resize', () => {
+          this.myChart && this.myChart.resize();
+        });
+        this.myChart && this.myChart.dispose();
+      });
+    },
+
+    updateChart() {
+      if (!this.myChart || !this.chartData.rawData || !this.chartData.timeArray) {
+        return; // 图表未初始化或数据不完整时不更新
+      }
+
+      // 从rawData中提取目标和实际数据
+      const targetData = this.chartData.rawData.map(item => item.target); // 目标数据数组
+      const actualData = this.chartData.rawData.map(item => item.value);  // 实际数据数组
+      const xAxisData = this.chartData.timeArray;                        // 横坐标时间数组
+
       const option = {
         tooltip: {
           trigger: 'axis',
@@ -38,26 +79,24 @@ export default {
               backgroundColor: '#6a7985'
             }
           },
-          // 优化tooltip内容，区分各系列含义
           formatter: (params) => {
             let html = `${params[0].axisValue}<br/>`;
             params.forEach(item => {
-              // 直接使用系列名，无需映射，仅保留单位判断
-              html += `${item.marker} ${item.seriesName}: ${item.value}${item.seriesName === '完成率' ? '%' : '片'}<br/>`;
+              html += `${item.marker} ${item.seriesName}: ${item.value}${this.yName}<br/>`;
             });
             return html;
           }
         },
         grid: {
           top: 30,
-          bottom: 30, // 增大底部间距，避免柱子与X轴标签重叠
+          bottom: 30,
           right: 70,
-          left: 40,
+          left: 60,
         },
         xAxis: [
           {
             type: 'category',
-            boundaryGap: true, // 开启边界间隙，让柱子居中显示，不贴边
+            boundaryGap: true,
             axisTick: { show: false },
             axisLine: {
               show: true,
@@ -67,13 +106,12 @@ export default {
               color: 'rgba(0, 0, 0, 0.45)',
               fontSize: 12,
               interval: 0,
-              padding: [5, 0, 0, 0] // 标签向下偏移，避免与柱子底部重叠
+              padding: [5, 0, 0, 0]
             },
-            data: ['6月', '7月', '8月', '9月', '10月', '11月']
+            data: xAxisData // 使用timeArray作为横坐标
           }
         ],
         yAxis: [
-          // 左侧Y轴：目标/达标/未达标（数量，单位“片”）
           {
             type: 'value',
             name: this.yName,
@@ -82,77 +120,28 @@ export default {
               fontSize: 12,
               align: 'right'
             },
-            min: 0, // 最小值设0，确保柱子从X轴底部开始，不超过X轴
-            max: (value) => Math.ceil(value.max * 1.1), // 最大值留10%余量，避免柱子顶满
-            scale: false, // 关闭缩放，强制从0开始
+            // min: 0,
+            // max: (value) => value.max > 0 ? Math.ceil(value.max * 1.1) : 100, // 留10%余量
+            scale: true,
             axisTick: { show: false },
             axisLabel: {
               color: 'rgba(0, 0, 0, 0.45)',
               fontSize: 12,
-              formatter: '{value}'
+              formatter: `{value}`
             },
             splitLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
             axisLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
-            splitNumber: 4
-          },
-          // 右侧Y轴：完成率（百分比）
-          // {
-          //   type: 'value',
-          //   // name: '%',
-          //   nameTextStyle: {
-          //     color: 'rgba(0, 0, 0, 0.45)',
-          //     fontSize: 12,
-          //     align: 'left'
-          //   },
-          //   min: 0,
-          //   max: 100, // 完成率最大100%，符合业务逻辑
-          //   axisTick: { show: false },
-          //   axisLabel: {
-          //     color: 'rgba(0, 0, 0, 0.45)',
-          //     fontSize: 12,
-          //     formatter: '{value}%'
-          //   },
-          //   splitLine: { show: false }, // 不重复显示分割线
-          //   axisLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
-          //   splitNumber: 4
-          // }
+            splitNumber: 3
+          }
         ],
         series: [
-          // 1. 完成率：折线图（绑定右侧百分比Y轴）
-          // {
-          //   name: '产销率',
-          //   type: 'line',
-          //   yAxisIndex: 1, // 绑定右侧Y轴
-          //   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(255, 132, 0, 0)' }
-          //     ])
-          //   },
-          //   data: [65, 78, 52, 85, 60, 95, 72], // 完成率数据（0-100）
-          //   symbol: 'circle', // 数据点为圆形
-          //   symbolSize: 6 // 数据点大小
-          // },
-          // 2. 目标：柱状图（绑定左侧数量Y轴）
+          // 目标数据柱状图
           {
-            name: '销量',
+            name: '目标',
             type: 'bar',
             yAxisIndex: 0,
             barWidth: 24,
-            // 关键修复：label 直接放在 series 下，而非 itemStyle 内
             itemStyle: {
-              // 移除多余的 normal 层级，直接配置 color 渐变
               color: {
                 type: 'linear',
                 x: 0,
@@ -167,17 +156,15 @@ export default {
               borderRadius: [4, 4, 0, 0],
               borderWidth: 0
             },
-            data: [200, 280, 180, 300, 220, 350]
+            data: targetData // 目标数据数组
           },
-          // 3. 达标：柱状图（绑定左侧数量Y轴）
+          // 实际数据柱状图
           {
-            name: '产量',
+            name: '实际',
             type: 'bar',
             yAxisIndex: 0,
             barWidth: 24,
-            // 关键修复：label 直接放在 series 下，而非 itemStyle 内
             itemStyle: {
-              // 移除多余的 normal 层级，直接配置 color 渐变
               color: {
                 type: 'linear',
                 x: 0,
@@ -192,50 +179,12 @@ export default {
               borderRadius: [4, 4, 0, 0],
               borderWidth: 0
             },
-            data: [130, 220, 95, 255, 132, 332] // 达标数据（小于目标）
-          },
-          // 4. 未达标：柱状图（绑定左侧数量Y轴）
-          // {
-          //   name: '未达标',
-          //   type: 'bar',
-          //   yAxisIndex: 0,
-          //   barWidth: 18,
-          //   itemStyle: {
-          //     color: 'rgba(249, 164, 74, 1)',
-          //     borderRadius: [4, 4, 0, 0],
-          //     borderWidth: 0
-          //   },
-          //   data: [70, 60, 85, 45, 88, 18, 78] // 未达标数据（目标-达标）
-          // }
-        ],
-        // 图例：区分各系列，点击可控制显示隐藏
-        // legend: {
-        //   top: 0,
-        //   left: 'center',
-        //   itemWidth: 12,
-        //   itemHeight: 8,
-        //   textStyle: {
-        //     color: 'rgba(0, 0, 0, 0.45)',
-        //     fontSize: 12
-        //   },
-        //   data: ['完成率', '目标', '达标', '未达标']
-        // }
+            data: actualData // 实际数据数组
+          }
+        ]
       };
 
-      option && myChart.setOption(option);
-
-      // 窗口缩放适配
-      window.addEventListener('resize', () => {
-        myChart.resize();
-      });
-
-      // 组件销毁清理
-      this.$once('hook:destroyed', () => {
-        window.removeEventListener('resize', () => {
-          myChart.resize();
-        });
-        myChart.dispose();
-      });
+      this.myChart.setOption(option);
     }
   },
 };