修改

src/views/home/components/financeCostsBottomBar.vue

@@ -30,9 +30,9 @@
       </div>
     </div>
     <div class="lineBottom" style="height: 210px; width: 100%">
-      <!-- 传递当前选中的 series 数据给子组件 -->
-      <coreLineChart style="height: 210px; width: 680px" :chart-series="currentSeries"
-        :key="activeButton + JSON.stringify(currentSeries)" />
+      <!-- 传递当前选中的 series 数据和 xAxis 数据给子组件 -->
+      <coreLineChart style="height: 210px; width: 680px" :chart-series="currentSeries" :x-axis-data="xAxisData"
+        :dateData="dateData" />
     </div>
   </div>
 </template>
@@ -44,205 +44,93 @@ import * as echarts from 'echarts';
 export default {
   name: "Container",
   components: { coreLineChart },
-  props: ["name", "size", "icon"],
+  props: {
+    line: { // 接收父组件传递的 line 数据
+      type: Object,
+      default: () => ({})
+    },
+    dateData: { // 接收父组件传递的 line 数据
+      type: Object,
+      default: () => ({})
+    },
+  },
   data() {
     return {
       activeButton: 0, // 初始激活第一个按钮（索引0）
-      itemList: [
-        { unit: "单价·元/m²", targetValue: 16, currentValue: 14.5, progress: 90 },
-        { unit: "净价·元/m²", targetValue: 16, currentValue: 15.2, progress: 85 },
-        { unit: "销量·万m²", targetValue: 20, currentValue: 16, progress: 80 },
-        { unit: "双镀面板·万m²", targetValue: 15, currentValue: 13.8, progress: 92 },
-      ],
-      // 存储4个按钮对应的 series 数据（每个按钮对应「目标+实际」两条线）
-      seriesMap: [
-        // 0: 营业收入
-        [
-          {
-            name: '目标',
-            type: 'line',
-            stack: 'Total',
-            symbol: 'circle',
-            symbolSize: 6,
-            lineStyle: { color: 'rgba(91, 230, 190, 1)' },
-            itemStyle: {
-              color: 'rgba(91, 230, 190, 1)',
-              borderColor: 'rgba(91, 230, 190, 1)',
-              borderWidth: 2
-            },
-            areaStyle: {
-              opacity: 0.3,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(91, 230, 190, 0.4)' },
-                { offset: 1, color: 'rgba(91, 230, 190, 0)' },
-              ]),
-            },
-            data: [500, 620, 580, 720, 650, 800] // 6-11月目标数据
-          },
-          {
-            name: '实际',
-            type: 'line',
-            stack: 'Total',
-            symbol: 'circle',
-            symbolSize: 6,
-            lineStyle: { color: 'rgba(255, 132, 0, 1)' },
-            itemStyle: {
-              color: 'rgba(255, 132, 0, 1)',
-              borderColor: 'rgba(255, 132, 0, 1)',
-              borderWidth: 2
-            },
-            areaStyle: {
-              opacity: 0.3,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(255, 132, 0, 0.4)' },
-                { offset: 1, color: 'rgba(255, 132, 0, 0)' },
-              ]),
-            },
-            data: [480, 590, 610, 680, 700, 750] // 6-11月实际数据
-          }
-        ],
-        // 1: 经营性利润
-        [
-          {
-            name: '目标',
-            type: 'line',
-            stack: 'Total',
-            symbol: 'circle',
-            symbolSize: 6,
-            lineStyle: { color: 'rgba(91, 230, 190, 1)' },
-            itemStyle: {
-              color: 'rgba(91, 230, 190, 1)',
-
-              borderWidth: 2
-            },
-            areaStyle: {
-              opacity: 0.3,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(91, 230, 190, 0.4)' },
-                { offset: 1, color: 'rgba(91, 230, 190, 0)' },
-              ]),
-            },
-            data: [150, 180, 160, 200, 190, 220]
-          },
-          {
-            name: '实际',
-            type: 'line',
-            stack: 'Total',
-            symbol: 'circle',
-            symbolSize: 6,
-            lineStyle: { color: 'rgba(255, 132, 0, 1)' },
-            itemStyle: {
-              color: 'rgba(255, 132, 0, 1)',
-
-              borderWidth: 2
-            },
-            areaStyle: {
-              opacity: 0.3,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(255, 132, 0, 0.4)' },
-                { offset: 1, color: 'rgba(255, 132, 0, 0)' },
-              ]),
-            },
-            data: [140, 170, 180, 190, 210, 200]
-          }
-        ],
-        // 2: 利润总额
-        [
-          {
-            name: '目标',
-            type: 'line',
-            stack: 'Total',
-            symbol: 'circle',
-            symbolSize: 6,
-            lineStyle: { color: 'rgba(91, 230, 190, 1)' },
-            itemStyle: {
-              color: 'rgba(91, 230, 190, 1)',
-
-              borderWidth: 2
-            },
-            areaStyle: {
-              opacity: 0.3,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(91, 230, 190, 0.4)' },
-                { offset: 1, color: 'rgba(91, 230, 190, 0)' },
-              ]),
-            },
-            data: [120, 150, 140, 170, 160, 190]
-          },
-          {
-            name: '实际',
-            type: 'line',
-            stack: 'Total',
-            symbol: 'circle',
-            symbolSize: 6,
-            lineStyle: { color: 'rgba(255, 132, 0, 1)' },
-            itemStyle: {
-              color: 'rgba(255, 132, 0, 1)',
-
-              borderWidth: 2
-            },
-            areaStyle: {
-              opacity: 0.3,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(255, 132, 0, 0.4)' },
-                { offset: 1, color: 'rgba(255, 132, 0, 0)' },
-              ]),
-            },
-            data: [110, 140, 150, 160, 180, 170]
-          }
-        ],
-        // 3: 毛利率（百分比数据）
-        [
-          {
-            name: '目标',
-            type: 'line',
-            stack: 'Total',
-            symbol: 'circle',
-            symbolSize: 6,
-            lineStyle: { color: 'rgba(91, 230, 190, 1)' },
-            itemStyle: {
-              color: 'rgba(91, 230, 190, 1)',
-
-              borderWidth: 2
-            },
-            areaStyle: {
-              opacity: 0.3,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(91, 230, 190, 0.4)' },
-                { offset: 1, color: 'rgba(91, 230, 190, 0)' },
-              ]),
-            },
-            data: [35, 36, 35.5, 37, 36.5, 38]
-          },
-          {
-            name: '实际',
-            type: 'line',
-            stack: 'Total',
-            symbol: 'circle',
-            symbolSize: 6,
-            lineStyle: { color: 'rgba(255, 132, 0, 1)' },
-            itemStyle: {
-              color: 'rgba(255, 132, 0, 1)',
-
-              borderWidth: 2
-            },
-            areaStyle: {
-              opacity: 0.3,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(255, 132, 0, 0.4)' },
-                { offset: 1, color: 'rgba(255, 132, 0, 0)' },
-              ]),
-            },
-            data: [34, 35.5, 36, 36.2, 37, 37.5]
-          }
-        ]
+      // 定义按钮与 line 数据中 key 的映射关系
+      buttonToDataKey: [
+        '营业收入',
+        '经营收入', // 注意：数据中的 key 是“经营收入”，按钮显示的是“经营性利润”
+        '利润总额',
+        '毛利率'
       ]
     };
   },
   computed: {
-    // 根据当前激活的按钮，返回对应的 series 数据
+    // 根据当前激活的按钮，动态生成对应的 series 数据
     currentSeries() {
-      return this.seriesMap[this.activeButton] || [];
+
+      const dataKey = this.buttonToDataKey[this.activeButton];
+      const chartData = this.line[dataKey];
+      console.log('this.line[dataKey', this.buttonToDataKey[this.activeButton]);
+
+      if (!chartData) {
+        return [];
+      }
+
+      // 提取目标和实际数据的值
+      const targetDataValues = Object.values(chartData.target || {});
+      const realDataValues = Object.values(chartData.real || {});
+      console.log('realDataValues', realDataValues);
+
+      return [
+        {
+          name: '目标',
+          type: 'line',
+          stack: 'Total',
+          symbol: 'circle',
+          symbolSize: 6,
+          lineStyle: { color: 'rgba(91, 230, 190, 1)' },
+          itemStyle: { color: 'rgba(91, 230, 190, 1)', borderColor: 'rgba(91, 230, 190, 1)', borderWidth: 2 },
+          areaStyle: {
+            opacity: 0.3,
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: 'rgba(91, 230, 190, 0.4)' },
+              { offset: 1, color: 'rgba(91, 230, 190, 0)' },
+            ]),
+          },
+          data: targetDataValues
+        },
+        {
+          name: '实际',
+          type: 'line',
+          stack: 'Total',
+          symbol: 'circle',
+          symbolSize: 6,
+          lineStyle: { color: 'rgba(255, 132, 0, 1)' },
+          itemStyle: { color: 'rgba(255, 132, 0, 1)', borderColor: 'rgba(255, 132, 0, 1)', borderWidth: 2 },
+          areaStyle: {
+            opacity: 0.3,
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: 'rgba(255, 132, 0, 0.4)' },
+              { offset: 1, color: 'rgba(255, 132, 0, 0)' },
+            ]),
+          },
+          data: realDataValues
+        }
+      ];
+    },
+    // 提取 x 轴数据（日期）
+    xAxisData() {
+      const dataKey = this.buttonToDataKey[this.activeButton];
+      const chartData = this.line[dataKey];
+      // 使用 'target' 的键作为 x 轴，如果 'target' 不存在，则使用 'real' 的键
+      if (chartData && chartData.target) {
+        return Object.keys(chartData.target);
+      } else if (chartData && chartData.real) {
+        return Object.keys(chartData.real);
+      }
+      return [];
     }
   },
   methods: {}