admin

Please wait...

show_chart ECharts Charts

ngx-echarts is an Angular directive for ECharts. It provides a simple way to integrate ECharts into your Angular applications.

info For more detailed information, please check the Official ngx-echarts Documentation.
get_appStep 1: Installation

Install the required packages via npm:

npm install echarts ngx-echarts --save
npm install @types/echarts --save-dev
extensionStep 2: Import Module

Import NgxEchartsModule in your module:

import { NgxEchartsModule } from 'ngx-echarts';
import * as echarts from 'echarts';

@NgModule({
  imports: [
    ...
    NgxEchartsModule.forRoot({
      echarts
    })
  ]
})
htmlStep 3: Usage

Add the chart component to your HTML template:

<div echarts [options]="chartOptions" class="echart-height"></div>
settings_ethernetStep 4: Component Configuration

Define the chart options in your component: 

import { Component } from "@angular/core";
import { EChartsOption } from "echarts";

@Component({
  selector: "app-echart",
  templateUrl: "./echart.component.html"
})
export class EchartComponent {
  chartOptions: EChartsOption = {
    grid: {
      top: "6",
      right: "0",
      bottom: "17",
      left: "25"
    },
    xAxis: {
      data: ["2014", "2015", "2016", "2017", "2018"],
      axisLabel: { fontSize: 10, color: "#9aa0ac" }
    },
    tooltip: {
      trigger: "axis"
    },
    yAxis: {
      axisLabel: { fontSize: 10, color: "#9aa0ac" }
    },
    series: [
      {
        name: "sales",
        type: "bar",
        data: [13, 14, 10, 16, 11, 13]
      },
      {
        name: "growth",
        type: "bar",
        data: [10, 14, 10, 15, 9, 25]
      }
    ],
    color: ["#9f78ff", "#32cafe"]
  };
}