echart横轴文字显示省略号_echarts x 轴文字过长，显示省略号，hover上去显示全部的实现方式...

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-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})

},

}