一：下載 echarts-ng2 包
echarts-ng2時基於基於angular2的echarts組件。
安裝：npm install echarts-ng2
!注：如果編譯錯誤，提示如下(echarts-ng2.component.ts (3,26): Cannot find module 'echarts')，請安裝依賴@types/echarts或者升級typescript版本到2.1以上。npm install @types/echarts --save-dev
二：使用方式
(可參考：https://github.com/twp0217/echarts-ng2)
1.在模塊(module)導入EchartsNg2Module
@
EchartsNg2Module
2.在組件及模板中引用
方式一：(//注：在多次重新渲染圖表時，option會默認進行前后合並)
//basic.component.ts
import { EChartOption } from 'echarts-ng2';
import { Component } from '@angular/core';
@Component({
...
})
export class BasicComponent {
option: EChartOption = {
//詳細配置參考echart3.0的option配置項
// (http://echarts.baidu.com/option.html#title)
}
}
//basic.html
<echarts-ng2 [option]="option"></echarts-ng2>
方式二：(可設置重新渲染圖表時，是否進行option的合並)
//basic.component.ts
import { EChartOption, ECharts } from 'echarts-ng2';
import { Component, ViewChild, OnInit
}
from
'@angular/core';
@Component({
...
})
export class BasicComponent implements OnInit
{
@ViewChild('myEcharts') echarts: ECharts;
option: EChartOption = {
//詳細配置參考echart3.0的option配置項
// (http://echarts.baidu.com/option.html#title)
}
ngOnInit(){
this.echarts.setOption(this.option, true);
//第二個參數很重要，表示后面的option會替換前面的option。否則前后option會合並，在某些重新繪制圖表時會出現不想看到的結果。
}
}
//basic.html
<echarts-ng2 #myEcharts></echarts-ng2>
三.：屬性(Attributes)操作
| 名稱 | 類型 | 默認值 | 說明 |
|---|---|---|---|
| theme | Object/string | default | 主題 |
| option | Object | null | 配置項 |
| style | Object | - | 樣式 |
| group | string | - | 圖表的分組 |
EX：
import 'echarts/theme/dark';
<echarts-ng2 [option]="option" [theme]="'dark'" [style]="{'width': '870px', 'height': '450px'}"
></echarts-ng2>
四：事件(Events)操作
| 名稱 | 返回值 | 說明 |
|---|---|---|
| onBeforeInit | - | 圖表初始化前 |
| onAfterInit | - | 圖表初始化后 |
| onOptionChange | option: EChartOption | 圖表配置項變更 |
EX：
<echarts-ng2
[option]="option"
(onOptionChange)="onOptionChange($event)"></
echarts-ng2
>
//basic.component.ts
@Component({
...
})
export class BasicComponent {
...
onOptionChange(event: any){
console.log(event);
}
}
五：方法(Methods)操作
（同使用方式2中的例子）
| 名稱 | 參數 | 返回類型 | 說明 |
|---|---|---|---|
| setOption | (option: EChartOption, notMerge?: boolean, lazyUpdate?: boolean) | - | 設置圖表實例的配置項以及數據 |
| getWidth | - | number | 獲取 ECharts 實例容器的寬度 |
| getHeight | - | number | 獲取 ECharts 實例容器的高度 |
| getDom | - | HTMLCanvasElement | HTMLDivElement |
| getOption | - | EChartOption | 獲取當前實例中維護的option對象 |
| resize | (opts?: Object) | - | 改變圖表尺寸，在容器大小發生改變時需要手動調用 |
| dispatchAction | (payload: Object) | - | 觸發圖表行為 |
| on | (eventName: string, handler: Function, context?: Object) | - | 綁定事件處理函數 |
| off | (eventName: string, handler?: Function) | - | 解綁事件處理函數 |
| showLoading | (type?: string, opts?: Object) | - | 顯示加載動畫效果 |
| hideLoading | - | - | 隱藏動畫加載效果 |
| clear | - | - | 清空當前實例，會移除實例中所有的組件和圖表 |
| isDisposed | - | boolean | 當前實例是否已經被釋放 |
| dispose | - | - | 銷毀實例，銷毀后實例無法再被使用 |
| connect | (group:string) | - | 多個圖表實例實現聯動 |
| disconnect | (group:string) | - | 解除圖表實例的聯動 |
EX:
//basic.html
<echarts-ng2
#myEcharts></echarts-ng2>
//basic.component.ts
import { EChartOption, ViewChild } from 'echarts-ng2';
import { Component, ECharts, OnInit } from '@angular/core';
@Component({
...
})
export class BasicComponent implements OnInit {
@ViewChild('myEcharts') echarts: ECharts;
option: EChartOption = {
//詳細配置參考echart3.0的option配置項
// (http://echarts.baidu.com/option.html#title)
}
ngOnInit(){
this
.echarts.showLoading();
this.echarts.setOption(this.option, true);
this
.echarts.hideLoading();
}
}