在echarts图表中，当横轴(x轴)的文字过长时，可以通过配置axisLabel.formatter实现文字省略，并通过设置onEvents监听mouseover和mouseout事件，在鼠标悬停时显示完整内容。通过CSS和JavaScript处理，创建一个提示框，在鼠标悬停时定位并显示完整的x轴标签。
echarts中核心配置
xAxis: [{
type: 'category',
data: xValues,
axisTick: {
show: false,
},
axisLine: {
show: false
},
axisLabel: {
show: true,
interval: 0,
formatter: function (value) {
return (value.length > 6 ? (value.slice(0,6)+"...") : value )
},
textStyle: {
color: '#FFFFFF',
fontSize: 12,
lineHeight: '16px'
}
},
triggerEvent: false // 设置为true后，可触发事件。实现x轴文字过长，显示省略号，hover上去显示全部的功能
}],
html部分代码
css代码(stylus)
.x-axis-tip
display none
position absolute
padding 0 5px
border-radius 3px
box-shadow 2px 2px 2px 0 #000
background #fff
font-size 12px
line-he
最低0.47元/天 解锁文章
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
