2020.9.11echarts-tooltip内显示echarts（禁止套娃）

2023.7.21 更新：取消VIP文章阅读权限，回馈开源社区。

前言

需求中需要在 echarts 地图中鼠标移动到地图块上方时显示悬浮窗并且内部还嵌套了一些 echarts 图表，冥思苦想一天无果，在翻阅前辈代码时偶然发现 tooltip 的提示框 formatter 中嵌套的 function 代码块功能之强大，激发灵感，通过 formatter 内嵌的方法块完成了需求。

实施

需求截图

思路

利用 formatter 中 function 返回的 html 代码块赋予 div 一个 id 属性，在执行 function 时使用 setInterval 重复执行查看是否已经生成了符合情况的 div 容器，如果有容器，则生成 echarts 图表。

注意：为了节省篇幅，没有摘取所有option配置。以及文章做了脱敏处理，可能会影响观看体验，请谅解。

代码实现

//option内
tooltip: {
   
    extraCssText: 'box-shadow: 3px 3px 3px #888888;', // 边框下阴影
    confine: true, // 防止tooltip越界
    formatter: function(params, ticket, callback) {
   
        if (params.data == undefined) {
    // 无数据时显示的内容
            let res = "<div>" +
                "<p style='padding-left:10px;padding-right:20px;font-size:0.07rem;height:0.25rem;line-height:0.25rem;background:#4CA6A6;color:white;'>暂无数据</p>" +
                "</div>";
            return res;
        } else {
   
            let lasttooltipName = ''; //创建一个变量用来保存上一次的地图名称，用于后续去抖动
            if (params.data.currentTab == 1 && params.data.isCountryMap) {
   
                let yAxisData = [];
                let xAxisData1 = [];
                let xAxisData2 = [];