diff --git a/src/packages/components/Charts/Mores/Radar/config.ts b/src/packages/components/Charts/Mores/Radar/config.ts index 7dc5e880..46f48289 100644 --- a/src/packages/components/Charts/Mores/Radar/config.ts +++ b/src/packages/components/Charts/Mores/Radar/config.ts @@ -22,6 +22,8 @@ export const option = { dataset: { ...dataJson }, radar: { shape: 'polygon', + radius: ['0%', '60%'], + center: ['50%', '55%'], splitArea: { show: true }, splitLine: { show: true }, axisName: { show: true, color: '#eee', fontSize: 12 }, @@ -31,7 +33,7 @@ export const option = { }, series: [ { - name: 'Budget vs spending', + name: 'radar', type: 'radar', areaStyle: { opacity: 0.1 diff --git a/src/packages/components/Charts/Mores/Radar/config.vue b/src/packages/components/Charts/Mores/Radar/config.vue index 1db8a6be..156d3a0f 100644 --- a/src/packages/components/Charts/Mores/Radar/config.vue +++ b/src/packages/components/Charts/Mores/Radar/config.vue @@ -2,6 +2,7 @@
+ @@ -11,9 +12,65 @@ 分割线 - + + + + + 轴线 + + + 刻度 + + + + + + + + + + + + + + + + + + + + + + + + + @@ -25,14 +82,7 @@ 文字标签 - - - 轴线 - - - 刻度 - - + diff --git a/src/packages/components/Charts/Mores/Radar/data.json b/src/packages/components/Charts/Mores/Radar/data.json index 612a97fc..74574954 100644 --- a/src/packages/components/Charts/Mores/Radar/data.json +++ b/src/packages/components/Charts/Mores/Radar/data.json @@ -1,20 +1,20 @@ { "radarIndicator": [ - { "name": "Sales", "max": 6500 }, - { "name": "Administration", "max": 16000 }, - { "name": "Information Technology", "max": 30000 }, - { "name": "Customer Support", "max": 38000 }, - { "name": "Development", "max": 52000 }, - { "name": "Marketing", "max": 25000 } + { "name": "数据1", "max": 6500 }, + { "name": "数据2", "max": 16000 }, + { "name": "数据3", "max": 30000 }, + { "name": "数据4", "max": 38000 }, + { "name": "数据5", "max": 52000 }, + { "name": "数据6", "max": 25000 } ], "seriesData": [ { "value": [4200, 3000, 20000, 35000, 50000, 18000], - "name": "Allocated Budget" + "name": "data1" }, { "value": [5000, 14000, 28000, 26000, 42000, 21000], - "name": "Actual Spending" + "name": "data2" } ] } diff --git a/src/packages/components/Charts/Mores/Radar/index.vue b/src/packages/components/Charts/Mores/Radar/index.vue index 912d27e6..d39e0fed 100644 --- a/src/packages/components/Charts/Mores/Radar/index.vue +++ b/src/packages/components/Charts/Mores/Radar/index.vue @@ -38,9 +38,15 @@ const option = computed(() => { }) const dataSetHandle = (dataset: any) => { - props.chartConfig.option.legend.data = dataset.seriesData.map(i => i.name) - props.chartConfig.option.radar.indicator = dataset.radarIndicator - props.chartConfig.option.series[0].data = dataset.seriesData + if (props.chartConfig.option.legend && dataset.seriesData) { + props.chartConfig.option.legend.data = dataset.seriesData.map((i: { name: string }) => i.name) + } + if (dataset.radarIndicator) { + props.chartConfig.option.radar.indicator = dataset.radarIndicator + } + if (dataset.seriesData) { + props.chartConfig.option.series[0].data = dataset.seriesData + } } watch( diff --git a/src/settings/chartThemes/global.theme.json b/src/settings/chartThemes/global.theme.json index d7b2a61f..44245e3e 100644 --- a/src/settings/chartThemes/global.theme.json +++ b/src/settings/chartThemes/global.theme.json @@ -86,6 +86,7 @@ "top": "5%", "textStyle": { "color": "#B9B8CE" - } + }, + "data": [] } } \ No newline at end of file