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>