宿主环境的兼容
飞书小组件提供了自定义组件的能力（https://open.feishu.cn/document/client-docs/gadget/component-component/custom-components/custom-components），每一个自定义小组件都包含几个部分：
-
index.js：组件的注册逻辑
-
index.json：组件的声明
-
index.ttml：组件的模板内容
-
index.ttss：组件的样式
组件声明
为了保证飞书环境中的 VChart 能力，Lark VChart 的自定义组件中声明了三个 canvas：
-
Render canvas：用于渲染 VChart 图表内容；
-
Hit canvas：虽然叫做 Hit Canvas，但是目前 VChart 已经不再使用额外 canvas 做图形拾取。这一 canvas 主要用于执行额外的 canvas 操作。例如词云布局算法中像素匹配逻辑以及纹理渲染逻辑均需要在额外的 canvas 中进行；
-
Tooltip canvas：用于渲染额外的 tooltip 内容，拆分 Render canvas 与 Tooltip canvas，避免整个画布重绘。
组件注册
组件的注册包含属性以及必要的声明周期。
组件属性：
-
spec：与 VChart 的 spec 配置相同，但是在注册中添加了 observer 用于监听图表 spec 的变化。当 spec 更新时，将会自动调用 vchart.updateSpec()；
-
options：与 VChart 的 options 配置相同；
-
events：与 VChart 的注册事件相同，会在图表初始化时调用 vchart.on 监听相应的事件。
组件方法：
-
init：VChart 渲染核心需要的就是 Canvas 画布，在 init 函数中，lark vchart 会找到对应的 canvas 组件，并初始化 VChart 实例执行渲染过程。渲染过程与普通的 VChart 示例相同；
-
bindEvent：绑定事件，并针对飞书环境过滤可能重复触发的 PC 端 & 移动端事件。