SunlightBarChartCard
轻量级柱状图卡片组件，用于展示带柱状图的数据统计信息。
基本用法
0
总销售额
+12%
0
总订单量
+8%
0
用户活跃度
+23%
0
页面访问量
+15%
2023-10
vue
<template>
<div class="demo-container">
<el-row :gutter="20">
<!-- 基础柱状图卡片 -->
<el-col :xs="24" :sm="12" :md="12" style="margin-bottom: 20px;">
<SunlightBarChartCard
:count="1250"
title="总销售额"
:changeRate="12"
:dataList="barChartCardData1"
card-height="150px"
chart-color="#409eff"
chart-width="80%"
chart-height="80px"
/>
</el-col>
<!-- 自定义颜色的柱状图卡片 -->
<el-col :xs="24" :sm="12" :md="12" style="margin-bottom: 20px;">
<SunlightBarChartCard
:count="850"
title="总订单量"
:changeRate="8"
:dataList="barChartCardData2"
card-height="150px"
chart-color="#67c23a"
bar-width="30%"
/>
</el-col>
</el-row>
<el-row :gutter="20" style="margin-top: 20px;">
<!-- 自定义圆角的柱状图卡片 -->
<el-col :xs="24" :sm="12" :md="12" style="margin-bottom: 20px;">
<SunlightBarChartCard
:count="620"
title="用户活跃度"
:changeRate="23"
:dataList="barChartCardData3"
card-height="150px"
chart-color="#E6A23C"
bar-width="35%"
:bar-radius="8"
/>
</el-col>
<!-- 更大圆角的柱状图卡片 -->
<el-col :xs="24" :sm="12" :md="12" style="margin-bottom: 20px;">
<SunlightBarChartCard
:count="980"
title="页面访问量"
:changeRate="15"
:dataList="barChartCardData4"
card-height="150px"
chart-color="#909399"
bar-width="30%"
:bar-radius="12"
time-range="2023-10"
/>
</el-col>
</el-row>
</div>
</template>
<script setup>
import { SunlightBarChartCard } from 'sunlight-ui';
import { ElRow, ElCol } from 'element-plus';
import { ref } from 'vue';
const barChartCardData1 = ref([120, 200, 150, 80, 70, 110, 130]);
const barChartCardData2 = ref([60, 90, 120, 80, 100, 70, 90]);
const barChartCardData3 = ref([80, 120, 150, 100, 90, 130, 160]);
const barChartCardData4 = ref([100, 140, 180, 120, 110, 150, 190]);
</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
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
隐藏源代码
自定义样式
自定义样式柱状图卡片
0
用户注册量
+15%
0
活跃用户数
+5%
0
页面访问量
+9%
vue
<template>
<div class="demo-container">
<h2 style="margin: 40px 0 20px 0; color: #333;">自定义样式柱状图卡片</h2>
<el-row :gutter="20">
<el-col :xs="24" :sm="12" :md="12" style="margin-bottom: 20px;">
<SunlightBarChartCard
:count="580"
title="用户注册量"
:changeRate="15"
:dataList="barChartCardData3"
card-height="150px"
chart-color="#F56C6C"
bar-width="45%"
/>
</el-col>
<el-col :xs="24" :sm="12" :md="12" style="margin-bottom: 20px;">
<SunlightBarChartCard
:count="320"
title="活跃用户数"
:changeRate="5"
:dataList="barChartCardData4"
card-height="150px"
chart-color="#E6A23C"
bar-width="55%"
/>
</el-col>
<el-col :xs="24" :sm="12" :md="12" style="margin-bottom: 20px;">
<SunlightBarChartCard
:count="750"
title="页面访问量"
:changeRate="9"
:dataList="barChartCardData5"
card-height="150px"
chart-color="#909399"
bar-width="60%"
/>
</el-col>
</el-row>
</div>
</template>
<script setup>
import { SunlightBarChartCard } from 'sunlight-ui';
import { ElRow, ElCol } from 'element-plus';
import { ref } from 'vue';
const barChartCardData3 = ref([80, 120, 150, 100, 90, 130, 160]);
const barChartCardData4 = ref([40, 60, 80, 70, 90, 80, 100]);
const barChartCardData5 = ref([100, 140, 180, 120, 110, 150, 190]);
</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
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
隐藏源代码
组件属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
count | number | 0 | 统计数值 |
title | string | '' | 卡片标题 |
changeRate | number | 0 | 变化率 |
timeRange | string | '' | 时间范围 |
cardHeight | string | number | 11 | 卡片高度 |
chartColor | string | '' | 图表颜色 |
dataList | number[] | [] | 柱状图数据列表 |
barWidth | string | '26%' | 柱状图宽度 |
barRadius | number | 2 | 柱状图圆角 |
chartWidth | string | number | 200 | 图表容器宽度 |
chartHeight | string | number | 60 | 图表容器高度 |
组件说明
SunlightBarChartCard 是一个轻量级的柱状图卡片组件，用于展示带柱状图的数据统计信息。它支持自定义统计数值、标题、变化率、时间范围、数据列表、卡片高度、图表颜色、柱状图宽度、柱状图圆角、图表容器宽度和图表容器高度等内容，使数据展示更加直观和生动。