Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
半栈学徒
incubator-echarts
提交
c344d13b
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,发现更多精彩内容 >>
提交
c344d13b
编写于
6月 03, 2020
作者:
P
pissang
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: add draggable in labelLayout
上级
dae5a2b4
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
103 addition
and
12 deletion
+103
-12
src/label/LabelManager.ts
src/label/LabelManager.ts
+35
-8
src/util/types.ts
src/util/types.ts
+6
-0
test/labelLine.html
test/labelLine.html
+6
-4
test/pie-label.html
test/pie-label.html
+56
-0
未找到文件。
src/label/LabelManager.ts
浏览文件 @
c344d13b
...
...
@@ -49,6 +49,7 @@ import SeriesModel from '../model/Series';
import
{
makeInner
}
from
'
../util/model
'
;
import
{
retrieve2
,
each
,
keys
}
from
'
zrender/src/core/util
'
;
import
{
PathStyleProps
}
from
'
zrender/src/graphic/Path
'
;
import
Model
from
'
../model/Model
'
;
interface
DisplayedLabelItem
{
label
:
ZRText
...
...
@@ -65,6 +66,7 @@ interface LabelLayoutDesc {
seriesModel
:
SeriesModel
dataIndex
:
number
dataType
:
string
layoutOption
:
LabelLayoutOptionCallback
|
LabelLayoutOption
...
...
@@ -107,6 +109,7 @@ function prepareLayoutCallbackParams(labelItem: LabelLayoutDesc): LabelLayoutOpt
const
label
=
labelItem
.
label
;
return
{
dataIndex
:
labelItem
.
dataIndex
,
dataType
:
labelItem
.
dataType
,
seriesIndex
:
labelItem
.
seriesModel
.
seriesIndex
,
text
:
labelItem
.
label
.
style
.
text
,
rect
:
labelItem
.
hostRect
,
...
...
@@ -136,6 +139,11 @@ const labelLineAnimationStore = makeInner<{
}
},
Polyline
>
();
type
LabelLineOptionMixin
=
{
labelLine
:
LabelLineOption
,
emphasis
:
{
labelLine
:
LabelLineOption
}
};
class
LabelManager
{
private
_labelList
:
LabelLayoutDesc
[]
=
[];
...
...
@@ -153,6 +161,7 @@ class LabelManager {
*/
private
_addLabel
(
dataIndex
:
number
,
dataType
:
string
,
seriesModel
:
SeriesModel
,
label
:
ZRText
,
layoutOption
:
LabelLayoutDesc
[
'
layoutOption
'
]
...
...
@@ -192,6 +201,7 @@ class LabelManager {
seriesModel
,
dataIndex
,
dataType
,
layoutOption
,
...
...
@@ -253,10 +263,11 @@ class LabelManager {
// Only support label being hosted on graphic elements.
const
textEl
=
child
.
getTextContent
();
const
dataIndex
=
getECData
(
child
).
dataIndex
;
const
ecData
=
getECData
(
child
);
const
dataIndex
=
ecData
.
dataIndex
;
// Can only attach the text on the element with dataIndex
if
(
textEl
&&
dataIndex
!=
null
)
{
this
.
_addLabel
(
dataIndex
,
seriesModel
,
textEl
,
layoutOption
);
this
.
_addLabel
(
dataIndex
,
ecData
.
dataType
,
seriesModel
,
textEl
,
layoutOption
);
}
});
}
...
...
@@ -264,6 +275,12 @@ class LabelManager {
updateLayoutConfig
(
api
:
ExtensionAPI
)
{
const
width
=
api
.
getWidth
();
const
height
=
api
.
getHeight
();
function
createDragHandler
(
el
:
Element
,
labelLineModel
:
Model
)
{
return
function
()
{
updateLabelLinePoints
(
el
,
labelLineModel
);
};
}
for
(
let
i
=
0
;
i
<
this
.
_labelList
.
length
;
i
++
)
{
const
labelItem
=
this
.
_labelList
[
i
];
const
label
=
labelItem
.
label
;
...
...
@@ -324,6 +341,21 @@ class LabelManager {
labelItem
.
overlap
=
layoutOption
.
overlap
;
labelItem
.
overlapMargin
=
layoutOption
.
overlapMargin
;
if
(
layoutOption
.
draggable
)
{
label
.
draggable
=
true
;
label
.
cursor
=
'
move
'
;
if
(
hostEl
)
{
const
data
=
labelItem
.
seriesModel
.
getData
(
labelItem
.
dataType
);
const
itemModel
=
data
.
getItemModel
<
LabelLineOptionMixin
>
(
labelItem
.
dataIndex
);
label
.
on
(
'
drag
'
,
createDragHandler
(
hostEl
,
itemModel
.
getModel
(
'
labelLine
'
)));
}
}
else
{
// TODO Other drag functions?
label
.
off
(
'
drag
'
);
label
.
cursor
=
'
default
'
;
}
}
}
...
...
@@ -406,7 +438,6 @@ class LabelManager {
transform
});
}
}
}
...
...
@@ -444,10 +475,7 @@ class LabelManager {
if
(
textEl
&&
dataIndex
!=
null
)
{
const
data
=
seriesModel
.
getData
(
ecData
.
dataType
);
const
itemModel
=
data
.
getItemModel
<
{
labelLine
:
LabelLineOption
,
emphasis
:
{
labelLine
:
LabelLineOption
}
}
>
(
dataIndex
);
const
itemModel
=
data
.
getItemModel
<
LabelLineOptionMixin
>
(
dataIndex
);
const
defaultStyle
:
PathStyleProps
=
{};
const
visualStyle
=
data
.
getItemVisual
(
dataIndex
,
'
style
'
);
...
...
@@ -462,7 +490,6 @@ class LabelManager {
emphasis
:
itemModel
.
getModel
([
'
emphasis
'
,
'
labelLine
'
])
},
defaultStyle
);
updateLabelLinePoints
(
el
,
labelLineModel
);
}
}
...
...
src/util/types.ts
浏览文件 @
c344d13b
...
...
@@ -811,6 +811,7 @@ export interface LabelLineOption {
export
interface
LabelLayoutOptionCallbackParams
{
dataIndex
:
number
,
dataType
:
string
,
seriesIndex
:
number
,
text
:
string
align
:
ZRTextAlign
...
...
@@ -831,6 +832,11 @@ export interface LabelLayoutOption {
* Minimal margin between two labels which will be considered as overlapped.
*/
overlapMargin
?:
number
/**
* If label is draggable.
*/
draggable
?:
boolean
/**
* Can be absolute px number or percent string.
*/
...
...
test/labelLine.html
浏览文件 @
c344d13b
...
...
@@ -67,11 +67,13 @@ under the License.
},
labelLayout
:
{
y
:
20
,
draggable
:
true
,
align
:
'
center
'
,
overlap
:
'
hidden
'
},
labelLine
:
{
show
:
true
show
:
true
,
length2
:
10
},
label
:
{
show
:
true
,
...
...
@@ -89,11 +91,13 @@ under the License.
},
labelLayout
:
{
y
:
40
,
draggable
:
true
,
align
:
'
center
'
,
overlap
:
'
hidden
'
},
labelLine
:
{
show
:
true
show
:
true
,
length2
:
10
},
label
:
{
show
:
true
,
...
...
@@ -107,8 +111,6 @@ under the License.
var
chart
=
testHelper
.
create
(
echarts
,
'
main0
'
,
{
title
:
[
'
Test Case Description of main0
'
,
'
(Muliple lines and **emphasis** are supported in description)
'
],
option
:
option
// height: 300,
...
...
test/pie-label.html
浏览文件 @
c344d13b
...
...
@@ -47,6 +47,7 @@ under the License.
<div
id=
"main4"
></div>
<div
id=
"main5"
></div>
<div
id=
"main6"
></div>
<div
id=
"main7"
></div>
<script>
...
...
@@ -645,5 +646,60 @@ under the License.
</script>
<script>
require
([
'
echarts
'
/*, 'map/js/china' */
],
function
(
echarts
)
{
const
option
=
{
backgroundColor
:
'
#2c343c
'
,
visualMap
:
{
show
:
false
,
min
:
80
,
max
:
600
,
inRange
:
{
colorLightness
:
[
0
,
1
]
}
},
series
:
[
{
name
:
'
访问来源
'
,
type
:
'
pie
'
,
radius
:
'
55%
'
,
data
:[
{
value
:
235
,
name
:
'
视频广告
'
},
{
value
:
274
,
name
:
'
联盟广告
'
},
{
value
:
310
,
name
:
'
邮件营销
'
},
{
value
:
335
,
name
:
'
直接访问
'
},
{
value
:
400
,
name
:
'
搜索引擎
'
}
],
roseType
:
'
angle
'
,
label
:
{
textStyle
:
{
color
:
'
rgba(255, 255, 255, 0.3)
'
}
},
labelLine
:
{
smooth
:
true
,
minTurnAngle
:
120
,
lineStyle
:
{
color
:
'
rgba(255, 255, 255, 0.3)
'
}
},
itemStyle
:
{
color
:
'
#c23531
'
,
shadowBlur
:
200
,
shadowColor
:
'
rgba(0, 0, 0, 0.5)
'
}
}
]
};
var
chart
=
testHelper
.
create
(
echarts
,
'
main7
'
,
{
title
:
'
Case from https://echarts.apache.org/examples/zh/editor.html?c=doc-example/tutorial-styling-step5
'
,
height
:
300
,
option
:
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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录