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