echarts地图提示框插入数据

### 实现 ECharts 地图 Tooltip 动态插入数据

在 ECharts 地图中，通过配置 `tooltip` 组件并利用其 `formatter` 属性来实现在提示框内动态展示特定数据。此功能支持两种方式：字符串模板和回调函数。

#### 字符串模板方法
当采用字符串模板时，可以在模板内部使用占位符 `{a}`、`{b}`、`{c}` 和 `{d}` 来分别表示系列名称、数据项名称、数值和其他信息。这种方式适合简单的文本替换场景[^2]。

option = {
    tooltip: {
        trigger: 'item',
        formatter: '{b}<br/>{c} ({d}%)'
    },
};

#### 回调函数方法
对于更复杂的需求，则推荐使用回调函数作为 `formatter` 的值。该函数接收参数对象 `params`，其中包含了当前鼠标悬停位置对应的数据点的各种信息。这样可以根据实际业务逻辑灵活构建 HTML 片段返回给 ECharts 显示[^3]。

option = {
    tooltip: {
        show: true,
        trigger: "item",
        borderWidth: 0,
        formatter: function(params) {
            let result = `<strong>地区:</strong>${params.name}<br>`;
            result += `<span style="color:green">人口数:</span><em>${params.value}</em>`;
            return result;
        }
    },
};

上述代码展示了如何创建一个带有自定义样式的工具提示，在这里不仅限于文字描述还可以加入更多样式标签如颜色标记等增强可读性和美观度。