SunlightLineChartCard
轻量级折线图卡片组件，用于展示带折线图的数据统计信息。
基本用法
0
总销售额
+12%
0
总订单量
+8%
0
新客户数
-3%
2023-10-01
0
页面访问量
+5%
vue
<template>
<div class="demo-container">
<el-row :gutter="20">
<el-col :xs="24" :sm="12" :md="12" style="margin-bottom: 20px;">
<SunlightLineChartCard
:count="1250"
title="总销售额"
:changeRate="12"
:dataList="lineChartCardData1"
card-height="170px"
chart-color="#409eff"
chart-width="200px"
chart-height="50px"
/>
</el-col>
<el-col :xs="24" :sm="12" :md="12" style="margin-bottom: 20px;">
<SunlightLineChartCard
:count="850"
title="总订单量"
:changeRate="8"
:dataList="lineChartCardData2"
card-height="170px"
chart-color="#67c23a"
:enable-area-color="true"
/>
</el-col>
<el-col :xs="24" :sm="12" :md="12" style="margin-bottom: 20px;">
<SunlightLineChartCard
:count="320"
title="新客户数"
:changeRate="-3"
:dataList="lineChartCardData3"
card-height="170px"
chart-color="#f56c6c"
time-range="2023-10-01"
/>
</el-col>
<el-col :xs="24" :sm="12" :md="12" style="margin-bottom: 20px;">
<SunlightLineChartCard
:count="650"
title="页面访问量"
:changeRate="5"
:dataList="lineChartCardData4"
card-height="170px"
chart-color="#E6A23C"
:enable-area-color="true"
/>
</el-col>
</el-row>
</div>
</template>
<script setup>
import { SunlightLineChartCard } from 'sunlight-ui';
import { ref } from 'vue';
const lineChartCardData1 = ref([60, 90, 120, 80, 100, 70, 90]);
const lineChartCardData2 = ref([60, 90, 120, 80, 100, 70, 90]);
const lineChartCardData3 = ref([100, 80, 90, 110, 70, 60, 80]);
const lineChartCardData4 = ref([80, 120, 150, 100, 90, 130, 160]);
</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
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
隐藏源代码
自定义样式
自定义样式折线图卡片
0
用户注册量
+15%
0
活跃用户数
+5%
0
页面访问量
+9%
2023-10-01
0
转化率
+12%
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;">
<SunlightLineChartCard
:count="580"
title="用户注册量"
:changeRate="15"
:dataList="lineChartCardData4"
card-height="170px"
chart-color="#909399"
:enable-area-color="true"
/>
</el-col>
<el-col :xs="24" :sm="12" :md="12" style="margin-bottom: 20px;">
<SunlightLineChartCard
:count="320"
title="活跃用户数"
:changeRate="5"
:dataList="lineChartCardData5"
card-height="170px"
chart-color="#E6A23C"
/>
</el-col>
<el-col :xs="24" :sm="12" :md="12" style="margin-bottom: 20px;">
<SunlightLineChartCard
:count="750"
title="页面访问量"
:changeRate="9"
:dataList="lineChartCardData6"
card-height="170px"
chart-color="#67c23a"
:enable-area-color="true"
time-range="2023-10-01"
/>
</el-col>
<el-col :xs="24" :sm="12" :md="12" style="margin-bottom: 20px;">
<SunlightLineChartCard
:count="480"
title="转化率"
:changeRate="12"
:dataList="lineChartCardData7"
card-height="170px"
chart-color="#909399"
:enable-area-color="true"
/>
</el-col>
</el-row>
</div>
</template>
<script setup>
import { SunlightLineChartCard } from 'sunlight-ui';
import { ref } from 'vue';
const lineChartCardData4 = ref([80, 120, 150, 100, 90, 130, 160]);
const lineChartCardData5 = ref([40, 60, 80, 70, 90, 80, 100]);
const lineChartCardData6 = ref([100, 140, 180, 120, 110, 150, 190]);
const lineChartCardData7 = ref([60, 90, 70, 120, 100, 130, 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
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
隐藏源代码
组件属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
count | number | 0 | 统计数值 |
title | string | '' | 卡片标题 |
changeRate | number | 0 | 变化率 |
timeRange | string | '' | 时间范围 |
cardHeight | string | number | 11 | 卡片高度 |
chartColor | string | '' | 图表颜色 |
enableAreaColor | boolean | false | 是否显示区域颜色 |
dataList | number[] | [] | 图表数据 |
chartWidth | string | number | 200 | 图表容器宽度 |
chartHeight | string | number | 60 | 图表容器高度 |
组件说明
SunlightLineChartCard 是一个轻量级的折线图卡片组件，用于展示带折线图的数据统计信息。它支持自定义统计数值、标题、变化率、时间范围、卡片高度、图表颜色、是否显示区域颜色、图表数据、图表容器宽度和图表容器高度等内容，使数据展示更加直观和生动。