echarts在y轴/x轴文字过长时显示...省略号其鼠标悬浮时出现提示

HTML

<div id="alarmVehicleNumber" style="width: 100%;height:256px;" class="echarts" ref="Bar"></div>
<div class="x-axis-tip"></div>

class="x-axis-tip"所在div是提示泡div

CSS

/* 气泡的样式 */
.x-axis-tip{
 display: none;
 position: absolute;
 padding: 5px 5px;
 font-size: 12px;
 line-height: 18px;
 color: #575757;
 background: #FFFFFF;
 box-shadow: 0 1px 4px 0 rgba(0,0,0,0.20);
 border-radius: 4px;
}

JS

var echarts = require('echarts')  // 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('alarmVehicleNumber'))
// 指定图表的配置项和数据
      var option = {
        grid: {
          left: '0%',
          right: '6%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {},
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          splitLine: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#FFFFFF',
              opacity: 0.2
            }
          }
        },
        yAxis: {
          type: 'category',
          data: this.privateYdata,
          axisTick: {
            show: false
          },
          axisLabel: {
            formatter: function (value) {
              let valueTxt = ''
              if (value.length > 10) {
                valueTxt = value.substring(0, 10) + '...'
              } else {
                valueTxt = value
              }
              return valueTxt
            }
          },
          triggerEvent: true // look here！这个很重要。设置为true后，可触发事件
        },
        series: [
          {
            type: 'bar',
            data: this.privateData,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 1, 0,
                [
                  { offset: 0, color: '#01579B' },
                  { offset: 0.8, color: '#29B6F7' }
                ]
              ),
              borderWidth: 6.5
            }
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
	// 提示泡
      myChart.on('mouseover', function (params) {
        if (params.componentType === 'yAxis') {
          let offsetX = params.event.event.offsetX
          let offsetY = params.event.event.offsetY
          let xAxisTip = document.querySelector('.x-axis-tip')
          xAxisTip.innerText = params.value.split('#')[0]
          xAxisTip.style.left = offsetX + 'px'
          xAxisTip.style.top = offsetY + 10 + 'px'
          xAxisTip.style.display = 'block'
        }
      })
      myChart.on('mousemove', function (params) {
        if (params.componentType === 'yAxis') {
          let offsetX = params.event.event.offsetX
          let offsetY = params.event.event.offsetY
          let xAxisTip = document.querySelector('.x-axis-tip')
          xAxisTip.innerText = params.value.split('#')[0]
          xAxisTip.style.left = offsetX + 30 + 'px'
          xAxisTip.style.top = offsetY + 10 + 'px'
          xAxisTip.style.display = 'block'
        }
      })
      myChart.on('mouseout', function (params) {
        let xAxisTip = document.querySelector('.x-axis-tip')
        xAxisTip.style.display = 'none'
      })

JS部分中的重点

triggerEvent: true // look here！这个很重要。设置为true后，可触发事件

// 提示泡
      myChart.on('mouseover', function (params) {
        if (params.componentType === 'yAxis') {
          let offsetX = params.event.event.offsetX
          let offsetY = params.event.event.offsetY
          let xAxisTip = document.querySelector('.x-axis-tip')
          xAxisTip.innerText = params.value.split('#')[0]
          xAxisTip.style.left = offsetX + 'px'
          xAxisTip.style.top = offsetY + 10 + 'px'
          xAxisTip.style.display = 'block'
        }
      })
      myChart.on('mousemove', function (params) {
        if (params.componentType === 'yAxis') {
          let offsetX = params.event.event.offsetX
          let offsetY = params.event.event.offsetY
          let xAxisTip = document.querySelector('.x-axis-tip')
          xAxisTip.innerText = params.value.split('#')[0]
          xAxisTip.style.left = offsetX + 30 + 'px'
          xAxisTip.style.top = offsetY + 10 + 'px'
          xAxisTip.style.display = 'block'
        }
      })
      myChart.on('mouseout', function (params) {
        let xAxisTip = document.querySelector('.x-axis-tip')
        xAxisTip.style.display = 'none'
      })

该图是侧向的柱状图（只有一根柱子）
参考博客