forked from apache/echarts
/
index.html
260 lines (250 loc) · 14.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ECharts</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ECharts">
<meta name="author" content="linzhifeng@baidu.com">
<script src="doc/asset/js/esl/esl.js"></script>
<!-- Le styles -->
<link href="doc/asset/css/bootstrap.css" rel="stylesheet">
<link href="doc/asset/css/bootstrap-responsive.css" rel="stylesheet">
<link href="doc/asset/css/echartsHome.css" rel="stylesheet">
<!-- Fav and touch icons -->
<link rel="shortcut icon" href="doc/asset/ico/favicon.png">
</head>
<body>
<!-- NAVBAR
================================================== -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="index.html">ECharts</a>
<div class="nav-collapse collapse">
<a id="forkme_banner" href="https://github.com/ecomfe/echarts">View on GitHub</a>
<ul class="nav">
<li class="active"><a href="index.html"><i class="icon-home icon-white"></i> Home</a></li>
<li><a href="doc/example.html" class="active">Example</a></li>
<li><a href="doc/doc.html" >API & Doc</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-download-alt icon-white"></i>Download <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="https://github.com/ecomfe/echarts/archive/1.1.0.zip">ZIP (1.1.0)</a></li>
<li><a href="https://github.com/ecomfe/echarts/archive/master.zip">ZIP (Latest)</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Link <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="https://github.com/ecomfe" target="_blank">Ecom-FE</a></li>
<li><a href="http://fe.baidu.com/doc/ecom/tech/topic/dv/index.html" target="_blank">Data Visualization</a></li>
<li class="divider"></li>
<!--li class="nav-header">Library</li-->
<li><a href="http://ecomfe.github.io/zrender/index.html" target="_blank">ZRender</a></li>
<li><a href="http://tangram.baidu.com/" target="_blank">Tangram</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar-wrapper -->
<div class="face" id='face'>
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="doc/asset/img/slide-02.png" alt="">
<div class="container">
<div class="carousel-caption">
<h1>ECharts</h1>
<h6>（1.1.0 <a href="doc/changelog.html" target="_blank" class="link">Changelog</a>）</h6>
<p>基于Canvas，纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。</p>
<p style="text-align: right;"><strong>———— 大数据时代，重新定义数据图表的时候到了</strong></p>
</div>
</div>
</div>
<div class="item">
<img src="doc/asset/img/slide-03.png" alt="">
<div class="container">
<div class="carousel-caption">
<h1>ZRender</h1>
<p>一个轻量级的Canvas类库，MVC封装，数据驱动，提供类Dom事件模型，让canvas绘图大不同~~</p>
<br/>
<a class="btn btn-large btn-primary" href="http://ecomfe.github.io/zrender/" target="_blank">了解更多 »</a>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div><!-- /.carousel -->
</div>
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
<div class="container">
<div class="featurette">
<h2 class="featurette-heading">Architecture</h2>
<div class="span6 pull-right">
<img src="doc/asset/img/architecture.png" />
</div>
<p class="lead">ECharts (Enterprise Charts 商业产品图表库)</p>
<p>提供商业产品常用图表库，底层基于<a href="http://ecomfe.github.io/zrender/" target="_blank">ZRender</a>，创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、地图、力导向布局图，同时支持任意维度的堆积和多图表混合展现。</p>
<div style="float:left;margin:10px 10px 30px 10px;"><img src="doc/asset/img/device.png" /></div>
<div>
<img src="doc/asset/img/explorer.png" />
<p> <i>(IE8- supported by <a href="https://code.google.com/p/explorercanvas/" target="_blank">excanvas</a> )</i></p>
</div>
</div>
<h2 class="featurette-heading">特色</h2>
<p>我们诚挚邀请你翻阅这份在线文档 《 <a href="doc/slide/whyEcharts.html" target="_blank">Why ECharts ?</a> 》 你可以从中更直观的体验到ECharts的特性以及快速浏览到所有图表类型。<br/>
<small>*文档中展现的个别特性在IE8-中并没有得到支持，所以建议使用IE9+、chrome、safari、firefox或opear等高级浏览器阅读这份文档。</small>
</p>
<hr class="featurette-divider">
<div class="featurette">
<div class="span5 pull-left">
<img src="doc/asset/img/mix.jpg" />
</div>
<h2 class="featurette-heading">混搭</h2>
<p>混搭的图表会更具表现力也更有有趣味，ECharts提供的图表（共7类11种）支持任意混搭：</p>
<p>折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、<br/>饼图（环形图）、地图、力导布局图。</p>
<p>混搭情况下一个标准图表：包含唯一图例、工具箱、数据区域缩放、值域漫游模块，一个直角坐标系（可包含一条或多条类目轴线，一条或多条值轴线，最多上下左右四条）</p>
</div>
<hr class="featurette-divider">
<div class="featurette">
<div class="span6 pull-right">
<img src="doc/asset/img/draggable.gif" />
</div>
<h2 class="featurette-heading">拖拽重计算</h2>
<p>拖拽重计算特性（专利）带来了数据统计图表从未有过的用户体验，允许用户对统计数据进行有效的提取、整合，甚至在多个图表间交换数据，赋予了用户对数据进行挖掘、整合的能力。</p>
</div>
<hr class="featurette-divider">
<div class="featurette">
<div class="span6 pull-left">
<img src="doc/asset/img/dataView.gif" />
</div>
<h2 class="featurette-heading">数据视图</h2>
<p>如果你所呈现的数据足够让用户所关心，那么他们将不满足于查看可视化的图表，要去逐一迎合他们下载保存，数据分享，加工整合已有数据等等需求？</p>
<p>或许你只要给予一个“,”分隔的数据文本他们就懂了，这就是ECharts的数据视图！当然，你可以重载数据视图的输出方法，用你独特的方式去呈现数据。</p>
<p>如果你的用户足够的高端，你甚至可以打开数据视图的编辑功能，跟拖拽重计算相比，这可是批量的数据修改！</p>
</div>
<hr class="featurette-divider">
<div class="featurette">
<div class="span6 pull-right">
<img src="doc/asset/img/magicType.gif" />
</div>
<h2 class="featurette-heading">动态类型切换</h2>
<p>很多图表类型本身所表现的能力是相似的，但由于数据差异、表现需求和个人喜好的不同导致最终图表所呈现的张力又大不一样，比如折线图和柱状图的选择总是让人头疼。</p>
<p>ECharts提供了动态类型切换，让用户随心所欲的切换到他所需要的图表类型。</p>
</div>
<hr class="featurette-divider">
<div class="featurette">
<div class="span6 pull-left">
<img src="doc/asset/img/legendSelected.gif" />
</div>
<h2 class="featurette-heading">图例开关</h2>
<p>多系列数据的同时展现呈现出丰富内容，但如何让用户切换到他所关心的个别系列上？</p>
<p>ECharts提供了方便快捷的图例开关，可以随时切换到你所关心的数据系列。</p>
</div>
<hr class="featurette-divider">
<div class="featurette">
<div class="span6 pull-right">
<img src="doc/asset/img/datazoom.gif" />
</div>
<h2 class="featurette-heading">数据区域选择</h2>
<p>数据可以是无限的，但显示空间总是有限的，数据区域选择组件提供了大数据量中漫游的能力，让用户选择并呈现他所关心的数据区域。</p>
</div>
<hr class="featurette-divider">
<div class="featurette">
<div class="span5 pull-left">
<img src="doc/asset/img/dataRange.gif" />
</div>
<h2 class="featurette-heading">值域漫游</h2>
<p>基于坐标的图表（如地图、散点图）通过色彩变化表现数值的大小能直观形象的展示数据分布。</p>
<p>但如何聚焦到我所关心的数值上？我们创造了称为值域漫游的功能，让你可以轻松进行数值筛选。</p>
</div>
<hr class="featurette-divider">
<div class="featurette">
<div class="span5 pull-right">
<img src="doc/asset/img/scatter.gif" />
</div>
<h2 class="featurette-heading">大规模散点图</h2>
<p>如何展现成千上百万的离散数据从而找出他们的分布和聚类？貌似除了用专业的统计工具（如MATLAB）外别无选择？</p>
<p>不，ECharts发明了基于像素的大规模散点图（专利），一个900 x 400的散点区域就能够毫不重复的呈现35万组数据，这对于常规的应用，用现代浏览器就足以轻松展现百万级的散点数据！</p>
</div>
<hr class="featurette-divider">
<div class="featurette">
<div class="span6 pull-left">
<img src="doc/asset/img/mark.gif" />
</div>
<h2 class="featurette-heading">标线辅助</h2>
<p>趋势线？平均线？上升通道？支持位？专业的你自然知道该怎么用</p>
<p>提供标线辅助在K线图中可是必要的功能！当然，ECharts中的任何图标都可以使用。</p>
</div>
<hr class="featurette-divider">
<div class="featurette">
<div class="span6 pull-right">
<img src="doc/asset/img/multiStack.png" />
</div>
<h2 class="featurette-heading">多维度堆积</h2>
<p>支持多系列，多维度的数据堆积，配合自动伸缩的图形实体和直角坐标系，能呈现出更有内涵的统计图表~</p>
</div>
<hr class="featurette-divider">
<div class="featurette">
<div class="pull-left">
<img src="doc/asset/img/doc/multiControl.jpg" style="height:145px"/>
</div>
<div class="pull-left">
<img src="doc/asset/img/custom.png"/>
</div>
<h2 class="featurette-heading">个性化定制</h2>
<p>近300个可配置选项结合多级控制设计满足高度定制的个性化需求。</p>
<a href="doc/doc.html" target="_blank">详细文档 »</a>
</div>
<hr class="featurette-divider">
<div class="featurette">
<h2 class="featurette-heading">事件交互</h2>
<p>可以捕获的用户交互和数据变化事件实现图表与外界的联动。<a href="doc/example/event.html" target="_blank">try this »</a></p>
</div>
<hr>
<!-- /END THE FEATURETTES -->
<!-- FOOTER -->
<footer>
<p class="pull-right"><a href="#">Back to top</a></p>
<p>© 2013 ECOM-FE · <a href="https://github.com/ecomfe/echarts/blob/master/LICENSE.txt" target="_blank">Terms</a> · <a href="doc/changelog.html" target="_blank">Changelog</a></p>
</footer>
</div><!-- /.container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="doc/asset/js/jquery.js"></script>
<script src="doc/asset/js/bootstrap-transition.js"></script>
<script src="doc/asset/js/bootstrap-alert.js"></script>
<script src="doc/asset/js/bootstrap-modal.js"></script>
<script src="doc/asset/js/bootstrap-dropdown.js"></script>
<script src="doc/asset/js/bootstrap-scrollspy.js"></script>
<script src="doc/asset/js/bootstrap-tab.js"></script>
<script src="doc/asset/js/bootstrap-tooltip.js"></script>
<script src="doc/asset/js/bootstrap-popover.js"></script>
<script src="doc/asset/js/bootstrap-button.js"></script>
<script src="doc/asset/js/bootstrap-collapse.js"></script>
<script src="doc/asset/js/bootstrap-carousel.js"></script>
<script src="doc/asset/js/bootstrap-typeahead.js"></script>
<script>
!function ($) {
$(function(){
// carousel demo
// $('#myCarousel').carousel()
})
}(window.jQuery)
</script>
</body>
</html>