xiugai

src/views/home/rawSheetYieldComponents/operatingLineBarSaleGroup.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="cockpitEffChip" id="coreLineChart" style="width: 100%; height: 400px;"></div>
+  <div :ref="chartRef " id="coreLineChart" style="width: 100%; height: 400px;"></div>
 </template>
 <script>
 import * as echarts from 'echarts';
@@ -21,6 +21,10 @@ export default {
       // validator: (value) => {
       //   return Array.isArray(value.series) && Array.isArray(value.allPlaceNames);
       // }
+    },
+    chartRef: {
+      type: String,
+      default: () => 'cockpitEffChip',
     }
   },
   mounted() {
@@ -34,7 +38,7 @@ export default {
     // 深度监听数据变化，仅更新图表配置（不销毁实例）
     chartData: {
       handler() {
-        console.log(this.chartData,'chartData');
+        console.log(this.chartData, 'chartData');
         this.updateChart();
       },
       deep: true,
@@ -43,7 +47,7 @@ export default {
   },
   methods: {
     updateChart() {
-      const chartDom = this.$refs.cockpitEffChip;
+      const chartDom = this.$refs[this.chartRef];
       if (!chartDom) {
         console.error('图表容器未找到！');
         return;
@@ -72,18 +76,8 @@ export default {
               backgroundColor: '#6a7985'
             }
           },
-          // formatter: (params) => {
-          //   let html = `${params[0].axisValue}<br/>`;
-          //   params.forEach(item => {
-          //     const unit = item.seriesName === '完成率' ? '%' : (
-          //       ['产量', '销量'].includes(this.$parent.selectedProfit) ? '片' : '万元'
-          //     );
-          //     html += `${item.marker} ${item.seriesName}: ${item.value}${unit}<br/>`;
-          //   });
-          //   return html;
-          // }
         },
-       grid: {
+        grid: {
           top: 30,
           bottom: 30,
           right: 20,
@@ -92,7 +86,7 @@ export default {
         xAxis: [
           {
             type: 'category',
-            boundaryGap: true,
+            // boundaryGap: true,
             axisTick: { show: false },
             axisLine: {
               show: true,
@@ -107,49 +101,25 @@ export default {
             data: xData
           }
         ],
-        yAxis: [
-          // 左侧Y轴：营业收入、成本（单位万元）
-          {
-            type: 'value',
-            name: '万元',
-            nameTextStyle: {
-              color: 'rgba(0, 0, 0, 0.45)',
-              fontSize: 12,
-              align: 'right'
-            },
-            scale: true,
-            splitNumber: 4,
-            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: { show: true, lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
+        yAxis: {
+          type: 'value',
+          name: '万元',
+          nameTextStyle: {
+            color: 'rgba(0, 0, 0, 0.45)',
+            fontSize: 12,
+            align: 'right'
           },
-          // 右侧Y轴：利润占比（百分比）
-          {
-            type: 'value',
-            nameTextStyle: {
-              color: 'rgba(0, 0, 0, 0.45)',
-              fontSize: 12,
-              align: 'left'
-            },
-            // min: 0,
-            // max: 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)' } },
-            // scale: true,
-            splitNumber: 4,
-          }
-        ],
+          //
+          splitNumber: 4,
+          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: { show: true, lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
+        },
         series: chartSeries // 直接使用父组件传递的 series
       };