From 74f221b8956bf1a1351b875b604cbfce7d0da2ce Mon Sep 17 00:00:00 2001
From: ssongliu <sloooop1x@gmail.com>
Date: Fri, 3 Jul 2026 16:50:47 +0800
Subject: [PATCH] fix: use svg renderer for container monitor charts (#13197)

---
 .../src/components/v-charts/components/Line.vue     |  7 ++++++-
 frontend/src/components/v-charts/index.vue          | 13 ++++++++++++-
 frontend/src/utils/echarts.ts                       |  3 ++-
 .../src/views/container/container/monitor/index.vue |  4 ++++
 4 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/v-charts/components/Line.vue b/frontend/src/components/v-charts/components/Line.vue
index 7709017a5..58082d38f 100644
--- a/frontend/src/components/v-charts/components/Line.vue
+++ b/frontend/src/components/v-charts/components/Line.vue
@@ -29,6 +29,10 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    renderer: {
+        type: String,
+        default: undefined,
+    },
     option: {
         type: Object,
         required: true,
@@ -114,7 +118,8 @@ function initChart() {
     const optionItem = itemChart?.getOption();
     const itemSelect = Array.isArray(optionItem?.legend) ? optionItem?.legend?.[0] : optionItem?.legend;
     if (itemChart == null) {
-        itemChart = echarts.init(chartDom);
+        const initOptions = props.renderer ? { renderer: props.renderer as 'canvas' | 'svg' } : undefined;
+        itemChart = echarts.init(chartDom, undefined, initOptions);
     }
     const style = getComputedStyle(document.documentElement);
     const primaryTextColor = style.getPropertyValue('--el-text-color-primary').trim() || '#303133';
diff --git a/frontend/src/components/v-charts/index.vue b/frontend/src/components/v-charts/index.vue
index 666dcc85a..d6fb9bb6e 100644
--- a/frontend/src/components/v-charts/index.vue
+++ b/frontend/src/components/v-charts/index.vue
@@ -1,5 +1,12 @@
 <template>
-    <component :is="typeComponentMap[type]" :height="height" :option="option" :dataZoom="dataZoom" class="v-charts" />
+    <component
+        :is="typeComponentMap[type]"
+        :height="height"
+        :option="option"
+        :dataZoom="dataZoom"
+        :renderer="renderer"
+        class="v-charts"
+    />
 </template>
 <script lang="ts" setup>
 import line from './components/Line.vue';
@@ -15,6 +22,10 @@ defineProps({
         default: '200px',
     },
     dataZoom: Boolean,
+    renderer: {
+        type: String,
+        default: undefined,
+    },
     option: {
         type: Object,
         required: true,
diff --git a/frontend/src/utils/echarts.ts b/frontend/src/utils/echarts.ts
index 60acfe231..e5017e8de 100644
--- a/frontend/src/utils/echarts.ts
+++ b/frontend/src/utils/echarts.ts
@@ -13,7 +13,7 @@ import {
     DataZoomComponent,
 } from 'echarts/components';
 
-import { CanvasRenderer } from 'echarts/renderers';
+import { CanvasRenderer, SVGRenderer } from 'echarts/renderers';
 
 echarts.use([
     LineChart,
@@ -31,6 +31,7 @@ echarts.use([
     DataZoomComponent,
 
     CanvasRenderer,
+    SVGRenderer,
 ]);
 
 export default echarts;
diff --git a/frontend/src/views/container/container/monitor/index.vue b/frontend/src/views/container/container/monitor/index.vue
index 549a1dfda..1ab24a1a8 100644
--- a/frontend/src/views/container/container/monitor/index.vue
+++ b/frontend/src/views/container/container/monitor/index.vue
@@ -22,6 +22,7 @@
                 height="200px"
                 id="cpuChart"
                 type="line"
+                renderer="svg"
                 :option="chartsOption['cpuChart']"
                 v-if="chartsOption['cpuChart']"
             />
@@ -31,6 +32,7 @@
                 height="200px"
                 id="memoryChart"
                 type="line"
+                renderer="svg"
                 :option="chartsOption['memoryChart']"
                 v-if="chartsOption['memoryChart']"
             />
@@ -40,6 +42,7 @@
                 height="200px"
                 id="ioChart"
                 type="line"
+                renderer="svg"
                 :option="chartsOption['ioChart']"
                 v-if="chartsOption['ioChart']"
             />
@@ -49,6 +52,7 @@
                 height="200px"
                 id="networkChart"
                 type="line"
+                renderer="svg"
                 :option="chartsOption['networkChart']"
                 v-if="chartsOption['networkChart']"
             />