标签：efi sed storage important nat exp art table 返回值
一：下载 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();
}
}
ng2中的百度echarts3.0使用——(echarts-ng2)
标签：efi sed storage important nat exp art table 返回值
原文地址：http://www.cnblogs.com/qingming/p/7123840.html
