目录
echart横坐标(纵坐标)的值竖着、斜着、省略号(…)显示的实现方法
echart横坐标(纵坐标)的值竖着、斜着、省略号(…)显示的实现方法
1、竖着显示
效果:
实现代码:
xAxis : [
{
type : 'category',
data : xData,
axisLabel:{
interval: 0,
formatter: function (value) {
//x轴的文字改为竖版显示
var str = value.split("");
return str.join("\n");
}
}
}
],
2、根据项目多少,判断标注是横着还是竖着
有时候需要进行判断,X轴项目多的时候才竖着,X轴项目少的时候不需要竖着还是横着。修改formatter
formatter: function (value) {
//x轴的文字改为竖版显示
if(xData.length>6){
var str = value.split("");
return str.join("\n");
}else{
return value; //必须加上这个,不然栏目小于6个的 不显示标注
}
}
3、斜着标注
xAxis:{
//文字样式
axisLabel: {
show: true,
textStyle: {
color: '#595C61'
},
rotate:45
}
}
4、只显示4个字,其余的用省略号代替
效果:
实现代码:
xAxis:{
//文字样式
axisLabel: {
show: true,
textStyle: {
color: '#595C61'
},
formatter:function(value){
if(value.length > 6){
return `${value.slice(0,4)}...`;
}
return value;
}
}
}