Skip to content

I
incubator-echarts

x649585723 / incubator-echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
I
incubator-echarts

体验新版 GitCode，发现更多精彩内容 >>

提交 a8f279ee 编写于 作者: L lang
浏览文件
操作

Marline add large option and effect

上级 1ee06ab4
隐藏空白更改
内联 并排
Showing with 140 addition and 55 deletion
src/chart/base.js
浏览文件 @ a8f279ee
......@@ -12,6 +12,7 @@ define(function (require) {
var MarkLineShape = require('../util/shape/MarkLine');
var SymbolShape = require('../util/shape/Symbol');
var PolylineShape = require('zrender/shape/Polyline');
var ShapeBundle = require('zrender/shape/ShapeBundle');
var ecConfig = require('../config');
var ecData = require('../util/ecData');
......@@ -56,7 +57,7 @@ define(function (require) {
highlightStyle.strokeColor = self.ecTheme.calculableColor
|| ecConfig.calculableColor;
highlightStyle.lineWidth = calculableShape.type === 'icon' ? 30 : 10;
self.zr.addHoverShape(calculableShape);
setTimeout(function (){
......@@ -709,21 +710,52 @@ define(function (require) {
var shapeList = this._markLine(seriesIndex, markLine);
for (var i = 0, l = shapeList.length; i < l; i++) {
var tarShape = shapeList[i];
tarShape.zlevel = this.getZlevelBase();
tarShape.z = this.getZBase() + 1;
for (var key in attachStyle) {
tarShape[key] = zrUtil.clone(attachStyle[key]);
var isLarge = markLine.large;
if (isLarge) {
var shapeBundle = new ShapeBundle({
style: {
shapeList: shapeList
}
});
var firstShape = shapeList[0];
if (firstShape) {
zrUtil.merge(shapeBundle.style, firstShape.style);
zrUtil.merge(shapeBundle.highlightStyle = {}, firstShape.highlightStyle);
shapeBundle.style.brushType = 'stroke';
shapeBundle.zlevel = this.getZlevelBase();
shapeBundle.z = this.getZBase() + 1;
shapeBundle.hoverable = false;
for (var key in attachStyle) {
shapeBundle[key] = zrUtil.clone(attachStyle[key]);
}
}
this.shapeList.push(shapeBundle);
this.zr.addShape(shapeBundle);
shapeBundle._mark = 'largeLine';
var effect = markLine.effect;
if (effect.show) {
shapeBundle.effect = effect;
}
this.shapeList.push(tarShape);
}
// 个别特殊图表需要自己addShape
if (this.type === ecConfig.CHART_TYPE_FORCE
|| this.type === ecConfig.CHART_TYPE_CHORD
) {
else {
for (var i = 0, l = shapeList.length; i < l; i++) {
this.zr.addShape(shapeList[i]);
var tarShape = shapeList[i];
tarShape.zlevel = this.getZlevelBase();
tarShape.z = this.getZBase() + 1;
for (var key in attachStyle) {
tarShape[key] = zrUtil.clone(attachStyle[key]);
}
this.shapeList.push(tarShape);
}
// 个别特殊图表需要自己addShape
if (this.type === ecConfig.CHART_TYPE_FORCE
|| this.type === ecConfig.CHART_TYPE_CHORD
) {
for (var i = 0, l = shapeList.length; i < l; i++) {
this.zr.addShape(shapeList[i]);
}
}
}
},
......@@ -758,7 +790,7 @@ define(function (require) {
var effect;
var zrWidth = this.zr.getWidth();
var zrHeight = this.zr.getHeight();
if (!mpOption.large) {
for (var i = 0, l = data.length; i < l; i++) {
if (data[i].x == null || data[i].y == null) {
......@@ -955,6 +987,7 @@ define(function (require) {
);
if (effect.show) {
itemShape.effect = effect;
itemShape.effect.large = mlOption.large;
}
if (serie.type === ecConfig.CHART_TYPE_MAP) {
......@@ -976,6 +1009,7 @@ define(function (require) {
);
shapeList.push(itemShape);
}
return shapeList;
};
})(),
......@@ -1189,7 +1223,6 @@ define(function (require) {
var ShapeCtor = bundling ? PolylineShape : MarkLineShape;
var itemShape = new ShapeCtor({
style: {
curveness: smoothness,
symbol: symbol,
symbolSize: symbolSize,
symbolRotate: symbolRotate,
......@@ -1250,8 +1283,8 @@ define(function (require) {
shapeStyle.yStart = points[0][1];
shapeStyle.xEnd = points[1][0];
shapeStyle.yEnd = points[1][1];
shapeStyle.curveness = smoothness;
itemShape.updatePoints(itemShape.style);
itemShape.updatePoints(itemShape.highlightStyle);
}
itemShape = this.addLabel(
......@@ -1529,26 +1562,26 @@ define(function (require) {
* 标注动画
* @param {number} duration 时长
* @param {string=} easing 缓动效果
* @param {Array=} addShapeList 指定特效对象，不指定默认使用this.shapeList
* @param {Array=} shapeList 指定特效对象，不指定默认使用this.shapeList
*/
animationMark: function (duration , easing, addShapeList) {
var shapeList = addShapeList || this.shapeList;
animationMark: function (duration , easing, shapeList) {
var shapeList = shapeList || this.shapeList;
for (var i = 0, l = shapeList.length; i < l; i++) {
if (!shapeList[i]._mark) {
continue;
}
this._animateMod(false, shapeList[i], duration, easing, 0, true);
}
this.animationEffect(addShapeList);
this.animationEffect(shapeList);
},
/**
* 特效动画
* @param {Array=} addShapeList 指定特效对象，不知道默认使用this.shapeList
* @param {Array=} shapeList 指定特效对象，不知道默认使用this.shapeList
*/
animationEffect: function (addShapeList) {
!addShapeList && this.clearEffectShape();
var shapeList = addShapeList || this.shapeList;
animationEffect: function (shapeList) {
!shapeList && this.clearEffectShape();
shapeList = shapeList || this.shapeList;
if (shapeList == null) {
return;
}
......
src/util/ecEffect.js
浏览文件 @ a8f279ee
......@@ -13,6 +13,7 @@ define(function (require) {
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 canvasSupported = require('zrender/tool/env').canvasSupported;
......@@ -203,7 +204,7 @@ define(function (require) {
}
}
function line(zr, effectList, shape, zlevel) {
function line(zr, effectList, shape, zlevel, isLarge) {
var effect = shape.effect;
var shapeStyle = shape.style;
var color = effect.color || shapeStyle.strokeColor || shapeStyle.color;
......@@ -211,7 +212,7 @@ define(function (require) {
var size = shapeStyle.lineWidth * effect.scaleSize;
var shadowBlur = typeof effect.shadowBlur != 'undefined'
? effect.shadowBlur : size;
var effectShape = new CircleShape({
zlevel : zlevel,
style : {
......@@ -222,36 +223,31 @@ define(function (require) {
shadowColor : shadowColor,
shadowBlur : shadowBlur
},
draggable : false,
hoverable : false
});
var offset;
if (canvasSupported) { // 提高性能，换成image
effectShape.style.image = zr.shapeToImage(
effectShape,
var offset = 0;
if (canvasSupported && ! isLarge) { // 提高性能，换成image
var zlevel = effectShape.zlevel;
effectShape = zr.shapeToImage(
effectShape,
(size + shadowBlur) * 2,
(size + shadowBlur) * 2
).style.image;
effectShape = new ImageShape({
zlevel : effectShape.zlevel,
style : effectShape.style,
draggable : false,
hoverable : false
});
);
effectShape.zlevel = zlevel;
effectShape.hoverable = false;
offset = shadowBlur;
}
else {
offset = 0;
if (! isLarge) {
ecData.clone(shape, effectShape);
// 改变坐标， 不能移到前面
effectShape.position = shape.position;
effectList.push(effectShape);
zr.addShape(effectShape);
}
ecData.clone(shape, effectShape);
// 改变坐标， 不能移到前面
effectShape.position = shape.position;
effectList.push(effectShape);
zr.addShape(effectShape);
var x0 = shapeStyle.xStart - offset;
var y0 = shapeStyle.yStart - offset;
var x2 = shapeStyle.xEnd - offset;
......@@ -264,14 +260,16 @@ define(function (require) {
distance * effect.period * effect.period
)));
var effectDone = function () {
shape.effect.show = false;
zr.delShape(effectShape.id);
if (! isLarge) {
shape.effect.show = false;
zr.delShape(effectShape.id);
}
}
if (shape.style.curveness > 0) {
var x1 = shapeStyle.cpX1 - offset;
var y1 = shapeStyle.cpY1 - offset;
var obj = { p: 0 };
zr.animation.animate(effectShape, { loop: effect.loop })
effectShape.effectAnimator = zr.animation.animate(effectShape, { loop: effect.loop })
.when(duration, { p: 1 })
.during(function (target, t) {
effectShape.style.x = curveTool.quadraticAt(
......@@ -280,25 +278,79 @@ define(function (require) {
effectShape.style.y = curveTool.quadraticAt(
y0, y1, y2, t
);
zr.modShape(effectShape);
if (! isLarge) {
zr.modShape(effectShape);
}
})
.done(effectDone)
.start();
}
else {
zr.animate(effectShape.id, 'style', effect.loop)
// 不用 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 longestAnimator = null;
var maxDuration = 0;
for (var i = 0; i < shapeList.length; i++) {
shapeList[i].effect = effect;
var singleEffectShape = line(zr, null, shapeList[i], zlevel, true);
var singleEffectAnimator = singleEffectShape.effectAnimator;
effectShape.style.shapeList.push(singleEffectShape);
if (singleEffectAnimator.duration > maxDuration) {
maxDuration = singleEffectAnimator.duration;
longestAnimator = singleEffectAnimator;
}
if (i === 0) {
effectShape.style.color = singleEffectShape.style.color;
effectShape.style.shadowBlur = singleEffectShape.style.shadowBlur;
effectShape.style.shadowColor = singleEffectShape.style.shadowColor;
}
}
effectList.push(effectShape);
zr.addShape(effectShape);
if (longestAnimator) {
longestAnimator.during(function () {
zr.modShape(effectShape);
})
.done(function () {
shape.effect.show = false;
zr.delShape(effectShape.id);
});
}
}
return {
point : point,
largePoint : largePoint,
line : line
line : line,
largeLine: largeLine
};
});
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或