首页 前端知识 vue-echartsX轴鼠标悬浮上去显示全部文案

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

2024-04-16 17:04:53 前端知识 前端哥 98 509 我要收藏

核心是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 => {   });  
转载请注明出处或者链接地址:https://www.qianduange.cn//article/5062.html
标签
评论
发布的文章

用js生成小米商城

2024-04-27 21:04:59

网页汇率计算器vue代码

2024-04-26 13:04:44

Python读写Json文件

2024-04-23 22:04:19

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!