Skip to content

alixdehghani/echarts-for-angular

Repository files navigation

EchartsForAngular

Angular directive for Apache ECharts (incubating) (version >= 5.x)

Getting Started

echarts-for-angular is an Angular (ver >= 9.x) directive for ECharts (ver >= 5.x).

Installation

# if you use npm
npm install echarts -S
npm install echarts-for-angular

# or if you use yarn
yarn add echarts
yarn add echarts-for-angular
  • If you need ECharts GL support, please install it first:
# if you use npm
npm install echarts-gl -S

# or if you use yarn
yarn add echarts-gl

Usage

Please refer to the demo page.

  1. Firstly, import NgxEchartsModule in your app module (or any other proper angular module):
import { EchartsxModule } from 'echarts-for-angular';

   @NgModule({
     imports: [EchartsxModule],
   })
   export class AppModule {} 
  1. Then: use echarts directive in a div which has pre-defined height. (default width & height: 400px)
  • Simple example:

    • html:
    <div echarts [options]="echartsOptions" [extentions]="echartsExtentions"></div>
    • component:
    import { Component, OnInit } from "@angular/core";
    import { BarChart } from "echarts/charts";
    import { TooltipComponent, GridComponent, LegendComponent } from "echarts/components";
    
    @Component({
       selector: "app-bar-chart",
       templateUrl: "./bar-chart.component.html",
       styleUrls: ["./bar-chart.component.css"]
    })
    export class BarChartComponent implements OnInit {
    readonly echartsExtentions: any[];
    echartsOptions: object = {};
    
    constructor() {
       this.echartsExtentions = [BarChart, TooltipComponent, GridComponent, LegendComponent];
    }
    
    ngOnInit() {
       this.echartsOptions = {
           tooltip: {
               trigger: "axis",
               axisPointer: {
               type: "shadow"
               }
           },
           grid: {
               left: "3%",
               right: "4%",
               bottom: "8%",
               top: "3%",
               containLabel: true
           },
           xAxis: {
                type: "value"
           },
           yAxis: {
               type: "category",
               data: ["sat", "sun", "mon", "tue", "wed", "thu", "fri"],
               axisLabel: {
               interval: 0,
               rotate: 15
               }
           },
           legend: {
               data: ["ali", "behrooz"],
               bottom: 0
           },
           series: [
           {
               name: "ali",
               type: "bar",
               data: [10, 15, 17, 4, 15, 31, 2]
           },
           {
               name: "behrooz",
               type: "bar",
               data: [1, 17, 12, 11, 40, 3, 21]
           }
           ]
       };
    }
    }

API

Directive

echarts directive support following input properties:

Input Type Default Description
[options] EChartsOption null The same as the options on the official demo site.
[extentions] array null echarts extentions you need to create a chart.
[defaultWidth] number 400 if the html element that specifies for draw chart has no width the default width will be apply.
[defaultHeight] number 400 if the html element that specifies for draw chart has no height the default height will be apply.
[theme] string | Object "" Theme to be applied. This can be a configuring object of a theme, or a theme name registered through echarts.registerTheme. you can use dark for active dark theme
[isResizable] boolean true enable or disable auto resize function.
[periodicityInMiliSeconds] number 2000 time for recheck the chart size changes then resize method will be call.

ECharts Instance

echartsInstance is exposed in the (chartInit) event, enabling you to directly call functions like: resize(), showLoading(), etc. For example:

  • html:
<div echarts class="demo-chart" [options]="chartOptions" (chartInit)="onChartInit($event)"></div>
  • component:
onChartInit(ec) {
  this.echartsInstance = ec;
}

resizeChart() {
  if (this.echartsInstance) {
    this.echartsInstance.resize();
  }
}