ECharts，X轴或Y轴名字过长截断且鼠标悬停在刻度标签上时显示全称

业务需求

下图的柱状图，Y轴刻度标签长度大于3个字时，截断并显示…，当鼠标悬停在标签上时，显示全称，鼠标移开则消失。

开发环境

ECharts + vue

代码实现过程

<div class="bottom_left">
	<!-- id为wuzichuku的div就是柱状图的容器，按需求正常设置宽高及样式即可 -->
  <div class="wuzichuku_div" id="wuzichuku" @mousemove="onmousemove"></div>
</div>
<!-- id为extension的div为待会要显示/隐藏刻度标签名字的容器，需设置display: none，以及在css中设置容器的其他样式 -->
<div id="extension" style="display: none" class="tooltipDiv"></div>

//这些都是刻度标签容器的固定样式，可以写在css中，使js的部分可以专注处理逻辑
.tooltipDiv{
   color:white;
   position:absolute;
   font-size:16px;
   padding:10px;
   z-index:3000;
   background-color:black;
 }

getLine() {
   var _this = this;
   var chartDom = document.getElementById("wuzichuku");
   var myChart = echarts.init(chartDom);
   var option;
   //以下...的部分为同本文关系不大的内容，可根据业务需求自行设定
   option = {
     color: [...],
     tooltip: {...},
     legend: {...},
     grid: {...},
     xAxis: {
       type: "category",
       ...
       //triggerEvent: true, //这句很重要,没有不会触发事件，想要在X轴添加鼠标事件，则写在这里
     },
     yAxis: {
       type: "value",
       ...
       triggerEvent: true, //这句很重要,没有不会触发事件，想要在Y轴添加鼠标事件，则写在这里
       axisLabel: {
         show: true, //是否显示刻度标签。
         color: "rgba(255, 255, 255, 1)",
         width: 30, //文本显示宽度。想要设置截断，必须设置width，不然下一行代码无法生效。
         overflow: "truncate", //文字超出宽度是否截断或者换行。truncate代表超出部分截断，且echarts默认截断后显示...，需要其他截断显示，可以查官方文档设置。
       },
     },
     series: [...],
   };
   option && myChart.setOption(option);

	//设置triggerEvent: true之后，就可以给图表绑定事件，可支持事件有鼠标点击、悬停、移入、移出等，可以查询官方文档。
   myChart.on("mouseover", function (params) {
   	//若想设置针对X轴的事件，if函数的条件可以为params.componentType == "xAxis"
     if (params.componentType == "yAxis") {
     	//鼠标悬停的位置为Y轴时，我们去获取刻度标签容器的dom
       var extension = document.getElementById("extension");
			//设置display为显示
       extension.style.display = "inline-block";
       //设置容器的内容为Y刻度标签的全称
       extension.innerHTML = params.value;
       
     }
   });
   //鼠标移出时，刻度标签容器隐藏
   myChart.on("mouseout", function (params) {
     if (params.componentType == "yAxis") {
       var extension = document.getElementById("extension");

       extension.style.display = "none";
     }
   });
 },

 // 给echats图表绑定的事件，获取鼠标当前位置，用来设置刻度标签容器显示的位置
 onmousemove: function (event) {
   var extension = document.getElementById("extension");
   extension.style.top = (event.pageY +10) + 'px';
   extension.style.left = (event.pageX +10) + 'px';
 },

代码实现效果