echarts 通过keyframeAnimation 自定义动态图标散点图

ECharts是一个强大的数据可视化库，它支持通过`keyframeAnimation`特性创建动态效果，包括散点图。`keyframeAnimation`允许你自定义图表元素的状态变化，例如改变形状、大小或颜色等属性，形成动画展示。

要在ECharts中使用`keyframeAnimation`来定制动态散点图，你可以这样做：

1. **初始化图表**: 首先，需要初始化一个散点图实例，并设置基本配置项，如数据和图形样式。

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

2. **定义关键帧**: 创建一个包含若干状态的对象，每个状态代表一个时间点，描述散点的位置或其他视觉属性的变化。

var keyframes = [
    { x: '10', y: '50' }, // 第一个状态，坐标位置
    { x: '200', y: '100' }, // 后续状态...
];

3. **配置动画**: 在`option`里添加`animation`和`animationKeyFrames`配置，其中`animationKeyFrames`指定使用`keyframeAnimation`。

var option = {
    series: [{
        name: '动态散点',
        type: 'scatter',
        data: yourData,
        animation: true,
        animationDurationUpdate: 1000, // 动画持续时间
        animationEasingUpdate: 'linear', // 动画缓动函数
        animationKeyFrames: {
            duration: keyframes.length * 1000, // 总动画时长
            steps: keyframes.map(frame => ({
                property: 'position', // 变化的属性，这里为位置
                value: frame, // 关键帧中的值
            })),
        },
    }]
};

4. **更新图表**: 调用`myChart.setOption(option)`将配置应用到图表上。每次数据更新或关键帧状态更改，图表都会按照预定路径过渡到新的状态。

myChart.setOption(option);