Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
x649585723
incubator-echarts
提交
849b8038
I
incubator-echarts
项目概览
x649585723
/
incubator-echarts
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
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,体验更适合开发者的 AI 搜索 >>
提交
849b8038
编写于
11月 26, 2019
作者:
O
Ovilia
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(pie): two new alignTo layouts
上级
b6732792
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
409 addition
and
31 deletion
+409
-31
src/chart/pie/PieSeries.js
src/chart/pie/PieSeries.js
+14
-1
src/chart/pie/PieView.js
src/chart/pie/PieView.js
+1
-1
src/chart/pie/labelLayout.js
src/chart/pie/labelLayout.js
+112
-22
src/chart/pie/pieLayout.js
src/chart/pie/pieLayout.js
+20
-7
test/pie-alignTo.html
test/pie-alignTo.html
+262
-0
未找到文件。
src/chart/pie/PieSeries.js
浏览文件 @
849b8038
...
...
@@ -142,12 +142,25 @@ var PieSeries = echarts.extendSeriesModel({
// cursor: null,
left
:
0
,
top
:
0
,
right
:
0
,
bottom
:
0
,
width
:
null
,
height
:
null
,
label
:
{
// If rotate around circle
rotate
:
false
,
show
:
true
,
// 'outer', 'inside', 'center'
position
:
'
outer
'
position
:
'
outer
'
,
// 'none', 'labelLine', 'edge'. Works only when position is 'outer'
alignTo
:
'
none
'
,
// Closest distance between label and chart edge.
// Works only position is 'outer' and alignTo is 'labelLine' or 'edge'.
margin
:
'
25%
'
,
padding
:
5
,
// formatter: 标签文本格式器,同Tooltip.formatter,不支持异步回调
// 默认使用全局文本样式,详见TEXTSTYLE
// distance: 当position为inner时有效,为label位置到圆心的距离与圆半径(环状图为内外半径和)的比例系数
...
...
src/chart/pie/PieView.js
浏览文件 @
849b8038
...
...
@@ -273,7 +273,7 @@ piePieceProto._updateLabel = function (data, idx, withAnimation) {
{
labelFetcher
:
data
.
hostModel
,
labelDataIndex
:
idx
,
defaultText
:
data
.
getName
(
idx
)
,
defaultText
:
labelLayout
.
text
,
autoColor
:
visualColor
,
useInsideStyle
:
!!
labelLayout
.
inside
},
...
...
src/chart/pie/labelLayout.js
浏览文件 @
849b8038
...
...
@@ -20,16 +20,21 @@
// FIXME emphasis label position is not same with normal label position
import
*
as
textContain
from
'
zrender/src/contain/text
'
;
import
{
parsePercent
}
from
'
../../util/number
'
;
var
RADIAN
=
Math
.
PI
/
180
;
function
adjustSingleSide
(
list
,
cx
,
cy
,
r
,
dir
,
viewWidth
,
viewHeight
)
{
function
adjustSingleSide
(
list
,
cx
,
cy
,
r
,
dir
,
viewWidth
,
viewHeight
,
viewLeft
,
viewTop
,
farthestX
)
{
list
.
sort
(
function
(
a
,
b
)
{
return
a
.
y
-
b
.
y
;
});
function
shiftDown
(
start
,
end
,
delta
,
dir
)
{
for
(
var
j
=
start
;
j
<
end
;
j
++
)
{
if
(
list
[
j
].
y
+
delta
>
viewTop
+
viewHeight
)
{
break
;
}
list
[
j
].
y
+=
delta
;
if
(
j
>
start
&&
j
+
1
<
end
...
...
@@ -45,6 +50,10 @@ function adjustSingleSide(list, cx, cy, r, dir, viewWidth, viewHeight) {
function
shiftUp
(
end
,
delta
)
{
for
(
var
j
=
end
;
j
>=
0
;
j
--
)
{
if
(
list
[
j
].
y
-
delta
<
viewTop
)
{
break
;
}
list
[
j
].
y
-=
delta
;
if
(
j
>
0
&&
list
[
j
].
y
>
list
[
j
-
1
].
y
+
list
[
j
-
1
].
height
...
...
@@ -64,6 +73,10 @@ function adjustSingleSide(list, cx, cy, r, dir, viewWidth, viewHeight) {
:
0
;
// up
for
(
var
i
=
0
,
l
=
list
.
length
;
i
<
l
;
i
++
)
{
if
(
list
[
i
].
labelAlignTo
!==
'
none
'
)
{
continue
;
}
var
deltaY
=
Math
.
abs
(
list
[
i
].
y
-
cy
);
var
length
=
list
[
i
].
len
;
var
length2
=
list
[
i
].
len2
;
...
...
@@ -93,6 +106,12 @@ function adjustSingleSide(list, cx, cy, r, dir, viewWidth, viewHeight) {
var
upList
=
[];
var
downList
=
[];
for
(
var
i
=
0
;
i
<
len
;
i
++
)
{
if
(
list
[
i
].
position
===
'
outer
'
&&
list
[
i
].
labelAlignTo
===
'
labelLine
'
)
{
var
dx
=
list
[
i
].
x
-
farthestX
;
list
[
i
].
linePoints
[
1
][
0
]
+=
dx
;
list
[
i
].
x
=
farthestX
;
}
delta
=
list
[
i
].
y
-
lastY
;
if
(
delta
<
0
)
{
shiftDown
(
i
,
len
,
-
delta
,
dir
);
...
...
@@ -114,39 +133,87 @@ function adjustSingleSide(list, cx, cy, r, dir, viewWidth, viewHeight) {
changeX
(
downList
,
true
,
cx
,
cy
,
r
,
dir
);
}
function
avoidOverlap
(
labelLayoutList
,
cx
,
cy
,
r
,
viewWidth
,
viewHeight
)
{
function
avoidOverlap
(
labelLayoutList
,
cx
,
cy
,
r
,
viewWidth
,
viewHeight
,
viewLeft
,
viewTop
)
{
var
leftList
=
[];
var
rightList
=
[];
var
leftmostX
=
Number
.
MAX_VALUE
;
var
rightmostX
=
-
Number
.
MAX_VALUE
;
for
(
var
i
=
0
;
i
<
labelLayoutList
.
length
;
i
++
)
{
if
(
isPositionCenter
(
labelLayoutList
[
i
]))
{
continue
;
}
if
(
labelLayoutList
[
i
].
x
<
cx
)
{
leftmostX
=
Math
.
min
(
leftmostX
,
labelLayoutList
[
i
].
x
);
leftList
.
push
(
labelLayoutList
[
i
]);
}
else
{
rightmostX
=
Math
.
max
(
rightmostX
,
labelLayoutList
[
i
].
x
);
rightList
.
push
(
labelLayoutList
[
i
]);
}
}
adjustSingleSide
(
rightList
,
cx
,
cy
,
r
,
1
,
viewWidth
,
viewHeight
);
adjustSingleSide
(
leftList
,
cx
,
cy
,
r
,
-
1
,
viewWidth
,
viewHeight
);
adjustSingleSide
(
rightList
,
cx
,
cy
,
r
,
1
,
viewWidth
,
viewHeight
,
viewLeft
,
viewTop
,
rightmostX
);
adjustSingleSide
(
leftList
,
cx
,
cy
,
r
,
-
1
,
viewWidth
,
viewHeight
,
viewLeft
,
viewTop
,
leftmostX
);
for
(
var
i
=
0
;
i
<
labelLayoutList
.
length
;
i
++
)
{
if
(
isPositionCenter
(
labelLayoutList
[
i
]))
{
var
layout
=
labelLayoutList
[
i
];
if
(
isPositionCenter
(
layout
))
{
continue
;
}
var
linePoints
=
labelLayoutList
[
i
].
linePoints
;
var
linePoints
=
layout
.
linePoints
;
if
(
linePoints
)
{
var
isAlignToEdge
=
layout
.
labelAlignTo
===
'
edge
'
;
var
realTextWidth
=
layout
.
textRect
.
width
;
var
targetTextWidth
;
if
(
isAlignToEdge
)
{
// debugger;
// targetTextWidth = Math.abs(layout.x - linePoints[2][0]) - layout.labelPadding;
if
(
layout
.
x
<
cx
)
{
targetTextWidth
=
linePoints
[
2
][
0
]
-
layout
.
labelPadding
-
viewLeft
-
layout
.
labelMargin
;
}
else
{
targetTextWidth
=
viewLeft
+
viewWidth
-
layout
.
labelMargin
-
linePoints
[
2
][
0
]
-
layout
.
labelPadding
;
}
}
else
{
if
(
layout
.
x
<
cx
)
{
targetTextWidth
=
layout
.
x
-
viewLeft
-
layout
.
labelMargin
;
}
else
{
targetTextWidth
=
viewLeft
+
viewWidth
-
layout
.
x
-
layout
.
labelMargin
;
}
}
if
(
targetTextWidth
<
layout
.
textRect
.
width
)
{
layout
.
text
=
textContain
.
truncateText
(
layout
.
text
,
targetTextWidth
,
layout
.
font
);
if
(
layout
.
labelAlignTo
===
'
edge
'
)
{
realTextWidth
=
textContain
.
getWidth
(
layout
.
text
,
layout
.
font
);
}
}
var
dist
=
linePoints
[
1
][
0
]
-
linePoints
[
2
][
0
];
if
(
labelLayoutList
[
i
].
x
<
cx
)
{
linePoints
[
2
][
0
]
=
labelLayoutList
[
i
].
x
+
3
;
if
(
isAlignToEdge
)
{
if
(
layout
.
x
<
cx
)
{
linePoints
[
2
][
0
]
=
viewLeft
+
layout
.
labelMargin
+
realTextWidth
+
layout
.
labelPadding
;
}
else
{
linePoints
[
2
][
0
]
=
viewLeft
+
viewWidth
-
layout
.
labelMargin
-
realTextWidth
-
layout
.
labelPadding
;
}
}
else
{
linePoints
[
2
][
0
]
=
labelLayoutList
[
i
].
x
-
3
;
if
(
layout
.
x
<
cx
)
{
linePoints
[
2
][
0
]
=
layout
.
x
+
layout
.
labelPadding
;
layout
.
x
+=
layout
.
labelPadding
;
}
else
{
linePoints
[
2
][
0
]
=
layout
.
x
-
layout
.
labelPadding
;
layout
.
x
-=
layout
.
labelPadding
;
}
linePoints
[
1
][
0
]
=
linePoints
[
2
][
0
]
+
dist
;
}
linePoints
[
1
][
1
]
=
linePoints
[
2
][
1
]
=
labelLayoutList
[
i
].
y
;
linePoints
[
1
][
0
]
=
linePoints
[
2
][
0
]
+
dist
;
linePoints
[
1
][
1
]
=
linePoints
[
2
][
1
]
=
layout
.
y
;
}
}
}
...
...
@@ -156,7 +223,7 @@ function isPositionCenter(layout) {
return
layout
.
position
===
'
center
'
;
}
export
default
function
(
seriesModel
,
r
,
viewWidth
,
viewHeight
,
sum
)
{
export
default
function
(
seriesModel
,
r
,
viewWidth
,
viewHeight
,
viewLeft
,
viewTop
)
{
var
data
=
seriesModel
.
getData
();
var
labelLayoutList
=
[];
var
cx
;
...
...
@@ -171,10 +238,16 @@ export default function (seriesModel, r, viewWidth, viewHeight, sum) {
var
labelModel
=
itemModel
.
getModel
(
'
label
'
);
// Use position in normal or emphasis
var
labelPosition
=
labelModel
.
get
(
'
position
'
)
||
itemModel
.
get
(
'
emphasis.label.position
'
);
var
labelPadding
=
labelModel
.
get
(
'
padding
'
);
var
labelAlignTo
=
labelModel
.
get
(
'
alignTo
'
);
var
labelMargin
=
parsePercent
(
labelModel
.
get
(
'
margin
'
),
viewWidth
);
var
font
=
labelModel
.
getFont
();
var
labelLineModel
=
itemModel
.
getModel
(
'
labelLine
'
);
var
labelLineLen
=
labelLineModel
.
get
(
'
length
'
);
labelLineLen
=
parsePercent
(
labelLineLen
,
viewWidth
);
var
labelLineLen2
=
labelLineModel
.
get
(
'
length2
'
);
labelLineLen2
=
parsePercent
(
labelLineLen2
,
viewWidth
);
if
(
layout
.
angle
<
minShowLabelRadian
)
{
return
;
...
...
@@ -192,6 +265,12 @@ export default function (seriesModel, r, viewWidth, viewHeight, sum) {
cx
=
layout
.
cx
;
cy
=
layout
.
cy
;
var
text
=
seriesModel
.
getFormattedLabel
(
idx
,
'
normal
'
)
||
data
.
getName
(
idx
);
var
textRect
=
textContain
.
getBoundingRect
(
text
,
font
,
textAlign
,
'
top
'
);
var
isLabelInside
=
labelPosition
===
'
inside
'
||
labelPosition
===
'
inner
'
;
if
(
labelPosition
===
'
center
'
)
{
textX
=
layout
.
cx
;
...
...
@@ -212,14 +291,23 @@ export default function (seriesModel, r, viewWidth, viewHeight, sum) {
var
x3
=
x2
+
((
dx
<
0
?
-
1
:
1
)
*
labelLineLen2
);
var
y3
=
y2
;
textX
=
x3
+
(
dx
<
0
?
-
5
:
5
);
if
(
labelAlignTo
===
'
edge
'
)
{
// Adjust textX because text align of edge is opposite
textX
=
dx
<
0
?
viewLeft
+
labelMargin
-
labelPadding
:
viewLeft
+
viewWidth
-
labelMargin
+
labelPadding
;
}
else
{
textX
=
x3
+
(
dx
<
0
?
-
labelPadding
:
labelPadding
);
}
textY
=
y3
;
linePoints
=
[[
x1
,
y1
],
[
x2
,
y2
],
[
x3
,
y3
]];
}
textAlign
=
isLabelInside
?
'
center
'
:
(
dx
>
0
?
'
left
'
:
'
right
'
);
textAlign
=
isLabelInside
?
'
center
'
:
(
labelAlignTo
===
'
edge
'
?
(
dx
>
0
?
'
right
'
:
'
left
'
)
:
(
dx
>
0
?
'
left
'
:
'
right
'
));
}
var
font
=
labelModel
.
getFont
();
var
labelRotate
;
var
rotate
=
labelModel
.
get
(
'
rotate
'
);
...
...
@@ -231,11 +319,7 @@ export default function (seriesModel, r, viewWidth, viewHeight, sum) {
?
(
dx
<
0
?
-
midAngle
+
Math
.
PI
:
-
midAngle
)
:
0
;
}
var
text
=
seriesModel
.
getFormattedLabel
(
idx
,
'
normal
'
)
||
data
.
getName
(
idx
);
var
textRect
=
textContain
.
getBoundingRect
(
text
,
font
,
textAlign
,
'
top
'
);
hasLabelRotate
=
!!
labelRotate
;
layout
.
label
=
{
x
:
textX
,
...
...
@@ -248,7 +332,13 @@ export default function (seriesModel, r, viewWidth, viewHeight, sum) {
textAlign
:
textAlign
,
verticalAlign
:
'
middle
'
,
rotation
:
labelRotate
,
inside
:
isLabelInside
inside
:
isLabelInside
,
labelPadding
:
labelPadding
,
labelAlignTo
:
labelAlignTo
,
labelMargin
:
labelMargin
,
textRect
:
textRect
,
text
:
text
,
font
:
font
};
// Not layout the inside label
...
...
@@ -257,6 +347,6 @@ export default function (seriesModel, r, viewWidth, viewHeight, sum) {
}
});
if
(
!
hasLabelRotate
&&
seriesModel
.
get
(
'
avoidLabelOverlap
'
))
{
avoidOverlap
(
labelLayoutList
,
cx
,
cy
,
r
,
viewWidth
,
viewHeight
);
avoidOverlap
(
labelLayoutList
,
cx
,
cy
,
r
,
viewWidth
,
viewHeight
,
viewLeft
,
viewTop
);
}
}
\ No newline at end of file
src/chart/pie/pieLayout.js
浏览文件 @
849b8038
...
...
@@ -19,16 +19,27 @@
import
{
parsePercent
,
linearMap
}
from
'
../../util/number
'
;
import
*
as
layout
from
'
../../util/layout
'
;
import
labelLayout
from
'
./labelLayout
'
;
import
*
as
zrUtil
from
'
zrender/src/core/util
'
;
var
PI2
=
Math
.
PI
*
2
;
var
RADIAN
=
Math
.
PI
/
180
;
export
function
getViewRect
(
seriesModel
,
api
)
{
return
layout
.
getLayoutRect
(
seriesModel
.
getBoxLayoutParams
(),
{
width
:
api
.
getWidth
(),
height
:
api
.
getHeight
()
}
);
}
export
default
function
(
seriesType
,
ecModel
,
api
,
payload
)
{
ecModel
.
eachSeriesByType
(
seriesType
,
function
(
seriesModel
)
{
var
data
=
seriesModel
.
getData
();
var
valueDim
=
data
.
mapDimension
(
'
value
'
);
var
viewRect
=
getViewRect
(
seriesModel
,
api
);
var
center
=
seriesModel
.
get
(
'
center
'
);
var
radius
=
seriesModel
.
get
(
'
radius
'
);
...
...
@@ -40,11 +51,11 @@ export default function (seriesType, ecModel, api, payload) {
center
=
[
center
,
center
];
}
var
width
=
api
.
getWidth
(
);
var
height
=
api
.
getHeight
(
);
var
width
=
parsePercent
(
viewRect
.
width
,
api
.
getWidth
()
);
var
height
=
parsePercent
(
viewRect
.
height
,
api
.
getHeight
()
);
var
size
=
Math
.
min
(
width
,
height
);
var
cx
=
parsePercent
(
center
[
0
],
width
);
var
cy
=
parsePercent
(
center
[
1
],
height
);
var
cx
=
parsePercent
(
center
[
0
],
width
)
+
viewRect
.
x
;
var
cy
=
parsePercent
(
center
[
1
],
height
)
+
viewRect
.
y
;
var
r0
=
parsePercent
(
radius
[
0
],
size
/
2
);
var
r
=
parsePercent
(
radius
[
1
],
size
/
2
);
...
...
@@ -90,7 +101,8 @@ export default function (seriesType, ecModel, api, payload) {
r0
:
r0
,
r
:
roseType
?
NaN
:
r
:
r
,
viewRect
:
viewRect
});
return
;
}
...
...
@@ -123,7 +135,8 @@ export default function (seriesType, ecModel, api, payload) {
r0
:
r0
,
r
:
roseType
?
linearMap
(
value
,
extent
,
[
r0
,
r
])
:
r
:
r
,
viewRect
:
viewRect
});
currentAngle
=
endAngle
;
...
...
@@ -161,6 +174,6 @@ export default function (seriesType, ecModel, api, payload) {
}
}
labelLayout
(
seriesModel
,
r
,
width
,
height
);
labelLayout
(
seriesModel
,
r
,
viewRect
.
width
,
viewRect
.
height
,
viewRect
.
x
,
viewRect
.
y
);
});
}
\ No newline at end of file
test/pie-alignTo.html
0 → 100644
浏览文件 @
849b8038
<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
<html>
<head>
<meta
charset=
"utf-8"
>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1"
/>
<script
src=
"lib/esl.js"
></script>
<script
src=
"lib/config.js"
></script>
<script
src=
"lib/jquery.min.js"
></script>
<script
src=
"lib/facePrint.js"
></script>
<script
src=
"lib/testHelper.js"
></script>
<!-- <script src="ut/lib/canteen.js"></script> -->
<script
src=
"lib/dat.gui.min.js"
></script>
<link
rel=
"stylesheet"
href=
"lib/reset.css"
/>
</head>
<body>
<style>
</style>
<div
id=
"main-none"
></div>
<div
id=
"main0"
></div>
<div
id=
"main1"
></div>
<div
id=
"main2"
></div>
<script>
require
([
'
echarts
'
],
function
(
echarts
)
{
var
count
=
20
;
var
data
=
[];
var
text
=
''
;
for
(
var
i
=
0
;
i
<
count
;
i
++
)
{
text
+=
'
XY
'
;
data
.
push
({
name
:
text
+
i
,
value
:
Math
.
random
()
});
}
var
optionNone
=
{
series
:
[{
type
:
'
pie
'
,
radius
:
'
50%
'
,
data
:
data
,
animation
:
false
,
labelLine
:
{
length2
:
15
},
label
:
{
margin
:
20
,
position
:
'
outer
'
}
}]
};
var
option0
=
{
series
:
[{
type
:
'
pie
'
,
radius
:
'
50%
'
,
data
:
data
,
animation
:
false
,
labelLine
:
{
length2
:
15
},
label
:
{
margin
:
20
,
position
:
'
outer
'
,
alignTo
:
'
labelLine
'
}
}]
};
var
option1
=
{
series
:
[{
type
:
'
pie
'
,
radius
:
'
50%
'
,
data
:
data
,
animation
:
false
,
labelLine
:
{
length2
:
15
},
label
:
{
margin
:
20
,
position
:
'
outer
'
,
alignTo
:
'
edge
'
}
}]
};
var
option2
=
{
series
:
[{
type
:
'
pie
'
,
radius
:
'
25%
'
,
center
:
[
'
50%
'
,
'
50%
'
],
data
:
data
,
animation
:
false
,
labelLine
:
{
length2
:
15
},
label
:
{
position
:
'
outer
'
,
alignTo
:
'
edge
'
},
left
:
0
,
right
:
'
50%
'
,
top
:
0
,
bottom
:
'
50%
'
},
{
type
:
'
pie
'
,
radius
:
'
25%
'
,
center
:
[
'
50%
'
,
'
50%
'
],
data
:
data
,
animation
:
false
,
labelLine
:
{
length2
:
15
},
label
:
{
margin
:
20
,
position
:
'
outer
'
,
alignTo
:
'
labelLine
'
},
left
:
'
50%
'
,
right
:
0
,
top
:
0
,
bottom
:
'
50%
'
},
{
type
:
'
pie
'
,
radius
:
'
25%
'
,
center
:
[
'
50%
'
,
'
50%
'
],
data
:
data
,
animation
:
false
,
labelLine
:
{
length2
:
15
},
label
:
{
position
:
'
outer
'
,
alignTo
:
'
edge
'
},
left
:
0
,
right
:
'
50%
'
,
top
:
'
50%
'
,
bottom
:
0
},
{
type
:
'
pie
'
,
radius
:
'
25%
'
,
center
:
[
'
50%
'
,
'
50%
'
],
data
:
data
,
animation
:
false
,
labelLine
:
{
length2
:
15
},
label
:
{
margin
:
20
,
position
:
'
outer
'
,
alignTo
:
'
labelLine
'
},
left
:
'
50%
'
,
right
:
0
,
top
:
'
50%
'
,
bottom
:
0
}]
};
var
chartNone
=
testHelper
.
create
(
echarts
,
'
main-none
'
,
{
title
:
'
alignTo: "none"
'
,
option
:
optionNone
});
var
chart0
=
testHelper
.
create
(
echarts
,
'
main0
'
,
{
title
:
'
alignTo: "labelLine"
'
,
option
:
option0
});
var
chart1
=
testHelper
.
create
(
echarts
,
'
main1
'
,
{
title
:
'
alignTo: "edge"
'
,
option
:
option1
});
var
chart2
=
testHelper
.
create
(
echarts
,
'
main2
'
,
{
title
:
'
Multiple charts
'
,
option
:
option2
});
var
gui
=
new
dat
.
GUI
({
});
var
config
=
{
length2
:
15
,
margin
:
20
};
gui
.
add
(
config
,
'
length2
'
,
0
,
300
)
.
onChange
(
function
(
value
)
{
option0
.
series
[
0
].
labelLine
.
length2
=
value
;
option1
.
series
[
0
].
labelLine
.
length2
=
value
;
optionNone
.
series
[
0
].
labelLine
.
length2
=
value
;
chart0
.
setOption
(
option0
);
chart1
.
setOption
(
option1
);
chartNone
.
setOption
(
optionNone
);
for
(
var
i
=
0
;
i
<
4
;
++
i
)
{
option2
.
series
[
i
].
labelLine
.
length2
=
value
;
}
chart2
.
setOption
(
option2
);
});
gui
.
add
(
config
,
'
margin
'
,
0
,
300
)
.
onChange
(
function
(
value
)
{
option0
.
series
[
0
].
label
.
margin
=
value
;
option1
.
series
[
0
].
label
.
margin
=
value
;
optionNone
.
series
[
0
].
label
.
margin
=
value
;
chart0
.
setOption
(
option0
);
chart1
.
setOption
(
option1
);
chartNone
.
setOption
(
optionNone
);
for
(
var
i
=
0
;
i
<
4
;
++
i
)
{
option2
.
series
[
i
].
label
.
margin
=
value
;
}
chart2
.
setOption
(
option2
);
});
});
window
.
onresize
=
function
()
{
if
(
chart0
)
{
chart0
.
resize
();
chart1
.
resize
();
chart2
.
resize
();
}
};
</script>
</body>
</html>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录