ECharts Liquid Fill Chart-6-动画效果

最新推荐文章于 2025-10-23 01:52:50 发布

转载最新推荐文章于 2025-10-23 01:52:50 发布 · 1k 阅读

水球图专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用ECharts的liquidFill插件创建并动态更新水球图。通过设置不同参数实现波浪高度变化的动画效果，展示了从加载初始数据到数据变化后的更新过程。

1、代码

取自http://gallery.echartsjs.com/editor.html?c=xSk8I5JcHe

// ECharts 水球图插件，需要额外插件脚本，参见上方“脚本”
// 完整配置参数参见：https://github.com/ecomfe/echarts-liquidfill

var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3],
        animationDuration: 0,//The second type is the update animation, which is usually used when data changes and wave height changes. 
        animationDurationUpdate: 2000,//They are controlled with animationEasingUpdate and animationDurationUpdate.
        animationEasingUpdate: 'cubicOut'
    }]
};

setTimeout(function () {
    myChart.setOption({
        series: [{
            type: 'liquidFill',
            data: [0.8, 0.6, 0.4, 0.2]//数据变化
        }]
    })
}, 1000);//1秒变化