基于angular2的echarts组件
npm install echarts-ng2 --saveecharts-ng2.component.ts (3,26): Cannot find module 'echarts'
npm install @types/echarts --save-dev- 安装依赖包：
echarts和echarts-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>在 map 中添加以下配置
map: {
'echarts-ng2': 'npm:echarts-ng2/bundles/echarts-ng2.umd.min.js'
}- 如果项目对你有帮助，请点颗星:star:，谢谢。
- 如果你对项目有想法、问题、BUG，欢迎讨论。
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| theme | Object/string | default | 主题 |
| option | Object | null | 配置项 |
| style | Object | - | 样式 |
| group | string | - | 图表的分组 |
| 名称 | 返回值 | 说明 |
|---|---|---|
| onBeforeInit | - | 图表初始化前 |
| onAfterInit | - | 图表初始化后 |
| onOptionChange | option: EChartOption | 图表配置项变更 |
| 名称 | 参数 | 返回类型 | 说明 |
|---|---|---|---|
| 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) | - | 解除图表实例的联动 |