ngx-echarts

ngx-echarts

Version 18.0.0
Published 5 months ago
129 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 provideEcharts

provideEcharts: (config?: Omit<NgxEchartsConfig, 'echarts'>) => Provider;

function provideEchartsCore

provideEchartsCore: (config: NgxEchartsConfig) => Provider;

Classes

class NgxEchartsDirective

class NgxEchartsDirective implements OnChanges, OnDestroy, OnInit, AfterViewInit {}

constructor

constructor(config: NgxEchartsConfig, el: ElementRef, ngZone: NgZone);

property animationFrameID

animationFrameID: any;

property autoResize

autoResize: boolean;

property chartAxisAreaSelected

chartAxisAreaSelected: EventEmitter<any>;

property chartBrush

chartBrush: EventEmitter<any>;

property chartBrushEnd

chartBrushEnd: EventEmitter<any>;

property chartBrushSelected

chartBrushSelected: EventEmitter<any>;

property chartClick

chartClick: EventEmitter<ECElementEvent>;

property chartContextMenu

chartContextMenu: EventEmitter<ECElementEvent>;

property chartDataRangeSelected

chartDataRangeSelected: EventEmitter<any>;

property chartDataViewChanged

chartDataViewChanged: EventEmitter<any>;

property chartDataZoom

chartDataZoom: EventEmitter<any>;

property chartDblClick

chartDblClick: EventEmitter<ECElementEvent>;

property chartDownplay

chartDownplay: EventEmitter<any>;

property chartFinished

chartFinished: EventEmitter<any>;

property chartGeoRoam

chartGeoRoam: EventEmitter<any>;

property chartGeoSelectChanged

chartGeoSelectChanged: EventEmitter<any>;

property chartGeoSelected

chartGeoSelected: EventEmitter<any>;

property chartGeoUnselected

chartGeoUnselected: EventEmitter<any>;

property chartGlobalCursorTaken

chartGlobalCursorTaken: EventEmitter<any>;

property chartGlobalOut

chartGlobalOut: EventEmitter<ECElementEvent>;

property chartGraphRoam

chartGraphRoam: EventEmitter<any>;

property chartHighlight

chartHighlight: EventEmitter<any>;

property chartInit

chartInit: EventEmitter<any>;

property chartLegendLegendInverseSelect

chartLegendLegendInverseSelect: EventEmitter<any>;

property chartLegendLegendSelectAll

chartLegendLegendSelectAll: EventEmitter<any>;

property chartLegendScroll

chartLegendScroll: EventEmitter<any>;

property chartLegendSelectChanged

chartLegendSelectChanged: EventEmitter<any>;

property chartLegendSelected

chartLegendSelected: EventEmitter<any>;

property chartLegendUnselected

chartLegendUnselected: EventEmitter<any>;

property chartMagicTypeChanged

chartMagicTypeChanged: EventEmitter<any>;

property chartMouseDown

chartMouseDown: EventEmitter<ECElementEvent>;

property chartMouseMove

chartMouseMove: EventEmitter<ECElementEvent>;

property chartMouseOut

chartMouseOut: EventEmitter<ECElementEvent>;

property chartMouseOver

chartMouseOver: EventEmitter<ECElementEvent>;

property chartMouseUp

chartMouseUp: EventEmitter<ECElementEvent>;

property chartRendered

chartRendered: EventEmitter<any>;

property chartRestore

chartRestore: EventEmitter<any>;

property chartSelectChanged

chartSelectChanged: EventEmitter<any>;

property chartTimelineChanged

chartTimelineChanged: EventEmitter<any>;

property chartTimelinePlayChanged

chartTimelinePlayChanged: EventEmitter<any>;

property chartTreeRoam

chartTreeRoam: EventEmitter<any>;

property initOpts

initOpts: {
    devicePixelRatio?: number;
    renderer?: string;
    width?: number | string;
    height?: number | string;
    locale?: string;
};

property loading

loading: boolean;

property loadingOpts

loadingOpts: {};

property loadingType

loadingType: string;

property merge

merge: any;

property options

options: any;

property optionsError

optionsError: EventEmitter<Error>;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgxEchartsDirective,
    'echarts, [echarts]',
    ['echarts'],
    {
        options: { alias: 'options'; required: false };
        theme: { alias: 'theme'; required: false };
        initOpts: { alias: 'initOpts'; required: false };
        merge: { alias: 'merge'; required: false };
        autoResize: { alias: 'autoResize'; required: false };
        loading: { alias: 'loading'; required: false };
        loadingType: { alias: 'loadingType'; required: false };
        loadingOpts: { alias: 'loadingOpts'; required: false };
    },
    {
        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: i0.ɵɵFactoryDeclaration<NgxEchartsDirective, never>;

property theme

theme: 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: i0.ɵɵFactoryDeclaration<NgxEchartsModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NgxEchartsModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NgxEchartsModule,
    never,
    [typeof NgxEchartsDirective],
    [typeof NgxEchartsDirective]
>;

method forChild

static forChild: () => ModuleWithProviders<NgxEchartsModule>;

method forRoot

static forRoot: (
    config: NgxEchartsConfig
) => ModuleWithProviders<NgxEchartsModule>;

Type Aliases

type ThemeOption

type ThemeOption = Record<string, any>;

Package Files (3)

Dependencies (1)

tslib

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (1)

echarts

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 5 months ago.
Package analyzed in 2394 ms.
Missing or incorrect documentation? Open an issue for this package.