vue中echarts的x轴文本内容太长...之后鼠标悬浮显示全部

vue中echarts的x轴文本内容过长…之后鼠标悬浮显示全部

处理鼠标悬浮的方法

 // 处理鼠标悬浮方法ｊｓ文件
function extension(chart) {
    var id = document.getElementById('extension')
    if (!id) {
        var div = "<div id = 'extension' sytle=\"display:block\"></div>";
        $("html").append(div);
    }
    chart.on('mouseover', function(params) {
        // 以X轴为例，Y轴换成yAxis
        if (params.componentType === 'xAxis') {
            $('#extension').css({
                "position": "absolute",
                "color": "black",
                "background":"white",
                "font-family": "Arial",
                "font-size": "12px",
                "padding": "5px",
                "display": "inline"
             }).text(params.value);
             $("html").mousemove(function(event) {
                var xx = event.pageX - 10;
                var yy = event.pageY + 15;
                $('#extension').css('top', yy).css('left', xx);
             });
        }
    }),
    chart.on('mouseout', function(params) {
        if (params.componentType === 'xAxis') {
            $('#extension').css('display', 'none')
        }
    })
}

设置文本过长超出隐藏和调用鼠标悬浮方法

// 设置文本过长超出隐藏
xAxis: {
    triggerEvent: true,
    axisLabel: {
        formatter(value, index) {
             if (value.length > 8) {
                  value = value.slice(0, 8) + '...';
              }
              return value;
         }
    }    
}
// 调用鼠标悬浮方法
extension(chart);

如果文件是写在．ｖｕｅ文件中，则采用以下写法

<script>
export default {
	methods: {
		extension(chart) {
	      // 判断是否创建过div框,如果创建过就不再创建了
	      // 该div用来盛放文本显示内容的，方便对其悬浮位置进行处理
	      var elementDiv = document.getElementById('extension')
	      if (!elementDiv) {
	        var div = document.createElement('div')
	        div.setAttribute('id', 'extension')
	        div.style.display = 'block'
	        document.querySelector('html').appendChild(div)
	      }
	      chart.on('mouseover', function (params) {
	        if (params.componentType == 'xAxis') {
	          var elementDiv = document.querySelector('#extension')
	          //设置悬浮文本的位置以及样式
	          var elementStyle =
	            'position: absolute;z-index: 99999;color: #fff;font-size: 12px;padding: 5px;display: inline;border-radius: 4px;background-color: #303133;box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px'
	          elementDiv.style.cssText = elementStyle
	          elementDiv.innerHTML = params.value
	          document.querySelector('html').onmousemove = function (event) {
	            var elementDiv = document.querySelector('#extension')
	            var xx = event.pageX - 10
	            var yy = event.pageY + 15
	            elementDiv.style.top = yy + 'px'
	            elementDiv.style.left = xx + 'px'
	          }
	        }
	      })
	      chart.on('mouseout', function (params) {
	        //注意这里，如果是y轴的话，需要改为yAxis
	        if (params.componentType == 'xAxis') {
	          var elementDiv = document.querySelector('#extension')
	
	          elementDiv.style.cssText = 'display:none'
	        }
	      })
	    }
	}
}
</script>