Compatibility with Host Environment
Douyin widgets provide the ability to create custom components (https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/tutorial/custom-component/custom-component). Each custom widget includes several parts:
-
index.js: Component registration logic
-
index.json: Component declaration
-
index.ttml: Component template content
-
index.ttss: Component style
Component Declaration
To ensure VChart capabilities in the Douyin environment, the TT VChart custom component declares three canvases:
-
Render canvas: Used to render VChart chart content;
-
Hit canvas: Although called Hit Canvas, VChart no longer uses an additional canvas for graphic picking. This canvas is mainly used for additional canvas operations. For example, pixel matching logic in the word cloud layout algorithm and texture rendering logic need to be performed on an additional canvas;
-
Tooltip canvas: Used to render additional tooltip content, separating Render canvas and Tooltip canvas to avoid redrawing the entire canvas.
Component Registration
Component registration includes properties and necessary lifecycle.
Component Properties:
-
spec: Same as VChart's spec configuration, but an observer is added in the registration to monitor changes in the chart spec. When the spec is updated, vchart.updateSpec() will be automatically called;
-
options: Same as VChart's options configuration;
-
events: Same as VChart's registered events, vchart.on will be called during chart initialization to listen for corresponding events.
Component Methods:
-
init: The core of VChart rendering requires a Canvas. In the init function, tt vchart will find the corresponding canvas component and initialize the VChart instance to execute the rendering process. The rendering process is the same as a regular VChart example;
-
bindEvent: Bind events and filter out potentially duplicate PC & mobile events in the Douyin environment.