fanhuadesenlinnn/1Panel
1
0
Fork 0
mirror of https://hubproxy.babadafafafafa.cn/https://github.com/1Panel-dev/1Panel.git synced 2026-09-20 08:03:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
ssongliu
2026-07-03 16:50:47 +08:00
committed by GitHub
parent cbcb628bff
commit 74f221b895
4 changed files with 24 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/components/v-charts/components/Line.vue
View File

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

13
frontend/src/components/v-charts/index.vue
View File

@@ -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,

3
frontend/src/utils/echarts.ts
View File

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

4
frontend/src/views/container/container/monitor/index.vue
View File

@@ -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']"
/>