ECharts

The ECharts widget can be used to generate graphs and charts. It is built using Apache ECharts, which is a high-level visualization library.

Refer to the ECharts documentation here for details on how to use the available chart types in WebStudio.

Model

The following properties can be defined for the ECharts widget. The table below provides more information about each of these properties.

{
    "type": "echarts",
    "actions": {},
    "captionBar": {},
    "data": [],
    "dataSource": {},
    "dragSource": {},
    "dropTarget": {},
    "echartsOptions": {},
    "id": "echartsWidgetID",
    "layout": {},
    "name": "echartsWidget",
    "options": {},
    "registerMap": {},
    "toolbars": {}
}
Name Description

type

Widget type, in this case "echarts"

actions

Optional property to define action pipelines for specific trigger events. See the actions section below.

captionBar

Configuration options for the widget caption bar. Set this property to false to hide the widget caption bars. Default is true.

data

Defines data used to display ECharts graph or chart.

dataSource

Optional datasource to retrieve data or the widget model from the system. See the DataSource section below.

dragSource

Property used to allow dragging from the widget. For more information about configuring the widget as a drag-source, see here.

dropTarget

Property used to handle drops from a drag-source. See here for information on configuring the widget as a drop-target.

echartsOptions

Additional specific options for the configuration of the ECharts widget. See the ECharts Options section below for more details.

id

Unique widget identifier, can be customised but must be unique in the compilation. If this property is not defined, it will be automatically assigned a value when the widget is created.

layout

Options to configure the position and size of the widget.

name

Optional name assigned to the widget, displayed in the widget caption bar if it is enabled.

options

Configuration options including the refreshInterval and styling properties.

registerMap

Property used to register maps in the ECharts widget. See the Register Map section below.

toolbars

Optional property to add, edit and hide toolbars on the ECharts widget. See the toolbars section below for more details.

Actions

The actions property is used to implement action pipelines for specific trigger events, defined using lifecycle and action hooks. Each of these hooks can contain a single action or a series of multiple actions.

The ECharts widget supports the generic widget lifecycle hooks.

In addition to these lifecycle hooks, the ECharts widget also supports the following action hooks.

onClick

The onClick action hook is invoked when the user clicks anywhere on the ECharts widget. Note that the action pipeline is executed on the release of the mouse button rather than on the "mouse-down" event. If the mouse pointer is moved outside of the widget before it is released, the action pipeline will not be executed.

{
    "actions": {
        "onClick": {
            ...
        }
    }
}

DataSource

The dataSource property can be used to initialise the model configuration of the ECharts widget. For information regarding the general treatment of data retrieved from a dataSource, see the widget documentation here.

ECharts Options

The echartsOptions are used to apply ECharts specific settings. More information can be found here.

{
    "echartsOptions": {
        "height": 100,
        "locale": "",
        "pointerSize": 10,
        "renderer": "svg",
        "theme": "default",
        "useCoarsePointer": true,
        "useDirtyRect": false,
        "width": 100
    }
}
Name Description

height

Define the height of chart

locale

Defines the locale. Options are:

  • aria

  • legend

  • series

  • time

  • toolbox

pointerSize

Specifies the size of the expanded mouse pointer area when in close proximity to interactive elements. Use this property in conjunction with the useCoarsePointer option.

renderer

Defines how the chart is rendered. Options are:

  • "canvas"

  • "svg"

theme

Defines theme to be used for chart. Options are:

  • "dark"

  • "default"

  • "infographic"

  • "macarons"

  • "roma"

  • "shine"

  • "vintage"

useCoarsePointer

Set this property to true if the mouse pointer area should be expanded when in close proximity to interactive elements. This property should be used in conjunction with the pointerSize option.

useDirtyRect

Set this property to true to enable dirty rectangle rectangle. When enabled, only changes to the graphic will be re-rendered. Default is false.

width

Define the width of the chart

Toolbars

The toolbars property can be used to add, edit and hide toolbars for the ECharts widget. This widget supports multiple custom toolbars. For more details on configuring toolbars, see here.

Tools

The following tools have a default implementation on the ECharts widget.

Icon Tool Name Type SubType Description

Refresh Btn

Refresh

button

refresh

Refreshes the widget.

Spacer

spacer

This tool defines the spacing between the tools in the widget toolbar.

Register Map

The registerMap property is used to register maps. See here for more details.

{
    "registerMap": {
        "geoJson": "",
        "mapName": "Map Name",
        "specialAreas": ,
        "svg": ""
    }
}
Name Description

geoJson

Optional property defining data using GeoJSON

mapName

Assigns a custom name to the map

specialAreas

When data is defined using geoJson, this optional property can be used to zoom in on areas of the map.

svg

Optional property defining data as an SVG.

Receive messages (Send Topics)

The ECharts widget can receive messages from other widgets. This widget only supports the generic topics refresh and update.