Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
x649585723
incubator-echarts
提交
f8ab3e84
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,发现更多精彩内容 >>
提交
f8ab3e84
编写于
3月 25, 2014
作者:
K
kener
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
dataRange样式优化
上级
fe01aab7
变更
2
显示空白变更内容
内联
并排
Showing
2 changed file
with
203 addition
and
63 deletion
+203
-63
src/component/dataRange.js
src/component/dataRange.js
+123
-63
src/util/shape/handlePolygon.js
src/util/shape/handlePolygon.js
+80
-0
未找到文件。
src/component/dataRange.js
浏览文件 @
f8ab3e84
...
...
@@ -142,6 +142,9 @@ define(function (require) {
textFont
:
font
,
textBaseline
:
'
top
'
},
highlightStyle
:{
brushType
:
'
fill
'
},
clickable
:
true
};
if
(
dataRangeOption
.
orient
==
'
vertical
'
...
...
@@ -302,6 +305,10 @@ define(function (require) {
height
:
_calculableLocation
.
height
,
color
:
'
rgba(255,255,255,0)
'
},
highlightStyle
:
{
strokeColor
:
'
rgba(255,255,255,0.5)
'
,
lineWidth
:
1
},
draggable
:
true
,
ondrift
:
_ondrift
,
ondragend
:
_ondragend
,
...
...
@@ -339,64 +346,82 @@ define(function (require) {
var
pointListStart
;
var
textXStart
;
var
textYStart
;
var
coverRectStart
;
var
pointListEnd
;
var
textXEnd
;
var
textYEnd
;
var
coverRectEnd
if
(
dataRangeOption
.
orient
==
'
horizontal
'
)
{
// 水平
if
(
dataRangeOption
.
y
!=
'
bottom
'
)
{
// 手柄统统在下方
pointListStart
=
[
[
x
,
y
],
[
x
,
y
+
height
+
textHeight
/
2
*
3
],
[
x
-
textWidth
,
y
+
height
+
textHeight
/
2
*
3
],
[
x
-
textWidth
,
y
+
height
+
textHeight
/
2
],
[
x
-
textHeight
/
2
,
y
+
height
+
textHeight
/
2
],
[
x
,
y
+
height
+
textHeight
],
[
x
-
textHeight
,
y
+
height
+
textHeight
],
[
x
-
1
,
y
+
height
],
[
x
-
1
,
y
]
];
textXStart
=
x
-
textWidth
/
2
;
textYStart
=
y
+
height
+
textHeight
;
textXStart
=
x
-
textWidth
/
2
-
textHeight
;
textYStart
=
y
+
height
+
textHeight
/
2
+
2
;
coverRectStart
=
{
x
:
x
-
textWidth
-
textHeight
,
y
:
y
+
height
,
width
:
textWidth
+
textHeight
,
height
:
textHeight
};
pointListEnd
=
[
[
x
+
width
,
y
],
[
x
+
width
,
y
+
height
+
textHeight
/
2
*
3
],
[
x
+
width
+
textWidth
,
y
+
height
+
textHeight
/
2
*
3
],
[
x
+
width
+
textWidth
,
y
+
height
+
textHeight
/
2
],
[
x
+
width
+
textHeight
/
2
,
y
+
height
+
textHeight
/
2
],
[
x
+
width
,
y
+
height
+
textHeight
],
[
x
+
width
+
textHeight
,
y
+
height
+
textHeight
],
[
x
+
width
+
1
,
y
+
height
],
[
x
+
width
+
1
,
y
]
];
textXEnd
=
x
+
width
+
textWidth
/
2
;
textXEnd
=
x
+
width
+
textWidth
/
2
+
textHeight
;
textYEnd
=
textYStart
;
coverRectEnd
=
{
x
:
x
+
width
,
y
:
y
+
height
,
width
:
textWidth
+
textHeight
,
height
:
textHeight
};
}
else
{
// 手柄在上方
pointListStart
=
[
[
x
,
y
+
height
],
[
x
,
y
-
textHeight
/
2
*
3
],
[
x
-
textWidth
,
y
-
textHeight
/
2
*
3
],
[
x
-
textWidth
,
y
-
textHeight
/
2
],
[
x
-
textHeight
/
2
,
y
-
textHeight
/
2
],
[
x
,
y
-
textHeight
],
[
x
-
textHeight
,
y
-
textHeight
],
[
x
-
1
,
y
],
[
x
-
1
,
y
+
height
]
];
textXStart
=
x
-
textWidth
/
2
;
textYStart
=
y
-
textHeight
;
textXStart
=
x
-
textWidth
/
2
-
textHeight
;
textYStart
=
y
-
textHeight
/
2
-
2
;
coverRectStart
=
{
x
:
x
-
textWidth
-
textHeight
,
y
:
y
-
textHeight
,
width
:
textWidth
+
textHeight
,
height
:
textHeight
};
pointListEnd
=
[
[
x
+
width
,
y
+
height
],
[
x
+
width
,
y
-
textHeight
/
2
*
3
],
[
x
+
width
+
textWidth
,
y
-
textHeight
/
2
*
3
],
[
x
+
width
+
textWidth
,
y
-
textHeight
/
2
],
[
x
+
width
+
textHeight
/
2
,
y
-
textHeight
/
2
],
[
x
+
width
,
y
-
textHeight
],
[
x
+
width
+
textHeight
,
y
-
textHeight
],
[
x
+
width
+
1
,
y
],
[
x
+
width
+
1
,
y
+
height
]
];
textXEnd
=
x
+
width
+
textWidth
/
2
;
textXEnd
=
x
+
width
+
textWidth
/
2
+
textHeight
;
textYEnd
=
textYStart
;
coverRectEnd
=
{
x
:
x
+
width
,
y
:
y
-
textHeight
,
width
:
textWidth
+
textHeight
,
height
:
textHeight
};
}
}
else
{
...
...
@@ -406,54 +431,74 @@ define(function (require) {
// 手柄统统在右侧
pointListStart
=
[
[
x
,
y
],
[
x
+
width
+
textWidth
,
y
],
[
x
+
width
+
textWidth
,
y
-
textHeight
],
[
x
+
width
+
textHeight
,
y
],
[
x
+
width
+
textHeight
,
y
-
textHeight
],
[
x
+
width
,
y
-
1
],
[
x
,
y
-
1
]
];
textXStart
=
x
+
width
+
textWidth
/
2
+
textHeight
/
2
;
textYStart
=
y
-
textHeight
/
2
;
coverRectStart
=
{
x
:
x
+
width
,
y
:
y
-
textHeight
,
width
:
textWidth
+
textHeight
,
height
:
textHeight
};
pointListEnd
=
[
[
x
,
y
+
height
],
[
x
+
width
+
textWidth
,
y
+
height
],
[
x
+
width
+
textWidth
,
y
+
textHeight
+
height
],
[
x
+
width
+
textHeight
,
y
+
height
],
[
x
+
width
+
textHeight
,
y
+
textHeight
+
height
],
[
x
+
width
,
y
+
1
+
height
],
[
x
,
y
+
height
+
1
]
];
textXEnd
=
textXStart
;
textYEnd
=
y
+
height
+
textHeight
/
2
;
coverRectEnd
=
{
x
:
x
+
width
,
y
:
y
+
height
,
width
:
textWidth
+
textHeight
,
height
:
textHeight
}
}
else
{
// 手柄在左侧
pointListStart
=
[
[
x
+
width
,
y
],
[
x
-
textWidth
,
y
],
[
x
-
textWidth
,
y
-
textHeight
],
[
x
-
textHeight
,
y
],
[
x
-
textHeight
,
y
-
textHeight
],
[
x
,
y
-
1
],
[
x
+
width
,
y
-
1
]
];
textXStart
=
x
-
textWidth
/
2
-
textHeight
/
2
;
textYStart
=
y
-
textHeight
/
2
;
coverRectStart
=
{
x
:
x
-
textWidth
-
textHeight
,
y
:
y
-
textHeight
,
width
:
textWidth
+
textHeight
,
height
:
textHeight
};
pointListEnd
=
[
[
x
+
width
,
y
+
height
],
[
x
-
textWidth
,
y
+
height
],
[
x
-
textWidth
,
y
+
textHeight
+
height
],
[
x
-
textHeight
,
y
+
height
],
[
x
-
textHeight
,
y
+
textHeight
+
height
],
[
x
,
y
+
1
+
height
],
[
x
+
width
,
y
+
height
+
1
]
];
textXEnd
=
textXStart
;
textYEnd
=
y
+
height
+
textHeight
/
2
;
coverRectEnd
=
{
x
:
x
-
textWidth
-
textHeight
,
y
:
y
+
height
,
width
:
textWidth
+
textHeight
,
height
:
textHeight
};
}
}
_startShape
=
{
shape
:
'
polygon
'
,
zlevel
:
_zlevelBase
+
1
,
shape
:
'
handlePolygon
'
,
style
:
{
pointList
:
pointListStart
,
text
:
dataRangeOption
.
max
.
toFixed
(
...
...
@@ -461,26 +506,21 @@ define(function (require) {
),
textX
:
textXStart
,
textY
:
textYStart
,
textPosition
:
'
specific
'
,
textAlign
:
'
center
'
,
textBaseline
:
'
middle
'
,
textColor
:
dataRangeOption
.
textStyle
.
color
,
color
:
getColor
(
dataRangeOption
.
max
),
width
:
0
,
// for ondrif计算统一
height
:
0
,
rect
:
coverRectStart
,
x
:
pointListStart
[
0
][
0
],
y
:
pointListStart
[
0
][
1
],
_x
:
pointListStart
[
0
][
0
],
// 拖拽区域控制缓存
_y
:
pointListStart
[
0
][
1
]
},
draggable
:
true
,
ondrift
:
_ondrift
,
ondragend
:
_ondragend
}
};
_startShape
.
highlightStyle
=
{
strokeColor
:
_startShape
.
style
.
color
,
lineWidth
:
1
};
_endShape
=
{
shape
:
'
polygon
'
,
zlevel
:
_zlevelBase
+
1
,
shape
:
'
handlePolygon
'
,
style
:
{
pointList
:
pointListEnd
,
text
:
dataRangeOption
.
min
.
toFixed
(
...
...
@@ -488,22 +528,34 @@ define(function (require) {
),
textX
:
textXEnd
,
textY
:
textYEnd
,
textPosition
:
'
specific
'
,
textAlign
:
'
center
'
,
textBaseline
:
'
middle
'
,
textColor
:
dataRangeOption
.
textStyle
.
color
,
color
:
getColor
(
dataRangeOption
.
min
),
width
:
0
,
// for ondrif计算统一
height
:
0
,
rect
:
coverRectEnd
,
x
:
pointListEnd
[
0
][
0
],
y
:
pointListEnd
[
0
][
1
],
_x
:
pointListEnd
[
0
][
0
],
// 拖拽区域控制缓存
_y
:
pointListEnd
[
0
][
1
]
},
draggable
:
true
,
ondrift
:
_ondrift
,
ondragend
:
_ondragend
}
};
_endShape
.
highlightStyle
=
{
strokeColor
:
_endShape
.
style
.
color
,
lineWidth
:
1
}
// 统一参数
_startShape
.
zlevel
=
_endShape
.
zlevel
=
_zlevelBase
+
1
;
_startShape
.
draggable
=
_endShape
.
draggable
=
true
;
_startShape
.
ondrift
=
_endShape
.
ondrift
=
_ondrift
;
_startShape
.
ondragend
=
_endShape
.
ondragend
=
_ondragend
;
_startShape
.
style
.
textColor
=
_endShape
.
style
.
textColor
=
dataRangeOption
.
textStyle
.
color
;
_startShape
.
style
.
textAlign
=
_endShape
.
style
.
textAlign
=
'
center
'
;
_startShape
.
style
.
textPosition
=
_endShape
.
style
.
textPosition
=
'
specific
'
;
_startShape
.
style
.
textBaseline
=
_endShape
.
style
.
textBaseline
=
'
middle
'
;
_startShape
.
style
.
width
=
_endShape
.
style
.
width
=
0
;
// for ondrif计算统一
_startShape
.
style
.
height
=
_endShape
.
style
.
height
=
0
;
_startShape
.
style
.
textPosition
=
_endShape
.
style
.
textPosition
=
'
specific
'
;
self
.
shapeList
.
push
(
_startShape
);
self
.
shapeList
.
push
(
_endShape
);
}
...
...
@@ -731,21 +783,21 @@ define(function (require) {
var
handlerWidth
=
Math
.
max
(
zrArea
.
getTextWidth
(
dataRangeOption
.
max
,
font
),
zrArea
.
getTextWidth
(
dataRangeOption
.
min
,
font
)
);
)
+
textHeight
;
if
(
dataRangeOption
.
orient
==
'
horizontal
'
)
{
if
(
x
<
handlerWidth
)
{
x
=
handlerWidth
+
5
;
x
=
handlerWidth
;
}
if
(
x
+
totalWidth
+
handlerWidth
>
zrWidth
)
{
x
-=
handlerWidth
+
5
;
x
-=
handlerWidth
;
}
}
else
{
if
(
y
<
textHeight
)
{
y
=
textHeight
+
5
;
y
=
textHeight
;
}
if
(
y
+
totalHeight
+
textHeight
>
zrHeight
)
{
y
-=
textHeight
+
5
;
y
-=
textHeight
;
}
}
}
...
...
@@ -781,7 +833,8 @@ define(function (require) {
?
'
middle
'
:
'
top
'
),
textAlign
:
(
dataRangeOption
.
orient
==
'
horizontal
'
?
'
left
'
:
'
center
'
)
}
},
hoverable
:
false
};
}
...
...
@@ -797,6 +850,10 @@ define(function (require) {
height
:
height
-
2
,
color
:
color
},
highlightStyle
:
{
strokeColor
:
color
,
lineWidth
:
1
},
clickable
:
true
};
}
...
...
@@ -1037,7 +1094,7 @@ define(function (require) {
_gap
*
_range
.
start
+
dataRangeOption
.
min
).
toFixed
(
dataRangeOption
.
precision
);
}
_startShape
.
style
.
color
=
getColor
(
_startShape
.
style
.
color
=
_startShape
.
highlightStyle
.
strokeColor
=
getColor
(
_gap
*
_range
.
start
+
dataRangeOption
.
min
);
...
...
@@ -1057,7 +1114,7 @@ define(function (require) {
_gap
*
_range
.
end
+
dataRangeOption
.
min
).
toFixed
(
dataRangeOption
.
precision
);
}
_endShape
.
style
.
color
=
getColor
(
_endShape
.
style
.
color
=
_endShape
.
highlightStyle
.
strokeColor
=
getColor
(
_gap
*
_range
.
end
+
dataRangeOption
.
min
);
zr
.
modShape
(
_endShape
.
id
,
_endShape
);
...
...
@@ -1247,6 +1304,9 @@ define(function (require) {
init
(
option
);
}
// 动态扩展zrender shape:candle
require
(
'
../util/shape/handlePolygon
'
);
require
(
'
../component
'
).
define
(
'
dataRange
'
,
DataRange
);
return
DataRange
;
...
...
src/util/shape/handlePolygon.js
0 → 100644
浏览文件 @
f8ab3e84
/**
* zrender
*
* @author Kener (@Kener-林峰, linzhifeng@baidu.com)
*
* shape类:handlePolygon,dataRange手柄
*/
define
(
function
(
require
)
{
var
matrix
=
require
(
'
zrender/tool/matrix
'
);
function
HandlePolygon
()
{
this
.
type
=
'
handlePolygon
'
;
}
HandlePolygon
.
prototype
=
{
/**
* 创建多边形路径
* @param {Context2D} ctx Canvas 2D上下文
* @param {Object} style 样式
*/
buildPath
:
function
(
ctx
,
style
)
{
require
(
'
zrender/shape
'
).
get
(
'
polygon
'
).
buildPath
(
ctx
,
style
);
return
;
},
isCover
:
function
(
e
,
x
,
y
)
{
//对鼠标的坐标也做相同的变换
if
(
e
.
__needTransform
&&
e
.
_transform
){
var
inverseMatrix
=
[];
matrix
.
invert
(
inverseMatrix
,
e
.
_transform
);
var
originPos
=
[
x
,
y
];
matrix
.
mulVector
(
originPos
,
inverseMatrix
,
[
x
,
y
,
1
]);
if
(
x
==
originPos
[
0
]
&&
y
==
originPos
[
1
])
{
// 避免外部修改导致的__needTransform不准确
if
(
Math
.
abs
(
e
.
rotation
[
0
])
>
0.0001
||
Math
.
abs
(
e
.
position
[
0
])
>
0.0001
||
Math
.
abs
(
e
.
position
[
1
])
>
0.0001
||
Math
.
abs
(
e
.
scale
[
0
]
-
1
)
>
0.0001
||
Math
.
abs
(
e
.
scale
[
1
]
-
1
)
>
0.0001
)
{
e
.
__needTransform
=
true
;
}
else
{
e
.
__needTransform
=
false
;
}
}
x
=
originPos
[
0
];
y
=
originPos
[
1
];
}
// 快速预判并保留判断矩形
var
rect
=
e
.
style
.
rect
;
// 提高交互体验,太小的图形包围盒四向扩大4px
if
(
x
>=
rect
.
x
&&
x
<=
(
rect
.
x
+
rect
.
width
)
&&
y
>=
rect
.
y
&&
y
<=
(
rect
.
y
+
rect
.
height
)
)
{
// 矩形内
return
true
;
}
else
{
return
false
;
}
}
};
require
(
'
zrender/shape/base
'
).
derive
(
HandlePolygon
);
require
(
'
zrender/shape
'
).
define
(
'
handlePolygon
'
,
new
HandlePolygon
()
);
return
HandlePolygon
;
}
);
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录