### File

`src/modules/lesson/echars/echars.component.ts`

### Metadata

selector | `app-echars`
styleUrls | `echars.component.scss`
templateUrl | `echars.component.html`

### Inputs

`options` | Type: `any`

### Constructor

`constructor()`

### Methods

createEcharts
`createEcharts()`
Returns: `void`

### Properties

chartDiv
`chartDiv: `boolean` </bcode>`

ElementRef
`ElementRef: `any` </bcode>`

    import { Component, Input, AfterViewInit } from '@angular/core';
    // 引入Angular的DOM操作装饰器ViewChiild
    import { ViewChild, ElementRef } from '@angular/core';
    // 引入echarts第三方库
    import * as echarts from "echarts"

    @Component({
      selector: 'app-echars',
      templateUrl: './echars.component.html',
      styleUrls: ['./echars.component.scss']
    })

    export class EcharsComponent implements AfterViewInit {
      // 编写Echart图表的配置项与数据
      @Input() options: any = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ]
      };
      // 通过ViewChild获取页面中#chartDiv标记的DOM元素
      @ViewChild("chartDiv", { static: false }) chartDiv!: ElementRef;

      constructor() {

      }

      // 生命周期:视图DOM加载完成后再执行创建图表操作
      ngAfterViewInit(): void {
        this.createEcharts();
      }
      async createEcharts() {
        // 从ViewChild元素中获取dom节点
        let chartDom = this.chartDiv.nativeElement;
        // 向指定节点渲染初始化echarts
        let myChart = echarts.init(chartDom);
        // 当配置项存在时
        // 根据配置渲染图表内容
        this.options && myChart.setOption(this.options);
      }
    }

# results matching ""

# No results matching ""