使用ECharts和高德地图实现散点图

问题描述

在使用 ECharts 配合高德地图实现散点图时，发现当将图表类型设置为 'scatter' 时，视觉映射组件点击后会出现错乱现象。

相关代码

以下是相关代码示例：

var series = [
    {
        name: '用户分布',
        type: 'effectScatter', // 当设置为 'effectScatter' 时，视觉映射组件没有问题
        // type: 'scatter', // 当设置为 'scatter' 时，视觉映射组件点击后会错乱
        hoverAnimation: true,
        coordinateSystem: 'amap',
        data: res, // 数据载入，需要自定义数据格式 [{name: ***, value: ***}]
        symbolSize: 8,
        label: {
            emphasis: {
                show: false
            },
            large: true
        }
    }
];

期望结果与实际问题

我希望将图表类型设置为 'scatter' 时，视觉映射组件点击后不会出现错乱现象。目前的问题是在点击视觉映射组件后，散点图的位置和样式会出现混乱。

解决方案

经过调试和分析，发现可以通过以下方法解决该问题：

• 确保数据格式正确，特别是每个数据点的坐标值。
• 检查视觉映射组件的配置，确保其与散点图的配置兼容。
• 尝试更新 ECharts 和高德地图的版本，以获取最新的 bug 修复。

通过以上方法，可以有效避免视觉映射组件点击后出现的错乱问题，实现预期的散点图效果。