#鸿蒙通关秘籍#如何在HarmonyOS Next页面中使用封装的Echarts组件？

在HarmonyOS Next页面中使用封装的Echarts组件，先导入该组件并在页面的build方法中进行绘制。利用renderCallBack获取组件实例，调用render方法时机选择在获取数据后更新图表。

import Echarts from '../components/Echarts/Echarts'
import { EChartsOption } from '../components/Echarts/ViewModel'

@Entry
@Component
struct Index {
  myEchart: Echarts | null = null

  option: EChartsOption = {
    title: { text: '基础柱状图' },
    legend: { data: ['访问量'] },
    xAxis: { type: 'category', data: [] },
    yAxis: { type: 'value' },
    series: [{ data: [], type: 'bar', name: '访问量' }]
  };

  aboutToAppear(): void { this.getData(); }

  getData() {
    setTimeout(() => {
      this.option.xAxis.data = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      this.option.series[0].data = [120, 200, 150, 80, 70, 110, 130]
      this.myEchart?.render(this.option)
    }, 2000)
  }

  build() {
    Column() {
      Echarts({
        eHeight: 300,
        renderCallBack: (e: Echarts) => {
          this.myEchart = e
          this.myEchart.render(this.option)
        }
      })
    }
    .width('100%')
    .height('100%')
  }
}