Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
半栈学徒
incubator-echarts
提交
fead6883
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,发现更多精彩内容 >>
提交
fead6883
编写于
6月 02, 2020
作者:
P
pissang
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(label): support overlap configuration in labelLayout
上级
86d6c253
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
251 addition
and
22 deletion
+251
-22
src/chart/pie/labelLayout.ts
src/chart/pie/labelLayout.ts
+14
-9
src/label/LabelManager.ts
src/label/LabelManager.ts
+5
-2
test/label-layout.html
test/label-layout.html
+23
-1
test/pie-label.html
test/pie-label.html
+209
-10
未找到文件。
src/chart/pie/labelLayout.ts
浏览文件 @
fead6883
...
...
@@ -21,7 +21,7 @@
import
{
parsePercent
}
from
'
../../util/number
'
;
import
PieSeriesModel
,
{
PieSeriesOption
,
PieDataItemOption
}
from
'
./PieSeries
'
;
import
{
VectorArray
}
from
'
zrender/src/core/vector
'
;
import
{
HorizontalAlign
,
VerticalAlign
,
ZRRectLike
,
ZRTextAlign
}
from
'
../../util/types
'
;
import
{
HorizontalAlign
,
ZRRectLike
,
ZRTextAlign
}
from
'
../../util/types
'
;
import
{
Sector
,
Polyline
}
from
'
../../util/graphic
'
;
import
ZRText
from
'
zrender/src/graphic/Text
'
;
import
{
RectLike
}
from
'
zrender/src/core/BoundingRect
'
;
...
...
@@ -69,13 +69,14 @@ function adjustSingleSide(
function
shiftDown
(
start
:
number
,
end
:
number
,
delta
:
number
,
dir
:
number
)
{
for
(
let
j
=
start
;
j
<
end
;
j
++
)
{
if
(
list
[
j
].
y
+
delta
+
list
[
j
].
textRect
.
height
/
2
>
viewTop
+
viewHeight
)
{
break
;
}
list
[
j
].
y
+=
delta
;
adjusted
=
true
;
// const textHeight = list[j].textRect.height;
// if (list[j].y + textHeight / 2 > viewTop + viewHeight) {
// list[j].y = viewTop + viewHeight - textHeight / 2;
// }
if
(
j
>
start
&&
j
+
1
<
end
&&
list
[
j
+
1
].
y
>
list
[
j
].
y
+
list
[
j
].
textRect
.
height
...
...
@@ -90,13 +91,14 @@ function adjustSingleSide(
function
shiftUp
(
end
:
number
,
delta
:
number
)
{
for
(
let
j
=
end
;
j
>=
0
;
j
--
)
{
if
(
list
[
j
].
y
-
delta
-
list
[
j
].
textRect
.
height
/
2
<
viewTop
)
{
break
;
}
list
[
j
].
y
-=
delta
;
adjusted
=
true
;
const
textHeight
=
list
[
j
].
textRect
.
height
;
if
(
list
[
j
].
y
-
textHeight
/
2
<
viewTop
)
{
list
[
j
].
y
=
viewTop
+
textHeight
/
2
;
}
if
(
j
>
0
&&
list
[
j
].
y
>
list
[
j
-
1
].
y
+
list
[
j
-
1
].
textRect
.
height
)
{
...
...
@@ -173,6 +175,9 @@ function adjustSingleSide(
}
lastY
=
list
[
i
].
y
+
list
[
i
].
textRect
.
height
;
}
// PENDING:
// If data is sorted. Left top is usually the small data with a lower priority.
// So shift up and make sure the data on the bottom is always displayed well.
if
(
viewHeight
-
lastY
<
0
)
{
shiftUp
(
len
-
1
,
lastY
-
viewHeight
);
}
...
...
src/label/LabelManager.ts
浏览文件 @
fead6883
...
...
@@ -241,7 +241,7 @@ class LabelManager {
/**
* Ignore layouting if it's not specified anything.
*/
if
(
!
layoutOption
&&
!
keys
(
layoutOption
).
length
)
{
if
(
!
layoutOption
||
!
keys
(
layoutOption
).
length
)
{
return
;
}
...
...
@@ -384,7 +384,10 @@ class LabelManager {
const
labelGuide
=
labelItem
.
labelGuide
;
// TODO Callback to determine if this overlap should be handled?
if
(
overlapped
)
{
if
(
overlapped
&&
labelItem
.
layoutOption
&&
(
labelItem
.
layoutOption
as
LabelLayoutOption
).
overlap
===
'
hidden
'
)
{
label
.
hide
();
labelGuide
&&
labelGuide
.
hide
();
}
...
...
test/label-layout.html
浏览文件 @
fead6883
...
...
@@ -78,6 +78,9 @@ under the License.
label
:
{
show
:
true
},
labelLayout
:
{
overlap
:
'
hidden
'
},
data
:
[
13244
,
302
,
301
,
334
,
390
,
330
,
320
]
},
{
...
...
@@ -87,6 +90,9 @@ under the License.
label
:
{
show
:
true
},
labelLayout
:
{
overlap
:
'
hidden
'
},
data
:
[
120
,
132
,
101
,
134
,
90
,
230
,
210
]
},
{
...
...
@@ -96,6 +102,9 @@ under the License.
label
:
{
show
:
true
},
labelLayout
:
{
overlap
:
'
hidden
'
},
data
:
[
220
,
182
,
191
,
234
,
290
,
330
,
310
]
},
{
...
...
@@ -105,6 +114,9 @@ under the License.
label
:
{
show
:
true
},
labelLayout
:
{
overlap
:
'
hidden
'
},
data
:
[
150
,
212
,
201
,
154
,
190
,
330
,
410
]
},
{
...
...
@@ -114,6 +126,9 @@ under the License.
label
:
{
show
:
true
},
labelLayout
:
{
overlap
:
'
hidden
'
},
data
:
[
820
,
832
,
901
,
934
,
1290
,
1330
,
1320
]
}
]
...
...
@@ -165,6 +180,9 @@ under the License.
show
:
true
,
position
:
'
top
'
},
labelLayout
:
{
overlap
:
'
hidden
'
},
itemStyle
:
{
color
:
'
rgb(255, 70, 131)
'
},
...
...
@@ -233,6 +251,10 @@ under the License.
position
:
'
right
'
},
labelLayout
:
{
overlap
:
'
hidden
'
},
emphasis
:
{
label
:
{
show
:
true
...
...
@@ -287,7 +309,7 @@ under the License.
emphasis
:
{
label
:
{
show
:
true
,
fontSize
:
'
30
'
,
fontSize
:
30
,
fontWeight
:
'
bold
'
}
},
...
...
test/pie-label.html
浏览文件 @
fead6883
...
...
@@ -45,6 +45,8 @@ under the License.
<div
id=
"main2"
></div>
<div
id=
"main3"
></div>
<div
id=
"main4"
></div>
<div
id=
"main5"
></div>
<div
id=
"main6"
></div>
<script>
...
...
@@ -114,20 +116,20 @@ under the License.
'
echarts
'
/*, 'map/js/china' */
],
function
(
echarts
)
{
var
count
=
6
0
;
var
count
=
8
0
;
var
data
=
[];
for
(
var
i
=
0
;
i
<
count
;
i
++
)
{
var
label
=
i
===
30
?
{
position
:
'
center
'
,
fontSize
:
30
,
color
:
'
#fff
'
}
:
null
;
//
var label = i === 30
//
? {
//
position: 'center',
//
fontSize: 30,
//
color: '#fff'
//
}
//
: null;
data
.
push
({
name
:
i
+
'
A
'
,
name
:
i
+
'
Something really Random
'
,
value
:
Math
.
random
(),
label
:
label
//
label: label
});
}
...
...
@@ -135,6 +137,11 @@ under the License.
series
:
[{
type
:
'
pie
'
,
radius
:
'
50%
'
,
labelLine
:
{
minTurnAngle
:
110
,
length2
:
10
,
smooth
:
true
},
data
:
data
}]
};
...
...
@@ -145,6 +152,7 @@ under the License.
});
});
</script>
...
...
@@ -446,5 +454,196 @@ under the License.
<script>
require
([
'
echarts
'
/*, 'map/js/china' */
],
function
(
echarts
)
{
const
data
=
[{
name
:
'
Something really Random(1)
'
,
value
:
1
},
{
name
:
'
Something really Random(2)
'
,
value
:
2
},
{
name
:
'
Something really Random(3)
'
,
value
:
3
},
{
name
:
'
Something really Random(4)
'
,
value
:
2
},
{
name
:
'
Something really Random(5)
'
,
value
:
3
}];
for
(
let
i
=
0
;
i
<
5
;
i
++
)
{
data
.
push
({
name
:
'
Something really Random(
'
+
i
+
'
)
'
,
value
:
Math
.
random
()
*
0.1
+
0.1
});
}
data
.
push
({
name
:
'
Something really Random
'
,
value
:
2
});
for
(
let
i
=
0
;
i
<
5
;
i
++
)
{
data
.
push
({
name
:
'
Something really Random(
'
+
i
+
'
)
'
,
value
:
Math
.
random
()
*
0.1
+
0.1
});
}
var
option
=
{
series
:
[{
type
:
'
pie
'
,
radius
:
'
50%
'
,
data
:
data
}]
};
var
chart
=
testHelper
.
create
(
echarts
,
'
main5
'
,
{
title
:
'
Layout Case 1
'
,
option
:
option
});
});
</script>
<script>
require
([
'
echarts
'
/*, 'map/js/china' */
],
function
(
echarts
)
{
const
data
=
[{
"
name
"
:
"
United States
"
,
"
value
"
:
[
213242
,
22.86439111423725
,
"
United States
"
]
},
{
"
name
"
:
"
Italy
"
,
"
value
"
:
[
110574
,
11.856047040759652
,
"
Italy
"
]
},
{
"
name
"
:
"
Spain
"
,
"
value
"
:
[
104118
,
11.163817043697554
,
"
Spain
"
]
},
{
"
name
"
:
"
China
"
,
"
value
"
:
[
82361
,
8.830971931231625
,
"
China
"
]
},
{
"
name
"
:
"
Germany
"
,
"
value
"
:
[
77872
,
8.349649059978255
,
"
Germany
"
]
},
{
"
name
"
:
"
France
"
,
"
value
"
:
[
57749
,
6.192005901539504
,
"
France
"
]
},
{
"
name
"
:
"
Iran
"
,
"
value
"
:
[
47593
,
5.103051773571311
,
"
Iran
"
]
},
{
"
name
"
:
"
United Kingdom
"
,
"
value
"
:
[
29865
,
3.202207072840695
,
"
United Kingdom
"
]
},
{
"
name
"
:
"
Switzerland
"
,
"
value
"
:
[
17768
,
1.905133610253925
,
"
Switzerland
"
]
},
{
"
name
"
:
"
Turkey
"
,
"
value
"
:
[
15679
,
1.6811453103991045
,
"
Turkey
"
]
},
{
"
name
"
:
"
Belgium
"
,
"
value
"
:
[
13964
,
1.4972583145872247
,
"
Belgium
"
]
},
{
"
name
"
:
"
Netherlands
"
,
"
value
"
:
[
13696
,
1.4685226207810533
,
"
Netherlands
"
]
},
{
"
name
"
:
"
Austria
"
,
"
value
"
:
[
10711
,
1.1484627476041078
,
"
Austria
"
]
},
{
"
name
"
:
"
Korea, South
"
,
"
value
"
:
[
9887
,
1.0601112114239395
,
"
Korea, South
"
]
},
{
"
name
"
:
"
Canada
"
,
"
value
"
:
[
9560
,
1.0250493760708872
,
"
Canada
"
]
},
{
"
name
"
:
"
Portugal
"
,
"
value
"
:
[
8251
,
0.8846948119205952
,
"
Portugal
"
]
},
{
"
name
"
:
"
Brazil
"
,
"
value
"
:
[
6836
,
0.7329746375335339
,
"
Brazil
"
]
},
{
"
name
"
:
"
Israel
"
,
"
value
"
:
[
6092
,
0.6532009203999837
,
"
Israel
"
]
},
{
"
name
"
:
"
Sweden
"
,
"
value
"
:
[
4947
,
0.5304308852952593
,
"
Sweden
"
]
},
{
"
name
"
:
"
Norway
"
,
"
value
"
:
[
4863
,
0.52142417529631
,
"
Norway
"
]
},
{
"
name
"
:
"
Australia
"
,
"
value
"
:
[
4862
,
0.5213169525582273
,
"
Australia
"
]
},
{
"
name
"
:
"
Czechia
"
,
"
value
"
:
[
3508
,
0.37613736519421254
,
"
Czechia
"
]
},
{
"
name
"
:
"
Ireland
"
,
"
value
"
:
[
3447
,
0.3695967781711661
,
"
Ireland
"
]
},
{
"
name
"
:
"
Denmark
"
,
"
value
"
:
[
3290
,
0.35276280829217765
,
"
Denmark
"
]
},
{
"
name
"
:
"
Chile
"
,
"
value
"
:
[
3031
,
0.3249921191287509
,
"
Chile
"
]
},
{
"
name
"
:
"
Malaysia
"
,
"
value
"
:
[
2908
,
0.31180372234457526
,
"
Malaysia
"
]
},
{
"
name
"
:
"
Russia
"
,
"
value
"
:
[
2777
,
0.2977575436557378
,
"
Russia
"
]
},
{
"
name
"
:
"
Ecuador
"
,
"
value
"
:
[
2748
,
0.29464808425133865
,
"
Ecuador
"
]
},
{
"
name
"
:
"
Poland
"
,
"
value
"
:
[
2554
,
0.2738468730632893
,
"
Poland
"
]
},
{
"
name
"
:
"
Romania
"
,
"
value
"
:
[
2460
,
0.2637679356835128
,
"
Romania
"
]
}];
var
option
=
{
backgroundColor
:
'
#333
'
,
visualMap
:
{
dimension
:
0
,
left
:
10
,
itemWidth
:
12
,
min
:
data
[
29
].
value
[
0
],
max
:
data
[
0
].
value
[
0
],
text
:
[
'
High
'
,
'
Low
'
],
textStyle
:
{
color
:
'
#ddd
'
},
inRange
:
{
color
:
[
'
lightskyblue
'
,
'
yellow
'
,
'
orangered
'
,
'
red
'
]
}
},
series
:
[{
type
:
'
pie
'
,
radius
:
'
50%
'
,
data
:
data
,
roseType
:
'
radius
'
,
radius
:
[
'
30%
'
,
'
70%
'
],
label
:
{
textBorderColor
:
'
none
'
}
}]
};
var
chart
=
testHelper
.
create
(
echarts
,
'
main6
'
,
{
title
:
'
Case from https://gallery.echartsjs.com/editor.html?c=xpm1ZhhOCG
'
,
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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录