echart单击后获取横坐标值_echart横坐标（纵坐标）的值竖着、斜着、省略号（…）显示的实现方法...

目录

echart横坐标(纵坐标)的值竖着、斜着、省略号(…)显示的实现方法

1、竖着显示

2、根据项目多少，判断标注是横着还是竖着

3、斜着标注

4、只显示4个字，其余的用省略号代替

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;

}

}

}