ng2 中使用echart
2024-10-19 17:32:33
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>
最新文章
- Linux命令全称
- Selenium2入门(一)简介
- 升级ruby后再安装cocodPod
- C#参考:Linq 概述
- [Tool] WireShark基本使用
- 初识50个Linux命令
- 更改PATH后,别忘了及时重启或刷新
- EAPOL 协议
- java String 的方法 (01)
- cardsui-for-android
- 个人对maven pom.xml文件的理解
- 当很多连接到你的数据库时,报这种错误“已超过了锁请求超时时段” SqlServer数据库正在还原的解决办法
- SD卡FAT32文件系统格式
- 【Java基础】用LinkedList实现一个简单栈的功能
- 【原创】Linux 增加系统调用
- 【转】linux 原子整数操作详解
- Ubuntu离线安装VSCode(附带前期准备工作)
- 二、Windows Server 2016 AD 组织单位、组、用户的创建
- laravel5.4 导出 Excel 表格
- 亚马逊VE账号运营