插件窝 干货文章 ECharts 3D散点图如何实现涟漪效果并用自定义图片作为标志?

ECharts 3D散点图如何实现涟漪效果并用自定义图片作为标志?

涟漪 ECharts 图片 效果 686    来源:    2025-03-26

在ECharts 3D散点图中实现涟漪效果并使用自定义图片作为标志

要在ECharts 3D散点图中实现涟漪效果并使用自定义图片作为标志,你需要结合ECharts GL的3D功能和ECharts的基本配置。以下是实现方法:

基本实现步骤

  1. 引入必要的库

    <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
    
  2. 配置3D散点图并添加涟漪效果

option = {
    backgroundColor: '#000',
    tooltip: {},
    visualMap: {
        show: false,
        dimension: 2,
        min: 0,
        max: 20,
        inRange: {
            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
        }
    },
    xAxis3D: {
        type: 'value'
    },
    yAxis3D: {
        type: 'value'
    },
    zAxis3D: {
        type: 'value'
    },
    grid3D: {
        viewControl: {
            // 交互控制
            autoRotate: true
        },
        light: {
            main: {
                intensity: 1.2,
                shadow: true,
                shadowQuality: 'high',
                alpha: 30,
                beta: 40
            },
            ambient: {
                intensity: 0.3
            }
        }
    },
    series: [{
        type: 'scatter3D',
        // 数据点
        data: data.map(function (item) {
            return {
                value: [item[0], item[1], item[2]],
                symbolSize: 12,
                rippleEffect: {
                    brushType: 'stroke',
                    scale: 3,
                    period: 3
                }
            };
        }),
        // 使用自定义图片作为标志
        symbol: 'image://https://example.com/your-image.png',
        symbolSize: 20,
        emphasis: {
            itemStyle: {
                color: '#fff'
            }
        },
        // 涟漪效果配置
        rippleEffect: {
            brushType: 'stroke',
            scale: 3,
            period: 3
        }
    }]
};

关键点说明

  1. 自定义图片作为标志

    • 使用symbol: 'image://url'格式指定自定义图片
    • 图片URL可以是绝对路径或base64编码的图片数据
    • 设置symbolSize控制图片大小
  2. 涟漪效果配置

    • rippleEffect对象控制涟漪效果
    • brushType: 'stroke'或'fill',设置涟漪样式
    • scale: 涟漪扩散的最大比例
    • period: 动画周期(秒)
  3. 3D场景配置

    • grid3D控制3D场景的视角和光照
    • viewControl.autoRotate启用自动旋转

完整示例

// 假设已有数据点数组data
var data = [
    [10, 10, 10],
    [20, 20, 20],
    // 更多数据点...
];

var chart = echarts.init(document.getElementById('main'));

// 预加载自定义图片
chart.setOption({
    graphic: {
        elements: [{
            type: 'image',
            style: {
                image: 'https://example.com/your-image.png',
                width: 20,
                height: 20
            }
        }]
    }
});

var option = {
    // ...上述配置...
};

chart.setOption(option);

注意事项

  1. 3D散点图的性能消耗较大,数据点不宜过多
  2. 自定义图片建议使用透明背景的PNG格式
  3. 涟漪效果在3D场景中可能不如2D场景明显
  4. 确保图片URL可访问,或考虑使用base64编码内联图片

如果需要更复杂的效果,可以考虑使用ECharts的custom系列结合WebGL着色器实现更高级的视觉效果。