SunlightDonutChartCard
轻量级环形图卡片组件，用于展示带环形图的数据统计信息。
基本用法
完成率
0
+5% 较上月
20232022
转化率
0
-5% 较上月
20232022
覆盖率
0
+8% 较上月
20232022
vue
<template>
<div class="demo-container">
<el-row :gutter="20">
<el-col :xs="24" :sm="12" :md="8" style="margin-bottom: 20px;">
<SunlightDonutChartCard
:count="85"
title="完成率"
:changeRate="5"
change-rate-label="较上月"
current-year="2023"
previous-year="2022"
:chart-data="donutChartCardData1"
card-height="200px"
/>
</el-col>
<el-col :xs="24" :sm="12" :md="8" style="margin-bottom: 20px;">
<SunlightDonutChartCard
:count="60"
title="转化率"
:change-rate="-5"
change-rate-label="较上月"
current-year="2023"
previous-year="2022"
:chart-data="donutChartCardData2"
card-height="200px"
chart-color="#67c23a"
/>
</el-col>
<el-col :xs="24" :sm="12" :md="8" style="margin-bottom: 20px;">
<SunlightDonutChartCard
:count="45"
title="覆盖率"
:change-rate="8"
change-rate-label="较上月"
current-year="2023"
previous-year="2022"
:chart-data="donutChartCardData3"
card-height="200px"
chart-color="#f56c6c"
:chart-radius="['60%', '80%']"
/>
</el-col>
</el-row>
</div>
</template>
<script setup>
import { SunlightDonutChartCard } from 'sunlight-ui';
import { ref } from 'vue';
const donutChartCardData1 = ref([85, 15]);
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
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
隐藏源代码
自定义样式
市场份额
0
+12% 较去年
20232022
参与率
0
-3% 较上月
20232022
满意度
0
+8% 较去年
20232022
vue
<template>
<div class="demo-container">
<el-row :gutter="20">
<el-col :xs="24" :sm="12" :md="8" style="margin-bottom: 20px;">
<SunlightDonutChartCard
:count="75"
title="市场份额"
:changeRate="12"
change-rate-label="较去年"
current-year="2023"
previous-year="2022"
:chart-data="donutChartCardData4"
card-height="200px"
chart-color="#409EFF"
/>
</el-col>
<el-col :xs="24" :sm="12" :md="8" style="margin-bottom: 20px;">
<SunlightDonutChartCard
:count="35"
title="参与率"
:changeRate="-3"
change-rate-label="较上月"
current-year="2023"
previous-year="2022"
:chart-data="donutChartCardData5"
card-height="200px"
chart-color="#E6A23C"
:chart-radius="['50%', '70%']"
/>
</el-col>
<!-- 紫色环形图卡片 -->
<el-col :xs="24" :sm="12" :md="8" style="margin-bottom: 20px;">
<SunlightDonutChartCard
:count="90"
title="满意度"
:changeRate="8"
change-rate-label="较去年"
current-year="2023"
previous-year="2022"
:chart-data="donutChartCardData6"
card-height="200px"
chart-color="#909399"
:chart-radius="['65%', '85%']"
/>
</el-col>
</el-row>
</div>
</template>
<script setup>
import { SunlightDonutChartCard } from 'sunlight-ui';
import { ref } from 'vue';
const donutChartCardData4 = ref([75, 25]);
const donutChartCardData5 = ref([35, 65]);
const donutChartCardData6 = ref([90, 10]);
</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
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
隐藏源代码
组件属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
count | number | 0 | 统计数值 |
title | string | '' | 卡片标题 |
changeRate | number | 0 | 变化率 |
changeRateLabel | string | '' | 变化率标签 |
currentYear | string | '' | 当前年份 |
previousYear | string | '' | 去年年份 |
cardHeight | string | number | 9 | 卡片高度 |
chartColor | string | '' | 图表颜色 |
chartRadius | [string, string] | ["70%", "90%"] | 环形图半径 |
chartData | [number, number] | [0, 0] | 环形图数据 |
组件说明
SunlightDonutChartCard 是一个轻量级的环形图卡片组件，用于展示带环形图的数据统计信息。它支持自定义统计数值、标题、变化率、变化率标签、当前年份、去年年份、卡片高度、图表颜色、环形图半径和环形图数据等内容，使数据展示更加直观和生动。