Skip to content

I
incubator-echarts

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

从无法访问的项目Fork

通知 1
Star 0
Fork 0
I
incubator-echarts

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

提交 5f2d2860 编写于 作者: K kener
浏览文件
操作

markPoint特效支持

上级 562f6223
隐藏空白更改
内联 并排
Showing with 180 addition and 68 deletion
doc/example/map11.html
浏览文件 @ 5f2d2860
......@@ -73,7 +73,7 @@
<textarea id="code" name="code">
option = {
backgroundColor: '#1b1b1b',
color: ['#32cd32','#32cd32','#32cd32','rgba(30,144,255,0.5)'],
color: ['gold','aqua','lime'],
title : {
text: '模拟迁徙',
subtext:'数据纯属虚构',
......@@ -112,6 +112,15 @@ option = {
saveAsImage : true
}
},
dataRange: {
min : 0,
max : 100,
calculable : true,
color: ['red','orange','yellow','lightgreen'],
textStyle:{
color:'#fff'
}
},
series : [
{
name: '全国',
......@@ -134,7 +143,8 @@ option = {
symbol: ['none', 'none'],
itemStyle : {
normal: {
borderWidth:1
borderWidth:1,
borderColor:'rgba(30,144,255,0.5)'
}
},
data : [
......@@ -414,9 +424,10 @@ option = {
data:[],
markLine : {
smooth:true,
symbol: ['arrow', 'arrow'],
effect : {
show: true
show: true,
size: 3,
shadowColor: 'yellow'
},
itemStyle : {
normal: {
......@@ -424,16 +435,40 @@ option = {
}
},
data : [
[{name:'北京'},{name:'北海'}],
[{name:'北京'},{name:'广州'}],
[{name:'北京'},{name:'郑州'}],
[{name:'北京'},{name:'上海'}],
[{name:'北京'},{name:'长沙'}],
[{name:'北京'},{name:'成都'}],
[{name:'北京'},{name:'长春'}],
[{name:'北京'},{name:'包头'}],
[{name:'北京'},{name:'重庆'}],
[{name:'北京'},{name:'常州'}]
[{name:'北京',value:95},{name:'南宁'}],
[{name:'北京',value:90},{name:'广州'}],
[{name:'北京',value:80},{name:'大连'}],
[{name:'北京',value:70},{name:'上海'}],
[{name:'北京',value:60},{name:'南昌'}],
[{name:'北京',value:50},{name:'拉萨'}],
[{name:'北京',value:40},{name:'长春'}],
[{name:'北京',value:30},{name:'包头'}],
[{name:'北京',value:20},{name:'重庆'}],
[{name:'北京',value:10},{name:'常州'}]
]
},
markPoint : {
symbol:'emptyCircle',
effect : {
show: true,
shadowColor: 'yellow'
},
itemStyle:{
normal:{
label:{show:false}
}
},
data : [
{name:'南宁',value:95},
{name:'广州',value:90},
{name:'大连',value:80},
{name:'上海',value:70},
{name:'南昌',value:60},
{name:'拉萨',value:50},
{name:'长春',value:40},
{name:'包头',value:30},
{name:'重庆',value:20},
{name:'常州',value:10}
]
}
},
......@@ -446,7 +481,8 @@ option = {
smooth:true,
effect : {
show: true,
shadowColor : 'rgba(30,144,255,0.8)'
size: 3,
shadowColor: 'aqua'
},
itemStyle : {
normal: {
......@@ -454,16 +490,16 @@ option = {
}
},
data : [
[{name:'上海'},{name:'包头'}],
[{name:'上海'},{name:'北海'}],
[{name:'上海'},{name:'广州'}],
[{name:'上海'},{name:'郑州'}],
[{name:'上海'},{name:'长春'}],
[{name:'上海'},{name:'重庆'}],
[{name:'上海'},{name:'长沙'}],
[{name:'上海'},{name:'北京'}],
[{name:'上海'},{name:'丹东'}],
[{name:'上海'},{name:'大连'}]
[{name:'上海',value:95},{name:'包头'}],
[{name:'上海',value:90},{name:'北海'}],
[{name:'上海',value:80},{name:'广州'}],
[{name:'上海',value:70},{name:'郑州'}],
[{name:'上海',value:60},{name:'长春'}],
[{name:'上海',value:50},{name:'重庆'}],
[{name:'上海',value:40},{name:'长沙'}],
[{name:'上海',value:30},{name:'北京'}],
[{name:'上海',value:20},{name:'丹东'}],
[{name:'上海',value:10},{name:'大连'}]
]
}
},
......@@ -476,7 +512,8 @@ option = {
smooth:true,
effect : {
show: true,
shadowColor : 'rgba(0,255,0,0.8)'
size: 3,
shadowColor: 'lime'
},
itemStyle : {
normal: {
......@@ -484,16 +521,16 @@ option = {
}
},
data : [
[{name:'广州'},{name:'北海'}],
[{name:'广州'},{name:'郑州'}],
[{name:'广州'},{name:'长春'}],
[{name:'广州'},{name:'重庆'}],
[{name:'广州'},{name:'长沙'}],
[{name:'广州'},{name:'成都'}],
[{name:'广州'},{name:'常州'}],
[{name:'广州'},{name:'大连'}],
[{name:'广州'},{name:'福州'}],
[{name:'广州'},{name:'海口'}]
[{name:'广州',value:95},{name:'北海'}],
[{name:'广州',value:90},{name:'太原'}],
[{name:'广州',value:80},{name:'长春'}],
[{name:'广州',value:70},{name:'重庆'}],
[{name:'广州',value:60},{name:'西安'}],
[{name:'广州',value:50},{name:'成都'}],
[{name:'广州',value:40},{name:'常州'}],
[{name:'广州',value:30},{name:'北京'}],
[{name:'广州',value:20},{name:'福州'}],
[{name:'广州',value:10},{name:'海口'}]
]
}
}
......
src/component/base.js
浏览文件 @ 5f2d2860
......@@ -411,6 +411,7 @@ define(function(require) {
var queryTarget;
var nColor;
var eColor;
var effect;
var zrWidth = self.zr.getWidth();
var zrHeight = self.zr.getHeight();
for (var i = 0, l = data.length; i < l; i++) {
......@@ -458,6 +459,14 @@ define(function(require) {
'horizontal' // 走向，用于默认文字定位
);
effect = self.deepMerge(
[data[i], mpOption],
'effect'
);
if (effect.show) {
itemShape.effect = effect;
}
// 重新pack一下数据
ecData.pack(
itemShape,
......@@ -568,7 +577,6 @@ define(function(require) {
itemShape.effect = effect;
}
// 重新pack一下数据
ecData.pack(
itemShape,
......@@ -810,7 +818,7 @@ define(function(require) {
symbolBorderColor: normal.borderColor
|| color
|| normal.color,
symbolBorder: normal.borderWidth * 2
symbolBorder: normal.borderWidth
},
highlightStyle : {
shadowColor : elineStyle.shadowColor,
......@@ -832,8 +840,8 @@ define(function(require) {
|| emphasis.color
|| normal.color,
symbolBorder: typeof emphasis.borderWidth == 'undefined'
? (normal.borderWidth * 2 + 2)
: (emphasis.borderWidth * 2)
? (normal.borderWidth + 2)
: (emphasis.borderWidth)
},
clickable : true
};
......@@ -1015,7 +1023,7 @@ define(function(require) {
}
function animationEffect() {
clearAnimation();
clearAnimationShape();
var zlevel = EFFECT_ZLEVEL;
if (canvasSupported) {
zr.modLayer(
......@@ -1027,7 +1035,6 @@ define(function(require) {
);
}
//self.effectList = [];
var color;
var shadowColo;
var size;
......@@ -1041,6 +1048,24 @@ define(function(require) {
effect = shape.effect;
var effectShape;
switch (shape._mark) {
case 'point':
color = effect.color || shape.style.strokeColor || shape.style.color;
shadowColor = effect.shadowColor || color;
size = effect.scaleSize;
effectShape = {
shape : shape.shape,
id : zr.newShapeId(),
zlevel : zlevel,
scale:[1, 1, shape.style.x, shape.style.y],
style : zrUtil.clone(shape.style),
draggable : false,
hoverable : false
}
effectShape.style.x = 5;
effectShape.style.y = 5;
effectShape.style.shadowColor = shadowColor;
effectShape.style.shadowBlur = 5;
break;
case 'line':
color = effect.color || shape.style.strokeColor || shape.style.color;
shadowColor = effect.shadowColor || color;
......@@ -1067,29 +1092,80 @@ define(function(require) {
var Offset;
if (canvasSupported) {
// 提高性能，换成image
effectShape.style.image = zr.shapeToImage(effectShape, size * 4, size * 4)
.style.image;
if (shape._mark === 'point') {
effectShape.style.image = zr.shapeToImage(
effectShape,
effectShape.style.width + 10,
effectShape.style.height + 10
).style.image;
Offset = 5;
}
else if (shape._mark === 'line') {
effectShape.style.image = zr.shapeToImage(effectShape, size * 4, size * 4)
.style.image;
Offset = size * 2;
}
effectShape.shape = 'image';
Offset = size * 2;
}
else {
Offset = 0;
}
var duration;
// 改变坐标
effectShape.position = shape.position;
effectShape.style.x = shape.style.xStart - Offset;
effectShape.style.y = shape.style.yStart - Offset;
if (shape._mark === 'point') {
effectShape.style.x = shape.style.x;
effectShape.style.y = shape.style.y;
duration = (effect.period + Math.random()) * 100;
size += Math.random().toFixed(1) - 0;
}
else if (shape._mark === 'line') {
effectShape.style.x = shape.style.xStart - Offset;
effectShape.style.y = shape.style.yStart - Offset;
var distance = (shape.style.xStart - shape._x) * (shape.style.xStart - shape._x)
+
(shape.style.yStart - shape._y) * (shape.style.yStart - shape._y);
duration = Math.round(Math.sqrt(Math.round(
distance * effect.period * effect.period
)));
}
self.effectList.push(effectShape);
zr.addShape(effectShape);
var distance = (shape.style.xStart - shape._x) * (shape.style.xStart - shape._x)
+
(shape.style.yStart - shape._y) * (shape.style.yStart - shape._y);
var duration = Math.round(Math.sqrt(Math.round(
distance * effect.period * effect.period
)));
if (shape._mark === 'line') {
if (shape._mark === 'point') {
zr.modShape(
shape.id,
{ invisible : true},
true
);
zr.modShape(
effectShape.id,
{
scale : [
0.1, 0.1,
effectShape.style.x + (effectShape.style.width) /2,
effectShape.style.y + (effectShape.style.height) / 2
]
},
true
);
zr.animate(effectShape.id, '', true)
.when(
duration,
{
scale : [
size, size,
effectShape.style.x + (effectShape.style.width) /2,
effectShape.style.y + (effectShape.style.height) / 2
]
}
)
.start();
}
else if (shape._mark === 'line') {
if (!shape.style.smooth) {
// 直线
zr.animate(effectShape.id, 'style', true)
......@@ -1100,14 +1176,6 @@ define(function(require) {
y : shape._y - Offset
}
)
.when(
duration + 200,
{
r : size * 8,
width : size * 8,
height : size * 8
}
)
.start();
}
else {
......@@ -1136,9 +1204,8 @@ define(function(require) {
self.refresh && self.refresh();
}
function clearAnimation() {
if (self.zr) {
//self.zr.clearAnimation();
function clearAnimationShape() {
if (self.zr && self.effectList.length > 0) {
self.zr.modLayer(
EFFECT_ZLEVEL,
{ motionBlur : false}
......@@ -1152,7 +1219,7 @@ define(function(require) {
* 清除图形数据，实例仍可用
*/
function clear() {
clearAnimation();
clearAnimationShape();
if (self.zr) {
self.zr.delShape(self.shapeList);
}
......@@ -1192,7 +1259,7 @@ define(function(require) {
self.animationMark = animationMark;
self.animationEffect = animationEffect;
self.resize = resize;
self.clearAnimation = clearAnimation;
self.clearAnimationShape = clearAnimationShape;
self.clear = clear;
self.dispose = dispose;
}
......
src/config.js
浏览文件 @ 5f2d2860
......@@ -786,6 +786,13 @@ define(function() {
symbol: 'pin', // 标注类型
symbolSize: 10, // 标注大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
//symbolRotate : null,// 标注旋转控制
effect : {
show: false,
period: 15, // 运动周期，无单位，值越大越慢
scaleSize : 2 // 放大倍速
// color : 'gold'
// shadowColor : 'rgba(255,215,0,0.8)'
},
itemStyle: {
normal: {
// color: 各异，
......@@ -823,6 +830,7 @@ define(function() {
effect : {
show: false,
period: 15 // 运动周期，无单位，值越大越慢
// size : lineWidth * 2
// color : 'gold'
// shadowColor : 'rgba(255,215,0,0.8)'
},
......
src/util/shape/markLine.js
浏览文件 @ 5f2d2860
......@@ -168,7 +168,7 @@ define(
buildArrawPath : function (ctx, style, idx) {
var len = Math.round(style.pointListLength || style.pointList.length);
var symbolSize = style.symbolSize[idx];
var symbolSize = style.symbolSize[idx] * 2;
var xStart = style.pointList[0][0];
var xEnd = style.pointList[len - 1][0];
var yStart = style.pointList[0][1];
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或