Echarts in angular project
Here you will get the idea, how we can design any chart in angular with the help of echarts baidu script.
Step1 – > first you need to run below mentioned command to include echarts dependency locally like,
npm install echarts --savenpm install angular2-echarts --saveStep2 – > Now you have to include below code in angular.json file so that you can use echarts in your angular project
angular.json
"scripts": [
"./node_modules/echarts/dist/echarts-en.js",
"./node_modules/echarts/dist/echarts-en.min.js"
]Step3 – > Now, you need import AngularEchartsModule module in your app.module.ts file.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {AngularEchartsModule} from 'node_modules/angular2-echarts';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
AngularEchartsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Step4 – > See the below echarts script that i have design for Pie Chart from echarts editor like,
app.component.ts.
import { Component} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
echartsIntance: any;
pieChart1 = {
backgroundColor: ['#2B2222'],
title: {
x: 'center',
textStyle: {
color: '#fff'
}
},
color: ['#a9a9a9', '#ffa500', '#FF0000'],
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}:{c}({d}%)" //{c}-for count and ({d}%)- for calculate % of total count
},
legend: {
orient: 'horizontal',
top: 5,
left: 2,
textStyle: {
color: '#fff'
},
// x : 'left',
data: ['file 1', 'File 2', 'File 3']
},
toolbox: {
show: true,
backgroundColor: 'lightblue',
orient: 'vertical',
top: 30,
feature: {
dataView: {
show: false,
title: 'Data View',
readOnly: true
},
restore: { show: true },
saveAsImage: { show: true }
}
},
series: [
{
name: 'Error Count',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
//include label to show count and % inside
label: {
normal: {
formatter: ' {c} ({d}%)',
position: 'inside'
}
},
data: [
{ value: 660, name: 'File 1' },
{ value: 300, name: 'File 2' },
{ value: 20, name: 'File 3' }
]
}
]
}
}
Step5 – > Next include below code in your app.component.html,
<div echarts [options]="pieChart1" style="width:800px;height:400px;"> </div>Remember you must have to provide width and height in order to get the design otherwise you will not get the result.
Step6 – > Next if you are already running server then stop the server using Ctrl+shift+Alt .Because Sometimes you will not get design.
And so rebuild using ng build then start the server using ng serve command.
So now in my case, i got the design like
If you have any doubt then feel free to mention in comment box.
Thanks.
