Skip to content

I
incubator-echarts

x649585723 / incubator-echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
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 = {
* @this {module:echarts/component/dataZoom/InsideZoomView}
*/
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) {
var batch = [];
zrUtil.each(newRecord.dataZoomInfos, function (info) {
// Check whether the behaviors (zoomOnMouseWheel, moveOnMouseMove,
// moveOnMouseWheel, ...) enabled.
if (!event.isAvailableBehavior(info.dataZoomModel.option)) {
return;
}
......@@ -207,6 +209,7 @@ function mergeControllerParams(dataZoomInfos) {
if (typePriority[prefix + oneType] > typePriority[prefix + controlType]) {
controlType = oneType;
}
// 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.
preventDefaultMouseMove &= dataZoomModel.get('preventDefaultMouseMove', true);
......@@ -215,6 +218,9 @@ function mergeControllerParams(dataZoomInfos) {
return {
controlType: controlType,
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,
moveOnMouseMove: true,
moveOnMouseWheel: true,
......
src/component/helper/RoamController.js
浏览文件 @ 1c2b29b5
......@@ -195,7 +195,11 @@ function mousewheel(e) {
if (wheelDelta === 0 || (!shouldZoom && !shouldMove)) {
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) {
// Convenience:
// Mac and VM Windows on Mac: scroll up: zoom out.
......@@ -212,7 +216,7 @@ function mousewheel(e) {
scale: scale, originX: originX, originY: originY
});
}
// console.log(shouldMove);
if (shouldMove) {
// FIXME: Should do more test in different environment.
var absDelta = Math.abs(wheelDelta);
......
test/dataZoom-scroll.html
浏览文件 @ 1c2b29b5
......@@ -44,6 +44,8 @@ under the License.
</style>
<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.
testHelper.create(echarts, 'd3', {
title: 'Simulate browser scroll bar on y scroll',
option: option,
height: 600
height: 400
});
})
</script>
......@@ -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>
</html>
\ No newline at end of file
test/finished.html
浏览文件 @ 1c2b29b5
......@@ -42,29 +42,32 @@ under the License.
position: absolute;
right: 10px;
top: 10px;
width: 220px;
height: 200px;
width: 200px;
height: 180px;
background: #fff;
border: 5px solid rgba(0,0,0,0.5);
z-index: 100;
}
.snapshot-finished {
position: absolute;
right: 10px;
bottom: 10px;
width: 220px;
height: 200px;
bottom: 30px;
width: 200px;
height: 180px;
background: #fff;
border: 5px solid rgba(0,0,0,0.5);
z-index: 100;
}
.snapshot-info {
position: absolute;
right: 10px;
width: 220px;
width: 200px;
text-align: center;
background: #333;
color: #fff;
padding: 2px 5px;
font-size: 12px;
z-index: 100;
}
.snapshot-info span {
color: yellow;
......@@ -191,7 +194,10 @@ under the License.
};
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
});
......@@ -208,7 +214,8 @@ under the License.
require(['echarts'], function (echarts) {
var option = {
legend: {},
animationDurationUpdate: 1500,
animationDuration: 4000,
animationDurationUpdate: 5500,
dataset: {
source: [
{name: 'a', value: 123},
......@@ -224,8 +231,8 @@ under the License.
var chart = testHelper.create(echarts, 'main1', {
title: 'Check animation normal. \nfinished should be triggered, and not repeatly',
option: option,
info: option
option: option
// info: option
});
chart && enableSnapshot(chart, 'main1');
......
test/largeScatterWithEmpty.html
浏览文件 @ 1c2b29b5
......@@ -49,8 +49,8 @@ under the License.
right: 0;
}
.chart {
margin: 100px;
background: #333;
margin: 10px;
/* background: #333; */
height: 300px;
}
</style>
......@@ -58,7 +58,7 @@ under the License.
<div style="padding: 100px;">
<h2>'-' exists in data. tooltip shoule be displayed normally.</h2>
<div class="chart" id="main"></div>
<div class="chart" id="main0"></div>
</div>
......@@ -74,25 +74,9 @@ under the License.
require([
'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) {
echarts = ec;
chart = myChart = echarts.init(document.getElementById('main'));
chart = myChart = echarts.init(document.getElementById('main0'));
option = {
tooltip : {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或