vue echarts y轴文本过长，设置超出隐藏，然后显示省略号，并且鼠标悬浮上之后显示全部

1. 效果图
   

<template>
  <div>
    <!-- 生态流量报警:echarts图2：柱状图 -->
    <div id="main-barChart"></div>
  </div>
</template>

<script>
export default {
  props: {
    //表单禁用
    statistics: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {}
  },
  watch: {
    statistics(val) {
      console.log('wacth3', val.hename)
      if (val) {
        this.initCharts()
      }
    }
  },
  methods: {
    initCharts() {
      // 初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('main-barChart'))
      const henameList = this.statistics.hename.map(item => item.hename)
      const henameSums = this.statistics.hename.map(item => item.sums)
      console.log(henameList, henameSums)
      var data = henameSums
      var className = henameList
      var colorList = ['#FF6600', '#FAC450', '#F7A729', '#00B050', '#0a7c3d']
      // var defaultData=[100,100,100,100,100];最多次数
      // 绘制图表
      var option = {
        title: {
          left: 'left',
          top: '2%',
          text: '单站报警TOP5',
          textStyle: {
            fontWeight: 'bold',
            color: '#535353',
            fontSize: 18,
            fontFamily: 'Microsoft YaHei'
          }
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '-2%',
          top: '13%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none'
          }
          // formatter: function (params) {
          //   return (
          //     params[0].name +
          //     '<br/>' +
          //     "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
          //     // params[0].seriesName + ' : ' + Number((params[0].value.toFixed(4) / 10000).toFixed(2)).toLocaleString() + ' <br/>'
          //     params[0].seriesName +
          //     ' : ' +
          //     params[0].value
          //   )
          // }
        },

        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: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                //     offset: 0,
                //     color: 'rgb(57,89,255,1)'
                // }, {
                //     offset: 1,
                //     color: 'rgb(46,200,207,1)'
                // }]),
                color: params => {
                  return colorList[params.dataIndex]
                }
              }
            },
            barWidth: 18,

            data: data
          },
          {
            name: '背景',
            type: 'bar',
            barWidth: 18,
            barGap: '-120%',
            /*多个并排柱子设置柱子之间的间距*/
            // data: defaultData,
            itemStyle: {
              normal: {
                color: 'transparent',
                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) {
          //注意这里，我是以X轴显示内容过长为例，如果是y轴的话，需要改为yAxis
          if (params.componentType == 'yAxis') {
            var elementDiv = document.querySelector('#extension')

            elementDiv.style.cssText = 'display:none'
          }
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
#main-barChart {
  width: 100%;
  height: 280px;
}
</style>