e-ngx-echarts
基于 Angular 的 echarts 图表组件
Usage
-
Install
npm install --save e-ngx-echarts -
Add the ENgxChartModule
; -
template
-
component
options =;onEChartsReadyevt: any
API
exportAs
eNgxECharts
- 导出的指令变量,可在模板获取指令类并调用(#eNgxECharts="eNgxECharts"
)。
Inputs
-
options
(Object
) - options 与echarts的配置属性一致 -
theme
(Object
) - 调用 echarts.init 方法传入的主题的配置对象,也可以是使用已经通过 echarts.registerTheme 注册的主题名称。可通过echarts主题构建工具导出自定义主题的配置对象(JSON版) -
initOpts
(Object
) - 调用 echarts.init 方法传入的附加参数
Outputs
-
ready
- 初始化完成的事件,$event为当前 ENgxEChartsDirective 实例 -
chartClick
: 点击事件。参数同click
事件 -
chartDblClick
: 双击事件。参数同dblclick
事件 -
chartMouseDown
: 鼠标按下事件。mousedown
事件 -
chartMouseUp
: 鼠标松开事件。参数同mouseup
事件 -
chartMouseOver
: 鼠标移上事件。参数同mouseover
事件 -
chartMouseOut
: 鼠标移开事件。参数同mouseout
事件 -
chartDataZoom
: 数据区域缩放后的事件。参数同dataZoom
事件
更多事件可查看:http://echarts.baidu.com/api.html#events
Properties
echartsIntance
- echarts 实例
Service
ENgxEchartsService
- 全局 echarts 对象包装器,可以通过它获取全局 echarts 对象及相应方法
示例:
; //...constructorpublic es: ENgxEchartsService ngOnInit