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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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, 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)的主要内容,如果未能解决你的问题,请参考以下文章

vue中使用 echarts3.0 或 echarts2.0 (模拟迁徙图,折线图)

ECharts3.0饼状图使用问题总结

echarts3.0 本期累计堆叠

echarts3.0

echarts3.0版本断点连线的处理

echarts3.0地图的炫光飞机样式怎么去除