fix: use svg renderer for container monitor charts (#13197)

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';

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,