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

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 {}

                                                                                                                                    property echarts

                                                                                                                                    echarts: any | (() => Promise<any>);

                                                                                                                                      property theme

                                                                                                                                      theme?: string | ThemeOption;

                                                                                                                                        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 onejsDocs.io badgeto 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
                                                                                                                                            [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](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>