diff --git a/README.md b/README.md index b10cdee..6fedac3 100644 --- a/README.md +++ b/README.md @@ -144,3 +144,26 @@ import { EchartsxModule } from 'echarts-for-angular'; | `[isResizable]` | boolean | true | enable or disable auto resize function. | `[periodicityInMiliSeconds]` | number | 2000 | time for recheck the chart size changes then resize method will be call. +### ECharts Instance + +`echartsInstance` is exposed (since v1.1.6) in the `(chartInit)` event, enabling you to directly call functions like: `resize()`, `showLoading()`, etc. For example: + +- html: + +```html +
+``` + +- component: + +```typescript +onChartInit(ec) { + this.echartsInstance = ec; +} + +resizeChart() { + if (this.echartsInstance) { + this.echartsInstance.resize(); + } +} +``` \ No newline at end of file diff --git a/projects/echartsx/README.md b/projects/echartsx/README.md index b10cdee..6fedac3 100644 --- a/projects/echartsx/README.md +++ b/projects/echartsx/README.md @@ -144,3 +144,26 @@ import { EchartsxModule } from 'echarts-for-angular'; | `[isResizable]` | boolean | true | enable or disable auto resize function. | `[periodicityInMiliSeconds]` | number | 2000 | time for recheck the chart size changes then resize method will be call. +### ECharts Instance + +`echartsInstance` is exposed (since v1.1.6) in the `(chartInit)` event, enabling you to directly call functions like: `resize()`, `showLoading()`, etc. For example: + +- html: + +```html +
+``` + +- component: + +```typescript +onChartInit(ec) { + this.echartsInstance = ec; +} + +resizeChart() { + if (this.echartsInstance) { + this.echartsInstance.resize(); + } +} +``` \ No newline at end of file diff --git a/projects/echartsx/src/lib/driective/EchartsDirective.ts b/projects/echartsx/src/lib/driective/EchartsDirective.ts index 9fafe75..bf6e84b 100644 --- a/projects/echartsx/src/lib/driective/EchartsDirective.ts +++ b/projects/echartsx/src/lib/driective/EchartsDirective.ts @@ -1,4 +1,4 @@ -import { Directive, ElementRef, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from "@angular/core"; +import { Directive, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges } from "@angular/core"; import { Subscription } from "rxjs"; import * as echarts from 'echarts/core'; @@ -19,11 +19,14 @@ export class EchartsDirective implements OnInit, OnDestroy, OnChanges { @Input() defaultHeight: number = 400; @Input() periodicityInMiliSeconds: number = 2000; @Input() theme: Object | string = ''; + + @Output() echartsInstance = new EventEmitter(); + private _echartsInstance: echarts.ECharts | undefined; private _subscription: Subscription | undefined; - constructor ( + constructor( private readonly _el: ElementRef ) { } @@ -32,7 +35,8 @@ export class EchartsDirective implements OnInit, OnDestroy, OnChanges { this._echartsInstance = echarts.init(this._el.nativeElement, this.theme, { width: this._el.nativeElement.clientWidth === this.defaultWidth ? 400 : undefined, height: this._el.nativeElement.clientHeight === 0 ? this.defaultHeight : undefined - }) + }); + this.echartsInstance.emit(this._echartsInstance); this._setParams(); if (this.isResizable) { this._addResizbleFunctionality();