【echarts】ECharts 解决地图标签重叠问题的技术实践

news2024/11/29 10:49:31

ECharts 解决地图标签重叠问题的技术实践

在使用 ECharts 绘制地图时，遇到的一个常见问题是某些地区的名称标签会因为地理位置接近而出现重叠，导致可读性变差。为了提升地图的展示效果，确保每个地区的名称都能清晰可见，我们可以通过自定义标签格式和位置偏移来解决这个问题。本文将分享一个实际的解决方案，并详细解释其实现思路。
在这里插入图片描述

问题描述

在使用 ECharts 绘制中国地图时，香港特别行政区和澳门特别行政区的名称标签经常因为它们地理位置的接近而重叠。默认情况下，ECharts 的自动布局无法完全避免这种情况，这就需要我们手动调整这些标签的位置。

解决方案

我们可以通过 ECharts 的 label 配置项中的 formatter 和 rich 属性，自定义这些标签的显示效果。下面是具体的实现代码：

label: {
  normal: {
    color: '#fff',
    formatter: (params) => {
      let str = '';
      // 根据名称条件调整偏移量
      if (params.name.includes('香港特别行政区')) {
        str = `{a|${params.name}}`;
      } else if (params.name.includes('澳门特别行政区')) {
        str = `{b|${params.name}}`;
      } else {
        str = `{c|${params.name}}`;
      }
      return str;
    },
    show: true,
    fontSize: 10,
    rich: {
      a: {
        padding: [0, 0, 0, -11],
      },
      b: {
        padding: [20, 0, 0, -11],
      },
      c: {
        position: [-12, -11],
      },
    },
  },
},

代码解读

formatter 函数：我们使用了一个自定义的格式化函数，根据 params.name 判断当前标签是否是“香港特别行政区”或“澳门特别行政区”。如果是这两个地区，我们分别应用不同的文本样式（a 或 b），其余地区则应用默认样式（c）。
rich 属性：在 rich 属性中，我们为不同的文本样式定义了具体的样式配置。通过调整 padding 和 position，我们可以控制这些标签的显示位置，避免它们与其他标签重叠。
- a 样式专门为“香港特别行政区”设置，通过 padding 调整标签的左偏移量。
- b 样式专门为“澳门特别行政区”设置，通过 padding 调整标签的顶部偏移量。
- c 样式为其他地区设置，通过 position 调整标签的位置。