Compatibility with Host Environment

The HarmonyOS provides the capability to create custom components, where the @Component decorator can only decorate data structures declared with the struct keyword. Once a struct is decorated with @Component, it gains the ability to be a component. Starting from API version 9, this decorator supports usage in ArkTS cards. (https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V14/arkts-create-custom-components-V14#component).

Component Declaration

• To ensure the VChart capability in the Harmony environment, the native Canvas in the Harmony environment has been encapsulated to provide the interface of the browser's Canvas2D.

• The component encapsulation logic in the harmony environment is located in the packages/harmony_vchart/library/src/main/ets/ChartComponent.ets directory, which includes components encapsulated based on the harmony environment.

• The events of Harmony have been re-encapsulated to be compatible with the browser's event interface.

export class HTMLTouchEvent {
  type: string = '';
  touches: TouchItem[] = [];
  changedTouches: TouchItem[] = [];
  target: Object | null = null;

  constructor(harmonyTouchEvent: TouchEvent) {
    if (harmonyTouchEvent.type === TouchType.Down) {
      this.type = 'touchstart';
    } else if (harmonyTouchEvent.type === TouchType.Up || harmonyTouchEvent.type === TouchType.Cancel) {
      this.type = 'touchend';
    } else if (harmonyTouchEvent.type === TouchType.Move) {
      this.type = 'touchmove';
    }
    this.touches = harmonyTouchEvent.touches.map(t => new TouchItem(t));
    this.changedTouches = harmonyTouchEvent.touches.map(t => new TouchItem(t));
  }
}    

• The event compatibility logic is located in the packages/harmony_vchart/library/src/main/ets/event.ets directory.

• Since there is no RequestAnimationFrame interface in the Harmony environment, a custom Ticker, HarmonyTickHandler, is implemented based on Harmony's own animation API.

• The animation Ticker logic is located in the packages/harmony_vchart/library/src/main/ets/ticker.ets directory.

Component Registration

The registration of components includes properties and necessary lifecycle declarations.

Component Properties:

• spec: Same as the spec configuration of VChart

• initOption: Same as the initOption configuration of VChart;

Component Methods:

• onChartInitCb: Provides a callback for when initialization is complete

• onChartReadyCb: Provides a callback for when the chart is ready to be drawn

This document was revised and organized by the following personnel

Xuanhun