Echarts折线图横屏显示时提示框不旋转

miningnaire 2021-11-01 17:53:05

移动端开发中，我在将竖屏的Echarts图表变成横屏显示效果时，遇到了以下问题：

现象1：期望通过下面这行代码旋转提示框，但实际效果是：提示框的位置仍然是竖屏状态下的样式。

tooltip.extraCssText: 'transform:rotate(90deg)'

现象2：PC端F12调试时发现：随着我的手势在折线图的线体上拖动，提示框会移动到横向图表左下角，方向是我期望实现的横向样式。

Echarts

提示框不旋转的问题应该怎样解决呢？

...全文

665 2 打赏收藏转发到动态举报

写回复

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

libra0v0 2024-06-04

打赏
举报

回复

有结局方法了吗愁死人了

CSDN-Ada助手 2023-01-13

打赏
举报

回复

您可以前往 CSDN问答-前端发布问题, 以便更快地解决您的疑问

Echarts手机端横屏展示原理（uni-app） 1、将控制X轴、Y轴的配置内容相互调换，并配置好相关的旋转、展示的角度。 2、将Y轴设置反向坐标轴，图表的提示信息也进线相应角度的旋转。废弃方案直接将原来的图表组件外层套一层div，利用css的transform: rotate(90deg);进行一个旋转，达到横屏展示的目的。不足情况：数据量少时可以进行正常展示，如果X轴数据量多时，echarts的滚动条生效位置会改变，影响用户使用。实际案例需求：在手机端图表需要点击横屏展示； X轴的数据刻度

1.用echart在手机上做了一个折线图，x轴是显示的当月日期，由于x轴内容过多无法清晰的查看，所以想用横屏的方式，尽可能把一个月30天都在x轴上不重叠的显示(知道echart的滚动条可以拉伸，但是需求是要做横屏的比较方便查看)；2.我用网上找的方法，旋转了页面确实可以横屏查看了，但是在使用x轴的绑定点击事件时发现，折线图只是看起来横屏了，实际的坐标数据并没有随着页面旋转而旋转。不知道怎么办了，求...

echarts 折线图一般都是横屏显示，例如下图（官方案例）：但是如果在移动端显示折线图，数据有非常多的情况下，横屏显示显然数据看着会很拥挤，所以我就想在移动端时，是否可以竖屏显示，这样看着折线图相对来说比较清晰，最终结果如下图（截取手机上的图）：下面是具体的代码：一、实现折线图竖屏显示原理：将x轴和y轴对调，（1）、横屏显示的X和Y轴 xAxis: { type: 'time', axisLabel: { show: true, rotate: 58 }

我以前按照网上的方法就会出现一下问题：点击打开链接问题：旋转了页面确实可以横屏查看了，但是在使用x轴的绑定点击事件时发现，折线图只是看起来横屏了，实际的坐标数据并没有随着页面旋转而旋转。现在我找到了另外一种方法，完美的避免了该问题。思路：代码样例：【这是我直接在echarts官方样例中进行修改的，大家可以看看它原本的形式，可以直接复制这代码到echarts官方样例中查看】 ...

　　以前也用过ECharts(不得不说，这真的是百度的良心产品)，但是都是一些简单的示例。这次因为工作的需要，做了很多图表，对ECharts有了更加深刻的理解，现在来总结一下。首先是ECharts的基础知识(本次是基于Echats的4.8.0版本) 第一个肯定是新手经常遇到的问题，就是，我做的图表压根就没有显示。页面还是一片空白，这个时候，通常要检查元素。用来显示表格的div中，有没有canv...

87,987

社区成员

224,683

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章