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;
			 }
        }
	}