Extended Shortcode - Echarts
![/documentation/content-management/shortcodes/extended/echarts/featured-image.webp](/documentation/content-management/shortcodes/extended/echarts/featured-image.webp)
The echarts
shortcode supports data visualization in Hugo with ECharts library.
Introduction
ECharts is a library helping you to generate interactive data visualization.
The basic chart types ECharts supports include line series, bar series, scatter series, pie charts, candle-stick series, boxplot series for statistics, map series, heatmap series, lines series for directional information, graph series for relationships, treemap series, sunburst series, parallel series for multi-dimensional data, funnel series, gauge series. And it’s extremely easy to create a combinition of them with ECharts.
How to Use
Just insert your ECharts option in JSON
, YAML
or TOML
format in the echarts
shortcode and that’s it.
Example echarts
input in JSON
format:
View source
|
|
Example echarts
input in YAML
format:
View source
|
|
Example echarts
input in TOML
format:
View source
|
|
Parameters
The echarts
shortcode has the following named parameters, and the positional parameters ordered from top to bottom:
Parameter | Description | Type | Default |
---|---|---|---|
width | Width of the data visualization | string | 100% |
height | Height of the data visualization | string | 30rem |
Related Content
- Mermaid Shortcode
- Extended Shortcodes Overview
- Built-in Shortcodes
- Extended Markdown Syntax
- Content Management Overview
![Lruihao Alipay](/images/alipay.jpg)
![Lruihao WeChat Pay](/images/wechatpay.jpg)