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

Posted 2020-09-26

一：下载 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, 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.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();

   }

}