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