如何调整ECharts部分州的地图标签以优化显示效果？

针对巴西地图中面积较小的州标签重叠、显示模糊的问题，可通过以下方式调整，实现类似Excel的清晰布局效果：

一、标签位置与避让优化 #

1. 全局偏移+自动避让：在series.label中添加offset属性，将标签向州区域外部偏移，同时保留avoidLabelOverlap: true让ECharts自动处理重叠。
2. 小州标签单独定位：判断州缩写（如DF、RR这类小州），给它们单独设置标签位置（如右侧）和偏移量，避免被州区域遮挡。

修改后的series.label配置示例：

label: {
  show: true,
  formatter: function (params) {
    return `${params.data.value[2].ds_uf}
${converters.valor(params.data.value[2].vl_fretetransportadora)}
${params.data.value[2].pr_frete} %`;
  },
  offset: [10, 0], // 全局偏移量，可按需调整
  position: function(params) {
    const smallStates = ['DF', 'RR', 'AP', 'AC', 'AM']; // 巴西面积较小的州缩写列表
    return smallStates.includes(params.data.value[2].ds_uf) ? 'right' : 'center';
  },
  textStyle: {
    fontSize: function(params) {
      const smallStates = ['DF', 'RR', 'AP', 'AC', 'AM'];
      return smallStates.includes(params.data.value[2].ds_uf) ? 10 : 13; // 小州用更小字体
    },
    color: 'white'
  }
}

二、优化标签内容格式 #

用富文本格式控制标签内容的样式，让信息更紧凑，避免因换行导致的标签过长：

label: {
  show: true,
  formatter: function (params) {
    const uf = params.data.value[2].ds_uf;
    const valor = converters.valor(params.data.value[2].vl_fretetransportadora);
    const pr = params.data.value[2].pr_frete;
    return `{uf|${uf}}\n{valor|${valor}}\n{pr|${pr} %}`;
  },
  rich: {
    uf: { fontSize: 12, fontWeight: 'bold', color: 'white' },
    valor: { fontSize: 10, color: 'white' },
    pr: { fontSize: 10, color: 'white' }
  }
}

三、单独配置小州标签 #

在dataMapa.value的小州数据对象中，单独添加label属性，覆盖全局配置，实现精准控制：

// 示例：给联邦区DF单独设置标签
{
  name: 'Distrito Federal',
  value: [/* 你的业务数据 */],
  label: {
    show: true,
    offset: [25, 0],
    textStyle: { fontSize: 10 }
  }
}

四、调整地图默认缩放比例 #

适当提高scaleLimit.min的值，让地图默认显示比例更大，小州标签更清晰：

scaleLimit: { min: 1.5, max: 12.0 }, // 提高最小缩放比例，默认视图更清晰

通过以上调整，可有效解决小州标签显示不清、重叠的问题，达到类似Excel的清晰布局效果。

内容的提问来源于stack exchange，提问作者Robinho de Morais