The Apache ECharts components provides access to Apache ECharts.
ECharts are accessed through the data-plugin class, using the following syntax.
<div class="data-plugin data-plugin-echarts" data-options="{..options..}">
{
.. echarts JSON ..
}
</div>See ECharts Examples for example JSON.
Charts are always scaled to fill 100% width of the div.
data-options is optional and contains a JSON structure. The only options are "height" and "min-height".
- "height" is the height in pixels, or in percentage of the width. It defaults to "61.8%", to give a pleasing aspect ratio.
- "min-height" is the minimum height in pixels. This is useful to avoid graphs with a low height percentage from scrunching up too much on narrow screens.
Hint: To see the JSON to debug problems, use a class of "data-plugin showjson" to show the JSON instead of a chart. You can achieve the same by putting in an unknown second class, e.g. "data-plugin Xdata-plugin-echarts".
Example
<div class="data-plugin data-plugin-echarts" data-options='{"height":"50%","min-height":250}'>{
"xAxis": {
"type": "category",
"data": [
"Mon",
"Tue",
"Wed",
"Thu",
"Fri",
"Sat",
"Sun"
]
},
"yAxis": {
"type": "value"
},
"series": [
{
"data": [
150,
230,
224,
218,
135,
147,
260
],
"type": "line"
}
]
}</div>Gives