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个字,其余的用省略号代替

效果

echart横坐标(纵坐标)的值竖着、斜着、省略号(…)显示的实现方法_第1张图片

实现代码

xAxis:{
		//文字样式
		axisLabel: {
             show: true,                               
             textStyle: {
                color: '#595C61'
             },
             formatter:function(value){
				 if(value.length > 6){
                        return `${value.slice(0,4)}...`;
                 }
                 return value;
			 }
        }
	}


 

你可能感兴趣的:(Echart图表)