Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
半栈学徒
incubator-echarts
提交
1c2b29b5
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,发现更多精彩内容 >>
提交
1c2b29b5
编写于
9月 06, 2018
作者:
S
sushuang
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix: datazoom scroll direction.
上级
4e0d145f
变更
6
显示空白变更内容
内联
并排
Showing
6 changed file
with
242 addition
and
34 deletion
+242
-34
src/component/dataZoom/InsideZoomView.js
src/component/dataZoom/InsideZoomView.js
+4
-1
src/component/dataZoom/roams.js
src/component/dataZoom/roams.js
+6
-0
src/component/helper/RoamController.js
src/component/helper/RoamController.js
+6
-2
test/dataZoom-scroll.html
test/dataZoom-scroll.html
+205
-1
test/finished.html
test/finished.html
+17
-10
test/largeScatterWithEmpty.html
test/largeScatterWithEmpty.html
+4
-20
未找到文件。
src/component/dataZoom/InsideZoomView.js
浏览文件 @
1c2b29b5
...
@@ -153,7 +153,10 @@ var roamHandlers = {
...
@@ -153,7 +153,10 @@ var roamHandlers = {
* @this {module:echarts/component/dataZoom/InsideZoomView}
* @this {module:echarts/component/dataZoom/InsideZoomView}
*/
*/
scrollMove
:
makeMover
(
function
(
range
,
axisModel
,
coordInfo
,
coordSysName
,
controller
,
e
)
{
scrollMove
:
makeMover
(
function
(
range
,
axisModel
,
coordInfo
,
coordSysName
,
controller
,
e
)
{
return
(
range
[
1
]
-
range
[
0
])
*
e
.
scrollDelta
;
var
directionInfo
=
getDirectionInfo
[
coordSysName
](
[
0
,
0
],
[
e
.
scrollDelta
,
e
.
scrollDelta
],
axisModel
,
controller
,
coordInfo
);
return
directionInfo
.
signal
*
(
range
[
1
]
-
range
[
0
])
*
e
.
scrollDelta
;
})
})
};
};
...
...
src/component/dataZoom/roams.js
浏览文件 @
1c2b29b5
...
@@ -141,6 +141,8 @@ function createController(api, newRecord) {
...
@@ -141,6 +141,8 @@ function createController(api, newRecord) {
var
batch
=
[];
var
batch
=
[];
zrUtil
.
each
(
newRecord
.
dataZoomInfos
,
function
(
info
)
{
zrUtil
.
each
(
newRecord
.
dataZoomInfos
,
function
(
info
)
{
// Check whether the behaviors (zoomOnMouseWheel, moveOnMouseMove,
// moveOnMouseWheel, ...) enabled.
if
(
!
event
.
isAvailableBehavior
(
info
.
dataZoomModel
.
option
))
{
if
(
!
event
.
isAvailableBehavior
(
info
.
dataZoomModel
.
option
))
{
return
;
return
;
}
}
...
@@ -207,6 +209,7 @@ function mergeControllerParams(dataZoomInfos) {
...
@@ -207,6 +209,7 @@ function mergeControllerParams(dataZoomInfos) {
if
(
typePriority
[
prefix
+
oneType
]
>
typePriority
[
prefix
+
controlType
])
{
if
(
typePriority
[
prefix
+
oneType
]
>
typePriority
[
prefix
+
controlType
])
{
controlType
=
oneType
;
controlType
=
oneType
;
}
}
// Prevent default move event by default. If one false, do not prevent. Otherwise
// Prevent default move event by default. If one false, do not prevent. Otherwise
// users may be confused why it does not work when multiple insideZooms exist.
// users may be confused why it does not work when multiple insideZooms exist.
preventDefaultMouseMove
&=
dataZoomModel
.
get
(
'
preventDefaultMouseMove
'
,
true
);
preventDefaultMouseMove
&=
dataZoomModel
.
get
(
'
preventDefaultMouseMove
'
,
true
);
...
@@ -215,6 +218,9 @@ function mergeControllerParams(dataZoomInfos) {
...
@@ -215,6 +218,9 @@ function mergeControllerParams(dataZoomInfos) {
return
{
return
{
controlType
:
controlType
,
controlType
:
controlType
,
opt
:
{
opt
:
{
// RoamController will enable all of these functionalities,
// and the final behavior is determined by its event listener
// provided by each inside zoom.
zoomOnMouseWheel
:
true
,
zoomOnMouseWheel
:
true
,
moveOnMouseMove
:
true
,
moveOnMouseMove
:
true
,
moveOnMouseWheel
:
true
,
moveOnMouseWheel
:
true
,
...
...
src/component/helper/RoamController.js
浏览文件 @
1c2b29b5
...
@@ -195,7 +195,11 @@ function mousewheel(e) {
...
@@ -195,7 +195,11 @@ function mousewheel(e) {
if
(
wheelDelta
===
0
||
(
!
shouldZoom
&&
!
shouldMove
))
{
if
(
wheelDelta
===
0
||
(
!
shouldZoom
&&
!
shouldMove
))
{
return
;
return
;
}
}
// console.log(wheelDelta);
// If both `shouldZoom` and `shouldMove` is true, trigger
// their event both, and the final behavior is determined
// by event listener themselves.
if
(
shouldZoom
)
{
if
(
shouldZoom
)
{
// Convenience:
// Convenience:
// Mac and VM Windows on Mac: scroll up: zoom out.
// Mac and VM Windows on Mac: scroll up: zoom out.
...
@@ -212,7 +216,7 @@ function mousewheel(e) {
...
@@ -212,7 +216,7 @@ function mousewheel(e) {
scale
:
scale
,
originX
:
originX
,
originY
:
originY
scale
:
scale
,
originX
:
originX
,
originY
:
originY
});
});
}
}
// console.log(shouldMove);
if
(
shouldMove
)
{
if
(
shouldMove
)
{
// FIXME: Should do more test in different environment.
// FIXME: Should do more test in different environment.
var
absDelta
=
Math
.
abs
(
wheelDelta
);
var
absDelta
=
Math
.
abs
(
wheelDelta
);
...
...
test/dataZoom-scroll.html
浏览文件 @
1c2b29b5
...
@@ -44,6 +44,8 @@ under the License.
...
@@ -44,6 +44,8 @@ under the License.
</style>
</style>
<div
class=
"chart"
id=
"d3"
></div>
<div
class=
"chart"
id=
"d3"
></div>
<div
class=
"chart"
id=
"d4"
></div>
<div
class=
"chart"
id=
"d5"
></div>
...
@@ -133,7 +135,7 @@ under the License.
...
@@ -133,7 +135,7 @@ under the License.
testHelper
.
create
(
echarts
,
'
d3
'
,
{
testHelper
.
create
(
echarts
,
'
d3
'
,
{
title
:
'
Simulate browser scroll bar on y scroll
'
,
title
:
'
Simulate browser scroll bar on y scroll
'
,
option
:
option
,
option
:
option
,
height
:
6
00
height
:
4
00
});
});
})
})
</script>
</script>
...
@@ -141,5 +143,207 @@ under the License.
...
@@ -141,5 +143,207 @@ under the License.
<script>
require
([
'
data/rainfall.json
'
,
'
echarts
'
],
function
(
data
,
echarts
)
{
var
option
=
{
tooltip
:
{
trigger
:
'
axis
'
},
grid
:
[
{
show
:
true
,
borderWidth
:
0
}
],
xAxis
:
[
{
type
:
'
category
'
,
boundaryGap
:
true
,
axisLabel
:
{
show
:
true
},
splitLine
:
{
show
:
false
},
data
:
data
.
category
,
gridIndex
:
0
}
],
yAxis
:
[
{
boundaryGap
:
false
,
axisLabel
:
{
},
axisLine
:
{
lineStyle
:
{
color
:
'
#666
'
}
},
gridIndex
:
0
,
inverse
:
true
}
],
series
:
[
{
name
:
'
降水量
'
,
type
:
'
line
'
,
data
:
data
.
rainfall
,
itemStyle
:
{
normal
:
{
areaStyle
:
{}
}
},
xAxisIndex
:
0
,
yAxisIndex
:
0
,
}
],
dataZoom
:
[
{
type
:
'
inside
'
,
zoomOnMouseWheel
:
false
,
xAxisIndex
:
0
,
// zoomLock: true,
start
:
80
,
end
:
100
},
{
type
:
'
slider
'
,
start
:
30
,
end
:
40
},
{
type
:
'
inside
'
,
yAxisIndex
:
0
,
zoomOnMouseWheel
:
false
,
moveOnMouseWheel
:
true
,
// zoomLock: true,
start
:
30
,
end
:
40
},
{
type
:
'
slider
'
,
yAxisIndex
:
0
}
]
};
testHelper
.
create
(
echarts
,
'
d4
'
,
{
title
:
[
'
Simulate browser scroll bar on y scroll, y axis inversed
'
,
'
The scroll direction should be the same as page scroll
'
],
option
:
option
,
height
:
400
});
})
</script>
<script>
require
([
'
data/rainfall.json
'
,
'
echarts
'
],
function
(
data
,
echarts
)
{
var
option
=
{
tooltip
:
{
trigger
:
'
axis
'
},
grid
:
[
{
show
:
true
,
borderWidth
:
0
}
],
xAxis
:
[
{
type
:
'
category
'
,
boundaryGap
:
true
,
axisLabel
:
{
show
:
true
},
splitLine
:
{
show
:
false
},
data
:
data
.
category
,
gridIndex
:
0
,
inverse
:
true
}
],
yAxis
:
[
{
boundaryGap
:
false
,
axisLabel
:
{
},
axisLine
:
{
lineStyle
:
{
color
:
'
#666
'
}
},
gridIndex
:
0
}
],
series
:
[
{
name
:
'
降水量
'
,
type
:
'
line
'
,
data
:
data
.
rainfall
,
itemStyle
:
{
normal
:
{
areaStyle
:
{}
}
},
xAxisIndex
:
0
,
yAxisIndex
:
0
,
}
],
dataZoom
:
[
{
type
:
'
inside
'
,
zoomOnMouseWheel
:
false
,
yAxisIndex
:
0
,
// zoomLock: true,
start
:
80
,
end
:
100
},
{
type
:
'
slider
'
,
yAxisIndex
:
0
,
start
:
30
,
end
:
40
},
{
type
:
'
inside
'
,
xAxisIndex
:
0
,
zoomOnMouseWheel
:
false
,
moveOnMouseWheel
:
true
,
// zoomLock: true,
start
:
30
,
end
:
40
},
{
type
:
'
slider
'
,
xAxisIndex
:
0
}
]
};
testHelper
.
create
(
echarts
,
'
d5
'
,
{
title
:
[
'
Simulate browser scroll bar on x scroll, x axis inversed
'
,
'
The scroll direction should be the same as page scroll
'
],
option
:
option
,
height
:
400
});
})
</script>
</body>
</body>
</html>
</html>
\ No newline at end of file
test/finished.html
浏览文件 @
1c2b29b5
...
@@ -42,29 +42,32 @@ under the License.
...
@@ -42,29 +42,32 @@ under the License.
position
:
absolute
;
position
:
absolute
;
right
:
10px
;
right
:
10px
;
top
:
10px
;
top
:
10px
;
width
:
2
2
0px
;
width
:
2
0
0px
;
height
:
20
0px
;
height
:
18
0px
;
background
:
#fff
;
background
:
#fff
;
border
:
5px
solid
rgba
(
0
,
0
,
0
,
0.5
);
border
:
5px
solid
rgba
(
0
,
0
,
0
,
0.5
);
z-index
:
100
;
}
}
.snapshot-finished
{
.snapshot-finished
{
position
:
absolute
;
position
:
absolute
;
right
:
10px
;
right
:
10px
;
bottom
:
1
0px
;
bottom
:
3
0px
;
width
:
2
2
0px
;
width
:
2
0
0px
;
height
:
20
0px
;
height
:
18
0px
;
background
:
#fff
;
background
:
#fff
;
border
:
5px
solid
rgba
(
0
,
0
,
0
,
0.5
);
border
:
5px
solid
rgba
(
0
,
0
,
0
,
0.5
);
z-index
:
100
;
}
}
.snapshot-info
{
.snapshot-info
{
position
:
absolute
;
position
:
absolute
;
right
:
10px
;
right
:
10px
;
width
:
2
2
0px
;
width
:
2
0
0px
;
text-align
:
center
;
text-align
:
center
;
background
:
#333
;
background
:
#333
;
color
:
#fff
;
color
:
#fff
;
padding
:
2px
5px
;
padding
:
2px
5px
;
font-size
:
12px
;
font-size
:
12px
;
z-index
:
100
;
}
}
.snapshot-info
span
{
.snapshot-info
span
{
color
:
yellow
;
color
:
yellow
;
...
@@ -191,7 +194,10 @@ under the License.
...
@@ -191,7 +194,10 @@ under the License.
};
};
var
chart
=
testHelper
.
create
(
echarts
,
'
main0
'
,
{
var
chart
=
testHelper
.
create
(
echarts
,
'
main0
'
,
{
title
:
'
finished should be triggered, and not repeatly
'
,
title
:
[
'
finished should be triggered, and not repeatly
'
,
'
finished should not triggered before real finished
'
],
option
:
option
option
:
option
});
});
...
@@ -208,7 +214,8 @@ under the License.
...
@@ -208,7 +214,8 @@ under the License.
require
([
'
echarts
'
],
function
(
echarts
)
{
require
([
'
echarts
'
],
function
(
echarts
)
{
var
option
=
{
var
option
=
{
legend
:
{},
legend
:
{},
animationDurationUpdate
:
1500
,
animationDuration
:
4000
,
animationDurationUpdate
:
5500
,
dataset
:
{
dataset
:
{
source
:
[
source
:
[
{
name
:
'
a
'
,
value
:
123
},
{
name
:
'
a
'
,
value
:
123
},
...
@@ -224,8 +231,8 @@ under the License.
...
@@ -224,8 +231,8 @@ under the License.
var
chart
=
testHelper
.
create
(
echarts
,
'
main1
'
,
{
var
chart
=
testHelper
.
create
(
echarts
,
'
main1
'
,
{
title
:
'
Check animation normal.
\n
finished should be triggered, and not repeatly
'
,
title
:
'
Check animation normal.
\n
finished should be triggered, and not repeatly
'
,
option
:
option
,
option
:
option
info
:
option
//
info: option
});
});
chart
&&
enableSnapshot
(
chart
,
'
main1
'
);
chart
&&
enableSnapshot
(
chart
,
'
main1
'
);
...
...
test/largeScatterWithEmpty.html
浏览文件 @
1c2b29b5
...
@@ -49,8 +49,8 @@ under the License.
...
@@ -49,8 +49,8 @@ under the License.
right
:
0
;
right
:
0
;
}
}
.chart
{
.chart
{
margin
:
10
0
px
;
margin
:
10px
;
background
:
#333
;
/* background: #333; */
height
:
300px
;
height
:
300px
;
}
}
</style>
</style>
...
@@ -58,7 +58,7 @@ under the License.
...
@@ -58,7 +58,7 @@ under the License.
<div
style=
"padding: 100px;"
>
<div
style=
"padding: 100px;"
>
<h2>
'-' exists in data. tooltip shoule be displayed normally.
</h2>
<h2>
'-' exists in data. tooltip shoule be displayed normally.
</h2>
<div
class=
"chart"
id=
"main"
></div>
<div
class=
"chart"
id=
"main
0
"
></div>
</div>
</div>
...
@@ -74,25 +74,9 @@ under the License.
...
@@ -74,25 +74,9 @@ under the License.
require
([
require
([
'
echarts
'
'
echarts
'
// 'echarts/chart/line',
// 'echarts/chart/bar',
// 'echarts/chart/pie',
// 'echarts/chart/scatter',
// 'echarts/chart/map',
// 'echarts/chart/parallel',
// 'echarts/chart/radar',
// 'echarts/component/grid',
// 'echarts/component/polar',
// 'echarts/component/geo',
// 'echarts/component/singleAxis',
// 'echarts/component/legend',
// 'echarts/component/tooltip',
// 'echarts/component/toolbox',
// 'echarts/component/visualMap',
// 'echarts/component/dataZoom'
],
function
(
ec
)
{
],
function
(
ec
)
{
echarts
=
ec
;
echarts
=
ec
;
chart
=
myChart
=
echarts
.
init
(
document
.
getElementById
(
'
main
'
));
chart
=
myChart
=
echarts
.
init
(
document
.
getElementById
(
'
main
0
'
));
option
=
{
option
=
{
tooltip
:
{
tooltip
:
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录