Shulou(Shulou.com)06/02 Report--

This article will explain in detail how to use echarts maps in angular. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

When using echart in angular, you only need to call echart's api in the corresponding component life cycle.

Initialization of echart

Initialize echarts in the ngOnInit event of component, configure option, and then the echarts diagram is generated

App-base-chart component htmlcss// basic chart style. Chart-box {font-weight: bold; border: 1px solid # dcdcdc; border-radius: 4px;} / option when not available. 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 = '300pxrabbit; @ 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 ='no data yet';}} / / when the component is destroyed, cancel the subscription ngOnDestroy (): void {if (this.windowResize) {this.windowResize.unsubscribe ();} if (this.timer) {this.timer.unsubscribe () }} / / initialize the size of the container size boxStyleInit (): void {this.chart.nativeElement.style.width = this.width; this.chart.nativeElement.style.height = this.height;} / / set the resize event listener for window, and redraw the size of echarts setListen (): void {this.windowResize = fromEvent (window, 'resize'). Pipe (debounceTime), tap (res = > {this.aChart.resize () }) .subscribe ();} / configure and generate echarts diagrams according to option echartsInit (): void {this.aChart = init (this.chart.nativeElement); this.aChart.setOption (Object.assign ({grid: this.defaultGrid}, this.option)); / / redraw the size of echarts through a delay this.timer = timer (400) .subscribe (res = > {this.aChart.resize ();}) }} use app-base-chart components

You only need to use the code like above in the html of the component, and you can also configure height and width. Option is the option officially defined by echarts

In fact, it simply encapsulates a basic echarts generation component, and all configuration items are echarts.

This is the end of this article on "how to use echarts Maps in angular". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.