ng2 中使用echart

1.首先創建echarts指令

 //echart.directive.ts
important { Directive,ElementRef,Input,Ouput,Onchanges,OnInit,OnDestroy,SimpleChanges,EventEmitter} from '@angular/core';
important * as echarts from 'echarts';
 
@Directive({
   selector: 'echart' 
})
 
export class EchartOptiononDirective implements OnInin,OnChanges,OnDestroy {
    @Input('chartType') chartType:any;
    @Output() resizeEle = new EventEmitter<any>();
    public Ele;
    constructor(private el:ElementRef){}
 
    ngOnInit():void {}
    ngOnChanges(changes:SimpleChanges)   {
      let params;
      if(params != this.chartType){
         params = this.chartType;
         if(this.Ele){this.Ele.dispose()}  //每次change改變echart實例，防止內存泄漏
         this.Ele = echarts.init(this.el.nativeElement);  //繪制圖表
         this.Ele.setOption(this.chartType);
         this.resizeEle.emit(this.Ele);  //resize圖表
       }     
    }
    ngOnDestroy(){
        if(this.Ele){this.Ele.dispose()}
    }
}

 2.組件模板中引入指令

//echart.module.ts
import {EchartOptionDirective} from './echart.directive'

@NgModule({
    declarations:[
        EchartOptionDirective
    ]
})

3.組件中使用echart

//echart.component.ts
export class EchartComponent implements OnInit,OnDestroy{
    public chartoption:any;
    public echart:any;
    constructor(){
        window.onresize = () => {   //改變窗口大小reseze圖表
            this.echart.resize();
        }
    }
    ngOnInit(){
        window.onresize = () => {
            this.echart.resize();
        }
    }
    ngOnDestroy() {
        window.onresize = () => {}; //防止內存泄漏
    }
    resizeElement(e){  
        this.echart= e;
    }
    renderChart(){
        this.chartoption = {
            //此處為echart圖表相關內容
            backgtoundColor:'#fff',
            title:{},
            ...
        }
    }
}    

4.html中使用echart

//echart.component.html
<echart *ngIf = "chartoption" [chartType] = "chartoption" (resizeEle) = "resizeElement($event)"></echart>