About echarts solution in the Y-axis on the left side of the text display incomplete

Today, a problem encountered in the development of the project, the text on the left side of echarts Y axis too much, show incomplete, due to the relatively small online solution to this problem, so the record about.

Let me talk about the online version:

1. Adjust the Grid left attributes, it means to adjust the left and the y-axis, large characters can be displayed more

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

This defect is obvious, or too much text no matter what, but looks very awkward

2. By setting the attributes AxisLabel formatter, implement a custom word processing, out of the multiple ellipses alternative

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

This method is more appropriate, the long text replaced by ellipses, mouse to the full name of the pattern can often be seen by setting the tooltip.

But there is a flaw, when the corresponding graphic does not exist, that there is no data, you do not know the full name of

3. This is the processing for the above-mentioned defects with increases in the y-axis mouseover display box displays the full name of the suspension

// 项目是用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 code:

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

In fact, by listening echarts mouse events, and then performing the corresponding processing. For most projects, this may be a bit superfluous, because most of the chart will have a corresponding data, only need to set tooltip on it. Just my project encountered such a problem (corresponding period of no data), record what I hope to be able to help someone else.