Home

Awesome

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

API

Directive

echarts directive support following input properties:

InputTypeDefaultDescription
[options]EChartsOptionnullThe same as the options on the official demo site.
[extentions]arraynullecharts extentions you need to create a chart.
[defaultWidth]number400if the html element that specifies for draw chart has no width the default width will be apply.
[defaultHeight]number400if 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]booleantrueenable or disable auto resize function.
[periodicityInMiliSeconds]number2000time 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:

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

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