mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-18 16:54:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

modify style

Browse Source
This commit is contained in:
MaysWind
2025-10-26 15:08:48 +08:00
parent 0c75ed47ac
commit c854dbaab4
2 changed files with 71 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/desktop/RadarChart.vue
+65 -34
View File
@@ -55,48 +55,59 @@ const radarData = computed<RadarChartData>(() => {
const values: number[] = []; const values: number[] = [];
let tooltip = ''; let tooltip = '';
for (const item of props.items) { if (props.items.length) {
const value = item[props.valueField]; for (const item of props.items) {
const value = item[props.valueField];
if (isNumber(value) && value > 0 && (!props.hiddenField || !item[props.hiddenField])) { if (isNumber(value) && value > 0 && (!props.hiddenField || !item[props.hiddenField])) {
totalValidValue += value; totalValidValue += value;
if (value > maxValue) { if (value > maxValue) {
maxValue = value; maxValue = value;
}
} }
} }
}
for (const item of props.items) { for (const item of props.items) {
const value = item[props.valueField]; const value = item[props.valueField];
const percent = props.percentField ? item[props.percentField] : -1; const percent = props.percentField ? item[props.percentField] : -1;
if (isNumber(value) && value > 0 && if (isNumber(value) && value > 0 &&
(!props.hiddenField || !item[props.hiddenField]) && (!props.hiddenField || !item[props.hiddenField]) &&
(!props.minValidPercent || value / totalValidValue > props.minValidPercent)) { (!props.minValidPercent || value / totalValidValue > props.minValidPercent)) {
const name = item[props.nameField] as string; const name = item[props.nameField] as string;
const color = getDisplayColor((props.colorField && item[props.colorField]) ? item[props.colorField] as ColorValue : DEFAULT_CHART_COLORS[indicators.length % DEFAULT_CHART_COLORS.length]); const color = getDisplayColor((props.colorField && item[props.colorField]) ? item[props.colorField] as ColorValue : DEFAULT_CHART_COLORS[indicators.length % DEFAULT_CHART_COLORS.length]);
const finalPercent = (isNumber(percent) && percent >= 0) ? percent : (value / totalValidValue * 100); const finalPercent = (isNumber(percent) && percent >= 0) ? percent : (value / totalValidValue * 100);
const displayPercent = formatPercentToLocalizedNumerals(finalPercent, 2, '&lt;0.01'); const displayPercent = formatPercentToLocalizedNumerals(finalPercent, 2, '&lt;0.01');
const displayValue = formatAmountToLocalizedNumeralsWithCurrency(value, props.defaultCurrency); const displayValue = formatAmountToLocalizedNumeralsWithCurrency(value, props.defaultCurrency);
indicators.push({
name: name,
max: maxValue,
color: isDarkMode.value ? '#ccc' : '#333'
});
values.push(value);
tooltip += '<div><span class="chart-pointer" style="background-color: ' + color + '"></span>';
tooltip += `<span>${name}</span>`;
if (props.showValue) {
tooltip += `<span class="ms-1" style="float: inline-end">(${displayPercent})</span><span class="ms-5" style="float: inline-end">${displayValue}</span>`;
} else {
tooltip += `<span class="ms-5" style="float: inline-end">${displayPercent}</span>`;
}
tooltip += '</div>';
}
}
} else {
for (let i = 0; i < 6; i++) {
indicators.push({ indicators.push({
name: name, name: '',
max: maxValue, max: 0,
color: isDarkMode.value ? '#ccc' : '#333' color: isDarkMode.value ? '#ccc' : '#333'
}); });
values.push(0);
values.push(value);
tooltip += '<div><span class="chart-pointer" style="background-color: ' + color + '"></span>';
tooltip += `<span>${name}</span>`;
if (props.showValue) {
tooltip += `<span class="ms-1" style="float: inline-end">(${displayPercent})</span><span class="ms-5" style="float: inline-end">${displayValue}</span>`;
} else {
tooltip += `<span class="ms-5" style="float: inline-end">${displayPercent}</span>`;
}
tooltip += '</div>';
} }
} }
@@ -124,14 +135,34 @@ const chartOptions = computed<object>(() => {
}, },
radar: { radar: {
radius: '75%', radius: '75%',
splitNumber: (!props.skeleton && props.items.length) ? 5 : 1,
splitLine: {
lineStyle: {
color: (!props.skeleton && props.items.length) ? '#e8e8e7' : '#d3d3d3'
}
},
splitArea: {
areaStyle: {
color: (!props.skeleton && props.items.length) ? (isDarkMode.value ? ['#363534', '#1a1a1a'] : ['#faf8f4', '#fff']) : ['#d3d3d3', '#d3d3d3']
}
},
indicator: radarData.value.indicators indicator: radarData.value.indicators
}, },
series: [ series: (!props.skeleton && props.items.length) ? [
{ {
type: 'radar', type: 'radar',
data: [ data: [
{ {
value: radarData.value.values value: radarData.value.values,
itemStyle: {
color: '#c07d43'
},
lineStyle: {
color: '#c07d43'
},
areaStyle: {
color: isDarkMode.value ? '#c07d4380' : '#c07d4340'
}
} }
], ],
top: 0, top: 0,
@@ -144,7 +175,7 @@ const chartOptions = computed<object>(() => {
}, },
animation: !props.skeleton animation: !props.skeleton
} }
] ] : []
}; };
}); });
</script> </script>
src/views/desktop/statistics/TransactionPage.vue
+6 -4
View File
@@ -266,14 +266,16 @@
<v-card-text :class="{ 'readonly': loading }" v-if="queryAnalysisType === StatisticsAnalysisType.CategoricalAnalysis && query.categoricalChartType === CategoricalChartType.Radar.type"> <v-card-text :class="{ 'readonly': loading }" v-if="queryAnalysisType === StatisticsAnalysisType.CategoricalAnalysis && query.categoricalChartType === CategoricalChartType.Radar.type">
<radar-chart <radar-chart
:items="[ :items="[
{id: '1', name: '---', value: 60, color: '7c7c7f'}, {name: '---', value: 10},
{id: '2', name: '---', value: 20, color: 'a5a5aa'}, {name: '---', value: 10},
{id: '3', name: '---', value: 20, color: 'c5c5c9'} {name: '---', value: 10},
{name: '---', value: 10},
{name: '---', value: 10},
{name: '---', value: 10}
]" ]"
:skeleton="true" :skeleton="true"
name-field="name" name-field="name"
value-field="value" value-field="value"
color-field="color"
v-if="initing" v-if="initing"
></radar-chart> ></radar-chart>
<radar-chart <radar-chart