echarts地图的tooltip

### ECharts 地图 Tooltip 配置与样式设置

#### 基本配置属性
Tooltip 组件用于显示数据信息，其基本配置可以通过 `tooltip` 属性完成。此对象允许指定触发条件、内容格式化函数以及其他视觉效果参数。

对于地图而言，通常会采用 `'item'` 或者 `'axisPointer'` 作为触发方式[^3]：

tooltip: {
    trigger: 'item'
}

#### 自定义提示框外观
为了调整 tooltip 显示风格，可以修改如下几个关键选项来改变默认表现形式，比如通过设定背景透明度、边界色彩及粗细程度等达到理想中的视觉呈现效果[^2]:

tooltip: {
    backgroundColor: 'rgba(0,0,0,0.7)',
    borderColor: '#ffffff',
    borderWidth: 1,
    transitionDuration: 0.4 // 动画过渡时间
}

#### 文字描述定制
利用 `{a}`、`{b}` 和 `{c}` 这样的占位符可以在模板字符串内表示系列名称、类别名和数值等内容，从而灵活控制提示文字的具体构成：

formatter: '{a}<br/>{b}: {c}'

#### 复杂场景下的应用实例
当面对更复杂的需求时——例如在 tooltip 内部嵌入额外图表以增强交互体验，则需借助于 HTML 片段配合 JavaScript 实现动态渲染功能[^4]。下面给出一段简化版代码片段示意如何构建此类高级特性：

<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var chart = echarts.init(document.getElementById('main'));
option = {
    series: [{
        name: 'Map Series',
        type: 'map',
        mapType: 'world',
        roam: true,
        label: {
            show: false
        },
        itemStyle:{
            areaColor:'#eee',
            borderColor:'#ccc'
        }
    }]
};
chart.setOption(option);

// 定义一个全局变量存储当前选中地区的信息
let selectedRegionData;

function renderInnerChart(params){
    let innerContainerId = "inner-chart-" + params.name;
    
    if (!document.getElementById(innerContainerId)){
        document.body.insertAdjacentHTML(
            'beforeend', 
            `<div id="${innerContainerId}" class="hidden"></div>`
        );
        
        var innerChart = echarts.init(document.getElementById(innerContainerId));
        // ... 初始化内部图表 ...
        
        setTimeout(() => {
            $(`.${className}`).hide(); // 使用 jQuery 隐藏其他悬浮窗
            $("#" + innerContainerId).show();
        }, 0);
    }

}

chart.on('mouseover', function (params) {
    if (params.componentType === 'series') {
        renderInnerChart(params);
    }
});
</script>
<style scoped>
.hidden{
    display:none !important;
}
.echarts-tooltip-dark .tooltip-inner {
    background-color: rgba(0, 0, 0,.8)!important ;
}
</style>

上述例子展示了如何监听鼠标悬停事件并据此创建新的 DOM 节点用作承载子级可视化组件的空间；同时注意这里还涉及到 CSS 类的选择器操作以便更好地管理页面布局结构。