| <!DOCTYPE html> |
| <html lang="zh-cn"> |
| <head> |
| <meta charset="utf-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <meta name="robots" content="noindex, nofollow"> |
| <title>ECharts2 · About</title> |
| |
| <link rel="shortcut icon" href="./asset/ico/favicon.png"> |
| |
| <link href="./asset/css/font-awesome.min.css" rel="stylesheet"> |
| <link href="./asset/css/bootstrap.css" rel="stylesheet"> |
| <link href="./asset/css/carousel.css" rel="stylesheet"> |
| <link href="./asset/css/echartsHome.css" rel="stylesheet"> |
| <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> |
| <!--[if lt IE 9]> |
| <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> |
| <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> |
| <![endif]--> |
| <style type="text/css"> |
| /* Main marketing message and sign up button */ |
| .img-circle { |
| border: 1px solid rgba(0, 0, 0, 0.2); |
| padding: 4px; |
| margin: 5px; |
| } |
| .container p { |
| margin-top:30px; |
| } |
| h2 a { |
| font-size:22px; |
| } |
| </style> |
| </head> |
| |
| <body> |
| <!-- Fixed navbar --> |
| <div class="navbar navbar-default navbar-fixed-top" role="navigation" id="head"></div> |
| |
| <div class="container"> |
| <div class="row"> |
| <h2>ORIGIN</h2> |
| <img class="pull-right" src="asset/img/about/zrender1.png" style="margin-left:20px;"> |
| <p>ECharts (a contraction of Enterprise Charts) is a commercial charting solution originally intended to address the report need of the <abbr title="Baidu">Company's</abbr> various business systems, such as Baidu Promotion (凤巢), Advertising Manager (广告管家). Previously we used Flash to fulfill those needs, but the problem is, due to Baidu's highly clear-cut division of labor, there is a special team in charge of Flash. As a result, everything – from the design of data interface to personalized needs - has to be negotiated and agreed upon, leaving little room for front-end engineers to control completely. Moreover, there is no Flash common to all the scenes in a system. Worse still, Steve Jobs, the co-founder and then CEO of Apple Inc., insisted that Apple wouldn't allow Flash on the iPhone, iPod touch and iPad. For all these reasons, and given the soaring popularity of html5, we decided to try something else. Therefore in early 2012 <a href="http://weibo.com/kenerlinfeng" target="_blank">Lin Feng (Kener)</a>, the then front-end technical director of Baidu Promotion, tried to make charts via Canvas in the Data Platform Project of Baidu Promotion. He wrote a whole new lightweight Canvas library ZRender, which is actually the prototype of ECharts, albeit miles from the one in front of you now.</p> |
| <p><a href="http://weibo.com/errorrik" target="_blank">Erik</a>, Baidu's senior front-end developer, built the team of Baidu business front-end general technology right after his return. Against the above backdrop, and with the firm support of the front-end team manager <a href="http://weibo.com/forain" target="_blank">Zu Ming</a>, data visualization became an important field of general technology studies. So it's only natural that Lin Feng switched his role and began to head the Baidu business front-end data visualization team, which comprises the foremost front-line software engineers including <a href="http://weibo.com/pissang" target="_blank">Shen Yi</a> (tech genius obsessed with web3d), <a href="http://weibo.com/wind108369" target="_blank">Yang Ji</a> (graphic maniac), <a href="http://weibo.com/u/2113446991" target="_blank">Su Shuang </a>(who has hands-on experience of SVG / GUI) and Chen Huaimu (who knows color inside out).</p> |
| |
| <p>As mentioned above, ECharts is based on ZRender. Back then ZRender had charting features, and we already managed to add the Drag-Recalculate option. Nevertheless, the coupling of various graphic data logic and image rendering, non-modularity, and the arbitrary customized demos made us realize that it was by no means a decent design. Therefore, for the first time we made a large-scale ZRender reconstruction, cutting out all its charting features and making it a pure Canvas library under the hood. </p> |
| <img class="pull-left" src="asset/img/about/echarts1.png" style="margin-right:10px;"> |
| <p>The chart logic from ZRender was then made into the fundamental framework for ECharts Version 0.1, which, to be honest, was still a demo, for the interface was not standardized, and both customization and universality were terrible. Erik, Lin Feng, and three senior engineers from the Flash team (FYI, it was they or their team who made almost all the Flash charts in the Baidu business system over the years) opened six meetings in nearly two months before the final approval and release of ECharts Standard Version 1.0. The standard was defined in pursuit of rational design and high customizability, regardless of implementation costs. So it was like the team was digging itself a bottomless pit. For the ensuing ten months, the team found itself climbing out of the pit step by step.</p> |
| <p>Lucky for us, we finally made it. On June 30, 2013, ECharts Version 1.0 was launched. And the standard became the API reference of ECharts 1.0 when richer interactivity were added. Its importance is unquestionable despite the fact that it is now only a part of the ECharts documentation. Today when we look back, we sincerely thank the five extraordinary engineers - Lin Feng, Zhao Shu, Erik, Liu Yang, Yang Dong - for setting the spectacular standard. They convinced us that compared with implementation costs, a reasonable interface design is far more important.</p> |
| </div> |
| |
| <div class="row featurette"> |
| <h2>DEVELOPMENT</h2> |
| <p>It all started as a response to Baidu's own business needs, yet the real opportunity for the way ahead lies in open source. Though there has been innumerable JS charting libraries in China, ECharts, with its revolutionary new functionality and technology, has taken the industry by storm right after its release. Commonly lauded as a "<a href="http://www.itongji.cn/article/0P525392013.html" target="_blank">rising star</a>" of China's data visualization, it was featured by mainstream technical media such as CSDN, ITEye, InfoQ, iTongji as well as COS. In particular, OSChina did a week-long ECharts promotion on its home page, with the post being bookmarked for over 1,000 times. What's more, just 18 months after its release on GitHub, ECharts was starred for more than 5,000 times, which means that it has become the most-watched Chinese open source project around the globe. ECharts is also the first Chinese project which selected into <a href="https://github.com/showcases/data-visualization" target="_blank">Github Explorer Data Visualization</a>. Today, hundreds of companies - ranging over a variety of fields including media, finance, e-commerce, tourism, hotels, weather, geography, video games, and electric power - trust ECharts Solution when it comes to enterprise-grade charting.</p> |
| <p>We are so very flattered that, just 6 months after its release, ECharts made it to "<a href="http://www.oschina.net/news/47438/2013-top-10-hot-projects-in-china" target="_blank">The Ten Hottest Domestic Open Source Projects of the Year</a>" and took the lead in "<a href="http://www.oschina.net/news/47468/2013-top-20-newest-opensource-projects" target="_blank">The Twenty Hottest New Open Source Software of the Year</a>". In addition, we never dreamed that ECharts would get so many attentions from other domains or countries: expansions of multiple domestic and international versions appeared on RtypeL; it's said that there are two financial consulting firms in the Asia-Pacific region developing ECharts-based BI products, and that someone even pushed ECharts further into the Mayor's Office of Data Analytics, City of New York. We are now full of unexpected delight and we'd like to thank every single ECharts enthusiast for his/her continuing support. </p> |
| <div id="main" style="height:300px;"></div> |
| </div> |
| |
| <div class="row featurette team"> |
| <h2>TEAM</h2> |
| <p>The ECharts team is a bunch of distinct, diligent, dynamic people - who have different skills and hail from all corners of companies - on an extraordinary mission to make your data sing. Come check out the faces that make up Team ECharts.</p> |
| |
| <h2>Research & Development</h2> |
| <div class="row"> |
| <div class="col-md-2 text-center"> |
| <img class="img-circle" src="asset/img/about/linfeng.jpg"> |
| <h2><a href="http://weibo.com/kenerlinfeng" target="_blank">Lin Feng</a></h2> |
| <p>Senior Front-End Engineer at Baidu</p> |
| </div> |
| <div class="col-md-2 text-center"> |
| <img class="img-circle" src="asset/img/about/shenyi.jpg"> |
| <h2><a href="http://weibo.com/pissang" target="_blank">Shen Yi</a></h2> |
| <p>Front-End Engineer at Baidu</p> |
| </div> |
| <div class="col-md-2 text-center"> |
| <img class="img-circle" src="asset/img/about/erik.jpg"> |
| <h2><a href="http://weibo.com/errorrik" target="_blank">Dong Rui</a></h2> |
| <p>Senior Front-End Engineer at Baidu</p> |
| </div> |
| <div class="col-md-2 text-center"> |
| <img class="img-circle" src="asset/img/about/sushuang.jpg"> |
| <h2><a href="http://weibo.com/u/2113446991" target="_blank">Su Shuang</a></h2> |
| <p>Front-End Engineer at Baidu</p> |
| </div> |
| <div class="col-md-2 text-center"> |
| <img class="img-circle" src="asset/img/about/denghongqi.jpg"> |
| <h2><a href="http://weibo.com/u/2810393271" target="_blank">Deng Hongqi</a></h2> |
| <p>Front-End Engineer at Baidu</p> |
| </div> |
| <div class="col-md-2 text-center"> |
| <img class="img-circle" src="asset/img/about/yangji.jpg"> |
| <h2><a href="http://weibo.com/wind108369" target="_blank">Yang Ji</a></h2> |
| <p>Front-End Engineer at Baidu</p> |
| </div> |
| <div class="col-md-2 text-center"> |
| <img class="img-circle" src="asset/img/about/loutongbing.jpg"> |
| <h2><a href="http://weibo.com/loutongbing" target="_blank">Lou Tongbing</a></h2> |
| <p>Front-End Engineer at Baidu</p> |
| </div> |
| </div> |
| |
| <h2>Product | Design</h2> |
| <div class="row"> |
| <div class="col-md-2 text-center"> |
| <img class="img-circle" src="asset/img/about/zuming.jpg"> |
| <h2><a href="http://weibo.com/forain" target="_blank">Zu Ming</a></h2> |
| <p>Baidu business Front-End Team Manager</p> |
| </div> |
| <div class="col-md-2 text-center"> |
| <img class="img-circle" src="asset/img/about/huangyue.jpg"> |
| <h2><a href="http://weibo.com/u/1823030471" target="_blank">Huang Yue</a></h2> |
| <p>Interaction Designer at Baidu</p> |
| </div> |
| <div class="col-md-2 text-center"> |
| <img class="img-circle" src="asset/img/about/wangjunting.jpg"> |
| <h2><a href="http://weibo.com/u/1237163505" target="_blank">Wang Junting</a></h2> |
| <p>Interaction Designer at Baidu</p> |
| </div> |
| <div class="col-md-2 text-center"> |
| <img class="img-circle" src="asset/img/about/huyao.jpg"> |
| <h2><a href="http://weibo.com/p/1005051742233685" target="_blank">Hu Yao</a></h2> |
| <p>Front-End Engineer at Baidu</p> |
| </div> |
| <!--div class="col-md-2 text-center"> |
| <img class="img-circle" src="asset/img/about/zhangyanru.jpg"> |
| <h2><a href="#" target="_blank">Zhang Yanru</a></h2> |
| <p>Interaction Designer at Baidu</p> |
| </div> |
| <div class="col-md-2 text-center"> |
| <img class="img-circle" src="asset/img/about/yandong.jpg"> |
| <h2><a href="http://weibo.com/ShiMiTu2007" target="_blank">颜东</a></h2> |
| <p>视觉中国设计总监</p> |
| </div--> |
| </div> |
| |
| <h2>Expert Advisors</h2> |
| <div class="row"> |
| <div class="col-md-2 text-center"> |
| <img class="img-circle" src="asset/img/about/chenwei.jpg"> |
| <h2><a href="http://weibo.com/shearwarp" target="_blank">Chen Wei</a></h2> |
| <p>Professor at Zhejiang University</p> |
| </div> |
| <div class="col-md-2 text-center"> |
| <img class="img-circle" src="asset/img/about/huangzhimin.jpg"> |
| <h2><a href="http://weibo.com/u/2006785117" target="_blank">Huang Zhimin</a></h2> |
| <p>CTO of Caixin Media</p> |
| </div> |
| <div class="col-md-2 text-center"> |
| <img class="img-circle" src="asset/img/about/lizhan.jpg"> |
| <h2><a href="http://weibo.com/u/2042635201" target="_blank">Li Zhan</a></h2> |
| <p>Director of Baidu <abbr title="Composite Search">CS</abbr> Department</p> |
| </div> |
| <div class="col-md-2 text-center"> |
| <img class="img-circle" src="asset/img/about/shenhao.jpg"> |
| <h2><a href="http://weibo.com/shenhaolaoshi" target="_blank">Shen Hao</a></h2> |
| <p>Professor at <abbr title="Communication University of China">CUC</abbr></p> |
| </div> |
| </div> |
| |
| <h2>Avid Aficionados</h2> |
| <div class="row" style="margin-bottom:0;"> |
| <div class="col-md-2 text-center"> |
| <img class="img-circle" src="asset/img/about/zhouyang.jpg"> |
| <h2><a href="http://weibo.com/zhouyummy" target="_blank">Zhou Yang</a></h2> |
| <p>Data Analyst<br/><abbr title="ECharts package in R">recharts</abbr> author</p> |
| </div> |
| <div class="col-md-2 text-center"> |
| <img class="img-circle" src="asset/img/about/weitaiyun.jpg"> |
| <h2><a href="http://weibo.com/taiyun" target="_blank">Wei Taiyun</a></h2> |
| <p>Secretary-General of Capital of Statistics<br/><abbr title="ECharts package in R">recharts</abbr> author</p> |
| </div> |
| <div class="col-md-2 text-center"> |
| <img class="img-circle" src="asset/img/about/yaofeifei.jpg"> |
| <h2><a href="http://weibo.com/645008221" target="_blank">Yao Feifei</a></h2> |
| <p>Front-End Engineer at Baidu</p> |
| </div> |
| <div class="col-md-2 text-center"> |
| <img class="img-circle" src="asset/img/about/tanhe.jpg"> |
| <h2><a href="http://weibo.com/fengmengxia" target="_blank">Tan He</a></h2> |
| <p>Master of <abbr title="Communication University of China">CUC</abbr><br/>Data Visualization Team at the <abbr title="Communication University of China">CUC</abbr></p> |
| </div> |
| <div class="col-md-2 text-center"> |
| <img class="img-circle" src="asset/img/about/xieshiwei.jpg"> |
| <h2><a href="https://github.com/i6ma" target="_blank">Xie Shiwei</a></h2> |
| <p>Front-End Engineer at Baidu</p> |
| </div> |
| <div class="col-md-2 text-center"> |
| <img class="img-circle" src="asset/img/about/jaroslav.benc.jpg"> |
| <h2><a href="https://twitter.com/DatamaticIO" target="_blank">Jaroslav Benc</a></h2> |
| <p>R&D Software Engineer at Aviarc New Zealand</p> |
| </div> |
| </div> |
| </div> |
| <!-- Jumbotron --> |
| <div class="jumbotron"> |
| <h1>JOIN US!</h1> |
| <p class="lead">We know you are passionate and adventurous...so don't hesitate, do it now!</p> |
| <a class="btn btn-large btn-warning" href="mailto:echarts(a)baidu.com"><i class="glyphicon glyphicon-envelope"></i> Contact Us »</a> |
| </div> |
| </div> <!-- /container --> |
| |
| <footer id="footer"></footer> |
| <!-- Le javascript |
| ================================================== --> |
| <!-- Placed at the end of the document so the pages load faster --> |
| <script src="./asset/js/jquery.min.js"></script> |
| <script type="text/javascript" src="./asset/js/echartsHome.js"></script> |
| <script src="./asset/js/bootstrap.min.js"></script> |
| <script src="example/www/js/echarts.js"></script> |
| <script type="text/javascript"> |
| require.config({ |
| paths: { |
| echarts: 'example/www/js' |
| } |
| }); |
| require( |
| [ |
| 'echarts', |
| 'example/theme/infographic', |
| 'echarts/chart/line' |
| ], |
| function(ec, theme) { |
| myChart = ec.init(document.getElementById('main'), theme); |
| myChart.setOption({ |
| title : { |
| text: 'Github Stars', |
| x:'center' |
| }, |
| tooltip : { |
| trigger: 'axis', |
| axisPointer:{type:'none'}, |
| showDelay: 0 |
| }, |
| grid:{x:45,x2:20,y:40,y2:50}, |
| xAxis : [ |
| { |
| type : 'category', |
| boundaryGap : false, |
| axisLabel: { |
| interval:0, |
| formatter:function(v){ |
| switch(v) { |
| case '2013年6月': |
| return '6\n2013'; |
| case '2014年1月': |
| return '1\n2014'; |
| case '2015年1月': |
| return '1\n2015'; |
| default: |
| return v.substr(5).replace('月',''); |
| } |
| } |
| }, |
| data : [ |
| '2013年6月','2013年7月','2013年8月','2013年9月','2013年10月', |
| '2013年11月','2013年12月','2014年1月','2014年2月','2014年3月', |
| '2014年4月','2014年5月','2014年6月','2014年7月','2014年8月', |
| '2014年9月','2014年10月','2014年11月','2014年12月','2015年1月', |
| '2015年3月', '2015年4月', '2015年5月', '2015年6月' |
| ] |
| } |
| ], |
| yAxis : [ |
| { |
| type: 'value', |
| splitNumber: 6, |
| min: 0, |
| max: 7200, |
| axisLabel: { |
| formatter: function (value) { |
| return Math.round(value - 0) |
| } |
| } |
| } |
| ], |
| series : [{ |
| name:'echarts', |
| type:'line', |
| smooth: true, |
| itemStyle:{normal:{color:'#E87C25'}}, |
| data:[ |
| {value:0,itemStyle:{normal:{label:{show:true,formatter:'1.0.0'}}}}, |
| {value:90,itemStyle:{normal:{label:{show:true,formatter:'1.1.0'}}}}, |
| {value:316,itemStyle:{normal:{label:{show:true,formatter:'1.1.1'}}}}, |
| {value:480,itemStyle:{normal:{label:{show:true,formatter:'1.2.0'}}}}, |
| {value:620,itemStyle:{normal:{label:{show:true,formatter:'1.2.1'}}}}, |
| {value:743,itemStyle:{normal:{label:{show:true,formatter:'1.3.0'}}}}, |
| {value:904,itemStyle:{normal:{label:{show:true,formatter:'1.3.5'}}}}, |
| {value:1090,itemStyle:{normal:{label:{show:true,formatter:'1.3.6'}}}}, |
| {value:1262,itemStyle:{normal:{label:{show:true,formatter:'1.3.7'}}}}, |
| {value:1368,itemStyle:{normal:{label:{show:true,formatter:'1.3.8'}}}}, |
| {value:1610,itemStyle:{normal:{label:{show:true,formatter:'1.4.0'}}}}, |
| {value:1767,itemStyle:{normal:{label:{show:true,formatter:'1.4.1'}}}}, |
| {value:1928,itemStyle:{normal:{label:{show:true,formatter:'2.0.0'}}}}, |
| {value:2390,itemStyle:{normal:{label:{show:true,formatter:'2.0.1'}}}}, |
| {value:2610,itemStyle:{normal:{label:{show:true,formatter:'2.0.2'}}}}, |
| {value:2740,itemStyle:{normal:{label:{show:true,formatter:'2.0.3'}}}}, |
| {value:2930,itemStyle:{normal:{label:{show:true,formatter:'2.0.4'}}}}, |
| {value:3210,itemStyle:{normal:{label:{show:true,formatter:'2.1.8'}}}}, |
| {value:3610,itemStyle:{normal:{label:{show:true,formatter:'2.1.9'}}}}, |
| {value:5600,itemStyle:{normal:{label:{show:true,formatter:'2.2.0'}}}}, |
| {value:6200,itemStyle:{normal:{label:{show:true,formatter:'2.2.1'}}}}, |
| {value:6600,itemStyle:{normal:{label:{show:true,formatter:'2.2.2'}}}}, |
| {value:6949,itemStyle:{normal:{label:{show:true,formatter:'2.2.3'}}}}, |
| {value:7200,itemStyle:{normal:{label:{show:true,formatter:'2.2.5'}}}} |
| ] |
| }] |
| }); |
| window.onresize = myChart.resize; |
| } |
| ); |
| |
| </script> |
| </body> |
| </html> |
