SunlightKLineChart
K线图组件，支持多组数据的K线展示，适用于展示股票、期货等金融数据的走势。
基本用法
基础 K线图
基础 K线图
vue
<template>
<div style="background-color: #ffffff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);">
<h3 style="margin-bottom: 20px; color: #666; font-size: 18px;">基础 K线图</h3>
<SunlightKLineChart
:data="basicKLineData"
height="300px"
/>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { SunlightKLineChart } from 'sunlight-ui';
const basicKLineData = ref([
{ time: '09:00', open: 100, close: 105, low: 98, high: 106 },
{ time: '10:00', open: 105, close: 110, low: 103, high: 112 },
{ time: '11:00', open: 110, close: 108, low: 107, high: 111 },
{ time: '14:00', open: 108, close: 115, low: 106, high: 116 },
{ time: '15:00', open: 115, close: 120, low: 114, high: 122 },
{ time: '16:00', open: 120, close: 118, low: 117, high: 121 },
{ time: '17:00', open: 118, close: 125, low: 116, high: 126 }
]);
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
隐藏源代码
带数据缩放的 K线图
带数据缩放的 K线图
vue
<template>
<div style="background-color: #ffffff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);">
<h3 style="margin-bottom: 20px; color: #666; font-size: 18px;">带数据缩放的 K线图</h3>
<SunlightKLineChart
:data="basicKLineData"
height="300px"
:showDataZoom="true"
/>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { SunlightKLineChart } from 'sunlight-ui';
const basicKLineData = ref([
{ time: '09:00', open: 100, close: 105, low: 98, high: 106 },
{ time: '10:00', open: 105, close: 110, low: 103, high: 112 },
{ time: '11:00', open: 110, close: 108, low: 107, high: 111 },
{ time: '14:00', open: 108, close: 115, low: 106, high: 116 },
{ time: '15:00', open: 115, close: 120, low: 114, high: 122 },
{ time: '16:00', open: 120, close: 118, low: 117, high: 121 },
{ time: '17:00', open: 118, close: 125, low: 116, high: 126 }
]);
</script>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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
隐藏源代码
多系列 K线图
多系列 K线图
vue
<template>
<div style="background-color: #ffffff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);">
<h3 style="margin-bottom: 20px; color: #666; font-size: 18px;">多系列 K线图</h3>
<SunlightKLineChart
:data="multiKLineData"
height="300px"
:showLegend="true"
:colors="['#409EFF', '#67C23A']"
/>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { SunlightKLineChart } from 'sunlight-ui';
const multiKLineData = ref([
{
name: "股票A",
data: [
{ time: '09:00', open: 100, close: 105, low: 98, high: 106 },
{ time: '10:00', open: 105, close: 110, low: 103, high: 112 },
{ time: '11:00', open: 110, close: 108, low: 107, high: 111 },
{ time: '14:00', open: 108, close: 115, low: 106, high: 116 },
{ time: '15:00', open: 115, close: 120, low: 114, high: 122 }
]
},
{
name: "股票B",
data: [
{ time: '09:00', open: 200, close: 205, low: 198, high: 206 },
{ time: '10:00', open: 205, close: 210, low: 203, high: 212 },
{ time: '11:00', open: 210, close: 208, low: 207, high: 211 },
{ time: '14:00', open: 208, close: 215, low: 206, high: 216 },
{ time: '15:00', open: 215, close: 220, low: 214, high: 222 }
]
}
]);
</script>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
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
隐藏源代码
紧凑布局 K线图
紧凑布局 K线图
vue
<template>
<div style="background-color: #ffffff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);">
<h3 style="margin-bottom: 20px; color: #666; font-size: 18px;">紧凑布局 K线图</h3>
<SunlightKLineChart
:data="basicKLineData"
height="250px"
:showSplitLine="false"
/>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { SunlightKLineChart } from 'sunlight-ui';
const basicKLineData = ref([
{ time: '09:00', open: 100, close: 105, low: 98, high: 106 },
{ time: '10:00', open: 105, close: 110, low: 103, high: 112 },
{ time: '11:00', open: 110, close: 108, low: 107, high: 111 },
{ time: '14:00', open: 108, close: 115, low: 106, high: 116 },
{ time: '15:00', open: 115, close: 120, low: 114, high: 122 }
]);
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
隐藏源代码
详细信息 K线图
详细信息 K线图
vue
<template>
<div style="background-color: #ffffff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);">
<h3 style="margin-bottom: 20px; color: #666; font-size: 18px;">详细信息 K线图</h3>
<SunlightKLineChart
:data="detailedKLineData"
height="350px"
:showDataZoom="true"
/>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { SunlightKLineChart } from 'sunlight-ui';
const detailedKLineData = ref([
{ time: '09:00', open: 100, close: 105, low: 98, high: 106 },
{ time: '09:30', open: 105, close: 108, low: 104, high: 109 },
{ time: '10:00', open: 108, close: 110, low: 107, high: 112 },
{ time: '10:30', open: 110, close: 107, low: 106, high: 111 },
{ time: '11:00', open: 107, close: 109, low: 105, high: 110 },
{ time: '14:00', open: 109, close: 115, low: 108, high: 116 },
{ time: '14:30', open: 115, close: 118, low: 114, high: 119 },
{ time: '15:00', open: 118, close: 120, low: 117, high: 122 },
{ time: '15:30', open: 120, close: 119, low: 118, high: 121 },
{ time: '16:00', open: 119, close: 123, low: 117, high: 124 },
{ time: '16:30', open: 123, close: 121, low: 120, high: 125 },
{ time: '17:00', open: 121, close: 125, low: 120, high: 126 }
]);
</script>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
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
隐藏源代码
自定义颜色 K线图
自定义颜色 K线图
vue
<template>
<div style="background-color: #ffffff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);">
<h3 style="margin-bottom: 20px; color: #666; font-size: 18px;">自定义颜色 K线图</h3>
<SunlightKLineChart
:data="basicKLineData"
height="300px"
:colors="['#FF6B6B', '#4ECDC4']"
/>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { SunlightKLineChart } from 'sunlight-ui';
const basicKLineData = ref([
{ time: '09:00', open: 100, close: 105, low: 98, high: 106 },
{ time: '10:00', open: 105, close: 110, low: 103, high: 112 },
{ time: '11:00', open: 110, close: 108, low: 107, high: 111 },
{ time: '14:00', open: 108, close: 115, low: 106, high: 116 },
{ time: '15:00', open: 115, close: 120, low: 114, high: 122 }
]);
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
隐藏源代码
带标题的 K线图
vue
<template>
<div class="demo-container">
<el-row :gutter="20">
<el-col :xs="24" :sm="12" :md="24">
<div style="background-color: #ffffff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);">
<SunlightKLineChart
:data="basicKLineData"
height="300px"
:show-title="true"
title="股票价格走势"
title-position="center"
:title-style="{
fontSize: 18,
fontWeight: 'bold',
color: '#333'
}"
:show-legend="true"
:show-data-zoom="true"
/>
</div>
</el-col>
</el-row>
</div>
</template>
<script setup lang="ts">
import { SunlightKLineChart } from 'sunlight-ui';
// 基础 K线图数据
const basicKLineData = [
{ time: '09:00', open: 100, close: 105, low: 98, high: 106 },
{ time: '10:00', open: 105, close: 110, low: 103, high: 112 },
{ time: '11:00', open: 110, close: 108, low: 107, high: 111 },
{ time: '14:00', open: 108, close: 115, low: 106, high: 116 },
{ time: '15:00', open: 115, close: 120, low: 114, high: 122 },
{ time: '16:00', open: 120, close: 118, low: 117, high: 121 },
{ time: '17:00', open: 118, close: 125, low: 116, high: 126 }
];
</script>
<style scoped>
.demo-container {
padding: 20px;
background-color: #f5f7fa;
border-radius: 8px;
}
</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
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
隐藏源代码
组件属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
data | SingleKLineData | KLineSeriesItem[] | 必填 | 支持单系列和多系列K线数据 |
height | string | '350px' | 图表高度 |
colors | string[] | ['#4C87F3', '#8BD8FC'] | 颜色配置数组 |
showLegend | boolean | false | 是否显示图例 |
legendPosition | 'bottom' | 'top' | 'left' | 'right' | 'bottom' | 图例位置 |
showTooltip | boolean | true | 是否显示提示框 |
loading | boolean | false | 是否加载中 |
showDataZoom | boolean | false | 是否显示数据缩放 |
dataZoomStart | number | 0 | 数据缩放起始位置 |
dataZoomEnd | number | 100 | 数据缩放结束位置 |
showAxisLine | boolean | true | 是否显示轴线 |
showAxisLabel | boolean | true | 是否显示轴标签 |
showSplitLine | boolean | true | 是否显示分割线 |
isEmpty | boolean | false | 是否为空数据 |
title | string | '' | 图表标题 |
showTitle | boolean | false | 是否显示标题 |
titlePosition | 'left' | 'center' | 'right' | 'center' | 标题位置 |
titleStyle | object | {} | 标题样式 |
组件说明
SunlightKLineChart 是一个K线图组件，支持多组数据的K线展示，适用于展示股票、期货等金融数据的走势。