vue3 echars地图鼠标移入 显示自定义内容

效果：

1：首先打开自定义弹窗的方法：

tooltip: {

      show: true,
}

2：底部背景图引入：

const screenPop = new URL("@/assets/bigScreen/screenPop.png", import.meta.url).href;

3：基本代码：

  tooltip: {

      show: true,

      trigger: "item",

      alwaysShowContent: false,

      borderWidth: 0,

      extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0);',

      backgroundColor: "rgba(4,24,51,0)",

        borderColor: 'rgba(99, 173, 222,0)',

      hideDelay: 100,

      triggerOn: "mousemove",

      enterable: true,

      textStyle: {

        color: "transparent",

      },

      symbol: 'image://'+ icon,

      showDelay: 100,

      formatter: (params) => {

        if (params.data) {

            let html = `



<div class="scale"  style='  width: 250px;

  height: 110px;

background: url(${screenPop}) no-repeat 100%  100%;

line-height: 2;

padding-left: 1vw;'>

    <div style='  font-family: Alibaba PuHuiTi 2.0;

font-weight: normal;

font-size: 26px;

color: #FEFEFF;

line-height: 22px;

text-shadow: 1px 2px 2px rgba(108,75,11,0.59);

font-style: italic;

margin-bottom: 5px;'>${params.data.name}</div>

    <div  style='  font-family: Alibaba PuHuiTi 2.0;

font-weight: normal;

font-size: 18px;

color: #A9B7CF;'>附属单位: <span style="color:#E69A03">${params.data.orgNum}</span>  个</div>

    <div  style='  font-family: Alibaba PuHuiTi 2.0;

font-weight: normal;

font-size: 18px;

color: #A9B7CF;'>人员总数：<span style="color:#E69A03">${params.data.peopleNum}</span> 人</div>

</div>

      `;

      return html;

      



        } else {

         

        }

      },

    },

4：解释其中意义：

此处的symbol中的icon就是上方黄色的小图标（历下区底部的三角小图标）

formatter 就是你鼠标进入的那个大的背景图+内容，

里边的所有样式写成内联样式（不要用class）

5：内容在series里的data：data.xFlist, 这样data.xFlist的数据 就进入了 params.data里了

series: [
{data: data.xFlist,}
]