Echarts x轴标签太长解决方案

有时候我们会遇到x轴标签过于长的情况，会导致显示不全

示例代码

option: {xAxis: {type: 'category',data: ['长长的标签', '长长长的标签', '长长长长长的标签', '长的标签', '长长长长的标签', '长长长的标签', '长长长长长长的标签']},yAxis: {type: 'value'},series: [{type: 'bar',data: [80, 67, 42, 58, 40, 30, 56]}]
}

方案1：文字旋转角度

xAxis: {type: 'category',data: ['长长的标签', '长长长的标签', '长长长长长的标签', '长的标签', '长长长长的标签', '长长长的标签', '长长长长长长的标签'],axisLabel: {// 旋转角度rotate: 15}
}

方案2：文字换行

xAxis: {type: 'category',data: ['长长的标签', '长长长的标签', '长长长长长的标签', '长的标签', '长长长长的标签', '长长长的标签', '长长长长长长的标签'],axisLabel: {formatter: val => {let result= ''const textLength = val.lengthconst limitNumber = 4 // 一行显示几个字if (textLength > limitNumber) {for (var i = 0; i < textLength; i += limitNumber) {result += val.substring(i, i + limitNumber) + '\n'}result = result.trim() // 移除最后一个换行符} else {result = val}return result}}
}

方案3：在柱条中显示

xAxis: {show: false, // 隐藏x轴标签type: 'category',data: ['长长的标签', '长长长的标签', '长长长长长的标签', '长的标签', '长长长长的标签', '长长长的标签', '长长长长长长的标签']
}
series: [{type: 'bar',data: [80, 67, 42, 58, 40, 10, 56],label: {// 显示label代替x轴标签show: true,position: 'insideBottom',formatter: params => {return params['name'].split('').join('\n')}}}
]

Echarts x轴标签太长解决方案相关推荐

ECharts X 轴标签过长导致文字重叠的 4 种解决方案
目录方法一:Echarts X 轴标签倾斜摆放方法二:Echarts X 轴限制每行字数,换行显示方法三:Echarts X 轴垂直竖显文字方法四:Echarts X 轴隔行显示使用 ...
echartsX轴、y轴文字太长；重叠显示。
问题描述 echarts:X轴.y轴文字太长:重叠显示. 解决方案1:截取部分字符:超出显示- xAxis: {data: [ "羽绒服超过5个字了哈哈哈", "羊毛衫& ...
vue echarts x轴文本过长，设置超出隐藏显示省略号，鼠标悬浮上显示全部
1. 原生js版本源码如下: <!DOCTYPE html> <html lang="en"><head><meta charset= ...
echarts y轴文本过长，设置超出隐藏，然后显示省略号，并且鼠标悬浮上之后显示全部
Echarts 标签中文本内容太长的时候怎么办 ? 看如下两块有分别说明: 具体代码如下:  <script src="${ctx}/tiles/ ...
堆叠柱形图上自定义数字_柱形图的类别标签太长太宽，倾斜起来了怎么办？
偶然发现的小技巧,和大家分享. 我们做柱形图的时候,如果类别标签的文字比较长,会导致x轴的标签倾斜起来,就是下图的样子. 我们说,千万不要让柱形图的x轴标签倾斜文字,这样读者要歪着脖子看,换谁都不舒服 ...
Echarts X轴内容过长自动隐藏，鼠标移动上去显示全部
使用echarts图表做页面展示的时候,当X轴内容过长时,之前一直用的 '\n' 换行(将字符串根据需要分成两行来展示),这样有很大的局限性(如内容过长的话分成两行也放不下,而且也会影响美观),后 ...
鼠标右击菜单太长解决方案
随着学业大的不断深入,我们要学习应用的软件也越来越多,然后某个时刻惊奇的发现,鼠标右键菜单栏太长了. 很是麻烦与不美观!!! 解决方案:360下载右键管理小工具即可
python pyecharts x轴标签名太长
问题:利用pyecharts绘图,有时候我们的x轴标签名比较长,发现会被挤出去,就算调整x轴标签旋转45°都没用,那么该如何解决该问题呢? 利用Gird解决dataZoom与x轴标签重叠问题 pyec ...
Highcharts X轴名称太长，如何设置下面这种样式
Highcharts所有的图表除了饼图都有X轴和Y轴,默认情况下,x轴显示在图表的底部,y轴显示在左侧(多个y轴时可以是显示在左右两侧),通过chart.inverted = true 可以让x,y轴 ...

Echarts x轴标签太长解决方案

Echarts x轴标签太长解决方案相关推荐

最新文章

热门文章