Skip to main content

Echarts

Introduction​

This module allows rendering of fancy and interactive charts. There are about 40 different types of charts available. They can be previewed on Echarts examples page.

Usage​

If we want to display a specific chart, then we have to supply a specific config via "Content" setting. The value of this setting must be a stringified JSON object. An example of such config:

{
  "title": {
    "text": "Referer of a Website",
    "subtext": "Fake Data",
    "left": "center"
  },
  "tooltip": {
    "trigger": "item"
  },
  "legend": {
    "orient": "vertical",
    "left": "left"
  },
  "series": [
    {
      "name": "Access From",
      "type": "pie",
      "radius": "50%",
      "data": [
        {
          "value": 1048,
          "name": "Search Engine"
        },
        {
          "value": 735,
          "name": "Direct"
        },
        {
          "value": 580,
          "name": "Email"
        },
        {
          "value": 484,
          "name": "Union Ads"
        },
        {
          "value": 300,
          "name": "Video Ads"
        }
      ],
      "emphasis": {
        "itemStyle": {
          "shadowBlur": 10,
          "shadowOffsetX": 0,
          "shadowColor": "rgba(0, 0, 0, 0.5)"
        }
      }
    }
  ]
}

Basically, we just took it from the example page for pie chart. In this example, the values and names can be changed to those which represent teh real data we would like to display.

Need another type of chart? Just browse this page, pick one, copy its demo data in Content setting and customize them. Done!

Styling​

The dimension of the chart is based on the dimension of its wrapper and by default it is 600x300px. We can change it anytime by changing settings "Width" and "Height" for CSS selector .chartContainer and re-initiating the Echarts module after that.

For developers / API​

info
  • HTML tag name: <builderius-echarts>
  • Implements 3rd-party script: echarts.js
  • Allowed children modules: none
  • Available since: 0.9.7 PRO

API docs​

The module creates <builderius-echarts> custom HTML tag. It is a modular self contained instance of Echarts JS script.

tip

Since <builderius-echarts> is a custom HTML element, its default behavior is equal to inline element, not block; it can be changed any time with display CSS property. The module automatically creates <div> inside it and initiates the main script on this element. By default, its dimension 600x300px and these styles are added via custom CSS selector inside the module.

Attributes​

data-content (required)​

This attribute expects a stringified JSON object data

Events​

ready (scope: element)​

builderius-echarts-ready (scope: window)​

This event is getting fired every time the component is being initiated/re-initiated. It also passes some data:

{ el }

Where el is the reference to the HTML element.

Methods​

reInit​

This method resets and initiates the component.

Demo​

Demo page