echarts 3d散点图：自定义标记图片与涟漪效果的完美结合

本文介绍如何在ECharts 3D散点图中使用自定义图片作为数据标记，并保留已实现的涟漪效果。 原始代码虽然已具备涟漪效果，但标记仍为默认形状。我们将通过修改label属性，利用rich文本格式化功能来实现自定义图片标记。

现有代码使用scatter3D组件，并通过symbol属性设置默认标记形状。由于symbol属性不支持直接使用图片路径，我们需要借助rich文本。

改进后的label.formatter函数如下：

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

formatter: function (data) {
    var res = '订单量：' + '\n {img1|' + data.name + '}' + ' ' + data.value[2];
    return res;
},

同时，在label.rich中定义img1：

label: {
    normal: {
        // ... 其他label属性
        rich: {
            img1: {
                backgroundColor: {
                    image: 'path/to/your/image.png' // 请替换为你的图片路径
                },
                width: 30, // 调整图片大小
                height: 30 // 调整图片大小
            }
        }
    }
},

请将'path/to/your/image.png'替换为你的实际图片路径。width和height属性控制图片大小，需根据图表布局调整。 通过 {img1|data.name}，图片将替换掉data.name文本。 确保图片路径正确且图片可被浏览器正常加载。 可以使用浏览器开发者工具检查网络请求，确认图片加载是否成功。

通过以上修改，即可在ECharts 3D散点图中实现自定义图片标记，并与涟漪效果完美融合，提升可视化效果。 请务必检查图片路径的准确性，并根据实际情况调整图片大小，以确保最佳显示效果。