新增页面

2025-12-25 16:48:17 +08:00
parent 2d200dd1a6
commit 80deffbb42
406 changed files with 108362 additions and 189 deletions
--- a/src/views/home/fullCostAnalysisComponents/operatingLineBarSale.vue
+++ b/src/views/home/fullCostAnalysisComponents/operatingLineBarSale.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, // 存储图表实例
+      resizeHandler: null // 存储resize事件处理函数，用于后续移除
+    };
+  },
+  props: {
+    chartData: {
+      type: Object,
+      default: () => ({}),
+      // 可选：保留数据校验
+      // validator: (value) => {
+      //   return Array.isArray(value.series) && Array.isArray(value.allPlaceNames);
+      // }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart(); // 初始化图表（只执行一次）
+      this.updateChart(); // 更新图表数据
+    });
+  },
+  watch: {
+    chartData: {
+      handler() {
+        console.log(this.chartData, 'chartData');
+        this.updateChart(); // 仅更新数据，不重新创建实例
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  beforeDestroy() {
+    // 组件销毁时清理资源
+    this.destroyChart();
+  },
+  methods: {
+    // 初始化图表（只在mounted中执行一次）
+    initChart() {
+      const chartDom = this.$refs.cockpitEffChip;
+      if (!chartDom) {
+        console.error('图表容器未找到！');
+        return;
+      }
+
+      // 只创建一次图表实例
+      this.myChart = echarts.init(chartDom);
+
+      // 绑定点击事件（只绑定一次，永久生效）
+      this.myChart.on('click', (params) => {
+        // 箭头函数保证this指向Vue实例
+        console.log('点击事件的参数：', params);
+
+        // 提取关键数据（注意：如果是折线图，value是数组；柱状图是单个值，需兼容）
+        const itemName = params.name;
+        // 兼容不同图表类型的value：柱状图value是数值，折线图是[横坐标, 纵坐标]
+        const itemValue = Array.isArray(params.value) ? params.value[1] : params.value;
+        const seriesName = params.seriesName;
+        console.log(`你点击了【${itemName}】，${seriesName}：${itemValue}`);
+        this.$router.push({
+          path: 'fullCostAnalysisBase',
+          base: itemName
+        })
+      });
+
+      // 定义resize处理函数（命名函数，方便移除）
+      this.resizeHandler = () => {
+        this.myChart && this.myChart.resize();
+      };
+      // 绑定resize事件（只绑定一次）
+      window.addEventListener('resize', this.resizeHandler);
+    },
+
+    // 更新图表数据（数据变化时执行）
+    updateChart() {
+      if (!this.myChart) {
+        return; // 实例未初始化则返回
+      }
+
+      const { allPlaceNames, series } = this.chartData || {};
+      const xData = allPlaceNames || [];
+      const chartSeries = series || [];
+
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
+        },
+        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
+          }
+        ],
+        yAxis: [
+          {
+            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: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } }
+          },
+          {
+            type: 'value',
+            nameTextStyle: {
+              color: 'rgba(0, 0, 0, 0.45)',
+              fontSize: 12,
+              align: 'left'
+            },
+            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)' } },
+            splitNumber: 4
+          }
+        ],
+        series: chartSeries
+      };
+
+      // 只更新配置，不重新创建实例
+      this.myChart.setOption(option, true); // 第二个参数true表示清空原有配置，避免数据残留
+    },
+
+    // 销毁图表资源
+    destroyChart() {
+      // 移除resize事件
+      if (this.resizeHandler) {
+        window.removeEventListener('resize', this.resizeHandler);
+      }
+      // 销毁图表实例
+      if (this.myChart) {
+        this.myChart.dispose();
+        this.myChart = null;
+      }
+    }
+  }
+};
+</script>