Skip to content

Commit

Permalink
feat: add event types and new events
Browse files Browse the repository at this point in the history
  • Loading branch information
@xieziyu
xieziyu committed Oct 11, 2023
1 parent 6e3f06d commit b72f65f
Show file tree
Hide file tree
Showing 3 changed files with 89 additions and 75 deletions.
82 changes: 45 additions & 37 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,10 @@ A starter project on Github: https://github.com/xieziyu/ngx-echarts-starter

# Latest Update

- 2023.10.11: v16.1.0:

- Feat: Add types to `chartXXX` EventEmitters. Support new events such as: `'selectchanged'`

- 2023.05.10: v16.0.0:

- Feat: upgrade to Angular 16
Expand Down Expand Up @@ -358,43 +362,47 @@ As ECharts supports the `'click'`, `'dblclick'`, `'mousedown'`, `'mouseup'`, `'m
It supports following event outputs:
| @Output | Event |
| ------------------------- | --------------------------------------- |
| chartInit | Emitted when the chart is initialized |
| chartClick | echarts event: `'click'` |
| chartDblClick | echarts event: `'dblclick'` |
| chartMouseDown | echarts event: `'mousedown'` |
| chartMouseMove | echarts event: `'mousemove'` |
| chartMouseUp | echarts event: `'mouseup'` |
| chartMouseOver | echarts event: `'mouseover'` |
| chartMouseOut | echarts event: `'mouseout'` |
| chartGlobalOut | echarts event: `'globalout'` |
| chartContextMenu | echarts event: `'contextmenu'` |
| chartLegendSelectChanged | echarts event: `'legendselectchanged'` |
| chartLegendSelected | echarts event: `'legendselected'` |
| chartLegendUnselected | echarts event: `'legendunselected'` |
| chartLegendScroll | echarts event: `'legendscroll'` |
| chartDataZoom | echarts event: `'datazoom'` |
| chartDataRangeSelected | echarts event: `'datarangeselected'` |
| chartTimelineChanged | echarts event: `'timelinechanged'` |
| chartTimelinePlayChanged | echarts event: `'timelineplaychanged'` |
| chartRestore | echarts event: `'restore'` |
| chartDataViewChanged | echarts event: `'dataviewchanged'` |
| chartMagicTypeChanged | echarts event: `'magictypechanged'` |
| chartPieSelectChanged | echarts event: `'pieselectchanged'` |
| chartPieSelected | echarts event: `'pieselected'` |
| chartPieUnselected | echarts event: `'pieunselected'` |
| chartMapSelectChanged | echarts event: `'mapselectchanged'` |
| chartMapSelected | echarts event: `'mapselected'` |
| chartMapUnselected | echarts event: `'mapunselected'` |
| chartAxisAreaSelected | echarts event: `'axisareaselected'` |
| chartFocusNodeAdjacency | echarts event: `'focusnodeadjacency'` |
| chartUnfocusNodeAdjacency | echarts event: `'unfocusnodeadjacency'` |
| chartBrush | echarts event: `'brush'` |
| chartBrushEnd | echarts event: `'brushend'` |
| chartBrushSelected | echarts event: `'brushselected'` |
| chartRendered | echarts event: `'rendered'` |
| chartFinished | echarts event: `'finished'` |
| @Output | Event |
| ------------------------------ | -------------------------------------- |
| chartInit | Emitted when the chart is initialized |
| chartClick | echarts event: `'click'` |
| chartDblClick | echarts event: `'dblclick'` |
| chartMouseDown | echarts event: `'mousedown'` |
| chartMouseMove | echarts event: `'mousemove'` |
| chartMouseUp | echarts event: `'mouseup'` |
| chartMouseOver | echarts event: `'mouseover'` |
| chartMouseOut | echarts event: `'mouseout'` |
| chartGlobalOut | echarts event: `'globalout'` |
| chartContextMenu | echarts event: `'contextmenu'` |
| chartHighlight | echarts event: `'highlight'` |
| chartDownplay | echarts event: `'downplay'` |
| chartSelectChanged | echarts event: `'selectchanged'` |
| chartLegendSelectChanged | echarts event: `'legendselectchanged'` |
| chartLegendSelected | echarts event: `'legendselected'` |
| chartLegendUnselected | echarts event: `'legendunselected'` |
| chartLegendLegendSelectAll | echarts event: `'legendselectall'` |
| chartLegendLegendInverseSelect | echarts event: `'legendinverseselect'` |
| chartLegendScroll | echarts event: `'legendscroll'` |
| chartDataZoom | echarts event: `'datazoom'` |
| chartDataRangeSelected | echarts event: `'datarangeselected'` |
| chartGraphRoam | echarts event: `'graphroam'` |
| chartGeoRoam | echarts event: `'georoam'` |
| chartTreeRoam | echarts event: `'treeroam'` |
| chartTimelineChanged | echarts event: `'timelinechanged'` |
| chartTimelinePlayChanged | echarts event: `'timelineplaychanged'` |
| chartRestore | echarts event: `'restore'` |
| chartDataViewChanged | echarts event: `'dataviewchanged'` |
| chartMagicTypeChanged | echarts event: `'magictypechanged'` |
| chartGeoSelectChanged | echarts event: `'geoselectchanged'` |
| chartGeoSelected | echarts event: `'geoselected'` |
| chartGeoUnselected | echarts event: `'geounselected'` |
| chartAxisAreaSelected | echarts event: `'axisareaselected'` |
| chartBrush | echarts event: `'brush'` |
| chartBrushEnd | echarts event: `'brushend'` |
| chartBrushSelected | echarts event: `'brushselected'` |
| chartGlobalCursorTaken | echarts event: `'globalcursortaken'` |
| chartRendered | echarts event: `'rendered'` |
| chartFinished | echarts event: `'finished'` |
You can refer to the ECharts tutorial: [Events and Actions in ECharts](https://echarts.apache.org/en/tutorial.html#Events%20and%20Actions%20in%20ECharts) for more details of the event params. You can also refer to the [demo](https://xieziyu.github.io/#/ngx-echarts/demo) page for a detailed example.
Expand Down
77 changes: 41 additions & 36 deletions projects/ngx-echarts/src/lib/ngx-echarts.directive.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@ import {
import { Observable, ReplaySubject, Subject, Subscription, asyncScheduler } from 'rxjs';
import { switchMap, throttleTime } from 'rxjs/operators';
import { ChangeFilterV2 } from './change-filter-v2';
import type { EChartsOption, ECharts } from 'echarts';
import type { EChartsOption, ECharts, ECElementEvent } from 'echarts';
import type { ECActionEvent } from 'echarts/types/src/util/types';

export interface NgxEchartsConfig {
echarts: any | (() => Promise<any>);
Expand Down Expand Up @@ -51,42 +52,46 @@ export class NgxEchartsDirective implements OnChanges, OnDestroy, OnInit, AfterV
@Output() optionsError = new EventEmitter<Error>();

// echarts mouse events
@Output() chartClick = this.createLazyEvent('click');
@Output() chartDblClick = this.createLazyEvent('dblclick');
@Output() chartMouseDown = this.createLazyEvent('mousedown');
@Output() chartMouseMove = this.createLazyEvent('mousemove');
@Output() chartMouseUp = this.createLazyEvent('mouseup');
@Output() chartMouseOver = this.createLazyEvent('mouseover');
@Output() chartMouseOut = this.createLazyEvent('mouseout');
@Output() chartGlobalOut = this.createLazyEvent('globalout');
@Output() chartContextMenu = this.createLazyEvent('contextmenu');
@Output() chartClick = this.createLazyEvent<ECElementEvent>('click');
@Output() chartDblClick = this.createLazyEvent<ECElementEvent>('dblclick');
@Output() chartMouseDown = this.createLazyEvent<ECElementEvent>('mousedown');
@Output() chartMouseMove = this.createLazyEvent<ECElementEvent>('mousemove');
@Output() chartMouseUp = this.createLazyEvent<ECElementEvent>('mouseup');
@Output() chartMouseOver = this.createLazyEvent<ECElementEvent>('mouseover');
@Output() chartMouseOut = this.createLazyEvent<ECElementEvent>('mouseout');
@Output() chartGlobalOut = this.createLazyEvent<ECElementEvent>('globalout');
@Output() chartContextMenu = this.createLazyEvent<ECElementEvent>('contextmenu');

// echarts mouse events
@Output() chartLegendSelectChanged = this.createLazyEvent('legendselectchanged');
@Output() chartLegendSelected = this.createLazyEvent('legendselected');
@Output() chartLegendUnselected = this.createLazyEvent('legendunselected');
@Output() chartLegendScroll = this.createLazyEvent('legendscroll');
@Output() chartDataZoom = this.createLazyEvent('datazoom');
@Output() chartDataRangeSelected = this.createLazyEvent('datarangeselected');
@Output() chartTimelineChanged = this.createLazyEvent('timelinechanged');
@Output() chartTimelinePlayChanged = this.createLazyEvent('timelineplaychanged');
@Output() chartRestore = this.createLazyEvent('restore');
@Output() chartDataViewChanged = this.createLazyEvent('dataviewchanged');
@Output() chartMagicTypeChanged = this.createLazyEvent('magictypechanged');
@Output() chartPieSelectChanged = this.createLazyEvent('pieselectchanged');
@Output() chartPieSelected = this.createLazyEvent('pieselected');
@Output() chartPieUnselected = this.createLazyEvent('pieunselected');
@Output() chartMapSelectChanged = this.createLazyEvent('mapselectchanged');
@Output() chartMapSelected = this.createLazyEvent('mapselected');
@Output() chartMapUnselected = this.createLazyEvent('mapunselected');
@Output() chartAxisAreaSelected = this.createLazyEvent('axisareaselected');
@Output() chartFocusNodeAdjacency = this.createLazyEvent('focusnodeadjacency');
@Output() chartUnfocusNodeAdjacency = this.createLazyEvent('unfocusnodeadjacency');
@Output() chartBrush = this.createLazyEvent('brush');
@Output() chartBrushEnd = this.createLazyEvent('brushend');
@Output() chartBrushSelected = this.createLazyEvent('brushselected');
@Output() chartRendered = this.createLazyEvent('rendered');
@Output() chartFinished = this.createLazyEvent('finished');
// echarts events
@Output() chartHighlight = this.createLazyEvent<ECActionEvent>('highlight');
@Output() chartDownplay = this.createLazyEvent<ECActionEvent>('downplay');
@Output() chartSelectChanged = this.createLazyEvent<ECActionEvent>('selectchanged');
@Output() chartLegendSelected = this.createLazyEvent<ECActionEvent>('legendselected');
@Output() chartLegendUnselected = this.createLazyEvent<ECActionEvent>('legendunselected');
@Output() chartLegendLegendSelectAll = this.createLazyEvent<ECActionEvent>('legendselectall');
@Output() chartLegendLegendInverseSelect =
this.createLazyEvent<ECActionEvent>('legendinverseselect');
@Output() chartLegendScroll = this.createLazyEvent<ECActionEvent>('legendscroll');
@Output() chartDataZoom = this.createLazyEvent<ECActionEvent>('datazoom');
@Output() chartDataRangeSelected = this.createLazyEvent<ECActionEvent>('datarangeselected');
@Output() chartGraphRoam = this.createLazyEvent<ECActionEvent>('graphroam');
@Output() chartGeoRoam = this.createLazyEvent<ECActionEvent>('georoam');
@Output() chartTreeRoam = this.createLazyEvent<ECActionEvent>('treeroam');
@Output() chartTimelineChanged = this.createLazyEvent<ECActionEvent>('timelinechanged');
@Output() chartTimelinePlayChanged = this.createLazyEvent<ECActionEvent>('timelineplaychanged');
@Output() chartRestore = this.createLazyEvent<ECActionEvent>('restore');
@Output() chartDataViewChanged = this.createLazyEvent<ECActionEvent>('dataviewchanged');
@Output() chartMagicTypeChanged = this.createLazyEvent<ECActionEvent>('magictypechanged');
@Output() chartGeoSelectChanged = this.createLazyEvent<ECActionEvent>('geoselectchanged');
@Output() chartGeoSelected = this.createLazyEvent<ECActionEvent>('geoselected');
@Output() chartGeoUnselected = this.createLazyEvent<ECActionEvent>('geounselected');
@Output() chartAxisAreaSelected = this.createLazyEvent<ECActionEvent>('axisareaselected');
@Output() chartBrush = this.createLazyEvent<ECActionEvent>('brush');
@Output() chartBrushEnd = this.createLazyEvent<ECActionEvent>('brushend');
@Output() chartBrushSelected = this.createLazyEvent<ECActionEvent>('brushselected');
@Output() chartGlobalCursorTaken = this.createLazyEvent<ECActionEvent>('globalcursortaken');
@Output() chartRendered = this.createLazyEvent<ECActionEvent>('rendered');
@Output() chartFinished = this.createLazyEvent<ECActionEvent>('finished');

public animationFrameID = null;
private chart: ECharts;
Expand Down
5 changes: 3 additions & 2 deletions src/app/pages/demo-basic/basic/basic-events/basic-events.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Component, OnInit } from '@angular/core';
import type { EChartsOption } from 'echarts';
import type { ECElementEvent, EChartsOption } from 'echarts';
import type { ECActionEvent } from 'echarts/types/src/util/types';
import LinearGradient from 'zrender/lib/graphic/LinearGradient';
// IGNORE START
declare const require: any;
Expand Down Expand Up @@ -125,7 +126,7 @@ export class BasicEventsComponent implements OnInit {
};
}

onChartEvent(event: any, type: string) {
onChartEvent(event: ECElementEvent | ECActionEvent, type: string) {
console.log('chart event:', type, event);
}
}

0 comments on commit b72f65f

Please sign in to comment.