@twp0217/ngx-echarts
Version:
Apache ECharts component for Angular
197 lines (191 loc) • 7.11 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
import { init } from 'echarts';
import { ResizeObserver } from '@juggle/resize-observer';
import { CommonModule } from '@angular/common';
class NgxEchartsComponent {
constructor(el, ngZone) {
this.el = el;
this.ngZone = ngZone;
this.autoResize = false;
this.loading = false;
this.onChartInit = new EventEmitter();
this.echartsInstance = null;
this.resizeObserver = null;
}
/**
* 创建ECharts实例
*/
initECharts() {
var _a;
if (!this.echartsInstance) {
const offsetHeight = this.el.nativeElement.offsetHeight;
this.initOpts = Object.assign(Object.assign({}, this.initOpts), { height: ((_a = this.initOpts) === null || _a === void 0 ? void 0 : _a.height) || offsetHeight || 400 });
this.ngZone.runOutsideAngular(() => {
this.echartsInstance = init(this.el.nativeElement, this.theme, this.initOpts);
this.onChartInit.emit(this.echartsInstance);
this.buildResizeObserver();
this.buildEvents();
this.setOption();
this.setGroup();
});
}
}
/**
* 销毁ECharts实例
*/
disposeECharts() {
if (this.echartsInstance) {
this.echartsInstance.dispose();
this.echartsInstance = null;
}
}
/**
* 绑定调整大小观察者
*/
buildResizeObserver() {
this.resizeObserver = new ResizeObserver(() => {
this.resize();
});
this.resizeObserver.observe(this.el.nativeElement);
}
/**
* 取消调整大小观察者
*/
disconnectResizeObserver() {
if (this.resizeObserver) {
this.resizeObserver.disconnect();
this.resizeObserver = null;
}
}
/**
* 绑定事件
*/
buildEvents() {
Object.entries(this.onEvents || {}).forEach(([eventName, handler]) => {
if (this.echartsInstance) {
this.echartsInstance.on(eventName, handler);
}
});
}
/**
* 设置图表配置项
*/
setOption() {
if (this.echartsInstance && this.option) {
this.echartsInstance.setOption(this.option, this.setOptionOpts);
}
}
/**
* 调整大小
*/
resize() {
if (this.autoResize && this.echartsInstance) {
this.echartsInstance.resize();
}
}
/**
* 切换Loading
*/
toggleLoading() {
var _a, _b;
if (this.echartsInstance) {
if (this.loading) {
this.echartsInstance.showLoading((_a = this.loadingConfig) === null || _a === void 0 ? void 0 : _a.type, (_b = this.loadingConfig) === null || _b === void 0 ? void 0 : _b.opts);
}
else {
this.echartsInstance.hideLoading();
}
}
}
/**
* 设置图表分组
*/
setGroup() {
if (this.echartsInstance && this.group) {
this.echartsInstance.group = this.group;
}
}
ngAfterViewInit() {
this.initECharts();
}
ngOnChanges(changes) {
const { option, theme, initOpts, loading, group } = changes;
if (option) {
this.setOption();
}
if (theme || initOpts) {
this.disposeECharts();
this.initECharts();
}
if (loading) {
this.toggleLoading();
}
if (group) {
this.setGroup();
}
}
ngOnDestroy() {
this.disposeECharts();
this.disconnectResizeObserver();
}
}
NgxEchartsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NgxEchartsComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
NgxEchartsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: NgxEchartsComponent, selector: "ngx-echarts", inputs: { option: "option", theme: "theme", initOpts: "initOpts", setOptionOpts: "setOptionOpts", autoResize: "autoResize", loading: "loading", loadingConfig: "loadingConfig", group: "group", onEvents: "onEvents" }, outputs: { onChartInit: "onChartInit" }, usesOnChanges: true, ngImport: i0, template: "", styles: [":host{display:block}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NgxEchartsComponent, decorators: [{
type: Component,
args: [{
selector: 'ngx-echarts',
templateUrl: './ngx-echarts.component.html',
styleUrls: ['./ngx-echarts.component.less'],
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { option: [{
type: Input
}], theme: [{
type: Input
}], initOpts: [{
type: Input
}], setOptionOpts: [{
type: Input
}], autoResize: [{
type: Input
}], loading: [{
type: Input
}], loadingConfig: [{
type: Input
}], group: [{
type: Input
}], onChartInit: [{
type: Output
}], onEvents: [{
type: Input
}] } });
class NgxEchartsModule {
}
NgxEchartsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NgxEchartsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NgxEchartsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NgxEchartsModule, declarations: [NgxEchartsComponent], imports: [CommonModule], exports: [NgxEchartsComponent] });
NgxEchartsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NgxEchartsModule, imports: [[
CommonModule
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NgxEchartsModule, decorators: [{
type: NgModule,
args: [{
imports: [
CommonModule
],
exports: [
NgxEchartsComponent
],
declarations: [
NgxEchartsComponent
]
}]
}] });
/*
* Public API Surface of ngx-echarts
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgxEchartsComponent, NgxEchartsModule };
//# sourceMappingURL=twp0217-ngx-echarts.js.map