| DIR:/home/drsekaran/www/admin/vendors/echarts/test/ |
| Current File : /home/drsekaran/www/admin/vendors/echarts/test/timeline-layout.html |
<html>
<head>
<meta charset="utf-8">
<script src="esl.js"></script>
<script src="config.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<style>
html, body, #main {
width: 100%;
height: 100%;
margin: 0;
background: #ccc;
}
.block {
text-align: center;
margin: 20px;
}
.block .ec {
background: #fff;
width: 700px;
height: 400px;
margin: 5px auto;
}
</style>
<div id="main"></div>
<script src="data/timelineGDP.js"></script>
<script>
require([
'echarts',
'zrender/core/util',
'echarts/chart/bar',
'echarts/component/legend',
'echarts/component/grid',
'echarts/component/tooltip',
'echarts/component/timeline'
], function (echarts, zrUtil) {
makeChart({});
makeChart({timeline: {inverse: true}});
makeChart({timeline: {inverse: true, controlStyle: {position: 'right'}}});
makeChart({timeline: {orient: 'vertical', x: 0, y: 10, width: 55, height: '80%'}});
makeChart({timeline: {orient: 'vertical', inverse: true, rewind: true, x: 0, y: 10, width: 55, height: '80%'}});
makeChart({timeline: {orient: 'vertical', inverse: true, x: null, x2: 0, y: 10, width: 55, height: '80%'}});
makeChart({timeline: {orient: 'vertical', inverse: true, x: null, x2: 0, y: 10, width: 55, height: '80%', controlStyle: {position: 'top'}}});
makeChart({timeline: {label: {position: 'top'}}});
makeChart({timeline: {orient: 'vertical', inverse: true, x: null, x2: 0, y: 10, width: 55, height: '80%', label: {position: 'right'}}});
makeChart({timeline: {orient: 'vertical', inverse: true, x: null, x2: 0, y: 10, width: 55, height: '80%', label: {position: -640, emphasis: {textStyle: {fontSize: 20}}}}});
makeChart({timeline: {controlStyle: {show: false}}});
makeChart({timeline: {controlStyle: {showPlayBtn: false}}});
makeChart({timeline: {controlStyle: {showPrevBtn: false}}});
makeChart({timeline: {controlStyle: {showNextBtn: false}}});
makeChart({timeline: {}});
makeChart({
timeline: {lineStyle: {show: false},
symbol: 'circle',
itemStyle: {normal: {color: 'rgba(194,53,49, 0.5)'}},
controlStyle: {showPrevBtn: false, showNextBtn: false, normal: {color: 'rgba(194,53,49, 0.5)', borderColor: 'rgba(194,53,49, 0.5)'}},
orient: 'vertical', inverse: true, x: 0, y: 40, width: 55, height: '80%'
}});
makeChart({
timeline: {
height: 55,
data: [
'2002-01-01','2003-01-01','2004-01-01','2005-01-01',
{
value: '2006-01-01',
symbol: 'pin',
symbolSize: 30
},
'2007-01-01','2008-01-01','2009-01-01','2010-01-01',
{
value: '2011-01-01',
symbol: 'pin',
symbolSize: 30
}
]
}
});
makeChart({
timeline: {
symbol: 'none'
}
});
function makeChart(opt) {
opt = opt || {};
var containerEl = document.getElementById('main');
var el = document.createElement('div');
el.className = 'block';
el.innerHTML = '<div class="ec"></div><label>'
+ encodeHTML(JSON.stringify(opt)) + '</label>';
containerEl.appendChild(el);
var chart = echarts.init(el.firstChild, null, {renderer: 'canvas'});
chart.setOption(getOption(opt));
}
function encodeHTML(source) {
return source == null
? ''
: String(source)
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''');
};
function getOption(opt) {
return zrUtil.merge({
timeline:{
// y: 0,
axisType: 'category',
// realtime: false,
// loop: false,
autoPlay : false,
// currentIndex: 2,
playInterval : 1000,
// controlStyle: {
// position: 'left'
// },
data: [
'2002-01-01','2003-01-01','2004-01-01','2005-01-01','2006-01-01',
'2007-01-01','2008-01-01','2009-01-01','2010-01-01','2011-01-01'
],
label: {
formatter : function(s) {
return (new Date(s)).getFullYear();
}
},
controlStyle: {
// itemGap: 0,
normal: {
borderWidth: 1
}
},
itemStyle: {
// normal: {symbolSize: 1}
}
},
baseOption: {
backgroundColor: '#fff',
title: {
'subtext':'数据来自国家统计局'
},
tooltip: {'trigger':'axis'},
calculable : true,
grid : {
x: 120, x2: 120, y: 80, y2: 100
},
xAxis : [
{
'type':'category',
'axisLabel':{'interval':0},
'data':[
'北京','\n天津','河北','\n山西','内蒙古','\n辽宁','吉林','\n黑龙江',
'上海','\n江苏','浙江','\n安徽','福建','\n江西','山东','\n河南',
'湖北','\n湖南','广东','\n广西','海南','\n重庆','四川','\n贵州',
'云南','\n西藏','陕西','\n甘肃','青海','\n宁夏','新疆'
],
splitLine: {show: false}
}
],
yAxis : [
{
'type':'value',
'name':'GDP（亿元）',
'max':53500
},
{
'type':'value',
'name':'其他（亿元）',
splitLine: {show: false}
}
],
series: [
{
name: 'GDP',
type: 'bar',
markLine: {
symbol : ['arrow','none'],
symbolSize : [4, 2],
itemStyle : {
normal: {
lineStyle: {color:'orange'},
barBorderColor:'orange',
label:{
position:'left',
formatter:function(params){
return Math.round(params.value);
},
textStyle:{color:'orange'}
}
}
},
'data':[{'type':'average','name':'平均值'}]
}
}
// {type: 'bar'},
// {type: 'bar'},
// {type: 'bar'},
// {type: 'bar'},
// {type: 'bar'}
]
},
options: [
{
title : {text: '2002全国宏观经济指标'},
series : [
{
'name':'GDP',
'data': dataMap.dataGDP['2002']
},
{
'name':'金融','yAxisIndex':1,'type':'bar',
'data': dataMap.dataFinancial['2002']
},
{
'name':'房地产','yAxisIndex':1,'type':'bar',
'data': dataMap.dataEstate['2002']
},
{
'name':'第一产业','yAxisIndex':1,'type':'bar',
'data': dataMap.dataPI['2002']
},
{
'name':'第二产业','yAxisIndex':1,'type':'bar',
'data': dataMap.dataSI['2002']
},
{
'name':'第三产业','yAxisIndex':1,'type':'bar',
'data': dataMap.dataTI['2002']
}
]
},
{
title : {'text':'2003全国宏观经济指标'},
series : [
{'data': dataMap.dataGDP['2003']},
{'data': dataMap.dataFinancial['2003']},
{'data': dataMap.dataEstate['2003']},
{'data': dataMap.dataPI['2003']},
{'data': dataMap.dataSI['2003']},
{'data': dataMap.dataTI['2003']}
]
},
{
title : {'text':'2004全国宏观经济指标'},
series : [
{'data': dataMap.dataGDP['2004']},
{'data': dataMap.dataFinancial['2004']},
{'data': dataMap.dataEstate['2004']},
{'data': dataMap.dataPI['2004']},
{'data': dataMap.dataSI['2004']},
{'data': dataMap.dataTI['2004']}
]
},
{
title : {'text':'2005全国宏观经济指标'},
series : [
{'data': dataMap.dataGDP['2005']},
{'data': dataMap.dataFinancial['2005']},
{'data': dataMap.dataEstate['2005']},
{'data': dataMap.dataPI['2005']},
{'data': dataMap.dataSI['2005']},
{'data': dataMap.dataTI['2005']}
]
},
{
title : {'text':'2006全国宏观经济指标'},
series : [
{'data': dataMap.dataGDP['2006']},
{'data': dataMap.dataFinancial['2006']},
{'data': dataMap.dataEstate['2006']},
{'data': dataMap.dataPI['2006']},
{'data': dataMap.dataSI['2006']},
{'data': dataMap.dataTI['2006']}
]
},
{
title : {'text':'2007全国宏观经济指标'},
series : [
{'data': dataMap.dataGDP['2007']},
{'data': dataMap.dataFinancial['2007']},
{'data': dataMap.dataEstate['2007']},
{'data': dataMap.dataPI['2007']},
{'data': dataMap.dataSI['2007']},
{'data': dataMap.dataTI['2007']}
]
},
{
title : {'text':'2008全国宏观经济指标'},
series : [
{'data': dataMap.dataGDP['2008']},
{'data': dataMap.dataFinancial['2008']},
{'data': dataMap.dataEstate['2008']},
{'data': dataMap.dataPI['2008']},
{'data': dataMap.dataSI['2008']},
{'data': dataMap.dataTI['2008']}
]
},
{
title : {'text':'2009全国宏观经济指标'},
series : [
{'data': dataMap.dataGDP['2009']},
{'data': dataMap.dataFinancial['2009']},
{'data': dataMap.dataEstate['2009']},
{'data': dataMap.dataPI['2009']},
{'data': dataMap.dataSI['2009']},
{'data': dataMap.dataTI['2009']}
]
},
{
title : {'text':'2010全国宏观经济指标'},
series : [
{'data': dataMap.dataGDP['2010']},
{'data': dataMap.dataFinancial['2010']},
{'data': dataMap.dataEstate['2010']},
{'data': dataMap.dataPI['2010']},
{'data': dataMap.dataSI['2010']},
{'data': dataMap.dataTI['2010']}
]
},
{
title : {'text':'2011全国宏观经济指标'},
series : [
{'data': dataMap.dataGDP['2011']},
{'data': dataMap.dataFinancial['2011']},
{'data': dataMap.dataEstate['2011']},
{'data': dataMap.dataPI['2011']},
{'data': dataMap.dataSI['2011']},
{'data': dataMap.dataTI['2011']}
]
}
]
}, opt, true);
}
});
</script>
</body>
</html> |