Comments (10)
@taipeiwu
chartInit
能够暴露echartsInstance
,因而可以直接利用echartsInstance.on('pieselectchanged', (params) => { })
和echartsInstance.off()
进行事件处理
echarts本身支持的events非常多,所以暂时没有计划增加新的emitter。
from ngx-echarts.
@xieziyu , 謝謝,我看到了,這是非常好的解決方式,由衷感謝。
from ngx-echarts.
请问在哪里能够获取到 echartsInstance呢?
from ngx-echarts.
@jamessawyer 在chartInit事件中可以获取到,请参考首页说明文档
from ngx-echarts.
嗯嗯 已经看到了。还想问一下 获取到这个实例之后,如果我想监听别的事件,比如‘legendunselected’, 那么
this.chartInstance.on('legendunselected', (params) => {
console.log('legend',params);
});
这段逻辑我应该放在哪里呢?
我放在点击事件中,点击图标上的 legend 好像并没用
from ngx-echarts.
@jamessawyer 你需要把注册侦听事件的逻辑放在chartInit里面。然后再在ngOnDestroy的时候取消侦听器。
from ngx-echarts.
@xieziyu 好像还是没效果,这是我的代码
import { Component, OnDestroy } from '@angular/core';
@component({
selector: 'app-root',
template: <div echarts [options]="chartOption" class="demo-chart" (chartInit)="onChartInit($event)" (chartClick)="onClick($event)"></div>
,
styleUrls: [.demo-chart { height: 400px; }
]
})
export class AppComponent implements OnDestroy {
chartInstance: any;
chartOption = {
// ...
};
onChartInit(ec) {
this.chartInstance = ec;
console.log('实例:', this.chartInstance);
this.chartInstance.on('legendunselected', (params) => {
console.log('legend', params);
});
}
onClick(params: any) {
console.log(params);
}
ngOnDestroy() {
this.chartInstance.off('legendunselected');
}
}
from ngx-echarts.
@jamessawyer 这个可能和echarts本身实现有关系,在你点击legend的时候,并没有dispatchAction 产生对应于legendunselected的事件。你可以尝试侦听legendselectchanged这个事件。鼠标点击图例的时候应该是dispatch了legendToggleSelect
from ngx-echarts.
@xieziyu 嗯 对,写成legendselectchanged事件就ok了 十分感谢。现在还在echarts研究阶段,项目中马上要用,不知道会不会有什么别的坑
from ngx-echarts.
感謝提問與回答的人,受到幫助了
from ngx-echarts.
Related Issues (20)
- Can't bind to 'options' since it isn't a known property of 'div'? HOT 3
- force directed graph demo broken HOT 5
- Feature: Function wrapper for the standalone ECharts provider configuration
- heatmap not working using ngx-echarts 16.0.0, but working fine when using echart 5.4.2 directly HOT 1
- [SOLVED] I've got custom theme.js and dunno how to import it into angular app HOT 3
- 实参类型 unknown 不可分配给形参类型 ECElementEvent HOT 1
- After updating from 16.0.0 to 16.1.0 I get compilation errors using angular HOT 9
- Width and Height 100% of parent container
- 'legendselectchanged' event has no Output HOT 3
- Make the directive standalone HOT 1
- echarts/core -> Implementation of registerMap doesn't exists HOT 3
- Ngx-Echarts Animation not working Initially HOT 5
- dispatchAction not updating chart if echart directive is used in ng-template
- Most of EChartsOption and connected fields ts types are not exported HOT 2
- Use Custom Theme created Apache Echarts Theme Builder HOT 2
- Tooltip - Slow Performance
- Import a echart theme with echarts v5.5.0 and ngx-echarts v15.0.3 HOT 1
- Angular 17 ReferenceError: window is not defined HOT 2
- type scatterGL not recognized
- Support Angular 18 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ngx-echarts.