EchartsForAngular

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

• Online Demo

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 {} 

2. 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();
  }
}