这篇文章将为大家详细讲解有关angular中怎么使用echarts地图,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
在angular中使用echart的时候,只需要在对应的组件生命周期中调用echart的api就可以了
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: 1px solid #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']})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 = '暂无数据'; } } // 当组件销毁的时候,取消相关订阅 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; } // 设置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(); }); }}
使用app-base-chart组件
<app-base-chart [option]="option" width="100%" height="300px" ></app-base-chart>
只需要在组件的html中像上面代码运用就可以,同时还可以配置height和width。option为echarts官方定义的option
这样其实就是简单封装了一个基本的echarts生成组件,所有的配置项都是echarts的
关于“angular中怎么使用echarts地图”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。