ng2中的百度echarts3.0使用——(echarts-ng2)

一：下載 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

   import { EchartsNg2Module } from 'echarts-ng2';

   @NgModule({

  imports: [

    EchartsNg2Module

  ]

})

export class ExampleModule { }

 

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

   }

}