ngx-echarts

ngx-echarts

Version 21.0.0
Published 12 hours ago
76.9 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;
    ssr?: boolean;
    useDirtyRect?: boolean;
    useCoarsePointer?: boolean;
    pointerSize?: number;
}>;

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)

types/ngx-echarts.d.ts

Dependencies (1)

tslib

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

[![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>

Updated just now.
Package analyzed in 4023 ms.
Missing or incorrect documentation? Open an issue for this package.