SunlightLargeDonutChartCard
轻量级 large 环形图卡片组件，用于展示带环形图的数据统计信息。
基本用法
完成率
0
+12% 较上月
20232022
转化率
0
+8% 较上月
20232022
覆盖率
0
-3% 较上月
20232022
vue
<template>
<div class="demo-container">
<el-row :gutter="20">
<el-col :xs="24" :sm="24" :md="8">
<SunlightLargeDonutChartCard
:count="75"
title="完成率"
:changeRate="12"
change-rate-label="较上月"
current-year="2023"
previous-year="2022"
:chart-data="donutChartCardData1"
card-height="200px"
chart-color="#409eff"
/>
</el-col>
<el-col :xs="24" :sm="24" :md="8">
<SunlightLargeDonutChartCard
:count="60"
title="转化率"
:changeRate="8"
change-rate-label="较上月"
current-year="2023"
previous-year="2022"
:chart-data="donutChartCardData2"
card-height="200px"
chart-color="#67c23a"
:chart-radius="['60%', '80%']"
time-range="2023-10-01"
/>
</el-col>
<el-col :xs="24" :sm="24" :md="8">
<SunlightLargeDonutChartCard
:count="45"
title="覆盖率"
:changeRate="-3"
change-rate-label="较上月"
current-year="2023"
previous-year="2022"
:chart-data="donutChartCardData3"
card-height="200px"
chart-color="#f56c6c"
:chart-radius="['50%', '70%']"
/>
</el-col>
</el-row>
</div>
</template>
<script setup>
import { SunlightLargeDonutChartCard } from 'sunlight-ui';
import { ref } from 'vue';
const donutChartCardData1 = ref([75, 25]);
const donutChartCardData2 = ref([60, 40]);
const donutChartCardData3 = ref([45, 55]);
</script>
<style scoped>
.demo-container {
padding: 20px;
background-color: #F6F8FC;
border-radius: 8px;
margin-bottom: 20px;
}
</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
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
隐藏源代码
自定义样式
用户留存率
0
+15% 较上月
20232022
用户活跃度
0
+23% 较上月
20232022
系统可用性
0
+2% 较上月
20232022
错误率
0
-5% 较上月
20232022
vue
<template>
<div class="demo-container">
<el-row :gutter="20">
<el-col :xs="24" :sm="12" :md="12" style="margin-bottom: 20px;">
<SunlightLargeDonutChartCard
:count="85"
title="用户留存率"
:changeRate="15"
change-rate-label="较上月"
current-year="2023"
previous-year="2022"
:chart-data="donutChartCardData4"
card-height="250px"
chart-color="#909399"
/>
</el-col>
<el-col :xs="24" :sm="12" :md="12" style="margin-bottom: 20px;">
<SunlightLargeDonutChartCard
:count="58"
title="用户活跃度"
:changeRate="23"
change-rate-label="较上月"
current-year="2023"
previous-year="2022"
:chart-data="donutChartCardData5"
card-height="250px"
chart-color="#E6A23C"
:chart-radius="['65%', '85%']"
/>
</el-col>
<el-col :xs="24" :sm="12" :md="12" style="margin-bottom: 20px;">
<SunlightLargeDonutChartCard
:count="92"
title="系统可用性"
:changeRate="2"
change-rate-label="较上月"
current-year="2023"
previous-year="2022"
:chart-data="donutChartCardData6"
card-height="250px"
chart-color="#409eff"
:chart-radius="['75%', '95%']"
time-range="2023-10"
/>
</el-col>
<el-col :xs="24" :sm="12" :md="12" style="margin-bottom: 20px;">
<SunlightLargeDonutChartCard
:count="35"
title="错误率"
:changeRate="-5"
change-rate-label="较上月"
current-year="2023"
previous-year="2022"
:chart-data="donutChartCardData7"
card-height="250px"
chart-color="#f56c6c"
:chart-radius="['40%', '60%']"
/>
</el-col>
</el-row>
</div>
</template>
<script setup>
import { SunlightLargeDonutChartCard } from 'sunlight-ui';
import { ref } from 'vue';
const donutChartCardData4 = ref([85, 15]);
const donutChartCardData5 = ref([58, 42]);
const donutChartCardData6 = ref([92, 8]);
const donutChartCardData7 = ref([35, 65]);
</script>
<style scoped>
.demo-container {
padding: 20px;
background-color: #F6F8FC;
border-radius: 8px;
margin-bottom: 20px;
}
</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
79
80
81
82
83
84
85
86
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
79
80
81
82
83
84
85
86
隐藏源代码
组件属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
count | number | 0 | 统计数值 |
title | string | '' | 卡片标题 |
changeRate | number | 0 | 变化率 |
changeRateLabel | string | '' | 变化率标签 |
currentYear | string | '' | 当前年份 |
previousYear | string | '' | 去年年份 |
timeRange | string | '' | 时间范围 |
cardHeight | string | number | 11 | 卡片高度 |
chartColor | string | '' | 图表颜色 |
chartRadius | [string, string] | ['70%', '90%'] | 环形图半径 |
chartData | [number, number] | [0, 0] | 图表数据 |
组件说明
SunlightLargeDonutChartCard 是一个轻量级的 large 环形图卡片组件，用于展示带环形图的数据统计信息。它支持自定义统计数值、标题、变化率、变化率标签、当前年份、去年年份、时间范围、卡片高度、图表颜色、环形图半径和图表数据等内容，使数据展示更加直观和生动。