关于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(`
                
${value}
`) } }) 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;
}

其实就是通过监听echarts的鼠标事件,然后在进行对应的处理。对于大多数的项目来说这个可能是有点多此一举了,因为大部分的图表都会有对应的数据的,只需要设置tooltip就可以了。只是我的项目中遇到了这样的问题(对应的时间段内没有数据),记录一下,希望能够帮到别人吧。

你可能感兴趣的:(echarts,vue,js)