forked from apache/echarts
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
325 lines (313 loc) · 19.7 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
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
<!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="[email protected]">
<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 id="last-release-link" href=""> </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>
</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="ECharts">
<div class="container">
<div class="carousel-caption">
<h1>ECharts</h1>
<h6>（1.4.1 <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="ZRender">
<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="span7 pull-right" style="margin-top:0">
<img src="doc/asset/img/architecture.png" alt="ECharts Architecture"/>
</div>
<p class="lead">ECharts (Enterprise Charts 商业产品图表库)</p>
<p>提供商业产品常用图表，底层基于<a href="http://ecomfe.github.io/zrender/" target="_blank">ZRender</a>（一个全新的轻量级canvas类库），创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图、柱状图、散点图、K线图、饼图、雷达图、地图、和弦图以及力导向布局图，同时支持任意维度的堆积和多图表混合展现。</p>
<div style="float:left;margin:20px 10px 30px 10px;"><img src="doc/asset/img/device.png" alt="Echarts device"/></div>
<div>
<img src="doc/asset/img/explorer.png" alt="Echarts explorer"/>
<p style="float:right;text-align:right;padding-top:20px;"><strong>———— 开源来自百度商业前端数据可视化团队</strong><br/><span><a href="http://im.baidu.com/" target="_blank">Baidu Hi</a> : 1379172 | <a href="mailto:[email protected]">[email protected]</a></span></p>
<div>
<small> 支持IE6/7/8/9+，chrome、firefox、safari、opera <i>(IE8- power by <a href="https://code.google.com/p/explorercanvas/" target="_blank">excanvas</a> )</i></small>
</div>
</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或opera等现代浏览器阅读这份文档。</small>
</p>
<hr class="featurette-divider">
<div class="featurette">
<div class="span5 pull-left">
<img src="doc/asset/img/mix.jpg" alt="Echarts mix"/>
</div>
<h2 class="featurette-heading">混搭</h2>
<p>混搭的图表会更具表现力也更有有趣味，ECharts提供的图表（共9类14种）支持任意混搭：</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" alt="Echarts 拖拽重计算"/>
</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" alt="Echarts 数据视图"/>
</div>
<h2 class="featurette-heading">数据视图</h2>
<p>如果你所呈现的数据足够让用户所关心，那么他们将不满足于查看可视化的图表，要去逐一迎合他们下载保存，数据分享，加工整合已有数据等等需求？</p>
<p>或许你只要给予一个“,”分隔的数据文本他们就懂了，这就是ECharts的数据视图！当然，你可以重载数据视图的输出方法，用你独特的方式去呈现数据。</p>
<p>如果你的用户足够的高端，你甚至可以打开数据视图的编辑功能，跟拖拽重计算相比，这可是批量的数据修改！</p>
</div>
<hr class="featurette-divider">
<div class="featurette">
<div class="span5 pull-right">
<img src="doc/asset/img/magicType.gif" alt="Echarts 动态类型切换"/>
</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" alt="Echarts 图例开关"/>
</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" alt="Echarts 数据区域缩放"/>
</div>
<h2 class="featurette-heading">数据区域选择</h2>
<p>数据可以是无限的，但显示空间总是有限的，数据区域选择组件提供了大数据量中漫游的能力，让用户选择并呈现他所关心的数据区域。</p>
<p>配合随动的均值（极值）标线，标注展现强大的数据剖析能力。 try <a href="./doc/example/mix10.html" target="_blank">this 》</a></p>
</div>
<hr class="featurette-divider">
<div class="featurette">
<div class="span4 pull-left">
<img src="doc/asset/img/connect.gif" alt="Echarts 多图联动"/>
</div>
<h2 class="featurette-heading">多图联动</h2>
<p>多系列数据在同一个直角系内同时展现有时候会产生混乱，但他们又存在极强的关联意义不可分离？</p>
<p>ECharts提供了多图联动的能力（connect），能做的可不仅仅是鼠标划过的详情显示，连接的多个图表会共享组件事件并且实现了保存图片时的自动拼接。 try <a href="./doc/example/mix8.html" target="_blank">this 》</a></p>
</div>
<hr class="featurette-divider">
<div class="featurette">
<div class="span5 pull-right">
<img src="doc/asset/img/dataRange.gif" alt="Echarts 值域漫游"/>
</div>
<h2 class="featurette-heading">值域漫游</h2>
<p>基于坐标的图表（如地图、散点图）通过色彩变化表现数值的大小能直观形象的展示数据分布。</p>
<p>但如何聚焦到我所关心的数值上？我们创造了称为值域漫游的功能，让你可以轻松进行数值筛选。</p>
</div>
<hr class="featurette-divider">
<div class="featurette">
<div class="span4 pull-left">
<img src="doc/asset/img/effect.gif" alt="Echarts 炫光特效"/>
</div>
<h2 class="featurette-heading">炫光特效</h2>
<p>我们知道，很多时候我们需要一些吸引眼球的能力。</p>
<p>ECharts支持标注标线的<a href="./doc/example/map12.html" target="_blank">炫光特效</a>，特别用在地图上轻松实现<a href="./doc/example/map11.html" target="_blank">百度迁徙数据可视化特效</a></p>
</div>
<hr class="featurette-divider">
<div class="featurette">
<div class="span5 pull-right">
<img src="doc/asset/img/scatter.gif" alt="Echarts 大规模散点图"/>
</div>
<h2 class="featurette-heading">大规模散点图</h2>
<p>如何展现成千上百万的离散数据从而找出他们的分布和聚类？貌似除了用专业的统计工具（如MATLAB）外别无选择？</p>
<p>不，ECharts发明了基于像素的大规模散点图（专利），一个900 x 400的散点区域就能够毫不重复的呈现36万组数据，这对于常规的应用，用现代浏览器就足以轻松展现百万级的散点数据！</p>
</div>
<hr class="featurette-divider">
<div class="featurette">
<div class="span3 pull-left">
<img src="doc/asset/img/dynamic1.gif" alt="Echarts 动态数据添加"/>
</div>
<div class="pull-left">
<img src="doc/asset/img/dynamic2.gif" alt="Echarts 动态数据添加" style="height:175px"/>
</div>
<h2 class="featurette-heading">动态数据添加</h2>
<p>如果你需要展示有实时变化的数据，相信这个动态接口会对你很有帮助。</p>
</div>
<hr class="featurette-divider">
<div class="featurette">
<div class="span6 pull-right">
<img src="doc/asset/img/mark.gif" alt="Echarts 标线辅助"/>
</div>
<h2 class="featurette-heading">标线辅助</h2>
<p>趋势线？平均线？上升通道？支持位？专业的你自然知道该怎么用</p>
<p>提供标线辅助在K线图中可是必要的功能！当然，ECharts中的任何图表都可以使用。</p>
</div>
<hr class="featurette-divider">
<div class="featurette">
<div class="span6 pull-left">
<img src="doc/asset/img/multiStack.png" alt="Echarts 多维度堆积"/>
</div>
<h2 class="featurette-heading">多维度堆积</h2>
<p>支持多系列，多维度的数据堆积，配合自动伸缩的图形实体和直角坐标系，能呈现出更有内涵的统计图表~</p>
</div>
<hr class="featurette-divider">
<div class="featurette">
<div class="span6 pull-right">
<img src="doc/asset/img/subMapType.png" alt="Echarts 子区域地图"/>
</div>
<h2 class="featurette-heading">子区域地图模式</h2>
<p>地图类型支持world，china及全国34个省市自治区。同时支持子区域模式，通过主地图类型扩展出所包含的子区域地图，轻易输出全球176个国家地区和全国600多个省市区域简图， try <a href="./doc/example/map8.html" target="_blank">this 》</a></p>
</div>
<hr class="featurette-divider">
<div class="featurette">
<div class="span6 pull-left">
<img src="doc/asset/img/example/map7.png" alt="Echarts 标准GeoJson扩展"/>
</div>
<h2 class="featurette-heading">GeoJson地图扩展</h2>
<p>内置地图由标准GeoJson地理数据并经过高效的压缩算法压缩生成的地图数据（大小仅为标准geoJson的30%左右）驱动而来。如果内置地图类型或数据如果并未满足你的项目需要，可通过简单动态注册产生你所需要的新类型， try <a href="./doc/example/map7.html" target="_blank">this 》</a></p>
</div>
<hr class="featurette-divider">
<div class="featurette">
<div class="pull-right">
<img src="doc/asset/img/example/line1.png" alt="Echarts 全系列图表支持标注、标线" style="height:150px"/>
</div>
<div class="pull-right">
<img src="doc/asset/img/example/map9.png" alt="Echarts 全系列图表支持标注、标线" style="height:150px"/>
</div>
<h2 class="featurette-heading">标注 & 标线</h2>
<p>添加额为的标注内容是常用的功能，如地图上标注某些特定位置，折线图上标注极值点或者柱形图里标线出变化趋势，ECharts全系列图表支持标注标线功能，并且与生俱来的可以响应图例开关、值域漫游等组件的交互功能。</p>
</div>
<hr class="featurette-divider">
<div class="featurette">
<div class="pull-left">
<img src="doc/asset/img/doc/multiControl.jpg" alt="Echarts 多级控制" style="height:145px"/>
</div>
<div class="pull-left">
<img src="doc/asset/img/custom.png" alt="Echarts 高度个性化"/>
</div>
<h2 class="featurette-heading">个性化定制</h2>
<p>超过500个可配置选项结合多级控制设计满足高度定制的个性化需求。</p>
<a href="doc/doc.html" target="_blank">详细文档 »</a>
</div>
<hr class="featurette-divider">
<div class="featurette">
<div class="span6 pull-right">
<img src="doc/asset/img/example/mix3.png" alt="Echarts 事件交互"/>
</div>
<h2 class="featurette-heading">事件交互</h2>
<p>可以捕获的用户交互和数据变化事件实现图表间或者与外界的联动。<a href="doc/example/mix3.html" target="_blank">try this »</a></p>
<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>© 2014 <a href="http://efe.baidu.com" target="_blank">EFE</a> · <a href="https://github.com/ecomfe/echarts/blob/master/LICENSE.txt" target="_blank">License</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>