echarts的X轴文字倾斜显示、竖向显示、上下错开显示

在做柱状图的时候，X轴名称显示不全，设置X轴的rotate角度还是不行，后来加了一行

axisLabel:{interval:0,rotate:10
}

就好了，如以下两个图，上图是加了的，下图没加。

interval属性是设置坐标轴刻度标签的显示间隔，默认是auto的，所以刚开始不设置间隔，就显示不全，设置为0表示不间隔。

如图红色刻度条是series里type为pictoriaBar的柱状图类型，

{type: 'pictorialBar',name: '标准值',symbol: 'image://images/chart.png',symbolSize: ['100%',2],symbolPosition: 'end',z: 10,data: limitArr,barWidth:'80%'
}

最后是很常用的将X轴文字竖向显示的

xAxis: {type: 'category',data: roadArr,axisLabel: {formatter: function (value) {return value.split("").join("\n")}}
},

效果如下：

最后还有一个X轴文字上下错开显示的功能，先上效果图：

因为图表宽度太小，但是想显示24小时所有时间，就百度找到了这种效果，代码也很简单，在data数组里每隔一个加个 \n 即可。

                            xAxis: {data:["0","\n1","2","\n3","4","\n5","6","\n7","8","\n9","10","\n11","12","\n13","14","\n15","16","\n17","18","\n19","20","\n21","22","\n23"],name:"时间",type:'category',axisTick:{alignWidthLabel:true},axisLabel:{'interval':0},splitLine: {show:true,lineStyle: {color:'#ccc',width:1}}}

echarts的X轴文字倾斜显示、竖向显示、上下错开显示相关推荐

echarts的x轴文字倾斜展示
前言: echarts图x轴文字倾斜展示效果图: 实现代码: xAxis:{data:['站点一','站点二']//主要是下面的代码-倾斜axisLabel:{ rotate : 60 } } 到此 ...
Vue中echarts图表x轴文字倾斜展示(防止字迹展示重叠)
前言 Vue中echarts图表x轴文字倾斜展示效果图代码 axisLabel: {fontSize: 12,color: '#666',interval: 0,//主要是下面的代码-倾斜rota ...
Echarts图X轴文字显示不全
一文学会集成Ecahrts图表目录一.问题二.解決三.其他原因一.问题 x轴文字比较长 ,而且逆时针45度旋转显示,只显示一部分字体,这里可以通过调节与容器的距离解决这种问题二.解決 gr ...
echarts图表 x轴文字过多几种处理方式
1.换行显示代码如下 // 换行显示formatter: function (value) {var ret = "";var maxLength = 4;var valLeng ...
echarts中x轴文字过长换行处理和倾斜处理。
1.换行处理 axisLabel: {formatter: function (val) {console.log(val);var strs = val.split(''); //转化为字符串数组c ...
echarts的y轴文字显示不全、y轴文字与轴之间设置间隔
第一步: grid: {left: "55",containLabel: true }, left 容器左侧的距离. containLabel 用于『防止标签溢出』的场景,标签溢出 ...
echarts柱状图x轴文字纵向显示
方式一 xAxis: {data: dataOrderAxis,axisLabel: {inside: true,textStyle: {color: '#fff'},interval: 0,rota ...
Echars 折线图个性化设置 —X轴文字倾斜
每次遇到这个问提的时候都需要去看别人的博客什么的非常不方便趁现在有时间记录在这里方便查看 xAxis: {type: 'category',axisLabel: {textStyle: { ...
echarts中怎么把x轴文字方向设置为竖向
1.调节坐标轴x轴文字为竖直方向 xAxis:{axisLabel: {color: '#333',// 让x轴文字方向为竖向interval: 0,formatter: function(value ...

echarts的X轴文字倾斜显示、竖向显示、上下错开显示

echarts的X轴文字倾斜显示、竖向显示、上下错开显示相关推荐

最新文章

热门文章