修改

src/views/home/costComponents/profitImpactLineChart.vue

@@ -0,0 +1,145 @@
+<template>
+  <div ref="cockpitEffChip" id="coreLineChart" style="width: 100%; height: 500px;"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+  components: {},
+  data() {
+    return {};
+  },
+  props: {
+    yName: {
+      type: String,
+      default: () => '元/㎡'
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initData();
+    });
+  },
+  methods: {
+    initData() {
+      const chartDom = this.$refs.cockpitEffChip;
+      if (!chartDom) {
+        console.error('图表容器未找到！');
+        return;
+      }
+      const myChart = echarts.init(chartDom);
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          },
+          // 优化tooltip内容，区分各系列含义
+          formatter: (params) => {
+            let html = `${params[0].axisValue}<br/>`;
+            params.forEach(item => {
+              // 直接使用系列名，无需映射，仅保留单位判断
+              html += `${item.marker} ${item.seriesName}: ${item.value}${item.seriesName === '完成率' ? '%' : '元'}<br/>`;
+            });
+            return html;
+          }
+        },
+        grid: {
+          top: 30,
+          bottom: 30, // 增大底部间距，避免柱子与X轴标签重叠
+          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: ['6月', '7月', '8月', '9月', '10月', '11月']
+          }
+        ],
+        yAxis: [
+          // 左侧Y轴：目标/达标/未达标（数量，单位“片”）
+          {
+            type: 'value',
+            // name: this.yName,
+            nameTextStyle: {
+              color: 'rgba(0, 0, 0, 0.45)',
+              fontSize: 12,
+              align: 'right'
+            },
+            min: 0, // 最小值设0，确保柱子从X轴底部开始，不超过X轴
+            max: (value) => Math.ceil(value.max * 1.1), // 最大值留10%余量，避免柱子顶满
+            scale: false, // 关闭缩放，强制从0开始
+            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: '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(255, 132, 0, 0)' }
+              ])
+            },
+            data: [200, 280, 180, 300, 220, 350],
+            symbol: 'circle',
+            symbolSize: 6
+          },
+        ],
+      };
+
+      option && myChart.setOption(option);
+
+      // 窗口缩放适配
+      window.addEventListener('resize', () => {
+        myChart.resize();
+      });
+
+      // 组件销毁清理
+      this.$once('hook:destroyed', () => {
+        window.removeEventListener('resize', () => {
+          myChart.resize();
+        });
+        myChart.dispose();
+      });
+    }
+  },
+};
+</script>