echarts.html 72 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670
  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>John Doe</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. type: 'category',
  668. data: ['1?', '2?', '3?', '4?', '5?', '6?', '7?', '8?', '9?', '10?', '11?', '12?']
  669. }],
  670. yAxis: [{
  671. type: 'value'
  672. }],
  673. series: [{
  674. name: 'sales',
  675. type: 'bar',
  676. 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],
  677. markPoint: {
  678. data: [{
  679. type: 'max',
  680. name: '???'
  681. }, {
  682. type: 'min',
  683. name: '???'
  684. }]
  685. },
  686. markLine: {
  687. data: [{
  688. type: 'average',
  689. name: '???'
  690. }]
  691. }
  692. }, {
  693. name: 'purchases',
  694. type: 'bar',
  695. 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],
  696. markPoint: {
  697. data: [{
  698. name: 'sales',
  699. value: 182.2,
  700. xAxis: 7,
  701. yAxis: 183,
  702. symbolSize: 18
  703. }, {
  704. name: 'purchases',
  705. value: 2.3,
  706. xAxis: 11,
  707. yAxis: 3
  708. }]
  709. },
  710. markLine: {
  711. data: [{
  712. type: 'average',
  713. name: '???'
  714. }]
  715. }
  716. }]
  717. });
  718. var myChart = echarts.init(document.getElementById('echart_sonar'), theme);
  719. myChart.setOption({
  720. title: {
  721. text: 'Budget vs spending',
  722. subtext: 'subtext'
  723. },
  724. tooltip: {
  725. trigger: 'axis'
  726. },
  727. legend: {
  728. orient: 'vertical',
  729. x: 'right',
  730. y: 'bottom',
  731. data: ['(Allocated Budget)', 'Actual Spending)']
  732. },
  733. toolbox: {
  734. show: true,
  735. feature: {
  736. restore: {
  737. show: true
  738. },
  739. saveAsImage: {
  740. show: true
  741. }
  742. }
  743. },
  744. polar: [{
  745. indicator: [{
  746. text: 'sales',
  747. max: 6000
  748. }, {
  749. text: 'Administration',
  750. max: 16000
  751. }, {
  752. text: 'Information Techology',
  753. max: 30000
  754. }, {
  755. text: 'Customer Support',
  756. max: 38000
  757. }, {
  758. text: 'Development',
  759. max: 52000
  760. }, {
  761. text: 'Marketing',
  762. max: 25000
  763. }]
  764. }],
  765. calculable: true,
  766. series: [{
  767. name: 'Budget vs spending',
  768. type: 'radar',
  769. data: [{
  770. value: [4300, 10000, 28000, 35000, 50000, 19000],
  771. name: 'Allocated Budget'
  772. }, {
  773. value: [5000, 14000, 28000, 31000, 42000, 21000],
  774. name: 'Actual Spending'
  775. }]
  776. }]
  777. });
  778. var myChart = echarts.init(document.getElementById('echart_pyramid'), theme);
  779. myChart.setOption({
  780. title: {
  781. text: 'Echart Pyramid Graph',
  782. subtext: 'Subtitle'
  783. },
  784. tooltip: {
  785. trigger: 'item',
  786. formatter: "{a} <br/>{b} : {c}%"
  787. },
  788. toolbox: {
  789. show: true,
  790. feature: {
  791. restore: {
  792. show: true
  793. },
  794. saveAsImage: {
  795. show: true
  796. }
  797. }
  798. },
  799. legend: {
  800. data: ['Something #1', 'Something #2', 'Something #3', 'Something #4', 'Something #5'],
  801. orient: 'vertical',
  802. x: 'left',
  803. y: 'bottom'
  804. },
  805. calculable: true,
  806. series: [{
  807. name: '漏斗图',
  808. type: 'funnel',
  809. width: '40%',
  810. data: [{
  811. value: 60,
  812. name: 'Something #1'
  813. }, {
  814. value: 40,
  815. name: 'Something #2'
  816. }, {
  817. value: 20,
  818. name: 'Something #3'
  819. }, {
  820. value: 80,
  821. name: 'Something #4'
  822. }, {
  823. value: 100,
  824. name: 'Something #5'
  825. }]
  826. }]
  827. });
  828. var myChart = echarts.init(document.getElementById('echart_guage'), theme);
  829. myChart.setOption({
  830. tooltip: {
  831. formatter: "{a} <br/>{b} : {c}%"
  832. },
  833. toolbox: {
  834. show: true,
  835. feature: {
  836. restore: {
  837. show: true
  838. },
  839. saveAsImage: {
  840. show: true
  841. }
  842. }
  843. },
  844. series: [{
  845. name: 'Performance',
  846. type: 'gauge',
  847. center: ['50%', '50%'],
  848. radius: [0, '75%'],
  849. startAngle: 140,
  850. endAngle: -140,
  851. min: 0,
  852. max: 100,
  853. precision: 0,
  854. splitNumber: 10,
  855. axisLine: {
  856. show: true,
  857. lineStyle: {
  858. color: [
  859. [0.2, 'lightgreen'],
  860. [0.4, 'orange'],
  861. [0.8, 'skyblue'],
  862. [1, '#ff4500']
  863. ],
  864. width: 30
  865. }
  866. },
  867. axisTick: {
  868. show: true,
  869. splitNumber: 5,
  870. length: 8,
  871. lineStyle: {
  872. color: '#eee',
  873. width: 1,
  874. type: 'solid'
  875. }
  876. },
  877. axisLabel: {
  878. show: true,
  879. formatter: function(v) {
  880. switch (v + '') {
  881. case '10':
  882. return 'a';
  883. case '30':
  884. return 'b';
  885. case '60':
  886. return 'c';
  887. case '90':
  888. return 'd';
  889. default:
  890. return '';
  891. }
  892. },
  893. textStyle: {
  894. color: '#333'
  895. }
  896. },
  897. splitLine: {
  898. show: true,
  899. length: 30,
  900. lineStyle: {
  901. color: '#eee',
  902. width: 2,
  903. type: 'solid'
  904. }
  905. },
  906. pointer: {
  907. length: '80%',
  908. width: 8,
  909. color: 'auto'
  910. },
  911. title: {
  912. show: true,
  913. offsetCenter: ['-65%', -10],
  914. textStyle: {
  915. color: '#333',
  916. fontSize: 15
  917. }
  918. },
  919. detail: {
  920. show: true,
  921. backgroundColor: 'rgba(0,0,0,0)',
  922. borderWidth: 0,
  923. borderColor: '#ccc',
  924. width: 100,
  925. height: 40,
  926. offsetCenter: ['-60%', 10],
  927. formatter: '{value}%',
  928. textStyle: {
  929. color: 'auto',
  930. fontSize: 30
  931. }
  932. },
  933. data: [{
  934. value: 50,
  935. name: 'Performance'
  936. }]
  937. }]
  938. });
  939. var myChart = echarts.init(document.getElementById('echart_line'), theme);
  940. myChart.setOption({
  941. title: {
  942. text: 'Line Graph',
  943. subtext: 'Subtitle'
  944. },
  945. tooltip: {
  946. trigger: 'axis'
  947. },
  948. legend: {
  949. data: ['Intent', 'Pre-order', 'Deal']
  950. },
  951. toolbox: {
  952. show: true,
  953. feature: {
  954. magicType: {
  955. show: true,
  956. type: ['line', 'bar', 'stack', 'tiled']
  957. },
  958. restore: {
  959. show: true
  960. },
  961. saveAsImage: {
  962. show: true
  963. }
  964. }
  965. },
  966. calculable: true,
  967. xAxis: [{
  968. type: 'category',
  969. boundaryGap: false,
  970. data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  971. }],
  972. yAxis: [{
  973. type: 'value'
  974. }],
  975. series: [{
  976. name: 'Deal',
  977. type: 'line',
  978. smooth: true,
  979. itemStyle: {
  980. normal: {
  981. areaStyle: {
  982. type: 'default'
  983. }
  984. }
  985. },
  986. data: [10, 12, 21, 54, 260, 830, 710]
  987. }, {
  988. name: 'Pre-order',
  989. type: 'line',
  990. smooth: true,
  991. itemStyle: {
  992. normal: {
  993. areaStyle: {
  994. type: 'default'
  995. }
  996. }
  997. },
  998. data: [30, 182, 434, 791, 390, 30, 10]
  999. }, {
  1000. name: 'Intent',
  1001. type: 'line',
  1002. smooth: true,
  1003. itemStyle: {
  1004. normal: {
  1005. areaStyle: {
  1006. type: 'default'
  1007. }
  1008. }
  1009. },
  1010. data: [1320, 1132, 601, 234, 120, 90, 20]
  1011. }]
  1012. });
  1013. var myChart = echarts.init(document.getElementById('echart_scatter'), theme);
  1014. myChart.setOption({
  1015. title: {
  1016. text: 'Scatter Graph',
  1017. subtext: 'Heinz 2003'
  1018. },
  1019. tooltip: {
  1020. trigger: 'axis',
  1021. showDelay: 0,
  1022. axisPointer: {
  1023. type: 'cross',
  1024. lineStyle: {
  1025. type: 'dashed',
  1026. width: 1
  1027. }
  1028. }
  1029. },
  1030. legend: {
  1031. data: ['Data2', 'Data1']
  1032. },
  1033. toolbox: {
  1034. show: true,
  1035. feature: {
  1036. saveAsImage: {
  1037. show: true
  1038. }
  1039. }
  1040. },
  1041. xAxis: [{
  1042. type: 'value',
  1043. scale: true,
  1044. axisLabel: {
  1045. formatter: '{value} cm'
  1046. }
  1047. }],
  1048. yAxis: [{
  1049. type: 'value',
  1050. scale: true,
  1051. axisLabel: {
  1052. formatter: '{value} kg'
  1053. }
  1054. }],
  1055. series: [{
  1056. name: 'Data1',
  1057. type: 'scatter',
  1058. tooltip: {
  1059. trigger: 'item',
  1060. formatter: function(params) {
  1061. if (params.value.length > 1) {
  1062. return params.seriesName + ' :<br/>' + params.value[0] + 'cm ' + params.value[1] + 'kg ';
  1063. } else {
  1064. return params.seriesName + ' :<br/>' + params.name + ' : ' + params.value + 'kg ';
  1065. }
  1066. }
  1067. },
  1068. data: [
  1069. [161.2, 51.6],
  1070. [167.5, 59.0],
  1071. [159.5, 49.2],
  1072. [157.0, 63.0],
  1073. [155.8, 53.6],
  1074. [170.0, 59.0],
  1075. [159.1, 47.6],
  1076. [166.0, 69.8],
  1077. [176.2, 66.8],
  1078. [160.2, 75.2],
  1079. [172.5, 55.2],
  1080. [170.9, 54.2],
  1081. [172.9, 62.5],
  1082. [153.4, 42.0],
  1083. [160.0, 50.0],
  1084. [147.2, 49.8],
  1085. [168.2, 49.2],
  1086. [175.0, 73.2],
  1087. [157.0, 47.8],
  1088. [167.6, 68.8],
  1089. [159.5, 50.6],
  1090. [175.0, 82.5],
  1091. [166.8, 57.2],
  1092. [176.5, 87.8],
  1093. [170.2, 72.8],
  1094. [174.0, 54.5],
  1095. [173.0, 59.8],
  1096. [179.9, 67.3],
  1097. [170.5, 67.8],
  1098. [160.0, 47.0],
  1099. [154.4, 46.2],
  1100. [162.0, 55.0],
  1101. [176.5, 83.0],
  1102. [160.0, 54.4],
  1103. [152.0, 45.8],
  1104. [162.1, 53.6],
  1105. [170.0, 73.2],
  1106. [160.2, 52.1],
  1107. [161.3, 67.9],
  1108. [166.4, 56.6],
  1109. [168.9, 62.3],
  1110. [163.8, 58.5],
  1111. [167.6, 54.5],
  1112. [160.0, 50.2],
  1113. [161.3, 60.3],
  1114. [167.6, 58.3],
  1115. [165.1, 56.2],
  1116. [160.0, 50.2],
  1117. [170.0, 72.9],
  1118. [157.5, 59.8],
  1119. [167.6, 61.0],
  1120. [160.7, 69.1],
  1121. [163.2, 55.9],
  1122. [152.4, 46.5],
  1123. [157.5, 54.3],
  1124. [168.3, 54.8],
  1125. [180.3, 60.7],
  1126. [165.5, 60.0],
  1127. [165.0, 62.0],
  1128. [164.5, 60.3],
  1129. [156.0, 52.7],
  1130. [160.0, 74.3],
  1131. [163.0, 62.0],
  1132. [165.7, 73.1],
  1133. [161.0, 80.0],
  1134. [162.0, 54.7],
  1135. [166.0, 53.2],
  1136. [174.0, 75.7],
  1137. [172.7, 61.1],
  1138. [167.6, 55.7],
  1139. [151.1, 48.7],
  1140. [164.5, 52.3],
  1141. [163.5, 50.0],
  1142. [152.0, 59.3],
  1143. [169.0, 62.5],
  1144. [164.0, 55.7],
  1145. [161.2, 54.8],
  1146. [155.0, 45.9],
  1147. [170.0, 70.6],
  1148. [176.2, 67.2],
  1149. [170.0, 69.4],
  1150. [162.5, 58.2],
  1151. [170.3, 64.8],
  1152. [164.1, 71.6],
  1153. [169.5, 52.8],
  1154. [163.2, 59.8],
  1155. [154.5, 49.0],
  1156. [159.8, 50.0],
  1157. [173.2, 69.2],
  1158. [170.0, 55.9],
  1159. [161.4, 63.4],
  1160. [169.0, 58.2],
  1161. [166.2, 58.6],
  1162. [159.4, 45.7],
  1163. [162.5, 52.2],
  1164. [159.0, 48.6],
  1165. [162.8, 57.8],
  1166. [159.0, 55.6],
  1167. [179.8, 66.8],
  1168. [162.9, 59.4],
  1169. [161.0, 53.6],
  1170. [151.1, 73.2],
  1171. [168.2, 53.4],
  1172. [168.9, 69.0],
  1173. [173.2, 58.4],
  1174. [171.8, 56.2],
  1175. [178.0, 70.6],
  1176. [164.3, 59.8],
  1177. [163.0, 72.0],
  1178. [168.5, 65.2],
  1179. [166.8, 56.6],
  1180. [172.7, 105.2],
  1181. [163.5, 51.8],
  1182. [169.4, 63.4],
  1183. [167.8, 59.0],
  1184. [159.5, 47.6],
  1185. [167.6, 63.0],
  1186. [161.2, 55.2],
  1187. [160.0, 45.0],
  1188. [163.2, 54.0],
  1189. [162.2, 50.2],
  1190. [161.3, 60.2],
  1191. [149.5, 44.8],
  1192. [157.5, 58.8],
  1193. [163.2, 56.4],
  1194. [172.7, 62.0],
  1195. [155.0, 49.2],
  1196. [156.5, 67.2],
  1197. [164.0, 53.8],
  1198. [160.9, 54.4],
  1199. [162.8, 58.0],
  1200. [167.0, 59.8],
  1201. [160.0, 54.8],
  1202. [160.0, 43.2],
  1203. [168.9, 60.5],
  1204. [158.2, 46.4],
  1205. [156.0, 64.4],
  1206. [160.0, 48.8],
  1207. [167.1, 62.2],
  1208. [158.0, 55.5],
  1209. [167.6, 57.8],
  1210. [156.0, 54.6],
  1211. [162.1, 59.2],
  1212. [173.4, 52.7],
  1213. [159.8, 53.2],
  1214. [170.5, 64.5],
  1215. [159.2, 51.8],
  1216. [157.5, 56.0],
  1217. [161.3, 63.6],
  1218. [162.6, 63.2],
  1219. [160.0, 59.5],
  1220. [168.9, 56.8],
  1221. [165.1, 64.1],
  1222. [162.6, 50.0],
  1223. [165.1, 72.3],
  1224. [166.4, 55.0],
  1225. [160.0, 55.9],
  1226. [152.4, 60.4],
  1227. [170.2, 69.1],
  1228. [162.6, 84.5],
  1229. [170.2, 55.9],
  1230. [158.8, 55.5],
  1231. [172.7, 69.5],
  1232. [167.6, 76.4],
  1233. [162.6, 61.4],
  1234. [167.6, 65.9],
  1235. [156.2, 58.6],
  1236. [175.2, 66.8],
  1237. [172.1, 56.6],
  1238. [162.6, 58.6],
  1239. [160.0, 55.9],
  1240. [165.1, 59.1],
  1241. [182.9, 81.8],
  1242. [166.4, 70.7],
  1243. [165.1, 56.8],
  1244. [177.8, 60.0],
  1245. [165.1, 58.2],
  1246. [175.3, 72.7],
  1247. [154.9, 54.1],
  1248. [158.8, 49.1],
  1249. [172.7, 75.9],
  1250. [168.9, 55.0],
  1251. [161.3, 57.3],
  1252. [167.6, 55.0],
  1253. [165.1, 65.5],
  1254. [175.3, 65.5],
  1255. [157.5, 48.6],
  1256. [163.8, 58.6],
  1257. [167.6, 63.6],
  1258. [165.1, 55.2],
  1259. [165.1, 62.7],
  1260. [168.9, 56.6],
  1261. [162.6, 53.9],
  1262. [164.5, 63.2],
  1263. [176.5, 73.6],
  1264. [168.9, 62.0],
  1265. [175.3, 63.6],
  1266. [159.4, 53.2],
  1267. [160.0, 53.4],
  1268. [170.2, 55.0],
  1269. [162.6, 70.5],
  1270. [167.6, 54.5],
  1271. [162.6, 54.5],
  1272. [160.7, 55.9],
  1273. [160.0, 59.0],
  1274. [157.5, 63.6],
  1275. [162.6, 54.5],
  1276. [152.4, 47.3],
  1277. [170.2, 67.7],
  1278. [165.1, 80.9],
  1279. [172.7, 70.5],
  1280. [165.1, 60.9],
  1281. [170.2, 63.6],
  1282. [170.2, 54.5],
  1283. [170.2, 59.1],
  1284. [161.3, 70.5],
  1285. [167.6, 52.7],
  1286. [167.6, 62.7],
  1287. [165.1, 86.3],
  1288. [162.6, 66.4],
  1289. [152.4, 67.3],
  1290. [168.9, 63.0],
  1291. [170.2, 73.6],
  1292. [175.2, 62.3],
  1293. [175.2, 57.7],
  1294. [160.0, 55.4],
  1295. [165.1, 104.1],
  1296. [174.0, 55.5],
  1297. [170.2, 77.3],
  1298. [160.0, 80.5],
  1299. [167.6, 64.5],
  1300. [167.6, 72.3],
  1301. [167.6, 61.4],
  1302. [154.9, 58.2],
  1303. [162.6, 81.8],
  1304. [175.3, 63.6],
  1305. [171.4, 53.4],
  1306. [157.5, 54.5],
  1307. [165.1, 53.6],
  1308. [160.0, 60.0],
  1309. [174.0, 73.6],
  1310. [162.6, 61.4],
  1311. [174.0, 55.5],
  1312. [162.6, 63.6],
  1313. [161.3, 60.9],
  1314. [156.2, 60.0],
  1315. [149.9, 46.8],
  1316. [169.5, 57.3],
  1317. [160.0, 64.1],
  1318. [175.3, 63.6],
  1319. [169.5, 67.3],
  1320. [160.0, 75.5],
  1321. [172.7, 68.2],
  1322. [162.6, 61.4],
  1323. [157.5, 76.8],
  1324. [176.5, 71.8],
  1325. [164.4, 55.5],
  1326. [160.7, 48.6],
  1327. [174.0, 66.4],
  1328. [163.8, 67.3]
  1329. ],
  1330. markPoint: {
  1331. data: [{
  1332. type: 'max',
  1333. name: 'Max'
  1334. }, {
  1335. type: 'min',
  1336. name: 'Min'
  1337. }]
  1338. },
  1339. markLine: {
  1340. data: [{
  1341. type: 'average',
  1342. name: 'Mean'
  1343. }]
  1344. }
  1345. }, {
  1346. name: 'Data2',
  1347. type: 'scatter',
  1348. tooltip: {
  1349. trigger: 'item',
  1350. formatter: function(params) {
  1351. if (params.value.length > 1) {
  1352. return params.seriesName + ' :<br/>' + params.value[0] + 'cm ' + params.value[1] + 'kg ';
  1353. } else {
  1354. return params.seriesName + ' :<br/>' + params.name + ' : ' + params.value + 'kg ';
  1355. }
  1356. }
  1357. },
  1358. data: [
  1359. [174.0, 65.6],
  1360. [175.3, 71.8],
  1361. [193.5, 80.7],
  1362. [186.5, 72.6],
  1363. [187.2, 78.8],
  1364. [181.5, 74.8],
  1365. [184.0, 86.4],
  1366. [184.5, 78.4],
  1367. [175.0, 62.0],
  1368. [184.0, 81.6],
  1369. [180.0, 76.6],
  1370. [177.8, 83.6],
  1371. [192.0, 90.0],
  1372. [176.0, 74.6],
  1373. [174.0, 71.0],
  1374. [184.0, 79.6],
  1375. [192.7, 93.8],
  1376. [171.5, 70.0],
  1377. [173.0, 72.4],
  1378. [176.0, 85.9],
  1379. [176.0, 78.8],
  1380. [180.5, 77.8],
  1381. [172.7, 66.2],
  1382. [176.0, 86.4],
  1383. [173.5, 81.8],
  1384. [178.0, 89.6],
  1385. [180.3, 82.8],
  1386. [180.3, 76.4],
  1387. [164.5, 63.2],
  1388. [173.0, 60.9],
  1389. [183.5, 74.8],
  1390. [175.5, 70.0],
  1391. [188.0, 72.4],
  1392. [189.2, 84.1],
  1393. [172.8, 69.1],
  1394. [170.0, 59.5],
  1395. [182.0, 67.2],
  1396. [170.0, 61.3],
  1397. [177.8, 68.6],
  1398. [184.2, 80.1],
  1399. [186.7, 87.8],
  1400. [171.4, 84.7],
  1401. [172.7, 73.4],
  1402. [175.3, 72.1],
  1403. [180.3, 82.6],
  1404. [182.9, 88.7],
  1405. [188.0, 84.1],
  1406. [177.2, 94.1],
  1407. [172.1, 74.9],
  1408. [167.0, 59.1],
  1409. [169.5, 75.6],
  1410. [174.0, 86.2],
  1411. [172.7, 75.3],
  1412. [182.2, 87.1],
  1413. [164.1, 55.2],
  1414. [163.0, 57.0],
  1415. [171.5, 61.4],
  1416. [184.2, 76.8],
  1417. [174.0, 86.8],
  1418. [174.0, 72.2],
  1419. [177.0, 71.6],
  1420. [186.0, 84.8],
  1421. [167.0, 68.2],
  1422. [171.8, 66.1],
  1423. [182.0, 72.0],
  1424. [167.0, 64.6],
  1425. [177.8, 74.8],
  1426. [164.5, 70.0],
  1427. [192.0, 101.6],
  1428. [175.5, 63.2],
  1429. [171.2, 79.1],
  1430. [181.6, 78.9],
  1431. [167.4, 67.7],
  1432. [181.1, 66.0],
  1433. [177.0, 68.2],
  1434. [174.5, 63.9],
  1435. [177.5, 72.0],
  1436. [170.5, 56.8],
  1437. [182.4, 74.5],
  1438. [197.1, 90.9],
  1439. [180.1, 93.0],
  1440. [175.5, 80.9],
  1441. [180.6, 72.7],
  1442. [184.4, 68.0],
  1443. [175.5, 70.9],
  1444. [180.6, 72.5],
  1445. [177.0, 72.5],
  1446. [177.1, 83.4],
  1447. [181.6, 75.5],
  1448. [176.5, 73.0],
  1449. [175.0, 70.2],
  1450. [174.0, 73.4],
  1451. [165.1, 70.5],
  1452. [177.0, 68.9],
  1453. [192.0, 102.3],
  1454. [176.5, 68.4],
  1455. [169.4, 65.9],
  1456. [182.1, 75.7],
  1457. [179.8, 84.5],
  1458. [175.3, 87.7],
  1459. [184.9, 86.4],
  1460. [177.3, 73.2],
  1461. [167.4, 53.9],
  1462. [178.1, 72.0],
  1463. [168.9, 55.5],
  1464. [157.2, 58.4],
  1465. [180.3, 83.2],
  1466. [170.2, 72.7],
  1467. [177.8, 64.1],
  1468. [172.7, 72.3],
  1469. [165.1, 65.0],
  1470. [186.7, 86.4],
  1471. [165.1, 65.0],
  1472. [174.0, 88.6],
  1473. [175.3, 84.1],
  1474. [185.4, 66.8],
  1475. [177.8, 75.5],
  1476. [180.3, 93.2],
  1477. [180.3, 82.7],
  1478. [177.8, 58.0],
  1479. [177.8, 79.5],
  1480. [177.8, 78.6],
  1481. [177.8, 71.8],
  1482. [177.8, 116.4],
  1483. [163.8, 72.2],
  1484. [188.0, 83.6],
  1485. [198.1, 85.5],
  1486. [175.3, 90.9],
  1487. [166.4, 85.9],
  1488. [190.5, 89.1],
  1489. [166.4, 75.0],
  1490. [177.8, 77.7],
  1491. [179.7, 86.4],
  1492. [172.7, 90.9],
  1493. [190.5, 73.6],
  1494. [185.4, 76.4],
  1495. [168.9, 69.1],
  1496. [167.6, 84.5],
  1497. [175.3, 64.5],
  1498. [170.2, 69.1],
  1499. [190.5, 108.6],
  1500. [177.8, 86.4],
  1501. [190.5, 80.9],
  1502. [177.8, 87.7],
  1503. [184.2, 94.5],
  1504. [176.5, 80.2],
  1505. [177.8, 72.0],
  1506. [180.3, 71.4],
  1507. [171.4, 72.7],
  1508. [172.7, 84.1],
  1509. [172.7, 76.8],
  1510. [177.8, 63.6],
  1511. [177.8, 80.9],
  1512. [182.9, 80.9],
  1513. [170.2, 85.5],
  1514. [167.6, 68.6],
  1515. [175.3, 67.7],
  1516. [165.1, 66.4],
  1517. [185.4, 102.3],
  1518. [181.6, 70.5],
  1519. [172.7, 95.9],
  1520. [190.5, 84.1],
  1521. [179.1, 87.3],
  1522. [175.3, 71.8],
  1523. [170.2, 65.9],
  1524. [193.0, 95.9],
  1525. [171.4, 91.4],
  1526. [177.8, 81.8],
  1527. [177.8, 96.8],
  1528. [167.6, 69.1],
  1529. [167.6, 82.7],
  1530. [180.3, 75.5],
  1531. [182.9, 79.5],
  1532. [176.5, 73.6],
  1533. [186.7, 91.8],
  1534. [188.0, 84.1],
  1535. [188.0, 85.9],
  1536. [177.8, 81.8],
  1537. [174.0, 82.5],
  1538. [177.8, 80.5],
  1539. [171.4, 70.0],
  1540. [185.4, 81.8],
  1541. [185.4, 84.1],
  1542. [188.0, 90.5],
  1543. [188.0, 91.4],
  1544. [182.9, 89.1],
  1545. [176.5, 85.0],
  1546. [175.3, 69.1],
  1547. [175.3, 73.6],
  1548. [188.0, 80.5],
  1549. [188.0, 82.7],
  1550. [175.3, 86.4],
  1551. [170.5, 67.7],
  1552. [179.1, 92.7],
  1553. [177.8, 93.6],
  1554. [175.3, 70.9],
  1555. [182.9, 75.0],
  1556. [170.8, 93.2],
  1557. [188.0, 93.2],
  1558. [180.3, 77.7],
  1559. [177.8, 61.4],
  1560. [185.4, 94.1],
  1561. [168.9, 75.0],
  1562. [185.4, 83.6],
  1563. [180.3, 85.5],
  1564. [174.0, 73.9],
  1565. [167.6, 66.8],
  1566. [182.9, 87.3],
  1567. [160.0, 72.3],
  1568. [180.3, 88.6],
  1569. [167.6, 75.5],
  1570. [186.7, 101.4],
  1571. [175.3, 91.1],
  1572. [175.3, 67.3],
  1573. [175.9, 77.7],
  1574. [175.3, 81.8],
  1575. [179.1, 75.5],
  1576. [181.6, 84.5],
  1577. [177.8, 76.6],
  1578. [182.9, 85.0],
  1579. [177.8, 102.5],
  1580. [184.2, 77.3],
  1581. [179.1, 71.8],
  1582. [176.5, 87.9],
  1583. [188.0, 94.3],
  1584. [174.0, 70.9],
  1585. [167.6, 64.5],
  1586. [170.2, 77.3],
  1587. [167.6, 72.3],
  1588. [188.0, 87.3],
  1589. [174.0, 80.0],
  1590. [176.5, 82.3],
  1591. [180.3, 73.6],
  1592. [167.6, 74.1],
  1593. [188.0, 85.9],
  1594. [180.3, 73.2],
  1595. [167.6, 76.3],
  1596. [183.0, 65.9],
  1597. [183.0, 90.9],
  1598. [179.1, 89.1],
  1599. [170.2, 62.3],
  1600. [177.8, 82.7],
  1601. [179.1, 79.1],
  1602. [190.5, 98.2],
  1603. [177.8, 84.1],
  1604. [180.3, 83.2],
  1605. [180.3, 83.2]
  1606. ],
  1607. markPoint: {
  1608. data: [{
  1609. type: 'max',
  1610. name: 'Max'
  1611. }, {
  1612. type: 'min',
  1613. name: 'Min'
  1614. }]
  1615. },
  1616. markLine: {
  1617. data: [{
  1618. type: 'average',
  1619. name: 'Mean'
  1620. }]
  1621. }
  1622. }]
  1623. });
  1624. var myChart = echarts.init(document.getElementById('echart_bar_horizontal'), theme);
  1625. myChart.setOption({
  1626. title: {
  1627. text: 'Bar Graph',
  1628. subtext: 'Graph subtitle'
  1629. },
  1630. tooltip: {
  1631. trigger: 'axis'
  1632. },
  1633. legend: {
  1634. data: ['2015', '2016']
  1635. },
  1636. toolbox: {
  1637. show: true,
  1638. feature: {
  1639. saveAsImage: {
  1640. show: true
  1641. }
  1642. }
  1643. },
  1644. calculable: true,
  1645. xAxis: [{
  1646. type: 'value',
  1647. boundaryGap: [0, 0.01]
  1648. }],
  1649. yAxis: [{
  1650. type: 'category',
  1651. data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  1652. }],
  1653. series: [{
  1654. name: '2015',
  1655. type: 'bar',
  1656. data: [18203, 23489, 29034, 104970, 131744, 630230]
  1657. }, {
  1658. name: '2016',
  1659. type: 'bar',
  1660. data: [19325, 23438, 31000, 121594, 134141, 681807]
  1661. }]
  1662. });
  1663. var myChart = echarts.init(document.getElementById('echart_pie2'), theme);
  1664. myChart.setOption({
  1665. tooltip: {
  1666. trigger: 'item',
  1667. formatter: "{a} <br/>{b} : {c} ({d}%)"
  1668. },
  1669. legend: {
  1670. x: 'center',
  1671. y: 'bottom',
  1672. data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6']
  1673. },
  1674. toolbox: {
  1675. show: true,
  1676. feature: {
  1677. magicType: {
  1678. show: true,
  1679. type: ['pie', 'funnel']
  1680. },
  1681. restore: {
  1682. show: true
  1683. },
  1684. saveAsImage: {
  1685. show: true
  1686. }
  1687. }
  1688. },
  1689. calculable: true,
  1690. series: [{
  1691. name: 'Area Mode',
  1692. type: 'pie',
  1693. radius: [25, 90],
  1694. center: ['50%', 170],
  1695. roseType: 'area',
  1696. x: '50%',
  1697. max: 40,
  1698. sort: 'ascending',
  1699. data: [{
  1700. value: 10,
  1701. name: 'rose1'
  1702. }, {
  1703. value: 5,
  1704. name: 'rose2'
  1705. }, {
  1706. value: 15,
  1707. name: 'rose3'
  1708. }, {
  1709. value: 25,
  1710. name: 'rose4'
  1711. }, {
  1712. value: 20,
  1713. name: 'rose5'
  1714. }, {
  1715. value: 35,
  1716. name: 'rose6'
  1717. }]
  1718. }]
  1719. });
  1720. var myChart = echarts.init(document.getElementById('echart_donut'), theme);
  1721. myChart.setOption({
  1722. tooltip: {
  1723. trigger: 'item',
  1724. formatter: "{a} <br/>{b} : {c} ({d}%)"
  1725. },
  1726. calculable: true,
  1727. legend: {
  1728. //orient: 'vertical',
  1729. //x: 'left',
  1730. x: 'center',
  1731. y: 'bottom',
  1732. data: ['Direct Accesss', 'E-mail Marketing', 'Union Ad', 'Video Ads', 'Search Engine']
  1733. },
  1734. toolbox: {
  1735. show: true,
  1736. feature: {
  1737. magicType: {
  1738. show: true,
  1739. type: ['pie', 'funnel'],
  1740. option: {
  1741. funnel: {
  1742. x: '25%',
  1743. width: '50%',
  1744. funnelAlign: 'center',
  1745. max: 1548
  1746. }
  1747. }
  1748. },
  1749. restore: {
  1750. show: true
  1751. },
  1752. saveAsImage: {
  1753. show: true
  1754. }
  1755. }
  1756. },
  1757. series: [{
  1758. name: 'Access to the resource',
  1759. type: 'pie',
  1760. radius: ['35%', '55%'],
  1761. itemStyle: {
  1762. normal: {
  1763. label: {
  1764. show: true
  1765. },
  1766. labelLine: {
  1767. show: true
  1768. }
  1769. },
  1770. emphasis: {
  1771. label: {
  1772. show: true,
  1773. position: 'center',
  1774. textStyle: {
  1775. fontSize: '14',
  1776. fontWeight: 'normal'
  1777. }
  1778. }
  1779. }
  1780. },
  1781. data: [{
  1782. value: 335,
  1783. name: 'Direct Access'
  1784. }, {
  1785. value: 310,
  1786. name: 'E-mail Marketing'
  1787. }, {
  1788. value: 234,
  1789. name: 'Union Ad'
  1790. }, {
  1791. value: 135,
  1792. name: 'Video Ads'
  1793. }, {
  1794. value: 1548,
  1795. name: 'Search Engine'
  1796. }]
  1797. }]
  1798. });
  1799. var myChart = echarts.init(document.getElementById('echart_pie'), theme);
  1800. myChart.setOption({
  1801. tooltip: {
  1802. trigger: 'item',
  1803. formatter: "{a} <br/>{b} : {c} ({d}%)"
  1804. },
  1805. legend: {
  1806. //orient: 'vertical',
  1807. //x: 'left',
  1808. x: 'center',
  1809. y: 'bottom',
  1810. data: ['Direct Access', 'E-mail Marketing', 'Union Ad', 'Video Ads', 'Search Engine']
  1811. },
  1812. toolbox: {
  1813. show: true,
  1814. feature: {
  1815. magicType: {
  1816. show: true,
  1817. type: ['pie', 'funnel'],
  1818. option: {
  1819. funnel: {
  1820. x: '25%',
  1821. width: '50%',
  1822. funnelAlign: 'left',
  1823. max: 1548
  1824. }
  1825. }
  1826. },
  1827. restore: {
  1828. show: true
  1829. },
  1830. saveAsImage: {
  1831. show: true
  1832. }
  1833. }
  1834. },
  1835. calculable: true,
  1836. series: [{
  1837. name: '访问来源',
  1838. type: 'pie',
  1839. radius: '55%',
  1840. center: ['50%', '48%'], //left,top
  1841. data: [{
  1842. value: 335,
  1843. name: 'Direct Access'
  1844. }, {
  1845. value: 310,
  1846. name: 'E-mail Marketing'
  1847. }, {
  1848. value: 234,
  1849. name: 'Union Ad'
  1850. }, {
  1851. value: 135,
  1852. name: 'Video Ads'
  1853. }, {
  1854. value: 1548,
  1855. name: 'Search Engine'
  1856. }]
  1857. }]
  1858. });
  1859. var dataStyle = {
  1860. normal: {
  1861. label: {
  1862. show: false
  1863. },
  1864. labelLine: {
  1865. show: false
  1866. }
  1867. }
  1868. };
  1869. var placeHolderStyle = {
  1870. normal: {
  1871. color: 'rgba(0,0,0,0)',
  1872. label: {
  1873. show: false
  1874. },
  1875. labelLine: {
  1876. show: false
  1877. }
  1878. },
  1879. emphasis: {
  1880. color: 'rgba(0,0,0,0)'
  1881. }
  1882. };
  1883. var myChartx = echarts.init(document.getElementById('echart_mini_pie'), theme);
  1884. myChartx.setOption({
  1885. title: {
  1886. text: 'Chart #2',
  1887. subtext: 'From ExcelHome',
  1888. sublink: 'http://e.weibo.com/1341556070/AhQXtjbqh',
  1889. x: 'center',
  1890. y: 'center',
  1891. itemGap: 20,
  1892. textStyle: {
  1893. color: 'rgba(30,144,255,0.8)',
  1894. fontFamily: '微软雅黑',
  1895. fontSize: 35,
  1896. fontWeight: 'bolder'
  1897. }
  1898. },
  1899. tooltip: {
  1900. show: true,
  1901. formatter: "{a} <br/>{b} : {c} ({d}%)"
  1902. },
  1903. legend: {
  1904. orient: 'vertical',
  1905. x: 170, //document.getElementById('main').offsetWidth / 2,
  1906. y: 45,
  1907. itemGap: 12,
  1908. data: ['68%Something #1', '29%Something #2', '3%Something #3']
  1909. },
  1910. toolbox: {
  1911. show: true,
  1912. feature: {
  1913. mark: {
  1914. show: true
  1915. },
  1916. dataView: {
  1917. show: true,
  1918. readOnly: false
  1919. },
  1920. restore: {
  1921. show: true
  1922. },
  1923. saveAsImage: {
  1924. show: true
  1925. }
  1926. }
  1927. },
  1928. series: [{
  1929. name: '1',
  1930. type: 'pie',
  1931. clockWise: false,
  1932. radius: [105, 130],
  1933. itemStyle: dataStyle,
  1934. data: [{
  1935. value: 68,
  1936. name: '68%Something #1'
  1937. }, {
  1938. value: 32,
  1939. name: 'invisible',
  1940. itemStyle: placeHolderStyle
  1941. }]
  1942. }, {
  1943. name: '2',
  1944. type: 'pie',
  1945. clockWise: false,
  1946. radius: [80, 105],
  1947. itemStyle: dataStyle,
  1948. data: [{
  1949. value: 29,
  1950. name: '29%Something #2'
  1951. }, {
  1952. value: 71,
  1953. name: 'invisible',
  1954. itemStyle: placeHolderStyle
  1955. }]
  1956. }, {
  1957. name: '3',
  1958. type: 'pie',
  1959. clockWise: false,
  1960. radius: [25, 80],
  1961. itemStyle: dataStyle,
  1962. data: [{
  1963. value: 3,
  1964. name: '3%Something #3'
  1965. }, {
  1966. value: 97,
  1967. name: 'invisible',
  1968. itemStyle: placeHolderStyle
  1969. }]
  1970. }]
  1971. });
  1972. var myChart = echarts.init(document.getElementById('echart_world_map'), theme);
  1973. myChart.setOption({
  1974. title: {
  1975. text: 'World Population (2010)',
  1976. subtext: 'from United Nations, Total population, both sexes combined, as of 1 July (thousands)',
  1977. //sublink: 'http://esa.un.org/wpp/Excel-Data/population.htm',
  1978. x: 'center',
  1979. y: 'top'
  1980. },
  1981. tooltip: {
  1982. trigger: 'item',
  1983. formatter: function(params) {
  1984. var value = (params.value + '').split('.');
  1985. value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,') + '.' + value[1];
  1986. return params.seriesName + '<br/>' + params.name + ' : ' + value;
  1987. }
  1988. },
  1989. toolbox: {
  1990. show: true,
  1991. orient: 'vertical',
  1992. x: 'right',
  1993. y: 'center',
  1994. feature: {
  1995. mark: {
  1996. show: true
  1997. },
  1998. dataView: {
  1999. show: true,
  2000. readOnly: false
  2001. },
  2002. restore: {
  2003. show: true
  2004. },
  2005. saveAsImage: {
  2006. show: true
  2007. }
  2008. }
  2009. },
  2010. dataRange: {
  2011. min: 0,
  2012. max: 1000000,
  2013. text: ['High', 'Low'],
  2014. realtime: false,
  2015. calculable: true,
  2016. color: ['#087E65', '#26B99A', '#CBEAE3']
  2017. },
  2018. series: [{
  2019. name: 'World Population (2010)',
  2020. type: 'map',
  2021. mapType: 'world',
  2022. roam: false,
  2023. mapLocation: {
  2024. y: 60
  2025. },
  2026. itemStyle: {
  2027. emphasis: {
  2028. label: {
  2029. show: true
  2030. }
  2031. }
  2032. },
  2033. data: [{
  2034. name: 'Afghanistan',
  2035. value: 28397.812
  2036. }, {
  2037. name: 'Angola',
  2038. value: 19549.124
  2039. }, {
  2040. name: 'Albania',
  2041. value: 3150.143
  2042. }, {
  2043. name: 'United Arab Emirates',
  2044. value: 8441.537
  2045. }, {
  2046. name: 'Argentina',
  2047. value: 40374.224
  2048. }, {
  2049. name: 'Armenia',
  2050. value: 2963.496
  2051. }, {
  2052. name: 'French Southern and Antarctic Lands',
  2053. value: 268.065
  2054. }, {
  2055. name: 'Australia',
  2056. value: 22404.488
  2057. }, {
  2058. name: 'Austria',
  2059. value: 8401.924
  2060. }, {
  2061. name: 'Azerbaijan',
  2062. value: 9094.718
  2063. }, {
  2064. name: 'Burundi',
  2065. value: 9232.753
  2066. }, {
  2067. name: 'Belgium',
  2068. value: 10941.288
  2069. }, {
  2070. name: 'Benin',
  2071. value: 9509.798
  2072. }, {
  2073. name: 'Burkina Faso',
  2074. value: 15540.284
  2075. }, {
  2076. name: 'Bangladesh',
  2077. value: 151125.475
  2078. }, {
  2079. name: 'Bulgaria',
  2080. value: 7389.175
  2081. }, {
  2082. name: 'The Bahamas',
  2083. value: 66402.316
  2084. }, {
  2085. name: 'Bosnia and Herzegovina',
  2086. value: 3845.929
  2087. }, {
  2088. name: 'Belarus',
  2089. value: 9491.07
  2090. }, {
  2091. name: 'Belize',
  2092. value: 308.595
  2093. }, {
  2094. name: 'Bermuda',
  2095. value: 64.951
  2096. }, {
  2097. name: 'Bolivia',
  2098. value: 716.939
  2099. }, {
  2100. name: 'Brazil',
  2101. value: 195210.154
  2102. }, {
  2103. name: 'Brunei',
  2104. value: 27.223
  2105. }, {
  2106. name: 'Bhutan',
  2107. value: 716.939
  2108. }, {
  2109. name: 'Botswana',
  2110. value: 1969.341
  2111. }, {
  2112. name: 'Central African Republic',
  2113. value: 4349.921
  2114. }, {
  2115. name: 'Canada',
  2116. value: 34126.24
  2117. }, {
  2118. name: 'Switzerland',
  2119. value: 7830.534
  2120. }, {
  2121. name: 'Chile',
  2122. value: 17150.76
  2123. }, {
  2124. name: 'China',
  2125. value: 1359821.465
  2126. }, {
  2127. name: 'Ivory Coast',
  2128. value: 60508.978
  2129. }, {
  2130. name: 'Cameroon',
  2131. value: 20624.343
  2132. }, {
  2133. name: 'Democratic Republic of the Congo',
  2134. value: 62191.161
  2135. }, {
  2136. name: 'Republic of the Congo',
  2137. value: 3573.024
  2138. }, {
  2139. name: 'Colombia',
  2140. value: 46444.798
  2141. }, {
  2142. name: 'Costa Rica',
  2143. value: 4669.685
  2144. }, {
  2145. name: 'Cuba',
  2146. value: 11281.768
  2147. }, {
  2148. name: 'Northern Cyprus',
  2149. value: 1.468
  2150. }, {
  2151. name: 'Cyprus',
  2152. value: 1103.685
  2153. }, {
  2154. name: 'Czech Republic',
  2155. value: 10553.701
  2156. }, {
  2157. name: 'Germany',
  2158. value: 83017.404
  2159. }, {
  2160. name: 'Djibouti',
  2161. value: 834.036
  2162. }, {
  2163. name: 'Denmark',
  2164. value: 5550.959
  2165. }, {
  2166. name: 'Dominican Republic',
  2167. value: 10016.797
  2168. }, {
  2169. name: 'Algeria',
  2170. value: 37062.82
  2171. }, {
  2172. name: 'Ecuador',
  2173. value: 15001.072
  2174. }, {
  2175. name: 'Egypt',
  2176. value: 78075.705
  2177. }, {
  2178. name: 'Eritrea',
  2179. value: 5741.159
  2180. }, {
  2181. name: 'Spain',
  2182. value: 46182.038
  2183. }, {
  2184. name: 'Estonia',
  2185. value: 1298.533
  2186. }, {
  2187. name: 'Ethiopia',
  2188. value: 87095.281
  2189. }, {
  2190. name: 'Finland',
  2191. value: 5367.693
  2192. }, {
  2193. name: 'Fiji',
  2194. value: 860.559
  2195. }, {
  2196. name: 'Falkland Islands',
  2197. value: 49.581
  2198. }, {
  2199. name: 'France',
  2200. value: 63230.866
  2201. }, {
  2202. name: 'Gabon',
  2203. value: 1556.222
  2204. }, {
  2205. name: 'United Kingdom',
  2206. value: 62066.35
  2207. }, {
  2208. name: 'Georgia',
  2209. value: 4388.674
  2210. }, {
  2211. name: 'Ghana',
  2212. value: 24262.901
  2213. }, {
  2214. name: 'Guinea',
  2215. value: 10876.033
  2216. }, {
  2217. name: 'Gambia',
  2218. value: 1680.64
  2219. }, {
  2220. name: 'Guinea Bissau',
  2221. value: 10876.033
  2222. }, {
  2223. name: 'Equatorial Guinea',
  2224. value: 696.167
  2225. }, {
  2226. name: 'Greece',
  2227. value: 11109.999
  2228. }, {
  2229. name: 'Greenland',
  2230. value: 56.546
  2231. }, {
  2232. name: 'Guatemala',
  2233. value: 14341.576
  2234. }, {
  2235. name: 'French Guiana',
  2236. value: 231.169
  2237. }, {
  2238. name: 'Guyana',
  2239. value: 786.126
  2240. }, {
  2241. name: 'Honduras',
  2242. value: 7621.204
  2243. }, {
  2244. name: 'Croatia',
  2245. value: 4338.027
  2246. }, {
  2247. name: 'Haiti',
  2248. value: 9896.4
  2249. }, {
  2250. name: 'Hungary',
  2251. value: 10014.633
  2252. }, {
  2253. name: 'Indonesia',
  2254. value: 240676.485
  2255. }, {
  2256. name: 'India',
  2257. value: 1205624.648
  2258. }, {
  2259. name: 'Ireland',
  2260. value: 4467.561
  2261. }, {
  2262. name: 'Iran',
  2263. value: 240676.485
  2264. }, {
  2265. name: 'Iraq',
  2266. value: 30962.38
  2267. }, {
  2268. name: 'Iceland',
  2269. value: 318.042
  2270. }, {
  2271. name: 'Israel',
  2272. value: 7420.368
  2273. }, {
  2274. name: 'Italy',
  2275. value: 60508.978
  2276. }, {
  2277. name: 'Jamaica',
  2278. value: 2741.485
  2279. }, {
  2280. name: 'Jordan',
  2281. value: 6454.554
  2282. }, {
  2283. name: 'Japan',
  2284. value: 127352.833
  2285. }, {
  2286. name: 'Kazakhstan',
  2287. value: 15921.127
  2288. }, {
  2289. name: 'Kenya',
  2290. value: 40909.194
  2291. }, {
  2292. name: 'Kyrgyzstan',
  2293. value: 5334.223
  2294. }, {
  2295. name: 'Cambodia',
  2296. value: 14364.931
  2297. }, {
  2298. name: 'South Korea',
  2299. value: 51452.352
  2300. }, {
  2301. name: 'Kosovo',
  2302. value: 97.743
  2303. }, {
  2304. name: 'Kuwait',
  2305. value: 2991.58
  2306. }, {
  2307. name: 'Laos',
  2308. value: 6395.713
  2309. }, {
  2310. name: 'Lebanon',
  2311. value: 4341.092
  2312. }, {
  2313. name: 'Liberia',
  2314. value: 3957.99
  2315. }, {
  2316. name: 'Libya',
  2317. value: 6040.612
  2318. }, {
  2319. name: 'Sri Lanka',
  2320. value: 20758.779
  2321. }, {
  2322. name: 'Lesotho',
  2323. value: 2008.921
  2324. }, {
  2325. name: 'Lithuania',
  2326. value: 3068.457
  2327. }, {
  2328. name: 'Luxembourg',
  2329. value: 507.885
  2330. }, {
  2331. name: 'Latvia',
  2332. value: 2090.519
  2333. }, {
  2334. name: 'Morocco',
  2335. value: 31642.36
  2336. }, {
  2337. name: 'Moldova',
  2338. value: 103.619
  2339. }, {
  2340. name: 'Madagascar',
  2341. value: 21079.532
  2342. }, {
  2343. name: 'Mexico',
  2344. value: 117886.404
  2345. }, {
  2346. name: 'Macedonia',
  2347. value: 507.885
  2348. }, {
  2349. name: 'Mali',
  2350. value: 13985.961
  2351. }, {
  2352. name: 'Myanmar',
  2353. value: 51931.231
  2354. }, {
  2355. name: 'Montenegro',
  2356. value: 620.078
  2357. }, {
  2358. name: 'Mongolia',
  2359. value: 2712.738
  2360. }, {
  2361. name: 'Mozambique',
  2362. value: 23967.265
  2363. }, {
  2364. name: 'Mauritania',
  2365. value: 3609.42
  2366. }, {
  2367. name: 'Malawi',
  2368. value: 15013.694
  2369. }, {
  2370. name: 'Malaysia',
  2371. value: 28275.835
  2372. }, {
  2373. name: 'Namibia',
  2374. value: 2178.967
  2375. }, {
  2376. name: 'New Caledonia',
  2377. value: 246.379
  2378. }, {
  2379. name: 'Niger',
  2380. value: 15893.746
  2381. }, {
  2382. name: 'Nigeria',
  2383. value: 159707.78
  2384. }, {
  2385. name: 'Nicaragua',
  2386. value: 5822.209
  2387. }, {
  2388. name: 'Netherlands',
  2389. value: 16615.243
  2390. }, {
  2391. name: 'Norway',
  2392. value: 4891.251
  2393. }, {
  2394. name: 'Nepal',
  2395. value: 26846.016
  2396. }, {
  2397. name: 'New Zealand',
  2398. value: 4368.136
  2399. }, {
  2400. name: 'Oman',
  2401. value: 2802.768
  2402. }, {
  2403. name: 'Pakistan',
  2404. value: 173149.306
  2405. }, {
  2406. name: 'Panama',
  2407. value: 3678.128
  2408. }, {
  2409. name: 'Peru',
  2410. value: 29262.83
  2411. }, {
  2412. name: 'Philippines',
  2413. value: 93444.322
  2414. }, {
  2415. name: 'Papua New Guinea',
  2416. value: 6858.945
  2417. }, {
  2418. name: 'Poland',
  2419. value: 38198.754
  2420. }, {
  2421. name: 'Puerto Rico',
  2422. value: 3709.671
  2423. }, {
  2424. name: 'North Korea',
  2425. value: 1.468
  2426. }, {
  2427. name: 'Portugal',
  2428. value: 10589.792
  2429. }, {
  2430. name: 'Paraguay',
  2431. value: 6459.721
  2432. }, {
  2433. name: 'Qatar',
  2434. value: 1749.713
  2435. }, {
  2436. name: 'Romania',
  2437. value: 21861.476
  2438. }, {
  2439. name: 'Russia',
  2440. value: 21861.476
  2441. }, {
  2442. name: 'Rwanda',
  2443. value: 10836.732
  2444. }, {
  2445. name: 'Western Sahara',
  2446. value: 514.648
  2447. }, {
  2448. name: 'Saudi Arabia',
  2449. value: 27258.387
  2450. }, {
  2451. name: 'Sudan',
  2452. value: 35652.002
  2453. }, {
  2454. name: 'South Sudan',
  2455. value: 9940.929
  2456. }, {
  2457. name: 'Senegal',
  2458. value: 12950.564
  2459. }, {
  2460. name: 'Solomon Islands',
  2461. value: 526.447
  2462. }, {
  2463. name: 'Sierra Leone',
  2464. value: 5751.976
  2465. }, {
  2466. name: 'El Salvador',
  2467. value: 6218.195
  2468. }, {
  2469. name: 'Somaliland',
  2470. value: 9636.173
  2471. }, {
  2472. name: 'Somalia',
  2473. value: 9636.173
  2474. }, {
  2475. name: 'Republic of Serbia',
  2476. value: 3573.024
  2477. }, {
  2478. name: 'Suriname',
  2479. value: 524.96
  2480. }, {
  2481. name: 'Slovakia',
  2482. value: 5433.437
  2483. }, {
  2484. name: 'Slovenia',
  2485. value: 2054.232
  2486. }, {
  2487. name: 'Sweden',
  2488. value: 9382.297
  2489. }, {
  2490. name: 'Swaziland',
  2491. value: 1193.148
  2492. }, {
  2493. name: 'Syria',
  2494. value: 7830.534
  2495. }, {
  2496. name: 'Chad',
  2497. value: 11720.781
  2498. }, {
  2499. name: 'Togo',
  2500. value: 6306.014
  2501. }, {
  2502. name: 'Thailand',
  2503. value: 66402.316
  2504. }, {
  2505. name: 'Tajikistan',
  2506. value: 7627.326
  2507. }, {
  2508. name: 'Turkmenistan',
  2509. value: 5041.995
  2510. }, {
  2511. name: 'East Timor',
  2512. value: 10016.797
  2513. }, {
  2514. name: 'Trinidad and Tobago',
  2515. value: 1328.095
  2516. }, {
  2517. name: 'Tunisia',
  2518. value: 10631.83
  2519. }, {
  2520. name: 'Turkey',
  2521. value: 72137.546
  2522. }, {
  2523. name: 'United Republic of Tanzania',
  2524. value: 44973.33
  2525. }, {
  2526. name: 'Uganda',
  2527. value: 33987.213
  2528. }, {
  2529. name: 'Ukraine',
  2530. value: 46050.22
  2531. }, {
  2532. name: 'Uruguay',
  2533. value: 3371.982
  2534. }, {
  2535. name: 'United States of America',
  2536. value: 312247.116
  2537. }, {
  2538. name: 'Uzbekistan',
  2539. value: 27769.27
  2540. }, {
  2541. name: 'Venezuela',
  2542. value: 236.299
  2543. }, {
  2544. name: 'Vietnam',
  2545. value: 89047.397
  2546. }, {
  2547. name: 'Vanuatu',
  2548. value: 236.299
  2549. }, {
  2550. name: 'West Bank',
  2551. value: 13.565
  2552. }, {
  2553. name: 'Yemen',
  2554. value: 22763.008
  2555. }, {
  2556. name: 'South Africa',
  2557. value: 51452.352
  2558. }, {
  2559. name: 'Zambia',
  2560. value: 13216.985
  2561. }, {
  2562. name: 'Zimbabwe',
  2563. value: 13076.978
  2564. }]
  2565. }]
  2566. });
  2567. </script>
  2568. </body>
  2569. </html>