修改

2025-11-12 16:56:14 +08:00
commit 1ea62af1d6
1135 changed files with 109385 additions and 0 deletions
--- a/src/views/home/components/coresBar.vue
+++ b/src/views/home/components/coresBar.vue
@@ -0,0 +1,112 @@
+<template>
+  <div ref="cockpitEffChip" id="coreLineChart" style="height: 219px; width: 100%;"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+  name: 'Container',
+  components: {},
+  // 接收父组件传递的 series 数据
+  props: {
+    chartSeries: {
+      type: Array,
+      required: true,
+      default: () => [] // 默认空数组，避免报错
+    }
+  },
+  data() {
+    return {
+      myChart: null // 存储图表实例，方便后续操作
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initData();
+    });
+  },
+  watch: {
+    // 监听 series 数据变化，实时更新图表
+    chartSeries: {
+      handler() {
+        this.updateChart();
+      },
+      deep: true // 深度监听数组内元素变化
+    }
+  },
+  methods: {
+    initData() {
+      const chartDom = this.$refs.cockpitEffChip;
+      if (!chartDom) {
+        console.error('图表容器未找到！');
+        return;
+      }
+      this.myChart = echarts.init(chartDom);
+      this.updateChart(); // 初始化时渲染图表
+
+      // 监听窗口缩放
+      window.addEventListener('resize', () => {
+        this.myChart && this.myChart.resize();
+      });
+
+      // 组件销毁时清理
+      this.$once('hook:destroyed', () => {
+        window.removeEventListener('resize', () => {
+          this.myChart && this.myChart.resize();
+        });
+        this.myChart && this.myChart.dispose();
+      });
+    },
+    // 单独提取更新图表的方法，方便复用
+    updateChart() {
+      if (!this.myChart) return;
+
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: { backgroundColor: '#6a7985' }
+          }
+        },
+        grid: { top: 10, bottom: 20, right: 25, left: 30 },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            axisTick: { show: false },
+            axisLine: {
+              show: true,
+              onZero: false,
+              lineStyle: { color: 'rgba(0, 0, 0, 0.15)' }
+            },
+            axisLabel: {
+              color: 'rgba(0, 0, 0, 0.45)',
+              fontSize: 12,
+              interval: 0,
+              width: 38,
+              overflow: 'break'
+            },
+            data: ['6月', '7月', '8月', '9月', '10月', '11月']
+          }
+        ],
+        yAxis: {
+          type: 'value',
+          nameTextStyle: { color: 'rgba(0, 0, 0, 0.45)', fontSize: 14, align: 'left' },
+          min: () => 0,
+          max: (value) => Math.ceil(value.max),
+          scale: true,
+          axisTick: { show: false },
+          axisLabel: { color: 'rgba(0, 0, 0, 0.45)', fontSize: 12 },
+          splitLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
+          axisLine: { show: true, lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } }
+        },
+        series: this.chartSeries // 使用父组件传递的 series 数据
+      };
+
+      this.myChart.setOption(option, true); // 第二个参数 true 表示替换现有配置
+    }
+  }
+};
+</script>