echarts x轴名称太长

时间:2023-03-08 16:49:24

echarts x轴名称太长了,隐藏一部分,鼠标移到名称上,显示全称

 function extension(mychart, type) {
let extension = document.getElementById("extension");
mychart.on('mouseover', function (params) {
if (params.componentType == type) {
extension.innerHTML = params.value;
let mousePos = mouseMove();
let x = mousePos.x - 180;
let y = mousePos.y - 50;
extension.style.cssText = "top:" + y + "px;left:" + x +"px;display:inline;";
}
}); mychart.on('mouseout', function (params) {
if (params.componentType == type) {
extension.style.cssText = "display:none";
}
});
}; function mousePosition(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
function mouseMove(ev){
ev = ev || window.event;
return mousePosition(ev);
} 图表中
xAxis: {
type: 'category',
data: [],
triggerEvent: true,
axisLabel: {
formatter: function (value) {
let res = value;
if (res.length > 5) {
res = res.substring(0, 4) + "..";
}
return res;
}
},
}, #extension {
position: absolute;
font-size: 14px;
border-radius: 5px;
color: #fff;
background: #000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
padding:5px;
display: none;
}