Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
x649585723
incubator-echarts
提交
8ab91834
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,体验更适合开发者的 AI 搜索 >>
提交
8ab91834
编写于
2月 28, 2016
作者:
P
pah100
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix data process order and consider axis min/max/scale.
上级
adcf9e45
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
393 addition
and
15 deletion
+393
-15
src/component/dataZoom/AxisProxy.js
src/component/dataZoom/AxisProxy.js
+34
-9
src/component/dataZoom/DataZoomModel.js
src/component/dataZoom/DataZoomModel.js
+5
-1
src/component/dataZoom/dataZoomProcessor.js
src/component/dataZoom/dataZoomProcessor.js
+17
-5
test/dataZoom-axes.html
test/dataZoom-axes.html
+337
-0
未找到文件。
src/component/dataZoom/AxisProxy.js
浏览文件 @
8ab91834
...
...
@@ -31,6 +31,7 @@ define(function(require) {
this
.
_axisIndex
=
axisIndex
;
/**
* {scale, min, max}
* @private
* @type {Object}
*/
...
...
@@ -73,6 +74,7 @@ define(function(require) {
/**
* Whether the axisProxy is hosted by dataZoomModel.
*
* @public
* @param {module: echarts/component/dataZoom/DataZoomModel} dataZoomModel
* @return {boolean}
...
...
@@ -176,12 +178,12 @@ define(function(require) {
}
// Culculate data window and data extent, and record them.
var
axisDim
=
this
.
_dimName
;
var
axisModel
=
this
.
getAxisModel
();
var
seriesModels
=
this
.
getTargetSeriesModels
(
);
var
dataExtent
=
this
.
_dataExtent
=
calculateDataExtent
(
axisDim
,
seriesModels
);
var
dataWindow
=
calculateDataWindow
(
dataZoomModel
.
option
,
dataExtent
,
axisModel
);
var
dataExtent
=
this
.
_dataExtent
=
calculateDataExtent
(
this
.
_dimName
,
this
.
getTargetSeriesModels
()
);
var
dataWindow
=
calculateDataWindow
(
dataZoomModel
.
option
,
dataExtent
,
this
);
this
.
_valueWindow
=
dataWindow
.
valueWindow
;
this
.
_percentWindow
=
dataWindow
.
percentWindow
;
...
...
@@ -267,16 +269,23 @@ define(function(require) {
return
dataExtent
;
}
function
calculateDataWindow
(
opt
,
dataExtent
,
axisModel
)
{
function
calculateDataWindow
(
opt
,
dataExtent
,
axisProxy
)
{
var
axisModel
=
axisProxy
.
getAxisModel
();
var
scale
=
axisModel
.
axis
.
scale
;
var
percentExtent
=
[
0
,
100
];
var
percentWindow
=
[
opt
.
start
,
opt
.
end
];
var
scale
=
axisModel
.
axis
.
scale
;
var
valueWindow
=
[];
// In percent range is used and axis min/max/scale is set,
// window should be based on min/max/0, but should not be
// based on the extent of filtered data.
var
backup
=
axisProxy
.
_backup
;
dataExtent
=
dataExtent
.
slice
();
fixExtendByAxis
(
dataExtent
,
backup
,
scale
);
each
([
'
startValue
'
,
'
endValue
'
],
function
(
prop
)
{
valueWindow
.
push
(
opt
[
prop
]
!=
null
...
...
@@ -318,6 +327,22 @@ define(function(require) {
};
}
function
fixExtendByAxis
(
dataExtent
,
backup
,
scale
)
{
each
([
'
min
'
,
'
max
'
],
function
(
minMax
,
index
)
{
var
axisMax
=
backup
[
minMax
];
if
(
axisMax
!=
null
)
{
dataExtent
[
index
]
=
scale
.
parse
(
axisMax
);
}
});
if
(
!
backup
.
scale
)
{
dataExtent
[
0
]
>
0
&&
(
dataExtent
[
0
]
=
0
);
dataExtent
[
1
]
<
0
&&
(
dataExtent
[
1
]
=
0
);
}
return
dataExtent
;
}
function
setAxisModel
(
axisProxy
,
isRestore
)
{
var
axisModel
=
axisProxy
.
getAxisModel
();
...
...
src/component/dataZoom/DataZoomModel.js
浏览文件 @
8ab91834
...
...
@@ -31,12 +31,16 @@ define(function(require) {
yAxisIndex
:
null
,
// Default all vertical category axis.
angleAxisIndex
:
null
,
radiusAxisIndex
:
null
,
filterMode
:
'
filter
'
,
//
'filter' or 'empty'
filterMode
:
'
filter
'
,
//
Possible values: 'filter' or 'empty'.
// 'filter': data items which are out of window will be removed.
// This option is applicable when filtering outliers.
// 'empty': data items which are out of window will be set to empty.
// This option is applicable when user should not neglect
// that there are some data items out of window.
// Taking line chart as an example, line will be broken in
// the filtered points when filterModel is set to 'empty', but
// be connected when set to 'filter'.
throttle
:
100
,
// Dispatch action by the fixed rate, avoid frequency.
// default 100. Do not throttle when use null/undefined.
start
:
0
,
// Start percent. 0 ~ 100
...
...
src/component/dataZoom/dataZoomProcessor.js
浏览文件 @
8ab91834
...
...
@@ -10,8 +10,24 @@ define(function (require) {
ecModel
.
eachComponent
(
'
dataZoom
'
,
function
(
dataZoomModel
)
{
// We calculate window and reset axis here but not in model
// init stage and not after action dispatch handler, because
//
those reset should be done
after seriesData.restoreData.
//
reset should be called
after seriesData.restoreData.
dataZoomModel
.
eachTargetAxis
(
resetSingleAxis
);
// Caution: data zoom filtering is order sensitive when using
// percent range and no min/max/scale set on axis.
// For example, we have dataZoom definition:
// [
// {xAxisIndex: 0, start: 30, end: 70},
// {yAxisIndex: 0, start: 20, end: 80}
// ]
// In this case, [20, 80] of y-dataZoom should be based on data
// that have filtered by x-dataZoom using range of [30, 70],
// but should not be based on full raw data. Thus sliding
// x-dataZoom will change both ranges of xAxis and yAxis,
// while sliding y-dataZoom will only change the range of yAxis.
// So we should filter x-axis after reset x-axis immediately,
// and then reset y-axis and filter y-axis.
dataZoomModel
.
eachTargetAxis
(
filterSingleAxis
);
});
ecModel
.
eachComponent
(
'
dataZoom
'
,
function
(
dataZoomModel
)
{
...
...
@@ -27,10 +43,6 @@ define(function (require) {
endValue
:
valueRange
[
1
]
});
});
ecModel
.
eachComponent
(
'
dataZoom
'
,
function
(
dataZoomModel
)
{
dataZoomModel
.
eachTargetAxis
(
filterSingleAxis
);
});
});
function
resetSingleAxis
(
dimNames
,
axisIndex
,
dataZoomModel
)
{
...
...
test/dataZoom-axes.html
0 → 100644
浏览文件 @
8ab91834
<html>
<head>
<meta
charset=
"utf-8"
>
<script
src=
"esl.js"
></script>
<script
src=
"config.js"
></script>
</head>
<body>
<style>
#main
{
position
:
relative
;
text-align
:
center
;
}
.title
{
display
:
block
;
cursor
:
pointer
;
text-decoration
:
none
;
clear
:
both
;
text-align
:
center
;
margin
:
0
;
background
:
#eef
;
line-height
:
22px
;
}
.block
{
display
:
inline-block
;
*
display
:
inline
;
*
zoom
:
1
;
vertical-align
:
top
;
margin
:
30px
0
30px
50px
;
}
.block
.ec
{
width
:
800px
;
height
:
240px
;
}
.block
.info
{
display
:
block
;
text-align
:
left
;
background
:
#eee
;
border-radius
:
3px
;
font-size
:
12px
;
line-height
:
18px
;
padding
:
0
5px
;
}
.block
.info
td
{
font-size
:
12px
;
border
:
1px
solid
#bbb
;
padding
:
1px
3px
;
}
strong
{
color
:
red
;
font-weight
:
bold
;
font-size
:
18px
;
padding
:
0
3px
;
}
</style>
<div
id=
"main"
></div>
<script>
var
echarts
;
var
zrUtil
;
var
charts
=
[];
var
els
=
[];
require
([
'
echarts
'
,
'
zrender/core/util
'
,
'
echarts/chart/line
'
,
'
echarts/chart/scatter
'
,
'
echarts/component/legend
'
,
'
echarts/component/grid
'
,
'
echarts/component/tooltip
'
,
'
echarts/component/toolbox
'
,
'
echarts/component/dataZoom
'
],
function
(
ec
,
zu
)
{
echarts
=
ec
;
zrUtil
=
zu
;
renderTitle
(
'
Order sensitive in processing: no min/max on y (<strong>Try zooming y slider to check if normal</strong>)
'
);
makeChart
(
getOption
(
makeSpecialTrendData
(),
{
xAxisType
:
'
value
'
,
xStart
:
15
,
xEnd
:
80
,
yScale
:
true
,
symbolSize
:
5
}
),
500
);
renderTitle
(
'
Order sensitive in processing: min/max set on y (<strong>Try zooming y slider to check if normal</strong>)
'
);
makeChart
(
getOption
(
makeSpecialTrendData
(),
{
xAxisType
:
'
value
'
,
xStart
:
15
,
xEnd
:
80
,
yScale
:
true
,
symbolSize
:
5
,
yMin
:
500
,
yMax
:
3000
}
),
500
);
renderTitle
(
'
Order sensitive in processing: only max set on y and scale (<strong>Try zooming y slider to check if normal</strong>)
'
);
makeChart
(
getOption
(
makeSpecialTrendData
(),
{
xAxisType
:
'
value
'
,
xStart
:
15
,
xEnd
:
80
,
yScale
:
true
,
symbolSize
:
5
,
yMax
:
3000
}
),
500
);
renderTitle
(
'
Order sensitive in processing: only max set on y and no scale (<strong>Try zooming y slider to check if normal</strong>)
'
);
makeChart
(
getOption
(
makeSpecialTrendData
(),
{
xAxisType
:
'
value
'
,
xStart
:
15
,
xEnd
:
80
,
yScale
:
false
,
symbolSize
:
5
,
yMax
:
3000
}
),
500
);
});
function
makeSpecialTrendData
()
{
var
data
=
{
data1
:
[]};
var
base
=
-
100
;
for
(
var
i
=
0
;
i
<
50
;
i
++
)
{
if
(
i
<
10
)
{
data
.
data1
.
push
([
i
*
10
,
base
+=
197
+
random
(
3
)]);
}
else
if
(
i
<
20
)
{
data
.
data1
.
push
([
i
*
10
,
base
-=
17
+
random
(
3
)]);
}
else
if
(
i
<
30
)
{
data
.
data1
.
push
([
i
*
10
,
base
+=
3
+
random
(
3
)]);
}
else
if
(
i
<
40
)
{
data
.
data1
.
push
([
i
*
10
,
base
-=
5
+
random
(
3
)]);
}
else
{
data
.
data1
.
push
([
i
*
10
,
base
+=
157
+
random
(
3
)]);
}
}
return
data
;
}
function
renderTitle
(
label
)
{
var
containerEl
=
document
.
getElementById
(
'
main
'
);
var
el
=
document
.
createElement
(
'
a
'
);
el
.
className
=
'
title
'
;
var
html
=
label
;
// label is html
el
.
innerHTML
=
html
;
el
.
href
=
'
#
'
+
html
.
replace
(
/
\s
/g
,
'
_
'
);
el
.
name
=
html
.
replace
(
/
\s
/g
,
'
_
'
);
containerEl
.
appendChild
(
el
);
}
function
makeChart
(
opt
,
height
)
{
var
heightStyle
=
height
?
'
style="height:
'
+
height
+
'
px;"
'
:
''
;
var
containerEl
=
document
.
getElementById
(
'
main
'
);
var
el
=
document
.
createElement
(
'
div
'
);
el
.
className
=
'
block
'
;
el
.
innerHTML
=
'
<div
'
+
heightStyle
+
'
class="ec"></div><div class="info"></div>
'
;
containerEl
.
appendChild
(
el
);
var
chart
=
echarts
.
init
(
el
.
firstChild
,
null
,
{
renderer
:
'
canvas
'
});
chart
.
setOption
(
opt
);
charts
.
push
(
chart
);
els
.
push
(
el
);
chart
.
on
(
'
dataZoom
'
,
zrUtil
.
curry
(
renderProp
,
chart
,
el
,
false
));
renderProp
(
chart
,
el
,
true
);
}
function
renderProp
(
chart
,
el
,
isInit
)
{
var
resultOpt
=
chart
.
getOption
();
var
dataZoomOpt
=
zrUtil
.
map
(
resultOpt
.
dataZoom
,
function
(
rawOpt
)
{
return
''
+
'
<tr>
'
+
'
<td>name:</td><td>
'
+
encodeHTML
(
rawOpt
.
name
)
+
'
</td>
'
+
'
<td>start:</td><td>
'
+
encodeHTML
(
rawOpt
.
start
)
+
'
</td>
'
+
'
<td>end:</td><td>
'
+
encodeHTML
(
rawOpt
.
end
)
+
'
</td>
'
+
'
<td>startValue:</td><td>
'
+
encodeHTML
(
rawOpt
.
startValue
)
+
'
</td>
'
+
'
<td>endValue:</td><td>
'
+
encodeHTML
(
rawOpt
.
endValue
)
+
'
</td>
'
+
'
</tr>
'
;
});
el
.
lastChild
.
innerHTML
=
''
+
(
isInit
?
'
ON_INIT:
'
:
'
ON_EVENT:
'
)
+
'
<br>
'
+
'
<table><tbody>
'
+
dataZoomOpt
.
join
(
''
)
+
'
</tbody></table>
'
;
}
function
encodeHTML
(
source
)
{
return
source
==
null
?
''
:
String
(
source
)
.
replace
(
/&/g
,
'
&
'
)
.
replace
(
/</g
,
'
<
'
)
.
replace
(
/>/g
,
'
>
'
)
.
replace
(
/"/g
,
'
"
'
)
.
replace
(
/'/g
,
'
'
'
);
}
function
random
(
max
)
{
return
+
(
Math
.
random
()
*
max
).
toFixed
(
3
);
};
function
getOption
(
data
,
args
)
{
args
=
zrUtil
.
defaults
(
args
||
{},
{
symbol
:
null
,
xStart
:
1
,
xEnd
:
5
,
yStart
:
0
,
yEnd
:
100
,
yFitlerMode
:
'
empty
'
,
symbolSize
:
10
}
);
var
option
=
{
animation
:
false
,
legend
:
{
data
:
[
'
n1
'
,
'
n2
'
]
},
toolbox
:
{
feature
:
{
dataView
:
{},
dataZoom
:
{
show
:
true
},
restore
:
{
show
:
true
},
saveAsImage
:
{}
}
},
tooltip
:
{
trigger
:
'
axis
'
},
xAxis
:
{
type
:
args
.
xAxisType
,
splitLine
:
{
show
:
true
},
data
:
args
.
xAxisData
},
yAxis
:
{
scale
:
args
.
yScale
,
type
:
'
value
'
,
min
:
args
.
yMin
,
max
:
args
.
yMax
,
splitLine
:
{
show
:
true
}
},
dataZoom
:
[
{
id
:
'
xSlider
'
,
name
:
'
xSlider
'
,
show
:
true
,
filterMode
:
args
.
xFilterMode
,
xAxisIndex
:
[
0
],
start
:
args
.
xStart
,
end
:
args
.
xEnd
},
{
name
:
'
ySlider
'
,
show
:
true
,
filterMode
:
args
.
yFitlerMode
,
yAxisIndex
:
[
0
],
start
:
args
.
yStart
,
end
:
args
.
yEnd
},
{
name
:
'
xInside
'
,
type
:
'
inside
'
,
filterMode
:
args
.
xFilterMode
,
xAxisIndex
:
[
0
],
start
:
args
.
xStart
,
end
:
args
.
xEnd
},
{
name
:
'
yInside
'
,
type
:
'
inside
'
,
filterMode
:
args
.
yFilterMode
,
yAxisIndex
:
[
0
],
start
:
args
.
yStart
,
end
:
args
.
yEnd
}
],
series
:
[
{
name
:
'
n1
'
,
type
:
'
line
'
,
symbolSize
:
args
.
symbolSize
,
symbol
:
args
.
symbol
,
data
:
data
.
data1
},
{
name
:
'
n2
'
,
type
:
'
line
'
,
symbol
:
args
.
symbol
,
symbolSize
:
args
.
symbolSize
,
data
:
data
.
data2
}
]
};
if
(
!
data
.
data2
)
{
option
.
series
.
splice
(
1
,
1
);
}
return
option
;
}
</script>
</body>
</html>
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录