| <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; |
| } |
| #main { |
| background: #fff; |
| } |
| </style> |
| <div id="main"></div> |
| |
| <script src="data/timelineGDP.js"></script> |
| |
| <script> |
| |
| // 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: '平均值'}] |
| // } |
| |
| require([ |
| 'echarts', |
| 'echarts/chart/bar', |
| 'echarts/chart/pie', |
| 'echarts/component/title', |
| 'echarts/component/legend', |
| 'echarts/component/grid', |
| 'echarts/component/tooltip', |
| 'echarts/component/timeline' |
| ], function (echarts) { |
| |
| var chart = echarts.init(document.getElementById('main'), null, { |
| renderer: 'canvas' |
| }); |
| |
| var option = { |
| baseOption: { |
| timeline: { |
| // y: 0, |
| axisType: 'category', |
| // realtime: false, |
| // loop: false, |
| autoPlay: true, |
| // currentIndex: 2, |
| playInterval: 1000, |
| // controlStyle: { |
| // position: 'left' |
| // }, |
| data: [ |
| '2002-01-01','2003-01-01','2004-01-01', |
| { |
| value: '2005-01-01', |
| tooltip: { |
| formatter: '{b} GDP达到一个高度' |
| }, |
| symbol: 'diamond', |
| symbolSize: 16, |
| }, |
| '2006-01-01', '2007-01-01','2008-01-01','2009-01-01','2010-01-01', |
| { |
| value: '2011-01-01', |
| tooltip: { |
| formatter: function (params) { |
| return params.name + 'GDP达到又一个高度'; |
| } |
| }, |
| symbol: 'diamond', |
| symbolSize: 18 |
| }, |
| ], |
| label: { |
| formatter : function(s) { |
| return (new Date(s)).getFullYear(); |
| } |
| } |
| }, |
| title: { |
| subtext: '数据来自国家统计局' |
| }, |
| tooltip: { |
| trigger:'axis', |
| axisPointer: { |
| type: 'shadow' |
| } |
| }, |
| legend: { |
| align: 'right', |
| x: 'right', |
| data: ['第一产业', '第二产业', '第三产业', 'GDP', '金融', '房地产'], |
| selected: { |
| 'GDP': false, '金融': false, '房地产': false |
| } |
| }, |
| calculable: true, |
| grid: { |
| top:80, bottom: 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 |
| max: 30000 |
| } |
| ], |
| series: [ |
| {name: 'GDP', type: 'bar'}, |
| {name: '金融', type: 'bar'}, |
| {name: '房地产', type: 'bar'}, |
| {name: '第一产业', type: 'bar'}, |
| {name: '第二产业', type: 'bar'}, |
| {name: '第三产业', type: 'bar'}, |
| { |
| name: 'GDP占比', |
| type: 'pie', |
| center: ['75%', '35%'], |
| radius: '28%' |
| } |
| ] |
| }, |
| options: [ |
| { |
| title: {text: '2002全国宏观经济指标'}, |
| series: [ |
| {data: dataMap.dataGDP['2002']}, |
| {data: dataMap.dataFinancial['2002']}, |
| {data: dataMap.dataEstate['2002']}, |
| {data: dataMap.dataPI['2002']}, |
| {data: dataMap.dataSI['2002']}, |
| {data: dataMap.dataTI['2002']}, |
| {data: [ |
| {name: '第一产业', value: dataMap.dataPI['2002sum']}, |
| {name: '第二产业', value: dataMap.dataSI['2002sum']}, |
| {name: '第三产业', value: dataMap.dataTI['2002sum']} |
| ]} |
| ] |
| }, |
| { |
| 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']}, |
| {data: [ |
| {name: '第一产业', value: dataMap.dataPI['2003sum']}, |
| {name: '第二产业', value: dataMap.dataSI['2003sum']}, |
| {name: '第三产业', value: dataMap.dataTI['2003sum']} |
| ]} |
| ] |
| }, |
| { |
| 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']}, |
| {data: [ |
| {name: '第一产业', value: dataMap.dataPI['2004sum']}, |
| {name: '第二产业', value: dataMap.dataSI['2004sum']}, |
| {name: '第三产业', value: dataMap.dataTI['2004sum']} |
| ]} |
| ] |
| }, |
| { |
| 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']}, |
| {data: [ |
| {name: '第一产业', value: dataMap.dataPI['2005sum']}, |
| {name: '第二产业', value: dataMap.dataSI['2005sum']}, |
| {name: '第三产业', value: dataMap.dataTI['2005sum']} |
| ]} |
| ] |
| }, |
| { |
| 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']}, |
| {data: [ |
| {name: '第一产业', value: dataMap.dataPI['2006sum']}, |
| {name: '第二产业', value: dataMap.dataSI['2006sum']}, |
| {name: '第三产业', value: dataMap.dataTI['2006sum']} |
| ]} |
| ] |
| }, |
| { |
| 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']}, |
| {data: [ |
| {name: '第一产业', value: dataMap.dataPI['2007sum']}, |
| {name: '第二产业', value: dataMap.dataSI['2007sum']}, |
| {name: '第三产业', value: dataMap.dataTI['2007sum']} |
| ]} |
| ] |
| }, |
| { |
| 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']}, |
| {data: [ |
| {name: '第一产业', value: dataMap.dataPI['2008sum']}, |
| {name: '第二产业', value: dataMap.dataSI['2008sum']}, |
| {name: '第三产业', value: dataMap.dataTI['2008sum']} |
| ]} |
| ] |
| }, |
| { |
| 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']}, |
| {data: [ |
| {name: '第一产业', value: dataMap.dataPI['2009sum']}, |
| {name: '第二产业', value: dataMap.dataSI['2009sum']}, |
| {name: '第三产业', value: dataMap.dataTI['2009sum']} |
| ]} |
| ] |
| }, |
| { |
| 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']}, |
| {data: [ |
| {name: '第一产业', value: dataMap.dataPI['2010sum']}, |
| {name: '第二产业', value: dataMap.dataSI['2010sum']}, |
| {name: '第三产业', value: dataMap.dataTI['2010sum']} |
| ]} |
| ] |
| }, |
| { |
| 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']}, |
| {data: [ |
| {name: '第一产业', value: dataMap.dataPI['2011sum']}, |
| {name: '第二产业', value: dataMap.dataSI['2011sum']}, |
| {name: '第三产业', value: dataMap.dataTI['2011sum']} |
| ]} |
| ] |
| } |
| ] |
| }; |
| |
| chart.setOption(option); |
| |
| chart.on('legendSelected', function () { |
| }); |
| |
| chart.on('click', function (params) { |
| console.log(params); |
| }); |
| |
| window.onresize = chart.resize; |
| }); |
| </script> |
| </body> |
| </html> |
