坐标轴名称过长省略,鼠标移入显示全部
一、效果图二、解决思路三、代码一、效果图
二、解决思路
创建一个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 (ponentType != "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");});}