# Vue 组件

> <KlineChart> 的属性、事件与插槽，由 KLineChart.vue 生成。

Source: https://kcq.nebutra.com/zh/docs/reference/vue


<Callout>
  由固定提交的 

  [`packages/vue/src/components/KLineChart.vue`](https://github.com/TsekaLuk/KLineChartQuant/blob/1aa5e22c61313a34d08878ad895e604e0d4a85e9/packages/vue/src/components/KLineChart.vue)

   生成。
</Callout>

属性 [#属性]

| 属性                              | 类型                                                | 默认值                          | 说明                                                                                         |
| ------------------------------- | ------------------------------------------------- | ---------------------------- | ------------------------------------------------------------------------------------------ |
| <code>symbols</code>            | <code>ReadonlyArray\<SymbolSpec></code>           | —                            | 受控品种列表；传入时由组件同步到图表数据源。                                                                     |
| <code>indicators</code>         | <code>ReadonlyArray\<ChartIndicatorConfig></code> | —                            | 受控指标实例列表；传入时完整替换当前指标实例。                                                                    |
| <code>custom-markers</code>     | <code>ReadonlyArray\<CustomMarkerEntity></code>   | —                            | 受控自定义标记列表；传入时完整替换当前自定义标记。                                                                  |
| <code>market-sessions</code>    | <code>ChartMountOptions\['marketSessions']</code> | —                            | 当前图表实例的市场交易时段覆盖                                                                            |
| <code>y-padding-px</code>       | <code>number</code>                               | <code>20</code>              | 价格区上下留白（CSS 像素）。                                                                           |
| <code>min-k-width</code>        | <code>number</code>                               | <code>1</code>               | 缩到最小时的 K 线宽度（CSS 像素）。                                                                      |
| <code>max-k-width</code>        | <code>number</code>                               | <code>50</code>              | 放到最大时的 K 线宽度（CSS 像素）。                                                                      |
| <code>right-axis-width</code>   | <code>number</code>                               | <code>0</code>               | 右侧价格轴宽度                                                                                    |
| <code>left-axis-width</code>    | <code>number</code>                               | —                            | 左侧价格轴宽度（默认 0，不显示）                                                                          |
| <code>bottom-axis-height</code> | <code>number</code>                               | <code>24</code>              | 底部时间轴高度                                                                                    |
| <code>price-label-width</code>  | <code>number</code>                               | <code>60</code>              | 价格标签额外宽度（用于显示涨跌幅，默认 60px）                                                                  |
| <code>zoom-levels</code>        | <code>number</code>                               | <code>20</code>              | 缩放级别数量（默认 10）                                                                              |
| <code>initial-zoom-level</code> | <code>number</code>                               | <code>3</code>               | 初始缩放级别（1 \~ zoomLevels，默认居中）                                                               |
| <code>is-fullscreen</code>      | <code>boolean</code>                              | —                            | 是否全屏（受控）。不绑定时为非受控模式，组件内部接管全屏 DOM 操作                                                        |
| <code>timezone</code>           | <code>string</code>                               | <code>'Asia/Shanghai'</code> | 时区，默认 Asia/Shanghai                                                                        |
| <code>settings</code>           | <code>Partial\<ChartSettings></code>              | —                            | 图表设置。逐 key 覆盖：显式声明的 key 优先，未声明的回落到 localStorage 存量， 最后用默认值补齐。未传时等价于 localStorage 存量 + 默认值。 |
| <code>legend</code>             | <code>LegendOptions</code>                        | —                            | Canvas 主图图例配置；默认由 Core 绘制，不进入 Vue 更新路径。                                                    |
| <code>custom-data</code>        | <code>CustomDataSource</code>                     | —                            | 用户自定义数据源（传入后 bypass fetcher，使用此数据）                                                         |

事件 [#事件]

| 事件                                 | 参数                                                        | 说明                               |
| ---------------------------------- | --------------------------------------------------------- | -------------------------------- |
| <code>@zoom-level-change</code>    | <code>level: number, kWidth: number</code>                | 缩放级别变化。                          |
| <code>@toggle-fullscreen</code>    | —                                                         | 点击了全屏按钮。                         |
| <code>@update:is-fullscreen</code> | <code>value: boolean</code>                               | 供 v-model:is-fullscreen 使用的全屏状态。 |
| <code>@theme-change</code>         | <code>theme: 'light' \| 'dark'</code>                     | 用户切换了明暗主题。                       |
| <code>@k-line-level-change</code>  | <code>level: string</code>                                | 用户切换了周期。                         |
| <code>@k-line-adjust-change</code> | <code>adjust: 'qfq' \| 'hfq' \| 'splits' \| 'none'</code> | 用户切换了复权方式。                       |
| <code>@controller-ready</code>     | <code>controller: ChartController</code>                  | 无头 ChartController 已就绪，可用于命令式调用。 |

插槽 [#插槽]

| 插槽                              | 作用域                                 | 说明                                |
| ------------------------------- | ----------------------------------- | --------------------------------- |
| <code>#source-management</code> | —                                   | 宿主管理行情连接与凭据；图表不持有密钥。              |
| <code>#toolbar-start</code>     | —                                   | 顶部工具栏起始位置，放宿主控件（如账户菜单）。           |
| <code>#toolbar-end</code>       | —                                   | 顶部工具栏末尾位置。                        |
| <code>#legend</code>            | <code>LegendSlotProps</code>        | 替换主图默认图例，作用域为 Core 的图例模板上下文。      |
| <code>#kline-tooltip</code>     | <code>KlineTooltipSlotProps</code>  | 自定义 K 线提示框，悬停时渲染（移动端除外），携带当前 K 线。 |
| <code>#marker-tooltip</code>    | <code>MarkerTooltipSlotProps</code> | 自定义标记提示框，悬停标记时渲染。                 |