echarts 涟漪动态效果

ECharts 是一个开源的数据可视化库，它提供了多种图表类型和丰富的交互功能。要实现涟漪动态效果，可以使用 ECharts 中的散点图（Scatter Chart）和动画效果。

下面是一个简单的示例代码，实现了一个带有涟漪动态效果的散点图：

// 初始化图表
var myChart = echarts.init(document.getElementById('myChart'));

// 配置项
var option = {
    xAxis: {
        type: 'value',
        min: 0,
        max: 100
    },
    yAxis: {
        type: 'value',
        min: 0,
        max: 100
    },
    series: [{
        type: 'scatter',
        symbolSize: 10,
        data: []
    }]
};

// 添加数据
var data = [];
for (var i = 0; i < 50; i++) {
    data.push([Math.random() * 100, Math.random() * 100]);
}
option.series[0].data = data;

// 设置动画效果
option.series[0].rippleEffect = {
    brushType: 'stroke'
};

// 渲染图表
myChart.setOption(option);

在上面的代码中，我们首先初始化了一个散点图，并配置了 x 轴和 y 轴的范围。然后，我们通过循环生成了一些随机的散点数据，并将其添加到了 series 中。

接着，我们通过设置 `rippleEffect` 属性为 `{ brushType: 'stroke' }`，实现了涟漪动态效果。最后，调用 `setOption` 方法渲染图表即可。

需要注意的是，涟漪动态效果会占用一定的计算资源，如果数据量过大，可能会影响性能。因此，在实际使用中需要权衡性能和效果，根据具体情况进行调整。