Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
alon@wen
echarts
提交
8143997e
E
echarts
项目概览
alon@wen
/
echarts
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
1
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
E
echarts
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
1
Issue
1
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
8143997e
编写于
9月 24, 2015
作者:
L
lang
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Legend layout
上级
0879f445
变更
3
显示空白变更内容
内联
并排
Showing
3 changed file
with
134 addition
and
65 deletion
+134
-65
src/component/legend/LegendModel.js
src/component/legend/LegendModel.js
+44
-22
src/component/legend/LegendView.js
src/component/legend/LegendView.js
+61
-43
src/component/legend/legendLayout.js
src/component/legend/legendLayout.js
+29
-0
未找到文件。
src/component/legend/LegendModel.js
浏览文件 @
8143997e
...
...
@@ -77,32 +77,54 @@ define(function(require) {
},
defaultOption
:
{
zlevel
:
0
,
// 一级层叠
z
:
4
,
// 二级层叠
// 一级层叠
zlevel
:
0
,
// 二级层叠
z
:
4
,
show
:
true
,
orient
:
'
horizontal
'
,
// 布局方式,默认为水平布局,可选为:
// 'horizontal' ¦ 'vertical'
x
:
'
center
'
,
// 水平安放位置,默认为全图居中,可选为:
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}(x坐标,单位px)
y
:
'
top
'
,
// 垂直安放位置,默认为全图顶端,可选为:
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}(y坐标,单位px)
// 布局方式,默认为水平布局,可选为:
// 'horizontal' | 'vertical'
orient
:
'
horizontal
'
,
// 水平安放位置,默认为全图居中,可选为:
// 'center' | 'left' | 'right' | {number}(x坐标,单位px)
x
:
'
center
'
,
// 垂直安放位置,默认为全图顶端,可选为:
// 'top' | 'bottom' | 'center' | {number}(y坐标,单位px)
y
:
'
top
'
,
// 水平对齐
// 'auto' | 'left' | 'right'
// 默认为 'auto', 根据 x 的位置判断是左对齐还是右对齐
align
:
'
auto
'
,
backgroundColor
:
'
rgba(0,0,0,0)
'
,
borderColor
:
'
#ccc
'
,
// 图例边框颜色
borderWidth
:
0
,
// 图例边框线宽,单位px,默认为0(无边框)
padding
:
5
,
// 图例内边距,单位px,默认各方向内边距为5,
// 图例边框颜色
borderColor
:
'
#ccc
'
,
// 图例边框线宽,单位px,默认为0(无边框)
borderWidth
:
0
,
// 图例内边距,单位px,默认各方向内边距为5,
// 接受数组分别设定上右下左边距,同css
itemGap
:
10
,
// 各个item之间的间隔,单位px,默认为10,
padding
:
5
,
// 各个item之间的间隔,单位px,默认为10,
// 横向布局时为水平间隔,纵向布局时为纵向间隔
itemWidth
:
20
,
// 图例图形宽度
itemHeight
:
14
,
// 图例图形高度
itemGap
:
10
,
// 图例图形宽度
itemWidth
:
25
,
// 图例图形高度
itemHeight
:
14
,
textStyle
:
{
color
:
'
#333
'
// 图例文字颜色
// 图例文字颜色
color
:
'
#333
'
},
selectedMode
:
true
// 选择模式,默认开启图例开关
// selected: null, // 配置默认选中状态,可配合LEGEND.SELECTED事件做动态数据载入
// data: [], // 图例内容(详见legend.data,数组中每一项代表一个item
// 选择模式,默认开启图例开关
selectedMode
:
true
// 配置默认选中状态,可配合LEGEND.SELECTED事件做动态数据载入
// selected: null,
// 图例内容(详见legend.data,数组中每一项代表一个item
// data: [],
}
});
});
\ No newline at end of file
src/component/legend/LegendView.js
浏览文件 @
8143997e
...
...
@@ -2,8 +2,9 @@ define(function (require) {
var
zrUtil
=
require
(
'
zrender/core/util
'
);
var
numberUtil
=
require
(
'
../../util/number
'
);
var
formatUtil
=
require
(
'
../../util/format
'
);
var
symbolCreator
=
require
(
'
../../util/symbol
'
);
var
legendLayout
=
require
(
'
./legendLayout
'
);
var
graphic
=
require
(
'
../../util/graphic
'
);
var
LEGEND_DISABLE_STYLE
=
{
fill
:
'
#ccc
'
,
...
...
@@ -27,80 +28,98 @@ define(function (require) {
},
render
:
function
(
legendModel
,
ecModel
,
api
)
{
var
itemGap
=
legendModel
.
get
(
'
itemGap
'
);
var
padding
=
formatUtil
.
normalizeCssArray
(
legendModel
.
get
(
'
padding
'
)
);
var
orient
=
legendModel
.
get
(
'
orient
'
);
var
enableSelect
=
legendModel
.
get
(
'
selectedMode
'
);
var
itemWidth
=
legendModel
.
get
(
'
itemWidth
'
);
var
itemHeight
=
legendModel
.
get
(
'
itemHeight
'
);
var
group
=
this
.
group
;
group
.
removeAll
();
var
x
=
legendModel
.
get
(
'
x
'
);
var
y
=
legendModel
.
get
(
'
y
'
);
var
itemAlign
=
legendModel
.
get
(
'
align
'
);
var
parsePercent
=
numberUtil
.
parsePercent
;
group
.
position
=
[
numberUtil
.
parsePercent
(
legendModel
.
get
(
'
x
'
),
api
.
getWidth
()
),
numberUtil
.
parsePercent
(
legendModel
.
get
(
'
y
'
),
api
.
getHeight
()
)
parsePercent
(
x
,
api
.
getWidth
()),
parsePercent
(
y
,
api
.
getHeight
())
];
group
.
removeAll
();
var
x
=
padding
[
3
];
var
y
=
padding
[
0
];
var
width
=
20
;
var
height
=
10
;
if
(
itemAlign
===
'
auto
'
)
{
itemAlign
=
group
.
position
[
0
]
/
api
.
getWidth
()
<
0.7
?
'
left
'
:
'
right
'
;
}
zrUtil
.
each
(
legendModel
.
getData
(),
function
(
itemModel
)
{
var
seriesName
=
itemModel
.
get
(
'
name
'
);
var
seriesModel
=
ecModel
.
getSeriesByName
(
seriesName
,
true
);
var
data
=
seriesModel
.
getData
();
var
color
=
data
.
getVisual
(
'
color
'
);
var
itemElMap
=
this
.
_itemElMap
;
var
itemGroup
=
itemElMap
[
seriesName
];
if
(
legendModel
.
isSelected
(
seriesName
))
{
itemGroup
=
new
api
.
Group
();
itemGroup
=
new
graphic
.
Group
();
this
.
_createSymbol
(
data
,
x
,
y
,
width
,
height
,
data
.
getVisual
(
'
color
'
)
,
itemGroup
data
,
0
,
0
,
itemWidth
,
itemHeight
,
color
,
itemGroup
);
itemElMap
[
seriesName
]
=
itemGroup
;
}
else
{
itemGroup
.
eachChild
(
function
(
child
)
{
if
(
child
.
type
!==
'
text
'
)
{
child
.
style
.
set
(
LEGEND_DISABLE_STYLE
);
}
});
itemGroup
.
off
(
'
click
'
);
}
var
text
=
new
api
.
Text
({
var
textX
=
itemAlign
===
'
left
'
?
itemWidth
+
5
:
-
5
;
var
textAlign
=
itemAlign
;
var
text
=
new
graphic
.
Text
({
style
:
{
text
:
seriesName
,
x
:
x
+
width
+
5
,
y
:
y
+
h
eight
/
2
,
x
:
textX
,
y
:
itemH
eight
/
2
,
fill
:
'
#000
'
,
textAlign
:
'
left
'
,
textAlign
:
textAlign
,
textBaseline
:
'
middle
'
}
});
itemGroup
.
add
(
text
);
var
textRect
=
text
.
getBoundingRect
();
if
(
orient
===
'
horizontal
'
)
{
x
+=
width
+
5
+
textRect
.
width
+
itemGap
;
}
else
{
y
+=
Math
.
max
(
height
,
textRect
.
height
)
+
itemGap
;
itemGroup
.
eachChild
(
function
(
child
)
{
if
(
child
.
type
!==
'
text
'
)
{
child
.
style
.
set
(
LEGEND_DISABLE_STYLE
);
}
});
itemGroup
.
off
(
'
click
'
);
}
itemGroup
.
eachChild
(
function
(
child
)
{
child
.
silent
=
!
enableSelect
;
});
group
.
add
(
itemGroup
);
itemGroup
.
on
(
'
click
'
,
zrUtil
.
curry
(
createSelectActionDispatcher
,
this
.
uid
,
seriesName
,
api
),
this
);
},
this
);
legendLayout
(
group
,
legendModel
);
this
.
_adjustGroupPosition
(
group
,
x
,
y
);
},
_adjustGroupPosition
:
function
(
group
,
x
,
y
)
{
var
groupRect
=
group
.
getBoundingRect
();
group
.
position
[
0
]
-=
groupRect
.
width
/
2
;
var
position
=
group
.
position
;
var
padding
=
group
.
padding
;
switch
(
x
)
{
case
'
center
'
:
position
[
0
]
-=
groupRect
.
width
/
2
;
break
;
case
'
right
'
:
position
[
0
]
-=
groupRect
.
width
+
groupRect
.
x
+
padding
[
1
];
break
;
}
switch
(
y
)
{
case
'
center
'
:
position
[
1
]
-=
groupRect
.
height
/
2
;
break
;
case
'
bottom
'
:
position
[
0
]
-=
groupRect
.
height
+
groupRect
.
y
+
padding
[
2
];
break
;
}
},
_createSymbol
:
function
(
data
,
x
,
y
,
width
,
height
,
color
,
group
)
{
...
...
@@ -114,7 +133,6 @@ define(function (require) {
));
// Compose symbols
// PENDING Use group ?
if
(
symbolType
&&
symbolType
!==
legendSymbolType
)
{
var
size
=
height
*
0.8
;
// Put symbol in the center
...
...
src/component/legend/legendLayout.js
0 → 100644
浏览文件 @
8143997e
define
(
function
(
require
)
{
'
use strict
'
;
var
formatUtil
=
require
(
'
../../util/format
'
);
return
function
(
group
,
legendModel
)
{
var
itemGap
=
legendModel
.
get
(
'
itemGap
'
);
var
padding
=
formatUtil
.
normalizeCssArray
(
legendModel
.
get
(
'
padding
'
)
);
var
orient
=
legendModel
.
get
(
'
orient
'
);
var
x
=
padding
[
3
];
var
y
=
padding
[
0
];
group
.
eachChild
(
function
(
child
)
{
var
position
=
child
.
position
;
var
rect
=
child
.
getBoundingRect
();
position
[
0
]
=
x
;
position
[
1
]
=
y
;
orient
===
'
horizontal
'
?
(
x
+=
rect
.
width
+
itemGap
)
:
(
y
+=
rect
.
height
+
itemGap
);
});
group
.
padding
=
padding
;
};
});
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录