Skip to content

I
incubator-echarts

半栈学徒 / incubator-echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 5
Star 0
Fork 0
I
incubator-echarts

体验新版 GitCode，发现更多精彩内容 >>

提交 1c2b29b5 编写于 作者: S sushuang
浏览文件
操作

fix: datazoom scroll direction.

上级 4e0d145f
显示空白变更内容
内联 并排
Showing with 242 addition and 34 deletion
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: 600 height: 400
}); });
}) })
</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: 220px; width: 200px;
height: 200px; height: 180px;
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: 10px; bottom: 30px;
width: 220px; width: 200px;
height: 200px; height: 180px;
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: 220px; width: 200px;
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. \nfinished should be triggered, and not repeatly', title: 'Check animation normal. \nfinished 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: 100px; 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="main0"></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('main0'));
option = { option = {
tooltip : { tooltip : {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或