欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

详解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的

总结

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