echarts x 轴文字过长，显示省略号，hover上去显示全部的实现方式

echarts中核心配置

xAxis: [{
  type: 'category',
  data: xValues,
  axisTick: {
    show: false,
  },
  axisLine: {
    show: false
  },
  axisLabel: {
    show: true,
    interval: 0,
    formatter: function (value) {
      return (value.length > 6 ? (value.slice(0,6)+"...") : value )
    },
    textStyle: {
      color: '#FFFFFF',
      fontSize: 12,
      lineHeight: '16px'
    }
  },
  triggerEvent: false // 设置为true后，可触发事件。实现x轴文字过长，显示省略号，hover上去显示全部的功能
}],

html部分代码

<div className={`x-axis-tip ${isXAxisTipShow ? "show" : ""}`}></div> //react中的应用

css代码（stylus）

.x-axis-tip
  display none
  position absolute
  padding 0 5px
  border-radius 3px
  box-shadow 2px 2px 2px 0 #000
  background #fff
  font-size 12px
  line-height 18px
  color #575757
.x-axis-tip.show
  display block

js代码（ReactEcharts中额事件监听）

onEvents = {
  // x轴文字过长hover显示全部
  'mouseover': (params) => { 
    document.querySelector('.age-distribution').style.cursor = "auto"
    if( params.componentType == 'xAxis' ){
      let clientX = params.event.event.clientX
      let clientY = params.event.event.clientY
      let xAxisTip = document.querySelector('.x-axis-tip')
      xAxisTip.innerText = params.value
      xAxisTip.style.left = clientX + document.documentElement.scrollLeft + "px"
      xAxisTip.style.top = clientY + document.documentElement.scrollTop + 10 + "px"
      this.clock = setTimeout(() => {
        this.setState({isXAxisTipShow: true})
      }, 500)
    }
  },
  'mouseout': ()=> {
    clearTimeout(this.clock)
    this.setState({isXAxisTipShow: false})
  },
}