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

原创

于 2021-05-24 14:56:46 发布 · 3.3k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #vue #js #javascript #html

本文介绍了如何在Echarts中处理轴坐标数据过长的问题，通过yAxis.axisLabel.formatter实现标签长度限制并用省略号表示，同时利用鼠标悬浮事件展示完整数据。在Vue环境中，遇到多个Echarts实例共存时，通过动态绑定类名解决了选择器选取错误的难题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介：

工作中遇到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;
}