chart using echart baidu library Tag

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 --save

npm install angular2-echarts --save

Step2 – > 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.