SunlightRadarChart
雷达图组件，用于展示多维度数据的对比分析，适用于评估、评级等场景。
基本用法
基础雷达图
基础雷达图
vue
<template>
<div class="demo-container">
<el-row :gutter="20">
<el-col :xs="24" :sm="12" :md="24">
<div style="background-color: #ffffff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);">
<h4 style="margin-bottom: 15px; color: #666; font-size: 16px;">基础雷达图</h4>
<SunlightRadarChart
:indicator="radarIndicator"
:data="basicRadarData"
height="300px"
/>
</div>
</el-col>
</el-row>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { SunlightRadarChart } from 'sunlight-ui';
const radarIndicator = ref([
{ name: '销售', max: 100 },
{ name: '市场', max: 100 },
{ name: '研发', max: 100 },
{ name: '客服', max: 100 },
{ name: '财务', max: 100 },
{ name: '人事', max: 100 }
]);
const basicRadarData = ref([
{
name: '公司A',
value: [80, 70, 90, 60, 85, 75]
}
]);
</script>
<style scoped>
.demo-container {
padding: 20px;
background-color: #f5f7fa;
border-radius: 8px;
}
</style>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
隐藏源代码
带图例的雷达图
带图例的雷达图
vue
<template>
<div class="demo-container">
<el-row :gutter="20">
<el-col :xs="24" :sm="12" :md="24">
<div style="background-color: #ffffff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);">
<h4 style="margin-bottom: 15px; color: #666; font-size: 16px;">带图例的雷达图</h4>
<SunlightRadarChart
:indicator="radarIndicator"
:data="multiRadarData"
height="300px"
:show-legend="true"
:colors="['#409EFF', '#67C23A', '#E6A23C']"
/>
</div>
</el-col>
</el-row>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { SunlightRadarChart } from 'sunlight-ui';
const radarIndicator = ref([
{ name: '销售', max: 100 },
{ name: '市场', max: 100 },
{ name: '研发', max: 100 },
{ name: '客服', max: 100 },
{ name: '财务', max: 100 },
{ name: '人事', max: 100 }
]);
const multiRadarData = ref([
{
name: '公司A',
value: [80, 70, 90, 60, 85, 75]
},
{
name: '公司B',
value: [70, 80, 60, 90, 75, 85]
},
{
name: '公司C',
value: [90, 60, 80, 70, 65, 90]
}
]);
</script>
<style scoped>
.demo-container {
padding: 20px;
background-color: #f5f7fa;
border-radius: 8px;
}
</style>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
隐藏源代码
自定义样式的雷达图
自定义样式的雷达图
vue
<template>
<div class="demo-container">
<el-row :gutter="20">
<el-col :xs="24" :sm="24" :md="24">
<div style="background-color: #ffffff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);">
<h4 style="margin-bottom: 15px; color: #666; font-size: 16px;">自定义样式的雷达图</h4>
<SunlightRadarChart
:indicator="radarIndicator"
:data="customRadarData"
height="300px"
:show-legend="true"
:colors="['#9C27B0', '#FF5722', '#00BCD4']"
/>
</div>
</el-col>
</el-row>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { SunlightRadarChart } from 'sunlight-ui';
const radarIndicator = ref([
{ name: '销售', max: 100 },
{ name: '市场', max: 100 },
{ name: '研发', max: 100 },
{ name: '客服', max: 100 },
{ name: '财务', max: 100 },
{ name: '人事', max: 100 }
]);
const customRadarData = ref([
{
name: '公司A',
value: [80, 70, 90, 60, 85, 75],
symbolSize: 6,
lineStyle: {
width: 3
},
areaStyle: {
opacity: 0.2
}
},
{
name: '公司B',
value: [70, 80, 60, 90, 75, 85],
symbolSize: 6,
lineStyle: {
width: 3
},
areaStyle: {
opacity: 0.2
}
},
{
name: '公司C',
value: [90, 60, 80, 70, 65, 90],
symbolSize: 6,
lineStyle: {
width: 3
},
areaStyle: {
opacity: 0.2
}
}
]);
</script>
<style scoped>
.demo-container {
padding: 20px;
background-color: #f5f7fa;
border-radius: 8px;
}
</style>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
隐藏源代码
雷达图特殊样式
自定义样式的雷达图
vue
<template>
<div class="demo-container">
<el-row :gutter="20">
<el-col :xs="24" :sm="12" :md="24">
<div style="background-color: #ffffff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);">
<h4 style="margin-bottom: 15px; color: #666; font-size: 16px;">自定义样式的雷达图</h4>
<SunlightRadarChart
:indicator="radarIndicator"
:data="customRadarData"
height="300px"
:show-legend="true"
:colors="['#9C27B0', '#FF5722', '#00BCD4']"
/>
</div>
</el-col>
</el-row>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { SunlightRadarChart } from 'sunlight-ui';
const radarIndicator = ref([
{ name: '销售', max: 100 },
{ name: '市场', max: 100 },
{ name: '研发', max: 100 },
{ name: '客服', max: 100 },
{ name: '财务', max: 100 },
{ name: '人事', max: 100 }
]);
const customRadarData = ref([
{
name: '公司A',
value: [80, 70, 90, 60, 85, 75],
symbolSize: 6,
lineStyle: {
width: 3
},
areaStyle: {
opacity: 0.2
}
},
{
name: '公司B',
value: [70, 80, 60, 90, 75, 85],
symbolSize: 6,
lineStyle: {
width: 3
},
areaStyle: {
opacity: 0.2
}
},
{
name: '公司C',
value: [90, 60, 80, 70, 65, 90],
symbolSize: 6,
lineStyle: {
width: 3
},
areaStyle: {
opacity: 0.2
}
}
]);
</script>
<style scoped>
.demo-container {
padding: 20px;
background-color: #f5f7fa;
border-radius: 8px;
}
</style>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
隐藏源代码
产品评估雷达图
产品评估雷达图
vue
<template>
<div class="demo-container">
<el-row :gutter="20">
<el-col :xs="24" :sm="12" :md="24">
<div style="background-color: #ffffff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);">
<h4 style="margin-bottom: 15px; color: #666; font-size: 16px;">产品评估雷达图</h4>
<SunlightRadarChart
:indicator="productIndicator"
:data="productRadarData"
height="300px"
:show-legend="true"
:colors="['#FF6B6B', '#4ECDC4']"
/>
</div>
</el-col>
</el-row>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { SunlightRadarChart } from 'sunlight-ui';
const productIndicator = ref([
{ name: '功能', max: 100 },
{ name: '性能', max: 100 },
{ name: '易用性', max: 100 },
{ name: '稳定性', max: 100 },
{ name: '美观度', max: 100 },
{ name: '性价比', max: 100 }
]);
const productRadarData = ref([
{
name: '产品X',
value: [85, 90, 80, 95, 85, 90]
},
{
name: '产品Y',
value: [75, 80, 90, 85, 95, 80]
}
]);
</script>
<style scoped>
.demo-container {
padding: 20px;
background-color: #f5f7fa;
border-radius: 8px;
}
</style>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
隐藏源代码
顶部图例雷达图
顶部图例雷达图
vue
<template>
<div class="demo-container">
<el-row :gutter="20">
<el-col :xs="24" :sm="12" :md="24">
<div style="background-color: #ffffff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);">
<h4 style="margin-bottom: 15px; color: #666; font-size: 16px;">顶部图例雷达图</h4>
<SunlightRadarChart
:indicator="radarIndicator"
:data="multiRadarData"
height="300px"
:show-legend="true"
legend-position="top"
:colors="['#3498DB', '#E74C3C', '#9B59B6']"
/>
</div>
</el-col>
</el-row>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { SunlightRadarChart } from 'sunlight-ui';
const radarIndicator = ref([
{ name: '销售', max: 100 },
{ name: '市场', max: 100 },
{ name: '研发', max: 100 },
{ name: '客服', max: 100 },
{ name: '财务', max: 100 },
{ name: '人事', max: 100 }
]);
const multiRadarData = ref([
{
name: '公司A',
value: [80, 70, 90, 60, 85, 75]
},
{
name: '公司B',
value: [70, 80, 60, 90, 75, 85]
},
{
name: '公司C',
value: [90, 60, 80, 70, 65, 90]
}
]);
</script>
<style scoped>
.demo-container {
padding: 20px;
background-color: #f5f7fa;
border-radius: 8px;
}
</style>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
隐藏源代码
精简指标雷达图
精简指标雷达图
vue
<template>
<div class="demo-container">
<el-row :gutter="20">
<el-col :xs="24" :sm="24" :md="24">
<div style="background-color: #ffffff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);">
<h4 style="margin-bottom: 15px; color: #666; font-size: 16px;">精简指标雷达图</h4>
<SunlightRadarChart
:indicator="simpleIndicator"
:data="simpleRadarData"
height="300px"
:show-legend="true"
:colors="['#2196F3', '#FF9800']"
/>
</div>
</el-col>
</el-row>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { SunlightRadarChart } from 'sunlight-ui';
// 精简指标雷达图数据
const simpleIndicator = ref([
{ name: '效率', max: 100 },
{ name: '质量', max: 100 },
{ name: '成本', max: 100 },
{ name: '创新', max: 100 }
]);
const simpleRadarData = ref([
{
name: '团队A',
value: [90, 85, 75, 95]
},
{
name: '团队B',
value: [80, 90, 95, 75]
}
]);
</script>
<style scoped>
.demo-container {
padding: 20px;
background-color: #f5f7fa;
border-radius: 8px;
}
</style>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
隐藏源代码
自定义title
vue
<template>
<div class="demo-container">
<el-row :gutter="20">
<el-col :xs="24" :sm="12" :md="24">
<div style="background-color: #ffffff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);">
<SunlightRadarChart
:indicator="radarIndicator"
:data="basicRadarData"
height="300px"
:show-title="true"
title="公司业绩评估"
title-position="center"
:title-style="{
fontSize: 18,
fontWeight: 'bold',
color: '#333'
}"
/>
</div>
</el-col>
</el-row>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { SunlightRadarChart } from 'sunlight-ui';
// 雷达图指标
const radarIndicator = ref([
{ name: '销售', max: 100 },
{ name: '市场', max: 100 },
{ name: '研发', max: 100 },
{ name: '客服', max: 100 },
{ name: '财务', max: 100 },
{ name: '人事', max: 100 }
]);
// 基础雷达图数据
const basicRadarData = ref([
{
name: '公司A',
value: [80, 70, 90, 60, 85, 75]
}
]);
</script>
<style scoped>
.demo-container {
padding: 20px;
background-color: #f5f7fa;
border-radius: 8px;
}
</style>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
隐藏源代码
组件属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
data | RadarData | 必填 | 雷达图数据 |
height | string | '350px' | 图表高度 |
showLegend | boolean | false | 是否显示图例 |
legendPosition | 'bottom' | 'top' | 'left' | 'right' | 'bottom' | 图例位置 |
showTooltip | boolean | true | 是否显示提示框 |
loading | boolean | false | 是否加载中 |
isEmpty | boolean | false | 是否为空数据 |
组件说明
SunlightRadarChart 是一个雷达图组件，用于展示多维度数据的对比分析，适用于评估、评级等场景。