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