Echarts两种自定义tooltip：（异步请求接口和加载已有dom弹窗）

直接上代码：

<template>
  <div @click="hidePanel">
    <div :style="{height: chartHeight + 'px'}">
      <div ref="myChart" style="height: 300px" id="chart-tree"></div>
    </div>
    <div v-if="dialogVisible" class="companiesDialog">
      <div class="dialog_info">
        <!-- 
        内容
        -->
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  ...echarts,
  data() {
    return {
      dialogVisible:false,
      chartHeight: 1000,
      initialTreeDepth:3,
      activeIndex: '1',
      companyList:[],
      companyInfo:[],
      linkInfoTree:[]
    }
  },
  methods: {
  	handleAll(){},
    industryTree(){
      let myChart = echarts.init(this.$refs.myChart);
      let that = this
      for (let i in this.linkInfoTree) {
        // 设置指定节点样式
        if (this.linkInfoTree[i].level == 1 ) {
          let arr = this.linkInfoTree[i].children
          this.linkInfoTree[i].label = {
            color: '#fff',
            fontSize:'14',
            backgroundColor:'#409eff',
            padding: [10, 12],
            width:70,
            overflow: 'truncate', // truncate截断，并在末尾显示ellipsis配置的文本，默认为...;break换行;breakAll换行，并强制单词内换行
            ellipsis: '...',
                      };
          this.linkInfoTree[i].lineStyle = {
            width:2
          };
          for(let k in arr) {
            arr[k].label = {
              color: '#fff',
              fontSize:'14',
              backgroundColor:'#409eff',
              padding: [10, 12],
              width:30,
              overflow: 'truncate', // truncate截断，并在末尾显示ellipsis配置的文本，默认为...;break换行;breakAll换行，并强制单词内换行
              ellipsis: '...',
            };
          }
        }
      }
      let option1={
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove',
	        // 异步请求接口
		formatter: (params,ticket,callback )=> {
			this.id=params.data.id
			this.name=params.name
			let query={
				industryId:this.mapQuery.industryId,
				province:params.data.id
			}
			let url =''    //请求接口
			url.get(query).then((res)=>{
				let {rows} =res
				//自定义弹窗样式
				let div=``
				callback(ticket, div);
			})
			return 'Loading';
			}
        },
        series: [
          {
          type: 'tree',
          data: this.linkInfoTree,
          top: "1%",
          left: "5%",
          bottom: "1%",
          right: "20%",
          layout: 'orthogonal', // 树图的布局，正交orthogonal和径向radial两种
          // orient: 'LR', // 树图中正交布局的方向，'LR','RL','TB','BT'，只有布局是正交时才生效
          edgeShape: 'polyline', // 树图边的形状，有曲线curve和折线polyline两种，只有正交布局下生效
          roam: false, // 是否开启鼠标缩放或平移，默认false
          initialTreeDepth: that.initialTreeDepth, // 树图初始的展开层级（深度），根节点是0，不设置时全部展开
          symbol: 'diamond', // 标记的图形，默认是emptyCircle;circle,rect,roundRect,triangle,diamond,pin,arrow,none
          // symbolRotate: 270, // 配合arrow图形使用效果较好
          symbolSize: 10, // 大于0时是圆圈，等于0时不展示，标记的大小
          itemStyle: { // 树图中每个节点的样式
            color: '#1890FF', // 节点未展开时的填充色
            borderColor: '#409eff', // 图形的描边颜色
            borderWidth: 1, // 描边线宽，为0时无描边
            borderType: 'dotted', // 描边类型
            borderCap: 'square', // 指定线段末端的绘制方式butt方形结束，round圆形结束，square
            // shadowColor: 'rgba(0,121,221,0.3)', // 阴影颜色
            // shadowBlur: 16, // 图形阴影的模糊大小
            // opacity: 1 // 图形透明度
          },
          label: { // 每个节点对应的文本标签样式
            show: true, // 是否显示标签
            distance: 3, // 文本距离图形元素的距离
            position: 'left', // 标签位置
            verticalAlign: 'middle', // 文字垂直对齐方式，默认自动，top，middle，bottom
            align: 'center', // 文字水平对齐方式，默认自动，left，right，center
            fontSize: 12, // 字体大小
            color: '#000', // 字体颜色
            // backgroundColor: '#F0F5FA',
            // borderColor: '#409eff',
            // borderWidth: 1,
            // borderType: 'solid',
            // borderRadius: 4,
            // padding: [6, 12],
            // shadowColor: 'rgba(0,121,221,0.3)', // 文字块的背景阴影颜色
            // shadowBlur: 6, // 文字块的背景阴影长度
            width:80,
            // 文字超出宽度是否截断或者换行；只有配置width时有效
            overflow: 'truncate', // truncate截断，并在末尾显示ellipsis配置的文本，默认为...;break换行;breakAll换行，并强制单词内换行
            ellipsis: '...',
            formatter:(params) =>{
                if(params.treeAncestors.length == 4 || params.treeAncestors.length == 5 || params.treeAncestors.length == 6 ){
                  return `{labelTwo|${params.name}}`
                }
              },
              rich:{
                labelTwo:{
                  padding: [6, 12],
                  backgroundColor: '#F0F5FA',
                  borderColor: '#409eff',
                  borderWidth: 1,
                  borderType: 'solid',
                  borderRadius: 4,
                },
              }

          },
          lineStyle: { // 树图边的样式
            color: '#409eff', // 树图边的颜色
            width: 1, // 树图边的宽度
            curveness: 0.5, // 树图边的曲度\
            height:20,
            padding: [6, 12]
            // shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
            // shadowBlur: 10 // 图形阴影的模糊大小
          },
          emphasis: { // 树图中图形和标签高亮的样式
            focus: 'descendant',
            // label:{
            //   formatter:(params) =>{
            //     console.log(params,"paramsparamsparamsparams")
            //     if(params.data.level == 1) {

            //     }
            //   }
            // },
          },
          blur: { // 淡出状态的相关配置，开启emphasis.focus后有效
            itemStyle: {}, // 节点的样式
            lineStyle: {}, // 树图边的样式
            label: {} // 淡出标签的文本样式
          },
          leaves: { // 叶子节点的特殊配置
            label: { // 叶子节点的文本标签样式
              distance: 8,
              // color: '#1890FF',
              position: 'right',
              verticalAlign: 'middle',
              align: 'left',
              formatter:(params) =>{
                if(params.treeAncestors.length == 4 || params.treeAncestors.length == 5 || params.treeAncestors.length == 6 ){
                  let str = '-'
                  if(params.data.children.length > 0) {
                    return `{labelName|${params.name}}{labelMark|${str}}{length|${params.data.children.length}}`
                  }else {
                    return `{labelTwo|${params.name}}`
                  }
                }
              },
              rich:{
                labelTwo:{
                  padding: [6,8],
                  backgroundColor: '#F0F5FA',
                  borderColor: '#409eff',
                  borderWidth: 1,
                  borderType: 'solid',
                  borderRadius: 4,
                },
                labelName:{
                  padding: [6, 8],
                  backgroundColor: '#F0F5FA',
                  borderColor: '#409eff',
                  borderWidth: 1,
                  borderType: 'solid',
                  borderRadius: 4,
                },
                labelMark:{
                  color: '#409eff'
                },
                length:{
                  padding: [4,4],
                  fontSize: 12,
                  backgroundColor: '#F0F5FA',
                  borderColor: '#409eff',
                  borderWidth: 1,
                  borderType: 'solid',
                  borderRadius: 10,
                }
              }
            },
            itemStyle: {
            }, // 叶子节点的样式
            emphasis: {}, // 叶子节点高亮状态的配置
            blur: {}, // 叶子节点淡出状态的配置
            select: {} // 叶子节点选中状态的配置
          },
          animation: true, // 是否开启动画
          expandAndCollapse: true, // 子树折叠和展开的交互，默认打开
          animationDuration: 550, // 初始动画的时长
          animationEasing: 'linear', // 初始动画的缓动效果
          animationDelay: 0, // 初始动画的延迟
          animationDurationUpdate: 750, // 数据更新动画的时长
          animationEasingUpdate: 'cubicInOut', // 数据更新动画的缓动效果
          }
        ]
      }
      option1 && myChart.setOption(option1);
      this.initChartTree(option1)
      // 鼠标移入
      myChart.on('mouseover', (params) => {
          this.dialogVisible = true
          // 获取自定义tooltip元素
          const el = document.querySelector('.' + 'dialog_info')  
          el.style.left = params.event.event.clientX - 700 + 'px'
          el.style.top = ((params.event.event.clientY < 200) ? params.event.event.clientY : (params.event.event.clientY - 220)) + 'px'
          // 弹出窗接口请求
          this.getIndustryCompanyInfo(params.data.id)

      })
      // 鼠标移出，因为弹出窗有其他事件操作，我没有用
      // myChart.on('mouseout', (params) => {
      //   this.infoName = ''
      //   this.dialogVisible = false
      // })
     },
    // 设置tree高度
    initChartTree(option1) {
      let myChart = echarts.init(this.$refs.myChart)
      this.$nextTick(() => {
          option1 && myChart.setOption(option1)
          const eleArr = Array.from(new Set(myChart._chartsViews[0]._data._graphicEls))
          console.log(eleArr,"eleArr")
          const itemHeight = 30
          const currentHeight = itemHeight * (eleArr.length - 1) || itemHeight
          console.log(currentHeight,"currentHeight")
          const newHeight = Math.max(currentHeight, itemHeight)
          this.chartHeight = newHeight
          myChart.resize({
              height: newHeight
          })
      })
      myChart.on("click", this.treeNodeclick);
    },
    treeNodeclick(param){
        /* true 代表点击的是圆点
          fasle 表示点击的是当前节点的文本
        */
      if(param.event.target.culling === true){
          return
      } else if(param.event.target.culling === false){
          let args = param.data; //当前节点及其子节点的值
          let level = param.data.level; //当前节点的层级 eg:"1-1-0",可以通过level判断当前的层级，从而进行不同的操作
          if(args.children.length == 0) {
            this.uuid = args.uuid
            this.$refs.chainDetails.open()
          }
          return
      }
    },
    // 点击其他地方，隐藏弹出窗
    hidePanel(event){
      var el = document.querySelector('.' + 'dialog_info')
      if(el){
        //点击到了el以外的区域
        if(!el.contains(event.target)){
          this.dialogVisible = false;
        }
      }
    }

  }
}
</script>