445 lines
16 KiB
JavaScript
445 lines
16 KiB
JavaScript
/**
|
||
* echarts图表特效基类
|
||
*
|
||
* @desc echarts基于Canvas，纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据统计图表。
|
||
* @author Kener (@Kener-林峰, kener.linfeng@gmail.com)
|
||
*
|
||
*/
|
||
define(function (require) {
|
||
var ecData = require('../util/ecData');
|
||
|
||
var CircleShape = require('zrender/shape/Circle');
|
||
var ImageShape = require('zrender/shape/Image');
|
||
var curveTool = require('zrender/tool/curve');
|
||
var IconShape = require('../util/shape/Icon');
|
||
var SymbolShape = require('../util/shape/Symbol');
|
||
var ShapeBundle = require('zrender/shape/ShapeBundle');
|
||
var Polyline = require('zrender/shape/Polyline');
|
||
var vec2 = require('zrender/tool/vector');
|
||
|
||
var canvasSupported = require('zrender/tool/env').canvasSupported;
|
||
|
||
function point(zr, effectList, shape, zlevel) {
|
||
var effect = shape.effect;
|
||
var color = effect.color || shape.style.strokeColor || shape.style.color;
|
||
var shadowColor = effect.shadowColor || color;
|
||
var size = effect.scaleSize;
|
||
var distance = effect.bounceDistance;
|
||
var shadowBlur = typeof effect.shadowBlur != 'undefined'
|
||
? effect.shadowBlur : size;
|
||
|
||
var effectShape;
|
||
if (shape.type !== 'image') {
|
||
effectShape = new IconShape({
|
||
zlevel : zlevel,
|
||
style : {
|
||
brushType : 'stroke',
|
||
iconType : shape.style.iconType != 'droplet'
|
||
? shape.style.iconType
|
||
: 'circle',
|
||
x : shadowBlur + 1, // 线宽
|
||
y : shadowBlur + 1,
|
||
n : shape.style.n,
|
||
width : shape.style._width * size,
|
||
height : shape.style._height * size,
|
||
lineWidth : 1,
|
||
strokeColor : color,
|
||
shadowColor : shadowColor,
|
||
shadowBlur : shadowBlur
|
||
},
|
||
draggable : false,
|
||
hoverable : false
|
||
});
|
||
if (shape.style.iconType == 'pin') {
|
||
effectShape.style.y += effectShape.style.height / 2 * 1.5;
|
||
}
|
||
|
||
if (canvasSupported) { // 提高性能，换成image
|
||
effectShape.style.image = zr.shapeToImage(
|
||
effectShape,
|
||
effectShape.style.width + shadowBlur * 2 + 2,
|
||
effectShape.style.height + shadowBlur * 2 + 2
|
||
).style.image;
|
||
|
||
effectShape = new ImageShape({
|
||
zlevel : effectShape.zlevel,
|
||
style : effectShape.style,
|
||
draggable : false,
|
||
hoverable : false
|
||
});
|
||
}
|
||
}
|
||
else {
|
||
effectShape = new ImageShape({
|
||
zlevel : zlevel,
|
||
style : shape.style,
|
||
draggable : false,
|
||
hoverable : false
|
||
});
|
||
}
|
||
|
||
ecData.clone(shape, effectShape);
|
||
|
||
// 改变坐标，不能移到前面
|
||
effectShape.position = shape.position;
|
||
effectList.push(effectShape);
|
||
zr.addShape(effectShape);
|
||
|
||
var devicePixelRatio = shape.type !== 'image' ? (window.devicePixelRatio || 1) : 1;
|
||
var offset = (effectShape.style.width / devicePixelRatio - shape.style._width) / 2;
|
||
effectShape.style.x = shape.style._x - offset;
|
||
effectShape.style.y = shape.style._y - offset;
|
||
|
||
if (shape.style.iconType == 'pin') {
|
||
effectShape.style.y -= shape.style.height / 2 * 1.5;
|
||
}
|
||
|
||
var duration = (effect.period + Math.random() * 10) * 100;
|
||
|
||
zr.modShape(
|
||
shape.id,
|
||
{ invisible : true}
|
||
);
|
||
|
||
var centerX = effectShape.style.x + (effectShape.style.width) / 2 / devicePixelRatio;
|
||
var centerY = effectShape.style.y + (effectShape.style.height) / 2 / devicePixelRatio;
|
||
|
||
if (effect.type === 'scale') {
|
||
// 放大效果
|
||
zr.modShape(
|
||
effectShape.id,
|
||
{
|
||
scale : [0.1, 0.1, centerX, centerY]
|
||
}
|
||
);
|
||
|
||
zr.animate(effectShape.id, '', effect.loop)
|
||
.when(
|
||
duration,
|
||
{
|
||
scale : [1, 1, centerX, centerY]
|
||
}
|
||
)
|
||
.done(function() {
|
||
shape.effect.show = false;
|
||
zr.delShape(effectShape.id);
|
||
})
|
||
.start();
|
||
}
|
||
else {
|
||
zr.animate(effectShape.id, 'style', effect.loop)
|
||
.when(
|
||
duration,
|
||
{
|
||
y : effectShape.style.y - distance
|
||
}
|
||
)
|
||
.when(
|
||
duration * 2,
|
||
{
|
||
y : effectShape.style.y
|
||
}
|
||
)
|
||
.done(function() {
|
||
shape.effect.show = false;
|
||
zr.delShape(effectShape.id);
|
||
})
|
||
.start();
|
||
}
|
||
|
||
}
|
||
|
||
function largePoint(zr, effectList, shape, zlevel) {
|
||
var effect = shape.effect;
|
||
var color = effect.color || shape.style.strokeColor || shape.style.color;
|
||
var size = effect.scaleSize;
|
||
var shadowColor = effect.shadowColor || color;
|
||
var shadowBlur = typeof effect.shadowBlur != 'undefined'
|
||
? effect.shadowBlur : (size * 2);
|
||
var devicePixelRatio = window.devicePixelRatio || 1;
|
||
var effectShape = new SymbolShape({
|
||
zlevel : zlevel,
|
||
position : shape.position,
|
||
scale : shape.scale,
|
||
style : {
|
||
pointList : shape.style.pointList,
|
||
iconType : shape.style.iconType,
|
||
color : color,
|
||
strokeColor : color,
|
||
shadowColor : shadowColor,
|
||
shadowBlur : shadowBlur * devicePixelRatio,
|
||
random : true,
|
||
brushType: 'fill',
|
||
lineWidth:1,
|
||
size : shape.style.size
|
||
},
|
||
draggable : false,
|
||
hoverable : false
|
||
});
|
||
|
||
effectList.push(effectShape);
|
||
zr.addShape(effectShape);
|
||
zr.modShape(
|
||
shape.id,
|
||
{ invisible : true}
|
||
);
|
||
|
||
var duration = Math.round(effect.period * 100);
|
||
var clip1 = {};
|
||
var clip2 = {};
|
||
for (var i = 0; i < 20; i++) {
|
||
effectShape.style['randomMap' + i] = 0;
|
||
clip1 = {};
|
||
clip1['randomMap' + i] = 100;
|
||
clip2 = {};
|
||
clip2['randomMap' + i] = 0;
|
||
effectShape.style['randomMap' + i] = Math.random() * 100;
|
||
zr.animate(effectShape.id, 'style', true)
|
||
.when(duration, clip1)
|
||
.when(duration * 2, clip2)
|
||
.when(duration * 3, clip1)
|
||
.when(duration * 4, clip1)
|
||
.delay(Math.random() * duration * i)
|
||
//.delay(duration / 15 * (15 - i + 1))
|
||
.start();
|
||
|
||
}
|
||
}
|
||
|
||
function line(zr, effectList, shape, zlevel, isLarge) {
|
||
var effect = shape.effect;
|
||
var shapeStyle = shape.style;
|
||
var color = effect.color || shapeStyle.strokeColor || shapeStyle.color;
|
||
var shadowColor = effect.shadowColor || shapeStyle.strokeColor || color;
|
||
var size = shapeStyle.lineWidth * effect.scaleSize;
|
||
var shadowBlur = typeof effect.shadowBlur != 'undefined'
|
||
? effect.shadowBlur : size;
|
||
|
||
var effectShape = new CircleShape({
|
||
zlevel : zlevel,
|
||
style : {
|
||
x : shadowBlur,
|
||
y : shadowBlur,
|
||
r : size,
|
||
color : color,
|
||
shadowColor : shadowColor,
|
||
shadowBlur : shadowBlur
|
||
},
|
||
hoverable : false
|
||
});
|
||
|
||
var offset = 0;
|
||
if (canvasSupported && ! isLarge) { // 提高性能，换成image
|
||
var zlevel = effectShape.zlevel;
|
||
effectShape = zr.shapeToImage(
|
||
effectShape,
|
||
(size + shadowBlur) * 2,
|
||
(size + shadowBlur) * 2
|
||
);
|
||
effectShape.zlevel = zlevel;
|
||
effectShape.hoverable = false;
|
||
|
||
offset = shadowBlur;
|
||
}
|
||
|
||
if (! isLarge) {
|
||
ecData.clone(shape, effectShape);
|
||
// 改变坐标， 不能移到前面
|
||
effectShape.position = shape.position;
|
||
effectList.push(effectShape);
|
||
zr.addShape(effectShape);
|
||
}
|
||
|
||
var effectDone = function () {
|
||
if (! isLarge) {
|
||
shape.effect.show = false;
|
||
zr.delShape(effectShape.id);
|
||
}
|
||
effectShape.effectAnimator = null;
|
||
};
|
||
|
||
if (shape instanceof Polyline) {
|
||
var distanceList = [0];
|
||
var totalDist = 0;
|
||
var pointList = shapeStyle.pointList;
|
||
var controlPointList = shapeStyle.controlPointList;
|
||
for (var i = 1; i < pointList.length; i++) {
|
||
if (controlPointList) {
|
||
var cp1 = controlPointList[(i - 1) * 2];
|
||
var cp2 = controlPointList[(i - 1) * 2 + 1];
|
||
totalDist += vec2.dist(pointList[i - 1], cp1)
|
||
+ vec2.dist(cp1, cp2)
|
||
+ vec2.dist(cp2, pointList[i]);
|
||
}
|
||
else {
|
||
totalDist += vec2.dist(pointList[i - 1], pointList[i]);
|
||
}
|
||
distanceList.push(totalDist);
|
||
}
|
||
var obj = { p: 0 };
|
||
var animator = zr.animation.animate(obj, { loop: effect.loop });
|
||
|
||
for (var i = 0; i < distanceList.length; i++) {
|
||
animator.when(distanceList[i] * effect.period, { p: i });
|
||
}
|
||
animator.during(function () {
|
||
var i = Math.floor(obj.p);
|
||
var x, y;
|
||
if (i == pointList.length - 1) {
|
||
x = pointList[i][0];
|
||
y = pointList[i][1];
|
||
}
|
||
else {
|
||
var t = obj.p - i;
|
||
var p0 = pointList[i];
|
||
var p1 = pointList[i + 1];
|
||
if (controlPointList) {
|
||
var cp1 = controlPointList[i * 2];
|
||
var cp2 = controlPointList[i * 2 + 1];
|
||
x = curveTool.cubicAt(
|
||
p0[0], cp1[0], cp2[0], p1[0], t
|
||
);
|
||
y = curveTool.cubicAt(
|
||
p0[1], cp1[1], cp2[1], p1[1], t
|
||
);
|
||
}
|
||
else {
|
||
x = (p1[0] - p0[0]) * t + p0[0];
|
||
y = (p1[1] - p0[1]) * t + p0[1];
|
||
}
|
||
}
|
||
effectShape.style.x = x;
|
||
effectShape.style.y = y;
|
||
if (! isLarge) {
|
||
zr.modShape(effectShape);
|
||
}
|
||
})
|
||
.done(effectDone)
|
||
.start();
|
||
|
||
animator.duration = totalDist * effect.period;
|
||
|
||
effectShape.effectAnimator = animator;
|
||
}
|
||
else {
|
||
var x0 = shapeStyle.xStart - offset;
|
||
var y0 = shapeStyle.yStart - offset;
|
||
var x2 = shapeStyle.xEnd - offset;
|
||
var y2 = shapeStyle.yEnd - offset;
|
||
effectShape.style.x = x0;
|
||
effectShape.style.y = y0;
|
||
|
||
var distance = (x2 - x0) * (x2 - x0) + (y2 - y0) * (y2 - y0);
|
||
var duration = Math.round(Math.sqrt(Math.round(
|
||
distance * effect.period * effect.period
|
||
)));
|
||
|
||
if (shape.style.curveness > 0) {
|
||
var x1 = shapeStyle.cpX1 - offset;
|
||
var y1 = shapeStyle.cpY1 - offset;
|
||
effectShape.effectAnimator = zr.animation.animate(effectShape, { loop: effect.loop })
|
||
.when(duration, { p: 1 })
|
||
.during(function (target, t) {
|
||
effectShape.style.x = curveTool.quadraticAt(
|
||
x0, x1, x2, t
|
||
);
|
||
effectShape.style.y = curveTool.quadraticAt(
|
||
y0, y1, y2, t
|
||
);
|
||
if (! isLarge) {
|
||
zr.modShape(effectShape);
|
||
}
|
||
})
|
||
.done(effectDone)
|
||
.start();
|
||
}
|
||
else {
|
||
// 不用 zr.animate，因为在用 ShapeBundle 的时候单个 effectShape 不会
|
||
// 被加到 zrender 中
|
||
effectShape.effectAnimator = zr.animation.animate(effectShape.style, { loop: effect.loop })
|
||
.when(duration, {
|
||
x: x2,
|
||
y: y2
|
||
})
|
||
.during(function () {
|
||
if (! isLarge) {
|
||
zr.modShape(effectShape);
|
||
}
|
||
})
|
||
.done(effectDone)
|
||
.start();
|
||
}
|
||
effectShape.effectAnimator.duration = duration;
|
||
}
|
||
return effectShape;
|
||
}
|
||
|
||
function largeLine(zr, effectList, shape, zlevel) {
|
||
var effectShape = new ShapeBundle({
|
||
style: {
|
||
shapeList: []
|
||
},
|
||
zlevel: zlevel,
|
||
hoverable: false
|
||
});
|
||
var shapeList = shape.style.shapeList;
|
||
var effect = shape.effect;
|
||
effectShape.position = shape.position;
|
||
|
||
var maxDuration = 0;
|
||
var subEffectAnimators = [];
|
||
for (var i = 0; i < shapeList.length; i++) {
|
||
shapeList[i].effect = effect;
|
||
var subEffectShape = line(zr, null, shapeList[i], zlevel, true);
|
||
var subEffectAnimator = subEffectShape.effectAnimator;
|
||
effectShape.style.shapeList.push(subEffectShape);
|
||
if (subEffectAnimator.duration > maxDuration) {
|
||
maxDuration = subEffectAnimator.duration;
|
||
}
|
||
if (i === 0) {
|
||
effectShape.style.color = subEffectShape.style.color;
|
||
effectShape.style.shadowBlur = subEffectShape.style.shadowBlur;
|
||
effectShape.style.shadowColor = subEffectShape.style.shadowColor;
|
||
}
|
||
subEffectAnimators.push(subEffectAnimator);
|
||
}
|
||
effectList.push(effectShape);
|
||
zr.addShape(effectShape);
|
||
|
||
var clearAllAnimators = function () {
|
||
for (var i = 0; i < subEffectAnimators.length; i++) {
|
||
subEffectAnimators[i].stop();
|
||
}
|
||
};
|
||
if (maxDuration) {
|
||
effectShape.__dummy = 0;
|
||
// Proxy animator
|
||
var animator = zr.animate(effectShape.id, '', effect.loop)
|
||
.when(maxDuration, {
|
||
__dummy: 1
|
||
})
|
||
.during(function () {
|
||
zr.modShape(effectShape);
|
||
})
|
||
.done(function () {
|
||
shape.effect.show = false;
|
||
zr.delShape(effectShape.id);
|
||
})
|
||
.start();
|
||
var oldStop = animator.stop;
|
||
|
||
animator.stop = function () {
|
||
clearAllAnimators();
|
||
oldStop.call(this);
|
||
};
|
||
}
|
||
}
|
||
|
||
return {
|
||
point : point,
|
||
largePoint : largePoint,
|
||
line : line,
|
||
largeLine: largeLine
|
||
};
|
||
});
|