echarts x轴文字个数太多_echartsX轴文本数据太长溢出问题

image.png

1.方法一

在宽度有限，数据偏多的情况下，我们会遇到第一个和最后一个数据溢出问题，针对这个问题官方文档给出的解决方法是使X轴数据倾斜显示。

axisLabel: { //坐标轴刻度标签的相关设置

interval: 0,

rotate:'70',//旋转度数

}

效果如图所示：

image.png

2.方法二：使用formatter函数，你可以自定义文字竖向排列或者更多格式

①使用formatter判断文字显示布局，在这你可以利用它显示个性化数据

axisLabel: { //坐标轴刻度标签的相关设置

interval: 0,

textStyle: {

color: 'rgba(255,255,255,0.6)',

fontSize:10,

interval: 3,//隔3个显示一个

formatter:function(value,index){

if(index == 0){

return ' '+value

}

if(index == 4){

return value

}

效果如图所示：

image.png

②使用formatter使文字竖向排列,不太适合文字过长的，因为高度撑开折线图显示不美观

axisLabel: { //坐标轴刻度标签的相关设置

interval: 0,

// rotate:'70',//旋转度数

formatter:function(value){

return value.split("").join("\n");

}

效果如图所示：

image.png

3.使用boundaryGap设置，此方法会有留白，有强迫症的慎用

xAxis: [{

boundaryGap: true,//坐标轴两边留白

}]

axisLabel: { //坐标轴刻度标签的相关设置

interval: 3,

}

效果如图所示：

image.png

echarts x轴文字个数太多_echartsX轴文本数据太长溢出问题相关推荐

echarts x轴文字个数太多_echarts x轴标签文字过多导致显示不全，最有效的3种解决方法...
echarts x轴标签文字过多导致显示不全,只是我之前在csdn发表过,经过实践,效果不错! 如图: 办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用 ...
echarts的y轴文字显示不全、y轴文字与轴之间设置间隔
第一步: grid: {left: "55",containLabel: true }, left 容器左侧的距离. containLabel 用于『防止标签溢出』的场景,标签溢出 ...
echarts图表 x轴文字过多几种处理方式
1.换行显示代码如下 // 换行显示formatter: function (value) {var ret = "";var maxLength = 4;var valLeng ...
Echarts柱状图中让x轴的坐标文字竖版向下显示；echarts x轴文字竖排；echarts x轴文字
效果代码 xAxis: {// data: ['消防烟感', '摄像机', '环境烟感', '路灯', '地磁'],data:myKeys,axisLine: {show: false //隐藏X轴 ...
echarts折线图不显示y轴值_Echarts 折线图y轴标签值太长时显示不全的解决办法
问题先看一下正常的情况再看一下显示不全的情况所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全的情况. 分析先贴一 ...
echartsX轴、y轴文字太长；重叠显示。
问题描述 echarts:X轴.y轴文字太长:重叠显示. 解决方案1:截取部分字符:超出显示- xAxis: {data: [ "羽绒服超过5个字了哈哈哈", "羊毛衫& ...
echarts的x轴文字倾斜展示
前言: echarts图x轴文字倾斜展示效果图: 实现代码: xAxis:{data:['站点一','站点二']//主要是下面的代码-倾斜axisLabel:{ rotate : 60 } } 到此 ...
echarts的X轴文字倾斜显示、竖向显示、上下错开显示
在做柱状图的时候,X轴名称显示不全,设置X轴的rotate角度还是不行,后来加了一行 axisLabel:{interval:0,rotate:10 } 就好了,如以下两个图,上图是加了的,下图没加. ...
ECharts 柱状图横轴(X轴)文字内容显示不全
1.问题描述 ECharts在限制显示区域大小或者数据内容过多的时候有时会使得柱状图横轴(X轴)显示不全的问题,效果如下图所示. 2.解决办法 1)更改grid布局原来布局 option = {gr ...
在 Echarts 中设置折线图x轴文字的倾斜度
在 Echarts 中设置折线图x轴文字的倾斜度在工作需求中,有需要把 Echarts 折线图的文字变成倾斜的样式.类似这样的: 这个功能咋实现? 很简单.加一句话就行了 // 配置项 option ...

echarts x轴文字个数太多_echartsX轴文本数据太长溢出问题

echarts x轴文字个数太多_echartsX轴文本数据太长溢出问题相关推荐

最新文章

热门文章