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