echarts x轴名称太长

echarts x轴名称太长了，隐藏一部分，鼠标移到名称上，显示全称

function extension(mychart, type) {
  let extension = document.getElementById("extension");
  mychart.on('mouseover', function (params) {
    if (params.componentType == type) {
      extension.innerHTML = params.value;
      let mousePos = mouseMove();
      let x = mousePos.x - 180;
      let y = mousePos.y - 50;
      extension.style.cssText = "top:" + y + "px;left:" + x +"px;display:inline;";
    }
  });

  mychart.on('mouseout', function (params) {
    if (params.componentType == type) {
      extension.style.cssText = "display:none";
    }
  });
};

function mousePosition(ev){
  if(ev.pageX || ev.pageY){
    return {x:ev.pageX, y:ev.pageY};
  }
  return {
    x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
    y:ev.clientY + document.body.scrollTop - document.body.clientTop
  };
}
function mouseMove(ev){
  ev = ev || window.event;
  return mousePosition(ev);
}

图表中
xAxis: {
  type: 'category',
  data: [],
  triggerEvent: true,
  axisLabel: {
    formatter: function (value) {
      let res = value;
      if (res.length > 5) {
        res = res.substring(0, 4) + "..";
      }
      return res;
    }
  },
},

#extension {
  position: absolute;
  font-size: 14px;
  border-radius: 5px;
  color: #fff;
  background: #000;
  filter:alpha(opacity=70);
  -moz-opacity:0.7;
  -khtml-opacity: 0.7;
  opacity: 0.7;
  padding:5px;
  display: none;
}