首页 > 代码库 > ng4中使用echart;升级脚手架到最新版本
ng4中使用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>
升级脚手架到最新版本
//先卸载,后安装
npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest
ng4中使用echart;升级脚手架到最新版本
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。