mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-22 02:34:26 +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
+34 -3
View File
@@ -55,6 +55,7 @@ const radarData = computed<RadarChartData>(() => {
const values: number[] = [];
let tooltip = '';
if (props.items.length) {
for (const item of props.items) {
const value = item[props.valueField];
@@ -99,6 +100,16 @@ const radarData = computed<RadarChartData>(() => {
tooltip += '</div>';
}
}
} else {
for (let i = 0; i < 6; i++) {
indicators.push({
name: '',
max: 0,
color: isDarkMode.value ? '#ccc' : '#333'
});
values.push(0);
}
}
const ret: RadarChartData = {
totalValidValue: totalValidValue,
@@ -124,14 +135,34 @@ const chartOptions = computed<object>(() => {
},
radar: {
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
},
series: [
series: (!props.skeleton && props.items.length) ? [
{
type: 'radar',
data: [
{
value: radarData.value.values
value: radarData.value.values,
itemStyle: {
color: '#c07d43'
},
lineStyle: {
color: '#c07d43'
},
areaStyle: {
color: isDarkMode.value ? '#c07d4380' : '#c07d4340'
}
}
],
top: 0,
@@ -144,7 +175,7 @@ const chartOptions = computed<object>(() => {
},
animation: !props.skeleton
}
]
] : []
};
});
</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">
<radar-chart
:items="[
{id: '1', name: '---', value: 60, color: '7c7c7f'},
{id: '2', name: '---', value: 20, color: 'a5a5aa'},
{id: '3', name: '---', value: 20, color: 'c5c5c9'}
{name: '---', value: 10},
{name: '---', value: 10},
{name: '---', value: 10},
{name: '---', value: 10},
{name: '---', value: 10},
{name: '---', value: 10}
]"
:skeleton="true"
name-field="name"
value-field="value"
color-field="color"
v-if="initing"
></radar-chart>
<radar-chart