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 // 設(shè)置為true后，可觸發(fā)事件甩栈。實(shí)現(xiàn)x軸文字過長泻仙，顯示省略號，hover上去顯示全部的功能
}],
html部分代碼
<div className={`x-axis-tip ${isXAxisTipShow ? "show" : ""}`}></div> //react中的應(yīng)用
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中額事件監(jiān)聽）
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})
},
}
