fix: 资源图自适应和警告

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;
+  const yDatasLen = props.option.yDatas.length;
-  if (yDatasLen > 0) {
+  props.option.yDatas.forEach((item: any, index: number) => {
-    props.option?.yDatas.forEach((item: any, index: number) => {
+    series.push({
-      series.push({
+      name: item?.name,
-        name: item?.name,
+      type: 'line',
-        type: 'line',
+      areaStyle: seriesStyle[index % yDatasLen],
-        areaStyle: seriesStyle[index % yDatasLen],
+      data: item?.data,
-        data: item?.data,
+      showSymbol: false,
-        showSymbol: false,
+      yAxisIndex: item.yAxisIndex ? 1 : null,
-        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);
-}
 
-/**重置图表尺寸 */
+  // 创建 ResizeObserver 实例
-function changeChartSize() {
+  var observer = new ResizeObserver(entries => {
-  newChart.resize();
+    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();
+    handleRanderChart(chartDom.value);
-    window.addEventListener('resize', changeChartSize);
   });
 });
 
 onBeforeUnmount(() => {
   newChart.dispose();
-  window.removeEventListener('resize', changeChartSize);
 });
 </script>
 
+<template>
+  <div ref="chartDom" :style="{ height: height, width: width }"></div>
+</template>
+
 <style lang="less" scoped></style>

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%' },