317 lines
20 KiB
HTML
317 lines
20 KiB
HTML
<!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="description" content="ECharts">
|
||
<meta name="author" content="kener.linfeng@gmail.com">
|
||
<title>ECharts · 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;
|
||
}
|
||
</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>缘起</h2>
|
||
<img class="pull-right" src="asset/img/about/zrender1.png" style="margin-left:20px;">
|
||
<p>　　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>　　百度资深前端<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>　　正如前面提到的，ECharts来自ZRender，那时的ZRender是包含图表功能的，甚至拖拽重计算已经在那个时候被实现了，但各种图表数据逻辑与图形渲染耦合，非模块化，Demo时随心所欲的特殊定制，我们意识到这是一个糟糕的设计。ZRender做了第一次大规模的重构，抽离了一切图表相关功能，纯粹的作为底层Canvas类库使用。</p>
|
||
<img class="pull-left" src="asset/img/about/echarts1.png" style="margin-right:10px;">
|
||
<p>　　而被抽离的图表逻辑构建成为ECharts 0.1版本，但基本仍旧属于Demo状态，因为接口不规范，个性化能力和通用性都太差了。Erik和林峰，以及3位来自Flash组的资深工程师（百度商业系统中多年来所做的各种flash图表基本出自他们或者是他们所带领的团队），花了近2个月时间先后开了6次会议终于制定并发布了百度图表库标准1.0版本。这份标准是在几乎没考虑实现成本的情况下制定的，追求设计的合理、高度个性化的扩展能力，可想而知，这是给团队挖了一个很深很深的坑，在紧接着的近10个月时间里ECharts团队就是看着文档一步一步从这个坑里爬出来。</p>
|
||
<p>　　幸运的是我们真爬出来了，2013年6月30，ECharts发布了1.0版本，这份标准完全成为了ECharts 1.0的API文档，而且我们还加入了更多的数据交互能力。虽然这份标准目前已经成为了ECharts文档的子集了，但它的重要性不容置疑，回过头看这段历程，我们衷心的感谢制定这份标准的5位工程师（林峰、赵庶、Erik、刘阳、杨冬），在我们看来接口设计的合理比起实现成本重要得多。</p>
|
||
</div>
|
||
|
||
<div class="row featurette">
|
||
<h2>发展</h2>
|
||
<p>　　ECharts缘起公司自身的业务需求，但开源使得它得以发展，虽然业界已经有多如牛毛的JS图表库，但ECharts带着颠覆性的功能设计和技术特征，发布后得到了业界高度关注和好评，迅速成为国内数据可视化领域的“<a href="http://www.itongji.cn/article/0P525392013.html" target="_blank">后起之秀</a>”，先后在CSDN、ITEye、InfoQ、中国统计网、统计之都等主流技术媒体上有专题报道，被开源中国收录后即被列为精选推荐，github上发布18个月后star数超过了5000，不仅成为了国内关注度最高的开源项目，我们还是中国第一个也是目前唯一一个入选了<a href="https://github.com/showcases/data-visualization" target="_blank">Github Explorer Data Visualization</a>板块的开源项目。被百度外数百家企业应用在新闻传媒、证券金融、电子商务、旅游酒店、天气地理、视频游戏、电力等众多领域。</p>
|
||
<p>　　令我们意外的是，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 id="main" style="height:300px;"></div>
|
||
</div>
|
||
|
||
<div class="row featurette team">
|
||
<h2>ECharts背后的那些人</h2>
|
||
<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="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="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="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="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/denghongqi.jpg">
|
||
<h2><a href="http://weibo.com/u/2810393271" 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="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="http://weibo.com/loutongbing" target="_blank">娄同兵</a></h2>
|
||
<p>百度前端研发工程师</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 产品 -->
|
||
<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/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/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/u/1237163505" target="_blank">王俊婷</a></h2>
|
||
<p>百度交互设计师</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">胡瑶</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="#" target="_blank">张彦如</a></h2>
|
||
<p>百度交互设计师</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>领域专家顾问</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">陈为</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/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/u/2042635201" target="_blank">李湛</a></h2>
|
||
<p>百度复合搜索部总监</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">沈浩</a></h2>
|
||
<p>中国传媒大学教授</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 资深玩家 -->
|
||
<h2>资深玩家</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">周扬</a></h2>
|
||
<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/weitaiyun.jpg">
|
||
<h2><a href="http://weibo.com/taiyun" target="_blank">魏太云</a></h2>
|
||
<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>
|
||
</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">谈和</a></h2>
|
||
<p>中国传媒大学硕士研究生<br/>传媒大学数据可视化小组</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">谢世威</a></h2>
|
||
<p>百度前端研发工程师</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>加入我们!</h1>
|
||
<p class="lead">充满激情、喜欢挑战的你还犹豫什么？赶快行动！</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关注度',
|
||
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>
|