Echarts x轴底部名称过长显示...，悬浮时展示所有文字

image.png

X轴配置

 xAxis: [
          {
            triggerEvent: true,  //记住要加上 设置为true后，可触发事件
            axisLabel: {
              interval: 0,
              rotate: 40, // 文字倾斜
              textStyle: {
                color: '#666',
                fontSize: '12'
              },
              formatter: (value, index) => {
                if (value.length > 6) {
                  return value.substring(0, 4) + '...'
                }
                return value
              }
            }
          }
        ],

鼠标悬浮展示更多方法

methods:{
  extension(chart) {
      var elementDiv = document.getElementById('extension_more')
      if (!elementDiv) {
        var div = document.createElement('div')
        div.setAttribute('id', 'extension_more')
        div.style.display = 'block'
        document.querySelector('html').appendChild(div)
      }
      chart.on('mouseover', function(params) {
        if (params.componentType === 'xAxis') {
          var elementDiv = document.querySelector('#extension_more')
          // 设置悬浮文本的位置以及样式
          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;max-width:300px'
          elementDiv.style.cssText = elementStyle
          elementDiv.innerHTML = params.value
          document.querySelector('html').onmousemove = function(event) {
            var elementDiv = document.querySelector('#extension_more')
            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) {
        if (params.componentType === 'xAxis') {
          var elementDiv = document.querySelector('#extension_more')
          elementDiv.style.cssText = 'display:none'
        }
      })
    },
}

调用extension方法

var chartDom = document.getElementById(ele)
var myChart = echarts.init(chartDom)
var option={
    //....
}
option && myChart.setOption(option)
this.extension(myChart)  //直接调用即可