耀极客论坛

 找回密码
 立即注册
查看: 557|回复: 0

详解angular中使用echarts地图

[复制链接]

336

主题

318

帖子

22万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
220555
发表于 2022-5-8 02:12:25 | 显示全部楼层 |阅读模式
  这篇文章主要为大家介绍了angular中使用echarts地图,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
  在angular中使用echart的时候,只需要在对应的组件生命周期中调用echart的api就可以了

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

app-base-chart组件

html
  1. ‹div #chart [ngClass]="'chart-box ' + (!option ? 'empty-chart' : '')">‹/div>
复制代码
css
  1. // 基本的图表样式
  2. .chart-box{
  3.   font-weight: bold;
  4.   border: 1px solid #dcdcdc;
  5.   border-radius: 4px;
  6. }
  7. // option暂无的时候的样式
  8. .empty-chart{
  9.   display: flex;
  10.   justify-content: center;
  11.   align-items: center;
  12.   font-size: 18px;
  13. }
复制代码
  1. import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
  2. import { fromEvent, Subscription, timer } from 'rxjs';
  3. import { debounceTime, tap } from 'rxjs/operators';
  4. import { ECharts, EChartsOption, init } from 'echarts';
  5. @Component({
  6.   selector: 'app-base-chart',
  7.   templateUrl: './base-chart.component.html',
  8.   styleUrls: ['./base-chart.component.scss']
  9. })
  10. export class BaseChartComponent implements OnInit, OnDestroy {
  11.   @Input() option: EChartsOption;
  12.   @Input() height = '300px';
  13.   @Input() width = '100%';
  14.   @ViewChild('chart', { static: true }) chart: ElementRef;
  15.   aChart: ECharts;
  16.   windowResize: Subscription;
  17.   timer: Subscription;
  18.   defaultGrid = {
  19.     top: 10,
  20.     right: 10,
  21.     bottom: 30,
  22.     left: 30,
  23.   };
  24.   constructor() { }
  25.   ngOnInit(): void {
  26.     this.setListen();
  27.     this.boxStyleInit();
  28.     if (!!this.option) {
  29.       this.echartsInit();
  30.     }else{
  31.       this.chart.nativeElement.innerText = '暂无数据';
  32.     }
  33.   }
  34.   // 当组件销毁的时候,取消相关订阅
  35.   ngOnDestroy(): void {
  36.     if (this.windowResize) {
  37.       this.windowResize.unsubscribe();
  38.     }
  39.     if (this.timer) {
  40.       this.timer.unsubscribe();
  41.     }
  42.   }
  43.   // 初始化容器的大小size
  44.   boxStyleInit(): void {
  45.     this.chart.nativeElement.style.width = this.width;
  46.     this.chart.nativeElement.style.height = this.height;
  47.   }
  48.   // 设置window的resize事件监听,并重绘echarts的大小
  49.   setListen(): void {
  50.     this.windowResize = fromEvent(window, 'resize').pipe(
  51.       debounceTime(200),
  52.       tap(res => {
  53.         this.aChart.resize();
  54.       })
  55.     ).subscribe();
  56.   }
  57.   // 根据option配置和生成echarts图表
  58.   echartsInit(): void {
  59.     this.aChart = init(this.chart.nativeElement);
  60.     this.aChart.setOption(Object.assign({ grid: this.defaultGrid }, this.option));
  61.     // 通过延时器进行echarts的大小重绘
  62.     this.timer = timer(400).subscribe(res => {
  63.       this.aChart.resize();
  64.     });
  65.   }
  66. }
复制代码
使用app-base-chart组件
  1. ‹app-base-chart [option]="option" width="100%" height="300px" >‹/app-base-chart>
复制代码
  只需要在组件的html中像上面代码运用就可以,同时还可以配置height和width。option为echarts官方定义的option
  这样其实就是简单封装了一个基本的echarts生成组件,所有的配置项都是echarts的

总结

  本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-7 12:32 , Processed in 0.071914 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表