echarts y轴或者x轴限制字符，并且悬浮显示全部

<template>
  <div>
    <div id="echarts_content"></div>
  </div>
</template>

<script>
export default {

  data() {
    return {}
  },
  mouted() {
  	this.initCharts()
  },
  methods: {
    initCharts() {
      // 初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('echarts_content'))
      var data = henameSums
      var className = henameList
      var colorList = ['#FF6600', '#FAC450', '#F7A729', '#00B050', '#0a7c3d']
      // 绘制图表
      var option = {
        title: {
          left: 'left',
          top: '2%',
          text: 'T超级',
          textStyle: {
            fontWeight: 'bold',
            color: '#6666',
            fontSize: 18,
            fontFamily: 'Microsoft YaHei'
          }
        },
        grid: {
          left: '2%',
          right: '1%',
          bottom: '1%',
          top: '5%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none'
          }
        xAxis: {
          show: false,
          type: 'value'
        },
        yAxis: [
          {
            type: 'category',
            inverse: true,
            // y轴显示不全，鼠标移上去显示全部，必须开启事件
            triggerEvent: true,
            axisLabel: {
              show: true,
              textStyle: {
                color: '#5A5E66'
              },
              //显示省略号操作（第一步）
              formatter: function (value) {
                var val = ''
                if (value.length > 5) {
                  val = value.substr(0, 5) + '...'
                  return val
                } else {
                  return value
                }
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            data: className
          },
          {
            type: 'category',
            inverse: true,
            axisTick: 'none',
            axisLine: 'none',
            show: true,
            axisLabel: {
              textStyle: {
                color: '#5A5E66',
                fontSize: '12',
                fontFamily: 'Microsoft YaHei',
                fontWeight: 'bold'
              },
              formatter: function (value) {
                return value + ' 次'
              }
            },
            data: data
          }
        ],
        series: [
          {
            name: '次数',
            type: 'bar',
            zlevel: 1,
            itemStyle: {
              normal: {
                barBorderRadius: 0,
                color: params => {
                  return colorList[params.dataIndex]
                }
              }
            },
            barWidth: 18,

            data: data
          },
          {
            name: '图例1',
            type: 'bar',
            barWidth: 18,
            barGap: '-120%',
            itemStyle: {
              normal: {
                color: '#fff',
                barBorderRadius: 0
              }
            }
          }
        ]
      }

      myChart.setOption(option)

      // 监控宽度的变化
      window.addEventListener('resize', function () {
        myChart.resize()
      })

      // 这个方法，解决y轴鼠标放上提示全部内容 很重要
      extension(myChart)
      function extension(myChart) {
        // 注意这里，是以X轴显示内容过长为例，如果是y轴的话，需要把params.componentType ==      'xAxis'改为yAxis，多条件可以在此次添加， 判断是否创建过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)
        }
        myChart.on('mouseover', function (params) {
          if (params.componentType == 'yAxis') {
            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'
            }
          }
        })
        myChart.on('mouseout', function (params) {
          //注意这里，我是以Y轴显示内容过长为例，如果是x轴的话，需要改为yAxis
          if (params.componentType == 'yAxis') {
            var elementDiv = document.querySelector('#extension')
            elementDiv.style.cssText = 'display:none'
          }
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
#echarts_content{
  width: 100%;
  height: 100%;
}
</style>