#3. How to use Basic Area Line Echarts with Angular 10

Read time : 8-10 minutes

Step-1 : Create a Angular 10 Project .

If you haven't created an Angular 10 project yet then visit the following link otherwise skip this step.

CLICK HERE TO VISIT.

Step-2 : Integrate of Echarts with Angular 10 .

If you haven't integrated Echarts with an Angular 10 project yet then visit the following link otherwise skip this step.

CLICK HERE TO VISIT.

Step-3 : Create Component (Create html , scss and ts file).

Please find the component which I have created for basic area line chart with code

	<div fxLayoutGap="1rem" fxLayout="column">
	<mat-checkbox [(ngModel)]="_isDarkMode" (change)="ngOnInit()">Dark Mode</mat-checkbox>
	<div echarts [options]="_chartOption" [theme]="_theme"> </div>
	</div>

view raw basic-area-echarts.component.html hosted with ❤ by GitHub

NO CODE CHANGES.

view raw basic-area-echarts.component.scss hosted with ❤ by GitHub

	import { Component, OnInit, OnDestroy } from '@angular/core';
	import { Subscription } from 'rxjs';
	import { EchartService } from 'src/app/common/service/echart.service';
	import { BasicEchartLineModel } from 'src/app/common/model/echart.model';
	import { EChartOption } from 'echarts';
	@Component({
	selector: 'app-basic-area-echarts',
	templateUrl: './basic-area-echarts.component.html',
	styleUrls: ['./basic-area-echarts.component.scss']
	})
	export class BasicAreaEchartsComponent implements OnInit, OnDestroy {
	_chartOption: EChartOption;
	subscription: Subscription;
	_isDarkMode: boolean = false;
	_theme: string;
	constructor(private echartSevrice: EchartService) { }
	ngOnInit(): void {
	this.subscription = this.echartSevrice.getbasicAreaEchartData().subscribe(data => {
	this._initBasicAreaEcharts(data);
	})
	}
	ngOnDestroy() {
	if (this.subscription) {
	this.subscription.unsubscribe();
	}
	}
	private _initBasicAreaEcharts(chartData: BasicEchartLineModel[]) {
	this._theme = this._isDarkMode ? 'dark' : '';
	this._chartOption = {
	tooltip: {
	show: true
	},
	xAxis: {
	type: 'category',
	data: chartData.map(m => ({
	value: m.name
	}))
	},
	yAxis: {
	type: 'value'
	},
	series: [{
	data: chartData.map(m => ({
	value: m.value
	})),
	type: 'line',
	areaStyle: {}
	}]
	}
	}
	}

view raw basic-area-echarts.component.ts hosted with ❤ by GitHub

Step-4 : Create Service file to get data from service.

	import { Injectable } from '@angular/core';
	import { HttpClient } from "@angular/common/http";
	import { Observable } from 'rxjs';
	import { BasicEchartLineModel, StackedLineEchartmodel } from '../model/echart.model';
	@Injectable()
	export class EchartService {
	constructor(private httpClient: HttpClient) { }
	getbasicAreaEchartData() :Observable<BasicEchartLineModel[]>{
	return this.httpClient.get<BasicEchartLineModel[]>('assets/echart/basic-area-chart-data.json');
	}
	}

view raw echart.service.ts hosted with ❤ by GitHub

Step-5 : Create model class to map service value into model properties.

	export interface BasicEchartLineModel {
	name: string;
	value: number;
	}

view raw echart.model.ts hosted with ❤ by GitHub

Step-6 : Create .json file  under asset folder and also add some dummy json data required for echarts.

NOTE : We have called  this file to get data using get service under echart.service.ts.

	[
	{
	"name": "Monday",
	"value": 500
	},
	{
	"name": "Tuesday",
	"value": 100
	},
	{
	"name": "Wednesday",
	"value": 1500
	},
	{
	"name": "Thrusday",
	"value": 2000
	},
	{
	"name": "Friday",
	"value": 300
	},
	{
	"name": "Saturday",
	"value": 600
	},
	{
	"name": "Sunday",
	"value": 50
	},
	{
	"name": "Sunday1",
	"value": 5000
	}
	]

view raw basic-area-chart-data.json hosted with ❤ by GitHub

Step-7 : Add entries of components , services etc into module file.

	import { BrowserModule } from '@angular/platform-browser';
	import { NgModule } from '@angular/core';
	import { AppRoutingModule } from './app-routing.module';
	import { AppComponent } from './app.component';
	import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
	import { FormsModule } from '@angular/forms';
	import { HttpClientModule } from "@angular/common/http";
	import { BasicAreaEchartsComponent } from './echarts/line/basic-area-echarts/basic-area-echarts.component';
	import { NgxEchartsModule } from 'ngx-echarts';
	import { EchartService } from './echarts/echart.service';
	@NgModule({
	declarations: [
	AppComponent,
	BasicAreaEchartsComponent
	],
	imports: [
	FormsModule,
	HttpClientModule,
	BrowserModule,
	AppRoutingModule,
	BrowserAnimationsModule,
	NgxEchartsModule
	],
	providers: [EchartService],
	bootstrap: [AppComponent]
	})
	export class AppModule { }

view raw app.module.ts hosted with ❤ by GitHub

Conclusion : 

This is all about Basic area line echarts. But note this is not the full source code , this is just a major piece of code .

To get the full source code please click on the following link.

Full Source Code

---

See Project Demo : 

https://dorado2041.github.io/echarts-angular-project-deployed/

Find Source Code :

https://github.com/dorado2041/echarts-angular-project

For more updates please follow us on :

Twitter      : https://www.twitter.com/dorado2041

Facebook  : https://www.facebook.com/dorado2041

Instagram : https://www.instagram.com/dorado2041

Blogger      : https://doradosolutions.blogspot.com

Youtube      : https://www.youtube.com/channel/UCgATTiSoP15uQL37se2cCpA