ngx-echarts
Version:
<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
116 lines (110 loc) • 7.75 kB
TypeScript
import * as _angular_core from '@angular/core';
import { InjectionToken, OnChanges, OnDestroy, OnInit, AfterViewInit, SimpleChanges, ModuleWithProviders, Provider } from '@angular/core';
import { EChartsCoreOption, ECharts, ECElementEvent } from 'echarts/core';
type ThemeOption = Record<string, any>;
interface NgxEchartsConfig {
echarts: any | (() => Promise<any>);
theme?: string | ThemeOption;
}
declare const NGX_ECHARTS_CONFIG: InjectionToken<NgxEchartsConfig>;
declare class NgxEchartsDirective implements OnChanges, OnDestroy, OnInit, AfterViewInit {
private el;
private ngZone;
private readonly config;
readonly options: _angular_core.InputSignal<EChartsCoreOption>;
readonly theme: _angular_core.InputSignal<string | ThemeOption>;
readonly initOpts: _angular_core.InputSignal<{
devicePixelRatio?: number;
renderer?: string;
width?: number | string;
height?: number | string;
locale?: string;
}>;
readonly merge: _angular_core.InputSignal<EChartsCoreOption>;
readonly autoResize: _angular_core.InputSignal<boolean>;
readonly loading: _angular_core.InputSignal<boolean>;
readonly loadingType: _angular_core.InputSignal<string>;
readonly loadingOpts: _angular_core.InputSignal<object>;
readonly chartInit: _angular_core.OutputEmitterRef<ECharts>;
readonly optionsError: _angular_core.OutputEmitterRef<Error>;
readonly chartClick: _angular_core.OutputRef<ECElementEvent>;
readonly chartDblClick: _angular_core.OutputRef<ECElementEvent>;
readonly chartMouseDown: _angular_core.OutputRef<ECElementEvent>;
readonly chartMouseMove: _angular_core.OutputRef<ECElementEvent>;
readonly chartMouseUp: _angular_core.OutputRef<ECElementEvent>;
readonly chartMouseOver: _angular_core.OutputRef<ECElementEvent>;
readonly chartMouseOut: _angular_core.OutputRef<ECElementEvent>;
readonly chartGlobalOut: _angular_core.OutputRef<ECElementEvent>;
readonly chartContextMenu: _angular_core.OutputRef<ECElementEvent>;
readonly chartHighlight: _angular_core.OutputRef<any>;
readonly chartDownplay: _angular_core.OutputRef<any>;
readonly chartSelectChanged: _angular_core.OutputRef<any>;
readonly chartLegendSelectChanged: _angular_core.OutputRef<any>;
readonly chartLegendSelected: _angular_core.OutputRef<any>;
readonly chartLegendUnselected: _angular_core.OutputRef<any>;
readonly chartLegendLegendSelectAll: _angular_core.OutputRef<any>;
readonly chartLegendLegendInverseSelect: _angular_core.OutputRef<any>;
readonly chartLegendScroll: _angular_core.OutputRef<any>;
readonly chartDataZoom: _angular_core.OutputRef<any>;
readonly chartDataRangeSelected: _angular_core.OutputRef<any>;
readonly chartGraphRoam: _angular_core.OutputRef<any>;
readonly chartGeoRoam: _angular_core.OutputRef<any>;
readonly chartTreeRoam: _angular_core.OutputRef<any>;
readonly chartTimelineChanged: _angular_core.OutputRef<any>;
readonly chartTimelinePlayChanged: _angular_core.OutputRef<any>;
readonly chartRestore: _angular_core.OutputRef<any>;
readonly chartDataViewChanged: _angular_core.OutputRef<any>;
readonly chartMagicTypeChanged: _angular_core.OutputRef<any>;
readonly chartGeoSelectChanged: _angular_core.OutputRef<any>;
readonly chartGeoSelected: _angular_core.OutputRef<any>;
readonly chartGeoUnselected: _angular_core.OutputRef<any>;
readonly chartAxisAreaSelected: _angular_core.OutputRef<any>;
readonly chartBrush: _angular_core.OutputRef<any>;
readonly chartBrushEnd: _angular_core.OutputRef<any>;
readonly chartBrushSelected: _angular_core.OutputRef<any>;
readonly chartGlobalCursorTaken: _angular_core.OutputRef<any>;
readonly chartRendered: _angular_core.OutputRef<any>;
readonly chartFinished: _angular_core.OutputRef<any>;
animationFrameID: any;
private chart;
private chart$;
private resizeOb;
private resize$;
private resizeSub;
private initChartTimer?;
private changeFilter;
private loadingSub;
private resizeObFired;
private echarts;
ngOnChanges(changes: SimpleChanges): void;
ngOnInit(): void;
ngOnDestroy(): void;
ngAfterViewInit(): void;
private dispose;
/**
* resize chart
*/
resize(): void;
private toggleLoading;
private setOption;
/**
* dispose old chart and create a new one.
*/
refreshChart(): Promise<void>;
private createChart;
private initChart;
private onOptionsChange;
private createLazyEvent;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxEchartsDirective, never>;
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>;
}
declare class NgxEchartsModule {
static forRoot(config: NgxEchartsConfig): ModuleWithProviders<NgxEchartsModule>;
static forChild(): ModuleWithProviders<NgxEchartsModule>;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxEchartsModule, never>;
static ɵmod: _angular_core.ɵɵNgModuleDeclaration<NgxEchartsModule, never, [typeof NgxEchartsDirective], [typeof NgxEchartsDirective]>;
static ɵinj: _angular_core.ɵɵInjectorDeclaration<NgxEchartsModule>;
}
declare function provideEchartsCore(config: NgxEchartsConfig): Provider;
export { NGX_ECHARTS_CONFIG, NgxEchartsDirective, NgxEchartsModule, provideEchartsCore };
export type { NgxEchartsConfig, ThemeOption };