通过echarts实现水波球水球图水柱图的图表样式（图表是动态的）

npm install echarts-liquidfill
npm i echarts@^4.2.1 zrender@^4.0.7

图片展示

demo单个 demo多个

demo参考

var value = 0.48;
var data = [value, value, value, value, value ];
var option = {
    backgroundColor: '#fff',
    series: [{
        type: 'liquidFill',
        radius: '70%',
        center: ['50%', '40%'],
        data: [0.48],
        color: ['red'],
        amplitude: '8%',
        waveLength: '80%',
        phase: 'auto',
        period: 'auto',
        direction: 'right',
        shape: 'circle',
        waveAnimation: true,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear',
        animationDuration: 2000,
        animationDurationUpdate: 1000,
        outline: {
            show: false,
            borderDistance: 8,
            itemStyle: {
                color: 'none',
                borderColor: '#294D99',
                borderWidth: 8,
                shadowBlur: 20,
                shadowColor: 'rgba(0, 0, 0, 0.25)'
            }
        },
     
        backgroundStyle: {
            color: '#E3F7FF'
        },
     
        itemStyle: {
            opacity: 0.95,
            shadowBlur: 50,
            shadowColor: 'rgba(0, 0, 0, 0.4)'
        },
        label: {
            show: true,
            color: '#294D99',
            insideColor: '#fff',
            fontSize: 50,
            fontWeight: 'bold',
            align: 'center',
            baseline: 'middle',
            position: 'inside'
        },
        emphasis: {
            itemStyle: {
                opacity: 0.8
            }
        }
    }]
};

备注：单个波纹和多个波纹根据data数据决定

https://www.npmjs.com/package/echarts-liquidfill