Apache ECharts

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

{ "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" } ] }