自留自省
关键代码:(这段是写在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;
}