详解angular中使用echarts地图
程序员文章站
2022-03-02 07:52:24
目录echart的初始化app-base-chart组件htmlcss使用app-base-chart组件总结在angular中使用echart的时候,只需要在对应的组件生命周期中调用echart的a...
在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的
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注的更多内容!
上一篇: phpredis执行LUA脚本示例代码
推荐阅读
-
java-使用war将spring-boot和angular 7应用程序部署到tomcat 8.5中
-
PHP中session使用方法详解第1/2页
-
linux中cd命令使用详解_PHP
-
WordPress中创建用户角色的相关PHP函数使用详解,
-
php中static静态变量的使用方法详解
-
ThinkPHP中limit()使用方法详解,thinkphplimit_PHP教程
-
Python中类的定义、继承及使用对象实例详解
-
在使用angular4中出现JavaScript内存溢出问题(详细教程)
-
jQuery编程开发中$.each使用详解
-
PHP中uploaded_files函数使用方法详解_PHP