echarts地图toolTipData

### ECharts 地图 Tooltip 配置与使用

在 ECharts 中，`tooltip` 组件用于显示图表中的提示框。对于地图类型的图表来说，可以通过设置 `tooltip` 的属性来控制其行为和样式。

#### 基本配置

为了使工具提示能够正常工作，在初始化 ECharts 实例之后，需要定义好基础的地图结构并加入必要的系列数据。下面是一个简单的例子展示如何开启以及定制化 `tooltip`：

let myChart = echarts.init(document.getElementById('main')); // 初始化实例[^1]

myChart.setOption({
    tooltip: {
        trigger: 'item',
        transitionDuration: 0.4, // 设置过渡动画持续时间[^2]
        formatter: function (params) {
            return `${params.seriesName}<br/>${params.name} : ${params.value}`;
        }
    },
    series: [
        {
            name: '省份名称',
            type: 'map',
            mapType: 'china',
            data: [
                {name: '北京', value: Math.round(Math.random() * 100)},
                {name: '上海', value: Math.round(Math.random() * 100)}
            ]
        }
    ]
});

这段代码设置了当鼠标悬停在一个具体的地理区域上时会弹出的信息窗口，并通过 `{a}`、`{b}` 和 `{c}` 这样的占位符来自动生成内容[^3]。这里还展示了怎样利用回调函数进一步增强 `formatter` 方法的功能，从而实现更灵活的数据呈现方式。

#### 自定义样式

除了基本的内容外，还可以调整 `tooltip` 的外观风格，比如改变背景颜色、字体大小等参数。这通常是在 CSS 类名的基础上完成的，如下所示：

.echarts-tooltip-dark {
    background-color: rgba(0, 0, 0, .7);
}

接着可以在 JavaScript 文件里指定这个类作为 `tooltip.className` 属性的一部分。