apache / echarts

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

[Bug] tooltip 的 extraCssText 属性设置 transform 不生效 #18035

Open idenet opened 1 year ago

idenet commented 1 year ago

Version

5.4.0

Link to Minimal Reproduction

https://codesandbox.io/s/px5p9v

Steps to Reproduce

查看例子,并且切换 echarts 版本到 5.0.2,可以看到 tooltip 展示不同的样式。5.0.2 版本的 transform css 能够生效,新版本不行。

思考:新版本中通过 transform 定位,用户设置的没有添加到原有 transform 后面。导致不生效

Current Behavior

在新版本中,tooltip 的 extraCssText 属性设置 transform 不生效

Expected Behavior

希望tooltip 的 extraCssText 属性设置 transform 能够生效

Environment

- OS: macos 最新版
- Browser: 版本 107.0.5304.121(正式版本) (arm64)
- Framework: vue@2.6.10

Any additional comments?

No response

echarts-bot[bot] commented 1 year ago

@idenet 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] The tooltip's extraCssText attribute setting transform does not take effect **BODY** ### Version 5.4.0 ### Link to Minimal Reproduction https://codesandbox.io/s/px5p9v ### Steps to Reproduce Looking at the example, and switching the eCharts version to 5.0.2, you can see that the tooltip shows different styles. Version 5.0.2 of Transform CSS works, but the new version does not. Think: In the new version, through transform positioning, user settings are not added after the original transform. Causes it to not take effect ### Current Behavior In the new version, the tooltip's extraCssText property setting transform does not take effect ### Expected Behavior You want the tooltip's extraCssText property setting transform to take effect ### Environment ```markdown - OS: The latest version of macOS - Browser: Version 107.0.5304.121 (official) (arm64) - Framework: vue@2.6.10 ``` ### Any additional comments? _No response_
plainheart commented 1 year ago

如你所说,tooltip 使用 transform 来定位,transform 本身不能像 transition 或 animation 那样把 translate、scale、rotate 等属性单独分开使用,所以就算能够覆盖也会导致定位错误,虽然现在浏览器开始支持脱离 transform 单独使用 translate、scale、rotate,但兼容性还不够好。想知道是什么场景需要覆盖 transform 呢?

idenet commented 1 year ago

@plainheart 不是覆盖,是我想让他能够生效,但现在是没有生效。我猜测是我定义的 transform 被覆盖了。因为其他属性如fontsize 这些是可以生效的

plainheart commented 1 year ago

这里因为 tooltip 本身要定位,是会覆盖的其他 transform 的。

idenet commented 1 year ago

@plainheart 能够判断如果用户设置了 transform 让他添加到定位的 transform 之后吗

idenet commented 1 year ago

@plainheart 或者说有其他的横屏展示方式吗?或者添加一个属性,让定位使用 5.0.2 的版本,这样就能共存了