index.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>中国经济十年时空漫游</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta name="description" content="China">
  8. <meta name="author" content="kener.linfeng@gmail.com">
  9. <link href="../../../asset/css/bootstrap.css" rel="stylesheet">
  10. <link href="../../../asset/css/bootstrap-responsive.css" rel="stylesheet">
  11. <link rel="shortcut icon" href="../../../asset/ico/favicon.png">
  12. <style type="text/css">
  13. * {
  14. font-family: "Microsoft YaHei" !important;
  15. }
  16. body{
  17. background-image: url(../../../asset/img/groovepaper.png);
  18. background-repeat: repeat;
  19. }
  20. header {
  21. background-image: url(../../../asset/img/tweed.png);
  22. background-repeat: repeat;
  23. }
  24. h1 {
  25. color: #FFF;
  26. font-weight : bolder;
  27. margin:20px 0;
  28. }
  29. section {
  30. background-image: url(../../../asset/img/ticks.png);
  31. background-repeat: repeat;
  32. padding: 10px;
  33. }
  34. footer {
  35. height: 100px;
  36. background-image: url(../../../asset/img/tweed.png);
  37. background-repeat: repeat;
  38. font-size: 14px;
  39. color: #CCC;
  40. text-align: center;
  41. padding-top: 15px;
  42. margin-top:15px;
  43. }
  44. .nav.nav-tabs.nav-justified {
  45. margin-bottom:0;
  46. }
  47. .ctrl-wrap {
  48. padding:5px 20px 20px 20px;
  49. text-align: center;
  50. }
  51. .ctrl-content .btn{
  52. width: 7%;
  53. }
  54. .tab-content {
  55. padding:20px;
  56. border: 1px solid #dddddd;
  57. border-top: 0px;
  58. }
  59. .g2wrap {
  60. height:300px;
  61. width:33%;
  62. float:left;
  63. }
  64. input[type="radio"] {
  65. margin: -5px 5px 0;
  66. }
  67. label {
  68. display: inline-block;
  69. margin-bottom: 5px;
  70. font-weight: bold;
  71. }
  72. footer a:hover {
  73. color:#62C462
  74. }
  75. </style>
  76. </head>
  77. <body>
  78. <!-- HEADER -->
  79. <header>
  80. <div class="container">
  81. <h1>中国经济十年时空漫游</h1>
  82. </div>
  83. </header>
  84. <section>
  85. <div class="container">
  86. <strong>引言:</strong>进入21世纪,中国经济延续了过去30多年的火箭式发展,也同样延续了地域与经济结构的不平衡。在过去十年中,各地之间的经济差距有多大?各地的经济结构有多大差异?每个人分享到多少经济成果?都可以在时空漫游中找到答案……
  87. </div>
  88. </section>
  89. <div class="container">
  90. <!-- CONTAINER -->
  91. <div class="row">
  92. <div id="overview" class="span12">
  93. <h3>2011年GDP:谁跻身万亿俱乐部 谁还在百亿级漂浮</h3>
  94. <!--p>1949年中华人民共和国成立之前,中国犹如一个极度贫弱的巨人,近5亿人口,960万平方公里国土的国家,全国主要工业品最高年产量仅为:纱44.5万吨,布27.9亿米,原煤6188万吨,发电量60亿千瓦小时;粮食最高年产量也只有1.5亿吨,棉花84.9万吨。此为新中国经济发展的起步点。</p>
  95. <p>通过有计划地进行大规模的经济建设,50余年后的今天,中国已成为世界上最具有发展潜力的经济大国之一,人民生活也整体达到小康水平。从1953年到2005年,中国已陆续完成十个“五年计划”,并取得举世瞩目的成就,为国民经济的发展打下了坚实基础;而1979年以来的改革开放,则使中国经济得到前所未有的快速增长。进入二十一世纪后,中国经济继续保持稳步高速增长,2006年,国内生产总值超过20万亿元,增长速度达10.7%。</p-->
  96. <div id="g0" style="height:550px"></div>
  97. </div>
  98. <div id="graphic" class="span12">
  99. <!-- Nav tabs -->
  100. <ul class="nav nav-tabs nav-justified">
  101. <li class="active">
  102. <a id = "tab1" href="#main1" data-toggle="tab">当经济成果摊到每个人身上…</a></li>
  103. <li><a id = "tab2" href="#main2" data-toggle="tab">经济发展有多不平衡?</a></li>
  104. <li><a id = "tab3" href="#main3" data-toggle="tab">房地产支撑GDP?</a></li>
  105. </ul>
  106. <!-- Tab panes -->
  107. <div class="tab-content">
  108. <div class="tab-pane active" id="main1">
  109. <p>人均指标选择:
  110. <label>
  111. <input type="radio" name="optionsRadios" id="optionsRadios1" value="GDP" checked>GDP
  112. </label>
  113. <label>
  114. <input type="radio" name="optionsRadios" id="optionsRadios2" value="Financial">金融
  115. </label>
  116. <label>
  117. <input type="radio" name="optionsRadios" id="optionsRadios3" value="Estate">房地产
  118. </label>
  119. <label>
  120. <input type="radio" name="optionsRadios" id="optionsRadios4" value="PI">第一产业
  121. </label>
  122. <label>
  123. <input type="radio" name="optionsRadios" id="optionsRadios5" value="SI">第二产业
  124. </label>
  125. <label>
  126. <input type="radio" name="optionsRadios" id="optionsRadios6" value="TI">第三产业
  127. </label>
  128. </p>
  129. <div id="g1" style="height:400px"></div>
  130. <!--ul>
  131. <li>从总量上看,中国的GDP 已经名列世界前矛,GDP 总量占世界的总量接近4%.但是中国的问题最复杂的就是有13亿人口,按照中国的人均水平我们和这些发达国家的距离就大了,到去年我们人均完成的GDP 为1200多美元,这在世界上排的位置按人均水平算大概是一个什么发展阶段呢?</li>
  132. <li>世界银行关于发展阶段有一个粗线条的划分:</li>
  133. <ol>
  134. <li>一个国家人均GDP 的水平如果是在280美元以下,称为低收入的穷国</li>
  135. <li>一个国家的人均GDP 达到1000美元左右,叫下中等收入的发展中国家,指这个国家摆脱了贫困的陷阱,进入了经济起飞、工业化加速的时期</li>
  136. <li>如果到1600美元,叫中等收入的发展中国家</li>
  137. <li>如果到3000美元,叫上中等收入的发展中国家</li>
  138. <li>如果到了8000美元以上,叫高收入的发展中国家,指该国家以工业化为内容的现代化完成了,即所谓的现代的新兴工业化国家,再往上发展就叫后工业化时代,再做细分为中等发达国家和主要的最发达国家</li>
  139. </ol>
  140. <li>1978年我国人均GDP 是379元人民币,折算成美元为100美元多一点,在当时世界190多个国家排序中我国和当时著名的穷国扎依尔并列100多位,可以说是一个标准的穷国,经过二十几年改革开放的努力,我们实现了经济发展上的一个历史阶段性的突破,我们从最穷的国家上升到了1200多美元,被称为下中等收入的发展中国家,这个阶段转变的速度快不快?</li>
  141. </ul-->
  142. </div>
  143. <div class="tab-pane" id="main2">
  144. <div class="ctrl-wrap">
  145. <div class="ctrl-content">
  146. <button type="button" class="btn btn-success" id="2002">2002</button>
  147. <button type="button" class="btn btn-info" id="2003">2003</button>
  148. <button type="button" class="btn btn-info" id="2004">2004</button>
  149. <button type="button" class="btn btn-info" id="2005">2005</button>
  150. <button type="button" class="btn btn-info" id="2006">2006</button>
  151. <button type="button" class="btn btn-info" id="2007">2007</button>
  152. <button type="button" class="btn btn-info" id="2008">2008</button>
  153. <button type="button" class="btn btn-info" id="2009">2009</button>
  154. <button type="button" class="btn btn-info" id="2010">2010</button>
  155. <button type="button" class="btn btn-info" id="2011">2011</button>
  156. </div>
  157. </div>
  158. <div id="g20" class="g2wrap"></div>
  159. <div id="g21" class="g2wrap"></div>
  160. <div id="g22" class="g2wrap"></div>
  161. <div id="g23" class="g2wrap"></div>
  162. <div id="g24" class="g2wrap"></div>
  163. <div id="g25" class="g2wrap"></div>
  164. <!--ul style="padding-top:15px;clear:both">
  165. <li>衡量一个国家经济发展水平的方法的指标体系现在很有争议,但无论怎么争议,用GDP这个指标从数量方面来体现一个国家经济发展已经达到的水平,尽管有它的荒谬性和局限性,但也有其不可或缺性、不可替代性。</li>
  166. <li>今天我们主要从GDP水平上来看一下中国经济发展大体上现在达到的阶段。十三万六千多亿人民币按照我们现在大体上所说的1比8.3的官汇折算大约一万六千多亿美元,这样一个发展水平、总量规模在世界上大体处于什么位置呢?</li>
  167. <li>我国是排在世界第六位,第一位是美国,其完成GDP的数量在数值上和我国比较接近,是十二万多亿,不同的是计量单位不一样,它是美元,我国是人民币,我国大概相当于美国的八分之一,美国GDP 占世界总量三分之一左右,最高年份达到世界总量的32%,去年大概占28%,第二位是日本,日本大概五万多亿,第三位是德国,第四位是英国,第五位是法国,如果没有意外的话经过第十一个五年计划后估计中国在总量上超过法国应该是问题不大。 </li>
  168. </ul-->
  169. <p style="clear:both"></p>
  170. </div>
  171. <div class="tab-pane" id="main3">
  172. <div id="g3" style="height:400px"></div>
  173. <p><i>*GDP与房地产的关系、与金融业的关系,房地产与金融业的关系,第一、二、三产业间的关系……任何两项或多项数据间均可进行比较。</i></p>
  174. <!--ul>
  175. <li>衡量一个国家经济发展水平的方法的指标体系现在很有争议,但无论怎么争议,用GDP这个指标从数量方面来体现一个国家经济发展已经达到的水平,尽管有它的荒谬性和局限性,但也有其不可或缺性、不可替代性。</li>
  176. <li>今天我们主要从GDP水平上来看一下中国经济发展大体上现在达到的阶段。十三万六千多亿人民币按照我们现在大体上所说的1比8.3的官汇折算大约一万六千多亿美元,这样一个发展水平、总量规模在世界上大体处于什么位置呢?</li>
  177. <li>我国是排在世界第六位,第一位是美国,其完成GDP的数量在数值上和我国比较接近,是十二万多亿,不同的是计量单位不一样,它是美元,我国是人民币,我国大概相当于美国的八分之一,美国GDP 占世界总量三分之一左右,最高年份达到世界总量的32%,去年大概占28%,第二位是日本,日本大概五万多亿,第三位是德国,第四位是英国,第五位是法国,如果没有意外的话经过第十一个五年计划后估计中国在总量上超过法国应该是问题不大。 </li>
  178. </ul-->
  179. </div>
  180. </div>
  181. </div><!--/span-->
  182. </div><!--/row-->
  183. </div>
  184. <!-- FOOTER -->
  185. <footer>
  186. <p>&copy; 2014 Data Journalism Workshop(华媒基金会 &middot; 数据新闻工作坊) &middot; 于博(新华社) &middot; 吴楚茵(南方都市报) &middot; <a href="http://weibo.com/kenerlinfeng" target="_blank">林峰</a>(百度)</p>
  187. <p><a href="http://echarts.baidu.com" target="_blank">Data Visualization by ECharts</a></p>
  188. </footer>
  189. <script src="../../../asset/js/jquery.js"></script>
  190. <script src="../../../asset/js/bootstrap-transition.js"></script>
  191. <script src="../../../asset/js/bootstrap-alert.js"></script>
  192. <script src="../../../asset/js/bootstrap-modal.js"></script>
  193. <script src="../../../asset/js/bootstrap-dropdown.js"></script>
  194. <script src="../../../asset/js/bootstrap-scrollspy.js"></script>
  195. <script src="../../../asset/js/bootstrap-tab.js"></script>
  196. <script src="../../../asset/js/bootstrap-tooltip.js"></script>
  197. <script src="../../../asset/js/bootstrap-popover.js"></script>
  198. <script src="../../../asset/js/bootstrap-button.js"></script>
  199. <script src="../../../asset/js/bootstrap-collapse.js"></script>
  200. <script src="../../../asset/js/bootstrap-carousel.js"></script>
  201. <script src="../../../asset/js/bootstrap-typeahead.js"></script>
  202. <!-- core -->
  203. <script src="../../www/js/echarts.js"></script>
  204. <script src="./js/data-formatter.js"></script>
  205. <script src="./js/data-a-china.js"></script>
  206. <script src="./js/data-china.js"></script>
  207. <script src="./js/option0.js"></script>
  208. <script src="./js/option1.js"></script>
  209. <script src="./js/option2.js"></script>
  210. <script src="./js/option3.js"></script>
  211. <script src="./js/djws.js"></script>
  212. </body>
  213. </html>