在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的
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注编程网的更多内容!
