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>" +
          "<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();
               }
             }
           });
}