使用echarts图表做页面展示的时候,有时轴上的标题文本过长,显示不全。这时如果图表是自动伸缩的话没关系,标题越长会占据越大的位置,但有时多个图表在一起展示,为了美观会控制座标轴上的标签长度或宽度,这时就需要对标题调用函数解决进行一些处理。可以对标题设置自动换行,或者设置超过一定长度时自动加省略号显示,如下图示例:本文地址:http://www.04007.cn/article/1151.html,未经许可,不得转载.
本文地址:http://www.04007.cn/article/1151.html,未经许可,不得转载.
这时可以在axisLabel下添加属性和方法,当内容过长时,可以设置超过一定长度显示省略号,也可以设置按照一定长度进行内容换行处理。本文地址:http://www.04007.cn/article/1151.html,未经许可,不得转载.
axisLabel: { interval: 0, margin: 5, fontSize: 12, //超过一定长度显示省略号 formatter:function(value){ return value.length > 12 ? value.substr(0, 12) + '...': value } //按照一定长度进行内容换行处理 formatter:function(value){ var val = "" for(var i=0; i< Math.ceil(value.length/12); i++) { val += value.substr(i*10, 10) + "\n" } return val; } },在设置超过一定长度显示省略号的情况下,也可以通过设置在鼠标移动上去显示全部名称的方法。但我觉得不需要,因为在右边的数据区域,图标放上去之后本来就会显示完整的名称和数据。本文地址:http://www.04007.cn/article/1151.html,未经许可,不得转载.
本文地址:http://www.04007.cn/article/1151.html 未经许可,不得转载. 手机访问本页请扫描右下方二维码.
![]() |
![]() |
手机扫码直接打开本页面 |