echarts-liquidfill实现水流波纹形圆形进度条效果代码-html代码-BFW代码库

echarts-liquidfill实现水流波纹形圆形进度条效果代码

代码语言：html

所属分类：进度条

代码描述：echarts-liquidfill实现水流波纹形圆形进度条效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
 
</head>

<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%;"></div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts-4.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts-liquidfill.2.js"></script>
    <script type="text/javascript">
        var value = 0.2;
        var data = [value, value, value, ];
        var dom = document.getElementById("container");
        // dom.style.height=window.innerHeight+'px';
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        option = {
            backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
                offset: 0,
                color: '#431ab8'
            }, {
                offset: 1,
                color: '#471bba'
            }]),
            title: {
                text: (value * 100).toFixed(0) + '{a|%}',
                textStyle: {
                    fontSize: 50,
                    fontFamily: 'Microsoft Yahei',
                    fontWeight: 'normal',
                    color: '#bcb8fb',
                    rich: {
                        a: {
                            fontSize: 28,
                        }
                    }
                },
                x: 'center',
                y: '35%'
            },
            graphic: [{
                type: 'group',
                left: 'center',
                top: '60%',
                children: [{
                    type: 'text',
                    z: 100,
                    left: '10',
                    top: 'middle',
                    style: {
                        fill: '#aab2fa',
                        text: '流量统计',
                        font: '20px Microsoft YaHei'
                    }
                }]
            }],
            series: [{
                type: 'liquidFill',
                radius: '80%',
                center: ['50%', '50%'],
                //  shape: 'roundRect',
                data: data,
                backgroundStyle: {
                    color: {
                        type: 'linear',
                        x: 1,
                        y: 0,
                .........完整代码请登录后点击上方下载按钮下载查看