modify style

src/components/desktop/RadarChart.vue

@@ -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

@@ -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'},
+                                                {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"
                                             name-field="name"
                                             value-field="value"
-                                            color-field="color"
                                             v-if="initing"
                                         ></radar-chart>
                                         <radar-chart