详解angular中使用echarts地图
更新时间:2021年12月22日 23:11 点击:866 作者:桐溪漂流
在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的
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注猪先飞的更多内容!
原文出处:https://blog.csdn.net/qq564280420/article/details/119215089
下一篇: angular父子组件通信详解
相关文章
- 这篇文章主要介绍了解决echarts 一条柱状图显示两个值,类似进度条的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-20
- 采用CSS覆盖的方法就可以了,但是官方是不允许这么做的...2013-10-13
- overlay就是在地图上以另外一种形式浮现在地图上,常见的地图覆盖物为这三种类型,如:popup 弹窗、label标注信息、text文本信息等,接下来跟随小编看下openlayers6之地图覆盖物overlay详解,一起看看吧...2021-09-15
- 这篇文章主要介绍了vue+高德地图实现地图搜索及点击定位操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-09
- 这篇文章主要介绍了Angular性能优化之第三方组件和懒加载技术,对性能优化感兴趣的同学,可以参考下...2021-05-11
- 这篇文章主要介绍了React使用高德地图的实现示例(react-amap),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
这篇文章主要介绍了在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入),本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
以下是使用js代码实现百度地图计算两地距离,代码如下所示:<script src="js/jquery-1.9.0.js" type="text/javascript" language="javascript"></script><script language="javascript" type="text/javascript" src="js/...2015-10-30- 这篇文章主要介绍了基于Ionic3实现选项卡切换并重新加载echarts,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-24
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
本文给大家介绍javascript实现高德地图和百度地图提取行政区边界经纬度坐标的相关知识,本文实用性非常高,代码简单易懂,需要的朋友参考下吧...2016-01-24- 这篇文章主要给大家介绍了关于Angular利用HTTP POST下载流文件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者使用Angular具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧...2020-07-26
- 思路其实没有那么复杂,把地图想成一个盒子容器,地图中心点想成盒子中心点;扎点在【地图中心点】不会动,当移动地图时,去获取【地图中心点】经纬度,设置某个位置的时候,将经纬度设置为【地图中心点】即可...2021-06-20
- 这篇文章主要介绍了百度地图API之百度地图退拽标记点获取经纬度的实现代码,需要的朋友可以参考下...2017-01-16
- 这篇文章主要给大家介绍了关于Angular如何处理未可知异常错误的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-17
- 这篇文章主要介绍了详解Javascript利用echarts画空气质量地图,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-10-11
使用Angular CDK实现一个Service弹出Toast组件功能
本文主要写用cdk实现一个简单的Toast组件,使用的是cdk中的overlay模块,需要手动安装环境,具体安装方法及相关实现代码跟随小编一起看看吧...2021-07-28- 相信大家现在都知道微信小程序吧,下面这篇文章主要给大家介绍了微信小程序开发之map地图的相关资料,分享出来供大家参考学习,文中通过示例代码介绍的非常详细,需要的朋友们下面跟着小编来一起学习学习吧。...2017-06-15
- 众所周知echarts是一个纯JavaScript的图标库,下面这篇文章主要给大家介绍了关于Echarts实例之树形图表的实现方法,需要的朋友可以参考下...2021-08-06
- 这篇文章主要介绍了百度地图给map添加右键菜单(判断是否为marker) 的相关资料,需要的朋友可以参考下...2016-03-07
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
以下是使用js代码实现百度地图计算两地距离,代码如下所示:<script src="js/jquery-1.9.0.js" type="text/javascript" language="javascript"></script><script language="javascript" type="text/javascript" src="js/...2015-10-30