2f6c2e2707d1cbbc17e1bbe533804e8493140c7d.svn-base 20 KB

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