vue echarts X轴文本过长隐藏省略号展示和移入气泡显示

话不多说上图上代码
需求一：由于宽度限制X轴内容过长省略号展示

	xAxis:{
		triggerEvent: true,//一定要设置为true
		axisLabel: {
		 formatter: function (value) {
		   var res = value;
		   if (res.length > 3) {//根据自身需求设置显示字数
		     res = res.substring(0, 3) + "..";
		   }
		   return res;
		 },
		},
	}

需求二：由于这样看不清楚X轴全部内容，那么是否可以新增一个移入小气泡展示完全内容的功能

1. echarts x轴移入事件

mounted() {
	var line = this.$echarts.init(this.$refs.Bar);
    line.setOption(this.option);
    line.on('mouseover', function(params) {
      if(params.componentType == "xAxis") {
      //判断移入x轴
      }
    });
}

2.移入显示

<div class="myEcharts" id="bar1myEcharts">//外层盒子
	<div class="Bar1" ref="Bar"></div>//echarts
	<div id="extension" class="extension"></div>//气泡展示文字
</div>

//气泡的样式
.extension{
    display:none;
    padding: 2px 5px;
    border-radius: 5px;
    background: rgba(0,0,0,0.5);
}

获取鼠标位置坐标的方法
methods: {
	mouseMove(ev){
	  ev = ev || window.event;
	  return this.mousePosition(ev);
	},
	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
	  };
	},
},
mounted() {
	var that = this;
    var line = this.$echarts.init(this.$refs.Bar);
    line.setOption(this.option);
    line.on('mouseover', function(params) {
      let extension = document.getElementById("extension");
      if(params.componentType == "xAxis") {
        let mousePos = that.mouseMove();
        //鼠标位置，按需求设置
        let x = mousePos.x;
        let y = mousePos.y-20;
        extension.innerHTML = params.value;
        //气泡样式
        extension.style.cssText = "top:" + y + "px;left:" + x +"px;display:inline;position: fixed;";
      }
    });
}

3.移出隐藏气泡

mounted() {
    var that = this;
    var line = this.$echarts.init(this.$refs.Bar);
    line.setOption(this.option);
    line.on('mouseover', function(params) {
      let extension = document.getElementById("extension");
      if(params.componentType == "xAxis") {
        let mousePos = that.mouseMove();
        let x = mousePos.x;
        let y = mousePos.y-20;
        extension.innerHTML = params.value;
        extension.style.cssText = "top:" + y + "px;left:" + x +"px;display:inline;position: fixed;";
      }
    });
    //移出最外层盒子气泡消失
    document.getElementById('bar1myEcharts').addEventListener('mouseleave', function(params) {
      let extension = document.getElementById("extension");
      extension.style.cssText = "display:none;";
    });
  },