修改

src/views/home/components/psrChartBar.vue

@@ -0,0 +1,186 @@
+<template>
+  <div ref="cockpitEffChip" id="coreLineChart" style="width: 100%; height: 400px;"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+  components: {},
+  data() {
+    return {
+      myChart: null // 存储图表实例，避免重复创建
+    };
+  },
+  props: ["stockValues"],
+  watch: {
+    // 监听 stockValues 变化，动态更新图表
+    stockValues: {
+      handler() {
+        this.updateChart();
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  beforeDestroy() {
+    // 清理图表实例和事件监听
+    this.myChart && this.myChart.dispose();
+    window.removeEventListener('resize', this.resizeHandler);
+  },
+  methods: {
+    // 初始化图表实例
+    initChart() {
+      const chartDom = this.$refs.cockpitEffChip;
+      if (!chartDom) {
+        console.error('图表容器未找到！');
+        return;
+      }
+      this.myChart = echarts.init(chartDom);
+      // 绑定窗口缩放事件
+      this.resizeHandler = () => this.myChart?.resize();
+      window.addEventListener('resize', this.resizeHandler);
+    },
+
+    // 解析 stockValues：提取地名和对应库存值
+    parseStockData() {
+      const xData = []; // X轴地名
+      const data = []; // 对应库存值
+
+      if (Array.isArray(this.stockValues) && this.stockValues.length) {
+        this.stockValues.forEach(item => {
+          // 获取对象的唯一键（如“宜兴基地库存”）
+          // const key = Object.keys(item)[0];
+          // 提取地名：去掉“基地库存”后缀（如“宜兴基地库存”→“宜兴”）
+          const place = item.name.replace('分公司', '');
+          // 获取库存值（保留两位小数，避免精度问题）
+          const value = item.stockValue
+
+          xData.push(place);
+          data.push(value);
+        });
+      }
+
+      return { xData, data };
+    },
+
+    // 更新图表（核心：动态渲染数据）
+    updateChart() {
+      if (!this.myChart) return;
+
+      // 解析数据
+      const { xData, data } = this.parseStockData();
+
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          },
+          formatter: (params) => {
+            let html = `${params[0].axisValue}<br/>`;
+            params.forEach(item => {
+              html += `${item.marker} 库存: ${item.value} 万㎡<br/>`;
+            });
+            return html;
+          }
+        },
+        grid: {
+          top: 30,
+          bottom: 30,
+          right: 70,
+          left: 40,
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: true,
+            axisTick: { show: false },
+            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 // 动态 X 轴数据（解析后的地名）
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: '万㎡',
+            nameTextStyle: {
+              color: 'rgba(0, 0, 0, 0.45)',
+              fontSize: 12,
+              align: 'right'
+            },
+            min: 0,
+            max: (value) => value.max > 0 ? Math.ceil(value.max * 1.1) : 10, // 无数据时默认最大10，避免图表异常
+            scale: false,
+            axisTick: { show: false },
+            axisLabel: {
+              color: 'rgba(0, 0, 0, 0.45)',
+              fontSize: 12,
+              formatter: '{value}'
+            },
+            splitLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
+            axisLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
+            splitNumber: 4
+          }
+        ],
+        series: [
+          {
+            name: '库存',
+            type: 'bar',
+            yAxisIndex: 0,
+            barWidth: 24,
+            label: {
+              show: true,
+              position: 'top',
+              textStyle: {
+                color: 'rgba(11, 88, 255, 1)',
+                fontSize: 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: data // 动态库存数据（解析后的值）
+          }
+        ]
+      };
+
+      this.myChart.setOption(option);
+    },
+
+    // 窗口缩放处理函数
+    resizeHandler() {
+      this.myChart && this.myChart.resize();
+    }
+  },
+};
+</script>