apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.1k stars 19.6k forks source link

echarts中实现多个tooltip存在 #11382

Open joinwen opened 4 years ago

joinwen commented 4 years ago

echarts,能够实现 1.多个tooltip共存吗 2.通过点击事件增加或者减少tooltip

Ovilia commented 4 years ago

目前不支持,之前也有人提出这个需求。需要讨论下是不是要做这个功能,如果做的话,应该会进 5.0 的大版本需求。

Ovilia commented 4 years ago

@joinwen 请提供一下具体的需求,为什么需要多个 tooltip,使用场景如何,期望的 option 是什么样的?

joinwen commented 4 years ago

类似这种,image

pissang commented 4 years ago

这个有点脱离了我们对 tooltip 的定义了(单例,不能一直存在),现在有个长期存在的配置主要是为了移动端的交互

可以试下外部扩展这个组件,这些 UI 通过 dom 来画,然后使用 https://echarts.apache.org/zh/api.html#echartsInstance.convertToPixelhttps://echarts.apache.org/zh/api.html#echartsInstance.convertFromPixel 来得到相应的坐标和数据

Ovilia commented 4 years ago

我觉得 tooltip 的定义并不包括「单例」,tooltip 应该是用来可交互式地展现数据细节的组件,如果用户能提供合理的多 tooltip 场景,还是值得讨论的。 鉴于很多人有这样的需求,能提供一种方便的 tooltip 或其他组件实现类似的效果是有很大价值的。

cr-ruirui commented 4 years ago

不太清楚啊,产品要做的

Ovilia commented 4 years ago

@cr-ruirui 那么问一下产品这样设计的目的是什么,效果图是怎么样的?

cr-ruirui commented 4 years ago

image 这是效果图

Ovilia commented 4 years ago

怎么这么像……所以你和 @joinwen 是同事? 这个图有 tooltip 吗? 感觉这个增减光标的确实跟 tooltip 关系有点远,不是那么通用,还是需要那么自己去实现。

cr-ruirui commented 4 years ago

不会啊,请问下怎么实现呢

Ovilia commented 4 years ago

https://github.com/apache/incubator-echarts/issues/11382#issuecomment-543036896

vvkee commented 4 years ago

@Ovilia 多坐标系,hover的时候不同坐标系上的线图或者柱状图显示对应的tooltip。这是产品的需求。 目前有没有办法在不同图层,设置不同的tooltip。 例如:1,2,3图层。1号图层是柱状图,2号图层是线图,3号图层是散点图。他们的x轴的数值一样。当hover到其中一个图上的时候,显示这3个图层对应x轴上的tooltip。 不知道目前是否支持

sophia1024 commented 3 years ago

image 一个图,两个数据表图,希望每个数据表图都要tooltip,并且hover的时候,两个tooltip联动,要如何实现呢?

susiwen8 commented 3 years ago

image 一个图,两个数据表图,希望每个数据表图都要tooltip,并且hover的时候,两个tooltip联动,要如何实现呢?

@sophia1024 试试 connect? https://echarts.apache.org/zh/api.html#echarts.connect

rascaler commented 3 years ago

@Ovilia @pissang 我想在k线图实现这样的效果 1619962763789

newproplus commented 2 years ago

@rascaler 我也要做这种交易图表,你那边有方案了吗?

rascaler commented 2 years ago

@deviceGT 用多个实例,connect, 同一个实例不太好做 但是用connect也会有问题,因为十字星线会因为中间数据缺失而出现断层,需要改源码

newproplus commented 2 years ago

@rascaler 我的单个实例用的 graphic 做,暂时还没发现有问题,只是感觉性能上可能不太高,可能更容易卡顿. 主要是我这边要允许多个指标,数量可增可减,用grid控制布局比较容易一点

keel commented 2 years ago

希望能实现多个tooltip 的功能, trigger为'axis'时, 点击一次固定保留一条竖线, 再次点击则再保留一条竖线,以实现数据上的对比

Veath commented 1 year ago

image 场景如上,希望实现这个功能

CHANG-CHING-CHUNG commented 1 year ago

image 场景如上,希望实现这个功能

This could be achieved by echarts.connect if you are using multiple chart instances. Example: CleanShot 2023-02-02 at 17 07 47

jessemoe commented 1 year ago

请问这个Feature现在带上了吗? 这种深度图的多个tooltip如何实现

image
zhaojjiang commented 9 months ago

@joinwen 请提供一下具体的需求,为什么需要多个 tooltip,使用场景如何,期望的 option 是什么样的?

我可以提供一个我遇到的需求场景:地图+足迹,需要同时显示多个,且需要默认为展开状态

ssjtbcf commented 9 months ago

展示多tooltip, 5.3版本支持了吗

helgasoft commented 6 months ago

A workaround for multiple tooltips with select and graphic - Demo Code Deselect all selected items, or press Restore button to remove all added tooltips. image

shenxiang216 commented 1 month ago

现在支持了吗