Skip to content

Commit

Permalink
主页内容更新
Browse files Browse the repository at this point in the history
  • Loading branch information
@kener
kener committed Jun 28, 2014
1 parent 9116e02 commit 971b90d
Show file tree
Hide file tree
Showing 5 changed files with 111 additions and 99 deletions.
62 changes: 31 additions & 31 deletions doc/about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,56 +54,56 @@
<div class="row">
<h2>缘起</h2>
<img class="pull-right" src="asset/img/about/zrender1.png" style="margin-left:20px;">
<p>&#12288;&#12288;ECharts，缩写来自Enterprise Charts，商业级数据图表，它最初是为了满足<abbr title="百度">公司</abbr>商业体系里各种业体系里各种业务系统（如凤巢、广告管家等等）的报表需求。以前这些系统的各种可视化需求我们都是使用flash去实现的，百度分工很细，有专门的flash组同学去做这个事情，这就不可避免多了一个沟通环节，作为前端工程师无法单独掌控，不管是数据接口的设计，个性化的需求都得沟通商定。而且一个系统内会有很多个flash在不同场景下出现，他们并没有实现通用。加上乔帮主不让i系列上运行flash以及html5开始火热，我们需要寻求一个解决方案。于是在2012年初，当时还是凤巢前端技术负责人的Kener-林峰在凤巢数据平台项目中尝试使用Canvas技术去做图表，他写了一个全新的轻量级Canvas类库ZRender，那可以说是ECharts的原型，虽然跟现在已经相去十万八千里了。</p>
<p>&#12288;&#12288;百度前端领袖人物Erik回归后组建了商业前端的通用技术组，在前面提到的背景下，数据可视化成为了通用技术里一个重要的研究方向，林峰也就这样顺理成章的从凤巢技术负责人的角色转到现在的角色，百度商业前端数据可视化团队负责人。痴狂于web3d的技术天才沈毅，沉迷图形图像的杨骥，有SVG/GUI实战经验的宿爽，对颜色如数家珍的陈怀木等等来自一线的工程师加入组建了可视化团队。</p>
<p>&#12288;&#12288;ECharts，缩写来自Enterprise Charts，商业级数据图表，它最初是为了满足<abbr title="百度">公司</abbr>商业体系里各种业体系里各种业务系统（如凤巢、广告管家等等）的报表需求。以前这些系统的各种图表需求我们都是使用flash去实现的。百度分工很细，有专门的flash组同学去做这个事情，这就不可避免多了一个沟通环节，作为前端工程师无法独立掌控，不管是数据接口的设计，个性化的需求都得沟通商定。而且一个系统内会有很多个flash在不同场景下出现，他们并没有实现通用。加上乔帮主不让i系列上运行flash以及html5的火热，我们需要寻求一个解决方案。于是在2012年初，当时还是凤巢前端技术负责人的<a href="http://weibo.com/kenerlinfeng" target="_blank">Kener-林峰</a>在凤巢数据平台项目中尝试使用Canvas去做图表，他写了一个全新的轻量级Canvas类库ZRender，那可以说是ECharts的原型，虽然跟现在已经相去十万八千里了。</p>
<p>&#12288;&#12288;百度前端领袖人物<a href="http://weibo.com/errorrik" target="_blank">Erik</a>回归后组建起了百度商业前端通用技术组，在前面提到的背景下加上前端团队的经理<a href="http://weibo.com/forain" target="_blank">祖明</a>的强力支持，数据可视化成为了通用技术里一个重要的研究方向， 林峰也就这样顺理成章的从凤巢技术负责人转到现在的角色，百度商业前端数据可视化团队负责人。痴狂于web3d的技术天才<a href="http://weibo.com/pissang" target="_blank">沈毅</a>，沉迷图形图像的<a href="http://weibo.com/wind108369" target="_blank">杨骥</a>，有SVG/GUI实战经验的<a href="http://weibo.com/u/2113446991" target="_blank">宿爽</a>，对颜色如数家珍的陈怀木等等来自一线的工程师加入组建起了可视化团队。</p>

<p>&#12288;&#12288;准确来说ECharts来自ZRender，那时的ZRender是包含图表功能的，甚至拖拽重计算已经在那个时候被实现了，但各种图表数据逻辑与图形渲染耦合，非模块化，随心所欲的特殊定制，我们意识到这并不是一个优雅的设计。ZRender做了第一次大规模的重构，抽离了一切图表相关功能，纯粹的作为底层Canvas类库使用。</p>
<p>&#12288;&#12288;准确来说ECharts来自ZRender，那时的ZRender是包含图表功能的，甚至拖拽重计算已经在那个时候被实现了，但各种图表数据逻辑与图形渲染耦合，非模块化，Dome时随心所欲的特殊定制，我们意识到这是一个糟糕的设计。ZRender做了第一次大规模的重构，抽离了一切图表相关功能，纯粹的作为底层Canvas类库使用。</p>
<img class="pull-left" src="asset/img/about/echarts1.png" style="margin-right:10px;">
<p>&#12288;&#12288;而被抽离的图表逻辑构建成为ECharts 0.1版本，但基本属于Demo状态，因为接口不规范，个性化能力和通用性都太差了。Erik和林峰，以及3位来自Flash组的资深工程师（百度商业系统中多年来所做的各种flash图表基本出自他们或者是他们所带领的团队），花了近2个月时间先后开了6次会议终于制定并发布了百度图表库标准1.0版本。这份标准是在几乎没考虑实现成本的情况下制定的，追求设计的合理、高度个性化的扩展能力，可想而知，这是给团队挖了一个很深很深的坑，在紧接着的近10个月时间里ECharts团队就是看着文档一步一步从这个坑里爬出来。</p>
<p>&#12288;&#12288;幸运的是我们真爬出来了，2013年6月30，ECharts发布了1.0版本，这份标准完全成为了ECharts 1.0的API文档。回过头看这段历程，我们衷心的感谢制定这份标准的5位工程师（林峰、赵庶、Erik、刘阳、杨冬），在我们看来接口设计的合理比起实现成本重要得多。</p>
<p>&#12288;&#12288;而被抽离的图表逻辑构建成为ECharts 0.1版本，但基本仍旧属于Demo状态，因为接口不规范，个性化能力和通用性都太差了。Erik和林峰，以及3位来自Flash组的资深工程师（百度商业系统中多年来所做的各种flash图表基本出自他们或者是他们所带领的团队），花了近2个月时间先后开了6次会议终于制定并发布了百度图表库标准1.0版本。这份标准是在几乎没考虑实现成本的情况下制定的，追求设计的合理、高度个性化的扩展能力，可想而知，这是给团队挖了一个很深很深的坑，在紧接着的近10个月时间里ECharts团队就是看着文档一步一步从这个坑里爬出来。</p>
<p>&#12288;&#12288;幸运的是我们真爬出来了，2013年6月30，ECharts发布了1.0版本，这份标准完全成为了ECharts 1.0的API文档，而且我们还加入了更多的数据交互能力。虽然这份标准目前已经成为了ECharts文档的子集了，但它的重要性不容置疑，回过头看这段历程，我们衷心的感谢制定这份标准的5位工程师（林峰、赵庶、Erik、刘阳、杨冬），在我们看来接口设计的合理比起实现成本重要得多。</p>
</div>

<div class="row featurette">
<h2>发展</h2>
<p>&#12288;&#12288;ECharts缘起公司自身的业务需求，但开源使得它得以发展，虽然业界已经有多如牛毛的JS图表库，但ECharts带着颠覆性的功能设计和技术特征，发布后得到了业界高度关注和好评，迅速成为国内数据可视化领域的“后起之秀”，先后在CSDN、ITEye、InfoQ、中国统计网、统计之都等主流媒体上有专题报道，被开源中国收录后即被列为精选做了长达一周的首页首位推荐，收藏数超过了1000，github上发布12个月后star数超过了1900，已经成为了国内同类别项目中关注度最高的开源项目。被百度外100多家企业应用在新闻传媒、证券金融、电子商务、旅游酒店、天气地理、视频游戏、电力等众多领域。</p>
<p>&#12288;&#12288;令我们意外的是，ECharts仅发布半年入选成为了“2013年国产开源软件10大年度热门项目”，同时在“2013年度最新的20大热门开源软件”中排名第一。除此之外，ECharts还得到了跨领域以及国外技术团体关注，如在R领域就同时出现国内外多个版本的扩展（其一就是R领域里大名鼎鼎的Ramnath Vaidyanathan，ECharts已被包含进rCharts的扩展中），听说还有两家亚太地区金融咨询企业正在研发基于ECharts的BI类产品，甚至还有人拿着ECharts跑到纽约市长数据分析部门做应用推广。这都是我们的意外收获，感谢大家的支持。</p>
<p>&#12288;&#12288;ECharts缘起公司自身的业务需求，但开源使得它得以发展，虽然业界已经有多如牛毛的JS图表库，但ECharts带着颠覆性的功能设计和技术特征，发布后得到了业界高度关注和好评，迅速成为国内数据可视化领域的“<a href="http://www.itongji.cn/article/0P525392013.html" target="_blank">后起之秀</a>”，先后在CSDN、ITEye、InfoQ、中国统计网、统计之都等主流技术媒体上有专题报道，被开源中国收录后即被列为精选做了长达一周的首页首位推荐，收藏数超过了1000，github上发布12个月后star数超过了1900，已经成为了国内同类别项目中关注度最高的开源项目。被百度外100多家企业应用在新闻传媒、证券金融、电子商务、旅游酒店、天气地理、视频游戏、电力等众多领域。</p>
<p>&#12288;&#12288;令我们意外的是，ECharts仅发布半年入选成为了“<a href="http://www.oschina.net/news/47438/2013-top-10-hot-projects-in-china" target="_blank">2013年国产开源软件10大年度热门项目</a>”，同时在“<a href="http://www.oschina.net/news/47468/2013-top-20-newest-opensource-projects" target="_blank">2013年度最新的20大热门开源软件</a>”中排名第一。除此之外，ECharts还得到了跨领域以及国外技术团体关注，如在R领域就同时出现国内外多个版本的扩展，听说还有两家亚太地区金融咨询企业正在研发基于ECharts的BI类产品，甚至还有人拿着ECharts跑到纽约市长数据分析部门做应用推广。这都是我们的意外收获，感谢大家的支持。</p>
</div>

<div class="row featurette team">
<h2>ECharts背后的那些人</h2>
<p>ECharts的进步离不开其背后的那些人的卓越贡献，他们有着不同的技能，来自不同的岗位甚至不同的公司。</p>
<p>ECharts的进步离不开其背后那些人的卓越贡献，他们有着不同的技能，来自不同的岗位甚至不同的公司。</p>

<!-- 研发 -->
<h2>研发</h2>
<div class="row">
<div class="col-md-2 text-center">
<img class="img-circle" src="asset/img/about/linfeng.jpg">
<h2><a href="www" target="_blank">林峰</a></h2>
<h2><a href="http://weibo.com/kenerlinfeng" target="_blank">林峰</a></h2>
<p>百度资深前端研发工程师</p>
</div>
<div class="col-md-2 text-center">
<img class="img-circle" src="asset/img/about/shenyi.jpg">
<h2><a href="www" target="_blank">沈毅</a></h2>
<p>百度高级前端研发工程师</p>
<h2><a href="http://weibo.com/pissang" target="_blank">沈毅</a></h2>
<p>百度前端研发工程师</p>
</div>
<div class="col-md-2 text-center">
<img class="img-circle" src="asset/img/about/erik.jpg">
<h2><a href="www" target="_blank">董睿</a></h2>
<h2><a href="http://weibo.com/errorrik" target="_blank">董睿</a></h2>
<p>百度资深前端研发工程师</p>
</div>
<div class="col-md-2 text-center">
<img class="img-circle" src="asset/img/about/sushuang.jpg">
<h2><a href="www" target="_blank">宿爽</a></h2>
<p>百度高级前端研发工程师</p>
<h2><a href="http://weibo.com/u/2113446991" target="_blank">宿爽</a></h2>
<p>百度前端研发工程师</p>
</div>
<div class="col-md-2 text-center">
<img class="img-circle" src="asset/img/about/yangji.jpg">
<h2><a href="www" target="_blank">杨骥</a></h2>
<p>百度高级前端研发工程师</p>
<h2><a href="http://weibo.com/wind108369" target="_blank">杨骥</a></h2>
<p>百度前端研发工程师</p>
</div>
<div class="col-md-2 text-center">
<img class="img-circle" src="asset/img/about/loutongbing.jpg">
<h2><a href="www" target="_blank">娄同兵</a></h2>
<h2><a href="http://weibo.com/loutongbing" target="_blank">娄同兵</a></h2>
<p>百度前端研发工程师</p>
</div>
</div>
Expand All @@ -113,22 +113,22 @@ <h2>产品|设计</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/ShiMiTu2007" target="_blank">祖明</a></h2>
<p>百度复合搜索部前端团队经理</p>
<h2><a href="http://weibo.com/forain" target="_blank">祖明</a></h2>
<p>百度复合搜索部<br/>前端团队经理</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/ShiMiTu2007" target="_blank">黄悦</a></h2>
<h2><a href="http://weibo.com/u/1823030471" target="_blank">黄悦</a></h2>
<p>百度交互设计师</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/ShiMiTu2007" target="_blank">王俊婷</a></h2>
<h2><a href="http://weibo.com/u/1237163505" target="_blank">王俊婷</a></h2>
<p>百度交互设计师</p>
</div>
<div class="col-md-2 text-center">
<img class="img-circle" src="asset/img/about/zhangyanru.jpg">
<h2><a href="http://weibo.com/ShiMiTu2007" target="_blank">张彦如</a></h2>
<h2><a href="#" target="_blank">张彦如</a></h2>
<p>百度交互设计师</p>
</div>
<!--div class="col-md-2 text-center">
Expand All @@ -143,17 +143,17 @@ <h2>领域专家顾问</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/ShiMiTu2007" target="_blank">陈为</a></h2>
<h2><a href="http://weibo.com/shearwarp" target="_blank">陈为</a></h2>
<p>浙江大学教授</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/ShiMiTu2007" target="_blank">黄志敏</a></h2>
<h2><a href="http://weibo.com/u/2006785117" target="_blank">黄志敏</a></h2>
<p>财新传媒CTO</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/ShiMiTu2007" target="_blank">李湛</a></h2>
<h2><a href="http://weibo.com/u/2042635201" target="_blank">李湛</a></h2>
<p>百度复合搜索部总监</p>
</div>
</div>
Expand All @@ -164,27 +164,27 @@ <h2>资深玩家</h2>
<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">周扬</a></h2>
<p>AdMaster高级数据研究员<br/>recharts作者<br/>（R语言下的ECharts包）</p>
<p>AdMaster高级数据研究员<br/><abbr title="R语言下的ECharts包">recharts</abbr>作者</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">魏太云</a></h2>
<p>统计之都秘书长<br/>recharts作者<br/>（R语言下的ECharts包）</p>
<p>统计之都理事会主席<br/><abbr title="R语言下的ECharts包">recharts</abbr>作者</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">姚飞飞</a></h2>
<p>百度高级前端研发工程师</p>
<p>百度前端研发工程师</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/" target="_blank">邓红启</a></h2>
<p>百度高级前端研发工程师</p>
<p>百度前端研发工程师</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/ShiMiTu2007" target="_blank">谈和</a></h2>
<p>中国传媒大学传播研究方法硕士研究生<br/>传媒大学数据可视化小组</p>
<h2><a href="http://weibo.com/fengmengxia" target="_blank">谈和</a></h2>
<p>中国传媒大学硕士研究生<br/>传媒大学数据可视化小组</p>
</div>
</div>
</div>
Expand Down
79 changes: 31 additions & 48 deletions doc/asset/css/echartsHome.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,25 @@ body p {

blockquote {
border-width:0;
margin-bottom:10px;
}
.marketing .feature .col-lg-4 img {
margin-bottom: 10px;
}
.marketing .thx .col-lg-4 {
margin-bottom: 0;
text-align:left;
}
.thx blockquote p {
text-align:left;
margin-bottom:0;
}
.thx blockquote small {
text-align:right;
}
.thx div {
padding:0;
}
.user img {
height:50px;
padding: 5px;
Expand Down Expand Up @@ -78,7 +93,9 @@ hr {
.team .row {
margin-bottom: 40px;
}

.team i {
font-size:12px;
}
#footer {
clear:both;
background-color: rgb(6, 19, 37);
Expand All @@ -99,6 +116,18 @@ hr {
#footer i {
color: rgb(190, 205, 223);
}
#footer div.flogo {
position:relative;
}
#footer div.flogo img {
width:80%;
position:absolute;
left:30px;
top:-120px;
}
#footer div.flogo a:hover img {
top:-130px;
}
.dropdown i {
color:#555;
}
Expand All @@ -109,52 +138,6 @@ hr {
padding: 3px 10px;
}

/*
*/

/* Featurettes
------------------------- */
/*
a.accordion-toggle:hover {
text-decoration:none;
font-weight:bolder;
}
ul.nav-list {
overflow-y: auto;
}
.nav-list i.icon-plus, .nav-list i.icon-minus {
margin: 6px 0 0 -15px;
float: left;
cursor : pointer;
opacity: .3;
filter:alpha(opacity=30);
}
i.icon-chevron-right{
float: right;
margin-top: 2px;
margin-right: -6px;
opacity: .25;
filter:alpha(opacity=25);
}
.page-header {
padding-top:35px;
margin:0;
border-width:0;
}
.page-header h1 {
background-color:#eee;
padding:15px;
text-align:right;
}
div.section {
padding-top:30px;
}
tr.head {
background-color:#f5f5f5
}

/*example*/
.CodeMirror pre{color: #f8f8f2;}
Expand Down Expand Up @@ -344,7 +327,7 @@ table.full {width:100%;}
.ec-icon {
display: inline-block;
width: 35px;
height: 26px;
height: 25px;
*margin-right: .3em;
line-height: 25px;
vertical-align: middle;
Expand Down
Loading

0 comments on commit 971b90d

Please sign in to comment.