Merge branch 'master' of https://github.com/twp0217/ngx-echarts

CHANGELOG.md

@@ -1,3 +1,12 @@
+# [6.1.0](https://github.com/twp0217/ngx-echarts/compare/v6.0.2...v6.1.0) (2018-11-15)
+
+
+### Features
+
+* 增加自动调整大小(autoResize) ([2061d2c](https://github.com/twp0217/ngx-echarts/commit/2061d2c))
+
+
+
 ## [6.0.2](https://github.com/twp0217/ngx-echarts/compare/v6.0.1...v6.0.2) (2018-11-13)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-echarts-demo",
-  "version": "6.0.2",
+  "version": "6.1.0",
   "scripts": {
     "ng": "ng",
     "start": "npm run build:lib && ng serve",

projects/ngx-echarts/src/component/ngx-echarts.component.html

@@ -0,0 +1 @@
+<div #host class="echarts-container"></div>

projects/ngx-echarts/src/component/ngx-echarts.component.scss

@@ -0,0 +1,6 @@
+:host {
+  display: block;
+}
+.echarts-container {
+  height: 100%;
+}

projects/ngx-echarts/src/component/ngx-echarts.component.ts

@@ -10,8 +10,12 @@ import {
   NgZone,
   OnChanges,
   SimpleChange,
-  SimpleChanges
+  SimpleChanges,
+  DoCheck,
+  HostListener
 } from "@angular/core";
+import { Subject, Subscription } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
 
 import { init, connect, disConnect } from "echarts";
 import {
@@ -29,9 +33,15 @@ import {
 
 @Component({
   selector: "ngx-echarts",
-  template: "<div #host></div>"
+  templateUrl: './ngx-echarts.component.html',
+  styleUrls: ['./ngx-echarts.component.scss']
 })
-export class NgxEchartsComponent implements AfterViewInit, OnChanges, OnDestroy {
+export class NgxEchartsComponent implements AfterViewInit, OnChanges, DoCheck, OnDestroy {
+  private offsetWidth: number;
+  private offsetHeight: number;
+  private resizeSubject$ = new Subject<void>();
+  private resizeSubscription$: Subscription;
+
   echartsInstance: ECharts;
 
   @Input()
@@ -54,6 +64,9 @@ export class NgxEchartsComponent implements AfterViewInit, OnChanges, OnDestroy
   @Input()
   loadingOpts: object;
 
+  @Input()
+  autoResize: boolean = false;
+
   @Output()
   onBeforeInit: EventEmitter<any> = new EventEmitter();
   @Output()
@@ -64,7 +77,31 @@ export class NgxEchartsComponent implements AfterViewInit, OnChanges, OnDestroy
   @ViewChild("host")
   host: ElementRef;
 
-  constructor(private el: ElementRef, private ngZone: NgZone) {}
+  constructor(private el: ElementRef, private ngZone: NgZone) { }
+
+  private buildSubscribe() {
+    this.resizeSubscription$ = this.resizeSubject$.pipe(debounceTime(100)).subscribe(() => {
+      this.resize();
+    });
+  }
+
+  private triggerSubscribe() {
+    if (this.autoResize && this.echartsInstance) {
+      const offsetWidth = this.el.nativeElement.offsetWidth;
+      const offsetHeight = this.el.nativeElement.offsetHeight;
+
+      if (this.offsetWidth !== offsetWidth || this.offsetHeight !== offsetHeight) {
+        this.offsetWidth = offsetWidth;
+        this.offsetHeight = offsetHeight;
+        this.resizeSubject$.next();
+      }
+    }
+  }
+
+  @HostListener('window:resize', ['$event'])
+  windowResize(event: Event) {
+    this.triggerSubscribe();
+  }
 
   ngAfterViewInit() {
     this.init();
@@ -89,23 +126,32 @@ export class NgxEchartsComponent implements AfterViewInit, OnChanges, OnDestroy
     }
   }
 
+  ngDoCheck() {
+    this.triggerSubscribe();
+  }
+
   ngOnDestroy() {
     this.dispose();
+    if (this.resizeSubscription$) {
+      this.resizeSubscription$.unsubscribe();
+    }
   }
 
   init() {
     if (!this.echartsInstance) {
-      if (!(this.initOpts && this.initOpts.height)) {
-        this.initOpts = this.initOpts || {};
-        this.initOpts.height = 400;
+      this.offsetWidth = this.el.nativeElement.offsetWidth;
+      this.offsetHeight = this.el.nativeElement.offsetHeight;
+      if (!(this.initOpts && this.initOpts.height) && this.offsetHeight === 0) {
+        this.el.nativeElement.style.height = "500px";
       }
       this.ngZone.runOutsideAngular(() => {
         this.onBeforeInit.emit();
         this.echartsInstance = init(this.host.nativeElement, this.theme, this.initOpts);
         this.onAfterInit.emit();
-        this.setOption();
-        this.echartsInstance.group = this.group;
       });
+      this.setOption();
+      this.echartsInstance.group = this.group;
+      this.buildSubscribe();
     } else {
       this.setOption();
     }