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部分代码
<div className={`x-axis-tip ${isXAxisTipShow ? "show" : ""}`}></div> //react中的应用
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-height 18px
color #575757
.x-axis-tip.show
display block
js代码（ReactEcharts中额事件监听）
onEvents = {
// x轴文字过长hover显示全部
'mouseover': (params) => {
document.querySelector('.age-distribution').style.cursor = "auto"
if( params.componentType == 'xAxis' ){
let clientX = params.event.event.clientX
let clientY = params.event.event.clientY
let xAxisTip = document.querySelector('.x-axis-tip')
xAxisTip.innerText = params.value
xAxisTip.style.left = clientX + document.documentElement.scrollLeft + "px"
xAxisTip.style.top = clientY + document.documentElement.scrollTop + 10 + "px"
this.clock = setTimeout(() => {
this.setState({isXAxisTipShow: true})
}, 500)
}
},
'mouseout': ()=> {
clearTimeout(this.clock)
this.setState({isXAxisTipShow: false})
},
}
