关于echarts中Y轴左侧文字显示不全的解决办法

今天在项目的开发中遇到的一个问题，echarts Y轴左侧的文字太多了，显示不全，由于这个问题网上的解决办法相对较少，所以记录一下。

先说一下网上的版本：

1.调整grid下的left属性，说白了就是调整y轴与左侧的距离，大了就能显示更多的文字

grid:{
    top:48,
    left:400,// 调整这个属性
    right:50,
    bottom:50,
}

这个的缺陷很明显，文字太多还是不管事 ，而且看起来很别扭

2.通过设置axisLabel下的formatter属性，实现自定义处理文字，将多出来的用省略号替代

yAxis:{
    axisLabel:{
        show:true,
        formatter:function(value){
            var texts=value;
            if(texts.length>15){ // 具体多少字就看自己了
                texts=texts.substr(0,15)+'...';
            }
            return texts;
        }
    }
}

这个是比较合适的方法，将过长的文字用省略号替代了，鼠标放到图形上往往可以通过设置tooltip看到全称。

但是也有一个缺陷，当这个对应的图形不存在，就是没有数据的时候，你是不知道它的全称的

3.这个就是针对上面所说的缺陷所进行的处理，增加鼠标放置到y轴上显示悬浮框显示全称

// 项目是用vue写的
that.chart.on('mouseover',function(e){
    const component=e.componentType;
    const value=e.value;
    const offsetX=e.event.offsetX;
    const offsetY=e.event.offsetY;
    if(component==='yAxis'){
        $('#图表的容器id').find('.echarts_tip').remove();
        $('#图表的容器id').append(`
                <div class="echarts_tip" style="top:${offsetY}px;left:${offsetX}px;">
                    ${value}
                </div>
            `)
    }   
})
 
that.chart.on('mouseout',function(e){
    const component=e.componentType;
    if(conponent==='yAxis'){
        $('#图表的容器id').find('.echarts_tip').remove();
    }
})

css代码：

.echarts_tip{
    position:absolute;
    border-radius:5px;
    background:rgba(0,0,0,.5);
    color:#FFF;
    padding:10px 20px;
}

原文链接：https://blog.csdn.net/qq8241994/article/details/90720657