Merge pull request #21 from alixdehghani/feature/#7-event-emitter-for…

…-charts-ready add event emitter for charts ready
alixdehghani · May 10, 2021 · 5861af4 · 5861af4
2 parents f6b201c + ffee9ab
commit 5861af4
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 3 deletions.
diff --git 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
+<div echarts class="demo-chart" [options]="chartOptions" (echartsInstance)="onChartInit($event)"></div>
+```
+
+- component:
+
+```typescript
+onChartInit(ec) {
+  this.echartsInstance = ec;
+}
+
+resizeChart() {
+  if (this.echartsInstance) {
+    this.echartsInstance.resize();
+  }
+}
+```
diff --git 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
+<div echarts class="demo-chart" [options]="chartOptions" (echartsInstance)="onChartInit($event)"></div>
+```
+
+- component:
+
+```typescript
+onChartInit(ec) {
+  this.echartsInstance = ec;
+}
+
+resizeChart() {
+  if (this.echartsInstance) {
+    this.echartsInstance.resize();
+  }
+}
+```
diff --git 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<echarts.ECharts>();
+
     private _echartsInstance: echarts.ECharts | undefined;
 
     private _subscription: Subscription | undefined;
 
-    constructor (
+    constructor(
         private readonly _el: ElementRef<HTMLElement>
     ) { }
 
@@ -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();