index.html 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287
  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta name="description" content="ECharts">
  8. <meta name="author" content="kener.linfeng@gmail.com">
  9. <title>ECharts · Home</title>
  10. <link rel="shortcut icon" href="./doc/asset/ico/favicon.png">
  11. <link href="./doc/asset/css/font-awesome.min.css" rel="stylesheet">
  12. <link href="./doc/asset/css/bootstrap.css" rel="stylesheet">
  13. <link href="./doc/asset/css/carousel.css" rel="stylesheet">
  14. <link href="./doc/asset/css/echartsHome.css" rel="stylesheet">
  15. <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  16. <!--[if lt IE 9]>
  17. <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  18. <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  19. <![endif]-->
  20. </head>
  21. <body>
  22. <!-- Fixed navbar -->
  23. <div class="navbar navbar-default navbar-fixed-top" role="navigation" id="head"></div>
  24. <!-- Carousel
  25. ================================================== -->
  26. <div id="myCarousel" class="carousel slide" data-ride="carousel">
  27. <!-- Indicators -->
  28. <ol class="carousel-indicators">
  29. <li data-target="#myCarousel" data-slide-to="0"></li>
  30. <li data-target="#myCarousel" data-slide-to="1"></li>
  31. <li data-target="#myCarousel" data-slide-to="2"></li>
  32. <li data-target="#myCarousel" data-slide-to="3"></li>
  33. <li data-target="#myCarousel" data-slide-to="4"></li>
  34. <li data-target="#myCarousel" data-slide-to="5" class="active"></li>
  35. <li data-target="#myCarousel" data-slide-to="6"></li>
  36. </ol>
  37. <div class="carousel-inner">
  38. <div class="item">
  39. <img src="./doc/asset/img/slide-01.png" alt="ECharts"/>
  40. </div>
  41. <div class="item">
  42. <img src="./doc/asset/img/slide-02.png" alt="ECharts"/>
  43. <div class="container">
  44. <div class="carousel-caption" style="bottom:0;left:25%">
  45. <p style="text-align:left;">
  46. <a class="btn btn-lg btn-warning" href="./doc/example.html#gauge" role="button">查看 »</a>
  47. </p>
  48. </div>
  49. </div>
  50. </div>
  51. <div class="item">
  52. <img src="./doc/asset/img/slide-03.png" alt="ECharts"/>
  53. <div class="container">
  54. <div class="carousel-caption" style="bottom:0;left:25%">
  55. <p style="text-align:left;">
  56. <a class="btn btn-lg btn-warning" href="./doc/example/bar12.html" role="button">查看 »</a>
  57. </p>
  58. </div>
  59. </div>
  60. </div>
  61. <div class="item">
  62. <img src="./doc/asset/img/slide-04.png" alt="ECharts"/>
  63. <div class="container">
  64. <div class="carousel-caption" style="bottom:0;left:25%">
  65. <p style="text-align:left;">
  66. <a class="btn btn-lg btn-warning" href="./doc/example/theme.html" role="button">查看 »</a>
  67. </p>
  68. </div>
  69. </div>
  70. </div>
  71. <div class="item">
  72. <img src="./doc/asset/img/slide-05.jpg" alt="百度图说"/>
  73. <div class="container">
  74. <div class="carousel-caption" style="bottom:0;left:25%">
  75. <p style="text-align:left;">
  76. <a class="btn btn-lg btn-warning" href="http://tushuo.baidu.com" role="button" target="_blank">了解更多 »</a>
  77. </p>
  78. </div>
  79. </div>
  80. </div>
  81. <div class="item active">
  82. <img src="./doc/asset/img/bannerStudy.png" alt="ECharts基础教程" style="width:100%;left:0;margin:0"/>
  83. <div class="container">
  84. <div class="carousel-caption ecx-link">
  85. <a href="http://study.163.com/course/courseMain.htm?courseId=1016007" target="_blank">了解更多 »</a>
  86. </div>
  87. </div>
  88. </div>
  89. <div class="item">
  90. <img src="./doc/asset/img/bannerX.jpg" alt="ECharts-X" style="width:100%;left:0;margin:0"/>
  91. <div class="container">
  92. <div class="carousel-caption ecx-link">
  93. <a href="http://echarts.baidu.com/x/doc/index.html" target="_blank">了解更多 »</a>
  94. </div>
  95. </div>
  96. </div>
  97. </div>
  98. <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
  99. <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
  100. </div><!-- /.carousel -->
  101. <!-- Marketing messaging and featurettes
  102. ================================================== -->
  103. <!-- Wrap the rest of the page in another container to center all the content. -->
  104. <div class="container marketing">
  105. <h1 class="text-center" style="margin-bottom:30px;">让数据说话</h1>
  106. <!-- Three columns of text below the carousel -->
  107. <div class="row">
  108. <div class="col-lg-4">
  109. <img class="col-lg-12" src="doc/asset/img/feature1.png" alt="Echarts 拖拽重计算" style="margin-bottom:20px"/>
  110. <h2>拖拽重计算</h2>
  111. <p class="text-left">&#12288;&#12288;拖拽重计算特性(专利)带来了数据统计图表从未有过的用户体验,允许用户对统计数据进行有效的提取、整合,甚至在多个图表间交换数据,赋予了用户对数据进行挖掘、整合的能力。</p>
  112. </div><!-- /.col-lg-4 -->
  113. <div class="col-lg-4">
  114. <img class="col-lg-12" src="doc/asset/img/feature2.png" alt="Echarts 数据视图" style="margin-bottom:20px"/>
  115. <h2>大规模数据模式</h2>
  116. <p class="text-left">&#12288;&#12288;如何展现成千上百万的数据?貌似除了用专业的统计工具(如MATLAB)外别无选择?不,在拥有众多交互特性下ECharts依然可以做到直角系图表(折、柱、散点、K线)20万数据秒级出图。</p>
  117. </div><!-- /.col-lg-4 -->
  118. <div class="col-lg-4">
  119. <img class="col-lg-12" src="doc/asset/img/feature3.png" alt="Echarts 值域漫游" style="margin-bottom:20px"/>
  120. <h2>值域漫游</h2>
  121. <p class="text-left">&#12288;&#12288;基于坐标的图表(如地图、散点图)通过色彩变化表现数值的大小能直观形象的展示数据分布。但如何聚焦到我所关心的数值上?ECharts拥有值域漫游的功能,让你可以轻松进行数值筛选。</p>
  122. </div><!-- /.col-lg-4 -->
  123. <p class="pull-right"><a href="doc/feature.html">更多 »</a></p>
  124. </div><!-- /.row -->
  125. <div class="row featurette thx">
  126. <h1 class="text-center">感谢有你</h1>
  127. <div class="col-lg-4">
  128. <blockquote>
  129. <p>“ ECharts是中国的,也是世界的。”</p>
  130. <br/>
  131. <small><i class="fa fa-weibo"></i> <a href="http://weibo.com/shearwarp" target="_blank">浙江大学教授 · 陈为</a></small>
  132. </blockquote>
  133. </div>
  134. <div class="col-lg-4">
  135. <blockquote>
  136. <p>“ 期待ECharts 2.0让数据更生动,图表更闪耀,交互更友好,使用更便捷。”</p>
  137. <small><i class="fa fa-weibo"></i> <a href="http://weibo.com/u/1688425190" target="_blank">AdMaster CTO · 洪倍</a></small>
  138. </blockquote>
  139. </div>
  140. <div class="col-lg-4">
  141. <blockquote>
  142. <p>“ ECharts,发现数据可视化之美!”</p>
  143. <br/>
  144. <small><i class="fa fa-weibo"></i> <a href="http://weibo.com/shenhaolaoshi" target="_blank">中国传媒大学教授 · 沈浩</a></small>
  145. </blockquote>
  146. </div>
  147. <div class="col-lg-6">
  148. <blockquote>
  149. <p>“ ECharts是我接触过的最优秀的可视化工具,也是进步最快的软件,希望它早日成为世界级的开源项目。”</p>
  150. <small><i class="fa fa-weibo"></i> <a href="http://weibo.com/u/2006785117" target="_blank">财新传媒CTO · 黄志敏</a></small>
  151. </blockquote>
  152. </div>
  153. <div class="col-lg-6">
  154. <blockquote>
  155. <p>“ 根据我们多年的国内外图表工具使用经验,ECharts完胜所有免费图表工具,媲美最优秀收费图表软件的好东东。”</p>
  156. <small><i class="fa fa-weibo"></i> <a href="http://weibo.com/tiemuyu" target="_blank">水清木华总经理 · 余杰</a></small>
  157. </blockquote>
  158. </div>
  159. <div class="col-lg-5">
  160. <blockquote>
  161. <p>“ ECharts是一款开源、功能强大的数据可视化产品,紧跟着大数据时代的步伐!希望ECharts在未来继续发扬开源的力量,让国内外更多的人用上这款数据可视化产品,为企业、社会创造更大的价值。”</p>
  162. <small><i class="fa fa-weibo"></i> <a href="http://weibo.com/DataScientistUnion" target="_blank">数盟社区创始人 · 兴宝</a></small>
  163. </blockquote>
  164. </div>
  165. <div class="col-lg-4">
  166. <blockquote>
  167. <p>“ ECharts开放、大气、优雅, 1.0就很赞了,更新很快,2.0更是惊艳。我身边的一些美帝朋友们也不辞劳苦,用在线翻译来学习ECharts!”</p>
  168. <small><i class="fa fa-weibo"></i> <a href="http://weibo.com/cosname/" target="_blank">统计之都创始人 · 谢益辉</a></small>
  169. </blockquote>
  170. </div>
  171. <div class="col-lg-3">
  172. <blockquote>
  173. <p>“ ECharts代表了新一代的大数据可视化基础库,希望能早日完善对移动平台的支持,帮助企业将大数据玩于指尖。”</p>
  174. <small><i class="fa fa-weibo"></i> <a href="http://weibo.com/austinhu" target="_blank">海智CTO · 胡嵩</a></small>
  175. </blockquote>
  176. </div>
  177. <div class="col-md-12 user text-center">
  178. <a href="http://www.baidu.com" target="_blank" ><img src="http://www.baidu.com/img/baidu_jgylogo3.gif" alt="到百度首页" title="到百度首页"></a>
  179. <a href="http://dev2.baidu.com/index.do" target="_blank" ><img src="http://dev2.baidu.com/zh/img/zh-logo.jpg" alt="百度商业开发者中心" title="百度商业开发者中心"></a>
  180. <a href="http://zhanzhang.baidu.com/" target="_blank" ><img src="http://zhanzhang.baidu.com/static/img/zhanzhang_logo.png" alt="百度站长平台" title="百度站长平台"></a>
  181. <a href="http://adm.baidu.com/index.html" target="_blank" ><img src="http://adm.baidu.com/home/common/img/logo.png"></a>
  182. <a href="http://jiaoyu.baidu.com/mp/index" target="_blank" ><img src="http://vs-static.baidu.com/edu/newjuhe/asset/img/logo137.png"></a>
  183. <a href="http://jiankang.baidu.com/" target="_blank" ><img src="http://vs-static.baidu.com/health/2014110417/common/img/logo.png"></a>
  184. <a href="http://wenku.baidu.com/" target="_blank" ><img src="http://static.wenku.bdimg.com/static/widget/common/header/search_box/images/logo-wk-137-46_3164f22b.png"></a>
  185. <a href="http://hui.baidu.com/" target="_blank" ><img src="http://vs-static.baidu.com/baiduhui/asset20140623/common/img/logo.png" alt="百度汇" title="百度汇"></a>
  186. <a href="http://yuedu.baidu.com/" target="_blank" ><img src="http://static.wenku.bdimg.com/static/widget/common/read/header/images/read_logo_657abbba.png"></a>
  187. <a href="http://sd.baidu.com/zh/" target="_blank" ><img src="http://sd.baidu.com/static/img/common/logo.png"></a>
  188. <a href="http://renqi.baidu.com/" target="_blank" ><img src="http://renqi.baidu.com/static/image/logo.png" style="background-color: #0d5ab1"></a>
  189. <a href="http://trends.baidu.com/" target="_blank" ><img src="http://trends.baidu.com/static/worldcup/home/logo_646fdc96.png" style="background-color: #264597"></a>
  190. <a href="http://www.stats.gov.cn/english/" target="_blank" ><img src="http://www.stats.gov.cn/english/images/name.png" style="background-color: #015FA5"></a>
  191. <a href="http://www.admaster.com.cn/" target="_blank" ><img src="http://www.admaster.com.cn/static/img/logo.png"></a>
  192. <a href="http://www.mi.com/" target="_blank" ><img src="http://img03.mifile.cn/webfile/images/2014/cn/icon/site-logo.png"></a>
  193. <a href="http://www.miaozhen.com/" target="_blank" ><img src="http://www.miaozhen.com/style/images/GW_logo.jpg"></a>
  194. <a href="http://www.semidata.com/index.php" target="_blank" ><img src="http://datavisualization.miaozhen.com/SemiData_logo.png"></a>
  195. <a href="http://www.sgcc.com.cn/" target="_blank" ><img src="http://www.sgcc.com.cn/images/header/header_logo_0106.png"></a>
  196. <a href="http://www.piccnet.com.cn/" target="_blank" ><img src="http://www.piccnet.com.cn/imagess/logo.gif"></a>
  197. <a href="http://www.sinopec.com/" target="_blank" ><img src="http://www.sinopec.com/s/images/logo.gif"></a>
  198. <a href="http://www.lenovo.com.cn/" target="_blank" ><img src="http://img.hc360.com/printing/info/images/200812/200812161055278334.jpg"></a>
  199. <a href="http://www.huawei.com/cn/" target="_blank" ><img src="http://www.huawei.com/minisite/mobile_cn/images/Logo.jpg"></a>
  200. <a href="http://www.dangdang.com/" target="_blank" ><img src="http://img4.ddimg.cn/00012/dang/logo_dd.gif"></a>
  201. <a href="http://lashou.com/" target="_blank" ><img src="http://s1.lashouimg.com/static/img/index/logo02.png"></a>
  202. <a href="http://www.vip.com/" target="_blank" ><img src="http://pic.iresearch.cn/news/201304/635018302584062500.jpg"></a>
  203. <a href="http://tv.pptv.com/" target="_blank" ><img src="http://photocdn.sohu.com/20120207/Img334013169.jpg"></a>
  204. <a href="http://www.caixin.com/" target="_blank" ><img src="http://file.caixin.com/file/content/images/new/logo.png"></a>
  205. <a href="http://www.jjckb.cn/" target="_blank" ><img src="http://jjckb.xinhuanet.com/jjimages/jc/images/logo.gif"></a>
  206. <a href="http://news.sina.com.cn/" target="_blank" ><img src="http://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png"></a>
  207. <!--a href="http://news.qq.com/newspedia/all.htm" target="_blank" ><img src="http://mat1.gtimg.com/news/newspedia/images/news_baike.png"></a-->
  208. <a href="http://news.qq.com/" target="_blank" ><img src="http://mat1.gtimg.com/news/news2013/LOGO.jpg"></a>
  209. <a href="http://mp.weixin.qq.com/s?__biz=MjM5MTQzNzU2NA==&mid=200577643&idx=1&sn=09a5a468fb76af4fb1b1155e63c61ab0#rd" target="_blank" ><img src="http://t1.qpic.cn/mblogpic/89bd83e9c419b39a3e06/460.jpg"></a>
  210. <a href="http://www.shujubang.com/index.html" target="_blank" ><img src="http://www.shujubang.com/Image_New/2014/Master/logo.png"></a>
  211. <a href="http://www.futureweather.cn/" target="_blank" ><img src="http://www.qx17.cn/_c_xKeZGQlsF8eHtUZXc63DP_L01zSR_ao8biwTU2VFqcomEOG4im0Ghomh19TkUeP7kimak9lDWS8Y-8dld2ohLx9bWw6ag9Gu.png"></a>
  212. <a href="http://www.ctrip.com/" target="_blank" ><img src="http://pic.c-ctrip.com/common/c_logo2013_2x.png"></a>
  213. <a href="http://www.jinjianginns.com/" target="_blank" ><img src="http://www.jinjianginns.com/images2/logo.jpg"></a>
  214. <a href="http://www.51job.com/default.php" target="_blank" ><img src="http://img01.51jobcdn.com/im/2009/logo/logo2009.gif"></a>
  215. <a href="http://www.alibaba.com/new_user_guide.html" target="_blank" ><img src="http://company.zhaopin.com/CompanyLogo/20080514/49F73DB7F6DF4AA486280906822B3E46.gif"></a>
  216. <a href="http://www.yonyou.com/" target="_blank" ><img src="http://www.yonyou.com/images/logo.jpg"></a>
  217. <a href="http://www.pactera.com/" target="_blank" ><img src="http://www.pactera.com/wp-content/themes/pactera/images/buttons/logo-menu.png"></a>
  218. <a href="http://shujuguan.cn/" target="_blank" ><img src="http://dl.shujuguan.cn/image/logo.png "></a>
  219. <div style="font-weight: bolder">...</div>
  220. </div>
  221. </div>
  222. <div class="row featurette" style="padding-bottom: 0;">
  223. <div class="col-md-12">
  224. <h1 class="text-primary" style="margin-bottom: 20px;"><small>大数据时代</small><br/><strong>重新定义数据图表的时候到了</strong></h1>
  225. <p class="lead">&#12288;&#12288;我们只是尽我们所能为你呈现数据<span class="text-primary">真实</span>的一面,并且提供了一些直观、易用的交互方式以方便你对所展现数据进行<span class="text-primary">挖掘、提取、修正或整合</span>,让你可以更加<span class="text-primary">专注</span>于你所关心地方,无论是系列选择、区域缩放还是数值筛选,让你可以有<span class="text-primary">不同的方式解读同样的数据</span>。</p>
  226. </div>
  227. <div class="col-md-12">
  228. <p class="lead" style="margin-bottom: 0;">&#12288;&#12288;浏览<span class="text-primary">ECharts</span>所输出的图表,你不再只是个“读者”,你可以参与其中,这就是<span class="text-primary">ECharts</span>,我们正在打造的一个拥有<strong class="text-primary">互动图形用户界面(GUI)</strong>的数据可视化工具。</p>
  229. </div>
  230. </div>
  231. <div class="jumbotron">
  232. <h1 style="font-size: 80px;margin-bottom:30px;">现在就出发!</h1>
  233. <a class="btn btn-large btn-warning" href="./doc/start.html"><i class="fa fa-paper-plane"></i> Get started</a>
  234. </div>
  235. <!-- /END THE FEATURETTES -->
  236. <div class="row featurette e-list" style="padding-bottom: 0;">
  237. <p>开源的ECharts来自百度<a href="http://efe.baidu.com/">EFE</a>数据可视化团队。在<a href="http://efe.baidu.com/">EFE</a>,我们还有其他开源产品:</p>
  238. <dl>
  239. <dt><a target="_blank" href="https://github.com/ecomfe/esl">ESL</a></dt>
  240. <dd>比Require.js更精简、更高效、更健壮的AMD Loader。</dd>
  241. <dt><a target="_blank" href="http://ecomfe.github.io/etpl/">ETpl</a></dt>
  242. <dd>强复用、灵活、高性能的JavaScript模板引擎。</dd>
  243. <dt><a target="_blank" href="https://github.com/ecomfe/edp">EDP</a></dt>
  244. <dd>提供了前端开发时常用工具:项目管理、包管理、调试、构建、代码生成、代码检测等,并允许用户自定义扩展。</dd>
  245. <dt><a target="_blank" href="https://github.com/ecomfe/er">ER</a></dt>
  246. <dd>富浏览器端 web 应用的框架,适用于并能很方便地构建一个整站式的 AJAX web 应用。</dd>
  247. <dt><a target="_blank" href="https://github.com/ecomfe/esui">ESUI</a></dt>
  248. <dd>一套功能完善,并具有强大扩展机制的 UI 组件库。基于模板、声明式地编程方式让视图更具表达能力。</dd>
  249. <dt><a target="_blank" href="http://ecomfe.github.io/est/">EST</a></dt>
  250. <dd>基于 Less 的样式工具库,提供了一系列方便快捷的 mixin,只在调用时才输出代码。</dd>
  251. <dt><a target="_blank" href="https://github.com/ecomfe/saber">Saber</a></dt>
  252. <dd>提供了 JavaScript 模块、CSS 样式库与开发平台的完整前端解决方案。擅长移动端 SPA 项目、轻应用。</dd>
  253. <dt><a target="_blank" href="https://github.com/ecomfe/rider">Rider</a></dt>
  254. <dd>专为移动端设计的 Mixin 风格样式工具库。在其基础上创建了 Rider UI,一个灵活的 UI 样式库。</dd>
  255. <dt><a target="_blank" href="http://efe.baidu.com/">......</a></dt>
  256. </dl>
  257. </div>
  258. </div><!-- /.container -->
  259. <!-- FOOTER -->
  260. <footer id="footer"></footer>
  261. <!-- Bootstrap core JavaScript
  262. ================================================== -->
  263. <!-- Placed at the end of the document so the pages load faster -->
  264. <script src="./doc/asset/js/jquery.min.js"></script>
  265. <script type="text/javascript" src="./doc/asset/js/echartsHome.js"></script>
  266. <script src="./doc/asset/js/bootstrap.min.js"></script>
  267. </body>
  268. </html>