apache / echarts

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

外层元素使用伪元素,饼图的tooltip无法触发,鼠标放到内容上没有效果 #15905

Closed wtnu200 closed 3 years ago

wtnu200 commented 3 years ago

Version

5.2.1

Steps to reproduce

使用的chart:Default arrangement 我的html内容: <table> <tr> <td> <div style="height:100%;" id="div_lifechart"> </div> </td> </tr> </table>

我在元素td上加了两个css `td::before { position: absolute; top: -2px; bottom: -2px; left: 15px; width: calc(100% - 30px); content: ""; border-top: 2px solid var(--MainColor); border-bottom: 2px solid var(--MainColor); z-index: 0; }

    td::after {
        position: absolute; 
        top: 15px;
        right: -2px;
        left: -2px;
        height: calc(100% - 30px);
        content: "";
        border-right: 2px solid var(--MainColor);
        border-left: 2px solid var(--MainColor);
        z-index: 0;
    }`

加完后,发现此饼图的tooltip没有显示,注释掉 td::after 又能起作用

What is expected?

正确显示tooltip

What is actually happening?

添加td::after样式之后,tooltip不显示

echarts-bot[bot] commented 3 years ago

Hi! We've received your issue and please be patient to get responded. 🎉 The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that it contains a minimum reproducible demo and necessary images to illustrate. Otherwise, our committers will ask you to do so.

A minimum reproducible demo should contain as little data and components as possible but can still illustrate your problem. This is the best way for us to reproduce it and solve the problem faster.

You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical question.

If you are interested in the project, you may also subscribe to our mailing list.

Have a nice day! 🍵

echarts-bot[bot] commented 3 years ago

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

TRANSLATED
**TITLE** The outer element uses pseudo elements, the tooltip of the pie chart cannot be triggered, and the mouse pointer has no effect on the content **BODY** ### Version 5.2.1 ### Steps to reproduce Chart used: Default arrangement My html content:
I added two css to the element td `td::before { position: absolute; top: -2px; bottom: -2px; left: 15px; width: calc(100%-30px); content: ""; border-top: 2px solid var(--MainColor); border-bottom: 2px solid var(--MainColor); z-index: 0; } td::after { position: absolute; top: 15px; right: -2px; left: -2px; height: calc(100%-30px); content: ""; border-right: 2px solid var(--MainColor); border-left: 2px solid var(--MainColor); z-index: 0; }` After adding, I found that the tooltip of this pie chart is not displayed, commenting out td::after will work again ### What is expected? Display tooltip correctly ### What is actually happening? After adding the td::after style, the tooltip is not displayed
wtnu200 commented 3 years ago

It's a CSS style problem. It's solved. Thank you