如何基于字典映射自定义图表tooltip 显示国家全称替代缩写

针对10-15个国家缩写替换的需求，无需引入额外依赖，采用「缩写-全称映射表+Tooltip自定义回调」的方案即可，兼顾可维护性、性能，且不影响x轴原有缩写的展示效果。

实现步骤 #

1. 统一维护国家缩写与全称的映射对象，所有替换规则集中管理

// 国家映射表，后续新增、修改国家对应关系直接在此处追加键值对
const countryMap = {
  "GER": "Germany",
  "FRA": "France",
  "LT": "Lithuania"
  // 其余待替换国家按相同格式补充即可
};

2. 保留原有数据集、x轴标签配置无需改动，仅在Tooltip的内容格式化回调中做替换逻辑，以主流图表库配置为例：

// 原有示例数据无需修改
var example2 = [229, 113, 109];
var labels2 = ["GER", "FRA", "LT"];

// 图表核心配置
const chartOption = {
  data: {
    labels: labels2,
    datasets: [{ data: example2 }]
  },
  options: {
    plugins: {
      tooltip: {
        callbacks: {
          label: (context) => {
            const abbr = context.label;
            // 匹配到映射值则显示全称，未匹配则兜底显示原缩写，避免出现空白
            return countryMap[abbr] || abbr;
          }
        }
      }
    }
  }
};

方案优势 #

• 维护成本低：所有国家对应关系统一在countryMap中维护，调整规则不需要修改核心业务逻辑
• 性能开销为0：对象键值对查询复杂度为O(1)，即使后续国家数量扩充到上百个也不会产生卡顿
• 容错性好：配置兜底显示逻辑，不会因为漏配映射关系导致Tooltip内容缺失
• 不破坏原有布局：x轴仍保留短缩写展示，不会因为全称过长导致标签重叠、排版错乱

若使用ECharts、AntV等其他图表库，核心逻辑完全通用：找到Tooltip的内容格式化配置项，获取当前悬浮项对应的缩写后，从映射表中取出全称返回即可。

内容的提问来源于stack exchange，提问作者User981636