短代碼
通過短代碼來使用 ECharts。
贊助
成為我們的資助者或贊助商，以支持我們的工作。
本頁內容
贊助商
語法
TOML/YAML/JSON 語法
1{{< echarts param1=value1 param2=value2 >}}
2CHART OPTIONS WRITTEN IN JSON/TOML/YAML
3{{< /echarts >}}
TOML/YAML/JSON 數據文件語法
1{{< echarts data="" param1=value1 param2=value2 />}}
JavaScript 語法
1{{< echarts _js=true param1=value1 param2=value2 >}}
2CHART OPTIONS WRITTEN IN JSON/TOML/YAML
3{{< /echarts >}}
JavaScript 文件語法
1{{< echarts _js=true _jsFile="" param1=value1 param2=value2 />}}
參數
data
| 索引 | 名稱 | 類型 | 必填 | 默認值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
| - | data | string | - | - | - | - |
相對於 data 目錄或者頁面目錄的數據文件的名稱（不带扩展名）。
_js
| 索引 | 名稱 | 類型 | 必填 | 默認值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
| - | _js | boolean | - | false | - | - |
表示圖表是否用 JavaScript 編寫的，為 true 時，你必須 return 圖表的參數。
_jsFile
| 索引 | 名稱 | 類型 | 必填 | 默認值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
| - | _jsFile | string | - | - | - | - |
相對於 assets 目錄或者頁面目錄的 JavaScript 文件的名稱。
height
| 索引 | 名稱 | 類型 | 必填 | 默認值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
| - | height | number | - | 400 | - | - |
圖表容器高度。
weight
| 索引 | 名稱 | 類型 | 必填 | 默認值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
| - | weight | number | - | 100% | - | - |
圖表容器寬度。
其他
你可以為圖表容器設置任意屬性，比如 class、id 和 data-*。
示例
JSON 示例
源碼
1{{< echarts >}}
2{
3 "xAxis": {
4 "type": "category",
5 "data": [
6 "Mon",
7 "Tue",
8 "Wed",
9 "Thu",
10 "Fri",
11 "Sat",
12 "Sun"
13 ]
14 },
15 "yAxis": {
16 "type": "value"
17 },
18 "series": [
19 {
20 "data": [
21 150,
22 230,
23 224,
24 218,
25 135,
26 147,
27 260
28 ],
29 "type": "line"
30 }
31 ]
32}
33{{< /echarts >}}
34```結果
JSON 頁面數據文件示例
content/docs/shortcode/charts/gauge.json
1{
2 "tooltip": {
3 "formatter": "{a} <br/>{b} : {c}%"
4 },
5 "series": [
6 {
7 "name": "Pressure",
8 "type": "gauge",
9 "detail": {
10 "formatter": "{value}"
11 },
12 "data": [
13 {
14 "value": 50,
15 "name": "SCORE"
16 }
17 ]
18 }
19 ]
20}
源碼
1{{< echarts data="charts.gauge" />}}結果
JSON 站點數據文件示例
data/charts/line.json
1return {
2 title: {
3 text: 'Referer of a Website',
4 subtext: 'Fake Data',
5 left: 'center'
6 },
7 tooltip: {
8 trigger: 'item'
9 },
10 legend: {
11 orient: 'vertical',
12 left: 'left'
13 },
14 series: [
15 {
16 name: 'Access From',
17 type: 'pie',
18 radius: '50%',
19 data: [
20 { value: 1048, name: 'Search Engine' },
21 { value: 735, name: 'Direct' },
22 { value: 580, name: 'Email' },
23 { value: 484, name: 'Union Ads' },
24 { value: 300, name: 'Video Ads' }
25 ],
26 emphasis: {
27 itemStyle: {
28 shadowBlur: 10,
29 shadowOffsetX: 0,
30 shadowColor: 'rgba(0, 0, 0, 0.5)'
31 }
32 }
33 }
34 ]
35};
源碼
1{{< echarts data="charts.line" />}}結果
帶有自定義屬性的 JSON 示例
源碼
1{{< echarts height=480 id=echarts-bar class="echarts-bar" data-type="bar" >}}
2{
3 "xAxis": {
4 "type": "category",
5 "data": [
6 "Mon",
7 "Tue",
8 "Wed",
9 "Thu",
10 "Fri",
11 "Sat",
12 "Sun"
13 ]
14 },
15 "yAxis": {
16 "type": "value"
17 },
18 "series": [
19 {
20 "data": [
21 120,
22 200,
23 150,
24 80,
25 70,
26 110,
27 130
28 ],
29 "type": "bar"
30 }
31 ]
32}
33{{< /echarts >}}結果
TOML 示例
源碼
1{{< echarts >}}
2[xAxis]
3type = "category"
4boundaryGap = false
5data = [ "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" ]
6
7[yAxis]
8type = "value"
9
10[[series]]
11data = [ 820, 932, 901, 934, 1_290, 1_330, 1_320 ]
12type = "line"
13areaStyle = { }
14{{< /echarts >}}結果
YAML 示例
源碼
1{{< echarts >}}
2title:
3 text: Stacked Area Chart
4tooltip:
5 trigger: axis
6 axisPointer:
7 type: cross
8 label:
9 backgroundColor: "#6a7985"
10legend:
11 data:
12 - Email
13 - Union Ads
14 - Video Ads
15 - Direct
16 - Search Engine
17toolbox:
18 feature:
19 saveAsImage: {}
20grid:
21 left: 3%
22 right: 4%
23 bottom: 3%
24 containLabel: true
25xAxis:
26- type: category
27 boundaryGap: false
28 data:
29 - Mon
30 - Tue
31 - Wed
32 - Thu
33 - Fri
34 - Sat
35 - Sun
36yAxis:
37- type: value
38series:
39- name: Email
40 type: line
41 stack: Total
42 areaStyle: {}
43 emphasis:
44 focus: series
45 data:
46 - 120
47 - 132
48 - 101
49 - 134
50 - 90
51 - 230
52 - 210
53- name: Union Ads
54 type: line
55 stack: Total
56 areaStyle: {}
57 emphasis:
58 focus: series
59 data:
60 - 220
61 - 182
62 - 191
63 - 234
64 - 290
65 - 330
66 - 310
67- name: Video Ads
68 type: line
69 stack: Total
70 areaStyle: {}
71 emphasis:
72 focus: series
73 data:
74 - 150
75 - 232
76 - 201
77 - 154
78 - 190
79 - 330
80 - 410
81- name: Direct
82 type: line
83 stack: Total
84 areaStyle: {}
85 emphasis:
86 focus: series
87 data:
88 - 320
89 - 332
90 - 301
91 - 334
92 - 390
93 - 330
94 - 320
95- name: Search Engine
96 type: line
97 stack: Total
98 label:
99 show: true
100 position: top
101 areaStyle: {}
102 emphasis:
103 focus: series
104 data:
105 - 820
106 - 932
107 - 901
108 - 934
109 - 1290
110 - 1330
111 - 1320
112{{< /echarts >}}結果
JavaScript 示例
源碼
1{{< echarts _js=true id="echarts-js-example" >}}
2var option = {
3 color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
4 title: {
5 text: 'Gradient Stacked Area Chart'
6 },
7 tooltip: {
8 trigger: 'axis',
9 axisPointer: {
10 type: 'cross',
11 label: {
12 backgroundColor: '#6a7985'
13 }
14 }
15 },
16 legend: {
17 data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
18 },
19 toolbox: {
20 feature: {
21 saveAsImage: {}
22 }
23 },
24 grid: {
25 left: '3%',
26 right: '4%',
27 bottom: '3%',
28 containLabel: true
29 },
30 xAxis: [
31 {
32 type: 'category',
33 boundaryGap: false,
34 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
35 }
36 ],
37 yAxis: [
38 {
39 type: 'value'
40 }
41 ],
42 series: [
43 {
44 name: 'Line 1',
45 type: 'line',
46 stack: 'Total',
47 smooth: true,
48 lineStyle: {
49 width: 0
50 },
51 showSymbol: false,
52 areaStyle: {
53 opacity: 0.8,
54 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
55 {
56 offset: 0,
57 color: 'rgb(128, 255, 165)'
58 },
59 {
60 offset: 1,
61 color: 'rgb(1, 191, 236)'
62 }
63 ])
64 },
65 emphasis: {
66 focus: 'series'
67 },
68 data: [140, 232, 101, 264, 90, 340, 250]
69 },
70 {
71 name: 'Line 2',
72 type: 'line',
73 stack: 'Total',
74 smooth: true,
75 lineStyle: {
76 width: 0
77 },
78 showSymbol: false,
79 areaStyle: {
80 opacity: 0.8,
81 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
82 {
83 offset: 0,
84 color: 'rgb(0, 221, 255)'
85 },
86 {
87 offset: 1,
88 color: 'rgb(77, 119, 255)'
89 }
90 ])
91 },
92 emphasis: {
93 focus: 'series'
94 },
95 data: [120, 282, 111, 234, 220, 340, 310]
96 },
97 {
98 name: 'Line 3',
99 type: 'line',
100 stack: 'Total',
101 smooth: true,
102 lineStyle: {
103 width: 0
104 },
105 showSymbol: false,
106 areaStyle: {
107 opacity: 0.8,
108 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
109 {
110 offset: 0,
111 color: 'rgb(55, 162, 255)'
112 },
113 {
114 offset: 1,
115 color: 'rgb(116, 21, 219)'
116 }
117 ])
118 },
119 emphasis: {
120 focus: 'series'
121 },
122 data: [320, 132, 201, 334, 190, 130, 220]
123 },
124 {
125 name: 'Line 4',
126 type: 'line',
127 stack: 'Total',
128 smooth: true,
129 lineStyle: {
130 width: 0
131 },
132 showSymbol: false,
133 areaStyle: {
134 opacity: 0.8,
135 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
136 {
137 offset: 0,
138 color: 'rgb(255, 0, 135)'
139 },
140 {
141 offset: 1,
142 color: 'rgb(135, 0, 157)'
143 }
144 ])
145 },
146 emphasis: {
147 focus: 'series'
148 },
149 data: [220, 402, 231, 134, 190, 230, 120]
150 },
151 {
152 name: 'Line 5',
153 type: 'line',
154 stack: 'Total',
155 smooth: true,
156 lineStyle: {
157 width: 0
158 },
159 showSymbol: false,
160 label: {
161 show: true,
162 position: 'top'
163 },
164 areaStyle: {
165 opacity: 0.8,
166 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
167 {
168 offset: 0,
169 color: 'rgb(255, 191, 0)'
170 },
171 {
172 offset: 1,
173 color: 'rgb(224, 62, 76)'
174 }
175 ])
176 },
177 emphasis: {
178 focus: 'series'
179 },
180 data: [220, 302, 181, 234, 210, 290, 150]
181 }
182 ]
183}
184return option;
185{{< /echarts >}}結果
頁面 JavaScript 文件示例
content/docs/shortcode/charts/large-scale-area.js
1let base = +new Date(1968, 9, 3);
2let oneDay = 24 * 3600 * 1000;
3let date = [];
4let data = [Math.random() * 300];
5for (let i = 1; i < 20000; i++) {
6 var now = new Date((base += oneDay));
7 date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
8 data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
9}
10return {
11 tooltip: {
12 trigger: 'axis',
13 position: function (pt) {
14 return [pt[0], '10%'];
15 }
16 },
17 title: {
18 left: 'center',
19 text: 'Large Area Chart'
20 },
21 toolbox: {
22 feature: {
23 dataZoom: {
24 yAxisIndex: 'none'
25 },
26 restore: {},
27 saveAsImage: {}
28 }
29 },
30 xAxis: {
31 type: 'category',
32 boundaryGap: false,
33 data: date
34 },
35 yAxis: {
36 type: 'value',
37 boundaryGap: [0, '100%']
38 },
39 dataZoom: [
40 {
41 type: 'inside',
42 start: 0,
43 end: 10
44 },
45 {
46 start: 0,
47 end: 10
48 }
49 ],
50 series: [
51 {
52 name: 'Fake Data',
53 type: 'line',
54 symbol: 'none',
55 sampling: 'lttb',
56 itemStyle: {
57 color: 'rgb(255, 70, 131)'
58 },
59 areaStyle: {
60 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
61 {
62 offset: 0,
63 color: 'rgb(255, 158, 68)'
64 },
65 {
66 offset: 1,
67 color: 'rgb(255, 70, 131)'
68 }
69 ])
70 },
71 data: data
72 }
73 ]
74};
源碼
1{{< echarts _js=true _jsFile="charts/large-scale-area.js" id="echarts-js-page-file-example" />}}結果
站點 JavaScript 文件示例
assets/charts/pie-website-referer.js
1return {
2 title: {
3 text: 'Referer of a Website',
4 subtext: 'Fake Data',
5 left: 'center'
6 },
7 tooltip: {
8 trigger: 'item'
9 },
10 legend: {
11 orient: 'vertical',
12 left: 'left'
13 },
14 series: [
15 {
16 name: 'Access From',
17 type: 'pie',
18 radius: '50%',
19 data: [
20 { value: 1048, name: 'Search Engine' },
21 { value: 735, name: 'Direct' },
22 { value: 580, name: 'Email' },
23 { value: 484, name: 'Union Ads' },
24 { value: 300, name: 'Video Ads' }
25 ],
26 emphasis: {
27 itemStyle: {
28 shadowBlur: 10,
29 shadowOffsetX: 0,
30 shadowColor: 'rgba(0, 0, 0, 0.5)'
31 }
32 }
33 }
34 ]
35};
源碼
1{{< echarts _js=true _jsFile="charts/pie-website-referer.js" id="echarts-js-site-file-example" />}}結果