Web Component
<kline-chart> 自定义元素：attribute、property 与事件。
由固定提交的
packages/vue/src/web-component.ts 生成。元素为 <kline-chart>，由 Vue 的 defineCustomElement 构建，渲染在 shadow root 中。原始类型属性对应 kebab-case attribute；数组与对象必须以 JavaScript property 赋值。事件为 CustomEvent，detail 是 emit 参数数组，并以 camelCase 与 kebab-case 两个名字各派发一次。
属性
| Attribute | Property | 类型 | 默认值 |
|---|---|---|---|
| — | symbols | ReadonlyArray<SymbolSpec> | — |
| — | indicators | ReadonlyArray<ChartIndicatorConfig> | — |
| — | customMarkers | ReadonlyArray<CustomMarkerEntity> | — |
| — | marketSessions | ChartMountOptions['marketSessions'] | — |
y-padding-px | yPaddingPx | number | 20 |
min-k-width | minKWidth | number | 1 |
max-k-width | maxKWidth | number | 50 |
right-axis-width | rightAxisWidth | number | 0 |
left-axis-width | leftAxisWidth | number | — |
bottom-axis-height | bottomAxisHeight | number | 24 |
price-label-width | priceLabelWidth | number | 60 |
zoom-levels | zoomLevels | number | 20 |
initial-zoom-level | initialZoomLevel | number | 3 |
is-fullscreen | isFullscreen | boolean | — |
timezone | timezone | string | 'Asia/Shanghai' |
| — | settings | Partial<ChartSettings> | — |
| — | legend | LegendOptions | — |
| — | customData | CustomDataSource | — |
事件
| 事件 | detail |
|---|---|
zoom-level-change | [level: number, kWidth: number] |
toggle-fullscreen | [] |
update:is-fullscreen | [value: boolean] |
theme-change | [theme: 'light' | 'dark'] |
k-line-level-change | [level: string] |
k-line-adjust-change | [adjust: 'qfq' | 'hfq' | 'splits' | 'none'] |
controller-ready | [controller: ChartController] |