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

阳光穿透心脏的1/2处 2021-07-24 19:17 1197阅读 0赞

1、竖着显示

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

3、斜着标注

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

--------------------

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

# 1、竖着显示 #

**效果**：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70]

实现代码：

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

**效果**：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70 1][]

**实现代码**：

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70]: /images/20210724/15a6ba5aa19c43fba06ac859fdc84395.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70 1]: /images/20210724/ac79bb999abf4690a5b6ec51dd1999b8.png