KLineChart K 线图

KLineChart K 线图 的基础用法、公开 API 与示例。

基础示例

示例使用本地演示数据；上传、校验和提交不会连接业务后端。

<script setup lang="ts">
import { KLineChart } from "@/components/chart/k-line-chart";

const demoProps = {
  height: "320px",
  showDataZoom: true,
  dataZoomStart: 20,
  data: [
    { time: "07-01", open: 18.6, close: 20.4, low: 18.1, high: 21.2 },
    { time: "07-02", open: 20.2, close: 19.4, low: 18.8, high: 20.8 },
    { time: "07-03", open: 19.5, close: 22.1, low: 19.2, high: 22.8 },
    { time: "07-04", open: 22.4, close: 23.6, low: 21.9, high: 24.2 },
    { time: "07-05", open: 23.2, close: 21.8, low: 21.3, high: 23.8 },
    { time: "07-08", open: 21.6, close: 24.5, low: 21.2, high: 25.1 },
    { time: "07-09", open: 24.1, close: 25.3, low: 23.7, high: 26.2 },
    { time: "07-10", open: 25.5, close: 24.7, low: 24.2, high: 26.0 },
    { time: "07-11", open: 24.8, close: 27.2, low: 24.6, high: 27.9 },
    { time: "07-12", open: 27.0, close: 28.4, low: 26.5, high: 29.1 },
  ],
};
</script>

<template>
  <ClientOnly>
    <div class="demo-surface">
      <KLineChart v-bind="demoProps"></KLineChart>
    </div>
  </ClientOnly>
</template>

隐藏源代码

引入方式

import { KLineChart } from "@/components/chart/k-line-chart";

Props

参数	说明	类型	默认值	必填
height	图表高度	string	DEFAULT_CHART_HEIGHT	否
loading	是否加载中	boolean	false	否
isEmpty	是否为空数据	boolean	false	否
colors	颜色配置	string[]	-	否
data	图表数据	KLineDataItem[]	[]	否
showDataZoom	是否显示数据缩放控件	boolean	false	否
dataZoomStart	数据缩放初始开始位置	number	0	否
dataZoomEnd	数据缩放初始结束位置	number	100	否

Events

事件名	说明	回调参数
-	该组件未声明 Events。	-

Slots

插槽名	说明	参数
-	该组件未声明 Slots。	-

Expose

名称	说明	类型
-	该组件未声明 Expose。	-

Module API

名称	说明	类型
KLineChart	导出 KLineChart 供业务侧复用。	useInstall(index)

Types

KLineChartProps

K 线图 Props

字段	说明	类型	默认值	必填
height	图表高度	string	-	否
loading	是否加载中	boolean	-	否
isEmpty	是否为空数据	boolean	-	否
colors	颜色配置	string[]	-	否
data	图表数据	KLineDataItem[]	-	否
showDataZoom	是否显示数据缩放控件	boolean	-	否
dataZoomStart	数据缩放初始开始位置	number	-	否
dataZoomEnd	数据缩放初始结束位置	number	-	否

KLineDataItem

K 线图数据项

字段	说明	类型	默认值	必填
time	时间标签	string	-	是
open	开盘价	number	-	是
close	收盘价	number	-	是
high	最高价	number	-	是
low	最低价	number	-	是

API 根据当前组件源码生成；同步版本与验证记录见维护说明。