echarts.html 104 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <!-- Meta, title, CSS, favicons, etc. -->
  6. <meta charset="utf-8">
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8. <meta name="viewport" content="width=device-width, initial-scale=1">
  9. <title>ECharts Chart Bootstrap Examples | Gentallela Alela! by Colorlib</title>
  10. <link href="css/bootstrap.min.css" rel="stylesheet">
  11. <link href="fonts/css/font-awesome.min.css" rel="stylesheet">
  12. <link href="css/animate.min.css" rel="stylesheet">
  13. <link href="css/custom.css" rel="stylesheet">
  14. <link href="css/icheck/flat/green.css" rel="stylesheet">
  15. <script src="js/jquery.min.js"></script>
  16. <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  17. <!--[if lt IE 9]>
  18. <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  19. <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  20. <![endif]-->
  21. </head>
  22. <body class="nav-md">
  23. <div class="container body">
  24. <div class="main_container">
  25. <div class="col-md-3 left_col">
  26. <div class="left_col scroll-view">
  27. <div class="navbar nav_title" style="border: 0;">
  28. <a href="index.html" class="site_title"><i class="fa fa-paw"></i> <span>Gentellela Alela!</span></a>
  29. </div>
  30. <div class="clearfix"></div>
  31. <!-- menu prile quick info -->
  32. <div class="profile">
  33. <div class="profile_pic">
  34. <img src="images/img.jpg" alt="..." class="img-circle profile_img">
  35. </div>
  36. <div class="profile_info">
  37. <span>Welcome,</span>
  38. <h2>Anthony Fernando</h2>
  39. </div>
  40. </div>
  41. <!-- /menu prile quick info -->
  42. <br />
  43. <!-- sidebar menu -->
  44. <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
  45. <div class="menu_section">
  46. <h3>General</h3>
  47. <ul class="nav side-menu">
  48. <li><a><i class="fa fa-home"></i> Home <span class="fa fa-chevron-down"></span></a>
  49. <ul class="nav child_menu" style="display: none">
  50. <li><a href="index.html">Dashboard</a>
  51. </li>
  52. <li><a href="index2.html">Dashboard2</a>
  53. </li>
  54. <li><a href="index3.html">Dashboard3</a>
  55. </li>
  56. </ul>
  57. </li>
  58. <li><a><i class="fa fa-edit"></i> Forms <span class="fa fa-chevron-down"></span></a>
  59. <ul class="nav child_menu" style="display: none">
  60. <li><a href="form.html">General Form</a>
  61. </li>
  62. <li><a href="form_advanced.html">Advanced Components</a>
  63. </li>
  64. <li><a href="form_validation.html">Form Validation</a>
  65. </li>
  66. <li><a href="form_wizards.html">Form Wizard</a>
  67. </li>
  68. <li><a href="form_upload.html">Form Upload</a>
  69. </li>
  70. <li><a href="form_buttons.html">Form Buttons</a>
  71. </li>
  72. </ul>
  73. </li>
  74. <li><a><i class="fa fa-desktop"></i> UI Elements <span class="fa fa-chevron-down"></span></a>
  75. <ul class="nav child_menu" style="display: none">
  76. <li><a href="general_elements.html">General Elements</a>
  77. </li>
  78. <li><a href="media_gallery.html">Media Gallery</a>
  79. </li>
  80. <li><a href="typography.html">Typography</a>
  81. </li>
  82. <li><a href="icons.html">Icons</a>
  83. </li>
  84. <li><a href="glyphicons.html">Glyphicons</a>
  85. </li>
  86. <li><a href="widgets.html">Widgets</a>
  87. </li>
  88. <li><a href="invoice.html">Invoice</a>
  89. </li>
  90. <li><a href="inbox.html">Inbox</a>
  91. </li>
  92. <li><a href="calender.html">Calender</a>
  93. </li>
  94. </ul>
  95. </li>
  96. <li><a><i class="fa fa-table"></i> Tables <span class="fa fa-chevron-down"></span></a>
  97. <ul class="nav child_menu" style="display: none">
  98. <li><a href="tables.html">Tables</a>
  99. </li>
  100. <li><a href="tables_dynamic.html">Table Dynamic</a>
  101. </li>
  102. </ul>
  103. </li>
  104. <li><a><i class="fa fa-bar-chart-o"></i> Data Presentation <span class="fa fa-chevron-down"></span></a>
  105. <ul class="nav child_menu" style="display: none">
  106. <li><a href="chartjs.html">Chart JS</a>
  107. </li>
  108. <li><a href="chartjs2.html">Chart JS2</a>
  109. </li>
  110. <li><a href="morisjs.html">Moris JS</a>
  111. </li>
  112. <li><a href="echarts.html">ECharts </a>
  113. </li>
  114. <li><a href="other_charts.html">Other Charts </a>
  115. </li>
  116. </ul>
  117. </li>
  118. </ul>
  119. </div>
  120. <div class="menu_section">
  121. <h3>Live On</h3>
  122. <ul class="nav side-menu">
  123. <li><a><i class="fa fa-bug"></i> Additional Pages <span class="fa fa-chevron-down"></span></a>
  124. <ul class="nav child_menu" style="display: none">
  125. <li><a href="e_commerce.html">E-commerce</a>
  126. </li>
  127. <li><a href="projects.html">Projects</a>
  128. </li>
  129. <li><a href="project_detail.html">Project Detail</a>
  130. </li>
  131. <li><a href="contacts.html">Contacts</a>
  132. </li>
  133. <li><a href="profile.html">Profile</a>
  134. </li>
  135. </ul>
  136. </li>
  137. <li><a><i class="fa fa-windows"></i> Extras <span class="fa fa-chevron-down"></span></a>
  138. <ul class="nav child_menu" style="display: none">
  139. <li><a href="page_404.html">404 Error</a>
  140. </li>
  141. <li><a href="page_500.html">500 Error</a>
  142. </li>
  143. <li><a href="plain_page.html">Plain Page</a>
  144. </li>
  145. <li><a href="login.html">Login Page</a>
  146. </li>
  147. <li><a href="pricing_tables.html">Pricing Tables</a>
  148. </li>
  149. </ul>
  150. </li>
  151. <li><a><i class="fa fa-laptop"></i> Landing Page <span class="label label-success pull-right">Coming Soon</span></a>
  152. </li>
  153. </ul>
  154. </div>
  155. </div>
  156. <!-- /sidebar menu -->
  157. <!-- /menu footer buttons -->
  158. <div class="sidebar-footer hidden-small">
  159. <a data-toggle="tooltip" data-placement="top" title="Settings">
  160. <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
  161. </a>
  162. <a data-toggle="tooltip" data-placement="top" title="FullScreen">
  163. <span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span>
  164. </a>
  165. <a data-toggle="tooltip" data-placement="top" title="Lock">
  166. <span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
  167. </a>
  168. <a data-toggle="tooltip" data-placement="top" title="Logout">
  169. <span class="glyphicon glyphicon-off" aria-hidden="true"></span>
  170. </a>
  171. </div>
  172. <!-- /menu footer buttons -->
  173. </div>
  174. </div>
  175. <!-- top navigation -->
  176. <div class="top_nav">
  177. <div class="nav_menu">
  178. <nav class="" role="navigation">
  179. <div class="nav toggle">
  180. <a id="menu_toggle"><i class="fa fa-bars"></i></a>
  181. </div>
  182. <ul class="nav navbar-nav navbar-right">
  183. <li class="">
  184. <a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
  185. <img src="images/img.jpg" alt="">John Doe
  186. <span class=" fa fa-angle-down"></span>
  187. </a>
  188. <ul class="dropdown-menu dropdown-usermenu animated fadeInDown pull-right">
  189. <li><a href="javascript:;"> Profile</a>
  190. </li>
  191. <li>
  192. <a href="javascript:;">
  193. <span class="badge bg-red pull-right">50%</span>
  194. <span>Settings</span>
  195. </a>
  196. </li>
  197. <li>
  198. <a href="javascript:;">Help</a>
  199. </li>
  200. <li><a href="login.html"><i class="fa fa-sign-out pull-right"></i> Log Out</a>
  201. </li>
  202. </ul>
  203. </li>
  204. <li role="presentation" class="dropdown">
  205. <a href="javascript:;" class="dropdown-toggle info-number" data-toggle="dropdown" aria-expanded="false">
  206. <i class="fa fa-envelope-o"></i>
  207. <span class="badge bg-green">6</span>
  208. </a>
  209. <ul id="menu1" class="dropdown-menu list-unstyled msg_list animated fadeInDown" role="menu">
  210. <li>
  211. <a>
  212. <span class="image">
  213. <img src="images/img.jpg" alt="Profile Image" />
  214. </span>
  215. <span>
  216. <span>John Smith</span>
  217. <span class="time">3 mins ago</span>
  218. </span>
  219. <span class="message">
  220. Film festivals used to be do-or-die moments for movie makers. They were where...
  221. </span>
  222. </a>
  223. </li>
  224. <li>
  225. <a>
  226. <span class="image">
  227. <img src="images/img.jpg" alt="Profile Image" />
  228. </span>
  229. <span>
  230. <span>John Smith</span>
  231. <span class="time">3 mins ago</span>
  232. </span>
  233. <span class="message">
  234. Film festivals used to be do-or-die moments for movie makers. They were where...
  235. </span>
  236. </a>
  237. </li>
  238. <li>
  239. <a>
  240. <span class="image">
  241. <img src="images/img.jpg" alt="Profile Image" />
  242. </span>
  243. <span>
  244. <span>John Smith</span>
  245. <span class="time">3 mins ago</span>
  246. </span>
  247. <span class="message">
  248. Film festivals used to be do-or-die moments for movie makers. They were where...
  249. </span>
  250. </a>
  251. </li>
  252. <li>
  253. <a>
  254. <span class="image">
  255. <img src="images/img.jpg" alt="Profile Image" />
  256. </span>
  257. <span>
  258. <span>John Smith</span>
  259. <span class="time">3 mins ago</span>
  260. </span>
  261. <span class="message">
  262. Film festivals used to be do-or-die moments for movie makers. They were where...
  263. </span>
  264. </a>
  265. </li>
  266. <li>
  267. <div class="text-center">
  268. <a>
  269. <strong>See All Alerts</strong>
  270. <i class="fa fa-angle-right"></i>
  271. </a>
  272. </div>
  273. </li>
  274. </ul>
  275. </li>
  276. </ul>
  277. </nav>
  278. </div>
  279. </div>
  280. <!-- /top navigation -->
  281. <!-- page content -->
  282. <div class="right_col" role="main">
  283. <div class="">
  284. <div class="page-title">
  285. <div class="title_left">
  286. <h3>
  287. Echarts
  288. <small>
  289. Some examples to get you started
  290. </small>
  291. </h3>
  292. </div>
  293. <div class="title_right">
  294. <div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
  295. <div class="input-group">
  296. <input type="text" class="form-control" placeholder="Search for...">
  297. <span class="input-group-btn">
  298. <button class="btn btn-default" type="button">Go!</button>
  299. </span>
  300. </div>
  301. </div>
  302. </div>
  303. </div>
  304. <div class="clearfix"></div>
  305. <div class="row">
  306. <div class="col-md-8 col-sm-8 col-xs-12">
  307. <div class="x_panel">
  308. <div class="x_title">
  309. <h2>Bar Graph</h2>
  310. <ul class="nav navbar-right panel_toolbox">
  311. <li><a href="#"><i class="fa fa-chevron-up"></i></a>
  312. </li>
  313. <li class="dropdown">
  314. <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
  315. <ul class="dropdown-menu" role="menu">
  316. <li><a href="#">Settings 1</a>
  317. </li>
  318. <li><a href="#">Settings 2</a>
  319. </li>
  320. </ul>
  321. </li>
  322. <li><a href="#"><i class="fa fa-close"></i></a>
  323. </li>
  324. </ul>
  325. <div class="clearfix"></div>
  326. </div>
  327. <div class="x_content">
  328. <div id="mainb" style="height:350px;"></div>
  329. </div>
  330. </div>
  331. </div>
  332. <div class="col-md-4 col-sm-4 col-xs-12">
  333. <div class="x_panel">
  334. <div class="x_title">
  335. <h2>Mini Pie</h2>
  336. <ul class="nav navbar-right panel_toolbox">
  337. <li><a href="#"><i class="fa fa-chevron-up"></i></a>
  338. </li>
  339. <li class="dropdown">
  340. <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
  341. <ul class="dropdown-menu" role="menu">
  342. <li><a href="#">Settings 1</a>
  343. </li>
  344. <li><a href="#">Settings 2</a>
  345. </li>
  346. </ul>
  347. </li>
  348. <li><a href="#"><i class="fa fa-close"></i></a>
  349. </li>
  350. </ul>
  351. <div class="clearfix"></div>
  352. </div>
  353. <div class="x_content">
  354. <div id="echart_mini_pie" style="height:350px;"></div>
  355. </div>
  356. </div>
  357. </div>
  358. <div class="col-md-4 col-sm-4 col-xs-12">
  359. <div class="x_panel">
  360. <div class="x_title">
  361. <h2>Pie Graph</h2>
  362. <ul class="nav navbar-right panel_toolbox">
  363. <li><a href="#"><i class="fa fa-chevron-up"></i></a>
  364. </li>
  365. <li class="dropdown">
  366. <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
  367. <ul class="dropdown-menu" role="menu">
  368. <li><a href="#">Settings 1</a>
  369. </li>
  370. <li><a href="#">Settings 2</a>
  371. </li>
  372. </ul>
  373. </li>
  374. <li><a href="#"><i class="fa fa-close"></i></a>
  375. </li>
  376. </ul>
  377. <div class="clearfix"></div>
  378. </div>
  379. <div class="x_content">
  380. <div id="echart_pie" style="height:350px;"></div>
  381. </div>
  382. </div>
  383. </div>
  384. <div class="col-md-4 col-sm-4 col-xs-12">
  385. <div class="x_panel">
  386. <div class="x_title">
  387. <h2>Pie Area</h2>
  388. <ul class="nav navbar-right panel_toolbox">
  389. <li><a href="#"><i class="fa fa-chevron-up"></i></a>
  390. </li>
  391. <li class="dropdown">
  392. <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
  393. <ul class="dropdown-menu" role="menu">
  394. <li><a href="#">Settings 1</a>
  395. </li>
  396. <li><a href="#">Settings 2</a>
  397. </li>
  398. </ul>
  399. </li>
  400. <li><a href="#"><i class="fa fa-close"></i></a>
  401. </li>
  402. </ul>
  403. <div class="clearfix"></div>
  404. </div>
  405. <div class="x_content">
  406. <div id="echart_pie2" style="height:350px;"></div>
  407. </div>
  408. </div>
  409. </div>
  410. <div class="col-md-4 col-sm-4 col-xs-12">
  411. <div class="x_panel">
  412. <div class="x_title">
  413. <h2>Donut Graph</h2>
  414. <ul class="nav navbar-right panel_toolbox">
  415. <li><a href="#"><i class="fa fa-chevron-up"></i></a>
  416. </li>
  417. <li class="dropdown">
  418. <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
  419. <ul class="dropdown-menu" role="menu">
  420. <li><a href="#">Settings 1</a>
  421. </li>
  422. <li><a href="#">Settings 2</a>
  423. </li>
  424. </ul>
  425. </li>
  426. <li><a href="#"><i class="fa fa-close"></i></a>
  427. </li>
  428. </ul>
  429. <div class="clearfix"></div>
  430. </div>
  431. <div class="x_content">
  432. <div id="echart_donut" style="height:350px;"></div>
  433. </div>
  434. </div>
  435. </div>
  436. <div class="col-md-6 col-sm-6 col-xs-12">
  437. <div class="x_panel">
  438. <div class="x_title">
  439. <h2>Scatter Graph</h2>
  440. <ul class="nav navbar-right panel_toolbox">
  441. <li><a href="#"><i class="fa fa-chevron-up"></i></a>
  442. </li>
  443. <li class="dropdown">
  444. <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
  445. <ul class="dropdown-menu" role="menu">
  446. <li><a href="#">Settings 1</a>
  447. </li>
  448. <li><a href="#">Settings 2</a>
  449. </li>
  450. </ul>
  451. </li>
  452. <li><a href="#"><i class="fa fa-close"></i></a>
  453. </li>
  454. </ul>
  455. <div class="clearfix"></div>
  456. </div>
  457. <div class="x_content">
  458. <div id="echart_scatter" style="height:350px;"></div>
  459. </div>
  460. </div>
  461. </div>
  462. <div class="col-md-6 col-sm-6 col-xs-12">
  463. <div class="x_panel">
  464. <div class="x_title">
  465. <h2>Line Graph</h2>
  466. <ul class="nav navbar-right panel_toolbox">
  467. <li><a href="#"><i class="fa fa-chevron-up"></i></a>
  468. </li>
  469. <li class="dropdown">
  470. <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
  471. <ul class="dropdown-menu" role="menu">
  472. <li><a href="#">Settings 1</a>
  473. </li>
  474. <li><a href="#">Settings 2</a>
  475. </li>
  476. </ul>
  477. </li>
  478. <li><a href="#"><i class="fa fa-close"></i></a>
  479. </li>
  480. </ul>
  481. <div class="clearfix"></div>
  482. </div>
  483. <div class="x_content">
  484. <div id="echart_line" style="height:350px;"></div>
  485. </div>
  486. </div>
  487. </div>
  488. <div class="col-md-4 col-sm-4 col-xs-12">
  489. <div class="x_panel">
  490. <div class="x_title">
  491. <h2>Horizontal Bar</h2>
  492. <ul class="nav navbar-right panel_toolbox">
  493. <li><a href="#"><i class="fa fa-chevron-up"></i></a>
  494. </li>
  495. <li class="dropdown">
  496. <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
  497. <ul class="dropdown-menu" role="menu">
  498. <li><a href="#">Settings 1</a>
  499. </li>
  500. <li><a href="#">Settings 2</a>
  501. </li>
  502. </ul>
  503. </li>
  504. <li><a href="#"><i class="fa fa-close"></i></a>
  505. </li>
  506. </ul>
  507. <div class="clearfix"></div>
  508. </div>
  509. <div class="x_content">
  510. <div id="echart_bar_horizontal" style="height:370px;"></div>
  511. </div>
  512. </div>
  513. </div>
  514. <div class="col-md-8 col-sm-8 col-xs-12">
  515. <div class="x_panel">
  516. <div class="x_title">
  517. <h2>World Map</h2>
  518. <ul class="nav navbar-right panel_toolbox">
  519. <li><a href="#"><i class="fa fa-chevron-up"></i></a>
  520. </li>
  521. <li class="dropdown">
  522. <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
  523. <ul class="dropdown-menu" role="menu">
  524. <li><a href="#">Settings 1</a>
  525. </li>
  526. <li><a href="#">Settings 2</a>
  527. </li>
  528. </ul>
  529. </li>
  530. <li><a href="#"><i class="fa fa-close"></i></a>
  531. </li>
  532. </ul>
  533. <div class="clearfix"></div>
  534. </div>
  535. <div class="x_content">
  536. <div id="echart_world_map" style="height:370px;"></div>
  537. </div>
  538. </div>
  539. </div>
  540. <div class="col-md-4 col-sm-4 col-xs-12">
  541. <div class="x_panel">
  542. <div class="x_title">
  543. <h2>Pyramid</h2>
  544. <ul class="nav navbar-right panel_toolbox">
  545. <li><a href="#"><i class="fa fa-chevron-up"></i></a>
  546. </li>
  547. <li class="dropdown">
  548. <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
  549. <ul class="dropdown-menu" role="menu">
  550. <li><a href="#">Settings 1</a>
  551. </li>
  552. <li><a href="#">Settings 2</a>
  553. </li>
  554. </ul>
  555. </li>
  556. <li><a href="#"><i class="fa fa-close"></i></a>
  557. </li>
  558. </ul>
  559. <div class="clearfix"></div>
  560. </div>
  561. <div class="x_content">
  562. <div id="echart_pyramid" style="height:370px;"></div>
  563. </div>
  564. </div>
  565. </div>
  566. <div class="col-md-4 col-sm-4 col-xs-12">
  567. <div class="x_panel">
  568. <div class="x_title">
  569. <h2>Sonar</h2>
  570. <ul class="nav navbar-right panel_toolbox">
  571. <li><a href="#"><i class="fa fa-chevron-up"></i></a>
  572. </li>
  573. <li class="dropdown">
  574. <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
  575. <ul class="dropdown-menu" role="menu">
  576. <li><a href="#">Settings 1</a>
  577. </li>
  578. <li><a href="#">Settings 2</a>
  579. </li>
  580. </ul>
  581. </li>
  582. <li><a href="#"><i class="fa fa-close"></i></a>
  583. </li>
  584. </ul>
  585. <div class="clearfix"></div>
  586. </div>
  587. <div class="x_content">
  588. <div id="echart_sonar" style="height:370px;"></div>
  589. </div>
  590. </div>
  591. </div>
  592. <div class="col-md-4 col-sm-4 col-xs-12">
  593. <div class="x_panel">
  594. <div class="x_title">
  595. <h2>Guage</h2>
  596. <ul class="nav navbar-right panel_toolbox">
  597. <li><a href="#"><i class="fa fa-chevron-up"></i></a>
  598. </li>
  599. <li class="dropdown">
  600. <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
  601. <ul class="dropdown-menu" role="menu">
  602. <li><a href="#">Settings 1</a>
  603. </li>
  604. <li><a href="#">Settings 2</a>
  605. </li>
  606. </ul>
  607. </li>
  608. <li><a href="#"><i class="fa fa-close"></i></a>
  609. </li>
  610. </ul>
  611. <div class="clearfix"></div>
  612. </div>
  613. <div class="x_content">
  614. <div id="echart_guage" style="height:370px;"></div>
  615. </div>
  616. </div>
  617. </div>
  618. </div>
  619. </div>
  620. <!-- footer content -->
  621. <footer>
  622. <div class="">
  623. <p class="pull-right">Gentelella Alela! a Bootstrap 3 template by <a>Kimlabs</a>. |
  624. <span class="lead"> <i class="fa fa-paw"></i> Gentelella Alela!</span>
  625. </p>
  626. </div>
  627. <div class="clearfix"></div>
  628. </footer>
  629. <!-- /footer content -->
  630. </div>
  631. <!-- /page content -->
  632. </div>
  633. </div>
  634. <div id="custom_notifications" class="custom-notifications dsp_none">
  635. <ul class="list-unstyled notifications clearfix" data-tabbed_notifications="notif-group">
  636. </ul>
  637. <div class="clearfix"></div>
  638. <div id="notif-group" class="tabbed_notifications"></div>
  639. </div>
  640. <script src="js/bootstrap.min.js"></script>
  641. <script src="js/progressbar/bootstrap-progressbar.min.js"></script>
  642. <script src="js/nicescroll/jquery.nicescroll.min.js"></script>
  643. <script src="js/icheck/icheck.min.js"></script>
  644. <script src="js/custom.js"></script>
  645. <!-- echart -->
  646. <script src="js/echart/echarts-all.js"></script>
  647. <script src="js/echart/green.js"></script>
  648. <script>
  649. var myChart9 = echarts.init(document.getElementById('mainb'), theme);
  650. myChart9.setOption({
  651. title: {
  652. text: 'Graph title',
  653. subtext: 'Graph Sub-text'
  654. },
  655. //theme : theme,
  656. tooltip: {
  657. trigger: 'axis'
  658. },
  659. legend: {
  660. data: ['sales', 'purchases']
  661. },
  662. toolbox: {
  663. show: false
  664. },
  665. calculable: false,
  666. xAxis: [
  667. {
  668. type: 'category',
  669. data: ['1?', '2?', '3?', '4?', '5?', '6?', '7?', '8?', '9?', '10?', '11?', '12?']
  670. }
  671. ],
  672. yAxis: [
  673. {
  674. type: 'value'
  675. }
  676. ],
  677. series: [
  678. {
  679. name: 'sales',
  680. type: 'bar',
  681. data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
  682. markPoint: {
  683. data: [
  684. {
  685. type: 'max',
  686. name: '???'
  687. },
  688. {
  689. type: 'min',
  690. name: '???'
  691. }
  692. ]
  693. },
  694. markLine: {
  695. data: [
  696. {
  697. type: 'average',
  698. name: '???'
  699. }
  700. ]
  701. }
  702. },
  703. {
  704. name: 'purchases',
  705. type: 'bar',
  706. data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
  707. markPoint: {
  708. data: [
  709. {
  710. name: 'sales',
  711. value: 182.2,
  712. xAxis: 7,
  713. yAxis: 183,
  714. symbolSize: 18
  715. },
  716. {
  717. name: 'purchases',
  718. value: 2.3,
  719. xAxis: 11,
  720. yAxis: 3
  721. }
  722. ]
  723. },
  724. markLine: {
  725. data: [
  726. {
  727. type: 'average',
  728. name: '???'
  729. }
  730. ]
  731. }
  732. }
  733. ]
  734. });
  735. var myChart = echarts.init(document.getElementById('echart_sonar'), theme);
  736. myChart.setOption({
  737. title: {
  738. text: 'Budget vs spending',
  739. subtext: 'subtext'
  740. },
  741. tooltip: {
  742. trigger: 'axis'
  743. },
  744. legend: {
  745. orient: 'vertical',
  746. x: 'right',
  747. y: 'bottom',
  748. data: ['(Allocated Budget)', 'Actual Spending)']
  749. },
  750. toolbox: {
  751. show: true,
  752. feature: {
  753. restore: {
  754. show: true
  755. },
  756. saveAsImage: {
  757. show: true
  758. }
  759. }
  760. },
  761. polar: [
  762. {
  763. indicator: [
  764. {
  765. text: 'sales',
  766. max: 6000
  767. },
  768. {
  769. text: 'Administration',
  770. max: 16000
  771. },
  772. {
  773. text: 'Information Techology',
  774. max: 30000
  775. },
  776. {
  777. text: 'Customer Support',
  778. max: 38000
  779. },
  780. {
  781. text: 'Development',
  782. max: 52000
  783. },
  784. {
  785. text: 'Marketing',
  786. max: 25000
  787. }
  788. ]
  789. }
  790. ],
  791. calculable: true,
  792. series: [
  793. {
  794. name: 'Budget vs spending',
  795. type: 'radar',
  796. data: [
  797. {
  798. value: [4300, 10000, 28000, 35000, 50000, 19000],
  799. name: 'Allocated Budget'
  800. },
  801. {
  802. value: [5000, 14000, 28000, 31000, 42000, 21000],
  803. name: 'Actual Spending'
  804. }
  805. ]
  806. }
  807. ]
  808. });
  809. var myChart = echarts.init(document.getElementById('echart_pyramid'), theme);
  810. myChart.setOption({
  811. title: {
  812. text: 'Echart Pyramid Graph',
  813. subtext: 'Subtitle'
  814. },
  815. tooltip: {
  816. trigger: 'item',
  817. formatter: "{a} <br/>{b} : {c}%"
  818. },
  819. toolbox: {
  820. show: true,
  821. feature: {
  822. restore: {
  823. show: true
  824. },
  825. saveAsImage: {
  826. show: true
  827. }
  828. }
  829. },
  830. legend: {
  831. data: ['Something #1', 'Something #2', 'Something #3', 'Something #4', 'Something #5'],
  832. orient: 'vertical',
  833. x: 'left',
  834. y: 'bottom'
  835. },
  836. calculable: true,
  837. series: [
  838. {
  839. name: '漏斗图',
  840. type: 'funnel',
  841. width: '40%',
  842. data: [
  843. {
  844. value: 60,
  845. name: 'Something #1'
  846. },
  847. {
  848. value: 40,
  849. name: 'Something #2'
  850. },
  851. {
  852. value: 20,
  853. name: 'Something #3'
  854. },
  855. {
  856. value: 80,
  857. name: 'Something #4'
  858. },
  859. {
  860. value: 100,
  861. name: 'Something #5'
  862. }
  863. ]
  864. }
  865. ]
  866. });
  867. var myChart = echarts.init(document.getElementById('echart_guage'), theme);
  868. myChart.setOption({
  869. tooltip: {
  870. formatter: "{a} <br/>{b} : {c}%"
  871. },
  872. toolbox: {
  873. show: true,
  874. feature: {
  875. restore: {
  876. show: true
  877. },
  878. saveAsImage: {
  879. show: true
  880. }
  881. }
  882. },
  883. series: [
  884. {
  885. name: 'Performance',
  886. type: 'gauge',
  887. center: ['50%', '50%'],
  888. radius: [0, '75%'],
  889. startAngle: 140,
  890. endAngle: -140,
  891. min: 0,
  892. max: 100,
  893. precision: 0,
  894. splitNumber: 10,
  895. axisLine: {
  896. show: true,
  897. lineStyle: {
  898. color: [[0.2, 'lightgreen'], [0.4, 'orange'], [0.8, 'skyblue'], [1, '#ff4500']],
  899. width: 30
  900. }
  901. },
  902. axisTick: {
  903. show: true,
  904. splitNumber: 5,
  905. length: 8,
  906. lineStyle: {
  907. color: '#eee',
  908. width: 1,
  909. type: 'solid'
  910. }
  911. },
  912. axisLabel: {
  913. show: true,
  914. formatter: function (v) {
  915. switch (v + '') {
  916. case '10':
  917. return 'a';
  918. case '30':
  919. return 'b';
  920. case '60':
  921. return 'c';
  922. case '90':
  923. return 'd';
  924. default:
  925. return '';
  926. }
  927. },
  928. textStyle: {
  929. color: '#333'
  930. }
  931. },
  932. splitLine: {
  933. show: true,
  934. length: 30,
  935. lineStyle: {
  936. color: '#eee',
  937. width: 2,
  938. type: 'solid'
  939. }
  940. },
  941. pointer: {
  942. length: '80%',
  943. width: 8,
  944. color: 'auto'
  945. },
  946. title: {
  947. show: true,
  948. offsetCenter: ['-65%', -10],
  949. textStyle: {
  950. color: '#333',
  951. fontSize: 15
  952. }
  953. },
  954. detail: {
  955. show: true,
  956. backgroundColor: 'rgba(0,0,0,0)',
  957. borderWidth: 0,
  958. borderColor: '#ccc',
  959. width: 100,
  960. height: 40,
  961. offsetCenter: ['-60%', 10],
  962. formatter: '{value}%',
  963. textStyle: {
  964. color: 'auto',
  965. fontSize: 30
  966. }
  967. },
  968. data: [{
  969. value: 50,
  970. name: 'Performance'
  971. }]
  972. }
  973. ]
  974. });
  975. var myChart = echarts.init(document.getElementById('echart_line'), theme);
  976. myChart.setOption({
  977. title: {
  978. text: 'Line Graph',
  979. subtext: 'Subtitle'
  980. },
  981. tooltip: {
  982. trigger: 'axis'
  983. },
  984. legend: {
  985. data: ['Intent', 'Pre-order', 'Deal']
  986. },
  987. toolbox: {
  988. show: true,
  989. feature: {
  990. magicType: {
  991. show: true,
  992. type: ['line', 'bar', 'stack', 'tiled']
  993. },
  994. restore: {
  995. show: true
  996. },
  997. saveAsImage: {
  998. show: true
  999. }
  1000. }
  1001. },
  1002. calculable: true,
  1003. xAxis: [
  1004. {
  1005. type: 'category',
  1006. boundaryGap: false,
  1007. data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  1008. }
  1009. ],
  1010. yAxis: [
  1011. {
  1012. type: 'value'
  1013. }
  1014. ],
  1015. series: [
  1016. {
  1017. name: 'Deal',
  1018. type: 'line',
  1019. smooth: true,
  1020. itemStyle: {
  1021. normal: {
  1022. areaStyle: {
  1023. type: 'default'
  1024. }
  1025. }
  1026. },
  1027. data: [10, 12, 21, 54, 260, 830, 710]
  1028. },
  1029. {
  1030. name: 'Pre-order',
  1031. type: 'line',
  1032. smooth: true,
  1033. itemStyle: {
  1034. normal: {
  1035. areaStyle: {
  1036. type: 'default'
  1037. }
  1038. }
  1039. },
  1040. data: [30, 182, 434, 791, 390, 30, 10]
  1041. },
  1042. {
  1043. name: 'Intent',
  1044. type: 'line',
  1045. smooth: true,
  1046. itemStyle: {
  1047. normal: {
  1048. areaStyle: {
  1049. type: 'default'
  1050. }
  1051. }
  1052. },
  1053. data: [1320, 1132, 601, 234, 120, 90, 20]
  1054. }
  1055. ]
  1056. });
  1057. var myChart = echarts.init(document.getElementById('echart_scatter'), theme);
  1058. myChart.setOption({
  1059. title: {
  1060. text: 'Scatter Graph',
  1061. subtext: 'Heinz 2003'
  1062. },
  1063. tooltip: {
  1064. trigger: 'axis',
  1065. showDelay: 0,
  1066. axisPointer: {
  1067. type: 'cross',
  1068. lineStyle: {
  1069. type: 'dashed',
  1070. width: 1
  1071. }
  1072. }
  1073. },
  1074. legend: {
  1075. data: ['Data2', 'Data1']
  1076. },
  1077. toolbox: {
  1078. show: true,
  1079. feature: {
  1080. saveAsImage: {
  1081. show: true
  1082. }
  1083. }
  1084. },
  1085. xAxis: [
  1086. {
  1087. type: 'value',
  1088. scale: true,
  1089. axisLabel: {
  1090. formatter: '{value} cm'
  1091. }
  1092. }
  1093. ],
  1094. yAxis: [
  1095. {
  1096. type: 'value',
  1097. scale: true,
  1098. axisLabel: {
  1099. formatter: '{value} kg'
  1100. }
  1101. }
  1102. ],
  1103. series: [
  1104. {
  1105. name: 'Data1',
  1106. type: 'scatter',
  1107. tooltip: {
  1108. trigger: 'item',
  1109. formatter: function (params) {
  1110. if (params.value.length > 1) {
  1111. return params.seriesName + ' :<br/>' + params.value[0] + 'cm ' + params.value[1] + 'kg ';
  1112. } else {
  1113. return params.seriesName + ' :<br/>' + params.name + ' : ' + params.value + 'kg ';
  1114. }
  1115. }
  1116. },
  1117. data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
  1118. [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
  1119. [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
  1120. [147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],
  1121. [159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],
  1122. [174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],
  1123. [154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],
  1124. [162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],
  1125. [168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3],
  1126. [167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],
  1127. [167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3],
  1128. [168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3],
  1129. [156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0],
  1130. [162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7],
  1131. [151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5],
  1132. [164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2],
  1133. [170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8],
  1134. [163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9],
  1135. [161.4, 63.4], [169.0, 58.2], [166.2, 58.6], [159.4, 45.7], [162.5, 52.2],
  1136. [159.0, 48.6], [162.8, 57.8], [159.0, 55.6], [179.8, 66.8], [162.9, 59.4],
  1137. [161.0, 53.6], [151.1, 73.2], [168.2, 53.4], [168.9, 69.0], [173.2, 58.4],
  1138. [171.8, 56.2], [178.0, 70.6], [164.3, 59.8], [163.0, 72.0], [168.5, 65.2],
  1139. [166.8, 56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0],
  1140. [159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0, 45.0], [163.2, 54.0],
  1141. [162.2, 50.2], [161.3, 60.2], [149.5, 44.8], [157.5, 58.8], [163.2, 56.4],
  1142. [172.7, 62.0], [155.0, 49.2], [156.5, 67.2], [164.0, 53.8], [160.9, 54.4],
  1143. [162.8, 58.0], [167.0, 59.8], [160.0, 54.8], [160.0, 43.2], [168.9, 60.5],
  1144. [158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [167.1, 62.2], [158.0, 55.5],
  1145. [167.6, 57.8], [156.0, 54.6], [162.1, 59.2], [173.4, 52.7], [159.8, 53.2],
  1146. [170.5, 64.5], [159.2, 51.8], [157.5, 56.0], [161.3, 63.6], [162.6, 63.2],
  1147. [160.0, 59.5], [168.9, 56.8], [165.1, 64.1], [162.6, 50.0], [165.1, 72.3],
  1148. [166.4, 55.0], [160.0, 55.9], [152.4, 60.4], [170.2, 69.1], [162.6, 84.5],
  1149. [170.2, 55.9], [158.8, 55.5], [172.7, 69.5], [167.6, 76.4], [162.6, 61.4],
  1150. [167.6, 65.9], [156.2, 58.6], [175.2, 66.8], [172.1, 56.6], [162.6, 58.6],
  1151. [160.0, 55.9], [165.1, 59.1], [182.9, 81.8], [166.4, 70.7], [165.1, 56.8],
  1152. [177.8, 60.0], [165.1, 58.2], [175.3, 72.7], [154.9, 54.1], [158.8, 49.1],
  1153. [172.7, 75.9], [168.9, 55.0], [161.3, 57.3], [167.6, 55.0], [165.1, 65.5],
  1154. [175.3, 65.5], [157.5, 48.6], [163.8, 58.6], [167.6, 63.6], [165.1, 55.2],
  1155. [165.1, 62.7], [168.9, 56.6], [162.6, 53.9], [164.5, 63.2], [176.5, 73.6],
  1156. [168.9, 62.0], [175.3, 63.6], [159.4, 53.2], [160.0, 53.4], [170.2, 55.0],
  1157. [162.6, 70.5], [167.6, 54.5], [162.6, 54.5], [160.7, 55.9], [160.0, 59.0],
  1158. [157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [165.1, 80.9],
  1159. [172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1],
  1160. [161.3, 70.5], [167.6, 52.7], [167.6, 62.7], [165.1, 86.3], [162.6, 66.4],
  1161. [152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2, 57.7],
  1162. [160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5],
  1163. [167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8],
  1164. [175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0],
  1165. [174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9],
  1166. [156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6],
  1167. [169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8],
  1168. [176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]
  1169. ],
  1170. markPoint: {
  1171. data: [
  1172. {
  1173. type: 'max',
  1174. name: 'Max'
  1175. },
  1176. {
  1177. type: 'min',
  1178. name: 'Min'
  1179. }
  1180. ]
  1181. },
  1182. markLine: {
  1183. data: [
  1184. {
  1185. type: 'average',
  1186. name: 'Mean'
  1187. }
  1188. ]
  1189. }
  1190. },
  1191. {
  1192. name: 'Data2',
  1193. type: 'scatter',
  1194. tooltip: {
  1195. trigger: 'item',
  1196. formatter: function (params) {
  1197. if (params.value.length > 1) {
  1198. return params.seriesName + ' :<br/>' + params.value[0] + 'cm ' + params.value[1] + 'kg ';
  1199. } else {
  1200. return params.seriesName + ' :<br/>' + params.name + ' : ' + params.value + 'kg ';
  1201. }
  1202. }
  1203. },
  1204. data: [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8],
  1205. [181.5, 74.8], [184.0, 86.4], [184.5, 78.4], [175.0, 62.0], [184.0, 81.6],
  1206. [180.0, 76.6], [177.8, 83.6], [192.0, 90.0], [176.0, 74.6], [174.0, 71.0],
  1207. [184.0, 79.6], [192.7, 93.8], [171.5, 70.0], [173.0, 72.4], [176.0, 85.9],
  1208. [176.0, 78.8], [180.5, 77.8], [172.7, 66.2], [176.0, 86.4], [173.5, 81.8],
  1209. [178.0, 89.6], [180.3, 82.8], [180.3, 76.4], [164.5, 63.2], [173.0, 60.9],
  1210. [183.5, 74.8], [175.5, 70.0], [188.0, 72.4], [189.2, 84.1], [172.8, 69.1],
  1211. [170.0, 59.5], [182.0, 67.2], [170.0, 61.3], [177.8, 68.6], [184.2, 80.1],
  1212. [186.7, 87.8], [171.4, 84.7], [172.7, 73.4], [175.3, 72.1], [180.3, 82.6],
  1213. [182.9, 88.7], [188.0, 84.1], [177.2, 94.1], [172.1, 74.9], [167.0, 59.1],
  1214. [169.5, 75.6], [174.0, 86.2], [172.7, 75.3], [182.2, 87.1], [164.1, 55.2],
  1215. [163.0, 57.0], [171.5, 61.4], [184.2, 76.8], [174.0, 86.8], [174.0, 72.2],
  1216. [177.0, 71.6], [186.0, 84.8], [167.0, 68.2], [171.8, 66.1], [182.0, 72.0],
  1217. [167.0, 64.6], [177.8, 74.8], [164.5, 70.0], [192.0, 101.6], [175.5, 63.2],
  1218. [171.2, 79.1], [181.6, 78.9], [167.4, 67.7], [181.1, 66.0], [177.0, 68.2],
  1219. [174.5, 63.9], [177.5, 72.0], [170.5, 56.8], [182.4, 74.5], [197.1, 90.9],
  1220. [180.1, 93.0], [175.5, 80.9], [180.6, 72.7], [184.4, 68.0], [175.5, 70.9],
  1221. [180.6, 72.5], [177.0, 72.5], [177.1, 83.4], [181.6, 75.5], [176.5, 73.0],
  1222. [175.0, 70.2], [174.0, 73.4], [165.1, 70.5], [177.0, 68.9], [192.0, 102.3],
  1223. [176.5, 68.4], [169.4, 65.9], [182.1, 75.7], [179.8, 84.5], [175.3, 87.7],
  1224. [184.9, 86.4], [177.3, 73.2], [167.4, 53.9], [178.1, 72.0], [168.9, 55.5],
  1225. [157.2, 58.4], [180.3, 83.2], [170.2, 72.7], [177.8, 64.1], [172.7, 72.3],
  1226. [165.1, 65.0], [186.7, 86.4], [165.1, 65.0], [174.0, 88.6], [175.3, 84.1],
  1227. [185.4, 66.8], [177.8, 75.5], [180.3, 93.2], [180.3, 82.7], [177.8, 58.0],
  1228. [177.8, 79.5], [177.8, 78.6], [177.8, 71.8], [177.8, 116.4], [163.8, 72.2],
  1229. [188.0, 83.6], [198.1, 85.5], [175.3, 90.9], [166.4, 85.9], [190.5, 89.1],
  1230. [166.4, 75.0], [177.8, 77.7], [179.7, 86.4], [172.7, 90.9], [190.5, 73.6],
  1231. [185.4, 76.4], [168.9, 69.1], [167.6, 84.5], [175.3, 64.5], [170.2, 69.1],
  1232. [190.5, 108.6], [177.8, 86.4], [190.5, 80.9], [177.8, 87.7], [184.2, 94.5],
  1233. [176.5, 80.2], [177.8, 72.0], [180.3, 71.4], [171.4, 72.7], [172.7, 84.1],
  1234. [172.7, 76.8], [177.8, 63.6], [177.8, 80.9], [182.9, 80.9], [170.2, 85.5],
  1235. [167.6, 68.6], [175.3, 67.7], [165.1, 66.4], [185.4, 102.3], [181.6, 70.5],
  1236. [172.7, 95.9], [190.5, 84.1], [179.1, 87.3], [175.3, 71.8], [170.2, 65.9],
  1237. [193.0, 95.9], [171.4, 91.4], [177.8, 81.8], [177.8, 96.8], [167.6, 69.1],
  1238. [167.6, 82.7], [180.3, 75.5], [182.9, 79.5], [176.5, 73.6], [186.7, 91.8],
  1239. [188.0, 84.1], [188.0, 85.9], [177.8, 81.8], [174.0, 82.5], [177.8, 80.5],
  1240. [171.4, 70.0], [185.4, 81.8], [185.4, 84.1], [188.0, 90.5], [188.0, 91.4],
  1241. [182.9, 89.1], [176.5, 85.0], [175.3, 69.1], [175.3, 73.6], [188.0, 80.5],
  1242. [188.0, 82.7], [175.3, 86.4], [170.5, 67.7], [179.1, 92.7], [177.8, 93.6],
  1243. [175.3, 70.9], [182.9, 75.0], [170.8, 93.2], [188.0, 93.2], [180.3, 77.7],
  1244. [177.8, 61.4], [185.4, 94.1], [168.9, 75.0], [185.4, 83.6], [180.3, 85.5],
  1245. [174.0, 73.9], [167.6, 66.8], [182.9, 87.3], [160.0, 72.3], [180.3, 88.6],
  1246. [167.6, 75.5], [186.7, 101.4], [175.3, 91.1], [175.3, 67.3], [175.9, 77.7],
  1247. [175.3, 81.8], [179.1, 75.5], [181.6, 84.5], [177.8, 76.6], [182.9, 85.0],
  1248. [177.8, 102.5], [184.2, 77.3], [179.1, 71.8], [176.5, 87.9], [188.0, 94.3],
  1249. [174.0, 70.9], [167.6, 64.5], [170.2, 77.3], [167.6, 72.3], [188.0, 87.3],
  1250. [174.0, 80.0], [176.5, 82.3], [180.3, 73.6], [167.6, 74.1], [188.0, 85.9],
  1251. [180.3, 73.2], [167.6, 76.3], [183.0, 65.9], [183.0, 90.9], [179.1, 89.1],
  1252. [170.2, 62.3], [177.8, 82.7], [179.1, 79.1], [190.5, 98.2], [177.8, 84.1],
  1253. [180.3, 83.2], [180.3, 83.2]
  1254. ],
  1255. markPoint: {
  1256. data: [
  1257. {
  1258. type: 'max',
  1259. name: 'Max'
  1260. },
  1261. {
  1262. type: 'min',
  1263. name: 'Min'
  1264. }
  1265. ]
  1266. },
  1267. markLine: {
  1268. data: [
  1269. {
  1270. type: 'average',
  1271. name: 'Mean'
  1272. }
  1273. ]
  1274. }
  1275. }
  1276. ]
  1277. });
  1278. var myChart = echarts.init(document.getElementById('echart_bar_horizontal'), theme);
  1279. myChart.setOption({
  1280. title: {
  1281. text: 'Bar Graph',
  1282. subtext: 'Graph subtitle'
  1283. },
  1284. tooltip: {
  1285. trigger: 'axis'
  1286. },
  1287. legend: {
  1288. data: ['2015', '2016']
  1289. },
  1290. toolbox: {
  1291. show: true,
  1292. feature: {
  1293. saveAsImage: {
  1294. show: true
  1295. }
  1296. }
  1297. },
  1298. calculable: true,
  1299. xAxis: [
  1300. {
  1301. type: 'value',
  1302. boundaryGap: [0, 0.01]
  1303. }
  1304. ],
  1305. yAxis: [
  1306. {
  1307. type: 'category',
  1308. data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  1309. }
  1310. ],
  1311. series: [
  1312. {
  1313. name: '2015',
  1314. type: 'bar',
  1315. data: [18203, 23489, 29034, 104970, 131744, 630230]
  1316. },
  1317. {
  1318. name: '2016',
  1319. type: 'bar',
  1320. data: [19325, 23438, 31000, 121594, 134141, 681807]
  1321. }
  1322. ]
  1323. });
  1324. var myChart = echarts.init(document.getElementById('echart_pie2'), theme);
  1325. myChart.setOption({
  1326. tooltip: {
  1327. trigger: 'item',
  1328. formatter: "{a} <br/>{b} : {c} ({d}%)"
  1329. },
  1330. legend: {
  1331. x: 'center',
  1332. y: 'bottom',
  1333. data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6']
  1334. },
  1335. toolbox: {
  1336. show: true,
  1337. feature: {
  1338. magicType: {
  1339. show: true,
  1340. type: ['pie', 'funnel']
  1341. },
  1342. restore: {
  1343. show: true
  1344. },
  1345. saveAsImage: {
  1346. show: true
  1347. }
  1348. }
  1349. },
  1350. calculable: true,
  1351. series: [
  1352. {
  1353. name: 'Area Mode',
  1354. type: 'pie',
  1355. radius: [25, 90],
  1356. center: ['50%', 170],
  1357. roseType: 'area',
  1358. x: '50%',
  1359. max: 40,
  1360. sort: 'ascending',
  1361. data: [
  1362. {
  1363. value: 10,
  1364. name: 'rose1'
  1365. },
  1366. {
  1367. value: 5,
  1368. name: 'rose2'
  1369. },
  1370. {
  1371. value: 15,
  1372. name: 'rose3'
  1373. },
  1374. {
  1375. value: 25,
  1376. name: 'rose4'
  1377. },
  1378. {
  1379. value: 20,
  1380. name: 'rose5'
  1381. },
  1382. {
  1383. value: 35,
  1384. name: 'rose6'
  1385. }
  1386. ]
  1387. }
  1388. ]
  1389. });
  1390. var myChart = echarts.init(document.getElementById('echart_donut'), theme);
  1391. myChart.setOption({
  1392. tooltip: {
  1393. trigger: 'item',
  1394. formatter: "{a} <br/>{b} : {c} ({d}%)"
  1395. },
  1396. calculable: true,
  1397. legend: {
  1398. //orient: 'vertical',
  1399. //x: 'left',
  1400. x: 'center',
  1401. y: 'bottom',
  1402. data: ['Direct Accesss', 'E-mail Marketing', 'Union Ad', 'Video Ads', 'Search Engine']
  1403. },
  1404. toolbox: {
  1405. show: true,
  1406. feature: {
  1407. magicType: {
  1408. show: true,
  1409. type: ['pie', 'funnel'],
  1410. option: {
  1411. funnel: {
  1412. x: '25%',
  1413. width: '50%',
  1414. funnelAlign: 'center',
  1415. max: 1548
  1416. }
  1417. }
  1418. },
  1419. restore: {
  1420. show: true
  1421. },
  1422. saveAsImage: {
  1423. show: true
  1424. }
  1425. }
  1426. },
  1427. series: [
  1428. {
  1429. name: 'Access to the resource',
  1430. type: 'pie',
  1431. radius: ['35%', '55%'],
  1432. itemStyle: {
  1433. normal: {
  1434. label: {
  1435. show: true
  1436. },
  1437. labelLine: {
  1438. show: true
  1439. }
  1440. },
  1441. emphasis: {
  1442. label: {
  1443. show: true,
  1444. position: 'center',
  1445. textStyle: {
  1446. fontSize: '14',
  1447. fontWeight: 'normal'
  1448. }
  1449. }
  1450. }
  1451. },
  1452. data: [
  1453. {
  1454. value: 335,
  1455. name: 'Direct Access'
  1456. },
  1457. {
  1458. value: 310,
  1459. name: 'E-mail Marketing'
  1460. },
  1461. {
  1462. value: 234,
  1463. name: 'Union Ad'
  1464. },
  1465. {
  1466. value: 135,
  1467. name: 'Video Ads'
  1468. },
  1469. {
  1470. value: 1548,
  1471. name: 'Search Engine'
  1472. }
  1473. ]
  1474. }
  1475. ]
  1476. });
  1477. var myChart = echarts.init(document.getElementById('echart_pie'), theme);
  1478. myChart.setOption({
  1479. tooltip: {
  1480. trigger: 'item',
  1481. formatter: "{a} <br/>{b} : {c} ({d}%)"
  1482. },
  1483. legend: {
  1484. //orient: 'vertical',
  1485. //x: 'left',
  1486. x: 'center',
  1487. y: 'bottom',
  1488. data: ['Direct Access', 'E-mail Marketing', 'Union Ad', 'Video Ads', 'Search Engine']
  1489. },
  1490. toolbox: {
  1491. show: true,
  1492. feature: {
  1493. magicType: {
  1494. show: true,
  1495. type: ['pie', 'funnel'],
  1496. option: {
  1497. funnel: {
  1498. x: '25%',
  1499. width: '50%',
  1500. funnelAlign: 'left',
  1501. max: 1548
  1502. }
  1503. }
  1504. },
  1505. restore: {
  1506. show: true
  1507. },
  1508. saveAsImage: {
  1509. show: true
  1510. }
  1511. }
  1512. },
  1513. calculable: true,
  1514. series: [
  1515. {
  1516. name: '访问来源',
  1517. type: 'pie',
  1518. radius: '55%',
  1519. center: ['50%', '48%'], //left,top
  1520. data: [
  1521. {
  1522. value: 335,
  1523. name: 'Direct Access'
  1524. },
  1525. {
  1526. value: 310,
  1527. name: 'E-mail Marketing'
  1528. },
  1529. {
  1530. value: 234,
  1531. name: 'Union Ad'
  1532. },
  1533. {
  1534. value: 135,
  1535. name: 'Video Ads'
  1536. },
  1537. {
  1538. value: 1548,
  1539. name: 'Search Engine'
  1540. }
  1541. ]
  1542. }
  1543. ]
  1544. });
  1545. var dataStyle = {
  1546. normal: {
  1547. label: {
  1548. show: false
  1549. },
  1550. labelLine: {
  1551. show: false
  1552. }
  1553. }
  1554. };
  1555. var placeHolderStyle = {
  1556. normal: {
  1557. color: 'rgba(0,0,0,0)',
  1558. label: {
  1559. show: false
  1560. },
  1561. labelLine: {
  1562. show: false
  1563. }
  1564. },
  1565. emphasis: {
  1566. color: 'rgba(0,0,0,0)'
  1567. }
  1568. };
  1569. var myChartx = echarts.init(document.getElementById('echart_mini_pie'), theme);
  1570. myChartx.setOption({
  1571. title: {
  1572. text: 'Chart #2',
  1573. subtext: 'From ExcelHome',
  1574. sublink: 'http://e.weibo.com/1341556070/AhQXtjbqh',
  1575. x: 'center',
  1576. y: 'center',
  1577. itemGap: 20,
  1578. textStyle: {
  1579. color: 'rgba(30,144,255,0.8)',
  1580. fontFamily: '微软雅黑',
  1581. fontSize: 35,
  1582. fontWeight: 'bolder'
  1583. }
  1584. },
  1585. tooltip: {
  1586. show: true,
  1587. formatter: "{a} <br/>{b} : {c} ({d}%)"
  1588. },
  1589. legend: {
  1590. orient: 'vertical',
  1591. x: 170, //document.getElementById('main').offsetWidth / 2,
  1592. y: 45,
  1593. itemGap: 12,
  1594. data: ['68%Something #1', '29%Something #2', '3%Something #3']
  1595. },
  1596. toolbox: {
  1597. show: true,
  1598. feature: {
  1599. mark: {
  1600. show: true
  1601. },
  1602. dataView: {
  1603. show: true,
  1604. readOnly: false
  1605. },
  1606. restore: {
  1607. show: true
  1608. },
  1609. saveAsImage: {
  1610. show: true
  1611. }
  1612. }
  1613. },
  1614. series: [
  1615. {
  1616. name: '1',
  1617. type: 'pie',
  1618. clockWise: false,
  1619. radius: [105, 130],
  1620. itemStyle: dataStyle,
  1621. data: [
  1622. {
  1623. value: 68,
  1624. name: '68%Something #1'
  1625. },
  1626. {
  1627. value: 32,
  1628. name: 'invisible',
  1629. itemStyle: placeHolderStyle
  1630. }
  1631. ]
  1632. },
  1633. {
  1634. name: '2',
  1635. type: 'pie',
  1636. clockWise: false,
  1637. radius: [80, 105],
  1638. itemStyle: dataStyle,
  1639. data: [
  1640. {
  1641. value: 29,
  1642. name: '29%Something #2'
  1643. },
  1644. {
  1645. value: 71,
  1646. name: 'invisible',
  1647. itemStyle: placeHolderStyle
  1648. }
  1649. ]
  1650. },
  1651. {
  1652. name: '3',
  1653. type: 'pie',
  1654. clockWise: false,
  1655. radius: [25, 80],
  1656. itemStyle: dataStyle,
  1657. data: [
  1658. {
  1659. value: 3,
  1660. name: '3%Something #3'
  1661. },
  1662. {
  1663. value: 97,
  1664. name: 'invisible',
  1665. itemStyle: placeHolderStyle
  1666. }
  1667. ]
  1668. }
  1669. ]
  1670. });
  1671. var myChart = echarts.init(document.getElementById('echart_world_map'), theme);
  1672. myChart.setOption({
  1673. title: {
  1674. text: 'World Population (2010)',
  1675. subtext: 'from United Nations, Total population, both sexes combined, as of 1 July (thousands)',
  1676. //sublink: 'http://esa.un.org/wpp/Excel-Data/population.htm',
  1677. x: 'center',
  1678. y: 'top'
  1679. },
  1680. tooltip: {
  1681. trigger: 'item',
  1682. formatter: function (params) {
  1683. var value = (params.value + '').split('.');
  1684. value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,') + '.' + value[1];
  1685. return params.seriesName + '<br/>' + params.name + ' : ' + value;
  1686. }
  1687. },
  1688. toolbox: {
  1689. show: true,
  1690. orient: 'vertical',
  1691. x: 'right',
  1692. y: 'center',
  1693. feature: {
  1694. mark: {
  1695. show: true
  1696. },
  1697. dataView: {
  1698. show: true,
  1699. readOnly: false
  1700. },
  1701. restore: {
  1702. show: true
  1703. },
  1704. saveAsImage: {
  1705. show: true
  1706. }
  1707. }
  1708. },
  1709. dataRange: {
  1710. min: 0,
  1711. max: 1000000,
  1712. text: ['High', 'Low'],
  1713. realtime: false,
  1714. calculable: true,
  1715. color: ['#087E65', '#26B99A', '#CBEAE3']
  1716. },
  1717. series: [
  1718. {
  1719. name: 'World Population (2010)',
  1720. type: 'map',
  1721. mapType: 'world',
  1722. roam: false,
  1723. mapLocation: {
  1724. y: 60
  1725. },
  1726. itemStyle: {
  1727. emphasis: {
  1728. label: {
  1729. show: true
  1730. }
  1731. }
  1732. },
  1733. data: [
  1734. {
  1735. name: 'Afghanistan',
  1736. value: 28397.812
  1737. },
  1738. {
  1739. name: 'Angola',
  1740. value: 19549.124
  1741. },
  1742. {
  1743. name: 'Albania',
  1744. value: 3150.143
  1745. },
  1746. {
  1747. name: 'United Arab Emirates',
  1748. value: 8441.537
  1749. },
  1750. {
  1751. name: 'Argentina',
  1752. value: 40374.224
  1753. },
  1754. {
  1755. name: 'Armenia',
  1756. value: 2963.496
  1757. },
  1758. {
  1759. name: 'French Southern and Antarctic Lands',
  1760. value: 268.065
  1761. },
  1762. {
  1763. name: 'Australia',
  1764. value: 22404.488
  1765. },
  1766. {
  1767. name: 'Austria',
  1768. value: 8401.924
  1769. },
  1770. {
  1771. name: 'Azerbaijan',
  1772. value: 9094.718
  1773. },
  1774. {
  1775. name: 'Burundi',
  1776. value: 9232.753
  1777. },
  1778. {
  1779. name: 'Belgium',
  1780. value: 10941.288
  1781. },
  1782. {
  1783. name: 'Benin',
  1784. value: 9509.798
  1785. },
  1786. {
  1787. name: 'Burkina Faso',
  1788. value: 15540.284
  1789. },
  1790. {
  1791. name: 'Bangladesh',
  1792. value: 151125.475
  1793. },
  1794. {
  1795. name: 'Bulgaria',
  1796. value: 7389.175
  1797. },
  1798. {
  1799. name: 'The Bahamas',
  1800. value: 66402.316
  1801. },
  1802. {
  1803. name: 'Bosnia and Herzegovina',
  1804. value: 3845.929
  1805. },
  1806. {
  1807. name: 'Belarus',
  1808. value: 9491.07
  1809. },
  1810. {
  1811. name: 'Belize',
  1812. value: 308.595
  1813. },
  1814. {
  1815. name: 'Bermuda',
  1816. value: 64.951
  1817. },
  1818. {
  1819. name: 'Bolivia',
  1820. value: 716.939
  1821. },
  1822. {
  1823. name: 'Brazil',
  1824. value: 195210.154
  1825. },
  1826. {
  1827. name: 'Brunei',
  1828. value: 27.223
  1829. },
  1830. {
  1831. name: 'Bhutan',
  1832. value: 716.939
  1833. },
  1834. {
  1835. name: 'Botswana',
  1836. value: 1969.341
  1837. },
  1838. {
  1839. name: 'Central African Republic',
  1840. value: 4349.921
  1841. },
  1842. {
  1843. name: 'Canada',
  1844. value: 34126.24
  1845. },
  1846. {
  1847. name: 'Switzerland',
  1848. value: 7830.534
  1849. },
  1850. {
  1851. name: 'Chile',
  1852. value: 17150.76
  1853. },
  1854. {
  1855. name: 'China',
  1856. value: 1359821.465
  1857. },
  1858. {
  1859. name: 'Ivory Coast',
  1860. value: 60508.978
  1861. },
  1862. {
  1863. name: 'Cameroon',
  1864. value: 20624.343
  1865. },
  1866. {
  1867. name: 'Democratic Republic of the Congo',
  1868. value: 62191.161
  1869. },
  1870. {
  1871. name: 'Republic of the Congo',
  1872. value: 3573.024
  1873. },
  1874. {
  1875. name: 'Colombia',
  1876. value: 46444.798
  1877. },
  1878. {
  1879. name: 'Costa Rica',
  1880. value: 4669.685
  1881. },
  1882. {
  1883. name: 'Cuba',
  1884. value: 11281.768
  1885. },
  1886. {
  1887. name: 'Northern Cyprus',
  1888. value: 1.468
  1889. },
  1890. {
  1891. name: 'Cyprus',
  1892. value: 1103.685
  1893. },
  1894. {
  1895. name: 'Czech Republic',
  1896. value: 10553.701
  1897. },
  1898. {
  1899. name: 'Germany',
  1900. value: 83017.404
  1901. },
  1902. {
  1903. name: 'Djibouti',
  1904. value: 834.036
  1905. },
  1906. {
  1907. name: 'Denmark',
  1908. value: 5550.959
  1909. },
  1910. {
  1911. name: 'Dominican Republic',
  1912. value: 10016.797
  1913. },
  1914. {
  1915. name: 'Algeria',
  1916. value: 37062.82
  1917. },
  1918. {
  1919. name: 'Ecuador',
  1920. value: 15001.072
  1921. },
  1922. {
  1923. name: 'Egypt',
  1924. value: 78075.705
  1925. },
  1926. {
  1927. name: 'Eritrea',
  1928. value: 5741.159
  1929. },
  1930. {
  1931. name: 'Spain',
  1932. value: 46182.038
  1933. },
  1934. {
  1935. name: 'Estonia',
  1936. value: 1298.533
  1937. },
  1938. {
  1939. name: 'Ethiopia',
  1940. value: 87095.281
  1941. },
  1942. {
  1943. name: 'Finland',
  1944. value: 5367.693
  1945. },
  1946. {
  1947. name: 'Fiji',
  1948. value: 860.559
  1949. },
  1950. {
  1951. name: 'Falkland Islands',
  1952. value: 49.581
  1953. },
  1954. {
  1955. name: 'France',
  1956. value: 63230.866
  1957. },
  1958. {
  1959. name: 'Gabon',
  1960. value: 1556.222
  1961. },
  1962. {
  1963. name: 'United Kingdom',
  1964. value: 62066.35
  1965. },
  1966. {
  1967. name: 'Georgia',
  1968. value: 4388.674
  1969. },
  1970. {
  1971. name: 'Ghana',
  1972. value: 24262.901
  1973. },
  1974. {
  1975. name: 'Guinea',
  1976. value: 10876.033
  1977. },
  1978. {
  1979. name: 'Gambia',
  1980. value: 1680.64
  1981. },
  1982. {
  1983. name: 'Guinea Bissau',
  1984. value: 10876.033
  1985. },
  1986. {
  1987. name: 'Equatorial Guinea',
  1988. value: 696.167
  1989. },
  1990. {
  1991. name: 'Greece',
  1992. value: 11109.999
  1993. },
  1994. {
  1995. name: 'Greenland',
  1996. value: 56.546
  1997. },
  1998. {
  1999. name: 'Guatemala',
  2000. value: 14341.576
  2001. },
  2002. {
  2003. name: 'French Guiana',
  2004. value: 231.169
  2005. },
  2006. {
  2007. name: 'Guyana',
  2008. value: 786.126
  2009. },
  2010. {
  2011. name: 'Honduras',
  2012. value: 7621.204
  2013. },
  2014. {
  2015. name: 'Croatia',
  2016. value: 4338.027
  2017. },
  2018. {
  2019. name: 'Haiti',
  2020. value: 9896.4
  2021. },
  2022. {
  2023. name: 'Hungary',
  2024. value: 10014.633
  2025. },
  2026. {
  2027. name: 'Indonesia',
  2028. value: 240676.485
  2029. },
  2030. {
  2031. name: 'India',
  2032. value: 1205624.648
  2033. },
  2034. {
  2035. name: 'Ireland',
  2036. value: 4467.561
  2037. },
  2038. {
  2039. name: 'Iran',
  2040. value: 240676.485
  2041. },
  2042. {
  2043. name: 'Iraq',
  2044. value: 30962.38
  2045. },
  2046. {
  2047. name: 'Iceland',
  2048. value: 318.042
  2049. },
  2050. {
  2051. name: 'Israel',
  2052. value: 7420.368
  2053. },
  2054. {
  2055. name: 'Italy',
  2056. value: 60508.978
  2057. },
  2058. {
  2059. name: 'Jamaica',
  2060. value: 2741.485
  2061. },
  2062. {
  2063. name: 'Jordan',
  2064. value: 6454.554
  2065. },
  2066. {
  2067. name: 'Japan',
  2068. value: 127352.833
  2069. },
  2070. {
  2071. name: 'Kazakhstan',
  2072. value: 15921.127
  2073. },
  2074. {
  2075. name: 'Kenya',
  2076. value: 40909.194
  2077. },
  2078. {
  2079. name: 'Kyrgyzstan',
  2080. value: 5334.223
  2081. },
  2082. {
  2083. name: 'Cambodia',
  2084. value: 14364.931
  2085. },
  2086. {
  2087. name: 'South Korea',
  2088. value: 51452.352
  2089. },
  2090. {
  2091. name: 'Kosovo',
  2092. value: 97.743
  2093. },
  2094. {
  2095. name: 'Kuwait',
  2096. value: 2991.58
  2097. },
  2098. {
  2099. name: 'Laos',
  2100. value: 6395.713
  2101. },
  2102. {
  2103. name: 'Lebanon',
  2104. value: 4341.092
  2105. },
  2106. {
  2107. name: 'Liberia',
  2108. value: 3957.99
  2109. },
  2110. {
  2111. name: 'Libya',
  2112. value: 6040.612
  2113. },
  2114. {
  2115. name: 'Sri Lanka',
  2116. value: 20758.779
  2117. },
  2118. {
  2119. name: 'Lesotho',
  2120. value: 2008.921
  2121. },
  2122. {
  2123. name: 'Lithuania',
  2124. value: 3068.457
  2125. },
  2126. {
  2127. name: 'Luxembourg',
  2128. value: 507.885
  2129. },
  2130. {
  2131. name: 'Latvia',
  2132. value: 2090.519
  2133. },
  2134. {
  2135. name: 'Morocco',
  2136. value: 31642.36
  2137. },
  2138. {
  2139. name: 'Moldova',
  2140. value: 103.619
  2141. },
  2142. {
  2143. name: 'Madagascar',
  2144. value: 21079.532
  2145. },
  2146. {
  2147. name: 'Mexico',
  2148. value: 117886.404
  2149. },
  2150. {
  2151. name: 'Macedonia',
  2152. value: 507.885
  2153. },
  2154. {
  2155. name: 'Mali',
  2156. value: 13985.961
  2157. },
  2158. {
  2159. name: 'Myanmar',
  2160. value: 51931.231
  2161. },
  2162. {
  2163. name: 'Montenegro',
  2164. value: 620.078
  2165. },
  2166. {
  2167. name: 'Mongolia',
  2168. value: 2712.738
  2169. },
  2170. {
  2171. name: 'Mozambique',
  2172. value: 23967.265
  2173. },
  2174. {
  2175. name: 'Mauritania',
  2176. value: 3609.42
  2177. },
  2178. {
  2179. name: 'Malawi',
  2180. value: 15013.694
  2181. },
  2182. {
  2183. name: 'Malaysia',
  2184. value: 28275.835
  2185. },
  2186. {
  2187. name: 'Namibia',
  2188. value: 2178.967
  2189. },
  2190. {
  2191. name: 'New Caledonia',
  2192. value: 246.379
  2193. },
  2194. {
  2195. name: 'Niger',
  2196. value: 15893.746
  2197. },
  2198. {
  2199. name: 'Nigeria',
  2200. value: 159707.78
  2201. },
  2202. {
  2203. name: 'Nicaragua',
  2204. value: 5822.209
  2205. },
  2206. {
  2207. name: 'Netherlands',
  2208. value: 16615.243
  2209. },
  2210. {
  2211. name: 'Norway',
  2212. value: 4891.251
  2213. },
  2214. {
  2215. name: 'Nepal',
  2216. value: 26846.016
  2217. },
  2218. {
  2219. name: 'New Zealand',
  2220. value: 4368.136
  2221. },
  2222. {
  2223. name: 'Oman',
  2224. value: 2802.768
  2225. },
  2226. {
  2227. name: 'Pakistan',
  2228. value: 173149.306
  2229. },
  2230. {
  2231. name: 'Panama',
  2232. value: 3678.128
  2233. },
  2234. {
  2235. name: 'Peru',
  2236. value: 29262.83
  2237. },
  2238. {
  2239. name: 'Philippines',
  2240. value: 93444.322
  2241. },
  2242. {
  2243. name: 'Papua New Guinea',
  2244. value: 6858.945
  2245. },
  2246. {
  2247. name: 'Poland',
  2248. value: 38198.754
  2249. },
  2250. {
  2251. name: 'Puerto Rico',
  2252. value: 3709.671
  2253. },
  2254. {
  2255. name: 'North Korea',
  2256. value: 1.468
  2257. },
  2258. {
  2259. name: 'Portugal',
  2260. value: 10589.792
  2261. },
  2262. {
  2263. name: 'Paraguay',
  2264. value: 6459.721
  2265. },
  2266. {
  2267. name: 'Qatar',
  2268. value: 1749.713
  2269. },
  2270. {
  2271. name: 'Romania',
  2272. value: 21861.476
  2273. },
  2274. {
  2275. name: 'Russia',
  2276. value: 21861.476
  2277. },
  2278. {
  2279. name: 'Rwanda',
  2280. value: 10836.732
  2281. },
  2282. {
  2283. name: 'Western Sahara',
  2284. value: 514.648
  2285. },
  2286. {
  2287. name: 'Saudi Arabia',
  2288. value: 27258.387
  2289. },
  2290. {
  2291. name: 'Sudan',
  2292. value: 35652.002
  2293. },
  2294. {
  2295. name: 'South Sudan',
  2296. value: 9940.929
  2297. },
  2298. {
  2299. name: 'Senegal',
  2300. value: 12950.564
  2301. },
  2302. {
  2303. name: 'Solomon Islands',
  2304. value: 526.447
  2305. },
  2306. {
  2307. name: 'Sierra Leone',
  2308. value: 5751.976
  2309. },
  2310. {
  2311. name: 'El Salvador',
  2312. value: 6218.195
  2313. },
  2314. {
  2315. name: 'Somaliland',
  2316. value: 9636.173
  2317. },
  2318. {
  2319. name: 'Somalia',
  2320. value: 9636.173
  2321. },
  2322. {
  2323. name: 'Republic of Serbia',
  2324. value: 3573.024
  2325. },
  2326. {
  2327. name: 'Suriname',
  2328. value: 524.96
  2329. },
  2330. {
  2331. name: 'Slovakia',
  2332. value: 5433.437
  2333. },
  2334. {
  2335. name: 'Slovenia',
  2336. value: 2054.232
  2337. },
  2338. {
  2339. name: 'Sweden',
  2340. value: 9382.297
  2341. },
  2342. {
  2343. name: 'Swaziland',
  2344. value: 1193.148
  2345. },
  2346. {
  2347. name: 'Syria',
  2348. value: 7830.534
  2349. },
  2350. {
  2351. name: 'Chad',
  2352. value: 11720.781
  2353. },
  2354. {
  2355. name: 'Togo',
  2356. value: 6306.014
  2357. },
  2358. {
  2359. name: 'Thailand',
  2360. value: 66402.316
  2361. },
  2362. {
  2363. name: 'Tajikistan',
  2364. value: 7627.326
  2365. },
  2366. {
  2367. name: 'Turkmenistan',
  2368. value: 5041.995
  2369. },
  2370. {
  2371. name: 'East Timor',
  2372. value: 10016.797
  2373. },
  2374. {
  2375. name: 'Trinidad and Tobago',
  2376. value: 1328.095
  2377. },
  2378. {
  2379. name: 'Tunisia',
  2380. value: 10631.83
  2381. },
  2382. {
  2383. name: 'Turkey',
  2384. value: 72137.546
  2385. },
  2386. {
  2387. name: 'United Republic of Tanzania',
  2388. value: 44973.33
  2389. },
  2390. {
  2391. name: 'Uganda',
  2392. value: 33987.213
  2393. },
  2394. {
  2395. name: 'Ukraine',
  2396. value: 46050.22
  2397. },
  2398. {
  2399. name: 'Uruguay',
  2400. value: 3371.982
  2401. },
  2402. {
  2403. name: 'United States of America',
  2404. value: 312247.116
  2405. },
  2406. {
  2407. name: 'Uzbekistan',
  2408. value: 27769.27
  2409. },
  2410. {
  2411. name: 'Venezuela',
  2412. value: 236.299
  2413. },
  2414. {
  2415. name: 'Vietnam',
  2416. value: 89047.397
  2417. },
  2418. {
  2419. name: 'Vanuatu',
  2420. value: 236.299
  2421. },
  2422. {
  2423. name: 'West Bank',
  2424. value: 13.565
  2425. },
  2426. {
  2427. name: 'Yemen',
  2428. value: 22763.008
  2429. },
  2430. {
  2431. name: 'South Africa',
  2432. value: 51452.352
  2433. },
  2434. {
  2435. name: 'Zambia',
  2436. value: 13216.985
  2437. },
  2438. {
  2439. name: 'Zimbabwe',
  2440. value: 13076.978
  2441. }
  2442. ]
  2443. }
  2444. ]
  2445. });
  2446. </script>
  2447. </body>
  2448. </html>