echarts y轴文字过长,mouseover实现显示全部文字

自留自省
关键代码:(这段是写在watch 监听函数里面)
y轴的yAxis.triggerEvent 必须的设置为true

// this.initChart()
            this.$nextTick(() => { 
                this.myChart = echarts.init(this.$refs.rankCount)
                let yAxisTip = this.$refs.abc  
               // 上面两个得先初始化一下 不然在下面得不到
                this.myChart.on('mouseover', function(param) {
                    if( param.componentType == 'yAxis' ){
                        let offsetX = param.event.event.offsetX
                        let offsetY = param.event.event.offsetY
                        console.log(param)
                        yAxisTip.innerText = param.value + param.index
                        yAxisTip.style.left = offsetX +  "px"
                        yAxisTip.style.top = offsetY + 10 + "px"
                        yAxisTip.style.display = 'block';
                    }
                })
                this.myChart.on("mouseout",function(params) {
                    yAxisTip.style.display = 'none'
                })
            })

css的样式

.x-axis-tip {
        display: none;
        position: absolute;
        padding: 5px 5px;
        font-size: 12px;
        line-height: 18px;
        color: #e7e2e2;
        // background: #e0dede77;
        box-shadow: 0 0 20px #00C7FF inset;
        border-radius: 4px;
    }

你可能感兴趣的:(echarts y轴文字过长,mouseover实现显示全部文字)