echarts x轴名称太长了,隐藏一部分,鼠标移到名称上,显示全称
1 function extension(mychart, type) { 2 let extension = document.getElementById("extension"); 3 mychart.on(‘mouseover‘, function (params) { 4 if (params.componentType == type) { 5 extension.innerHTML = params.value; 6 let mousePos = mouseMove(); 7 let x = mousePos.x - 180; 8 let y = mousePos.y - 50; 9 extension.style.cssText = "top:" + y + "px;left:" + x +"px;display:inline;"; 10 } 11 }); 12 13 mychart.on(‘mouseout‘, function (params) { 14 if (params.componentType == type) { 15 extension.style.cssText = "display:none"; 16 } 17 }); 18 }; 19 20 function mousePosition(ev){ 21 if(ev.pageX || ev.pageY){ 22 return {x:ev.pageX, y:ev.pageY}; 23 } 24 return { 25 x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, 26 y:ev.clientY + document.body.scrollTop - document.body.clientTop 27 }; 28 } 29 function mouseMove(ev){ 30 ev = ev || window.event; 31 return mousePosition(ev); 32 } 33 34 图表中 35 xAxis: { 36 type: ‘category‘, 37 data: [], 38 triggerEvent: true, 39 axisLabel: { 40 formatter: function (value) { 41 let res = value; 42 if (res.length > 5) { 43 res = res.substring(0, 4) + ".."; 44 } 45 return res; 46 } 47 }, 48 }, 49 50 #extension { 51 position: absolute; 52 font-size: 14px; 53 border-radius: 5px; 54 color: #fff; 55 background: #000; 56 filter:alpha(opacity=70); 57 -moz-opacity:0.7; 58 -khtml-opacity: 0.7; 59 opacity: 0.7; 60 padding:5px; 61 display: none; 62 }
原文地址:https://www.cnblogs.com/mxyr/p/9237996.html
时间: 2024-11-05 17:32:52