extension(myChart) {
var elementDiv = document.getElementById("extension");
if (!elementDiv) {
var div = document.createElement("div");
div.setAttribute("id", "extension");
div.style.display = "block";
document.querySelector("html").appendChild(div);
}
myChart.on("mouseover", function (params) {
if (params.componentType == "xAxis") {
// 字数超过4的时候再鼠标悬浮显示全部
if (params.value.length > 4) {
var extensionDiv1 = document.querySelector("#extension");
//设置悬浮文本的位置以及样式
var elementStyle =
"position:absolute;z-index:99999;color:#fff;font-size:12px;padding: 5px;display: inline;border-radius: 4px;background-color: #303133;";
extensionDiv1.style.cssText = elementStyle;
extensionDiv1.innerHTML = params.value;
document.querySelector("html").onmousemove = function (event) {
var extensionDiv2 = document.querySelector("#extension");
var xx = event.pageX - 10;
var yy = event.pageY + 15;
extensionDiv2.style.top = yy + "px";
extensionDiv2.style.left = xx + "px";
};
}
}
});
myChart.on("mouseout", function (params) {
if (params.componentType === "xAxis") {
let extensionDiv3 = document.querySelector("#extension");
extensionDiv3.style.cssText = "display: none";
}
});
},
一定要在你处理的坐标轴中添加triggerEvent: true,以X轴为例，在xAxis中添加triggerEvent: true,axisLabel中自己截取显示文字长短
