1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
| 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;
});
|