in frontend/src/views/Control/hooks/useInitChart.js [43:624]
async function initMatchChart(serverId, type, refreshData = true) {
!t && (t = useI18n().t);
chartsTitle = {
GCEchart: t('controlPage.GCEchart'),
JVMClassEchart: t('controlPage.JVMClassEchart'),
YGCEchart: t('controlPage.YGCEchart'),
FGCEchart: t('controlPage.FGCEchart'),
JAVATypeEchart: t('controlPage.JAVATypeEchart'),
JAVATimeEchart: t('controlPage.JAVATimeEchart'),
MemoryEchart: t('controlPage.MemoryEchart'),
BufferEchart: t('controlPage.BufferEchart'),
CPUEchart: t('controlPage.CPUEchart'),
IOEchart: t('controlPage.IOEchart'),
FileCountEchart: t('controlPage.FileCountEchart'),
FileSizeEchart: t('controlPage.FileSizeEchart'),
WriteEchart: t('controlPage.WriteEchart'),
SearchEchart: t('controlPage.SearchEchart'),
ApiEchart: t('controlPage.ApiEchart'),
ApiQPSEchart: t('controlPage.ApiQPSEchart'),
};
let res;
// Cache
if (refreshData === '0') {
res = ChartCacheData[type];
} else {
let result = await getChartData(serverId, ChartMap[type]);
ChartCacheData[type] = result.data.chartData;
res = result.data.chartData;
}
if (type === 'GCEchart') {
let temp = {
title: chartsTitle[type],
options: {
color: ['#379E7D', '#5776ED', '#F69823', '#FD6031'],
legend: {
type: 'scroll',
data: res?.metricnameList,
bottom: '12px',
},
xAxis: {
type: 'category',
axisTick: { show: false },
axisLine: { show: true, lineStyle: { color: ' #eee', width: 1 } },
axisLabel: { show: true, textStyle: { color: '#8E97AA' } },
data: res ? res.timeList : [],
},
yAxis: {
type: 'category',
},
series: res?.metricnameList.map((item, index) => {
return {
name: item,
data: res?.dataList && get(res, `dataList.${get(res, `metricnameList.${index}`)}`),
type: 'bar',
barGap: '0',
};
}),
},
};
return temp;
} else if (type === 'JVMClassEchart') {
let temp = {
title: chartsTitle[type],
options: {
color: ['#5776ED', '#FD5C5C'],
legend: {
data: res?.metricnameList,
bottom: '12px',
},
xAxis: {
type: 'category',
axisTick: { show: false },
axisLine: { show: true, lineStyle: { color: ' #eee', width: 1 } },
axisLabel: { show: true, textStyle: { color: '#8E97AA' } },
data: res ? res.timeList : [],
},
yAxis: {
axisLabel: {
//这种做法就是在y轴的数据的值旁边拼接单位，貌似也挺方便的
formatter: `{value}${get(res, 'unitList.0')}`,
},
},
series: res?.metricnameList.map((item, index) => {
return {
name: item,
data: res?.dataList && get(res, `dataList.${get(res, `metricnameList.${index}`)}`),
type: 'line',
};
}),
},
};
return temp;
} else if (type === 'YGCEchart') {
let temp = {
title: chartsTitle[type],
options: {
color: ['#F69823'],
tooltip: {},
xAxis: {
type: 'value',
splitLine: { show: false },
axisTick: { show: false },
axisLine: { show: true, lineStyle: { color: ' #eee', width: 1 } },
axisLabel: { show: true, textStyle: { color: '#8E97AA' }, formatter: `{value}${get(res, 'unitList.0')}` },
},
yAxis: {
inverse: true,
type: 'category',
axisTick: { show: false },
data: res ? res.metricnameList : [],
axisLine: { show: true, lineStyle: { color: ' #eee', width: 1 } },
axisLabel: { show: true, textStyle: { color: '#8E97AA' } },
},
grid: {
top: '20px',
left: '20px',
right: '20px',
bottom: '16px',
containLabel: true,
},
series: [
{
type: 'bar',
data: res?.metricnameList.map((item, index) => {
return res?.dataList && get(res, `dataList.${get(res, `metricnameList.${index}`)}`).map((item) => parseFloat(item))[0];
}),
},
],
},
};
return temp;
} else if (type === 'FGCEchart') {
let temp = {
title: chartsTitle[type],
options: {
color: ['#5855DA'],
tooltip: {},
xAxis: {
type: 'value',
splitLine: { show: false },
axisTick: { show: false },
axisLine: { show: true, lineStyle: { color: ' #eee', width: 1 } },
axisLabel: { show: true, textStyle: { color: '#8E97AA' }, formatter: `{value}${get(res, 'unitList.0')}` },
},
yAxis: {
inverse: true,
type: 'category',
data: res ? res.metricnameList : [],
axisTick: { show: false },
axisLine: { show: true, lineStyle: { color: ' #eee', width: 1 } },
axisLabel: { show: true, textStyle: { color: '#8E97AA' } },
},
grid: {
top: '20px',
left: '20px',
right: '20px',
bottom: '16px',
containLabel: true,
},
series: [
{
type: 'bar',
data: res?.metricnameList.map((item, index) => {
return res?.dataList && get(res, `dataList.${get(res, `metricnameList.${index}`)}`).map((item) => parseFloat(item))[0];
}),
},
],
},
};
return temp;
} else if (type === 'JAVATypeEchart') {
let temp = {
title: chartsTitle[type],
options: {
color: ['#F69823', '#FD5C5C', '#5776ED'],
legend: {
data: res?.metricnameList,
bottom: '12px',
},
xAxis: {
type: 'category',
axisTick: { show: false },
axisLine: { show: true, lineStyle: { color: ' #eee', width: 1 } },
axisLabel: { show: true, textStyle: { color: '#8E97AA' } },
data: res?.timeList,
},
yAxis: {
axisLabel: {
//这种做法就是在y轴的数据的值旁边拼接单位，貌似也挺方便的
formatter: `{value}${get(res, 'unitList.0')}`,
},
},
series: res?.metricnameList.map((item, index) => {
return {
name: item,
data: res?.dataList && get(res, `dataList.${get(res, `metricnameList.${index}`)}`),
type: 'line',
};
}),
},
};
return temp;
} else if (type === 'JAVATimeEchart') {
let temp = {
title: chartsTitle[type],
options: {
color: ['#379E7D', '#66A5FF', '#5776ED', '#F69823', '#FD5C5C', '#50D6BB'],
legend: {
type: 'scroll',
data: res?.metricnameList,
bottom: '12px',
},
xAxis: {
type: 'category',
axisTick: { show: false },
axisLine: { show: true, lineStyle: { color: ' #eee', width: 1 } },
axisLabel: { show: true, textStyle: { color: '#8E97AA' } },
data: res?.timeList,
},
yAxis: {
axisLabel: {
//这种做法就是在y轴的数据的值旁边拼接单位，貌似也挺方便的
formatter: `{value}${get(res, 'unitList.0')}`,
},
},
series: res?.metricnameList.map((item, index) => {
return {
name: item,
data: res?.dataList && get(res, `dataList.${get(res, `metricnameList.${index}`)}`),
type: 'line',
};
}),
},
};
return temp;
} else if (type === 'MemoryEchart') {
let temp = {
title: chartsTitle[type],
options: {
color: ['#379E7D', '#5776ED'],
legend: {
data: res?.metricnameList,
bottom: '12px',
},
xAxis: {
type: 'category',
axisTick: { show: false },
axisLine: { show: true, lineStyle: { color: ' #eee', width: 1 } },
axisLabel: { show: true, textStyle: { color: '#8E97AA' } },
data: res?.timeList,
},
yAxis: {
axisLabel: {
//这种做法就是在y轴的数据的值旁边拼接单位，貌似也挺方便的
formatter: `{value}${get(res, 'unitList.0')}`,
},
},
series: res?.metricnameList.map((item, index) => {
return {
name: item,
data: res?.dataList && get(res, `dataList.${get(res, `metricnameList.${index}`)}`),
type: 'line',
};
}),
},
};
return temp;
} else if (type === 'BufferEchart') {
let temp = {
title: chartsTitle[type],
options: {
color: ['#379E7D', '#5776ED'],
legend: {
data: res?.metricnameList,
bottom: '12px',
},
xAxis: {
type: 'category',
axisTick: { show: false },
axisLine: { show: true, lineStyle: { color: ' #eee', width: 1 } },
axisLabel: { show: true, textStyle: { color: '#8E97AA' } },
data: res?.timeList,
},
yAxis: {
axisLabel: {
//这种做法就是在y轴的数据的值旁边拼接单位，貌似也挺方便的
formatter: `{value}${get(res, 'unitList.0')}`,
},
},
series: res?.metricnameList.map((item, index) => {
return {
name: item,
data: res?.dataList && get(res, `dataList.${get(res, `metricnameList.${index}`)}`),
type: 'line',
};
}),
},
};
return temp;
} else if (type === 'CPUEchart') {
let data = [];
res?.metricnameList.map((item) => {
data.push({ value: parseFloat(get(res, `dataList.${item}`)), name: item });
});
let temp = {
title: chartsTitle[type],
options: {
color: ['#379E7D', '#5776ED', '#66A5FF', '#F69823', '#FD5C5C'],
legend: {
type: 'scroll',
bottom: '12px',
},
tooltip: {
trigger: 'item',
textStyle: {
align: 'left',
},
formatter: function (val) {
console.log(val.name, val.value);
return `${val.marker}${val.name} ${val.value}%`;
},
},
xAxis: null,
yAxis: null,
series: [
{
name: chartsTitle[type],
type: 'pie',
radius: ['45%', '70%'],
avoidLabelOverlap: false,
center: ['50%', '120px'],
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: false,
fontSize: '40',
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data,
},
],
},
};
return temp;
} else if (type === 'IOEchart') {
let temp = {
title: chartsTitle[type],
options: {
color: ['#379E7D'],
legend: null,
xAxis: {
type: 'category',
axisTick: { show: false },
axisLine: { show: true, lineStyle: { color: ' #eee', width: 1 } },
axisLabel: { show: true, textStyle: { color: '#8E97AA' } },
data: res?.timeList,
},
yAxis: {
axisLabel: {
//这种做法就是在y轴的数据的值旁边拼接单位，貌似也挺方便的
formatter: `{value}${get(res, 'unitList.0')}`,
},
},
series: res?.metricnameList.map((item, index) => {
return {
name: item,
data: res?.dataList && get(res, `dataList.${get(res, `metricnameList.${index}`)}`),
type: 'line',
};
}),
},
};
return temp;
} else if (type === 'FileCountEchart') {
let temp = {
title: chartsTitle[type],
options: {
color: ['#5776ED', '#66A5FF', '#F69823', '#379E7D'],
legend: {
type: 'scroll',
data: res?.metricnameList,
bottom: '12px',
},
xAxis: {
type: 'category',
axisTick: { show: false },
axisLine: { show: true, lineStyle: { color: ' #eee', width: 1 } },
axisLabel: { show: true, textStyle: { color: '#8E97AA' } },
data: res?.timeList,
},
yAxis: {
axisLabel: {
//这种做法就是在y轴的数据的值旁边拼接单位，貌似也挺方便的
formatter: `{value}${get(res, 'unitList.0')}`,
},
},
series: res?.metricnameList.map((item, index) => {
return {
name: item,
data: res?.dataList && get(res, `dataList.${get(res, `metricnameList.${index}`)}`),
type: 'line',
};
}),
},
};
return temp;
} else if (type === 'FileSizeEchart') {
let temp = {
title: chartsTitle[type],
options: {
color: ['#5776ED', '#66A5FF', '#F69823', '#379E7D'],
legend: {
type: 'scroll',
data: res?.metricnameList,
bottom: '12px',
},
xAxis: {
type: 'category',
axisTick: { show: false },
axisLine: { show: true, lineStyle: { color: ' #eee', width: 1 } },
axisLabel: { show: true, textStyle: { color: '#8E97AA' } },
data: res?.timeList,
},
yAxis: {
axisLabel: {
//这种做法就是在y轴的数据的值旁边拼接单位，貌似也挺方便的
formatter: `{value}${get(res, 'unitList.0')}`,
},
},
series: res?.metricnameList.map((item, index) => {
return {
name: item,
data: res?.dataList && get(res, `dataList.${get(res, `metricnameList.${index}`)}`),
type: 'line',
};
}),
},
};
return temp;
} else if (type === 'WriteEchart') {
let temp = {
title: chartsTitle[type],
options: {
color: ['#379E7D', '#FD6031', '#5776ED'],
legend: {
data: res?.metricnameList,
bottom: '12px',
},
xAxis: {
type: 'category',
axisTick: { show: false },
axisLine: { show: true, lineStyle: { color: ' #eee', width: 1 } },
axisLabel: { show: true, textStyle: { color: '#8E97AA' } },
data: res?.timeList,
},
yAxis: {
axisLabel: {
//这种做法就是在y轴的数据的值旁边拼接单位，貌似也挺方便的
formatter: `{value}${get(res, 'unitList.0')}`,
},
},
series: res?.metricnameList.map((item, index) => {
return {
name: item,
data: res?.dataList && get(res, `dataList.${get(res, `metricnameList.${index}`)}`),
type: 'line',
};
}),
},
};
return temp;
} else if (type === 'SearchEchart') {
let temp = {
title: chartsTitle[type],
options: {
color: ['#379E7D', '#FD6031', '#5776ED'],
legend: {
data: res?.metricnameList,
bottom: '12px',
},
xAxis: {
type: 'category',
axisTick: { show: false },
axisLine: { show: true, lineStyle: { color: ' #eee', width: 1 } },
axisLabel: { show: true, textStyle: { color: '#8E97AA' } },
data: res?.timeList,
},
yAxis: {
axisLabel: {
//这种做法就是在y轴的数据的值旁边拼接单位，貌似也挺方便的
formatter: `{value}${get(res, 'unitList.0')}`,
},
},
series: res?.metricnameList.map((item, index) => {
return {
name: item,
data: res?.dataList && get(res, `dataList.${get(res, `metricnameList.${index}`)}`),
type: 'bar',
barGap: '0',
};
}),
},
};
return temp;
} else if (type === 'ApiEchart') {
let temp = {
title: chartsTitle[type],
options: {
color: ['#379E7D', '#66A5FF', '#5776ED', '#F69823', '#FD5C5C', '#50D6BB'],
legend: {
type: 'scroll',
data: res?.metricnameList,
bottom: '12px',
left: '20px',
},
xAxis: {
type: 'category',
axisTick: { show: false },
axisLine: { show: true, lineStyle: { color: ' #eee', width: 1 } },
axisLabel: { show: true, textStyle: { color: '#8E97AA' } },
data: res?.timeList,
},
yAxis: {
axisLabel: {
//这种做法就是在y轴的数据的值旁边拼接单位，貌似也挺方便的
formatter: `{value}${get(res, 'unitList.0')}`,
},
},
series: res?.metricnameList.map((item, index) => {
return {
name: item,
data: res?.dataList && get(res, `dataList.${get(res, `metricnameList.${index}`)}`),
type: 'line',
};
}),
},
};
return temp;
} else if (type === 'ApiQPSEchart') {
let temp = {
title: chartsTitle[type],
options: {
color: ['#379E7D', '#66A5FF', '#5776ED', '#F69823', '#FD5C5C', '#50D6BB'],
legend: {
type: 'scroll',
data: res?.metricnameList,
bottom: '12px',
left: '20px',
},
xAxis: {
type: 'category',
axisTick: { show: false },
axisLine: { show: true, lineStyle: { color: ' #eee', width: 1 } },
axisLabel: { show: true, textStyle: { color: '#8E97AA' } },
data: res?.timeList,
},
yAxis: {
axisLabel: {
//这种做法就是在y轴的数据的值旁边拼接单位，貌似也挺方便的
formatter: `{value}${get(res, 'unitList.0')}`,
},
},
series: res?.metricnameList.map((item, index) => {
return {
name: item,
data: res?.dataList && get(res, `dataList.${get(res, `metricnameList.${index}`)}`),
type: 'line',
};
}),
},
};
return temp;
}
}