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="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(0, 4);
}
},
},
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 : 20,
end : 80
},
grid : {'y':80,'y2':100},
xAxis : [{
'type':'category',
'axisLabel':{'interval':0},
'data':[
'北京','
天津','河北','
山西'
]
}],
yAxis : [
{
'type':'value',
'name':'GDP（亿元）',
}
],
series : [
{
'name':'GDP',
'type':'bar',
'data': [10000,20000,30000,40000]
},
{
'name':'real',
'type':'line',
'data': [50000,40000,20000,10000]
},
]
},
{
title : {'text':'2003全国宏观经济指标'},
series : [
{'data': [20000,50000,30000,40000]},//GDP的值
{ 'data': [80000,40000,70000,30000]}//real的值
]
},{
series : [
{ 'data': [80000,70000,60000,50000]},
{ 'data': [40000,20000,30000,10000]}
]
},
]
};
var chartContainer = document.getElementById('chart');
var myChart = echarts.init(chartContainer);
myChart.showLoading({
text : 'yoyo',
effect : 'dynamicLine',
textStyle : {
fontSize : 20
}
});
setTimeout(function (){
myChart.hideLoading();
myChart.setOption(option);
},1000);
// loadingTicket();
// clearTimeout(loadingTicket);
// myChart.setOption(option);
})(jQuery);
</script>
</html>