| <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> |
