ECharts百度地图散点图为城市数据添加自定义备注的实现方法

实现方法 #

你对data配置项的认知存在误区：只有value字段是ECharts用于数值映射、计算的约定字段，其他自定义属性可以自由添加，不会影响渲染逻辑，也不会被框架覆盖。按照以下步骤修改即可实现需求：

1. 给原始城市数据添加自定义描述字段

var data = [
  { name: '海门', value: 115, desc: '自定义描述内容' },
  { name: '鄂尔多斯', value: 111, desc: 'many green trees' },
];

2. 修改convertData转换函数，透传自定义属性，确保后续可以读取

var convertData = function (data) {
  var res = [];
  for (var i = 0; i < data.length; i++) {
    var geoCoord = geoCoordMap[data[i].name];
    if (geoCoord) {
      res.push({
        name: data[i].name,
        value: geoCoord.concat(data[i].value),
        // 透传自定义描述字段
        desc: data[i].desc
      });
    }
  }
  return res;
};

3. 根据你需要的展示位置选择对应配置：

• 悬浮提示框（tooltip）展示：修改tooltip配置项

tooltip: {
  trigger: 'item',
  formatter: function(params) {
    return `${params.seriesName}<br/>
            ${params.name} ${params.value[2]}<br/>
            ${params.data.desc}`
  }
},

• 地图点标签直接展示：修改effectScatter系列的label配置

label: {
  formatter: function(params) {
    // 用换行符分隔内容，实现多行展示
    return `${params.name}\n${params.value[2]}\n${params.data.desc}`
  },
  position: 'right',
  show: true,
  lineHeight: 18 // 可调整行高避免文字重叠
}

修改完成后即可实现你要的效果，hover或者直接在地图上看到每个城市对应的自定义文本内容。

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