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