#鸿蒙通关秘籍#如何在HarmonyOS Next中封装Echarts组件？

封装一个HarmonyOS Next的Echarts组件，创建一个Echarts.ets文件，通过Webview组件将Echarts嵌入到项目中。定义组件的宽高属性，并通过render方法重新加载图表数据。

import webview from '@ohos.web.webview'

@Component
export default struct Echarts {
  controller: webview.WebviewController = new webview.WebviewController();
  @Prop eWidth: string | number = '100%'
  @Prop eHeight: string | number = 300
  renderCallBack: (e: Echarts) => void = () => {}

  render(option: Record<string, ESObject> | string) {
    this.controller.runJavaScript(`setOption(${typeof option === 'string' ? option : JSON.stringify(option)})`)
  }

  build() {
    Column() {
      Web({ src: $rawfile('echarts.html'), controller: this.controller })
        .width('100%')
        .height('100%')
        .onPageEnd(e => {
           this.renderCallBack && this.renderCallBack(this)
        })
    }
    .width(this.eWidth)
    .height(this.eHeight)
  }
}