echarts 轴坐标数据过长使用省略号 鼠标悬浮显示数据

简介：

工作中遇到y轴数据过长，label倾斜方式并不能解决问题，于是限制label长度使用省略号，添加y轴事件戍边悬浮完整显示label。

vue + echarts5.1.1

1.轴坐标label格式化

使用 yAxis.axisLabel.formatter 

yAxis: {
  type: 'category',
  data: this.yAxisData,
  axisLabel: {
    formatter: function(value) {
      var texts = value
      if (texts.length > 10) {
        // 限制长度自设
        texts = texts.substr(0, 10) + '...'
      }
      return texts
    }
  },
  // 这里触发事件为true,否则y轴无法响应事件
  triggerEvent: true
},

2.鼠标悬浮事件

首先要添加触发后显示的div

<div id="container" style="height: 500px;width: 500px;"></div>
<div class="axis-tip"></div>

//tip 的css
.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.2);
  border-radius: 4px;
}

添加事件

// echarts 通过.on绑定事件 'yAxis.category'限定y轴 
this.charts.setOption(this.option)
this.charts.on('mouseover', 'yAxis.category', function(e) {
  let axisTip = document.querySelector('.axis-tip')
  axisTip.innerText = e.value
  axisTip.style.left = e.event.offsetX + 'px'
  axisTip.style.top = e.event.offsetY + 'px'
  axisTip.style.display = 'block'
})
this.charts.on('mouseout', 'yAxis.category', function(e) {
  let axisTip = document.querySelector('.axis-tip')
  axisTip.innerText = ''
  axisTip.style.display = 'none'
})

效果：

其他：

x轴同理

中间遇到问题： 因为这是一个公共组件 弹窗时 选择器只选择第一个echart下的<div class="axis-tip"></div>

通过 :class="bindClass" 进行了区分解决问题