一、效果图

二、解决思路

创建一个div用于展示全称，鼠标悬浮坐标轴之上该div显示，反之隐藏

第一步：为了让坐标轴响应和触发鼠标事件

因为echarts默认不响应

第二步：调用创建div的方法

三、代码

extensionOne(myChart) {var id = document.getElementById("extensionOne");//判断是否创建过div框,如果没有创建过，则创建。（创建时，默认隐藏）if (!id) {var div = "<div id = 'extensionOne' sytle='display:none'></div>";window.$("html").append(div);}//鼠标悬浮事件myChart.on("mouseover", function(params) {/*如果鼠标悬浮部分不是y轴,直接返回*/if (params.componentType != "yAxis") {return false;}//设置div框样式，并为其填充值。window.$("#extensionOne").css({position: "absolute", color: "#fff",borderRadius: "5px",fontFamily: "Arial",fontSize: "14px",padding: "5px 10px",display: "inline",background: "rgba(0, 0, 0, 0.8)"}).text(params.value);window.$("#righttop").mousemove(function(event) {var xx = event.pageX - 30;var yy = event.pageY + 15;window.$("#extensionOne").css("top", yy).css("left", xx);});});/*鼠标移出y轴,div隐藏*/myChart.on("mouseout", function() {window.$("#extensionOne").css("display", "none");});}

echarts-坐标轴名称过长省略，鼠标移入显示全部相关推荐

vue 移入显示_vue鼠标移入显示点赞图标，移出隐藏点赞图标，现在我想点击点赞图标，鼠标移出不会隐藏图标，怎么做？...
@mouseover="showLike(i)" @mouseleave="hideLike(i)"> @click="likePoint(i) ...
elementUI表格头添加图标-鼠标移入显示el-tooltip提示信息
目的:elementUI表格头添加图标-鼠标移入显示el-tooltip提示信息项目经理要求表格头部添加一个图标,鼠标移入提示用户字段包含的内容信息,以前没有开发过,故总结一下. 添加方法: 方法一 ...
CSS实线鼠标移入显示隐藏div
用CSS中的 hover 事件,实线鼠标移入显示隐藏元素. 效果如下: 代码如下: <!DOCTYPE html> <html><head><meta cha ...
超出长度显示省略号，鼠标移入显示全部内容
超出长度显示省略号,鼠标移入显示全部内容 //这里用的是element组件,可以替换<el-popoverwidth="300"popper-class="wbs- ...
echarts图例板块默认高亮与鼠标移入高亮实现
主要先设置 emphasis.scale= true 开启鼠标移入高亮动画,利用dispatchAction方法设置默认高亮组块, 再检测鼠标的mouseover时间,当检测到鼠标悬停事件,取消默认 ...
显示内容长时，显示部分内容，鼠标移入显示全部内容
实现思想: 在页面内放入一个Div, 调用lable的onMouseover,onMouseout 事件,然后用JS去实现显示部分内容在原有位置还是显示全部内容在Div中. 后台代码: str ...
css鼠标移入显示滚动条
.database是元素的类选择器名称 .database::-webkit-scrollbar {/*这里写滚动条宽度*/width: 6px; } .database:hover::-webkit ...
js + jquery 两栏Tab鼠标移入显示/隐藏的效果（详）
学习文献: 必须要掌握的原生JS实现JQuery 了解了这些才能开始发挥jQuery的威力 - 谦行 – JavaScript和jQuery两款TAB选项卡示例 -- 西门 jquery原创分享社区 ...
html鼠标移入显示图片动画,HTML5+CSS3鼠标移入移出图片生成随机动画_html/css_WEB-ITnose...
今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画,我们先看最终效果图(截图为静态效果,做出来可是动态的哟) 左右旋转上下移动缩放由于时间关系我就不一步步解析各段代 ...

echarts-坐标轴名称过长省略，鼠标移入显示全部

坐标轴名称过长省略，鼠标移入显示全部

一、效果图

二、解决思路

三、代码

echarts-坐标轴名称过长省略，鼠标移入显示全部相关推荐

最新文章

热门文章