vue-echartsX轴鼠标悬浮上去显示全部文案

核心是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 => {   });  复制