angular2-echarts

Angular directive for echarts v3. Please refer to the demo page.

Getting Started
Latest Update
Installation
Usage
API
Events
Demo

Getting Started

angular2-echarts is an angular (ver >= 2.x) structural directive for Baidu's echarts v3.

Latest Update

2017.05.10: Support theme.
2017.05.02: Expose echartsInstance in chartInit event. So we can directly call the API provided by echarts instance. Refer to: http://echarts.baidu.com/api.html#echartsInstance

Installation

npm install echarts --save

npm install angular2-echarts --save

How to use it with:

angular-cli: If you already have an angular-cli project. You need to import echarts in the "scripts" list of .angular-cli.json just like:

{
  "scripts": [
    "../node_modules/echarts/dist/echarts.js",
  ],
}

index.html: If you don't use angular-cli. You need to add script tag in "index.html" just like:

<script type='text/javascript' src='vendor/path/echarts/dist/echarts.js'></script>

Usage

Please refer to the demo page.

Firstly, import AngularEchartsModule in your app module (or any other proper angular module):

import { AngularEchartsModule } from 'angular2-echarts';

@NgModule({
  imports: [
    ...,
    AngularEchartsModule
  ],
  ...
})
export class AppModule { }

Then: use echarts directive in a div which has pre-defined height.

Simple example:

html:

<div echarts [options]="chartOption" class="demo-chart"></div>

css:

.demo-chart {
  height: 400px;
}

component:

chartOption = {
  title: {
    text: '堆叠区域图'
  },
  tooltip : {
    trigger: 'axis'
  },
  legend: {
    data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis : [
    {
      type : 'category',
      boundaryGap : false,
      data : ['周一','周二','周三','周四','周五','周六','周日']
    }
  ],
  yAxis : [
    {
      type : 'value'
    }
  ],
  series : [
    {
      name:'邮件营销',
      type:'line',
      stack: '总量',
      areaStyle: {normal: {}},
      data:[120, 132, 101, 134, 90, 230, 210]
    },
    {
      name:'联盟广告',
      type:'line',
      stack: '总量',
      areaStyle: {normal: {}},
      data:[220, 182, 191, 234, 290, 330, 310]
    },
    {
      name:'视频广告',
      type:'line',
      stack: '总量',
      areaStyle: {normal: {}},
      data:[150, 232, 201, 154, 190, 330, 410]
    },
    {
      name:'直接访问',
      type:'line',
      stack: '总量',
      areaStyle: {normal: {}},
      data:[320, 332, 301, 334, 390, 330, 320]
    },
    {
      name:'搜索引擎',
      type:'line',
      stack: '总量',
      label: {
        normal: {
          show: true,
          position: 'top'
        }
      },
      areaStyle: {normal: {}},
      data:[820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
}

API

echarts directive support following input porperties:

options: It's the same with the options in official demo site.
dataset: You can ignore the "data" property in "series" of the options, and use dataset to bind the series data instead.
loading: boolean property. Use it to toggle the echarts loading animation when your data is not ready.
theme: use it to init echarts with theme. You need to include the theme file in .angular-cli.json or the index.html. For example, if we want to use dark.js in Echarts Themes Page:
```
<div echarts theme="dark" class="demo-chart" [options]="chartOptions"></div>
```

It exposes the echartsInstance (since v1.1.6) in 'chartInit' event. So you can directly call the APIs just like: resize(), showLoading(), etc. For example:

html:

<div echarts class="demo-chart" [options]="chartOptions" (chartInit)="onChartInit($event)"></div>

component:

onChartInit(ec) {
  this.echartsIntance = ec;
}

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

Events

As echarts support the 'click', 'dblclick', 'mousedown', 'mouseup', 'mouseover', 'mouseout', 'globalout' mouse events, our angular2-echarts directive also support the same mouse events but with additional chart prefix.

html:

<div echarts class="demo-chart" [options]="chartOptions" (chartClick)="onChartClick($event)"></div>

The '$event' is same with the 'params' that Echarts dispatches

It supports following event outputs:

chartClick: It emits the same params of 'click' event
chartDblClick: It emits the same params of 'dblclick' event
chartMouseDown: It emits the same params of 'mousedown' event
chartMouseUp: It emits the same params of 'mouseup' event
chartMouseOver: It emits the same params of 'mouseover' event
chartMouseOut: It emits the same params of 'mouseout' event
chartGlobalOut: It emits the same params of 'globalout' event
chartDataZoom: It emits the same params of 'dataZoom' event (thanks to averhaegen)

You can refer to the echarts tutorial: Events and Actions in ECharts for more details of the event params. You can also refer to the demo page for the detailed example.

Demo

You can clone this repo to your working copy and then launch the demo page in your local machine:

cd demo
npm install
npm start

The demo page server is listening to: http://localhost:4202

xiaohuidong99/angular2-echarts