test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(工作台): 工作台可视化暗黑主题

This commit is contained in:
xinxin.wu 2024-12-17 19:00:19 +08:00 committed by Craftsman
parent 773acd7937
commit a4bac8a86a
12 changed files with 343 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
frontend/src/config/chartTheme.ts Normal file
View File

@ -0,0 +1,61 @@
import useAppStore from '@/store/modules/app';
const appStore = useAppStore();
const colorThemeConfig: Record<string, any> = {
xLabelColor: {
dark: '#C0C2CF',
bright: '#646466',
},
legendColor: {
dark: '#E3E6F3',
bright: '#323233',
},
splitLineColor: {
dark: '#434552',
bright: '#EDEDF1',
},
yLabelColor: {
dark: '#90929F',
bright: '#AEAEB2',
},
subtextStyleColor: {
dark: '#90929F',
bright: '#323233',
},
itemStyleBorderColor: {
dark: '#242633',
bright: '#ffffff',
},
initItemStyleColor: {
dark: '#434552',
bright: '#D4D4D8',
},
pageIconColor: {
dark: '#959598',
bright: '#959598',
},
pageIconInactiveColor: {
dark: '#959598',
bright: '#C7C7CB',
},
pageTextStyleColor: {
dark: '#C7C7CB',
bright: '#959598',
},
graphicBackgroundColor: {
dark: '#ADB0BC',
bright: '#F9F9FE',
},
graphicFillColor: {
dark: '#242633',
bright: '#959598',
},
};
function getVisualThemeColor(key: string): string {
const theme = appStore.isDarkTheme ? 'dark' : 'bright';
return colorThemeConfig[key]?.[theme];
}
export default getVisualThemeColor;

31
frontend/src/config/workbench.ts
View File

@ -1,5 +1,6 @@
import { cloneDeep } from 'lodash-es';
import getVisualThemeColor from '@/config/chartTheme';
import { commonConfig, toolTipConfig } from '@/config/testPlan';
import type { ModuleCardItem } from '@/models/workbench/homePage';
@ -145,12 +146,13 @@ export const defaultLegacy = [
},
];
export const defaultValueMap: Record<string, any> = {
export const defaultValueMap = (): Record<string, any> => {
return {
// 用例数量
[WorkCardEnum.CASE_COUNT]: {
review: {
defaultList: cloneDeep(defaultCover),
color: ['#00C261', '#D4D4D8'],
color: ['#00C261', getVisualThemeColor('initItemStyleColor')],
defaultName: 'workbench.homePage.reviewRate',
},
pass: {
@ -163,7 +165,7 @@ export const defaultValueMap: Record<string, any> = {
[WorkCardEnum.ASSOCIATE_CASE_COUNT]: {
cover: {
defaultList: cloneDeep(defaultCover),
color: ['#00C261', '#D4D4D8'],
color: ['#00C261', getVisualThemeColor('initItemStyleColor')],
defaultName: 'workbench.homePage.coverRate',
},
},
@ -171,7 +173,7 @@ export const defaultValueMap: Record<string, any> = {
[WorkCardEnum.REVIEW_CASE_COUNT]: {
cover: {
defaultList: cloneDeep(defaultCover),
color: ['#00C261', '#D4D4D8'],
color: ['#00C261', getVisualThemeColor('initItemStyleColor')],
defaultName: 'workbench.homePage.coverRate',
},
},
@ -179,17 +181,17 @@ export const defaultValueMap: Record<string, any> = {
[WorkCardEnum.TEST_PLAN_COUNT]: {
execute: {
defaultList: cloneDeep(defaultExecution),
color: ['#D4D4D8', '#00C261'],
color: [getVisualThemeColor('initItemStyleColor'), '#00C261'],
defaultName: 'workbench.homePage.executeRate',
},
pass: {
defaultList: cloneDeep(defaultPass),
color: ['#00C261', '#D4D4D8'],
color: ['#00C261', getVisualThemeColor('initItemStyleColor')],
defaultName: 'workbench.homePage.passRate',
},
complete: {
defaultList: cloneDeep(defaultComplete),
color: ['#D4D4D8', '#3370FF', '#00C261', '#FF9964'],
color: [getVisualThemeColor('initItemStyleColor'), '#3370FF', '#00C261', '#FF9964'],
defaultName: 'workbench.homePage.completeRate',
},
},
@ -197,7 +199,7 @@ export const defaultValueMap: Record<string, any> = {
[WorkCardEnum.PLAN_LEGACY_BUG]: {
legacy: {
defaultList: cloneDeep(defaultLegacy),
color: ['#00C261', '#D4D4D8'],
color: ['#00C261', getVisualThemeColor('initItemStyleColor')],
defaultName: 'workbench.homePage.legacyRate',
},
},
@ -205,7 +207,7 @@ export const defaultValueMap: Record<string, any> = {
[WorkCardEnum.BUG_COUNT]: {
legacy: {
defaultList: cloneDeep(defaultLegacy),
color: ['#00C261', '#D4D4D8'],
color: ['#00C261', getVisualThemeColor('initItemStyleColor')],
defaultName: 'workbench.homePage.legacyRate',
},
},
@ -213,7 +215,7 @@ export const defaultValueMap: Record<string, any> = {
[WorkCardEnum.HANDLE_BUG_BY_ME]: {
legacy: {
defaultList: cloneDeep(defaultLegacy),
color: ['#00C261', '#D4D4D8'],
color: ['#00C261', getVisualThemeColor('initItemStyleColor')],
defaultName: 'workbench.homePage.legacyRate',
},
},
@ -221,12 +223,12 @@ export const defaultValueMap: Record<string, any> = {
[WorkCardEnum.API_COUNT]: {
cover: {
defaultList: cloneDeep(defaultCover),
color: ['#00C261', '#D4D4D8'],
color: ['#00C261', getVisualThemeColor('initItemStyleColor')],
defaultName: 'workbench.homePage.coverRate',
},
complete: {
defaultList: cloneDeep(defaultComplete),
color: ['#00C261', '#3370FF', '#D4D4D8'],
color: ['#00C261', '#3370FF', getVisualThemeColor('initItemStyleColor')],
defaultName: 'workbench.homePage.completeRate',
},
},
@ -234,10 +236,11 @@ export const defaultValueMap: Record<string, any> = {
[WorkCardEnum.CREATE_BUG_BY_ME]: {
legacy: {
defaultList: cloneDeep(defaultLegacy),
color: ['#00C261', '#D4D4D8'],
color: ['#00C261', getVisualThemeColor('initItemStyleColor')],
defaultName: 'workbench.homePage.legacyRate',
},
},
};
};
// XX率饼图配置
@ -257,7 +260,7 @@ export const commonRatePieOptions = {
subtext: '0',
subtextStyle: {
fontSize: 12,
color: '#323233',
color: getVisualThemeColor('subtextStyleColor'),
fontWeight: 'bold',
align: 'center',
lineHeight: 3,

7
frontend/src/views/workbench/homePage/components/apiAndScenarioCase.vue
View File

@ -90,6 +90,7 @@
import RatioPie from './ratioPie.vue';
import { workApiCaseCountDetail, workApiCountCoverRage, workScenarioCaseCountDetail } from '@/api/modules/workbench';
import getVisualThemeColor from '@/config/chartTheme';
import { useI18n } from '@/hooks/useI18n';
import useOpenNewPage from '@/hooks/useOpenNewPage';
import useAppStore from '@/store/modules/app';
@ -196,7 +197,7 @@
const coverTitleConfig = computed(() => {
return {
name: t('workbench.homePage.apiCoverage'),
color: ['#D4D4D8', '#00C261'],
color: [getVisualThemeColor('initItemStyleColor'), '#00C261'],
tooltipText:
props.item.key === WorkCardEnum.API_CASE_COUNT
? t('workbench.homePage.apiCaseCountCoverRateTooltip')
@ -208,12 +209,12 @@
return props.item.key === WorkCardEnum.API_CASE_COUNT
? {
name: t('workbench.homePage.caseExecutionRate'),
color: ['#D4D4D8', '#00C261'],
color: [getVisualThemeColor('initItemStyleColor'), '#00C261'],
tooltipText: t('workbench.homePage.apiCaseCountExecuteRateTooltip'),
}
: {
name: t('workbench.homePage.sceneExecutionRate'),
color: ['#D4D4D8', '#00C261'],
color: [getVisualThemeColor('initItemStyleColor'), '#00C261'],
tooltipText: t('workbench.homePage.scenarioCaseCountExecuteRateTooltip'),
};
});

7
frontend/src/views/workbench/homePage/components/apiCount.vue
View File

@ -63,6 +63,7 @@
import PassRatePie from './passRatePie.vue';
import { workApiCountCoverRage, workApiCountDetail } from '@/api/modules/workbench';
import getVisualThemeColor from '@/config/chartTheme';
import { useI18n } from '@/hooks/useI18n';
import useAppStore from '@/store/modules/app';
@ -195,7 +196,11 @@
return {
...item,
selected: true,
color: `${colorMapConfig[props.item.key][index]}`,
color: `${
colorMapConfig[props.item.key][index] !== 'initItemStyleColor'
? colorMapConfig[props.item.key][index]
: getVisualThemeColor('initItemStyleColor')
}`,
};
});

7
frontend/src/views/workbench/homePage/components/caseCount.vue
View File

@ -59,6 +59,7 @@
import PassRatePie from './passRatePie.vue';
import { workCaseCountDetail } from '@/api/modules/workbench';
import getVisualThemeColor from '@/config/chartTheme';
import { useI18n } from '@/hooks/useI18n';
import useAppStore from '@/store/modules/app';
@ -146,7 +147,11 @@
return {
...item,
selected: true,
color: `${colorMapConfig[props.item.key][index]}`,
color: `${
colorMapConfig[props.item.key][index] !== 'initItemStyleColor'
? colorMapConfig[props.item.key][index]
: getVisualThemeColor('initItemStyleColor')
}`,
};
});
hasPermission.value = detail.errorCode !== 109001;

7
frontend/src/views/workbench/homePage/components/caseReviewedCount.vue
View File

@ -58,6 +58,7 @@
import PassRatePie from './passRatePie.vue';
import { workCaseReviewDetail } from '@/api/modules/workbench';
import getVisualThemeColor from '@/config/chartTheme';
import { useI18n } from '@/hooks/useI18n';
import useAppStore from '@/store/modules/app';
@ -137,7 +138,11 @@
return {
...item,
selected: true,
color: `${colorMapConfig[props.item.key][index]}`,
color: `${
colorMapConfig[props.item.key][index] !== 'initItemStyleColor'
? colorMapConfig[props.item.key][index]
: getVisualThemeColor('initItemStyleColor')
}`,
};
});

7
frontend/src/views/workbench/homePage/components/defectCount.vue
View File

@ -63,6 +63,7 @@
workBugHandleByMe,
workPlanLegacyBug,
} from '@/api/modules/workbench';
import getVisualThemeColor from '@/config/chartTheme';
import { useI18n } from '@/hooks/useI18n';
import useAppStore from '@/store/modules/app';
@ -150,7 +151,11 @@
return {
...item,
selected: true,
color: `${colorMapConfig[props.item.key][index]}`,
color: `${
colorMapConfig[props.item.key][index] !== 'initItemStyleColor'
? colorMapConfig[props.item.key][index]
: getVisualThemeColor('initItemStyleColor')
}`,
};
});

54
frontend/src/views/workbench/homePage/components/ratioPie.vue
View File

@ -54,6 +54,7 @@
import MsChart from '@/components/pure/chart/index.vue';
import getVisualThemeColor from '@/config/chartTheme';
import { toolTipConfig } from '@/config/testPlan';
import { useI18n } from '@/hooks/useI18n';
import useOpenNewPage from '@/hooks/useOpenNewPage';
@ -92,7 +93,7 @@
subtext: '',
subtextStyle: {
fontSize: 14,
color: '#323233',
color: getVisualThemeColor('subtextStyleColor'),
fontWeight: 'bold',
lineHeight: 3,
},
@ -118,29 +119,11 @@
},
y: 'bottom',
bottom: 'center',
formatter: (name: any) => {
return `{a|${name}} {b|${addCommasToNumber(1022220)}}`;
},
tooltip: {
show: false,
},
},
textStyle: {
rich: {
a: {
width: 60,
color: '#959598', // 状态名称颜色
fontSize: 12,
},
b: {
width: 60,
color: '#783887',
fontSize: 16,
fontWeight: 'bold',
padding: [0, 0, 0, 16],
},
},
},
series: {
name: '',
type: 'pie',
@ -188,13 +171,27 @@
itemStyle: {
color: color[i],
borderWidth: pieBorderWidth,
borderColor: '#ffffff',
borderColor: getVisualThemeColor('itemStyleBorderColor'),
},
};
})
.filter((e) => e.value !== 0);
options.value.series.data = hasDataLength > 0 ? seriesData : [];
options.value.series.data =
hasDataLength > 0
? seriesData
: [
{
name: '',
value: 1,
tooltip: {
show: false,
},
itemStyle: {
color: getVisualThemeColor('initItemStyleColor'),
},
},
];
legend.value = [...props.data.slice(1)].map((e, i) => {
return {
...e,
@ -211,7 +208,18 @@
if (props.hasPermission) {
options.value.title.subtext = `${props.data[0].value ?? 0}%`;
} else {
options.value.series.data = [];
options.value.series.data = [
{
name: '',
value: 1,
tooltip: {
show: false,
},
itemStyle: {
color: getVisualThemeColor('initItemStyleColor'),
},
},
];
options.value.title.subtext = `-%`;
}

7
frontend/src/views/workbench/homePage/components/testPlanCount.vue
View File

@ -57,6 +57,7 @@
import PassRatePie from './passRatePie.vue';
import { workTestPlanRage } from '@/api/modules/workbench';
import getVisualThemeColor from '@/config/chartTheme';
import { useI18n } from '@/hooks/useI18n';
import useAppStore from '@/store/modules/app';
@ -179,7 +180,11 @@
return {
...item,
selected: true,
color: `${colorMapConfig[props.item.key][index]}`,
color: `${
colorMapConfig[props.item.key][index] !== 'initItemStyleColor'
? colorMapConfig[props.item.key][index]
: getVisualThemeColor('initItemStyleColor')
}`,
percentValue: total > 0 ? `${((item.count / total) * 100).toFixed(2)}%` : '0.00%',
};
});

23
frontend/src/views/workbench/homePage/components/testPlanOverview.vue
View File

@ -97,6 +97,7 @@
import ThresholdProgress from './thresholdProgress.vue';
import { getWorkTestPlanListUrl, workTestPlanOverviewDetail } from '@/api/modules/workbench';
import getVisualThemeColor from '@/config/chartTheme';
import { commonRatePieOptions } from '@/config/workbench';
import { useI18n } from '@/hooks/useI18n';
import useAppStore from '@/store/modules/app';
@ -250,24 +251,40 @@
{
name: t('common.unExecute'),
value: totalCount - executeCount,
color: '#EDEDF1',
color: getVisualThemeColor('initItemStyleColor'),
},
];
const pieBorderWidth = executeData.filter((e) => Number(e.value) > 0).length === 1 ? 0 : 1;
execOptions.value.series.data = executeData
const lastExecuteData = executeData
.map((e) => {
return {
...e,
itemStyle: {
borderWidth: pieBorderWidth,
borderColor: '#ffffff',
borderColor: getVisualThemeColor('itemStyleBorderColor'),
color: e.color,
},
};
})
.filter((e) => e.value !== 0);
execOptions.value.series.data =
lastExecuteData.length > 0
? lastExecuteData
: [
{
name: '',
value: 1,
tooltip: {
show: false,
},
itemStyle: {
color: getVisualThemeColor('initItemStyleColor'),
},
},
];
}
const showSkeleton = ref(false);

7
frontend/src/views/workbench/homePage/index.vue
View File

@ -345,6 +345,13 @@
initDefaultList();
});
watch(
() => appStore.isDarkTheme,
() => {
handleRefresh();
}
);
const time = ref({ ...timeForm.value });
watch(

126
frontend/src/views/workbench/homePage/utils.ts
View File

@ -1,5 +1,6 @@
import { cloneDeep } from 'lodash-es';
import getVisualThemeColor from '@/config/chartTheme';
import { toolTipConfig } from '@/config/testPlan';
import { commonRatePieOptions, defaultValueMap } from '@/config/workbench';
import { useI18n } from '@/hooks/useI18n';
@ -68,16 +69,22 @@ export function getColorScheme(dataLength: number): string[] {
// 饼图颜色配置
export const colorMapConfig: Record<string, string[]> = {
[WorkCardEnum.CASE_COUNT]: ['#ED0303', '#FFA200', '#3370FF', '#D4D4D8'],
[WorkCardEnum.CASE_COUNT]: ['#ED0303', '#FFA200', '#3370FF', 'initItemStyleColor'],
[WorkCardEnum.ASSOCIATE_CASE_COUNT]: ['#00C261', '#3370FF'],
[WorkCardEnum.REVIEW_CASE_COUNT]: ['#D4D4D8', '#3370FF', '#00C261', '#ED0303', '#FFA200'],
[WorkCardEnum.TEST_PLAN_COUNT]: ['#D4D4D8', '#3370FF', '#00C261', '#FF9964'],
[WorkCardEnum.PLAN_LEGACY_BUG]: ['#FFA200', '#3370FF', '#D4D4D8', '#00C261', ...getColorScheme(13)],
[WorkCardEnum.BUG_COUNT]: ['#FFA200', '#3370FF', '#D4D4D8', '#00C261', ...getColorScheme(13)],
[WorkCardEnum.HANDLE_BUG_BY_ME]: ['#FFA200', '#3370FF', '#D4D4D8', '#00C261', ...getColorScheme(13)],
[WorkCardEnum.CREATE_BY_ME]: ['#9441B1', '#3370FF', '#00C261', '#D4D4D8'],
[WorkCardEnum.REVIEW_CASE_COUNT]: [
getVisualThemeColor('initItemStyleColor'),
'#3370FF',
'#00C261',
'#ED0303',
'#FFA200',
],
[WorkCardEnum.TEST_PLAN_COUNT]: ['initItemStyleColor', '#3370FF', '#00C261', '#FF9964'],
[WorkCardEnum.PLAN_LEGACY_BUG]: ['#FFA200', '#3370FF', 'initItemStyleColor', '#00C261', ...getColorScheme(13)],
[WorkCardEnum.BUG_COUNT]: ['#FFA200', '#3370FF', 'initItemStyleColor', '#00C261', ...getColorScheme(13)],
[WorkCardEnum.HANDLE_BUG_BY_ME]: ['#FFA200', '#3370FF', 'initItemStyleColor', '#00C261', ...getColorScheme(13)],
[WorkCardEnum.CREATE_BY_ME]: ['#9441B1', '#3370FF', '#00C261', 'initItemStyleColor'],
[WorkCardEnum.API_COUNT]: ['#811FA3', '#00C261', '#3370FF', '#FFA1FF', '#EE50A3', '#FF9964', '#F9F871', '#C3DD40'],
[WorkCardEnum.CREATE_BUG_BY_ME]: ['#FFA200', '#3370FF', '#D4D4D8', '#00C261', ...getColorScheme(13)],
[WorkCardEnum.CREATE_BUG_BY_ME]: ['#FFA200', '#3370FF', 'initItemStyleColor', '#00C261', ...getColorScheme(13)],
};
// 柱状图
@ -129,8 +136,10 @@ export function getCommonBarOptions(
paramsList = params;
}
const html = `
<div class="w-[186px] ms-scroll-bar max-h-[236px] overflow-y-auto p-[16px] gap-[8px] flex flex-col">
<div class="font-medium max-w-[150px] one-line-text" style="color:#323233">${params[0].axisValueLabel}</div>
<div class="w-[186px] rounded ms-scroll-bar max-h-[236px] overflow-y-auto p-[16px] gap-[8px] flex flex-col bg-[var(--color-text-fff)]">
<div class="font-medium max-w-[150px] text-[var(--color-text-1)] one-line-text">
${params[0].axisValueLabel}
</div>
${testPlanHtml}
${paramsList
.map(
@ -168,7 +177,7 @@ export function getCommonBarOptions(
triggerEvent: true,
axisLabel: {
show: true,
color: '#646466',
color: getVisualThemeColor('xLabelColor'),
width: 100,
overflow: 'truncate',
ellipsis: '...',
@ -188,7 +197,7 @@ export function getCommonBarOptions(
},
axisLine: {
lineStyle: {
color: '#EDEDF1',
color: getVisualThemeColor('splitLineColor'),
},
},
},
@ -201,6 +210,9 @@ export function getCommonBarOptions(
show: false,
onZero: false, // 禁止 Y 轴强制显示在 0 位置
},
axisLabel: {
color: getVisualThemeColor('yLabelColor'),
},
offset: 0, // 第一个 Y 轴默认位置
nameTextStyle: {
fontSize: 12,
@ -211,7 +223,7 @@ export function getCommonBarOptions(
splitLine: {
show: true, // 控制是否显示水平线
lineStyle: {
color: '#EDEDF1', // 水平线颜色
color: getVisualThemeColor('splitLineColor'), // 水平线颜色
width: 1, // 水平线宽度
type: 'dashed', // 水平线线型，可选 'solid'、'dashed'、'dotted'
},
@ -227,8 +239,8 @@ export function getCommonBarOptions(
style: {
text: '',
fontSize: 14,
fill: '#959598',
backgroundColor: '#F9F9FE',
fill: getVisualThemeColor('graphicFillColor'),
backgroundColor: getVisualThemeColor('graphicBackgroundColor'),
padding: [6, 16, 6, 16],
borderRadius: 4,
},
@ -246,15 +258,16 @@ export function getCommonBarOptions(
left: 'center',
pageButtonItemGap: 5,
pageButtonGap: 5,
pageIconColor: '#00000099',
pageIconInactiveColor: '#00000042',
pageIconColor: getVisualThemeColor('pageIconColor'),
pageIconInactiveColor: getVisualThemeColor('pageIconInactiveColor'),
pageIconSize: [10, 8],
pageTextStyle: {
color: '#00000099',
color: getVisualThemeColor('pageTextStyleColor'),
fontSize: 12,
},
textStyle: {
width: 150,
color: getVisualThemeColor('legendColor'),
overflow: 'truncate',
ellipsis: '...',
},
@ -338,7 +351,7 @@ export function getPieCharOptions() {
subtext: '100111',
subtextStyle: {
fontSize: 20,
color: '#323233',
color: getVisualThemeColor('subtextStyleColor'),
fontWeight: 'bold',
align: 'center',
},
@ -415,7 +428,8 @@ export function handlePieData(
const pieBorderWidth = hasDataLength === 1 ? 0 : 2;
const lastData = lastStatusPercentList
.map((item, color) => ({
.map((item, color) => {
return {
name: item.status,
value: item.count,
tooltip: {
@ -424,14 +438,32 @@ export function handlePieData(
show: !!hasPermission,
},
itemStyle: {
color: colorMapConfig[key][color],
color:
colorMapConfig[key][color] === 'initItemStyleColor'
? getVisualThemeColor('initItemStyleColor')
: colorMapConfig[key][color],
borderWidth: pieBorderWidth,
borderColor: '#ffffff',
borderColor: getVisualThemeColor('itemStyleBorderColor'),
},
}))
};
})
.filter((e) => e.value !== 0);
options.series.data = hasDataLength > 0 ? lastData : [];
options.series.data =
hasDataLength > 0
? lastData
: [
{
name: '',
value: 1,
tooltip: {
show: false,
},
itemStyle: {
color: getVisualThemeColor('initItemStyleColor'),
},
},
];
// 计算总数和图例格式
const tempObject: Record<string, any> = {};
@ -445,7 +477,18 @@ export function handlePieData(
options.title.subtext = addCommasToNumber(totalCount);
if (!hasPermission) {
options.title.subtext = '-';
options.series.data = [];
options.series.data = [
{
name: '',
value: 1,
tooltip: {
show: false,
},
itemStyle: {
color: getVisualThemeColor('initItemStyleColor'),
},
},
];
}
return options;
@ -600,6 +643,18 @@ export function handleUpdateTabPie(
const valueKey = key.split('-')[1];
const countList = list || [];
let lastCountList: { value: number | string; label: string; name: string }[] = [];
const defaultValueMapConfig = defaultValueMap();
const emptyData = {
name: '',
value: 1,
tooltip: {
show: false,
},
itemStyle: {
color: getVisualThemeColor('initItemStyleColor'),
},
};
if (hasPermission) {
const pieBorderWidth = countList.slice(1).filter((e) => Number(e.count) > 0).length === 1 ? 0 : 1;
@ -609,26 +664,29 @@ export function handleUpdateTabPie(
label: item.name,
name: item.name,
itemStyle: {
color: defaultValueMap[typeKey][valueKey].color[i],
color: defaultValueMapConfig[typeKey][valueKey].color[i],
borderWidth: pieBorderWidth,
borderColor: '#ffffff',
borderColor: getVisualThemeColor('itemStyleBorderColor'),
},
};
});
options.series.data = lastCountList.every((e) => e.value === 0) ? [] : lastCountList.filter((e) => e.value !== 0);
options.series.data = lastCountList.every((e) => e.value === 0)
? [emptyData]
: lastCountList.filter((e) => e.value !== 0);
options.title.text = countList[0].name ?? '';
options.title.subtext = `${countList[0].count ?? 0}%`;
} else {
options.series.data = [];
lastCountList = defaultValueMap[typeKey][valueKey].defaultList.map((e: any) => {
options.series.data = [emptyData];
lastCountList = defaultValueMapConfig[typeKey][valueKey].defaultList.map((e: any) => {
return {
...e,
label: t(e.label),
};
});
options.title.text = t(defaultValueMap[typeKey][valueKey].defaultName);
options.title.text = t(defaultValueMapConfig[typeKey][valueKey].defaultName);
options.title.subtext = '-%';
}
@ -700,12 +758,12 @@ export function getSeriesData(
enterable: true,
formatter(params: any) {
const html = `
<div class="w-[186px] h-[50px] p-[16px] flex items-center justify-between">
<div class="w-[186px] h-[50px] p-[16px] flex items-center justify-between bg-[var(--color-text-fff)]">
<div class=" flex items-center">
<div class="mb-[2px] mr-[8px] h-[8px] w-[8px] rounded-sm bg-[${params.color}]" style="background:${
params.color
}"></div>
<div class="one-line-text max-w-[100px]"" style="color:#959598">${params.name}</div>
<div class="one-line-text max-w-[100px] text-[var(--color-text-2)]">${params.name}</div>
</div>
<div class="text-[var(--color-text-1)] font-semibold">${addCommasToNumber(params.value)}</div>
</div>
@ -778,7 +836,7 @@ export function createCustomTooltip(chartDom: InstanceType<typeof VCharts>) {
customTooltip.style.maxWidth = '300px';
customTooltip.style.padding = '5px';
customTooltip.style.background = 'rgba(0, 0, 0, 0.75)';
customTooltip.style.background = 'var(--color-text-2)';
customTooltip.style.color = 'var(--color-text-fff)';
customTooltip.style.borderRadius = '4px';