您现在的位置是:首页 > 正文

echarts实现横轴刻度名倾斜展示,并且解决文字超出部分消失问题 最新发布

2024-02-01 02:01:30阅读 2

需求背景:

xAxis.axisLabel. interval如果不手动设值的话,默认就是‘auto’,会采用标签不重叠的策略间隔显示标签。当数据量特别大的时候,展示出来的刻度标签就会很少,导致用户体验不好。如下图所示:
interval为auto时的效果
如果给interval设为0,让所有标签都展示出来,那就会全部重叠,直接看不清标签了。如下图所示:
interval为0时的效果
或者可以手动计算出interval的值,动态设置,但如果在标签不重叠的情况下,能够展示出来的标签还是非常少。
所以最后采用倾斜刻度标签的方式来尽可能多的展示出坐标轴标签。
如果要设置刻度名倾斜展示,需要给xAxis.axisLabel.rotate设置一个在(-90,90)之内的值。例如chartOption.xAxis.axisLabel.rotate = 60(具体可以参考官网:官网rotate配置地址)。效果图如下:
设置倾斜角度后的效果

当x轴刻度标签名过长的时候,会出现超过图表区域的文字被隐藏的问题

没有做任何处理的效果:
没有做任何处理的效果

解决思路:

1、计算出横坐标刻度标签中最长的长度
2、根据这个长度计算出图表的grid.bottom的值。因为设置的倾斜角度是60度,可以通过三角函数计算得出:最大长度*Math.sin(60 * Math.PI / 180)
3、同时如果最左边的标签特别长的话,还需要设置grid.left才行。grid.left也可以通过三角函数计算得出:最左侧标签长度*Math.cos(60 *Math.PI / 180)。
(备注:最好是取前三条标签对应的左侧宽度的最大值,可以避免出现第一条很短,第二条很长导致第二条长度超出的问题)
4、将计算出来的值赋给grid.left以及grid.bottom

网站文章

  • 事件之事件对象(event)

    事件之事件对象(event)

    DOM中的事件对象event对象中存在是属性和方法如下表所示:在事件处理程序内部,对象this始终等于currentTarget(事件处理程序注册在这个元素之上),而target只包含事件的实际目标(即实际作出事件处理的元素)。使用方法:event.属性                eg:event.preventDefault();--------取消特定时间的默认事件(写...

    2024-02-01 02:01:24
  • 11-2.箭头函数与函数的this问题

    11-2.箭头函数与函数的this问题

    test()实质上是window.test() window可以被省略某一个元素使用就指向某一个元素打开页面后点击一下div在对象中也是哪个对象使用了,this就指向谁。

    2024-02-01 02:01:17
  • 如何准备大学生电子设计竞赛

    如何准备大学生电子设计竞赛

    如何备考大学生电子设计竞赛

    2024-02-01 02:00:47
  • Invalid attempt to spread non-iterable instance 错误

    Invalid attempt to spread non-iterable instance 错误

    扩展运算符错误数组要用 []对象要用 {}

    2024-02-01 02:00:41
  • 迭代器和生成器

    迭代器和生成器

    迭代器遍历器(Iterator)就是一种机制。它是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口,就可以完成遍历操作。ES6 创造了一种新的遍历命令 f...

    2024-02-01 02:00:34
  • eureka的多级缓存机制

    当客户端需要调用某个服务时,它会向Eureka Server发送请求,Eureka Server会从自己的缓存中查找服务实例的信息,如果缓存中没有,则会从其他Eureka Server节点或者服务实例...

    2024-02-01 02:00:28
  • SQL查询语句分步详解------HAVING命令

    SQL查询语句分步详解------HAVING命令

    2024-02-01 01:59:59
  • 在 ES 模块构建的Nodejs中如何使用 __dirname 和 __filename

    解决在使用nodejs构建`ESM`程序的时候,找不到`__filename`和`__direname`这两个变量,并且不能直接导入`JSON`文件的问题

    2024-02-01 01:59:52
  • jquery 读取本地 XML文件 代码

    可以使用 jQuery 的 AJAX 方法实现,代码如下: $.ajax({ type: "GET", url: "file.xml", dataType: "xml", success: function(xml) { // 在此处添加代码 }});

    2024-02-01 01:59:19
  • Springboot旅游社交平台9k9sq计算机毕业设计-课程设计-期末作业-毕设程序代做

    Springboot旅游社交平台9k9sq计算机毕业设计-课程设计-期末作业-毕设程序代做本源码技术栈:项目架构:B/S架构开发语言:Java语言开发软件:idea eclipse前端技术:Layui、HTML、CSS、JS、JQuery等技术后端技术:JAVA运行环境:Win10、JDK1.8数 据 库:MySQL5.7/8.0pwd=kap3 最新计算机专业原创开发毕业设计源码+数据

    2024-02-01 01:59:12