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>