1. 带timeline datazoom的例子
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
<link href="/resources/um_report/css/common.css" rel="stylesheet" type="text/css">
<link href="/resources/um_report/css/widget.css" rel="stylesheet" type="text/css">
<link href="/resources/um_report/css/main.css" rel="stylesheet" type="text/css">
<link href="/resources/um_report/css/index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id='chart' style="width:900px;height:600px;"></div>
</body>
<script src="/resources/um_report/js/jquery/jquery.js" type="text/javascript"></script>
<script src="/resources/um_report/js/echarts-all.js" type="text/javascript"></script> <script src="/resources/um_report/js/util/myEcharts.js" type="text/javascript"></script>
<script src="/resources/um_report/js/main.js" type="text/javascript"></script>
<script src="/resources/um_report/js/timelineOption.js" type="text/javascript"></script>
<script type="text/javascript"> (function($){
var option = {
timeline:{
data:[
'2002-01-01','2003-01-01'
],
label : {
formatter : function(s) {
return s.slice(, );
}
},
},
options:[
{
title : {
'text':'2002全国宏观经济指标',
'subtext':'数据来自国家统计局'
},
tooltip : {'trigger':'axis'},
legend : {
x:'center',
'data':['GDP','real'],
},
toolbox : {
'show':true,
orient : 'vertical',
x: 'right',
y: 'center',
'feature':{
'mark':{'show':true},
'dataView':{'show':true,'readOnly':false},
'magicType':{'show':true,'type':['line','bar','stack','tiled']},
'restore':{'show':true},
'saveAsImage':{'show':true}
}
},
calculable : true,
dataZoom : {
show : true,
realtime : true,
start : ,
end :
},
grid : {'y':,'y2':},
xAxis : [{
'type':'category',
'axisLabel':{'interval':},
'data':[
'北京','\n天津','河北','\n山西'
]
}],
yAxis : [
{
'type':'value',
'name':'GDP（亿元）',
}
],
series : [
{
'name':'GDP',
'type':'bar',
'data': [,,,]
},
{
'name':'real',
'type':'line',
'data': [,,,]
},
]
},
{
title : {'text':'2003全国宏观经济指标'},
series : [
{'data': [,,,]},//GDP的值
{ 'data': [,,,]}//real的值
]
},{
series : [
{ 'data': [,,,]},
{ 'data': [,,,]}
]
}, ]
}; var chartContainer = document.getElementById('chart');
var myChart = echarts.init(chartContainer);
myChart.showLoading({
text : 'yoyo',
effect : 'dynamicLine',
textStyle : {
fontSize :
}
});
setTimeout(function (){
myChart.hideLoading();
myChart.setOption(option);
},);
// loadingTicket();
// clearTimeout(loadingTicket);
// myChart.setOption(option); })(jQuery);
</script> </html>