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>
升級腳手架到最新版本
//先卸載，后安裝 npm uninstall -g @angular/cli npm cache clean npm install -g @angular/cli@latest