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

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%')
  }
}
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.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.