forked from apache/echarts
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdoc-en.html
5687 lines (5535 loc) · 335 KB
/
doc-en.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
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="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 · Doc</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]-->
</head>
<body>
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="head"></div>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-md-3">
<div class="affix panel col-md-3" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<div class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-description">
<strong>Contents</strong>
</div>
</div>
<div id="collapse-description" class="panel-collapse collapse in">
<div class="panel-body">
<div id="toc">
<ul>
<li><a href="#Introduction">Introduction</a></li>
<li><a href="#Glossary">Glossary</a></li>
<li><a href="#Chart-Types">Chart Types</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="#Candlestick">candlestick</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>
<li><a href="#Heatmap">heatmap</a></li>
<li><a href="#Gauge">gauge</a></li>
<li><a href="#Funnel">funnel</a></li>
<li><a href="#eventRiver">eventRiver</a></li>
<li><a href="#treemap">treemap</a></li>
<li><a href="#treeChart">tree</a></li>
<li><a href="#venn">venn</a></li>
<li><a href="#wordCloud">wordCloud</a></li>
</ul>
<li><a href="#Import-ECharts">Import ECharts</a></li>
<ul>
<li><a href="#Import-ECharts1">modular package import</a></li>
<li><a href="#Import-ECharts2">modular single file import ( <b>preferred</b> )</a></li>
<li><a href="#Import-ECharts3">plain single file import</a></li>
</ul>
<li><a href="#Custom-Build-Echarts-Single-File">Custom Build ECharts Single File</a></li>
<li><a href="#Initialization">Initialization</a></li>
<li><a href="#Instance-Methods">Instance Methods</a></li>
<li><a href="#Options">Options</a></li>
<ul>
<li><a href="#Option">option</a></li>
<li><a href="#Timeline">timeline</a></li>
<li><a href="#Title">title</a></li>
<li><a href="#Toolbox">toolbox</a></li>
<li><a href="#Tooltip">tooltip</a></li>
<li><a href="#Legend">legend</a></li>
<li><a href="#DataRange">dataRange</a></li>
<li><a href="#DataZoom">dataZoom</a></li>
<li><a href="#RoamController">roamController</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 (universal)</a></li>
<ul>
<li><a href="#SeriesCartesian">series (Cartesian)</a></li>
<li><a href="#SeriesPie">series (pie) </a></li>
<li><a href="#SeriesRadar">series (radar) </a></li>
<li><a href="#SeriesMap">series (map) </a></li>
<li><a href="#SeriesHeatmap">series (map) </a></li>
<li><a href="#SeriesForce">series (force) </a></li>
<li><a href="#SeriesChord">series (chord) </a></li>
<li><a href="#SeriesGauge">series (gauge) </a></li>
<li><a href="#SeriesFunnel">series (funnel) </a></li>
<li><a href="#SeriesEventRiver">series (eventRiver)</a></li>
<li><a href="#SeriesTreemap">series (treemap)</a></li>
<li><a href="#SeriesTree">series (tree)</a></li>
<li><a href="#SeriesVenn">series (venn)</a></li>
<li><a href="#SeriesWordCloud">series (wordCloud)</a></li>
<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="#NoDataLoadingOption">noDataLoadingOption</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="#RenderAsImage">renderAsImage</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="#AddDataAnimation">addDataAnimation</a></li>
<li><a href="#AnimationThreshold">animationThreshold</a></li>
<li><a href="#AnimationDuration">animationDuration</a></li>
<li>
<a href="#animationDurationUpdate">animationDurationUpdate</a>
</li>
<li><a href="#AnimationEasing">animationEasing</a></li>
</ul>
<li><a href="#GraphDataStructure">Graph data structure</a></li>
<ul>
<li><a href="#categories">categories</a></li>
<li><a href="#nodes(data)">nodes(data)</a></li>
<li><a href="#GraphLinks">links</a></li>
<li><a href="#GraphMatrix">matrix</a></li>
</ul>
<li><a href="#Multi-Level-Control">Multi-Level Control</a></li>
<li><a href="#Appendix-Map-Extension">Appendix: Map Extension</a></li>
<li><a href="#Appendix-Component-and-Chart-Instances">Appendix: Component and Chart Instances</a></li>
<ul>
<li><a href="#Appendix-Component-Instances">Appendix: Component Instances</a></li>
<ul>
<li><a href="#TimelineInterface">timeline</a></li>
<li><a href="#TooltipInterface">tooltip</a></li>
<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="#Appendix-Chart-Instances">Appendix: Chart Instances</a></li>
<ul>
<li><a href="#MapInterface">map</a></li>
</ul>
</ul>
<li><a href="#Appendix-an-Intuitive-Example">Appendix: an Intuitive Example</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-config">
<strong>default options</strong>
</div>
</div>
<div id="collapse-config" class="panel-collapse collapse">
<div class="panel-body">
<div id="config"></div>
</div>
</div>
</div>
</div><!--/.well -->
</div>
<div class="col-md-9">
<p style="margin:20px 0 -30px 0">
<a href="./start-en.html" target="_blank" style="margin-right: 50px;"> Getting started »</a>
<a href="https://github.com/ecomfe/echarts/issues?page=1&state=open" target="_blank">Any feedback or question? »</a>
</p>
<div id="doc">
<h3>Introduction<a name="Introduction"> </a></h3>
<p>ECharts (Enterprise Charts), written in pure JavaScript and based on <a href="http://ecomfe.github.io/zrender/" target="_blank">ZRender</a> (a whole new lightweight canvas library), is a comprehensive charting library offering an easy way of adding intuitive, interactive, and highly customizable charts to your commercial products. It works with all your web and mobile applications, including IE6/7/8/9/10/11, Chrome, Firefox, Safari and Opera. With original features like Drag-Recalculate, Data View and Scale Roaming, ECharts lets you mine and integrate data in ways you didn't think possible.</P>
<p>ECharts currently supports 12 chart types, including line (area), column (bar), scatter (bubble), pie (doughnut), radar (filled radar), candlestick, chord, gauge, funnel, map, eventRiver and force-directed chart. Each and every chart is equipped with 7 interactive components: title, tooltip, legend, scale, data area, timeline, and toolbox. Many of these components and charts can be combined in one chart.</P>
<img src="asset/img/architecture.png" alt="Echarts Architecture"/>
<h3>Glossary<a name="Glossary"> </a></h3>
<p>General Terms</p>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Term </th>
<th> Description </th>
</tr>
<tr>
<td> chart </td>
<td> A complete chart that may contain axes, legends, etc. It can either be a "basic" chart like line and pie, or a "combination" of those basic charts. </td>
</tr>
<tr>
<td> axis </td>
<td> A fixed reference line for the measurement of Cartesian coordinates. It can be divided into three types: category axis, value axis and time axis. </td>
</tr>
<tr>
<td> xAxis </td>
<td> The horizontal axis of a two-dimensional plot in Cartesian coordinates. It is category axis by convention and default. </td>
</tr>
<tr>
<td> yAxis </td>
<td> The vertical axis of a two-dimensional plot in Cartesian coordinates. It is value axis by convention and default. </td>
</tr>
<tr>
<td> grid </td>
<td> A network of regularly spaced lines on a Cartesian coordinate system that cross one another at right angles and are numbered to enable the precise location of a coordinate. </td>
</tr>
<tr>
<td> legend </td>
<td> The wording on a chart explaining the symbols used. </td>
</tr>
<tr>
<td> dataRange </td>
<td> Often used to select the scale of geographical data. </td>
</tr>
<tr>
<td> dataZoom </td>
<td> Often used to zoom in on a specific data area when the collection of data sets are large and complex. </td>
</tr>
<tr>
<td> roamController </td>
<td> Zoom and roam controller for the map. </td>
</tr>
<tr>
<td> toolbox </td>
<td> A set of functions accessible from a single menu, such as MarkLine, dataZoom, etc.</td>
</tr>
<tr>
<td> tooltip </td>
<td> A small "hover box" with detailed information about the item being hovered over. </td>
</tr>
<tr>
<td> timeline </td>
<td> Often used to display a list of data in chronological order. </td>
</tr>
<tr>
<td> series </td>
<td> Data series. A chart may contain multiple series, and each series may contain multiple data. </td>
</tr>
</table>
<P> Charts Terms</P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Term </th>
<th> Description </th>
</tr>
<tr>
<td> line </td>
<td> Including line, stacked line, area, stacked area. </td>
</tr>
<tr>
<td> bar </td>
<td> Including colunm (vertical), stacked column, bar (horizontal), stacked bar. </td>
</tr>
<tr>
<td> scatter </td>
<td> Including scatter and bubble. In scatter, at least two-dimensional data are needed. When the third dimensional data joins the company, it can be mapped to color or size. When mapped to size, scatter turns into bubble. </td>
</tr>
<tr>
<td> candlestick </td>
<td> We call it 'k' for short. Used primarily to describe price movements of a security, derivative, or currency for a designated span of time. </td>
</tr>
<tr>
<td> pie </td>
<td> Including pie and doughnut. Supports two kinds of (radius, area) Nightingale’s rose diagram. </td>
</tr>
<tr>
<td> radar </td>
<td> Including radar and filled radar. A graphical method of displaying multivariate data. </td>
</tr>
<tr>
<td> chord </td>
<td> Commonly used to display relational data. The outer part is a doughnut, used to reflect the proportion of data; the inner part is the chords that connect each sectors, used to display relational data. </td>
</tr>
<tr>
<td> force-directed chart </td>
<td> Often used to display complex topology. </td>
</tr>
<tr>
<td> map </td>
<td> Including World Map, China Map, Map of China Provinces & Cities, and extended maps on GeoJSON format. Supports SVG extension, such as body composition, football pitch, interior space, etc. </td>
</tr>
<tr>
<td> heatmap </td>
<td> Often used to display data distribution information. </td>
</tr>
<tr>
<td> gauge </td>
<td> Often used to display the key index in a BI system. </td>
</tr>
<tr>
<td> funnel </td>
<td> Often used to display the data change in a data process, like filtered, combined etd, common in BI system.</td>
</tr>
<tr>
<td> evnetRiver </td>
<td> EventRiver is commonly used to display multiple events with time attribute, the evolution of events can be shown by time sequence.</td>
</tr>
<tr>
<td> treemap </td>
<td> Treemap is commonly used to display a tree structure. And treemaps are very effective when size is the most important feature to be displayed..</td>
</tr>
<tr>
<td> venn </td>
<td> Venn shows all possible logical relations between a finite collection of different sets.</td>
</tr>
</table>
<h3>Chart Types<a name="Chart-Types"> </a></h3>
<P> The charting library includes basic single chart type and combination chart type. </P>
<p><img src="./asset/img/doc/charts.jpg" title="basic chart type" alt="basic chart type"/></P>
<h4>single chart type: line<a name="Line"> </a></h4>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> line </th>
<th> stacked line </th>
<th> area </th>
<th> stacked area </th>
</tr>
<tr>
<td><img src="./asset/img/example/line1.png" title="" alt="line"/></td>
<td><img src="./asset/img/example/line2.png" title="" alt="stacked line"/></td>
<td><img src="./asset/img/example/line3.png" title="" alt="area"/></td>
<td><img src="./asset/img/example/line4.png" title="" alt="stacked area"/></td>
</tr>
</table>
<h4>single chart type: bar (column)<a name="Bar"> </a></h4>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> column </th>
<th> stacked column </th>
<th> bar </th>
<th> stacked bar </th>
</tr>
<tr>
<td><img src="./asset/img/example/bar1.png" title="" alt="column"/></td>
<td><img src="./asset/img/example/bar2.png" title="" alt="stacked column"/></td>
<td><img src="./asset/img/example/bar3.png" title="" alt="bar"/></td>
<td><img src="./asset/img/example/bar4.png" title="" alt="stacked bar"/></td>
</tr>
</table>
<h4>single chart type: scatter<a name="Scatter"> </a></h4>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th colspan=2> scatter </th>
<th> bubble </th>
</tr>
<tr>
<td><img src="./asset/img/example/scatter1.png" title="" alt="scatter"/></td>
<td><img src="./asset/img/example/dataRange1.png" title="" alt="scatter"/></td>
<td><img src="./asset/img/example/scatter2.png" title="" alt="bubble"/></td>
</tr>
</table>
<h4>single chart type: k (candlestick)<a name="Candlestick"> </a></h4>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th colspan="2"> candlestick </th>
</tr>
<tr>
<td style="text-align:center"><img src="./asset/img/example/k1.png" title="" alt="candlestick" /></td>
<td style="text-align:center"><img src="./asset/img/example/k.png" title="" alt="candlestick" /></td>
</tr>
</table>
<h4>single chart type: pie<a name="Pie"> </a></h4>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> pie </th>
<th> doughnut </th>
<th> Nightingale’s rose diagram</th>
</tr>
<tr>
<td><img src="./asset/img/example/pie1.png" title="" alt="pie"/></td>
<td><img src="./asset/img/example/pie2.png" title="" alt="doughnut"/></td>
<td><img src="./asset/img/example/pie4.png" title="" alt="Nightingale’s rose diagram"/></td>
</tr>
</table>
<h4>single chart type: radar<a name="Radar"> </a></h4>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> radar </th>
<th> filled radar </th>
</tr>
<tr>
<td><img src="./asset/img/example/radar1.png" title="" alt="radar"/></td>
<td><img src="./asset/img/example/radar2.png" title="" alt="filled radar"/></td>
</tr>
</table>
<h4>single chart type: chord<a name="Chord"> </a></h4>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th colspan="2"> chord </th>
</tr>
<tr>
<td><img src="./asset/img/example/chord1.png" title="" alt="chord"/></td>
<td><img src="./asset/img/example/chord2.png" title="" alt="chord"/></td>
</tr>
</table>
<h4>single chart type: force<a name="Force"> </a></h4>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th colspan="3"> force-directed chart </th>
</tr>
<tr>
<td><img src="./asset/img/example/force1.png" title="" alt="force-directed chart"/></td>
<td><img src="./asset/img/example/force2.png" title="" alt="force-directed chart"/></td>
<td><img src="./asset/img/example/webkit-dep.png" title="" alt="force-directed chart"/></td>
</tr>
</table>
<h4>single chart type: map<a name="Map"> </a></h4>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> China Map </th>
<th> Map of China Provinces & Cities </th>
<th> World Map </th>
</tr>
<tr>
<td><img src="./asset/img/example/map1.png" title="" alt="China Map"/></td>
<td><img src="./asset/img/example/map3.png" title="" alt=" Map of China Provinces & Cities"/></td>
<td><img src="./asset/img/example/map4.png" title="" alt="World Map"/></td>
</tr>
<tr>
<th> Sub-Region Mode </th>
<th> Standard GeoJson Extension </th>
<th> SVG Extension</th>
</tr>
<tr>
<td><img src="./asset/img/example/map8.png" title="" alt="Sub-Region Mode"/></td>
<td><img src="./asset/img/example/map6.png" title="" alt="Standard GeoJson Extension"/></td>
<td><img src="./asset/img/example/map16.png" title="" alt="SVG Extension"/></td>
</tr>
</table>
<h4>single chart type: heatmap<a name="Heatmap"> </a></h4>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th colspan="3"> heatmap </th>
</tr>
<tr>
<td><img src="./asset/img/example/heatmap1.png" title="" alt="heatmap"/></td>
<td><img src="./asset/img/example/heatmap2.png" title="" alt="heatmap"/></td>
<td><img src="./asset/img/example/heatmap3.png" title="" alt="heatmap"/></td>
</tr>
</table>
<h4>single chart type: gauge<a name="Gauge"> </a></h4>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th colspan=2> angular gauge </th>
</tr>
<tr>
<td><img src="./asset/img/example/gauge4.png" title="" alt="angular gauge"/></td>
<td><img src="./asset/img/example/gauge3.png" title="" alt="angular gauge"/></td>
</tr>
</table>
<h4>single chart type: funnel<a name="Funnel"> </a></h4>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th colspan=3> funnel </th>
</tr>
<tr>
<td><img src="./asset/img/example/funnel1.png" title="" alt="funnel"/></td>
<td><img src="./asset/img/example/funnel2.png" title="" alt="funnel"/></td>
<td><img src="./asset/img/example/funnel3.png" title="" alt="funnel"/></td>
</tr>
</table>
<h4>single chart type: eventRiver<a name="eventRiver"> </a></h4>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th colspan=3> eventRiver </th>
</tr>
<tr>
<td><img src="./asset/img/example/eventRiver1.png" title="" alt="eventRiver"/></td>
<td><img src="./asset/img/example/eventRiver2.png" title="" alt="eventRiver"/></td>
</tr>
</table>
<h4>single chart type：treemap<a name="treemap"> </a></h4>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th colspan=2> Treemap </th>
</tr>
<tr>
<td><img src="./asset/img/example/treemap.png" title="" alt="Treemap"/></td>
<td><img src="./asset/img/example/treemap1.png" title="" alt="Treemap"/></td>
</tr>
</table>
<h4>single chart type：tree<a name="treeChart"> </a></h4>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th colspan=2> tree </th>
</tr>
<tr>
<td><img src="./asset/img/example/tree1.png" title="" alt="tree"/></td>
<td><img src="./asset/img/example/tree2.png" title="" alt="tree"/></td>
</tr>
</table>
<h4>single chart type：venn<a name="venn"> </a></h4>
<table cellspacing="0" class="ADoc_table full" style="width:600px;">
<tr>
<th colspan=1> Venn </th>
</tr>
<tr>
<td><img src="./asset/img/example/venn.png" title="" alt="Venn"/></td>
</tr>
</table>
<h4>single chart type：wordCloud<a name="wordCloud"> </a></h4>
<table cellspacing="0" class="ADoc_table full" style="width:600px;">
<tr>
<th colspan=1> Venn </th>
</tr>
<tr>
<td><img src="./asset/img/example/wordCloud.png" title="" alt="Venn"/></td>
</tr>
</table>
<h3>Import ECharts<a name="Import-ECharts"> </a></h3>
<p>We offer you various ways to import the ECharts library in your page, so that you can always choose the right one for your project. </p>
<h3>modular package import <a name="Import-ECharts1"> </a></h3>
<P>If you are familiar with modular programming, and your project is modular and follows the AMD module specification, then it will be fairly easy to import echarts in your page; Import a module loader, like <a href="https://github.com/ecomfe/esl" target="_blank">esl.js</a>, and configure the packages path to point to src, and you will enjoy the chart’s maximum flexibility, such as load-on-demand. Since ECharts is based on ZRender, you also need to download <a href="https://github.com/ecomfe/zrender" target="_blank">ZRender</a> locally. Reference is made to <a href="example/demo.html#-en" target="_blank">demo</a>. Now you need to configure as follows.</p>
<p>Please note: although package import maximizes flexibility in the development phase, it is not intended for going online directly. Reducing the number of documents requested is the most fundamental rule of front-end optimization, so please be sure to compress files when you go on line. </P>
<div class="code">
<pre>//from echarts example
require.config({
packages: [
{
name: 'echarts',
location: '../../src',
main: 'echarts'
},
{
name: 'zrender',
location: '../../../zrender/src', // zrender and echarts are in the same directory.
main: 'zrender'
}
]
});
</pre>
</div>
<h3>modular single file import (<b>preferred</b>) <a name="Import-ECharts2"> </a></h3>
<P>If you use modular programming, but do not have the packaging environment, or do not want to include a third party library source file to your project, then single file import seems to be a good choice. Like modular package import, you have to be familiar with modular programming. </P>
<p>Begin with 2.1.8, we have created a powerful tool for echarts compression: <a href="https://github.com/ecomfe/echarts-optimizer" target="_blank">echarts-optimizer</a>. As you can see below, the build folder has included several single files of different combinations which are generated by <a href="https://github.com/ecomfe/echarts-optimizer" target="_blank">echarts-optimizer</a>, and you are free to choose one of them according to your needs:</p>
<ul>
<li>dist ( folder ) : compressed</li>
<li>
<ul>
<li>echarts.js : The echarts core file which should be import by a <script> tag, an AMD loader (<a href="https://github.com/ecomfe/esl" target="_blank">esl.js</a>) has been included in this file.</li>
<li>chart ( folder ) : Via dependency analysis, echarts-optimizer generates a single file for every chart types, you can choose one of them according to your needs:
<ul>
<li>line.js : Line ( require echarts/chart/bar as the same time if Magic switch is needed )</li>
<li>bar.js : Bar ( require echarts/chart/line as the same time if Magic switch is needed )</li>
<li>scatter.js : Scatter</li>
<li>k.js : Candlestick</li>
<li>pie.js : Pie ( require echarts/chart/funnel as the same time if Magic switch is needed )</li>
<li>radar.js : Radar</li>
<li>map.js : Map</li>
<li>force.js : Force-directed Chart ( require echarts/chart/chord as the same time if Magic switch is needed )</li>
<li>chord.js : Chord ( require echarts/chart/force as the same time if Magic switch is needed )</li>
<li>funnel.js : Funnel ( require echarts/chart/pie as the same time if Magic switch is needed )</li>
<li>gauge.js : Gauge</li>
<li>eventRiver.js : EventRiver</li>
</ul>
</li>
</ul>
</li>
<li>source ( folder ) : uncompressed, same as dist which can be used to debug.</li>
</ul>
<p>See example in <a href="example/www/index.html" target="_blank">ECharts single file import</a>, stored in example/www. First you need to create a script tag src to echarts core ( echarts.js ).</p>
<div class="code">
<pre>//from echarts example
<body>
<div id="main" style="height:400px;"></div>
...
<script src="./js/echarts.js"></script>
</body>
</pre>
</div>
<p>You have get an AMD environment after echarts.js import, require.conifg as below:</p>
<div class="code">
<pre>//from echarts example
<body>
<div id="main" style="height:400px;"></div>
...
<script src="./js/echarts.js"></script>
<script type="text/javascript">
require.config({
paths: {
echarts: './js/dist'
}
});
</script>
</body>
</pre>
</div>
<p>You can use ECharts by dynamic loading after the require.config.</p>
<div class="code">
<pre>//from echarts example
<body>
<div id="main" style="height:400px;"></div>
...
<script src="./js/echarts.js"></script>
<script type="text/javascript">
require.config({
paths: {
echarts: './js/dist'
}
});
require(
[
'echarts',
'echarts/chart/line', // load-on-demand, don't forget the Magic switch type.
'echarts/chart/bar'
],
function (ec) {
var myChart = ec.init(document.getElementById('main'));
var option = {
...
}
myChart.setOption(option);
}
);
</script>
</body>
</pre>
</div>
<p>In a nutshell, it takes four steps to import ECharts in module single file. </p>
<ol>
<li>Prepare a Dom with size (width and height) for ECharts. (Of course it can be dynamically generated.)</li>
<li>Create a script tag src to echarts core ( echarts.js ).</li>
<li>Configure a ECharts path for the module loader, and link to echarts.js from the current page, see above.</li>
<li>Dynamically load ECharts and use callback function to initialize it. (PS: if you want to use ECharts on a page where you've already loaded it, just require('echarts').init(dom).) </li>
</ol>
<p>see <a href="./start.html" target="_blank" style="margin-right: 50px;">Getting started »</a></p>
<h3>plain single file import <a name="Import-ECharts3"> </a></h3>
<P>The 1.3.5 release added support for plain import. If your project is not based on modularity, or it’s based on CMD specification (such as using sea.js), then it may not be appropriate for you to include the modular AMD-based ECharts. Therefore it is recommended that you use script plain import. Forget about require, you can directly use two global namespaces - ECharts, ZRender - after script plain import. Reference is made to <a href="example/www2/index.html" target="_blank">ECharts plain import</a>. Note that excanvas judges Canvas support by inserting the body tag into Canvas node, so if you put the script tag of ECharts into the head tag, IE8- browsers would give an error; the solution is to move the script tag into (behind) the body tag.</p>
<p>In the plain import environment, you can import common modules directly through namespace, same as the modular path, such as: <br/>echarts.config = require('echarts/config'), zrender.tool.color = require('zrender/tool/color'). </p>
<div class="code">
<pre>//from echarts example
<body>
<div id="main" style="height:400px;"></div>
...
<script src="example/www2/js/dist/echarts-all.js"></script>
<script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
...
}
myChart.setOption(option);
</script>
</body>
</pre>
</div>
<p>Single files that can be directly imported are listed below:</p>
<ul>
<li>dist/echarts-all.js : a compressed library of all the chart types, including World Map, China Map and Map of China Provinces & Cities.</li>
<li>source/echarts-all.js : an uncompressed library of all the chart types, including World Map, China Map and Map of China Provinces & Cities. Available for debugging purposes.</li>
</ul>
<p>see <a href="./start.html" target="_blank" style="margin-right: 50px;">Getting started »</a></p>
<h3>Custom Build ECharts Single File <a name="Custom-Build-Echarts-Single-File"></a></h3>
<p>More detail about echarts-optimizer can be found at <a href="https://github.com/ecomfe/echarts-optimizer/blob/master/README.md" target="_blank">README.md</a></p>
<h3>Initialization <a name="Initialization"> </a></h3>
<p>After getting echarts interface through require (or in namespace), you can start to initialize chart. echarts interface has only one init method. When implementing init, pass in a dom node with size (width and height are not necessarily visible, as long as they can be calculated) and then you will get the instances of the chart object. The charting library has multiple instances, which means that you can init multiple charts at the same page on multiple doms, and if you init on the same dom repeatedly, the existing instance will be automatically disposed (1.4.0+ ). init method is illustrated as follows: </p>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Name </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{ECharts}</b> init </td>
<td> <b>{dom}</b> dom, <br/><b>{string | Object =}</b> theme </td>
<td> Initialization interface, returns ECharts instances. Dom is the node for charts. Theme is optional. For built-in themes ('macarons', 'infographic'), directly pass in name. For custom extended themes, pass in the theme object. Like this :
<br/>var myCharts = echarts.init(document.getElementById('main'), 'macarons')；
</td>
</tr>
</table>
<p>For available methods of chart instances, see <a href="#Methods">Methods</a>. </p>
<p>The initialization code after including ECharts is as follows: </p>
<div class="code">
<pre>
// As the entrance
require(
[
'echarts',
'echarts/chart/pie'
],
function (ec) {
var myChart = ec.init(document.getElementById('main'));
myChart.setOption({...});
}
);
// -----------------------------
// For non-entrance or when using again, the chart has been loaded and registered
require('echarts').init(dom).setOption({...});
// If you need to use of ECharts later on, you'd better save the chart instances returned by init.
var myChart = require('echarts').init(dom);
myChart.setOption({...}); </pre>
</div>
<p>If you are familiar with modularity, you may skip the following code. </p>
<div class="code">
<pre>
// If you are strange to modularity, you can...
var echarts;
require(['echarts'], function (ec){
echarts = ec;
});
// Yes, save echarts after loading it, and use it as namespace. </pre>
</div>
<h3>Instance Methods<a name="Instance-Methods"> </a></h3>
<p>Instance refers to the object returned by interface init (), such as "myChart" in the code above. All the non-get interfaces return themselves to support chained calls.</p>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Name </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td><b>{self}</b> setOption</td>
<td><b>{Object}</b> option, <br/><b>{boolean=}</b> notMerge</td>
<td>Universal interface, controls all the configuration options of chart instances (see <a href="#Option" title="">option</a>). When called multiple times, the option will be merged by default, which makes setOption easily become a universal method to update any attributes. For example, if you only want to change the title text, you only need to: <br/> setOption({title : {text : 'new title'}}); <br/>Of course, you can also stop the option from being merged with the last option by setting the notMerger parameter to true, when data or length changes between each setOption.
<br/><br/>Since 2.0.0, ECharts added support for timeline the component. When option includes timeline (see <a href="#Timeline" title="">timeline</a>), each individual option should be placed into an array named options, such as
<pre>myCharts.setOption({
timeline : {...},
options : [
{ // option1
title : {...},
series : [...]
},
{...}, // option2
...
]
});</pre>
</td>
</tr>
<tr>
<td><b>{Object}</b> getOption</td>
<td><b>{void}</b></td>
<td>Returns the clone (copy) of the currently displayed option held internally. </td>
</tr>
<tr>
<td><b>{self}</b> setSeries</td>
<td><b>{Array}</b> series, <br/><b>{boolean=}</b> notMerge</td>
<td>Data interface, the data array generated by data-driven chart. (see <a href="#Series" title="">series</a>), same result as calling setOption({series : {...}}, notMerge). </td>
</tr>
<tr>
<td><b>{Object}</b> getSeries</td>
<td><b>{void}</b></td>
<td>Returns the clone (copy) of the currently displayed option held internally, same result as returning getOption().series. </td>
</tr>
<tr>
<td><b>{self}</b> addData</td>
<td>One set of data：
<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/>Add multiple sets of data:
<br/><b>{Array}</b> params
</td>
<td>Dynamic data interface. <a href="example/dynamicLineBar.html#-en" target="_blank">Try this (Line & Bar) »</a> <a href="example/dynamicScatterK.html#-en" target="_blank">Try this (Scatter & Candlestick) »</a> <a href="example/dynamicPieRadar.html#-en" target="_blank">Try this (Pie & Radar) »</a>
<br/>seriesIdx: series index
<br/>data: adds data
<br/>isHead: whether to insert at the head of the line. Defaults to unspecified. When unspecified or false, insert at the end of the line.
<br/>dataGrow: whether to increase the length of the data line. Defaults to unspecified. When unspecified or false, remove the data of the target array.
<br/>additionData: whether to add category axis (pie as the legend) data. Other operations are same as isHead and dataGrow.
<br/>When adding multiple sets of data, parameters are:
<br/>params == [[seriesIdx, data, isHead, dataGrow, additionData], [...]]
</td>
</tr>
<tr>
<td><b>{self}</b> addMarkPoint</td>
<td><b>{number}</b> seriesIdx
<br/><b>{Object}</b> markData
</td>
<td>add markPoint interface, which includes
<br/>seriesIdx: series index
<br/>markData: [markLine] object, same as <a href="#SeriesMarkPoint" title="">series.markPoint</a>, supports multiple
</td>
</tr>
<tr>
<td><b>{self}</b> addMarkLine</td>
<td><b>{number}</b> seriesIdx
<br/><b>{Object}</b> markData
</td>
<td>add markPoint interface, which includes
<br/>seriesIdx: series index
<br/>markData: [markLine] object, same as <a href="#SeriesMarkLine" title="">series.markLine</a>, supports multiple
</td>
</tr>
<tr>
<td><b>{self}</b> delMarkPoint</td>
<td><b>{number}</b> seriesIdx
<br/><b>{string}</b> markName
</td>
<td>delete a single markPoint interface, which includes
<br/>seriesIdx: series index
<br/>markName: [markPoint] name
</td>
</tr>
<tr>
<td><b>{self}</b> delMarkLine</td>
<td><b>{number}</b> seriesIdx
<br/><b>{string}</b> markName
</td>
<td>delete a single markLine interface, which includes
<br/>seriesIdx: series index
<br/>markName: [markLine] name. The default makeLine name is the starting point's name in the makeLine's data. While the ending point is named too, like the map, both point's name would be joined as the default name like this "nameStart > nameEnd", such as
<br/>[{name:'Beijing', value:100}, {name:'Shanghai'}]
<br/>In this case, markName is "Beijing > notMerge"
</td>
</tr>
<tr>
<td><b>{self}</b> on</td>
<td><b>{string}</b> eventName, <br/><b>{Function}</b> eventListener</td>
<td>event bind, mount all the event naming on require ('echarts/config'). EVENT (echarts.config.EVENT for non-modular) namespace. It is recommended that you use this namespace as the event name to include. Events supported by the current version are:
<br/>-----------------------Base Evetn-----------------------
<br/>REFRESH,
<br/>RESTORE,
<br/>RESIZE,
<br/>CLICK,
<br/>DBLCLICK,
<br/>HOVER,
<br/>MOUSEOUT,
<br/>-------------------Interactive Event--------------------
<br/>DATA_CHANGED,
<br/>DATA_VIEW_CHANGED,
<br/>MAGIC_TYPE_CHANGED,
<br/>TIMELINE_CHANGED,
<br/>DATA_ZOOM,
<br/>DATA_RANGE,
<br/>DATA_RANGE_SELECTED,
<br/>DATA_RANGE_HOVERLINK,
<br/>LEGEND_SELECTED,
<br/>LEGEND_HOVERLINK,
<br/>MAP_ROAM,
<br/>MAP_SELECTED,
<br/>PIE_SELECTED,
<br/>FORCE_LAYOUT_END,
<br/><a href="./example/event.html#-en" target="_blank">event debugging » </a>
</td>
</tr>
<tr>
<td><b>{self}</b> un</td>
<td><b>{string}</b> eventName, <br/><b>{Function}</b> eventListener</td>
<td>unbind event </td>
</tr>
<tr>
<td><b>{self}</b> setTheme</td>
<td><b>{string | Object}</b> theme</td>
<td> Set the theme. For built-in themes ('macarons', 'infographic'), pass in the name directly. For custom extended themes, pass in the theme object. </td>
</tr>
<tr>
<td><b>{self}</b> connect</td>
<td><b>{ECharts | Array <ECharts>}</b> connectTarget</td>
<td>Chart Linkage, the linkage target passed in is ECharts instance, supports arrays. Supports tooltip linkage in Cartesian charts, automatic stitching of the saved images. The supported linkage events are:
<br/>REFRESH，RESTORE，MAGIC_TYPE_CHANGED
<br/>DATA_ZOOM，DATA_RANGE，LEGEND_SELECTED
<br/><a href="./example/mix8.html#-en" target="_blank">Chart Linkage »</a>
</td>
</tr>
<tr>
<td><b>{self}</b> disConnect</td>
<td><b>{ECharts | Array <ECharts>}</b> connectTarget</td>
<td>Disconnect chart linkage </td>
</tr>
<tr>
<td><b>{self}</b> showLoading</td>
<td><b>{Object}</b> loadingOption</td>
<td>Option for the loading screen, (see <a href="#Loadingoption" title="">loadingOption</a>), show a loading label text. <a href="example/loading.html#-en" target="_blank">try this »</a></td>
</tr>
<tr>
<td><b>{self}</b> hideLoading</td>
<td><b>{void}</b></td>
<td>Option for the loading screen, hide the loading screen. </td>
</tr>
<tr>
<td><b>{ZRender}</b> getZrender</td>
<td><b>{void}</b></td>
<td>Get the ZRender instance used by the current chart, available for extra images addition or a high level of customization. For zrender interface, see <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>Get the current chart's Base64 image dataURL, not supported on IE8-, imgType: image type. Supports png|jpeg. Defaults to png. </td>
</tr>
<tr>
<td><b>{Dom}</b> getImage</td>
<td><b>{string=}</b> imgType</td>
<td>Get the current chart's imag, imgType: image type. Supports png|jpeg. Defaults to png. </td>
</tr>
<tr>
<td><b>{self}</b> resize</td>
<td><b>{void}</b></td>
<td>ECharts does not bind the resize event, and the internal system do not know whether the size of the display area changes or not. So you can bind the events you need, update the area by calling resize. Like window.onresize = myChart.resize.</td>
</tr>
<tr>
<td><b>{self}</b> refresh</td>
<td><b>{void}</b></td>
<td>Refresh the chart. LEGEND_SELECTED, DATA_ZOOM and DRAG remain unchanged. </td>
</tr>
<tr>
<td><b>{self}</b> restore</td>
<td><b>{void}</b></td>
<td>Restore the chart. All the states are cleared and restored to the original states. </td>
</tr>
<tr>
<td><b>{self}</b> clear</td>
<td><b>{void}</b></td>
<td>Clear the drawing content. Instances are available after Clearing. </td>
</tr>
<tr>
<td><b>{void}</b> dispose</td>
<td><b>{void}</b></td>
<td>Dispose the chart instances. Instances are unavailable after disposing. </td>
</tr>
</table>
<h3>Options<a name="Options"> </a></h3>
<h4>option<a name="Option"> </a></h4>
<P> Chart options, including all the configuration options for ECharts demos: <span class='bgGreen'> general options </span>, <span class='bgRed'> component options </span>, <span class='bgBlue'> data options </span></P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Name </th>
<th> Description </th>
</tr>
<tr class='bgGreen'>
<td> <b>{color}</b> backgroundColor </td>
<td> The background color or gradient for the outer chart area, (see <a href="#BackgroundColor" title="">backgroundColor</a>). Support rgba and defaults to null, transprent. </td>
</tr>
<tr class='bgGreen'>
<td> <b>{Array}</b> color </td>
<td> List of color for the array series, (see <a href="#Color" title="">color</a>), possible array is: ['#87cefa', 'rgba(123,123,123,0.5)','...']. When there are more series than colors in the list, new colors are pulled from the start again. </td>
</tr>
<tr class='bgGreen'>
<td> <b>{boolean}</b> renderAsImage </td>
<td> Allows rendering as image in any browser but IE8-, (see <a href="#RenderAsImage" title="">renderAsImage</a>). </td>
</tr>
<tr class='bgGreen'>
<td> <b>{boolean}</b> calculable </td>
<td> Specifies whether the drag-recalculate feature will be enabled. Defaults to false. (See <a href="#calculable" title="">calculable</a>, and other related properties like
<a href="#CalculableColor" title="">calculableColor</a>,
<a href="#CalculableHolderColor" title="">calculableHolderColor</a>,
<a href="#NameConnector" title="">nameConnector</a>,
<a href="#ValueConnector" title="">valueConnector</a>).
</td>
</tr>
<tr class='bgGreen'>
<td> <b>{boolean}</b> animation </td>
<td> Specifies whether the animation will be enabled. Defaults to true. (See
<a href="#Animation" title="">animation</a>, and other related properties like
<a href="#AddDataAnimation" title="">addDataAnimation</a>,