Echarts气泡图如何设置动画效果

ECharts 气泡图可以通过设置 animation 和 animationDuration 选项来实现动画效果。以下是一个简单的示例：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [
            [10, 10, 20],
            [20, 20, 30],
            [30, 30, 40]
        ],
        type: 'scatter',
        symbolSize: function (data) {
            return data[2] / 2;
        },
        animation: true, // 开启动画
        animationDuration: 1000, // 动画时长，单位毫秒
        animationEasing: 'linear', // 动画缓动效果，可选 'linear'、'easeIn'、'easeOut'、'easeInOut'
        animationDelay: function (idx) {
            return idx * 100; // 每个数据点的动画延迟时间，单位毫秒
        }
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

在这个示例中，我们设置了以下动画相关选项：

• animation: 设置为 true 以开启动画效果。
• animationDuration: 设置动画时长，单位为毫秒。这里设置为 1000 毫秒（1 秒）。
• animationEasing: 设置动画缓动效果。可选值有 ‘linear’、‘easeIn’、‘easeOut’ 和 ‘easeInOut’。
• animationDelay: 设置每个数据点的动画延迟时间。这里使用一个函数，使得每个数据点的动画延迟时间依次增加 100 毫秒。

你可以根据自己的需求调整这些选项，以实现不同效果的动画。