ECharts中标签长度过长，显示省略号，鼠标浮上后出现全称的效果展示

废话不多说，直接上效果图。截图截不到鼠标0 0

 

vue组件：

<template>
  <div style="width: 800px;height: 400px;margin-left: 30px;" id="myChart">
  </div>
</template>

<script>
//通过this.$echarts来使用
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: 'demo'
        },
        series: [{
          type: 'bar',
          data: [291, 335, 405, 421, 576, 742, 801, 840, 913, 975],
          barCategoryGap: '70%',/*多个并排柱子设置柱子之间的间距*/
          showBackground: true,

          itemStyle: {
            normal: {
              color: '#4ad2ff',
            }
          },
          backgroundStyle: {
            color: 'rgb(14, 92, 111,0.2)',

          },
        }],
        tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
          trigger: 'axis',
          backgroundColor: 'rgba(32, 33, 36,.7)',
          borderColor: 'rgba(32, 33, 36,0.20)',
          borderWidth: 1,
          textStyle: { // 文字提示样式
            color: '#fff',
            fontSize: '12'
          }
        },
        legend: {
          data: ['销量']
        },
        xAxis: {
          show: false,//不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
          axisTick: {
            show: false//不显示坐标轴刻度线
          },
          axisLine: {
            show: false,//不显示坐标轴线
          },
          axisLabel: {
            show: false,//不显示坐标轴上的文字
          },

        },
        yAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            //开启鼠标事件！！这一句很重要
            triggerEvent: true,
            // nameLocation: 'end',
            axisLine: {
              show: false
            },
            axisLabel: {
              color: '#fff', // 文字颜色
              // 文字省略
              formatter: function (value) {
                if (value.length > 3) {
                  return `${value.slice(0, 7)}...`
                }
                return value
              }
            },
            data: ["10. SR测试设备", "09. SR测试设备", "08. SR测试设备", "07. SR测试设备", "06. SR测试设备", "05. SR测试设备", "04. SR测试设备", "03. SR测试设备", "02. SR测试设备", "01. SR测试设备"],
          },
          {
            type: 'category',
            nameLocation: 'end',
            position: 'right',
            // offset: 30,
            axisLabel: {
              color: '#fff',

            },
            axisLine: {
              show: false
            },
            axisTick: { show: false },
            data: ['291人', '335人', '405人', '421人', '576人', '742人', '801人', '840人', '913人', '975人'],
          }
        ],

      });
      this.extension(myChart)
    },
    extension(chart) {
      // 注意这里，是以X轴显示内容过长为例，如果是x轴的话，需要把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)
      }
      chart.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
            console.log('22', xx)
            elementDiv.style.top = yy + 'px'
            elementDiv.style.left = xx + 'px'
          }
        }
      })
      chart.on('mouseout', function (params) {
        //注意这里，我是以X轴显示内容过长为例，如果是y轴的话，需要改为yAxis
        if (params.componentType == 'yAxis') {
          var elementDiv = document.querySelector('#extension')

          elementDiv.style.cssText = 'display:none'
        }
      })
    },
  }
}

</script>

其中值得注意的是，在你要出现全称的轴上需写明

 triggerEvent: true,