apache / echarts

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

[Bug] 移动端,默认折线图是a大小,旋转90度变成b区域,折线图触发事件区域还是a大小位置和方向,而不是旋转以后的b大小 #19303

Open xiaopangshushu opened 1 year ago

xiaopangshushu commented 1 year ago

Version

^4.1.0

Link to Minimal Reproduction

https://echarts.apache.org/v4/examples/zh/editor.html?c=area-stack

Steps to Reproduce

就是基本的折线图或者堆叠图都可以复现的,项目是^4.1.0以上,vue3,uni-app

Current Behavior

vue3环境,uni-app组件环境,正常情况是手机竖直状态,echart宽度是手机宽度,操作显示都正常,但是在v-show隐藏页面其他元素,rotate图表90deg,延时手动调用echarts.resize()方法后,echart是折线图可以正常显示,但是事件触发区域似乎是之前未旋转时候的触发区域, 不知道怎么解决?

image

如上图,是旋转之后的部分曲线,红色是正常曲线的的大小, 1.目前在红色区域左右滑动,是正常触发事件的,但是红色之外的地方,只能触发 echarts.getZr(),不能触发其他时间, 2而且,红色区域触发事件的方向也是有问题的,是默认情况的方向

Expected Behavior

希望,旋转前,从左到右,正常触发事件,旋转后,从上到下,正常触发事件

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

echarts-bot[bot] commented 1 year ago

@xiaopangshushu 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] On the mobile side, the default line chart is a size, and it is rotated 90 degrees to become a b area. The line chart trigger event area is still the a size position and direction, not the b size after rotation. **BODY** ### Version ^4.1.0 ### Link to Minimal Reproduction https://echarts.apache.org/v4/examples/zh/editor.html?c=area-stack ### Steps to Reproduce Even basic line charts or stacked charts can be reproduced. The project is ^4.1.0 or above, vue3, uni-app ### Current Behavior vue3 environment, uni-app component environment, the normal situation is that the mobile phone is in the vertical state, the echart width is the mobile phone width, the operation display is normal, but in v-show, other elements of the page are hidden, rotate chart 90deg, delay manual call echarts.resize( ) method, echart's line chart can be displayed normally, but the event trigger area seems to be the trigger area when it was not rotated before. I do not know how to solve this? image As shown in the picture above, it is part of the curve after rotation. The red color is the size of the normal curve. 1. Currently, sliding left and right in the red area triggers events normally, but in places other than red, only echarts.getZr() can be triggered, and cannot be triggered at other times. 2 Moreover, the direction of the red area triggering event is also problematic, it is the default direction. ### Expected Behavior It is hoped that before rotation, the event will be triggered normally from left to right, and after rotation, the event will be triggered normally from top to bottom. ### Environment ```markdown - OS: -Browser: - Framework: ``` ### Any additional comments? _No response_
xiaopangshushu commented 1 year ago

这是来自QQ邮箱的假期自动回复邮件。   您好,我最近正在休假中,无法亲自回复您的邮件。我将在假期结束后,尽快给您回复。

plainheart commented 1 year ago

麻烦提供下未用框架的复现代码片段,以便确认问题非第三方框架导致的。

badspider7 commented 5 months ago

你有,请问你之后解决了吗,我也碰到一样的问题了

xiaopangshushu commented 5 months ago

这是来自QQ邮箱的假期自动回复邮件。   您好,我最近正在休假中,无法亲自回复您的邮件。我将在假期结束后,尽快给您回复。