echarts3的加载气泡动画

效果：

代码:

        echarts.registerLoading("test", function (chartInstance, cfg) {
            var zr = chartInstance.getZr(),
                width = chartInstance.getWidth(),
                height = chartInstance.getHeight(), graphic = echarts.graphic,color=echarts.color;
            cfg = echarts.util.extend({
                count:50,
                text:'暂无数据',
                backgroundColor: 'rgba(250, 250, 250, 0.8)'
            }, cfg || {});
            function getColor()
            {
                var colors='#' + (Math.random().toString(16) + '0000').slice(2, 8);
                return color.modifyAlpha(colors, 0.3)
            }             
            var groups = new graphic.Group({
                y:0
            });
            var backgroundGraphic = new graphic.Rect({
                style:{
                    fill: cfg.backgroundColor,
                    opacity:1
                },
                shape: {
                    x: 0,
                    y: 0,
                    width: width,
                    height:height
                }
            });
            groups.add(backgroundGraphic);         
            function createCircle()
            {
                var c = getColor(), whileIndex = 100, x = Math.ceil(Math.random() * width), y = Math.ceil(Math.random() * height), r = Math.ceil(Math.random() * 40);
                var isC=false;
                var circle = new graphic.Circle({
                    style: {
                        stroke: c,
                        fill: c,
                        lineWidth:2
                    },
                    shape: {
                        r: r,
                        cx: x,
                        cy:y
                    },
                    animationY: Math.ceil(Math.random() * 3)
                });
                
                return circle;
            }
            function buildCircle()
            {
                var n = cfg.count, i = 0;
                for(;i<n;i++)
                {
                    groups.add(createCircle());
                }
            }
            buildCircle();
            var textGraphic = new graphic.Rect({
                style: {
                    fill: null,
                    textFill:"#888",
                    fontSize:16,
                    text:cfg.text
                },
                shape: {
                    x: 0,
                    y: 0,
                    width: width,
                    height: height
                }
            });
            groups.add(textGraphic);
            groups.animate(null, true).when(1, { y: 1 }).during(function () {
                    groups.eachChild(function (child) {
                        var shape = child.shape;
                        if (shape.cy - child.animationY + shape.r <= 0) {
                            child.attr({
                                shape: {
                                    cy: height + shape.r,
                                    cx: Math.ceil(Math.random() * width)
                                }
                            })
                        }
                        child.setShape('cy', shape.cy - child.animationY);
                    });
            }).start();
            return groups;
        });