Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
x649585723
incubator-echarts
提交
84a181e4
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,发现更多精彩内容 >>
提交
84a181e4
编写于
11月 27, 2015
作者:
P
pah100
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
axis direction test
上级
707799ba
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
397 addition
and
0 deletion
+397
-0
test/axes.html
test/axes.html
+397
-0
未找到文件。
test/axes.html
0 → 100644
浏览文件 @
84a181e4
<html>
<head>
<meta
charset=
"utf-8"
>
<script
src=
"esl.js"
></script>
<script
src=
"config.js"
></script>
<link
rel=
"stylesheet"
href=
"reset.css"
>
</head>
<body>
<style>
#main
{
position
:
relative
;
min-width
:
1080px
;
/* 4 columns */
}
.title
{
clear
:
both
;
text-align
:
center
;
margin
:
0
;
background
:
#eef
;
}
.block
{
float
:
left
;
margin
:
30px
0
30px
50px
;
}
.block
.ec
{
width
:
200px
;
height
:
200px
;
}
.block
label
{
width
:
200px
;
display
:
block
;
text-align
:
center
;
background
:
#eee
;
border-radius
:
3px
;
font-size
:
12px
;
line-height
:
18px
;
padding
:
0
5px
;
}
</style>
<div
id=
"main"
></div>
<script>
var
echarts
;
var
zrUtil
;
require
([
'
echarts
'
,
'
zrender/core/util
'
,
'
echarts/chart/line
'
,
'
echarts/chart/parallel
'
,
'
echarts/component/legend
'
,
'
echarts/component/grid
'
,
'
echarts/component/polar
'
,
'
echarts/component/parallel
'
,
'
echarts/component/tooltip
'
],
function
(
ec
,
zu
)
{
echarts
=
ec
;
zrUtil
=
zu
;
var
makeCartesian
=
zrUtil
.
curry
(
makeChart
,
defaultCartesianOption
);
renderTitle
(
'
catesian normal
'
);
// inverse
makeCartesian
(
'
x: forward, y: forward
'
,
{
xAxis
:
{},
yAxis
:
{}
});
makeCartesian
(
'
x: inverse, y: inverse
'
,
{
xAxis
:
{
inverse
:
true
},
yAxis
:
{
inverse
:
true
}
});
makeCartesian
(
'
x: forward, y: inverse
'
,
{
xAxis
:
{},
yAxis
:
{
inverse
:
true
}
});
makeCartesian
(
'
x: inverse, y: forward
'
,
{
xAxis
:
{
inverse
:
true
},
yAxis
:
{}
});
renderTitle
(
'
catesian position setting
'
);
// position
makeCartesian
(
'
x: forward top, y: forward right
'
,
{
xAxis
:
{
position
:
'
top
'
},
yAxis
:
{
position
:
'
right
'
}
});
makeCartesian
(
'
x: inverse bottom, y: inverse right
'
,
{
xAxis
:
{
inverse
:
true
,
position
:
'
bottom
'
},
yAxis
:
{
inverse
:
true
,
position
:
'
right
'
}
});
makeCartesian
(
'
x: forward bottom, y: inverse right
'
,
{
xAxis
:
{
position
:
'
bottom
'
},
yAxis
:
{
inverse
:
true
,
position
:
'
right
'
}
});
makeCartesian
(
'
x: inverse top, y: forward right
'
,
{
xAxis
:
{
inverse
:
true
,
position
:
'
top
'
},
yAxis
:
{
position
:
'
right
'
}
});
renderTitle
(
'
catesian name location
'
);
// name location
makeCartesian
(
'
x: forward start, y: forward start
'
,
{
xAxis
:
{
nameLocation
:
'
start
'
},
yAxis
:
{
nameLocation
:
'
start
'
}
});
makeCartesian
(
'
x: inverse start, y: inverse start
'
,
{
xAxis
:
{
inverse
:
true
,
nameLocation
:
'
start
'
},
yAxis
:
{
inverse
:
true
,
nameLocation
:
'
start
'
}
});
makeCartesian
(
'
x: forward start, y: inverse start
'
,
{
xAxis
:
{
nameLocation
:
'
start
'
},
yAxis
:
{
inverse
:
true
,
nameLocation
:
'
start
'
}
});
makeCartesian
(
'
x: inverse start, y: forward start
'
,
{
xAxis
:
{
inverse
:
true
,
nameLocation
:
'
start
'
},
yAxis
:
{
nameLocation
:
'
start
'
}
});
renderTitle
(
'
polar normal
'
);
var
makePolar
=
zrUtil
.
curry
(
makeChart
,
defaultPolarOption
);
// inverse
makePolar
(
'
angle: forward, radius: forward
'
,
{
angleAxis
:
{},
radiusAxis
:
{}
});
makePolar
(
'
angle: inverse, radius: inverse
'
,
{
angleAxis
:
{
inverse
:
true
},
radiusAxis
:
{
inverse
:
true
}
});
makePolar
(
'
angle: forward, radius: inverse
'
,
{
angleAxis
:
{},
radiusAxis
:
{
inverse
:
true
}
});
makePolar
(
'
angle: inverse, radius: forward
'
,
{
angleAxis
:
{
inverse
:
true
},
radiusAxis
:
{}
});
renderTitle
(
'
polar angle settting
'
);
// startAngle
makePolar
(
'
angle: forward startAngle23, radius: forward
'
,
{
angleAxis
:
{
startAngle
:
23
},
radiusAxis
:
{}
});
makePolar
(
'
angle: forward startAngle64, radius: forward
'
,
{
angleAxis
:
{
startAngle
:
64
},
radiusAxis
:
{}
});
makePolar
(
'
angle: forward startAngle90, radius: forward
'
,
{
angleAxis
:
{
startAngle
:
90
},
radiusAxis
:
{}
});
makePolar
(
'
angle: forward startAngle108, radius: forward
'
,
{
angleAxis
:
{
startAngle
:
108
},
radiusAxis
:
{}
});
makePolar
(
'
angle: forward startAngle164, radius: forward
'
,
{
angleAxis
:
{
startAngle
:
164
},
radiusAxis
:
{}
});
makePolar
(
'
angle: forward startAngle180, radius: forward
'
,
{
angleAxis
:
{
startAngle
:
180
},
radiusAxis
:
{}
});
makePolar
(
'
angle: forward startAngle204, radius: forward
'
,
{
angleAxis
:
{
startAngle
:
204
},
radiusAxis
:
{}
});
makePolar
(
'
angle: forward startAngle250, radius: forward
'
,
{
angleAxis
:
{
startAngle
:
250
},
radiusAxis
:
{}
});
makePolar
(
'
angle: forward startAngle270, radius: forward
'
,
{
angleAxis
:
{
startAngle
:
270
},
radiusAxis
:
{}
});
makePolar
(
'
angle: forward startAngle270, radius: forward
'
,
{
angleAxis
:
{
startAngle
:
270
},
radiusAxis
:
{}
});
makePolar
(
'
angle: forward startAngle294, radius: forward
'
,
{
angleAxis
:
{
startAngle
:
294
},
radiusAxis
:
{}
});
makePolar
(
'
angle: forward startAngle344, radius: forward
'
,
{
angleAxis
:
{
startAngle
:
344
},
radiusAxis
:
{}
});
makePolar
(
'
angle: forward startAngle360, radius: forward
'
,
{
angleAxis
:
{
startAngle
:
360
},
radiusAxis
:
{}
});
renderTitle
(
'
polar inverse angle settting
'
);
// startAngle
makePolar
(
'
angle: inverse startAngle23, radius: forward
'
,
{
angleAxis
:
{
inverse
:
true
,
startAngle
:
23
},
radiusAxis
:
{}
});
makePolar
(
'
angle: forward startAngle23, radius: inverse
'
,
{
angleAxis
:
{
startAngle
:
23
},
radiusAxis
:
{
inverse
:
true
}
});
renderTitle
(
'
parallel
'
);
var
makeParallel
=
zrUtil
.
curry
(
makeChart
,
defaultParallelOption
);
makeParallel
(
'
layout: horizontal
'
,
{
});
makeParallel
(
'
layout: horizontal, axis2 forward start
'
,
{
parallelAxis
:
makeParallelAxisOption
({
nameLocation
:
'
start
'
})
});
makeParallel
(
'
layout: horizontal, axis2 inverse start
'
,
{
parallelAxis
:
makeParallelAxisOption
({
inverse
:
true
,
nameLocation
:
'
start
'
})
});
makeParallel
(
'
layout: vertical
'
,
{
});
makeParallel
(
'
layout: vertical, axis2 forward start
'
,
{
parallel
:
{
layout
:
'
vertical
'
},
parallelAxis
:
makeParallelAxisOption
({
nameLocation
:
'
start
'
})
});
makeParallel
(
'
layout: vertical, axis2 inverse start
'
,
{
parallel
:
{
layout
:
'
vertical
'
},
parallelAxis
:
makeParallelAxisOption
({
inverse
:
true
,
nameLocation
:
'
start
'
})
});
});
function
makeParallelAxisOption
(
secondOpt
)
{
return
[
{
dim
:
'
dim0
'
,
name
:
'
维度1
'
},
zrUtil
.
merge
({
dim
:
'
dim1
'
,
name
:
'
维度2
'
},
secondOpt
,
true
),
{
dim
:
'
dim2
'
,
name
:
'
维度3
'
},
{
dim
:
'
dim3
'
,
name
:
'
维度4
'
}
];
}
function
renderTitle
(
label
)
{
var
containerEl
=
document
.
getElementById
(
'
main
'
);
var
el
=
document
.
createElement
(
'
div
'
);
el
.
className
=
'
title
'
;
el
.
innerHTML
=
encodeHTML
(
label
);
containerEl
.
appendChild
(
el
);
}
function
makeChart
(
getOption
,
label
,
opt
)
{
opt
=
opt
||
{};
var
containerEl
=
document
.
getElementById
(
'
main
'
);
var
el
=
document
.
createElement
(
'
div
'
);
el
.
className
=
'
block
'
;
el
.
innerHTML
=
'
<div class="ec"></div><label>
'
+
encodeHTML
(
label
)
+
'
</label>
'
;
containerEl
.
appendChild
(
el
);
var
chart
=
echarts
.
init
(
el
.
firstChild
,
null
,
{
renderer
:
'
canvas
'
});
chart
.
setOption
(
zrUtil
.
merge
(
opt
,
getOption
()));
}
function
defaultCartesianOption
()
{
var
xAxisData
=
[];
var
data1
=
[];
for
(
var
i
=
0
;
i
<
30
;
i
++
)
{
xAxisData
.
push
(
'
类目
'
+
i
);
data1
.
push
(
+
(
Math
.
random
()
+
0.5
).
toFixed
(
3
));
}
return
{
legend
:
{
data
:
[
'
line
'
,
'
line2
'
,
'
line3
'
]
},
tooltip
:
{
trigger
:
'
axis
'
,
axisPointer
:
{
type
:
'
line
'
}
},
grid
:
{
x
:
50
,
y
:
50
,
x2
:
50
,
y2
:
50
},
xAxis
:
{
data
:
xAxisData
,
name
:
'
XName
'
,
boundaryGap
:
false
,
splitArea
:
{
show
:
false
},
splitLine
:
{
show
:
false
}
},
yAxis
:
{
name
:
'
YName
'
,
splitArea
:
{
show
:
true
}
},
series
:
[{
name
:
'
line
'
,
type
:
'
line
'
,
stack
:
'
all
'
,
symbol
:
'
circle
'
,
symbolSize
:
10
,
data
:
data1
,
itemStyle
:
{
normal
:
{
borderColor
:
'
white
'
,
borderWidth
:
3
,
lineStyle
:
{
width
:
1
}
}
}
}]
};
}
function
defaultPolarOption
()
{
var
xAxisData
=
[];
var
data1
=
[];
for
(
var
i
=
0
;
i
<
8
;
i
++
)
{
xAxisData
.
push
(
'
类目
'
+
i
);
data1
.
push
((
Math
.
random
()
*
2
+
1
).
toFixed
(
3
));
}
return
{
legend
:
{
data
:
[
'
line
'
,
'
line2
'
,
'
line3
'
]
},
tooltip
:
{
trigger
:
'
axis
'
,
axisPointer
:
{
type
:
'
shadow
'
}
},
polar
:
{
radius
:
'
65%
'
},
angleAxis
:
{
data
:
xAxisData
},
radiusAxis
:
{
splitNumber
:
4
},
series
:
[{
coordinateSystem
:
'
polar
'
,
name
:
'
line
'
,
stack
:
'
all
'
,
type
:
'
line
'
,
symbolSize
:
10
,
itemStyle
:
{
normal
:
{
areaStyle
:
{}}},
data
:
data1
}]
};
}
function
defaultParallelOption
()
{
var
dataBJ
=
[];
for
(
var
i
=
0
;
i
<
10
;
i
++
)
{
var
item
=
[];
for
(
var
j
=
0
;
j
<
4
;
j
++
)
{
item
.
push
(
Math
.
random
()
*
10
);
}
dataBJ
.
push
(
item
);
}
return
{
color
:
[
'
#dd4444
'
,
'
#fec42c
'
,
'
#80F1BE
'
],
parallelAxis
:
makeParallelAxisOption
(),
parallel
:
{
x
:
40
,
y
:
40
,
x2
:
40
,
y2
:
40
,
parallelAxisDefault
:
{
type
:
'
value
'
}
},
series
:
[
{
name
:
'
北京
'
,
type
:
'
parallel
'
,
data
:
dataBJ
}
]
};
}
function
encodeHTML
(
source
)
{
return
source
==
null
?
''
:
String
(
source
)
.
replace
(
/&/g
,
'
&
'
)
.
replace
(
/</g
,
'
<
'
)
.
replace
(
/>/g
,
'
>
'
)
.
replace
(
/"/g
,
'
"
'
)
.
replace
(
/'/g
,
'
'
'
);
};
</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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录