angular中怎么使用echarts地图

魁首哥

作者

angular中怎么使用echarts地图

这篇文章将为大家详细讲解有关angular中怎么使用echarts地图，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

在angular中使用echart的时候，只需要在对应的组件生命周期中调用echart的api就可以了

angular中怎么使用echarts地图

echart的初始化

在component的ngOnInit事件中进行echarts的初始化，配置option，然后echarts图表就生成了

app-base-chart组件

html

<div#chart[ngClass]="'chart-box'+(!option?'empty-chart':'')"></div>

css

//基本的图表样式.chart-box{font-weight:bold;border:1pxsolid#dcdcdc;border-radius:4px;}//option暂无的时候的样式.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']})exportclassBaseChartComponentimplementsOnInit,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='暂无数据';}}//当组件销毁的时候，取消相关订阅ngOnDestroy():void{if(this.windowResize){this.windowResize.unsubscribe();}if(this.timer){this.timer.unsubscribe();}}//初始化容器的大小sizeboxStyleInit():void{this.chart.nativeElement.style.width=this.width;this.chart.nativeElement.style.height=this.height;}//设置window的resize事件监听，并重绘echarts的大小setListen():void{this.windowResize=fromEvent(window,'resize').pipe(debounceTime(200),tap(res=>{this.aChart.resize();})).subscribe();}//根据option配置和生成echarts图表echartsInit():void{this.aChart=init(this.chart.nativeElement);this.aChart.setOption(Object.assign({grid:this.defaultGrid},this.option));//通过延时器进行echarts的大小重绘this.timer=timer(400).subscribe(res=>{this.aChart.resize();});}}