apache / echarts

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

[Bug] tooltip.axisPointer. label超出chart部分被隐藏 #18760

Open willhlc opened 1 year ago

willhlc commented 1 year ago

Version

5.3.0

Link to Minimal Reproduction

null

Steps to Reproduce

Current Behavior

自定了tooltip.axisPointer. label的格式,这个是作为多Y轴的刻度指示器;标签内容有多个时,当移动鼠标到chart的底部,指示器的内容超出了chart高度部分,会被隐藏;这种问题该如何解决?在canvas及其父元素设置overflow: visible,均无效。 如下图,下面的那行文字被隐藏了一半

企业微信截图_db4816f2-65e7-4aec-8230-f1a1d48c3fae

Expected Behavior

希望可以显示全文本指示器

Environment

- OS:windows & mac
- Browser:chrome
- Framework:vue2

Any additional comments?

No response

echarts-bot[bot] commented 1 year ago

@willhlc It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗

TRANSLATED
**TITLE** [Bug] tooltip.axisPointer.label is hidden beyond the chart **BODY** ### Version 5.3.0 ### Link to Minimal Reproduction null ### Steps to Reproduce not ### Current Behavior Customize the format of tooltip.axisPointer. label, which serves as a scale indicator for the multi-Y axis; When there are multiple label contents, when you move the mouse to the bottom of the chart, the content of the indicator exceeds the height of the chart and will be hidden; How can this problem be solved? Setting overflow: visible on the canvas and its parent element has no effect. As shown in the figure below, the line of text below is half hidden Enterprise WeChat screenshot_db4816f2-65e7-4AEC-8230-F1A1D48C3FAE ### Expected Behavior You want to display a full-text indicator ### Environment ```markdown - OS:windows & mac - Browser:chrome - Framework:vue2 ``` ### Any additional comments? _No response_
lixingjuan commented 1 year ago

两种处理方式

  1. tooltip.confine 将 tooltip 框限制在图表的区域内
  2. 将 tooltip 的 DOM 节点添加为 HTML 的 的子节点
willhlc commented 1 year ago

两种处理方式

  1. tooltip.confine 将 tooltip 框限制在图表的区域内
  2. 将 tooltip 的 DOM 节点添加为 HTML 的 的子节点 感谢回答! 这两个方法之前也试过了,但是没有效果,超出部分还是会隐藏; 目前折中的办法是,grid的bottom设置大一点,或者每行展示两个条目的光标值