目錄

• echart的初始化
• app-base-chart元件
• html
• 使用app-base-chart元件
• 總結

在angular中使用echart的時候，只需要在對應的元件生命週期中呼叫echart的api就可以了

echart的初始化

在component的ngOnInit事件中進行echarts的初始化，配置option，然後echarts圖表就生成了

app-base-chart元件

html

<div #chart [ngClass]="'chart-box ' + (!option ? 'empty-chart' : '')"></div>

css

// 基本的圖表樣式
.chart-box{
  font-weight: bold;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
}
// option暫無的時候的樣式
.empty-chart{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
}

import { Component,ElementRef,Input,OnDestroy,OnInit,ViewChild } from '@angular/core';
import { fromEvent,Subscription,timer } from 'rx';
import { debounceTime,tap } from 'rxjs/operators';
import { ECharts,EChartsOption,init } from 'echarts';
@Component({
  selector: 'app-base-chart',templateUrl: './base-chart.component.html',styleUrls: ['./base-chart.component.scss']
})
export class BaseChartComponent implements OnInit,OnDestroy {
  @Input() option: EChartsOption;
  @Input() height = '300px';
  @Input() width = '100%';
  @ViewChild('chart',{ static: true }) chart: ElementRef;
  aChart: ECharts;
  windowResize: Subscription;
  timer: Subscription;
  defaultGrid = {
    top: 10,right: 10,bottom: 30,left: 30,};
  cons
 
tructor() { }
  ngOnInit(): void {
    this.setListen();
    this.boxStyleInit();
    if (!!this.option) {
      this.echartsInit();
    }else{
      this.chart.nativeElement.innerText = '暫無資料';
    }
  }
  // 當元件銷燬的時候，取消相關訂閱
  ngOnDestroy(): void {
    if (this.windowResize) {
      this.windowResize.unsubscribe();
    }
    if (this.timer) {
      this.timer.unsubscribe();
    }
  }
  // 初始化容器的大小size
  boxStyleInit(): void {
    this.chart.nativeElement.style.width = this.width;
    this.chart.nativeElement.style.h客棧
 
eight = this.height;
  }
  // 設定window的resize事件監聽，並重繪echarts的大小
  setListen(): void {
    this.windowResize = fromEvent(window,'resize').pipe(
      debounceTime(200),tap(res => {
        this.aChart.resize();
      })
    ).subscribe();
  }
  // 根據ohttp://www.cppcns.comption配置和生成echarts圖表
  echartsInit(): void {
    this.aChart = init(this.chart.nativeElement);
    this.aChart.setOption(Object.assig程式設計客棧n({ grid: this.defaultGrid },this.option));
    // 通過延時器進行echarts的大小重繪
    this.timer = timer(400).subscribe(res => {
      this.aChart.resize();
    });
  }
}

使用app-base-chart元件

<app-base-chart [option]="option" width="100%" height="300px" ></app-base-chart>

只需要在元件的html中像上面程式碼運用就可以，同時還可以配置height和width。option為echarts官方定義的option

這樣其實就是簡單封裝了一個基本的echarts生成元件，所有的配置項都是echarts的

總結

本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容!