echarts Y轴名称显示不全（转载）

转载来源：https://blog.csdn.net/qq8241994/article/details/90720657
今天在项目的开发中遇到的一个问题，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;
}
其实就是通过监听echarts的鼠标事件，然后在进行对应的处理。对于大多数的项目来说这个可能是有点多此一举了，因为大部分的图表都会有对应的数据的，只需要设置tooltip就可以了。只是我的项目中遇到了这样的问题（对应的时间段内没有数据），记录一下，希望能够帮到别人吧。

echarts相关问题：

Y轴名称显示不全

https://blog.csdn.net/qq8241994/article/details/90720657

Y轴刻度标签显示不全
https://blog.csdn.net/dandelion_drq/article/details/79270597

Y轴刻度标签名称替换

https://www.cnblogs.com/conserdao/p/6911048.html