1Panel-dev/1Panel
1
1
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-10-10 23:47:39 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: 完善echart-line组件

Browse source
This commit is contained in:
wangdan 2023-03-08 11:58:58 +08:00 • committed by wangdan-fit2cloud
parent 60c2eef8ed
commit 21f3a91b29
4 changed files with 304 additions and 203 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

91
frontend/src/components/v-charts/components/Line.vue
View file

@ -23,6 +23,10 @@ const props = defineProps({
type: String,
default: 'line',
},
dataZoom: {
type: Boolean,
default: false,
},
option: {
type: Object,
required: true,
@ -37,13 +41,56 @@ function initChart() {
}
const theme = globalStore.$state.themeConfig.theme || 'light';
const series = [];
if (props.option?.yDatas?.length) {
series.push({
name: props.option?.yDatas[0]?.name,
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(0, 94, 235, .5)',
},
{
offset: 1,
color: 'rgba(0, 94, 235, 0)',
},
]),
},
data: props.option?.yDatas[0]?.data,
showSymbol: false,
});
if (props.option?.yDatas?.length > 1) {
series.push({
name: props.option?.yDatas[1]?.name,
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(27, 143, 60, .5)',
},
{
offset: 1,
color: 'rgba(27, 143, 60, 0)',
},
]),
},
data: props.option?.yDatas[1]?.data,
showSymbol: false,
});
}
}
// 把配置和数据放这里
const option = {
title: [
{
left: 'center',
text: props.option.title,
show: false,
show: props.option.title,
},
],
zlevel: 1,
@ -60,7 +107,6 @@ function initChart() {
},
grid: { left: '7%', right: '7%', bottom: '20%' },
legend: {
data: [props.option?.yDatas[0]?.name, props.option?.yDatas[1]?.name],
right: 10,
itemWidth: 8,
textStyle: {
@ -79,45 +125,8 @@ function initChart() {
},
},
},
series: [
{
name: props.option?.yDatas[0]?.name,
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(0, 94, 235, .5)',
},
{
offset: 1,
color: 'rgba(0, 94, 235, 0)',
},
]),
},
data: props.option?.yDatas[0]?.data,
showSymbol: false,
},
{
name: props.option?.yDatas[1]?.name,
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(27, 143, 60, .5)',
},
{
offset: 1,
color: 'rgba(27, 143, 60, 0)',
},
]),
},
data: props.option?.yDatas[1]?.data,
showSymbol: false,
},
],
dataZoom: [{ startValue: props?.option.xDatas[0] }],
series: series,
dataZoom: [{ startValue: props?.option.xDatas[0], show: props.dataZoom }],
};
// 渲染数据
itemChart.setOption(option, true);

3
frontend/src/components/v-charts/index.vue
View file

@ -1,5 +1,5 @@
<template>
<component :is="typeComponentMap[type]" :height="height" :option="option" />
<component :is="typeComponentMap[type]" :height="height" :option="option" :dataZoom="dataZoom" />
</template>
<script lang="ts" setup>
import line from './components/Line.vue';
@ -13,6 +13,7 @@ defineProps({
type: String,
default: '200px',
},
dataZoom: Boolean,
option: {
type: Object,
required: true,

363
frontend/src/views/container/container/monitor/index.vue
View file

@ -16,16 +16,44 @@
</el-form-item>
</el-form>
<el-card>
<div id="cpuChart" style="width: 100%; height: 200px"></div>
<v-charts
height="200px"
id="cpuChart"
type="line"
:option="chartsOption['cpuChart']"
v-if="chartsOption['cpuChart']"
/>
<!-- <div id="cpuChart" style="width: 100%; height: 200px"></div> -->
</el-card>
<el-card style="margin-top: 10px">
<div id="memoryChart" style="width: 100%; height: 200px"></div>
<v-charts
height="200px"
id="memoryChart"
type="line"
:option="chartsOption['memoryChart']"
v-if="chartsOption['memoryChart']"
/>
<!-- <div id="memoryChart" style="width: 100%; height: 200px"></div> -->
</el-card>
<el-card style="margin-top: 10px">
<div id="ioChart" style="width: 100%; height: 200px"></div>
<v-charts
height="200px"
id="ioChart"
type="line"
:option="chartsOption['ioChart']"
v-if="chartsOption['ioChart']"
/>
<!-- <div id="ioChart" style="width: 100%; height: 200px"></div> -->
</el-card>
<el-card style="margin-top: 10px">
<div id="networkChart" style="width: 100%; height: 200px"></div>
<v-charts
height="200px"
id="networkChart"
type="line"
:option="chartsOption['networkChart']"
v-if="chartsOption['networkChart']"
/>
<!-- <div id="networkChart" style="width: 100%; height: 200px"></div> -->
</el-card>
</el-drawer>
</template>
@ -34,7 +62,8 @@
import { ref } from 'vue';
import { ContainerStats } from '@/api/modules/container';
import { dateFormatForSecond } from '@/utils/util';
import * as echarts from 'echarts';
import VCharts from '@/components/v-charts/index.vue';
// import * as echarts from 'echarts';
import i18n from '@/lang';
import DrawerHeader from '@/components/drawer-header/index.vue';
@ -49,12 +78,12 @@ const dialogData = ref<DialogProps>({
containerID: '',
});
function changeChartSize() {
echarts.getInstanceByDom(document.getElementById('cpuChart') as HTMLElement)?.resize();
echarts.getInstanceByDom(document.getElementById('memoryChart') as HTMLElement)?.resize();
echarts.getInstanceByDom(document.getElementById('ioChart') as HTMLElement)?.resize();
echarts.getInstanceByDom(document.getElementById('networkChart') as HTMLElement)?.resize();
}
// function changeChartSize() {
// echarts.getInstanceByDom(document.getElementById('cpuChart') as HTMLElement)?.resize();
// echarts.getInstanceByDom(document.getElementById('memoryChart') as HTMLElement)?.resize();
// echarts.getInstanceByDom(document.getElementById('ioChart') as HTMLElement)?.resize();
// echarts.getInstanceByDom(document.getElementById('networkChart') as HTMLElement)?.resize();
// }
const acceptParams = async (params: DialogProps): Promise<void> => {
monitorVisiable.value = true;
dialogData.value.containerID = params.containerID;
@ -69,7 +98,7 @@ const acceptParams = async (params: DialogProps): Promise<void> => {
timeInterval.value = 5;
isInit.value = true;
loadData();
window.addEventListener('resize', changeChartSize);
// window.addEventListener('resize', changeChartSize);
timer = setInterval(async () => {
if (monitorVisiable.value) {
isInit.value = false;
@ -86,6 +115,7 @@ const ioWriteDatas = ref<Array<string>>([]);
const netTxDatas = ref<Array<string>>([]);
const netRxDatas = ref<Array<string>>([]);
const timeDatas = ref<Array<string>>([]);
const chartsOption = ref({ cpuChart: null, memoryChart: null, ioChart: null, networkChart: null });
const changeTimer = () => {
clearInterval(Number(timer));
@ -131,140 +161,199 @@ const loadData = async () => {
timeDatas.value.splice(0, 1);
}
let cpuYDatas = {
name: 'CPU',
type: 'line',
areaStyle: {
color: '#ebdee3',
},
data: cpuDatas.value,
showSymbol: false,
};
freshChart('cpuChart', ['CPU'], timeDatas.value, [cpuYDatas], 'CPU', '%');
let memoryYDatas = {
name: i18n.global.t('monitor.memory'),
type: 'line',
areaStyle: {
color: '#ebdee3',
},
data: memDatas.value,
showSymbol: false,
};
let cacheYDatas = {
name: i18n.global.t('container.cache'),
type: 'line',
areaStyle: {
color: '#ebdee3',
},
data: cacheDatas.value,
showSymbol: false,
};
freshChart(
'memoryChart',
[i18n.global.t('monitor.memory'), i18n.global.t('monitor.cache')],
timeDatas.value,
[memoryYDatas, cacheYDatas],
i18n.global.t('monitor.memory'),
' MB',
);
let ioReadYDatas = {
name: i18n.global.t('monitor.read'),
type: 'line',
areaStyle: {
color: '#ebdee3',
},
data: ioReadDatas.value,
showSymbol: false,
};
let ioWriteYDatas = {
name: i18n.global.t('monitor.write'),
type: 'line',
areaStyle: {
color: '#ebdee3',
},
data: ioWriteDatas.value,
showSymbol: false,
};
freshChart(
'ioChart',
[i18n.global.t('monitor.read'), i18n.global.t('monitor.write')],
timeDatas.value,
[ioReadYDatas, ioWriteYDatas],
i18n.global.t('monitor.disk') + ' IO',
'MB',
);
let netTxYDatas = {
name: i18n.global.t('monitor.up'),
type: 'line',
areaStyle: {
color: '#ebdee3',
},
data: netTxDatas.value,
showSymbol: false,
};
let netRxYDatas = {
name: i18n.global.t('monitor.down'),
type: 'line',
areaStyle: {
color: '#ebdee3',
},
data: netRxDatas.value,
showSymbol: false,
};
freshChart(
'networkChart',
[i18n.global.t('monitor.up'), i18n.global.t('monitor.down')],
timeDatas.value,
[netTxYDatas, netRxYDatas],
i18n.global.t('monitor.network'),
'KB/s',
);
};
function freshChart(chartName: string, legendDatas: any, xDatas: any, yDatas: any, yTitle: string, formatStr: string) {
if (isInit.value) {
echarts.init(document.getElementById(chartName) as HTMLElement);
}
let itemChart = echarts.getInstanceByDom(document.getElementById(chartName) as HTMLElement);
const option = {
title: [
chartsOption.value['cpuChart'] = {
title: 'CPU',
xDatas: timeDatas.value,
yDatas: [
{
left: 'center',
text: yTitle,
name: 'CPU',
data: cpuDatas.value,
},
],
zlevel: 1,
z: 1,
tooltip: {
trigger: 'axis',
formatter: function (datas: any) {
let res = datas[0].name + '<br/>';
for (const item of datas) {
res += item.marker + ' ' + item.seriesName + '：' + item.data + formatStr + '<br/>';
}
return res;
},
},
grid: { left: '7%', right: '7%', bottom: '20%' },
legend: {
data: legendDatas,
right: 10,
},
xAxis: { data: xDatas, boundaryGap: false },
yAxis: { name: '( ' + formatStr + ' )' },
series: yDatas,
formatStr: '%',
};
itemChart?.setOption(option, true);
}
chartsOption.value['memoryChart'] = {
title: i18n.global.t('monitor.memory'),
xDatas: timeDatas.value,
yDatas: [
{
name: i18n.global.t('monitor.memory'),
data: memDatas.value,
},
{
name: i18n.global.t('container.cache'),
data: cacheDatas.value,
},
],
formatStr: 'MB',
};
chartsOption.value['ioChart'] = {
title: i18n.global.t('monitor.disk') + ' IO',
xDatas: timeDatas.value,
yDatas: [
{
name: i18n.global.t('monitor.read'),
data: ioReadDatas.value,
},
{
name: i18n.global.t('monitor.write'),
data: ioWriteDatas.value,
},
],
formatStr: 'MB',
};
chartsOption.value['networkChart'] = {
title: i18n.global.t('monitor.network'),
xDatas: timeDatas.value,
yDatas: [
{
name: i18n.global.t('monitor.up'),
data: netTxDatas.value,
},
{
name: i18n.global.t('monitor.down'),
data: netRxDatas.value,
},
],
formatStr: 'KB/s',
};
// let cpuYDatas = {
// name: 'CPU',
// type: 'line',
// areaStyle: {
// color: '#ebdee3',
// },
// data: cpuDatas.value,
// showSymbol: false,
// };
// freshChart('cpuChart', ['CPU'], timeDatas.value, [cpuYDatas], 'CPU', '%');
// let memoryYDatas = {
// name: i18n.global.t('monitor.memory'),
// type: 'line',
// areaStyle: {
// color: '#ebdee3',
// },
// data: memDatas.value,
// showSymbol: false,
// };
// let cacheYDatas = {
// name: i18n.global.t('container.cache'),
// type: 'line',
// areaStyle: {
// color: '#ebdee3',
// },
// data: cacheDatas.value,
// showSymbol: false,
// };
// freshChart(
// 'memoryChart',
// [i18n.global.t('monitor.memory'), i18n.global.t('monitor.cache')],
// timeDatas.value,
// [memoryYDatas, cacheYDatas],
// i18n.global.t('monitor.memory'),
// ' MB',
// );
// let ioReadYDatas = {
// name: i18n.global.t('monitor.read'),
// type: 'line',
// areaStyle: {
// color: '#ebdee3',
// },
// data: ioReadDatas.value,
// showSymbol: false,
// };
// let ioWriteYDatas = {
// name: i18n.global.t('monitor.write'),
// type: 'line',
// areaStyle: {
// color: '#ebdee3',
// },
// data: ioWriteDatas.value,
// showSymbol: false,
// };
// freshChart(
// 'ioChart',
// [i18n.global.t('monitor.read'), i18n.global.t('monitor.write')],
// timeDatas.value,
// [ioReadYDatas, ioWriteYDatas],
// i18n.global.t('monitor.disk') + ' IO',
// 'MB',
// );
// let netTxYDatas = {
// name: i18n.global.t('monitor.up'),
// type: 'line',
// areaStyle: {
// color: '#ebdee3',
// },
// data: netTxDatas.value,
// showSymbol: false,
// };
// let netRxYDatas = {
// name: i18n.global.t('monitor.down'),
// type: 'line',
// areaStyle: {
// color: '#ebdee3',
// },
// data: netRxDatas.value,
// showSymbol: false,
// };
// freshChart(
// 'networkChart',
// [i18n.global.t('monitor.up'), i18n.global.t('monitor.down')],
// timeDatas.value,
// [netTxYDatas, netRxYDatas],
// i18n.global.t('monitor.network'),
// 'KB/s',
// );
};
// function freshChart(chartName: string, legendDatas: any, xDatas: any, yDatas: any, yTitle: string, formatStr: string) {
// if (isInit.value) {
// echarts.init(document.getElementById(chartName) as HTMLElement);
// }
// let itemChart = echarts.getInstanceByDom(document.getElementById(chartName) as HTMLElement);
// const option = {
// title: [
// {
// left: 'center',
// text: yTitle,
// },
// ],
// zlevel: 1,
// z: 1,
// tooltip: {
// trigger: 'axis',
// formatter: function (datas: any) {
// let res = datas[0].name + '<br/>';
// for (const item of datas) {
// res += item.marker + ' ' + item.seriesName + '：' + item.data + formatStr + '<br/>';
// }
// return res;
// },
// },
// grid: { left: '7%', right: '7%', bottom: '20%' },
// legend: {
// data: legendDatas,
// right: 10,
// },
// xAxis: { data: xDatas, boundaryGap: false },
// yAxis: { name: '( ' + formatStr + ' )' },
// series: yDatas,
// };
// itemChart?.setOption(option, true);
// }
const handleClose = async () => {
monitorVisiable.value = false;
clearInterval(Number(timer));
timer = null;
window.removeEventListener('resize', changeChartSize);
// window.removeEventListener('resize', changeChartSize);
};
defineExpose({

50
frontend/src/views/home/index.vue
View file

@ -111,16 +111,20 @@
<v-charts
height="300px"
id="ioChart"
type="line"
:option="chartsOption['ioChart']"
v-if="chartsOption['ioChart']"
:dataZoom="true"
/>
</div>
<div v-if="chartOption === 'network'" style="margin-top: 40px">
<v-charts
height="300px"
id="networkChart"
type="line"
:option="chartsOption['networkChart']"
v-if="chartsOption['networkChart']"
:dataZoom="true"
/>
</div>
</div>
@ -446,20 +450,19 @@ function loadUpTime(uptime: number) {
const loadData = async () => {
if (chartOption.value === 'io') {
const yDatas = [
{
name: i18n.global.t('monitor.read'),
data: ioReadBytes.value,
},
{
name: i18n.global.t('monitor.write'),
data: ioWriteBytes.value,
},
];
chartsOption.value['ioChart'] = {
title: i18n.global.t('home.io'),
// title: i18n.global.t('home.io'),
xDatas: timeIODatas.value,
yDatas: yDatas,
yDatas: [
{
name: i18n.global.t('monitor.read'),
data: ioReadBytes.value,
},
{
name: i18n.global.t('monitor.write'),
data: ioWriteBytes.value,
},
],
formatStr: 'MB',
};
@ -508,20 +511,19 @@ const loadData = async () => {
// 'MB',
// );
} else {
const yDatas = [
{
name: i18n.global.t('monitor.up'),
data: netBytesRecvs.value,
},
{
name: i18n.global.t('monitor.down'),
data: netBytesSents.value,
},
];
chartsOption.value['networkChart'] = {
title: i18n.global.t('home.network'),
// title: i18n.global.t('home.network'),
xDatas: timeNetDatas.value,
yDatas: yDatas,
yDatas: [
{
name: i18n.global.t('monitor.up'),
data: netBytesRecvs.value,
},
{
name: i18n.global.t('monitor.down'),
data: netBytesSents.value,
},
],
formatStr: 'KB/s',
};
// let netTxYDatas = {