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