forked from apache/echarts
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdoc.html
More file actions
3340 lines (3239 loc) · 191 KB
/
Copy pathdoc.html
File metadata and controls
3340 lines (3239 loc) · 191 KB
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
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!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">
<!-- Le styles -->
<link href="asset/css/bootstrap.css" rel="stylesheet">
<link href="asset/css/bootstrap-responsive.css" rel="stylesheet">
<link href="asset/css/echartsHome.css" rel="stylesheet">
<!-- Fav and touch icons -->
<link rel="shortcut icon" href="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><a href="../index.html"><i class="icon-home icon-white"></i> Home</a></li>
<li><a href="example.html" class="active">Example</a></li>
<li class="active"><a href="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="container-fluid">
<div class="row-fluid">
<div class="span3">
<div class="affix accordion span3" id="accordion">
<div class="accordion-group">
<div class="accordion-heading">
<div class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-description">
<strong>描述</strong>
</div>
</div>
<div id="collapse-description" class="accordion-body collapse in">
<div class="accordion-inner">
<div id="toc">
<ul>
<li><a href="#简介">简介</a></li>
<li><a href="#名词解析">名词解析</a></li>
<li><a href="#图表类型">图表类型</a></li>
<ul>
<li><a href="#Line">line</a></li>
<li><a href="#Bar">bar</a></li>
<li><a href="#Scatter">scatter</a></li>
<li><a href="#K">k</a></li>
<li><a href="#Pie">pie</a></li>
<li><a href="#Radar">radar</a></li>
<li><a href="#Chord">chord</a></li>
<li><a href="#Force">force</a></li>
<li><a href="#Map">map</a></li>
</ul>
<li><a href="#引入ECharts">引入ECharts</a></li>
<ul>
<li><a href="#引入ECharts1">模块化包引入</a></li>
<li><a href="#引入ECharts2">模块化单文件引入</a></li>
<li><a href="#引入ECharts3">标签式单文件引入</a></li>
</ul>
<li><a href="#自定义构建echarts单文件">自定义构建echarts单文件</a></li>
<li><a href="#初始化">初始化</a></li>
<li><a href="#实例方法">实例方法</a></li>
<li><a href="#选项">选项</a></li>
<ul>
<li><a href="#Option">option</a></li>
<li><a href="#Title">title</a></li>
<li><a href="#Legend">legend</a></li>
<li><a href="#DataRange">dataRange</a></li>
<li><a href="#Toolbox">toolbox</a></li>
<li><a href="#Tooltip">tooltip</a></li>
<li><a href="#DataZoom">dataZoom</a></li>
<li><a href="#Grid">grid</a></li>
<li><a href="#Xaxis">xAxis</a></li>
<li><a href="#Yaxis">yAxis</a></li>
<li><a href="#Axis">axis</a></li>
<ul>
<li><a href="#AxisAxisline">axisLine</a></li>
<li><a href="#AxisAxistick">axisTick</a></li>
<li><a href="#AxisAxislabel">axisLabel</a></li>
<li><a href="#AxisSplitline">splitLine</a></li>
<li><a href="#AxisSplitarea">splitArea</a></li>
<li><a href="#AxisData">data</a></li>
</ul>
<li><a href="#Polar">polar</a></li>
<li><a href="#Series">series</a></li>
<ul>
<li><a href="#SeriesData">data</a></li>
<li><a href="#SeriesMarkPoint">markPoint</a></li>
<ul>
<li><a href="#SeriesMarkPointData">data</a></li>
</ul>
<li><a href="#SeriesMarkLine">markLine</a></li>
<ul>
<li><a href="#SeriesMarkLineData">data</a></li>
</ul>
</ul>
<li><a href="#ItemStyle">itemStyle</a></li>
<li><a href="#LineStyle">lineStyle</a></li>
<li><a href="#AreaStyle">areaStyle</a></li>
<li><a href="#TextStyle">textStyle</a></li>
<li><a href="#Loadingoption">loadingOption</a></li>
<li><a href="#BackgroundColor">backgroundColor</a></li>
<li><a href="#Color">color</a></li>
<li><a href="#SymbolList">symbolList</a></li>
<li><a href="#Calculable">calculable</a></li>
<li><a href="#CalculableColor">calculableColor</a></li>
<li><a href="#CalculableHolderColor">calculableHolderColor</a></li>
<li><a href="#NameConnector">nameConnector</a></li>
<li><a href="#ValueConnector">valueConnector</a></li>
<li><a href="#Animation">animation</a></li>
<li><a href="#AnimationDuration">animationDuration</a></li>
<li><a href="#AnimationEasing">animationEasing</a></li>
</ul>
<li><a href="#多级控制设计">多级控制设计</a></li>
<li><a href="#附录地图扩展">附录：地图扩展</a></li>
<li><a href="#附录组件图表实例接口">附录：组件和图表的实例接口</a></li>
<ul>
<li><a href="#附录组件实例接口">组件实例接口</a></li>
<ul>
<li><a href="#LegendInterface">legend</a></li>
<li><a href="#DataRangeInterface">dataRange</a></li>
<li><a href="#DataZoomInterface">dataZoom</a></li>
<li><a href="#GridInterface">grid</a></li>
<li><a href="#AxisInterface">xAxis/yAxis</a></li>
<li><a href="#CategoryAxisInterface">categoryAxis</a></li>
<li><a href="#ValueAxisInterface">valueAxis</a></li>
<li><a href="#PolarInterface">polar</a></li>
</ul>
<li><a href="#附录图表实例接口">图表实例接口</a></li>
<ul>
<li><a href="#MapInterface">map</a></li>
</ul>
</ul>
<li><a href="#附录一个直观的事例">附录：一个直观的事例</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<div class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-config">
<strong>默认选项</strong>
</div>
</div>
<div id="collapse-config" class="accordion-body collapse">
<div class="accordion-inner">
<div id="config"></div>
</div>
</div>
</div>
</div><!--/.well -->
</div>
<div class="span9">
<p style="margin:10px 0 -30px 0">
<a href="mailto:echarts@baidu.com">Any feedback or question ? »</a>
</p>
<div id="doc">
<h3>简介<a name="简介"> </a></h3>
<p>ECharts，纯Javascript图表库，基于Canvas，底层依赖<a href="http://ecomfe.github.io/zrender/" target="_blank">ZRender</a>，商业产品常用图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。图表类型支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图，同时支持任意维度的堆积和多图表混合展现。</P>
<img src="asset/img/architecture.png" alt="Echarts Architecture"/>
<h3>名词解析<a name="名词解析"> </a></h3>
<p>基本名词</p>
<table cellspacing="0" class="ADoc_table">
<tr>
<th> 名词 </th>
<th> 描述 </th>
</tr>
<tr>
<td> chart </td>
<td> 是指一个完整的图表，如折线图，饼图等“基本”图表类型或由基本图表组合而成的“混搭”图表，可能包括坐标轴、图例等 </td>
</tr>
<tr>
<td> axis </td>
<td> 直角坐标系中的一个坐标轴，坐标轴可分为类目轴和数值轴 </td>
</tr>
<tr>
<td> xAxis </td>
<td> 直角坐标系中的横轴，通常并默认为类目轴 </td>
</tr>
<tr>
<td> yAxis </td>
<td> 直角坐标系中的纵轴，通常并默认为数值轴 </td>
</tr>
<tr>
<td> grid </td>
<td> 直角坐标系中除坐标轴外的绘图网格 </td>
</tr>
<tr>
<td> legend </td>
<td> 图例 </td>
</tr>
<tr>
<td> dataRange </td>
<td> 值域选择，常用于展现地域数据时选择值域范围 </td>
</tr>
<tr>
<td> toolbox </td>
<td> 辅助工具箱</td>
</tr>
<tr>
<td> tooltip </td>
<td> 气泡提示框，用于展现更详细的数据 </td>
</tr>
<tr>
<td> dataZoom </td>
<td> 数据区域缩放，常用于展现大数据时选择可视范围 </td>
</tr>
<tr>
<td> series </td>
<td> 数据系列 </td>
</tr>
</table>
<P> 图表名词</P>
<table cellspacing="0" class="ADoc_table">
<tr>
<th> 名词 </th>
<th> 描述 </th>
</tr>
<tr>
<td> line </td>
<td> 折线图，堆积折线图，区域图，堆积区域图 </td>
</tr>
<tr>
<td> bar </td>
<td> 柱形图（纵向），堆积柱形图，条形图（横向），堆积条形图 </td>
</tr>
<tr>
<td> scatter </td>
<td> 散点图，气泡图，大规模散点图</td>
</tr>
<tr>
<td> k </td>
<td> K线图，蜡烛图，</td>
</tr>
<tr>
<td> pie </td>
<td> 饼图，圆环图 </td>
</tr>
<tr>
<td> radar </td>
<td> 雷达图，填充雷达图</td>
</tr>
<tr>
<td> chord </td>
<td> 和弦图 </td>
</tr>
<tr>
<td> force </td>
<td> 力导布局图 </td>
</tr>
<tr>
<td> map </td>
<td> 地图（支持中国及全国34个省市自治区地图） </td>
</tr>
</table>
<h3>图表类型<a name="图表类型"> </a></h3>
<P> 图表库标准包含单图表类型的标准图表以及多图表类型混合的混搭图表：</P>
<p><img src="./asset/img/doc/charts.jpg" title="标准图表类型" alt="标准图表类型"/></P>
<h4>单图表类型：line<a name="Line"> </a></h4>
<table cellspacing="0" class="ADoc_table">
<tr>
<th> 折线图 </th>
<th> 堆积折线图 </th>
<th> 区域图 </th>
<th> 堆积区域图 </th>
</tr>
<tr>
<td><img src="./asset/img/example/line1.png" title="" alt="折线图"/></td>
<td><img src="./asset/img/example/line2.png" title="" alt="堆积折线图"/></td>
<td><img src="./asset/img/example/line3.png" title="" alt="区域图"/></td>
<td><img src="./asset/img/example/line4.png" title="" alt="堆积区域图"/></td>
</tr>
</table>
<h4>单图表类型：bar<a name="Bar"> </a></h4>
<table cellspacing="0" class="ADoc_table">
<tr>
<th> 柱形图 </th>
<th> 堆积柱形图 </th>
<th> 条形图 </th>
<th> 堆积条形图 </th>
</tr>
<tr>
<td><img src="./asset/img/example/bar1.png" title="" alt="柱形图"/></td>
<td><img src="./asset/img/example/bar2.png" title="" alt="堆积柱形图"/></td>
<td><img src="./asset/img/example/bar3.png" title="" alt="条形图"/></td>
<td><img src="./asset/img/example/bar4.png" title="" alt="堆积条形图"/></td>
</tr>
</table>
<h4>单图表类型：scatter<a name="Scatter"> </a></h4>
<table cellspacing="0" class="ADoc_table">
<tr>
<th> 散点图 </th>
<th> 气泡图 </th>
</tr>
<tr>
<td><img src="./asset/img/example/scatter1.png" title="" alt="散点图"/></td>
<td><img src="./asset/img/example/scatter2.png" title="" alt="气泡图"/></td>
</tr>
</table>
<h4>单图表类型：k<a name="K"> </a></h4>
<table cellspacing="0" class="ADoc_table">
<tr>
<th> K线图 </th>
</tr>
<tr>
<td><img src="./asset/img/example/k1.png" title="" alt="K线图" height="200"/></td>
</tr>
</table>
<h4>单图表类型：pie<a name="Pie"> </a></h4>
<table cellspacing="0" class="ADoc_table">
<tr>
<th> 饼图 </th>
<th> 圆环图 </th>
<th> 南丁格尔玫瑰图</th>
</tr>
<tr>
<td><img src="./asset/img/example/pie1.png" title="" alt="饼图"/></td>
<td><img src="./asset/img/example/pie2.png" title="" alt="圆环图"/></td>
<td><img src="./asset/img/example/pie4.png" title="" alt="南丁格尔玫瑰图"/></td>
</tr>
</table>
<h4>单图表类型：radar<a name="Radar"> </a></h4>
<table cellspacing="0" class="ADoc_table">
<tr>
<th> 雷达图 </th>
<th> 填充雷达图 </th>
</tr>
<tr>
<td><img src="./asset/img/example/radar1.png" title="" alt="雷达图"/></td>
<td><img src="./asset/img/example/radar2.png" title="" alt="填充雷达图"/></td>
</tr>
</table>
<h4>单图表类型：chord<a name="Chord"> </a></h4>
<table cellspacing="0" class="ADoc_table">
<tr>
<th> 和弦图 </th>
<th> 多维度选择和弦图</th>
</tr>
<tr>
<td><img src="./asset/img/example/chord1.png" title="" alt="和弦图"/></td>
<td><img src="./asset/img/example/chord2.png" title="" alt="和弦图"/></td>
</tr>
</table>
<h4>单图表类型：force<a name="Force"> </a></h4>
<table cellspacing="0" class="ADoc_table">
<tr>
<th> 力导向布局图。 </th>
</tr>
<tr>
<td><img src="./asset/img/example/webkit-dep.png" title="" alt="中国地图"/></td>
</tr>
</table>
<h4>单图表类型：map<a name="Map"> </a></h4>
<table cellspacing="0" class="ADoc_table">
<tr>
<th> 中国地图 </th>
<th> 全国34个省市自治区 </th>
<th> 世界地图</th>
<th> 子区域模式</th>
</tr>
<tr>
<td><img src="./asset/img/example/map1.png" title="" alt="中国地图"/></td>
<td><img src="./asset/img/example/map3.png" title="" alt="全国34个省市自治区"/></td>
<td><img src="./asset/img/example/map4.png" title="" alt="世界地图"/></td>
<td><img src="./asset/img/example/map8.png" title="" alt="子区域模式"/></td>
</tr>
</table>
<h3>引入ECharts<a name="引入ECharts"> </a></h3>
<p>echarts提供多种引入方式，请根据你的项目类型选择合适的方式：</p>
<h3>模块化包引入<a name="引入ECharts1"> </a></h3>
<P>如果你的项目本身就是模块化的，那引入echarts将很简单，只需要配置好packet路径指向src即可，而且你还可以实现图表的按需加载，由于echarts依赖底层zrender，建议你同时下载<a href="https://github.com/ecomfe/zrender" target="_blank">zrender</a>到本地，可参考<a href="example/demo.html" target="_blank">demo</a>，你需要配置如下。</p>
<p>需要注意的时，包引入提供了开发阶段最大的灵活性，但并不适合直接上线，减少请求的文件数量是前端性能优化中很基本也是很重要的规则，务必在上线时做文件的连接压缩。</P>
<div class="code">
<pre>//from echarts example
require.config({
packages: [
{
name: 'echarts',
location: '../../src',
main: 'echarts'
},
{
name: 'zrender',
location: '../../../zrender/src', // zrender与echarts在同一级目录
main: 'zrender'
}
]
});
</pre>
</div>
<h3>模块化单文件引入（<b>推荐</b>）<a name="引入ECharts2"> </a></h3>
<P>我们建议你使用单一文件引入，如你所发现的，build文件夹下已经生成了多个单文件见下，根据你的需求使用：</P>
<ul>
<li>echarts.js : 经过压缩，包含除地图外的全部图表</li>
<li>echarts-original.js : 未压缩，可用于调试，包含除地图外的全部图表</li>
<li>echarts-map.js : 经过压缩，全图表，包含world，china以及34个省市级地图数据</li>
<li>echarts-original-map.js : 未压缩，可用于调试，全图表，包含world，china以及34个省市级地图数据</li>
</ul>
<p>如果需要更加定制的打包文件，建议在node环境下安装<a href="http://requirejs.org/docs/optimization.html" target="_blank">require.js</a>，build文件夹内为你准备好配置项，可根据你的项目需求，修改config-tpl.js以构建你的最佳配置。</p>
<p>采用单一文件使用例子见<a href="example/www/index.html" target="_blank">ECharts单一文件引入</a>，存放在example/www下，你需要配置如下：</p>
<div class="code">
<pre>//from echarts example
require.config({
paths:{
'echarts:'./js/echarts',
'echarts/chart/bar' : './js/echarts', // 把所需图表指向单文件
'echarts/chart/line': './js/echarts'
}
});
</pre>
</div>
<p>require.config配置后后就可以通过动态加载使用echarts</p>
<div class="code">
<pre>//from echarts example
require(
[
'echarts',
'echarts/chart/line', // 按需加载所需图表
'echarts/chart/bar'
],
function (ec) {
var myChart = ec.init(domMain);
var option = {
...
}
myChart.setOption(option);
}
);
</pre>
</div>
<p>总结来说，模块化如何引入ECharts，你都需要如下4步：</p>
<ol>
<li>引入一个模块加载器，如<a href="https://github.com/ecomfe/esl" target="_blank">esl.js</a>或者<a href="http://requirejs.org" target="_blank">require.js</a></li>
<li>为ECharts准备一个具备大小（宽高）的Dom（当然可以是动态生成的）</li>
<li>为模块加载器配置echarts的路径，从当前页面链接到echarts.js，见上述说明</li>
<li>动态加载echarts然后在回调函数中开始使用（容我罗嗦一句，当你确保同一页面已经加载过echarts，再使用时直接require('echarts').init(dom)就行）</li>
</ol>
<h3>标签式单文件引入<a name="引入ECharts3"> </a></h3>
<P>自1.3.5开始，ECharts提供标签式引入。如果你的项目本身并不是基于模块化开发的，或者是基于CMD规范（如使用的是seajs），那么引入基于AMD模块化的echarts可能并不方便，我们建议你采用srcipt标签式引入，忘掉require，srcipt标签引入echarts后将可以直接使用两个全局的命名空间：echarts，zrender，可参考<a href="example/www2/index.html" target="_blank">ECharts标签式引入</a></p>
<div class="code">
<pre>//from echarts example
< script src="example/www2/js/echarts-plain.js" > < /script>
< script >
var myChart = echarts.init(domMain);
var option = {
...
}
myChart.setOption(option);
< /script>
</pre>
</div>
<p>可以直接引入的单文件如下：</p>
<ul>
<li>echarts-plain.js : 经过压缩，包含除地图外的全部图表</li>
<li>echarts-plain-original.js : 未压缩，可用于调试，包含除地图外的全部图表</li>
<li>echarts-plain-map.js : 经过压缩，全图表，包含world，china以及34个省市级地图数据</li>
<li>echarts-plain-original-map.js : 未压缩，可用于调试，全图表，包含world，china以及34个省市级地图数据</li>
</ul>
<h3>自定义构建echarts单文件<a name="自定义构建echarts单文件"></a></h3>
<p>
默认echarts通过build目录下的build.sh(build.bat)脚本可以输出是否包含地图，是否压缩和是否打包esl（可以标签引入）排列组合总共6个版本的echarts单文件，大部分场景下已经够用，但是如果你还是觉得很多图表用不到还放在里面非常浪费，可以通过build目录下的build.js来构建一个更加贴身的echarts单文件。
</p>
<p>
运行build.js只需要一个<a href="http://nodejs.org/">node</a>环境，然后就可以直接在终端里运行 node build.js 运行构建脚本了，具体示例：
</p>
<div class="code">
<pre>node build.js optimize=true exclude=map,force,line output=echarts.js plain=true</pre>
</div>
<p>参数说明:</p>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> 名称 </th>
<th> 描述 </th>
</tr>
<tr>
<td>optimize</td>
<td>是否压缩, 默认false</td>
</tr>
<tr>
<td>exclude</td>
<td>不打包的图表，多个图表使用逗号分割, 默认使用所有图表</td>
</tr>
<tr>
<td>output</td>
<td>输出打包地址，默认为echarts.js</td>
</tr>
<tr>
<td>plain</td>
<td>是否打包esl, 打包的话可以直接使用scripts标签引入, 默认false</td>
</tr>
</table>
<p>更详细的配置在build/config-tpl.js目录下，具体的配置项使用可以参考requirejs optimizer的<a href="https://github.com/jrburke/r.js/blob/master/build/example.build.js">example build file</a>，要注意的的是optimize, include, wrap三个配置项会在build过程中根据输入的参数被改掉，所以不建议直接修改这三个配置项，修改config-tpl.js最常见的场景是zrender和echarts不在同一个目录下从而需要修改zrender的package路径。</p>
<h3>初始化<a name="初始化"> </a></h3>
<p>通过require获得echarts接口后可实例化图表，echarts接口仅有一个方法init，执行init时传入一个具备大小的dom节点（width、height可被计算得到即可，不一定可见）后即可实例化出图表对象，图表库实现为多实例的，同一页面可在多个dom上init出多个图表，同一个dom上多次init均返回同一个实例（1.3.8+）。init方法说明如下：</p>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> 名称 </th>
<th> 参数 </th>
<th> 描述 </th>
</tr>
<tr>
<td> <b>{ECharts}</b> init </td>
<td> <b>{dom}</b> dom, <br/><b>{string | Object =}</b> theme </td>
<td> 初始化接口，返回ECharts实例，其中dom为图表所在节点，theme为可选的主题，内置主题（暂无）直接传入名称，自定义扩展主题可传入主题对象</td>
</tr>
</table>
<p>图表实例可用方法见<a href="#方法">方法</a></p>
<p>引入ECharts后的的初始化代码如下：</p>
<div class="code">
<pre>
// 作为入口
require(
[
'echarts',
'echarts/chart/pie'
],
function(ec) {
var myChart = ec.init(document.getElementById('main'));
myChart.setOption({...});
}
);
// -----------------------------
// 非入口或再次使用，图表已被加载注册
require('echarts').init(dom).setOption({...});
// 如果需要再次使用ECharts的图表实例，建议你还是保存init返回的图表实例吧
var myChart = require('echarts').init(dom);
myChart.setOption({...}); </pre>
</div>
<p>熟悉模块化的你可以跳过了下面代码了</p>
<div class="code">
<pre>
// 不习惯模块化的你当然可以
var ECharts;
require(['echarts'], function(ec){
ECharts = ec;
});
// 是的，把echarts加载后保存起来作为命名空间使用</pre>
</div>
<h3>实例方法<a name="实例方法"> </a></h3>
<p>实例指的就是接口init()返回的对象，即上述代码中的“myChart”，非get接口均返回自身self支持链式调用</p>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> 名称 </th>
<th> 参数 </th>
<th> 描述 </th>
</tr>
<tr>
<td><b>{self}</b> setOption</td>
<td><b>{Object}</b> option, <br/><b>{boolean=}</b> notMerge</td>
<td>万能接口，配置图表实例任何可配置选项（详见<a href="#Option" title="">option</a>），多次调用时option选项是默认是合并（merge）的，<br/>如果不需求，可以通过notMerger参数为true阻止与上次option的合并。 </td>
</tr>
<tr>
<td><b>{Object}</b> getOption</td>
<td><b>{void}</b></td>
<td>返回内部持有的当前显示option克隆 </td>
</tr>
<tr>
<td><b>{self}</b> setSeries</td>
<td><b>{Array}</b> series, <br/><b>{boolean=}</b> notMerge</td>
<td>数据接口，驱动图表生成的数据内容（详见<a href="#Series" title="">series</a>），效果等同调用setOption({series:{...}}) </td>
</tr>
<tr>
<td><b>{Object}</b> getSeries</td>
<td><b>{void}</b></td>
<td>返回内部持有的当前显示series克隆，效果同return getOption().series</td>
</tr>
<tr>
<td><b>{self}</b> addData</td>
<td>单组数据：
<br/><b>{number}</b> seriesIdx
<br/><b>{number | Object}</b> data
<br/><b>{boolean=}</b> isHead
<br/><b>{boolean=}</b> dataGrow
<br/><b>{string=}</b> additionData
<br/>多组数据添加：
<br/><b>{Array}</b> params
</td>
<td>动态数据接口，<a href="example/dynamicLineBar.html" target="_blank">try this (Line & Bar) »</a> <a href="example/dynamicScatterK.html" target="_blank">try this (Scatter & K) »</a> <a href="example/dynamicPieRadar.html" target="_blank">try this (Pie & Radar) »</a>
<br/>seriesIdx 系列索引
<br/>data 增加数据
<br/>isHead 是否队头加入，默认，不指定或false时为队尾插入
<br/>dataGrow 是否增长数据队列长度，默认，不指定或false时移出目标数组对位数据
<br/>additionData 是否增加类目轴(饼图为图例)数据，附加操作同isHead和dataGrow
<br/>多组数据添加时参数为：
<br/>params == [[seriesIdx, data, isHead, dataGrow, additionData], [...]]
</td>
</tr>
<tr>
<td><b>{self}</b> on</td>
<td><b>{string}</b> eventName, <br/><b>{Function}</b> eventListener</td>
<td>事件绑定，支持事件有：
<br/>REFRESH，RESTORE，CLICK，HOVER，
<br/>DATA_CHANGED，MAGIC_TYPE_CHANGED，DATA_VIEW_CHANGED，
<br/>DATA_ZOOM，DATA_RANGE，LEGEND_SELECTED，MAP_SELECTED
<br/>事件命名统一挂载到require('echarts/config').EVENT（非模块化为echarts.config.EVENT）命名空间下，建议使用此命名空间作为事件名引用。
</td>
</tr>
<tr>
<td><b>{self}</b> un</td>
<td><b>{string}</b> eventName, <br/><b>{Function}</b> eventListener</td>
<td>事件解绑定 </td>
</tr>
<tr>
<td><b>{self}</b> showLoading</td>
<td><b>{Object}</b> loadingOption</td>
<td> 过渡控制（详见<a href="#Loadingoption" title="">loadingOption</a>），显示loading（读取中） </td>
</tr>
<tr>
<td><b>{self}</b> hideLoading</td>
<td><b>{void}</b></td>
<td>过渡控制，隐藏loading（读取中） </td>
</tr>
<tr>
<td>{ZRender} getZrender</td>
<td><b>{void}</b></td>
<td>获取当前图表所用ZRender实例，可用于添加额外图形或进行深度定制，zrender接口详见<a href="http://ecomfe.github.io/zrender/doc/doc.html#zrenderInstance" target="_blank">ZRender</a> </td>
</tr>
<tr>
<td><b>{string}</b> getDataURL</td>
<td><b>{string=}</b> imgType</td>
<td>获取当前图表的Base64图片dataURL，imgType 图片类型，支持png|jpeg，默认为png</td>
</tr>
<tr>
<td><b>{Dom}</b> getImage</td>
<td><b>{string=}</b> imgType</td>
<td>获取一个当前图表的img，imgType 图片类型，支持png|jpeg，默认为png</td>
</tr>
<tr>
<td><b>{self}</b> resize</td>
<td><b>{void}</b></td>
<td>ECharts没有绑定resize事件，显示区域大小发生改变内部并不知道，<br/>使用方可以根据自己的需求绑定关心的事件，主动调用resize达到区域更新的效果。</td>
</tr>
<tr>
<td><b>{self}</b> refresh</td>
<td><b>{void}</b></td>
<td>刷新图表，图例选择、数据区域缩放，拖拽状态均保持。</td>
</tr>
<tr>
<td><b>{self}</b> restore</td>
<td><b>{void}</b></td>
<td>还原图表，各种状态均被清除，还原为最初展现时的状态。</td>
</tr>
<tr>
<td><b>{self}</b> clear</td>
<td><b>{void}</b></td>
<td>清空绘画内容，清空后实例可用 </td>
</tr>
<tr>
<td><b>{void}</b> dispose</td>
<td><b>{void}</b></td>
<td>释放图表实例，释放后实例不再可用 </td>
</tr>
</table>
<h3>选项<a name="选项"> </a></h3>
<h4>option<a name="Option"> </a></h4>
<P> 图表选项，包含图表实例任何可配置选项</P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> 名称 </th>
<th> 描述 </th>
</tr>
<tr>
<td> <b>{Array}</b> color </td>
<td> 数值系列的颜色列表，默认为null则采用内置颜色，可配数组，eg：['#87cefa', 'rgba(123,123,123,0.5)','...']，当系列数量个数比颜色列表长度大时将循环选取 </td>
</tr>
<tr>
<td> <b>{Object}</b> title </td>
<td> 标题（详见<a href="#Title" title="">title</a>），每个图表最多仅有一个标题控件 </td>
</tr>
<tr>
<td> <b>{Object}</b> legend </td>
<td> 图例（详见<a href="#Legend" title="">legend</a>），每个图表最多仅有一个图例，混搭图表共享 </td>
</tr>
<tr>
<td> <b>{Object}</b> dataRange </td>
<td> 值域选择（详见<a href="#DataRange" title="">dataRange</a>）,值域范围 </td>
</tr>
<tr>
<td> <b>{Object}</b> toolbox </td>
<td> 工具箱（详见<a href="#Toolbox" title="">toolbox</a>），每个图表最多仅有一个工具箱 </td>
</tr>
<tr>
<td> <b>{Object}</b> tooltip </td>
<td> 提示框（详见<a href="#Tooltip" title="">tooltip</a>），鼠标悬浮交互时的信息提示 </td>
</tr>
<tr>
<td> <b>{Object}</b> dataZoom </td>
<td> 数据区域缩放（详见<a href="#DataZoom" title="">dataZoom</a>）,数据展现范围选择 </td>
</tr>
<tr>
<td> <b>{Object}</b> grid </td>
<td> 直角坐标系内绘图网格（详见<a href="#Grid" title="">grid</a>） </td>
</tr>
<tr>
<td> <b>{Array | Object}</b> xAxis </td>
<td> 直角坐标系中横轴数组（详见<a href="#Xaxis" title="">xAxis</a>），数组中每一项代表一条横轴坐标轴，标准（1.0）中规定最多同时存在2条横轴 </td>
</tr>
<tr>
<td> <b>{Array | Object}</b> yAxis </td>
<td> 直角坐标系中纵轴数组（详见<a href="#Yaxis" title="">yAxis</a>），数组中每一项代表一条纵轴坐标轴，标准（1.0）中规定最多同时存在2条纵轴 </td>
</tr>
<tr>
<td> <b>{Array}</b> series </td>
<td> 驱动图表生成的数据内容（详见<a href="#Series" title="">series</a>），数组中每一项代表一个系列的特殊选项及数据 </td>
</tr>
</table>
<h4>title<a name="Title"> </a></h4>
<P> 标题，每个图表最多仅有一个标题控件，每个标题控件可设主副标题。</P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> 名称 </th>
<th> 默认值 </th>
<th> 描述 </th>
</tr>
<tr>
<td> <b>{string}</b> text </td>
<td> '' </td>
<td> 主标题文本，'\n'指定换行 </td>
</tr>
<tr>
<td> <b>{string}</b> link </td>
<td> '' </td>
<td> 主标题文本超链接 </td>
</tr>
<tr>
<td> <b>{string}</b> subtext </td>
<td> '' </td>
<td> 副标题文本，'\n'指定换行 </td>
</tr>
<tr>
<td> <b>{string}</b> sublink </td>
<td> '' </td>
<td> 副标题文本超链接 </td>
</tr>
<tr>
<td> <b>{string | number}</b> x </td>
<td> 'left' </td>
<td> 水平安放位置，默认为左侧，可选为：'center' | 'left' | 'right' | <b>{number}</b>（x坐标，单位px） </td>
</tr>
<tr>
<td> <b>{string | number}</b> y </td>
<td> 'top' </td>
<td> 垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | <b>{number}</b>（y坐标，单位px） </td>
</tr>
<tr>
<td> <b>{string}</b> textAlign </td>
<td> null </td>
<td> 水平对齐方式，默认根据x设置自动调整，可选为： left' | 'right' | 'center</td>
</tr>
<tr>
<td> <b>{color}</b> backgroundColor </td>
<td> 'rgba(0,0,0,0)' </td>
<td> 标题背景颜色，默认透明 </td>
</tr>
<tr>
<td> <b>{string}</b> borderColor </td>
<td> '#ccc' </td>
<td> 标题边框颜色 </td>
</tr>
<tr>
<td> <b>{number}</b> borderWidth </td>
<td> 0 </td>
<td> 标题边框线宽，单位px，默认为0（无边框） </td>
</tr>
<tr>
<td> <b>{number | Array}</b> padding </td>
<td> 5 </td>
<td> 标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css，见下图 </td>
</tr>
<tr>
<td> <b>{number}</b> itemGap </td>
<td> 10 </td>
<td> 主副标题纵向间隔，单位px，默认为10</td>
</tr>
<tr>
<td> <b>{Object}</b> textStyle </td>
<td> {<br/>fontSize: 18, <br/>fontWeight: 'bolder', <br/>color: '#333'<br/>} </td>
<td> 主标题文本样式（详见<a href="#TextStyle" title="">textStyle</a>） </td>
</tr>
<tr>
<td> <b>{Object}</b> subtextStyle </td>
<td> {color: '#aaa'} </td>
<td> 副标题文本样式（详见<a href="#TextStyle" title="">textStyle</a>） </td>
</tr>
</table>
<p><img src="./asset/img/doc/title.png" title="" alt="标题"/></P>
<h4>legend<a name="Legend"> </a></h4>
<P> 图例，每个图表最多仅有一个图例。<a href="example/legend.html" target="_blank">try this »</a></P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> 名称 </th>
<th> 默认值 </th>
<th> 描述 </th>
</tr>
<tr>
<td> <b>{string}</b> orient </td>
<td> 'horizontal' </td>
<td> 布局方式，默认为水平布局，可选为：'horizontal' | 'vertical' </td>
</tr>
<tr>
<td> <b>{string | number}</b> x </td>
<td> 'center' </td>
<td> 水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right' | <b>{number}</b>（x坐标，单位px） </td>
</tr>
<tr>
<td> <b>{string | number}</b> y </td>
<td> 'top' </td>
<td> 垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | <b>{number}</b>（y坐标，单位px） </td>
</tr>
<tr>
<td> <b>{color}</b> backgroundColor </td>
<td> 'rgba(0,0,0,0)' </td>
<td> 图例背景颜色，默认透明 </td>
</tr>
<tr>
<td> <b>{string}</b> borderColor </td>
<td> '#ccc' </td>
<td> 图例边框颜色 </td>
</tr>
<tr>
<td> <b>{number}</b> borderWidth </td>
<td> 0 </td>
<td> 图例边框线宽，单位px，默认为0（无边框） </td>
</tr>
<tr>
<td> <b>{number | Array}</b> padding </td>
<td> 5 </td>
<td> 图例内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css，见下图 </td>
</tr>
<tr>
<td> <b>{number}</b> itemGap </td>
<td> 10 </td>
<td> 各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔，见下图 </td>
</tr>
<!--
<tr>
<td> <b>{number}</b> itemWidth </td>
<td> 20 </td>
<td> 图例图形宽度 </td>
</tr>
<tr>
<td> <b>{number}</b> itemHeight </td>
<td> 14 </td>
<td> 图例图形高度 </td>
</tr>
-->
<tr>
<td> <b>{Object}</b> textStyle </td>
<td> {color: '#333'} </td>
<td> 默认只设定了图例文字颜色（详见<a href="#TextStyle" title="">textStyle</a>） </td>
</tr>
<tr>
<td> <b>{Boolean}</b> selectedMode </td>
<td> true </td>
<td> 选择模式，默认开启图例开关 </td>
</tr>
<tr>
<td> <b>{Object}</b> selected </td>
<td> null </td>
<td> 配置默认选中状态，可配合LEGEND.SELECTED事件做动态数据载入，<a href="example/legend.html" target="_blank">try this »</a> </td>
</tr>
<tr>
<td> {Array <string>} data </td>
<td> [ ] </td>
<td> 图例内容数组，数组项为<b>{string}</b>，每一项代表一个系列的name。<br/>使用根据该值索引<a href="#Series" title="">series</a>中同名系列所用的图表类型和itemStyle，如果索引不到，该item将默认为没启用状态。</td>
</tr>
</table>
<p><img src="./asset/img/doc/legend.png" title="" alt="图例"/></P>
<h4>dataRange<a name="DataRange"> </a></h4>
<P> 值域选择，每个图表最多仅有一个值域控件。<a href="example/dataRange.html" target="_blank">try this »</a></P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> 名称 </th>
<th> 默认值 </th>
<th> 描述 </th>
</tr>
<tr>
<td> <b>{string}</b> orient </td>
<td> 'vertical' </td>
<td> 布局方式，默认为垂直布局，可选为：'horizontal' | 'vertical' </td>
</tr>
<tr>
<td> <b>{string | number}</b> x </td>
<td> 'left' </td>
<td> 水平安放位置，默认为全图左对齐，可选为：'center' | 'left' | 'right' | <b>{number}</b>（x坐标，单位px） </td>
</tr>
<tr>
<td> <b>{string | number}</b> y </td>
<td> 'bottom' </td>
<td> 垂直安放位置，默认为全图底部，可选为：'top' | 'bottom' | 'center' | <b>{number}</b>（y坐标，单位px） </td>
</tr>
<tr>
<td> <b>{color}</b> backgroundColor </td>
<td> 'rgba(0,0,0,0)' </td>
<td> 值域控件背景颜色，默认透明 </td>
</tr>
<tr>
<td> <b>{string}</b> borderColor </td>
<td> '#ccc' </td>
<td> 值域控件边框颜色 </td>
</tr>
<tr>
<td> <b>{number}</b> borderWidth </td>
<td> 0 </td>
<td> 值域控件边框线宽，单位px，默认为0（无边框） </td>
</tr>
<tr>
<td> <b>{number | Array}</b> padding </td>
<td> 5 </td>
<td> 值域控件内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css，见下图 </td>
</tr>
<tr>
<td> <b>{number}</b> itemGap </td>
<td> 10 </td>
<td> 各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔，见下图 </td>
</tr>
<!--
<tr>
<td> <b>{number}</b> itemWidth </td>
<td> 20 </td>
<td> 值域控件图形宽度 </td>
</tr>
<tr>
<td> <b>{number}</b> itemHeight </td>
<td> 14 </td>
<td> 值域控件图形高度 </td>
</tr>
-->
<tr>
<td> <b>{number}</b> min </td>
<td> null </td>
<td> 指定的最小值，eg: 0，默认无，必须参数</td>
</tr>
<tr>
<td> <b>{number}</b> max </td>
<td> null </td>