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

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)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.