Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
半栈学徒
incubator-echarts
提交
0ab7a4cf
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,发现更多精彩内容 >>
提交
0ab7a4cf
编写于
5月 27, 2016
作者:
P
pah100
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
parallel support smooth, progressive
上级
43165d25
变更
6
隐藏空白更改
内联
并排
Showing
6 changed file
with
280 addition
and
91 deletion
+280
-91
src/chart/parallel/ParallelSeries.js
src/chart/parallel/ParallelSeries.js
+10
-1
src/chart/parallel/ParallelView.js
src/chart/parallel/ParallelView.js
+45
-87
src/component/tooltip/TooltipView.js
src/component/tooltip/TooltipView.js
+3
-1
src/data/List.js
src/data/List.js
+2
-1
src/util/model.js
src/util/model.js
+1
-1
test/parallel-nutrients.html
test/parallel-nutrients.html
+219
-0
未找到文件。
src/chart/parallel/ParallelSeries.js
浏览文件 @
0ab7a4cf
...
...
@@ -32,6 +32,9 @@ define(function(require) {
translateCategoryValue
(
axisModel
,
dim
,
rawData
);
return
{
name
:
dim
,
type
:
'
ordinal
'
};
}
else
if
(
modelDimsIndex
<
0
)
{
return
{
name
:
dim
,
type
:
'
unknown
'
};
}
else
{
return
dim
;
}
...
...
@@ -40,6 +43,11 @@ define(function(require) {
var
list
=
new
List
(
dataDimsInfo
,
this
);
list
.
initData
(
rawData
);
// Anication is forbiden in large data mode.
if
(
this
.
option
.
large
)
{
this
.
option
.
animation
=
false
;
}
return
list
;
},
...
...
@@ -90,7 +98,8 @@ define(function(require) {
type
:
'
solid
'
}
},
// smooth: false
progressive
:
false
,
// 100
smooth
:
false
,
animationEasing
:
'
linear
'
}
...
...
src/chart/parallel/ParallelView.js
浏览文件 @
0ab7a4cf
...
...
@@ -2,6 +2,9 @@ define(function (require) {
var
graphic
=
require
(
'
../../util/graphic
'
);
var
zrUtil
=
require
(
'
zrender/core/util
'
);
var
polyHelper
=
require
(
'
../line/poly
'
);
var
SMOOTH
=
0.3
;
var
ParallelView
=
require
(
'
../../view/Chart
'
).
extend
({
...
...
@@ -31,6 +34,9 @@ define(function (require) {
var
oldData
=
this
.
_data
;
var
coordSys
=
seriesModel
.
coordinateSystem
;
var
dimensions
=
coordSys
.
dimensions
;
var
option
=
seriesModel
.
option
;
var
progressive
=
option
.
progressive
;
var
smooth
=
option
.
smooth
?
SMOOTH
:
null
;
data
.
diff
(
oldData
)
.
add
(
add
)
...
...
@@ -39,19 +45,18 @@ define(function (require) {
.
execute
();
// Update style
data
.
eachItemGraphicEl
(
function
(
elGroup
,
idx
)
{
data
.
eachItemGraphicEl
(
function
(
line
,
idx
)
{
var
itemModel
=
data
.
getItemModel
(
idx
);
var
lineStyleModel
=
itemModel
.
getModel
(
'
lineStyle.normal
'
);
elGroup
.
eachChild
(
function
(
child
)
{
child
.
useStyle
(
zrUtil
.
extend
(
lineStyleModel
.
getLineStyle
(),
{
fill
:
null
,
stroke
:
data
.
getItemVisual
(
idx
,
'
color
'
),
opacity
:
data
.
getItemVisual
(
idx
,
'
opacity
'
)
}
));
});
line
.
useStyle
(
zrUtil
.
extend
(
lineStyleModel
.
getLineStyle
(),
{
fill
:
null
,
stroke
:
data
.
getItemVisual
(
idx
,
'
color
'
),
opacity
:
data
.
getItemVisual
(
idx
,
'
opacity
'
)
}
));
});
// First create
...
...
@@ -66,64 +71,23 @@ define(function (require) {
this
.
_data
=
data
;
function
add
(
newDataIndex
)
{
var
values
=
data
.
getValues
(
dimensions
,
newDataIndex
);
var
elGroup
=
new
graphic
.
Group
();
dataGroup
.
add
(
elGroup
);
eachAxisPair
(
values
,
dimensions
,
coordSys
,
function
(
pointPair
,
pairIndex
)
{
// FIXME
// init animation
if
(
pointPair
)
{
elGroup
.
add
(
createEl
(
pointPair
));
}
}
);
data
.
setItemGraphicEl
(
newDataIndex
,
elGroup
);
var
points
=
createLinePoints
(
data
,
newDataIndex
,
dimensions
,
coordSys
);
var
line
=
createPoly
(
points
,
newDataIndex
,
progressive
,
smooth
);
dataGroup
.
add
(
line
);
data
.
setItemGraphicEl
(
newDataIndex
,
line
);
}
function
update
(
newDataIndex
,
oldDataIndex
)
{
var
values
=
data
.
getValues
(
dimensions
,
newDataIndex
);
var
elGroup
=
oldData
.
getItemGraphicEl
(
oldDataIndex
);
var
newEls
=
[];
var
elGroupIndex
=
0
;
eachAxisPair
(
values
,
dimensions
,
coordSys
,
function
(
pointPair
,
pairIndex
)
{
var
el
=
elGroup
.
childAt
(
elGroupIndex
++
);
if
(
pointPair
&&
!
el
)
{
newEls
.
push
(
createEl
(
pointPair
));
}
else
if
(
pointPair
)
{
graphic
.
updateProps
(
el
,
{
shape
:
{
points
:
pointPair
}
},
seriesModel
,
newDataIndex
);
}
}
);
// Remove redundent els
for
(
var
i
=
elGroup
.
childCount
()
-
1
;
i
>=
elGroupIndex
;
i
--
)
{
elGroup
.
remove
(
elGroup
.
childAt
(
i
));
}
// Add new els
for
(
var
i
=
0
,
len
=
newEls
.
length
;
i
<
len
;
i
++
)
{
elGroup
.
add
(
newEls
[
i
]);
}
data
.
setItemGraphicEl
(
newDataIndex
,
elGroup
);
var
line
=
oldData
.
getItemGraphicEl
(
oldDataIndex
);
var
points
=
createLinePoints
(
data
,
newDataIndex
,
dimensions
,
coordSys
);
line
.
shape
.
points
=
points
;
line
.
dirty
();
data
.
setItemGraphicEl
(
newDataIndex
,
line
);
}
function
remove
(
oldDataIndex
)
{
var
elGroup
=
oldData
.
getItemGraphicEl
(
oldDataIndex
);
dataGroup
.
remove
(
elGroup
);
var
line
=
oldData
.
getItemGraphicEl
(
oldDataIndex
);
dataGroup
.
remove
(
line
);
}
},
...
...
@@ -158,35 +122,29 @@ define(function (require) {
return
rectEl
;
}
function
eachAxisPair
(
values
,
dimensions
,
coordSys
,
cb
)
{
for
(
var
i
=
0
,
len
=
dimensions
.
length
-
1
;
i
<
len
;
i
++
)
{
var
dimA
=
dimensions
[
i
];
var
dimB
=
dimensions
[
i
+
1
];
var
valueA
=
values
[
i
];
var
valueB
=
values
[
i
+
1
];
cb
(
(
isEmptyValue
(
valueA
,
coordSys
.
getAxis
(
dimA
).
type
)
||
isEmptyValue
(
valueB
,
coordSys
.
getAxis
(
dimB
).
type
)
)
?
null
:
[
coordSys
.
dataToPoint
(
valueA
,
dimA
),
coordSys
.
dataToPoint
(
valueB
,
dimB
)
],
i
);
}
function
createPoly
(
points
,
dataIndex
,
progressive
,
smooth
)
{
return
new
polyHelper
.
Polyline
({
shape
:
{
points
:
points
,
smooth
:
smooth
},
silent
:
true
,
progressive
:
progressive
?
Math
.
round
(
dataIndex
/
progressive
)
:
0
,
z2
:
10
});
}
function
createEl
(
pointPair
)
{
return
new
graphic
.
Polyline
({
shape
:
{
points
:
pointPair
},
silent
:
true
function
createLinePoints
(
data
,
dataIndex
,
dimensions
,
coordSys
)
{
var
points
=
[];
zrUtil
.
each
(
dimensions
,
function
(
dimName
)
{
var
value
=
data
.
get
(
dimName
,
dataIndex
);
if
(
!
isEmptyValue
(
value
,
coordSys
.
getAxis
(
dimName
).
type
))
{
points
.
push
(
coordSys
.
dataToPoint
(
value
,
dimName
));
}
});
return
points
;
}
// FIXME
// 公用方法?
function
isEmptyValue
(
val
,
axisType
)
{
...
...
src/component/tooltip/TooltipView.js
浏览文件 @
0ab7a4cf
...
...
@@ -1104,7 +1104,9 @@ define(function (require) {
});
}
else
{
this
.
group
.
hide
();
if
(
this
.
group
.
children
().
length
)
{
this
.
group
.
hide
();
}
}
},
...
...
src/data/List.js
浏览文件 @
0ab7a4cf
...
...
@@ -17,7 +17,8 @@ define(function (require) {
// Ordinal data type can be string or int
'
ordinal
'
:
Array
,
'
number
'
:
Array
,
'
time
'
:
Array
'
time
'
:
Array
,
'
unknown
'
:
Array
};
var
Model
=
require
(
'
../model/Model
'
);
...
...
src/util/model.js
浏览文件 @
0ab7a4cf
...
...
@@ -195,7 +195,7 @@ define(function(require) {
modelUtil
.
converDataValue
=
function
(
value
,
dimInfo
)
{
// Performance sensitive.
var
dimType
=
dimInfo
&&
dimInfo
.
type
;
if
(
dimType
===
'
ordinal
'
)
{
if
(
dimType
===
'
ordinal
'
||
dimType
===
'
unknown
'
)
{
return
value
;
}
...
...
test/parallel-nutrients.html
0 → 100644
浏览文件 @
0ab7a4cf
<
!
DOCTYPE
>
<html>
<head>
<meta
charset=
"utf-8"
>
<script
src=
"esl.js"
></script>
<script
src=
"config.js"
></script>
<script
src=
"lib/jquery.min.js"
></script>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1"
/>
<link
rel=
"stylesheet"
href=
"reset.css"
>
</head>
<body>
<style>
body
{
background
:
#333
;
}
#main
{
height
:
400px
;
}
</style>
<div
id=
"main"
></div>
<script>
var
echarts
;
var
colorTool
;
var
chart
;
var
myChart
;
var
groupCategories
=
[];
var
groupColors
=
[];
require
([
'
echarts
'
,
'
zrender/tool/color
'
,
'
echarts/chart/parallel
'
,
'
echarts/component/legend
'
,
'
echarts/component/tooltip
'
,
'
echarts/component/toolbox
'
,
'
echarts/component/visualMap
'
,
],
function
(
ec
,
ct
)
{
$
.
getJSON
(
'
./data/nutrients.json
'
,
function
(
data
)
{
echarts
=
ec
;
colorTool
=
ct
;
normalizeData
(
data
);
chart
=
myChart
=
echarts
.
init
(
document
.
getElementById
(
'
main
'
));
chart
.
setOption
(
getOption
(
data
));
});
var
indices
=
{
name
:
0
,
group
:
1
,
id
:
16
};
var
schema
=
[
{
name
:
'
name
'
,
index
:
0
},
{
name
:
'
group
'
,
index
:
1
},
{
name
:
'
protein
'
,
index
:
2
},
{
name
:
'
calcium
'
,
index
:
3
},
{
name
:
'
sodium
'
,
index
:
4
},
{
name
:
'
fiber
'
,
index
:
5
},
{
name
:
'
vitaminc
'
,
index
:
6
},
{
name
:
'
potassium
'
,
index
:
7
},
{
name
:
'
carbohydrate
'
,
index
:
8
},
{
name
:
'
sugars
'
,
index
:
9
},
{
name
:
'
fat
'
,
index
:
10
},
{
name
:
'
water
'
,
index
:
11
},
{
name
:
'
calories
'
,
index
:
12
},
{
name
:
'
saturated
'
,
index
:
13
},
{
name
:
'
monounsat
'
,
index
:
14
},
{
name
:
'
polyunsat
'
,
index
:
15
},
{
name
:
'
id
'
,
index
:
16
}
];
function
normalizeData
(
originData
)
{
var
groupMap
=
{};
originData
.
forEach
(
row
=>
{
var
groupName
=
row
[
indices
.
group
];
if
(
!
groupMap
.
hasOwnProperty
(
groupName
))
{
groupMap
[
groupName
]
=
1
;
}
});
originData
.
forEach
(
row
=>
{
row
.
forEach
((
item
,
index
)
=>
{
if
(
index
!==
indices
.
name
&&
index
!==
indices
.
group
&&
index
!==
indices
.
id
)
{
// Convert null to zero, as all of them under unit "g".
row
[
index
]
=
parseFloat
(
item
)
||
0
;
}
});
});
for
(
var
groupName
in
groupMap
)
{
if
(
groupMap
.
hasOwnProperty
(
groupName
))
{
groupCategories
.
push
(
groupName
);
}
}
var
hStep
=
Math
.
round
(
300
/
(
groupCategories
.
length
-
1
));
for
(
var
i
=
0
;
i
<
groupCategories
.
length
;
i
++
)
{
groupColors
.
push
(
colorTool
.
modifyHSL
(
'
#5A94DF
'
,
hStep
*
i
));
}
}
function
getOption
(
data
)
{
var
lineStyle
=
{
normal
:
{
width
:
1
,
opacity
:
0.01
// shadowBlur: 10,
// shadowOffsetX: 0,
// shadowOffsetY: 0,
// shadowColor: 'rgba(0, 0, 0, 0.5)'
}
};
return
{
backgroundColor
:
'
#333
'
,
tooltip
:
{
padding
:
10
,
backgroundColor
:
'
#222
'
,
borderColor
:
'
#777
'
,
borderWidth
:
1
,
formatter
:
function
(
obj
)
{
var
value
=
obj
[
0
].
value
;
return
'
<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">
'
+
schema
[
1
].
name
+
'
:
'
+
value
[
1
]
+
'
<br>
'
+
schema
[
2
].
name
+
'
:
'
+
value
[
2
]
+
'
<br>
'
+
schema
[
3
].
name
+
'
:
'
+
value
[
3
]
+
'
<br>
'
+
schema
[
4
].
name
+
'
:
'
+
value
[
4
]
+
'
<br>
'
+
schema
[
5
].
name
+
'
:
'
+
value
[
5
]
+
'
<br>
'
+
schema
[
6
].
name
+
'
:
'
+
value
[
6
]
+
'
<br>
'
;
}
},
visualMap
:
{
show
:
true
,
type
:
'
piecewise
'
,
categories
:
groupCategories
,
dimension
:
indices
.
group
,
inRange
:
{
color
:
groupColors
//['#d94e5d','#eac736','#50a3ba']
},
outOfRange
:
{
color
:
groupColors
//['#d94e5d','#eac736','#50a3ba']
}
},
parallelAxis
:
[
{
dim
:
2
,
name
:
schema
[
2
].
name
},
{
dim
:
4
,
name
:
schema
[
4
].
name
},
{
dim
:
3
,
name
:
schema
[
3
].
name
},
{
dim
:
5
,
name
:
schema
[
5
].
name
},
{
dim
:
6
,
name
:
schema
[
6
].
name
},
{
dim
:
7
,
name
:
schema
[
7
].
name
},
{
dim
:
8
,
name
:
schema
[
8
].
name
},
{
dim
:
9
,
name
:
schema
[
9
].
name
},
{
dim
:
10
,
name
:
schema
[
10
].
name
},
{
dim
:
11
,
name
:
schema
[
11
].
name
},
{
dim
:
12
,
name
:
schema
[
12
].
name
},
{
dim
:
13
,
name
:
schema
[
13
].
name
},
{
dim
:
14
,
name
:
schema
[
14
].
name
},
{
dim
:
15
,
name
:
schema
[
15
].
name
},
{
dim
:
16
,
name
:
schema
[
16
].
name
,
scale
:
true
}
],
parallel
:
{
bottom
:
100
,
parallelAxisDefault
:
{
type
:
'
value
'
,
name
:
'
nutrients
'
,
nameLocation
:
'
end
'
,
nameGap
:
20
,
nameTextStyle
:
{
color
:
'
#fff
'
,
fontSize
:
14
},
axisLine
:
{
lineStyle
:
{
color
:
'
#aaa
'
}
},
axisTick
:
{
lineStyle
:
{
color
:
'
#777
'
}
},
splitLine
:
{
show
:
false
},
axisLabel
:
{
textStyle
:
{
color
:
'
#fff
'
}
}
}
},
animation
:
false
,
series
:
[
{
name
:
'
nutrients
'
,
type
:
'
parallel
'
,
lineStyle
:
lineStyle
,
inactiveOpacity
:
0
,
activeOpacity
:
0.01
,
progressive
:
100
,
smooth
:
true
,
data
:
data
}
]
};
}
});
</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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录