From 17bb4f173814da53b1adbd3fe2dcaa9bad5a1a5e Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Tue, 30 Jan 2024 16:31:32 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=B5=84=E6=BA=90=E5=9B=BE=E8=87=AA?=
 =?UTF-8?q?=E9=80=82=E5=BA=94=E5=92=8C=E8=AD=A6=E5=91=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ChartLine/index.vue  | 59 ++++++++++++++---------------
 src/views/monitor/monitor/index.vue |  2 +-
 2 files changed, 30 insertions(+), 31 deletions(-)

diff --git a/src/components/ChartLine/index.vue b/src/components/ChartLine/index.vue
index 91c0a14a..1539da20 100644
--- a/src/components/ChartLine/index.vue
+++ b/src/components/ChartLine/index.vue
@@ -1,8 +1,5 @@
-<template>
-  <div ref="chartDom" :style="{ height: height, width: width }"></div>
-</template>
 <script lang="ts" setup>
-import { nextTick, watch, onMounted, onBeforeUnmount, ref } from 'vue';
+import { nextTick, watch, onMounted, onBeforeUnmount, ref, markRaw } from 'vue';
 import * as echarts from 'echarts/core';
 import {
   TitleComponent,
@@ -121,28 +118,24 @@ let newChart: echarts.ECharts;
 const chartDom = ref<HTMLElement | undefined>(undefined);
 
 /**初始化渲染图表 */
-function initChart() {
+function handleRanderChart(container: HTMLElement | undefined) {
+  if (!container || !props.option.yDatas) return;
   if (!newChart) {
-    newChart = echarts.init(chartDom.value);
+    newChart = markRaw(echarts.init(container, props.theme));
   }
 
   const series: any = [];
-  const yDatasLen = props.option?.yDatas?.length || 0;
-  if (yDatasLen > 0) {
-    props.option?.yDatas.forEach((item: any, index: number) => {
-      series.push({
-        name: item?.name,
-        type: 'line',
-        areaStyle: seriesStyle[index % yDatasLen],
-        data: item?.data,
-        showSymbol: false,
-        yAxisIndex: item.yAxisIndex ? 1 : null,
-      });
+  const yDatasLen = props.option.yDatas.length;
+  props.option.yDatas.forEach((item: any, index: number) => {
+    series.push({
+      name: item?.name,
+      type: 'line',
+      areaStyle: seriesStyle[index % yDatasLen],
+      data: item?.data,
+      showSymbol: false,
+      yAxisIndex: item.yAxisIndex ? 1 : null,
     });
-  } else {
-    console.error('components ChartLine echarts yDatas error!');
-    return;
-  }
+  });
 
   // 右侧y轴辅助线
   const yAxis: any = [];
@@ -229,12 +222,16 @@ function initChart() {
   };
 
   // 渲染数据
-  newChart.setOption(option, true);
-}
+  option && newChart.setOption(option, true);
 
-/**重置图表尺寸 */
-function changeChartSize() {
-  newChart.resize();
+  // 创建 ResizeObserver 实例
+  var observer = new ResizeObserver(entries => {
+    if (newChart) {
+      newChart.resize();
+    }
+  });
+  // 监听元素大小变化
+  observer.observe(container);
 }
 
 watch(
@@ -242,7 +239,7 @@ watch(
   val => {
     if (val) {
       nextTick(() => {
-        initChart();
+        handleRanderChart(chartDom.value);
       });
     }
   }
@@ -250,15 +247,17 @@ watch(
 
 onMounted(() => {
   nextTick(() => {
-    initChart();
-    window.addEventListener('resize', changeChartSize);
+    handleRanderChart(chartDom.value);
   });
 });
 
 onBeforeUnmount(() => {
   newChart.dispose();
-  window.removeEventListener('resize', changeChartSize);
 });
 </script>
 
+<template>
+  <div ref="chartDom" :style="{ height: height, width: width }"></div>
+</template>
+
 <style lang="less" scoped></style>
diff --git a/src/views/monitor/monitor/index.vue b/src/views/monitor/monitor/index.vue
index 2ecd8d9f..7383db93 100644
--- a/src/views/monitor/monitor/index.vue
+++ b/src/views/monitor/monitor/index.vue
@@ -164,7 +164,7 @@ function fnLoadChart(data: Record<string, any>[]) {
         type: 'value',
         name: `${t('views.monitor.monitor.resourceUsage')} ( % )`,
         position: 'right',
-        alignTicks: true,
+        alignTicks: false
       },
     ],
     grid: { left: '5%', right: '5%', bottom: '20%' },