vue中使用echarts树状图自定义鼠标悬停展示详情、高度自适应
1. echart 展示树形结构,如何自定义鼠标悬停的提示信息?formatterHover(params) {return ('<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;">设备类型:' +params.data.type_name +"</span>"
·
1. echart 展示树形结构,如何自定义鼠标悬停的提示信息?
formatterHover(params) {
return (
'<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;">设备类型:' +
params.data.type_name +
"</span>" +
"<br>" +
'<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;">位置:' +
params.data.owner +
"</span>" +
"<br>" +
'<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;">MAC地址:' +
params.data.mac +
"</span>" +
"<br>" +
'<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;">最大连接量:' +
params.data.max_connections +
"</span>" +
"<br>"
);
}
在使用setOption
时调用formatterHover
this.mychartArr[j].setOption({
title: { text: tit },
tooltip: {
trigger: "item",
triggerOn: "mousemove",
enterable: true, //鼠标是否可进入提示框浮层中
formatter: this.formatterHover, //修改鼠标悬停显示的内容
},
//系列列表
series: [
{}
]
})
2. echart树状图节点如何使用本地图片:需要使用require引入图片
symbol: "image://" + require(`../assets/images/${val.unactivate_logo}`);
3.echart树形图高度如何动态适配?
在初始化树时进行高度动态适配
initTree() {
...
// 高度适配
let temp = this.mychartArr[j];
let container = document.getElementsByClassName("chart")[j];
this.mychartArr[j].on("click", function (params) {
if (params.componentType === "series") {
if (!params.value) {
let elesArr = Array.from(
new Set(temp._chartsViews[0]._data._graphicEls)
);
let height = 300;//默认高度
let currentHeight = 60 * (elesArr.length - 1) || 100; //动态高度
let newHeight = Math.max(currentHeight, height);
container.style.height = newHeight + "px";
temp.resize();
}
}
});
}
更多推荐
已为社区贡献4条内容
所有评论(0)