index.html 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>晋江人力聚合大数据看板</title>
  8. <link rel="stylesheet" href="./css/index.css">
  9. <link rel="stylesheet" href="./fonts/icomoon.css">
  10. </head>
  11. <body>
  12. <div id="countdown" style="position: absolute;left:2rem;top:2rem;border:2px solid #68d8fe;width:2rem;height:2rem;line-height:2rem;color:#68d8fe;border-radius: 50%;text-align: center;font-size:1rem;font-weight: bold;cursor:pointer;">10</div>
  13. <div class="viewport">
  14. <div class="column">
  15. <div class="sales panel">
  16. <div class="inner">
  17. <div class="caption">
  18. <h3>人才问题分类</h3>
  19. </div>
  20. <div class="chart">
  21. <div class="line talent_problem"></div>
  22. </div>
  23. </div>
  24. </div>
  25. <div class="point panel">
  26. <div class="inner">
  27. <h3>人才咨询渠道</h3>
  28. <div class="chart">
  29. <div class="pie age talent_channel"></div>
  30. <div class="data">
  31. <div class="item">
  32. <h4 id="talent_channel_total"></h4>
  33. <span>
  34. <i class="icon-dot" style="color: #ed3f35"></i>
  35. 总数
  36. </span>
  37. </div>
  38. <div class="item">
  39. <h4 id="talent_channel_other"></h4>
  40. <span>
  41. <i class="icon-dot" style="color: #eacf19"></i>
  42. 其他渠道
  43. </span>
  44. </div>
  45. </div>
  46. </div>
  47. </div>
  48. </div>
  49. </div>
  50. <div class="column">
  51. <!-- 零工 -->
  52. <div class="order panel">
  53. <div class="inner">
  54. <div class="caption">
  55. <h3>人才数据</h3>
  56. </div>
  57. <div class="data">
  58. <div class="item">
  59. <h4 id="talent_total">0</h4>
  60. <span>
  61. <i class="icon-dot" style="color: #ed3f35;"></i>
  62. 人才总数
  63. </span>
  64. </div>
  65. <div class="item">
  66. <h4 id="talent_problem_total">0</h4>
  67. <span>
  68. <i class="icon-dot" style="color: #eacf19;"></i>
  69. 咨询问题数
  70. </span>
  71. </div>
  72. <div class="item">
  73. <h4 id="talent_problem_deal">0</h4>
  74. <span>
  75. <i class="icon-dot" style="color: #9fe6b8;"></i>
  76. 解决问题数
  77. </span>
  78. </div>
  79. </div>
  80. </div>
  81. </div>
  82. <!-- 人才层次 -->
  83. <div class="users panel">
  84. <div class="inner">
  85. <h3>人才层次</h3>
  86. <div class="chart">
  87. <div class="bar cate talent_level"></div>
  88. <div class="data">
  89. <div class="item">
  90. <h4 class="talent_level-total">0</h4>
  91. <span>
  92. <i class="icon-dot" style="color: #ed3f35"></i>
  93. 人才总数
  94. </span>
  95. </div>
  96. </div>
  97. </div>
  98. </div>
  99. </div>
  100. <!-- 人才分布 -->
  101. <div class="top panel">
  102. <div class="inner">
  103. <div class="province">
  104. <h3>人才分布</h3>
  105. <div class="data">
  106. <ul class="sup">
  107. <li data-type="talent_industry">
  108. <span>行业分布</span>
  109. </li>
  110. <li data-type="talent_age">
  111. <span>年龄分布</span>
  112. </li>
  113. <li data-type="talent_education">
  114. <span>学历分布</span>
  115. </li>
  116. </ul>
  117. <ul class="sub">
  118. </ul>
  119. </div>
  120. </div>
  121. </div>
  122. </div>
  123. </div>
  124. <div class="column">
  125. <div class="order panel">
  126. <div class="inner">
  127. <div class="caption">
  128. <h3>产业园机构</h3>
  129. </div>
  130. <div class="data">
  131. <div class="item">
  132. <h4 id="industry_institution_num">0</h4>
  133. <span>
  134. <i class="icon-dot" style="color: #ed3f35;"></i>
  135. 机构数量
  136. </span>
  137. </div>
  138. <div class="item">
  139. <h4 id="industry_institution_turnover">0</h4>
  140. <span>
  141. <i class="icon-dot" style="color: #eacf19;"></i>
  142. 营业额
  143. </span>
  144. </div>
  145. <div class="item">
  146. <h4 id="industry_institution_employee">0</h4>
  147. <span>
  148. <i class="icon-dot" style="color: #9fe6b8;"></i>
  149. 员工数量
  150. </span>
  151. </div>
  152. </div>
  153. </div>
  154. </div>
  155. <div class="order panel" style="margin-top: 3rem;">
  156. <div class="inner">
  157. <div class="caption">
  158. <h3>产业园服务数据</h3>
  159. </div>
  160. <div class="data">
  161. <div class="item">
  162. <h4 id="industry_enterprise_num">0</h4>
  163. <span>
  164. <i class="icon-dot" style="color: #ed3f35;"></i>
  165. 服务企业数
  166. </span>
  167. </div>
  168. <div class="item">
  169. <h4 id="industry_service_num">0</h4>
  170. <span>
  171. <i class="icon-dot" style="color: #eacf19;"></i>
  172. 服务人数
  173. </span>
  174. </div>
  175. </div>
  176. </div>
  177. </div>
  178. <!--点位-->
  179. <div class="point panel" style="margin-top: 3rem;">
  180. <div class="inner">
  181. <h3>产业园机构类型</h3>
  182. <div class="chart">
  183. <div class="pie age institution_type"></div>
  184. <div class="data">
  185. <div class="item">
  186. <h4 id="institution_type_total"></h4>
  187. <span>
  188. <i class="icon-dot" style="color: #ed3f35"></i>
  189. 总数
  190. </span>
  191. </div>
  192. <div class="item">
  193. <h4 id="institution_type_other"></h4>
  194. <span>
  195. <i class="icon-dot" style="color: #eacf19"></i>
  196. 其他
  197. </span>
  198. </div>
  199. </div>
  200. </div>
  201. </div>
  202. </div>
  203. </div>
  204. </div>
  205. </body>
  206. <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
  207. <script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
  208. <script src="./js/index.js"></script>
  209. </html>