| <!-- | |
| Licensed to the Apache Software Foundation (ASF) under one | |
| or more contributor license agreements. See the NOTICE file | |
| distributed with this work for additional information | |
| regarding copyright ownership. The ASF licenses this file | |
| to you under the Apache License, Version 2.0 (the | |
| "License"); you may not use this file except in compliance | |
| with the License. You may obtain a copy of the License at | |
| http://www.apache.org/licenses/LICENSE-2.0 | |
| Unless required by applicable law or agreed to in writing, | |
| software distributed under the License is distributed on an | |
| "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY | |
| KIND, either express or implied. See the License for the | |
| specific language governing permissions and limitations | |
| under the License. | |
| --> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="lib/simpleRequire.js"></script> | |
| <script src="lib/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' | |
| ], function (echarts) { | |
| var zrUtil = echarts.util; | |
| makeChart({ | |
| timeline: { | |
| label: { | |
| normal: { | |
| position: 10, | |
| rotate: 45, | |
| textStyle: { | |
| align: 'right', | |
| baseline: 'middle' | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| makeChart({ | |
| timeline: { | |
| inverse: true, | |
| symbol: 'path://M0,0L10,0L10,10L0,10L0,0z', | |
| symbolSize: [10, 6], | |
| symbolOffset: [0, 3], | |
| symbolRotate: 30 | |
| } | |
| }); | |
| makeChart({timeline: {inverse: true, controlStyle: {position: 'right'}}, width: 400}); | |
| 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'; | |
| var widthString = ''; | |
| if (opt.width != null) { | |
| widthString = ' style="width:' + opt.width + 'px" '; | |
| } | |
| el.innerHTML = '<div class="ec" ' + widthString + '></div><label>' | |
| + encodeHTML(JSON.stringify(opt)) + '</label>'; | |
| containerEl.appendChild(el); | |
| var chart = echarts.init(el.firstChild, null, { }); | |
| 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 : { | |
| lineStyle: {color:'orange'}, | |
| barBorderColor:'orange', | |
| }, | |
| label:{ | |
| // position: 'left' is a invalid value, but exists in this historical file, | |
| // while will be ignored before v5.0 . | |
| // But since v5.0, position: 'left' will cause incorrect result. | |
| // position: 'left', | |
| position: 'start', | |
| 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> |