Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
半栈学徒
incubator-echarts
提交
e83d9b07
I
incubator-echarts
项目概览
半栈学徒
/
incubator-echarts
与 Fork 源项目一致
从无法访问的项目Fork
通知
5
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
I
incubator-echarts
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
e83d9b07
编写于
7月 25, 2017
作者:
P
pah100
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
support diff group children by name in custom series.
上级
d8e82cd1
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
207 addition
and
10 deletion
+207
-10
src/chart/custom.js
src/chart/custom.js
+78
-3
src/data/DataDiffer.js
src/data/DataDiffer.js
+14
-7
test/custom.html
test/custom.html
+115
-0
未找到文件。
src/chart/custom.js
浏览文件 @
e83d9b07
...
...
@@ -6,11 +6,15 @@ define(function (require) {
var
labelHelper
=
require
(
'
./helper/labelHelper
'
);
var
createListFromArray
=
require
(
'
./helper/createListFromArray
'
);
var
barGrid
=
require
(
'
../layout/barGrid
'
);
var
DataDiffer
=
require
(
'
../data/DataDiffer
'
);
var
ITEM_STYLE_NORMAL_PATH
=
[
'
itemStyle
'
,
'
normal
'
];
var
ITEM_STYLE_EMPHASIS_PATH
=
[
'
itemStyle
'
,
'
emphasis
'
];
var
LABEL_NORMAL
=
[
'
label
'
,
'
normal
'
];
var
LABEL_EMPHASIS
=
[
'
label
'
,
'
emphasis
'
];
// Use prefix to avoid index to be the same as el.name,
// which will cause weird udpate animation.
var
GROUP_DIFF_PREFIX
=
'
e
\
0
\
0
'
;
/**
* To reduce total package size of each coordinate systems, the modules `prepareCustom`
...
...
@@ -159,6 +163,7 @@ define(function (require) {
}
el
.
__customGraphicType
=
graphicType
;
el
.
name
=
elOption
.
name
;
return
el
;
}
...
...
@@ -443,13 +448,83 @@ define(function (require) {
!
el
&&
(
el
=
createEl
(
elOption
));
updateEl
(
el
,
dataIndex
,
elOption
,
animatableModel
,
data
,
isInit
);
elOptionType
===
'
group
'
&&
zrUtil
.
each
(
elOption
.
children
,
function
(
childOption
,
index
)
{
doCreateOrUpdate
(
el
.
childAt
(
index
),
dataIndex
,
childOption
,
animatableModel
,
el
,
data
);
});
if
(
elOptionType
===
'
group
'
)
{
var
oldChildren
=
el
.
children
()
||
[];
var
newChildren
=
elOption
.
children
||
[];
if
(
elOption
.
diffChildrenByName
)
{
// lower performance.
diffGroupChildren
({
oldChildren
:
oldChildren
,
newChildren
:
newChildren
,
dataIndex
:
dataIndex
,
animatableModel
:
animatableModel
,
group
:
el
,
data
:
data
});
}
else
{
// better performance.
var
index
=
0
;
for
(;
index
<
newChildren
.
length
;
index
++
)
{
doCreateOrUpdate
(
el
.
childAt
(
index
),
dataIndex
,
newChildren
[
index
],
animatableModel
,
el
,
data
);
}
for
(;
index
<
oldChildren
.
length
;
index
++
)
{
oldChildren
[
index
]
&&
el
.
remove
(
oldChildren
[
index
]);
}
}
}
group
.
add
(
el
);
return
el
;
}
function
diffGroupChildren
(
context
)
{
(
new
DataDiffer
(
context
.
oldChildren
,
context
.
newChildren
,
getKey
,
getKey
,
context
))
.
add
(
processAddUpdate
)
.
update
(
processAddUpdate
)
.
remove
(
processRemove
)
.
execute
();
}
function
getKey
(
item
,
idx
)
{
var
name
=
item
&&
item
.
name
;
return
name
!=
null
?
name
:
GROUP_DIFF_PREFIX
+
idx
;
}
function
processAddUpdate
(
newIndex
,
oldIndex
)
{
var
context
=
this
.
context
;
var
childOption
=
newIndex
!=
null
?
context
.
newChildren
[
newIndex
]
:
null
;
var
child
=
oldIndex
!=
null
?
context
.
oldChildren
[
oldIndex
]
:
null
;
doCreateOrUpdate
(
child
,
context
.
dataIndex
,
childOption
,
context
.
animatableModel
,
context
.
group
,
context
.
data
);
}
function
processRemove
(
oldIndex
)
{
var
context
=
this
.
context
;
var
child
=
context
.
oldChildren
[
oldIndex
];
child
&&
context
.
group
.
remove
(
child
);
}
});
src/data/DataDiffer.js
浏览文件 @
e83d9b07
...
...
@@ -5,12 +5,21 @@ define(function(require) {
return
item
;
}
function
DataDiffer
(
oldArr
,
newArr
,
oldKeyGetter
,
newKeyGetter
)
{
/**
* @param {Array} oldArr
* @param {Array} newArr
* @param {Function} oldKeyGetter
* @param {Function} newKeyGetter
* @param {Object} [context] Can be visited by this.context in callback.
*/
function
DataDiffer
(
oldArr
,
newArr
,
oldKeyGetter
,
newKeyGetter
,
context
)
{
this
.
_old
=
oldArr
;
this
.
_new
=
newArr
;
this
.
_oldKeyGetter
=
oldKeyGetter
||
defaultKeyGetter
;
this
.
_newKeyGetter
=
newKeyGetter
||
defaultKeyGetter
;
this
.
context
=
context
;
}
DataDiffer
.
prototype
=
{
...
...
@@ -44,8 +53,6 @@ define(function(require) {
execute
:
function
()
{
var
oldArr
=
this
.
_old
;
var
newArr
=
this
.
_new
;
var
oldKeyGetter
=
this
.
_oldKeyGetter
;
var
newKeyGetter
=
this
.
_newKeyGetter
;
var
oldDataIndexMap
=
{};
var
newDataIndexMap
=
{};
...
...
@@ -53,8 +60,8 @@ define(function(require) {
var
newDataKeyArr
=
[];
var
i
;
initIndexMap
(
oldArr
,
oldDataIndexMap
,
oldDataKeyArr
,
oldKeyGetter
);
initIndexMap
(
newArr
,
newDataIndexMap
,
newDataKeyArr
,
newKeyGetter
);
initIndexMap
(
oldArr
,
oldDataIndexMap
,
oldDataKeyArr
,
'
_oldKeyGetter
'
,
this
);
initIndexMap
(
newArr
,
newDataIndexMap
,
newDataKeyArr
,
'
_newKeyGetter
'
,
this
);
// Travel by inverted order to make sure order consistency
// when duplicate keys exists (consider newDataIndex.pop() below).
...
...
@@ -103,10 +110,10 @@ define(function(require) {
}
};
function
initIndexMap
(
arr
,
map
,
keyArr
,
keyGetter
)
{
function
initIndexMap
(
arr
,
map
,
keyArr
,
keyGetter
Name
,
dataDiffer
)
{
for
(
var
i
=
0
;
i
<
arr
.
length
;
i
++
)
{
// Add prefix to avoid conflict with Object.prototype.
var
key
=
'
_ec_
'
+
keyGetter
(
arr
[
i
],
i
);
var
key
=
'
_ec_
'
+
dataDiffer
[
keyGetterName
]
(
arr
[
i
],
i
);
var
existence
=
map
[
key
];
if
(
existence
==
null
)
{
keyArr
.
push
(
key
);
...
...
test/custom.html
浏览文件 @
e83d9b07
...
...
@@ -43,6 +43,8 @@
<div
class=
"chart"
id=
"text-image-update"
></div>
<h1>
Polar Block
</h1>
<div
class=
"chart"
id=
"polar-block"
></div>
<h1>
Diff group children by name (animation of number icon should be normal)
</h1>
<div
class=
"chart"
id=
"diff-children-by-name"
></div>
...
...
@@ -1281,5 +1283,118 @@
<script>
require
([
'
echarts
'
,
'
echarts/chart/custom
'
,
'
echarts/component/polar
'
,
'
echarts/component/legend
'
,
'
echarts/component/tooltip
'
,
'
echarts/component/visualMap
'
,
'
echarts/component/dataZoom
'
,
'
zrender/vml/vml
'
],
function
(
echarts
)
{
var
data
=
[
{
name
:
'
广州
'
,
value
:
50
},
{
name
:
'
深圳
'
,
value
:
72
},
{
name
:
'
珠海
'
,
value
:
30
},
{
name
:
'
佛山
'
,
value
:
38
},
{
name
:
'
杭州
'
,
value
:
42
},
{
name
:
'
舟山
'
,
value
:
32
},
{
name
:
'
宁波
'
,
value
:
52
}
];
var
option
=
{
tooltip
:
{
trigger
:
'
item
'
},
legend
:
{
data
:[
'
广州
'
,
'
深圳
'
,
'
珠海
'
,
'
佛山
'
,
'
杭州
'
,
'
舟山
'
,
'
宁波
'
],
top
:
0
,
left
:
'
center
'
},
xAxis
:
[
{
type
:
'
category
'
,
data
:
[
0
],
axisTick
:
{
show
:
false
},
axisLabel
:
{
show
:
false
}
},
],
yAxis
:
[
{
type
:
'
value
'
}
],
series
:
echarts
.
util
.
map
(
data
,
function
(
item
)
{
return
{
name
:
item
.
name
,
type
:
'
bar
'
,
label
:
{
normal
:
{
show
:
true
,
position
:
'
bottom
'
,
formatter
:
function
(
param
)
{
return
param
.
seriesName
;
}
}
},
data
:
[
item
.
value
]
}
}).
concat
([{
type
:
'
custom
'
,
renderItem
:
renderProvinceName
,
data
:
[
0
]
}])
};
function
renderProvinceName
(
param
,
api
)
{
var
currentSeriesIndices
=
api
.
currentSeriesIndices
();
currentSeriesIndices
.
pop
();
// remove custom series;
var
barLayout
=
api
.
barLayout
({
barGap
:
'
30%
'
,
barCategoryGap
:
'
20%
'
,
count
:
currentSeriesIndices
.
length
});
var
nameTexts
=
echarts
.
util
.
map
(
currentSeriesIndices
,
function
(
serIdx
,
index
)
{
var
point
=
api
.
coord
([
0
,
0
]);
point
[
0
]
+=
barLayout
[
index
].
offsetCenter
;
point
[
1
]
=
api
.
getHeight
()
-
20
;
return
{
position
:
point
,
name
:
serIdx
,
type
:
'
circle
'
,
shape
:
{
cx
:
0
,
cy
:
0
,
r
:
10
},
style
:
{
text
:
serIdx
,
fill
:
'
#333
'
,
textFill
:
'
#eee
'
,
stroke
:
null
}
};
});
return
{
type
:
'
group
'
,
diffChildrenByName
:
true
,
children
:
nameTexts
};
}
testHelper
.
createChart
(
echarts
,
'
diff-children-by-name
'
,
option
);
});
</script>
</body>
</html>
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录