Score
0
Watch 11 Star 25 Fork 5

twp0217 / echarts-ng2TypeScript

Create your Gitee Account
Explore and code with more than 5 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Without author's permission, this code is only for learning and cannot be used for other purposes.
Angular2 ECharts组件(Angular2 ECharts component) spread retract

http://twp0217.oschina.io/echarts-ng2

Clone or download
Loading...
README.md

echarts-ng2

简介

基于angular2的echarts组件

安装

npm install echarts-ng2 --save

注:如果编译错误,提示如下,请安装依赖@types/echarts或者升级typescript版本到2.1以上

echarts-ng2.component.ts (3,26): Cannot find module 'echarts'

npm install @types/echarts --save-dev

使用

  • 安装依赖包:echartsecharts-ng2
npm install --save echarts echarts-ng2
  • 在module导入EchartsNg2Module
import { EchartsNg2Module } from 'echarts-ng2';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    EchartsNg2Module
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
  • 准备图表数据
option = {
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  legend: {
    data: ['销量']
  },
  xAxis: {
    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
  },
  yAxis: {},
  series: [{
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
  }]
};
  • 在模板页面使用
<echarts-ng2 [option]="option"></echarts-ng2>

system.js 配置

map 中添加以下配置

map: {
  'echarts-ng2': 'npm:echarts-ng2/bundles/echarts-ng2.umd.min.js'
}

支持

  • 如果项目对你有帮助,请点颗星:star:,谢谢。
  • 如果你对项目有想法、问题、BUG,欢迎讨论。

文档

属性(Attributes)

名称 类型 默认值 说明
theme Object/string default 主题
option Object null 配置项
style Object - 样式
group string - 图表的分组

事件(Events)

名称 返回值 说明
onBeforeInit - 图表初始化前
onAfterInit - 图表初始化后
onOptionChange option: EChartOption 图表配置项变更

方法(Methods)

名称 参数 返回类型 说明
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) - 解除图表实例的联动

示例(基于angular-cli创建),演示地址

Comments ( 0 )

Sign in for post a comment

TypeScript
1
https://gitee.com/twp0217/echarts-ng2.git
git@gitee.com:twp0217/echarts-ng2.git
twp0217
echarts-ng2
echarts-ng2
master

Search

231008 48f1a665 1899542 231017 9a6720c6 1899542