Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Five-菜鸟级
echarts
提交
f89ea383
E
echarts
项目概览
Five-菜鸟级
/
echarts
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
1
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
E
echarts
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
1
Issue
1
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
f89ea383
编写于
11月 06, 2017
作者:
S
sushuang
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
add example bar-t.html
上级
1d8291bd
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
255 addition
and
0 deletion
+255
-0
test/bar-t.html
test/bar-t.html
+255
-0
未找到文件。
test/bar-t.html
0 → 100644
浏览文件 @
f89ea383
<html>
<head>
<meta
charset=
"utf-8"
>
<script
src=
"lib/esl.js"
></script>
<script
src=
"lib/config.js"
></script>
<script
src=
"lib/jquery.min.js"
></script>
<script
src=
"lib/facePrint.js"
></script>
<script
src=
"lib/testHelper.js"
></script>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1"
/>
</head>
<body>
<style>
h1
{
line-height
:
60px
;
height
:
60px
;
background
:
#146402
;
text-align
:
center
;
font-weight
:
bold
;
color
:
#eee
;
font-size
:
14px
;
}
.chart
{
height
:
600px
;
}
</style>
<div
id=
"main"
class=
"chart"
></div>
<script>
require
(
(
testHelper
.
hasURLParam
(
'
en
'
)
?
[
'
echarts
'
,
// 'echarts/lang/en',
]
:
[
'
echarts
'
]
).
concat
(
[
// 'echarts/chart/bar',
// 'echarts/chart/line',
// 'echarts/component/legend',
// 'echarts/component/graphic',
// 'echarts/component/grid',
// 'echarts/component/tooltip',
// 'echarts/component/brush',
// 'echarts/component/toolbox',
// 'echarts/component/title',
// 'zrender/vml/vml'
]
),
function
(
echarts
)
{
var
chart
=
echarts
.
init
(
document
.
getElementById
(
'
main
'
));
var
xAxisData
=
[];
var
data1
=
[];
var
data2
=
[];
var
data3
=
[];
var
data4
=
[];
for
(
var
i
=
0
;
i
<
10
;
i
++
)
{
xAxisData
.
push
(
'
类目
'
+
i
);
data1
.
push
((
Math
.
random
()
*
5
).
toFixed
(
2
));
data2
.
push
(
-
Math
.
random
().
toFixed
(
2
));
data3
.
push
((
Math
.
random
()
+
0.5
).
toFixed
(
2
));
data4
.
push
((
Math
.
random
()
+
0.3
).
toFixed
(
2
));
}
var
itemStyle
=
{
normal
:
{
barBorderRadius
:
5
,
label
:
{
show
:
true
,
position
:
'
outside
'
}
},
emphasis
:
{
label
:
{
position
:
'
outside
'
},
barBorderColor
:
'
#fff
'
,
barBorderWidth
:
1
,
shadowBlur
:
10
,
shadowOffsetX
:
0
,
shadowOffsetY
:
0
,
shadowColor
:
'
rgba(0,0,0,0.5)
'
}
};
chart
.
setOption
({
backgroundColor
:
'
#eee
'
,
animationDurationUpdate
:
3000
,
legend
:
{
left
:
0
,
inactiveColor
:
'
#abc
'
,
borderWidth
:
1
,
itemWidth
:
35
,
itemHeight
:
30
,
data
:
[{
name
:
'
bar
'
},
'
bar2
'
,
'
bar3
'
,
'
bar4
'
],
selected
:
{
// 'bar': false
},
// orient: 'vertical',
// x: 'right',
// y: 'bottom',
align
:
'
left
'
,
tooltip
:
{
show
:
true
}
},
// brush: {
// xAxisIndex: 0
// },
// // toolbox: {
// // top: 25,
// // // right: 20,
// // feature: {
// // magicType: {
// // type: ['line', 'bar', 'stack', 'tiled']
// // },
// // dataView: {},
// // saveAsImage: {
// // pixelRatio: 2
// // },
// // brush: {
// // type: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear']
// // },
// // restore: {},
// // dataZoom: {},
// // myTool1: {
// // show: true,
// // title: '自定义扩展方法1',
// // icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
// // onclick: function (){
// // alert('myToolHandler1')
// // }
// // },
// // myTool2: {
// // show: true,
// // title: '自定义扩展方法2',
// // icon: 'image://http://echarts.baidu.com/images/favicon.png',
// // onclick: function (){
// // alert('myToolHandler2')
// // }
// // }
// // },
// iconStyle: {
// emphasis: {
// textPosition: 'top'
// // textAlign: 'right'
// }
// }
// },
tooltip
:
{},
grid
:
{
top
:
50
},
xAxis
:
{
data
:
xAxisData
,
name
:
'
横轴
'
,
silent
:
false
,
axisTick
:
{
alignWithLabel
:
true
},
// axisLabel: {
// show: false
// },
// axisTick: {
// show: false
// },
axisLine
:
{
onZero
:
true
},
splitLine
:
{
show
:
true
},
splitArea
:
{
show
:
true
}
},
yAxis
:
{
inverse
:
true
,
// axisLabel: {
// show: false
// },
axisTick
:
{
show
:
false
},
// splitLine: {
// show: false
// },
splitArea
:
{
show
:
false
}
},
series
:
[{
name
:
'
bar
'
,
type
:
'
bar
'
,
stack
:
'
one
'
,
itemStyle
:
itemStyle
,
cursor
:
'
move
'
,
data
:
data1
},
{
name
:
'
bar2
'
,
type
:
'
bar
'
,
stack
:
'
one
'
,
itemStyle
:
itemStyle
,
cursor
:
'
default
'
,
data
:
data2
},
{
name
:
'
bar3
'
,
type
:
'
bar
'
,
stack
:
'
two
'
,
itemStyle
:
itemStyle
,
data
:
data3
},
{
name
:
'
bar4
'
,
type
:
'
bar
'
,
stack
:
'
two
'
,
itemStyle
:
itemStyle
,
data
:
data4
}]
});
chart
.
on
(
'
click
'
,
function
(
params
)
{
console
.
log
(
params
);
});
// chart.on('legendselectchanged', function (params) {
// chart.setOption({
// // title: {
// // },
// graphic: [{
// type: 'circle',
// shape: {
// cx: 100,
// cy: 100,
// r: 20,
// }
// }]
// });
// });
window
.
onresize
=
chart
.
resize
;
}
);
</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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录