# Web Component

> <kline-chart> 自定义元素：attribute、property 与事件。

Source: https://kcq.nebutra.com/zh/docs/reference/web-component


<Callout>
  由固定提交的 

  [`packages/vue/src/web-component.ts`](https://github.com/TsekaLuk/KLineChartQuant/blob/1aa5e22c61313a34d08878ad895e604e0d4a85e9/packages/vue/src/web-component.ts)

   生成。
</Callout>

元素为 `<kline-chart>`，由 Vue 的 `defineCustomElement` 构建，渲染在 shadow root 中。原始类型属性对应 kebab-case attribute；数组与对象必须以 JavaScript property 赋值。事件为 `CustomEvent`，`detail` 是 emit 参数数组，并以 camelCase 与 kebab-case 两个名字各派发一次。

属性 [#属性]

| Attribute                       | Property                      | 类型                                                | 默认值                          |
| ------------------------------- | ----------------------------- | ------------------------------------------------- | ---------------------------- |
| —                               | <code>symbols</code>          | <code>ReadonlyArray\<SymbolSpec></code>           | —                            |
| —                               | <code>indicators</code>       | <code>ReadonlyArray\<ChartIndicatorConfig></code> | —                            |
| —                               | <code>customMarkers</code>    | <code>ReadonlyArray\<CustomMarkerEntity></code>   | —                            |
| —                               | <code>marketSessions</code>   | <code>ChartMountOptions\['marketSessions']</code> | —                            |
| <code>y-padding-px</code>       | <code>yPaddingPx</code>       | <code>number</code>                               | <code>20</code>              |
| <code>min-k-width</code>        | <code>minKWidth</code>        | <code>number</code>                               | <code>1</code>               |
| <code>max-k-width</code>        | <code>maxKWidth</code>        | <code>number</code>                               | <code>50</code>              |
| <code>right-axis-width</code>   | <code>rightAxisWidth</code>   | <code>number</code>                               | <code>0</code>               |
| <code>left-axis-width</code>    | <code>leftAxisWidth</code>    | <code>number</code>                               | —                            |
| <code>bottom-axis-height</code> | <code>bottomAxisHeight</code> | <code>number</code>                               | <code>24</code>              |
| <code>price-label-width</code>  | <code>priceLabelWidth</code>  | <code>number</code>                               | <code>60</code>              |
| <code>zoom-levels</code>        | <code>zoomLevels</code>       | <code>number</code>                               | <code>20</code>              |
| <code>initial-zoom-level</code> | <code>initialZoomLevel</code> | <code>number</code>                               | <code>3</code>               |
| <code>is-fullscreen</code>      | <code>isFullscreen</code>     | <code>boolean</code>                              | —                            |
| <code>timezone</code>           | <code>timezone</code>         | <code>string</code>                               | <code>'Asia/Shanghai'</code> |
| —                               | <code>settings</code>         | <code>Partial\<ChartSettings></code>              | —                            |
| —                               | <code>legend</code>           | <code>LegendOptions</code>                        | —                            |
| —                               | <code>customData</code>       | <code>CustomDataSource</code>                     | —                            |

事件 [#事件]

| 事件                                | `detail`                                                     |
| --------------------------------- | ------------------------------------------------------------ |
| <code>zoom-level-change</code>    | <code>\[level: number, kWidth: number]</code>                |
| <code>toggle-fullscreen</code>    | `[]`                                                         |
| <code>update:is-fullscreen</code> | <code>\[value: boolean]</code>                               |
| <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>                  |