ECharts Liquid Fill Chart-3-单个水波颜色、移动方向设置

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

原创最新推荐文章于 2025-10-23 01:52:50 发布 · 3.4k 阅读

1 ·

CC 4.0 BY-SA版权

水球图专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种基于代码实现的水球图高级定制方法，包括颜色、大小、波的振幅、波长等参数的调整。通过示例展示了如何设置水波的颜色、透明度、移动方向等属性。

1、代码

//水球图支持非常高度定制化的需求，包括颜色（color）、大小（radius）、波的振幅（amplitude）、波长（waveLength）、相位（phase）、周期（period）、移动方向（direction）、形状（shape）、动画（waveAnimation）等等，
var option = {
    title: {
        text: '水球图对单个波的配置'
    },
    series: [{
        type: 'liquidFill',
        radius: '50%', //半径大小，取值百分比
        data: [0.6, {
                value: 0.5,
                direction: 'left', //水波移动的方向，默认right,top 和bottom时，单条水波静止
                itemStyle: {
                    normal: { //正常样式
                        color: 'red',
                        opacity: 0.6
                    }
                },
            },
            {
                value: 0.4,
                direction: 'top', //水波静止
                itemStyle: {
                    normal: { //正常样式
                        color: 'yellow',
                        opacity: 0.6
                    }
                },
            },
            0.3
        ]
    }]
};