ngx-echarts
- Version 20.0.1
- Published
- 72.7 kB
- 1 dependency
- MIT license
Install
npm i ngx-echarts
yarn add ngx-echarts
pnpm add ngx-echarts
Overview
<div align="center"> <a href="https://xieziyu.github.io/ngx-echarts"> <img src="./src/assets/img/logo.svg" alt="Logo" width="80"> </a> <h3 align="center">NGX-ECHARTS</h3> <p align="center"> Angular directive for <a href="https://github.com
Index
Variables
Functions
Classes
NgxEchartsDirective
- animationFrameID
- autoResize
- chartAxisAreaSelected
- chartBrush
- chartBrushEnd
- chartBrushSelected
- chartClick
- chartContextMenu
- chartDataRangeSelected
- chartDataViewChanged
- chartDataZoom
- chartDblClick
- chartDownplay
- chartFinished
- chartGeoRoam
- chartGeoSelectChanged
- chartGeoSelected
- chartGeoUnselected
- chartGlobalCursorTaken
- chartGlobalOut
- chartGraphRoam
- chartHighlight
- chartInit
- chartLegendLegendInverseSelect
- chartLegendLegendSelectAll
- chartLegendScroll
- chartLegendSelectChanged
- chartLegendSelected
- chartLegendUnselected
- chartMagicTypeChanged
- chartMouseDown
- chartMouseMove
- chartMouseOut
- chartMouseOver
- chartMouseUp
- chartRendered
- chartRestore
- chartSelectChanged
- chartTimelineChanged
- chartTimelinePlayChanged
- chartTreeRoam
- initOpts
- loading
- loadingOpts
- loadingType
- merge
- ngAfterViewInit()
- ngOnChanges()
- ngOnDestroy()
- ngOnInit()
- options
- optionsError
- ɵdir
- ɵfac
- refreshChart()
- resize()
- theme
Interfaces
Type Aliases
Variables
variable NGX_ECHARTS_CONFIG
const NGX_ECHARTS_CONFIG: InjectionToken<NgxEchartsConfig>;
Functions
function provideEchartsCore
provideEchartsCore: (config: NgxEchartsConfig) => Provider;
Classes
class NgxEchartsDirective
class NgxEchartsDirective implements OnChanges, OnDestroy, OnInit, AfterViewInit {}
property animationFrameID
animationFrameID: any;
property autoResize
readonly autoResize: _angular_core.InputSignal<boolean>;
property chartAxisAreaSelected
readonly chartAxisAreaSelected: _angular_core.OutputRef<any>;
property chartBrush
readonly chartBrush: _angular_core.OutputRef<any>;
property chartBrushEnd
readonly chartBrushEnd: _angular_core.OutputRef<any>;
property chartBrushSelected
readonly chartBrushSelected: _angular_core.OutputRef<any>;
property chartClick
readonly chartClick: _angular_core.OutputRef<ECElementEvent>;
property chartContextMenu
readonly chartContextMenu: _angular_core.OutputRef<ECElementEvent>;
property chartDataRangeSelected
readonly chartDataRangeSelected: _angular_core.OutputRef<any>;
property chartDataViewChanged
readonly chartDataViewChanged: _angular_core.OutputRef<any>;
property chartDataZoom
readonly chartDataZoom: _angular_core.OutputRef<any>;
property chartDblClick
readonly chartDblClick: _angular_core.OutputRef<ECElementEvent>;
property chartDownplay
readonly chartDownplay: _angular_core.OutputRef<any>;
property chartFinished
readonly chartFinished: _angular_core.OutputRef<any>;
property chartGeoRoam
readonly chartGeoRoam: _angular_core.OutputRef<any>;
property chartGeoSelectChanged
readonly chartGeoSelectChanged: _angular_core.OutputRef<any>;
property chartGeoSelected
readonly chartGeoSelected: _angular_core.OutputRef<any>;
property chartGeoUnselected
readonly chartGeoUnselected: _angular_core.OutputRef<any>;
property chartGlobalCursorTaken
readonly chartGlobalCursorTaken: _angular_core.OutputRef<any>;
property chartGlobalOut
readonly chartGlobalOut: _angular_core.OutputRef<ECElementEvent>;
property chartGraphRoam
readonly chartGraphRoam: _angular_core.OutputRef<any>;
property chartHighlight
readonly chartHighlight: _angular_core.OutputRef<any>;
property chartInit
readonly chartInit: _angular_core.OutputEmitterRef<ECharts>;
property chartLegendLegendInverseSelect
readonly chartLegendLegendInverseSelect: _angular_core.OutputRef<any>;
property chartLegendLegendSelectAll
readonly chartLegendLegendSelectAll: _angular_core.OutputRef<any>;
property chartLegendScroll
readonly chartLegendScroll: _angular_core.OutputRef<any>;
property chartLegendSelectChanged
readonly chartLegendSelectChanged: _angular_core.OutputRef<any>;
property chartLegendSelected
readonly chartLegendSelected: _angular_core.OutputRef<any>;
property chartLegendUnselected
readonly chartLegendUnselected: _angular_core.OutputRef<any>;
property chartMagicTypeChanged
readonly chartMagicTypeChanged: _angular_core.OutputRef<any>;
property chartMouseDown
readonly chartMouseDown: _angular_core.OutputRef<ECElementEvent>;
property chartMouseMove
readonly chartMouseMove: _angular_core.OutputRef<ECElementEvent>;
property chartMouseOut
readonly chartMouseOut: _angular_core.OutputRef<ECElementEvent>;
property chartMouseOver
readonly chartMouseOver: _angular_core.OutputRef<ECElementEvent>;
property chartMouseUp
readonly chartMouseUp: _angular_core.OutputRef<ECElementEvent>;
property chartRendered
readonly chartRendered: _angular_core.OutputRef<any>;
property chartRestore
readonly chartRestore: _angular_core.OutputRef<any>;
property chartSelectChanged
readonly chartSelectChanged: _angular_core.OutputRef<any>;
property chartTimelineChanged
readonly chartTimelineChanged: _angular_core.OutputRef<any>;
property chartTimelinePlayChanged
readonly chartTimelinePlayChanged: _angular_core.OutputRef<any>;
property chartTreeRoam
readonly chartTreeRoam: _angular_core.OutputRef<any>;
property initOpts
readonly initOpts: _angular_core.InputSignal<{ devicePixelRatio?: number; renderer?: string; width?: number | string; height?: number | string; locale?: string;}>;
property loading
readonly loading: _angular_core.InputSignal<boolean>;
property loadingOpts
readonly loadingOpts: _angular_core.InputSignal<object>;
property loadingType
readonly loadingType: _angular_core.InputSignal<string>;
property merge
readonly merge: _angular_core.InputSignal<EChartsCoreOption>;
property options
readonly options: _angular_core.InputSignal<EChartsCoreOption>;
property optionsError
readonly optionsError: _angular_core.OutputEmitterRef<Error>;
property ɵdir
static ɵdir: _angular_core.ɵɵDirectiveDeclaration< NgxEchartsDirective, 'echarts, [echarts]', ['echarts'], { options: { alias: 'options'; required: false; isSignal: true }; theme: { alias: 'theme'; required: false; isSignal: true }; initOpts: { alias: 'initOpts'; required: false; isSignal: true }; merge: { alias: 'merge'; required: false; isSignal: true }; autoResize: { alias: 'autoResize'; required: false; isSignal: true }; loading: { alias: 'loading'; required: false; isSignal: true }; loadingType: { alias: 'loadingType'; required: false; isSignal: true }; loadingOpts: { alias: 'loadingOpts'; required: false; isSignal: true }; }, { chartInit: 'chartInit'; optionsError: 'optionsError'; chartClick: 'chartClick'; chartDblClick: 'chartDblClick'; chartMouseDown: 'chartMouseDown'; chartMouseMove: 'chartMouseMove'; chartMouseUp: 'chartMouseUp'; chartMouseOver: 'chartMouseOver'; chartMouseOut: 'chartMouseOut'; chartGlobalOut: 'chartGlobalOut'; chartContextMenu: 'chartContextMenu'; chartHighlight: 'chartHighlight'; chartDownplay: 'chartDownplay'; chartSelectChanged: 'chartSelectChanged'; chartLegendSelectChanged: 'chartLegendSelectChanged'; chartLegendSelected: 'chartLegendSelected'; chartLegendUnselected: 'chartLegendUnselected'; chartLegendLegendSelectAll: 'chartLegendLegendSelectAll'; chartLegendLegendInverseSelect: 'chartLegendLegendInverseSelect'; chartLegendScroll: 'chartLegendScroll'; chartDataZoom: 'chartDataZoom'; chartDataRangeSelected: 'chartDataRangeSelected'; chartGraphRoam: 'chartGraphRoam'; chartGeoRoam: 'chartGeoRoam'; chartTreeRoam: 'chartTreeRoam'; chartTimelineChanged: 'chartTimelineChanged'; chartTimelinePlayChanged: 'chartTimelinePlayChanged'; chartRestore: 'chartRestore'; chartDataViewChanged: 'chartDataViewChanged'; chartMagicTypeChanged: 'chartMagicTypeChanged'; chartGeoSelectChanged: 'chartGeoSelectChanged'; chartGeoSelected: 'chartGeoSelected'; chartGeoUnselected: 'chartGeoUnselected'; chartAxisAreaSelected: 'chartAxisAreaSelected'; chartBrush: 'chartBrush'; chartBrushEnd: 'chartBrushEnd'; chartBrushSelected: 'chartBrushSelected'; chartGlobalCursorTaken: 'chartGlobalCursorTaken'; chartRendered: 'chartRendered'; chartFinished: 'chartFinished'; }, never, never, true, never>;
property ɵfac
static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxEchartsDirective, never>;
property theme
readonly theme: _angular_core.InputSignal<string | ThemeOption>;
method ngAfterViewInit
ngAfterViewInit: () => void;
method ngOnChanges
ngOnChanges: (changes: SimpleChanges) => void;
method ngOnDestroy
ngOnDestroy: () => void;
method ngOnInit
ngOnInit: () => void;
method refreshChart
refreshChart: () => Promise<void>;
dispose old chart and create a new one.
method resize
resize: () => void;
resize chart
class NgxEchartsModule
class NgxEchartsModule {}
property ɵfac
static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxEchartsModule, never>;
property ɵinj
static ɵinj: _angular_core.ɵɵInjectorDeclaration<NgxEchartsModule>;
property ɵmod
static ɵmod: _angular_core.ɵɵNgModuleDeclaration< NgxEchartsModule, never, [typeof NgxEchartsDirective], [typeof NgxEchartsDirective]>;
method forChild
static forChild: () => ModuleWithProviders<NgxEchartsModule>;
method forRoot
static forRoot: ( config: NgxEchartsConfig) => ModuleWithProviders<NgxEchartsModule>;
Interfaces
interface NgxEchartsConfig
interface NgxEchartsConfig {}
Type Aliases
type ThemeOption
type ThemeOption = Record<string, any>;
Package Files (1)
Dependencies (1)
Dev Dependencies (0)
No dev dependencies.
Peer Dependencies (2)
Badge
To add a badge like this oneto your package's README, use the codes available below.
You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/ngx-echarts
.
- Markdown[](https://www.jsdocs.io/package/ngx-echarts)
- HTML<a href="https://www.jsdocs.io/package/ngx-echarts"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 4080 ms. - Missing or incorrect documentation? Open an issue for this package.