VISALL K线图 (HXKLine Chart) 使用文档

简介

K线图组件是VISALL数据可视化库中的专业金融图表组件，支持分时图、日K、周K、月K等多种展现形式。该组件基于同花顺K线图实现，提供了完整的股票行情展示功能，包括成交量、技术指标等专业功能。

基本用法

import { render } from 'path/to/bundle.esm.min.js';

// 创建K线图
const chart = render(container, {
  layers: [
    {
      type: 'hxKLine',
      stocks: [
        {
          code: '000001', // 股票代码
          market: 'SZ',   // 市场代码
          name: '平安银行'  // 股票名称
        }
      ]
    }
  ]
});

配置参数

参数	类型	默认值	说明
stocks	StockData[]	-	股票数据数组，每个元素包含股票的基本信息
StockData.code	string	-	股票代码
StockData.market	string	-	市场代码（如：SZ-深市，SH-沪市）
StockData.name	string	-	股票名称

数据要求

• 股票代码必须符合交易所规范
• 市场代码必须是有效的交易所代码
• 股票名称不能为空
• 数据量至少需要大于1条

高级用法

1. 多股票切换

支持在同一个图表中切换显示不同的股票：

{
  type: 'hxKLine',
  stocks: [
    {
      code: '000001',
      market: 'SZ',
      name: '平安银行'
    },
    {
      code: '600000',
      market: 'SH',
      name: '浦发银行'
    }
  ]
}

2. 周期切换

支持在分时图、日K、周K、月K之间切换：

// 默认支持以下周期：
// - 分时图
// - 日K
// - 周K
// - 月K

潜规则与注意事项

1. 数据加载机制：

   • K线图组件会自动从同花顺数据源加载数据
   • 需要确保有正确的数据访问权限

2. 图表交互限制：

   • 默认禁用了缩放功能（setZoomEnabled: false）
   • 默认禁用了滚动功能（setScrollEnabled: false）
   • 柱间距限制在0-50之间（setBarSpaceLimit: { min: 0, max: 50 }）

3. 成交量显示规则：

   • 成交量默认显示在图表下方
   • 成交量颜色根据K线涨跌自动变化
   • 成交量高度默认为图表高度的1/4

4. Tooltip显示规则：

   • 根据布局大小自动调整显示的字段数量
   • 小尺寸布局（SMALL/SMALL_1_2）只显示3个字段
   • 其他布局显示完整字段

5. 样式定制规则：

   • 支持通过token.dvHXKLine.hxKLine.option进行样式定制
   • 边框颜色可通过token.dvHXKLine.constants.DEFAULT_TICK_LINE_COLOR配置

6. 坐标轴限制：

   • 禁用了Y轴的拖动功能（scrollZoomEnabled: false）
   • 主图内容上下间隔限制在5%（gap: { top: 0.05, bottom: 0.05 }）

实现原理

K线图组件内部使用了复杂的数据处理逻辑，主要包括以下步骤：

1. 数据初始化：验证股票信息并加载数据
2. 图表渲染：根据配置创建K线图实例
3. 指标处理：添加成交量等技术指标
4. 交互处理：处理鼠标事件和提示框显示

类型兼容性问题

使用本组件时，需要注意以下类型兼容性问题：

1. 股票数据类型需要符合StockData接口定义
2. 市场代码必须是预定义的常量值
3. 组件实例方法调用需要注意类型安全

示例

基础K线图

{
  type: 'hxKLine',
  stocks: [
    {
      code: '000001',
      market: 'SZ',
      name: '平安银行'
    }
  ]
}

多股票K线图

{
  type: 'hxKLine',
  stocks: [
    {
      code: '000001',
      market: 'SZ',
      name: '平安银行'
    },
    {
      code: '600000',
      market: 'SH',
      name: '浦发银行'
    }
  ]
}

常见问题解决

1. 数据加载失败

   • 检查股票代码和市场代码是否正确
   • 确认是否有正确的数据访问权限

2. 图表显示异常

   • 检查容器大小是否合适
   • 确认数据是否完整

3. 交互功能失效

   • 检查是否被其他组件覆盖
   • 确认事件监听是否正确

4. 样式显示问题

   • 检查token配置是否正确
   • 确认样式覆盖是否生效