修改

src/views/home/components/CostsBottomBar.vue

@@ -10,10 +10,10 @@
         </div>
       </div>
     </div>
-    <div class="lineBottom" style="height: 214px; width: 100%">
-      <!-- 传递 series 数据给子组件，添加 key 确保数据更新时重新渲染 -->
-      <coreLineChart style="height: 214px; width: 680px" :chart-series="chartSeries"
-        :key="JSON.stringify(chartSeries)" />
+    <div class="lineBottom" style="height: 213px; width: 100%">
+      <!-- 传递动态生成的 series 数据和 xAxis 数据给子组件 -->
+      <coreLineChart style="height: 213px; width: 680px" :chart-series="chartSeries" :x-axis-data="xAxisData"
+        :dateData="dateData" />
     </div>
   </div>
 </template>
@@ -25,80 +25,97 @@ import * as echarts from 'echarts';
 export default {
   name: "Container",
   components: { coreLineChart },
-  props: ["name", "size", "icon"],
+  props: {
+    line: { // 接收父组件传递的 cost 数据对象
+      type: Object,
+      default: () => ({})
+    },
+    dateData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
   data() {
     return {
-      activeButton: undefined,
-      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 },
-      ],
-      // 定义要传递的 series 数据（对应图例的三个费用类型）
-      chartSeries: [
-        {
+      // 图表样式配置项，可以抽离出来方便管理
+      chartConfig: {
+        manageCost: {
           name: '管理费用',
-          type: 'line',
-          stack: 'Total',
-          symbol: 'circle',
-          lineStyle: { color: 'rgba(11, 88, 255, .5)' },
-          itemStyle: {
-            color: 'rgba(11, 88, 255, .5)',
-            borderColor: 'rgba(11, 88, 255, 1)',
-            borderWidth: 1
-          },
-          areaStyle: {
-            opacity: 0.5,
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: 'rgba(11, 88, 255, .4)' },
-              { offset: 1, color: 'rgba(18, 255, 245, 0)' },
-            ]),
-          },
-          data: [140, 232, 101, 264, 90, 340] // 与 xAxis 数据长度一致（6个月份）
+          lineColor: 'rgba(11, 88, 255, .5)',
+          itemColor: 'rgba(11, 88, 255, .5)',
+          borderColor: 'rgba(11, 88, 255, 1)',
+          areaGradient: [
+            { offset: 0, color: 'rgba(11, 88, 255, .4)' },
+            { offset: 1, color: 'rgba(18, 255, 245, 0)' },
+          ]
         },
-        {
+        saleCost: {
           name: '销售费用',
-          type: 'line',
-          stack: 'Total',
-          symbol: 'circle',
-          lineStyle: { color: 'rgba(54, 181, 138, .5)' },
-          itemStyle: {
-            color: 'rgba(54, 181, 138, .5)',
-            borderColor: 'rgba(54, 181, 138, 1)',
-            borderWidth: 1
-          },
-          areaStyle: {
-            opacity: 0.5,
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: 'rgba(54, 181, 138, .4)' },
-              { offset: 1, color: 'rgba(18, 255, 245, 0)' },
-            ]),
-          },
-          data: [120, 282, 111, 234, 220, 340]
+          lineColor: 'rgba(54, 181, 138, .5)',
+          itemColor: 'rgba(54, 181, 138, .5)',
+          borderColor: 'rgba(54, 181, 138, 1)',
+          areaGradient: [
+            { offset: 0, color: 'rgba(54, 181, 138, .4)' },
+            { offset: 1, color: 'rgba(18, 255, 245, 0)' },
+          ]
         },
-        {
+        financeCost: {
           name: '财务费用',
+          lineColor: 'rgba(255, 132, 0, .5)',
+          itemColor: 'rgba(255, 132, 0, .5)',
+          borderColor: 'rgba(255, 132, 0, 1)',
+          areaGradient: [
+            { offset: 0, color: 'rgba(255, 132, 0, .4)' },
+            { offset: 1, color: 'rgba(18, 255, 245, 0)' },
+          ]
+        }
+      }
+    };
+  },
+  computed: {
+    // 动态生成 X 轴数据
+    xAxisData() {
+      // 从 cost.line 中获取任意一个有数据的键的 keys 作为 X 轴
+      const lineData = this.line || {};
+      const firstKey = Object.keys(lineData)[0];
+      return firstKey ? Object.keys(lineData[firstKey]) : [];
+    },
+    // 动态生成 series 数据
+    chartSeries() {
+      const lineData = this.line || {};
+      const xAxisKeys = this.xAxisData;
+
+      // 如果没有 X 轴数据，则返回空数组
+      if (xAxisKeys.length === 0) {
+        return [];
+      }
+
+      // 遍历配置项，生成 series
+      return Object.keys(this.chartConfig).map(key => {
+        const config = this.chartConfig[key];
+        // 确保数据顺序和 X 轴一致
+        const dataValues = xAxisKeys.map(date => lineData[key] ? lineData[key][date] : 0);
+
+        return {
+          name: config.name,
           type: 'line',
           stack: 'Total',
           symbol: 'circle',
-          lineStyle: { color: 'rgba(255, 132, 0, .5)' },
+          symbolSize: 6,
+          lineStyle: { color: config.lineColor },
           itemStyle: {
-            color: 'rgba(255, 132, 0, .5)',
-            borderColor: 'rgba(255, 132, 0, 1)',
+            color: config.itemColor,
+            borderColor: config.borderColor,
             borderWidth: 1
           },
           areaStyle: {
             opacity: 0.5,
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: 'rgba(255, 132, 0, .4)' },
-              { offset: 1, color: 'rgba(18, 255, 245, 0)' },
-            ]),
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, config.areaGradient),
           },
-          data: [90, 150, 180, 120, 250, 280]
-        }
-      ]
-    };
+          data: dataValues
+        };
+      });
+    }
   },
   methods: {}
 };