核心是js 非vue也同样逻辑
代码实现效果
主要逻辑就是在初始化好echarts时,给echart添加 鼠标 移入 移出 事件
代码
mounted(){
this.echartBody = echarts.init(document.getElementById('echartBar'));
}
// 你的方法里写
// 放置悬浮内容的容器
let eleDiv = document.getElementById('extenToolTip');
// 加个判断保证只创建一个元素
if (!eleDiv) {
let div = document.createElement('div');
div.setAttribute('id', 'extenToolTip');
div.style.display = 'block';
document.querySelector('html').appendChild(div);
}
//监听 鼠标移入
this.echartBody.on('mouseover', function(params) {
// 这里判断的x轴 你看你的需要
if (params.componentType === 'xAxis') {
let elDiv = document.querySelector('#extenToolTip');
let elStyle = `position:absolute;z-index:999;font-weight: 400;
font-size: 13px;color: #FFFFFF;display:inline;padding:6px 8px;
background: #333333;box-shadow: 0 0 6px 0 rgba(0,0,0,0.16);
border-radius: 3px;transition: all 0.5s;`;
elDiv.style.cssText=elStyle
elDiv.innerHTML=params.value
document.querySelector('html').onmousemove=function(event){
let elDiv = document.querySelector('#extenToolTip');
let x=event.pageX+10
let y=event.pageY-30
elDiv.style.top=y+'px'
elDiv.style.left=x+'px'
}
}
});
// 判断鼠标移出
this.echartBody.on('mouseout', function(params) {
if (params.componentType === 'xAxis') {
let elDiv = document.querySelector('#extenToolTip');
elDiv.style.cssText='display:none'
}
});
顺便说下X轴点击事件 也是同样监听点击就行
this.echartBody.on('click', event => { });