您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)angular中怎么使用echarts地圖,小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
在angular中使用echart的時(shí)候,只需要在對(duì)應(yīng)的組件生命周期中調(diào)用echart的api就可以了
在component的ngOnInit事件中進(jìn)行echarts的初始化,配置option,然后echarts圖表就生成了
<div #chart [ngClass]="'chart-box ' + (!option ? 'empty-chart' : '')"></div>
// 基本的圖表樣式 .chart-box{ font-weight: bold; border: 1px solid #dcdcdc; border-radius: 4px; } // option暫無(wú)的時(shí)候的樣式 .empty-chart{ display: flex; justify-content: center; align-items: center; font-size: 18px; }
import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'; import { fromEvent, Subscription, timer } from 'rxjs'; import { debounceTime, tap } from 'rxjs/operators'; import { ECharts, EChartsOption, init } from 'echarts'; @Component({ selector: 'app-base-chart', templateUrl: './base-chart.component.html', styleUrls: ['./base-chart.component.scss'] }) export class BaseChartComponent implements OnInit, OnDestroy { @Input() option: EChartsOption; @Input() height = '300px'; @Input() width = '100%'; @ViewChild('chart', { static: true }) chart: ElementRef; aChart: ECharts; windowResize: Subscription; timer: Subscription; defaultGrid = { top: 10, right: 10, bottom: 30, left: 30, }; constructor() { } ngOnInit(): void { this.setListen(); this.boxStyleInit(); if (!!this.option) { this.echartsInit(); }else{ this.chart.nativeElement.innerText = '暫無(wú)數(shù)據(jù)'; } } // 當(dāng)組件銷毀的時(shí)候,取消相關(guān)訂閱 ngOnDestroy(): void { if (this.windowResize) { this.windowResize.unsubscribe(); } if (this.timer) { this.timer.unsubscribe(); } } // 初始化容器的大小size boxStyleInit(): void { this.chart.nativeElement.style.width = this.width; this.chart.nativeElement.style.height = this.height; } // 設(shè)置window的resize事件監(jiān)聽(tīng),并重繪echarts的大小 setListen(): void { this.windowResize = fromEvent(window, 'resize').pipe( debounceTime(200), tap(res => { this.aChart.resize(); }) ).subscribe(); } // 根據(jù)option配置和生成echarts圖表 echartsInit(): void { this.aChart = init(this.chart.nativeElement); this.aChart.setOption(Object.assign({ grid: this.defaultGrid }, this.option)); // 通過(guò)延時(shí)器進(jìn)行echarts的大小重繪 this.timer = timer(400).subscribe(res => { this.aChart.resize(); }); } }
<app-base-chart [option]="option" width="100%" height="300px" ></app-base-chart>
只需要在組件的html中像上面代碼運(yùn)用就可以,同時(shí)還可以配置height和width。option為echarts官方定義的option
這樣其實(shí)就是簡(jiǎn)單封裝了一個(gè)基本的echarts生成組件,所有的配置項(xiàng)都是echarts的
關(guān)于“angular中怎么使用echarts地圖”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。