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

wbrvyc0a 于 4个月前发布在 Echarts

关注(0)|答案(6)|浏览(58)

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

来源：https://github.com/apache/echarts/issues/18035

6条答案

按热度按时间

7bsow1i61#

@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

- OS: The latest version of macOS
- Browser: Version 107.0.5304.121 (official) (arm64)
- Framework: vue@2.6.10

Any additional comments?

No response

赞(0）回复(0）举报 4个月前

mm5n2pyu2#

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

赞(0）回复(0）举报 4个月前

ugmeyewa3#

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

赞(0）回复(0）举报 4个月前

wfypjpf44#

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

赞(0）回复(0）举报 4个月前

lf3rwulv5#

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

赞(0）回复(0）举报 4个月前

zpf6vheq6#

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