Browse Docs

Code Block

HugoMods Authors March 14, 2024 6 min read Docs Markdown Code Code Block TOML YAML JSON JavaScript

Using ECharts with code block.

Donate

Become a backer or sponsor to support our work.

AFDIAN GitHub Sponsors PayPal
On this page
Sponsors

Syntax

TOML/YAML/JSON Syntax

1```echarts {param1=value1 param2=value2 ...}
2CHART OPTIONS WRITTEN IN JSON/TOML/YAML
3```

JavaScript Syntax

1```echarts {_js=true param1=value1 param2=value2 ...}
2options = {};
3return options;
4```

Parameters

_js

PositionNameTypeRequiredDefaultSinceExample
-_jsboolean-false--

Indicates whether if the chart is written in JavaScript, when true, you must return the chart options.

height

PositionNameTypeRequiredDefaultSinceExample
-heightnumber-400--

The height of chart container.

weight

PositionNameTypeRequiredDefaultSinceExample
-weightnumber-100%--

The width of chart container.

Others

You’re able to set any attributes for the chart containers, such as class, id and data-*.

Examples

JSON Example

Source
 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```
Result

JSON Example With Custom Attributes

Source
 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```
Result

TOML Example

Source
 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```
Result

YAML Example

Source
  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```
Result

JavaScript Example

Source
  1```echarts {_js=true}
  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```
Result
Installation
Shortcode