Components/Data displayIntroduced in 1.3.0

EMeterGroup Meter group

import EUI 1.0

Examples

Segmented meter

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EMeterGroup { width: 360 values: [{ "label": qsTr("Used"), "value": 40, "color": "#409eff" }, { "label": qsTr("Cache"), "value": 25, "color": "#67c23a" }, { "label": qsTr("Free"), "value": 35, "color": "#909399" }] }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Labels on top

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EMeterGroup { width: 360 labelsOnTop: true values: [{ "label": qsTr("Used"), "value": 40, "color": "#409eff" }, { "label": qsTr("Cache"), "value": 25, "color": "#67c23a" }, { "label": qsTr("Free"), "value": 35, "color": "#909399" }] }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Vertical meter

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EMeterGroup { width: 360 height: 180 vertical: true values: [{ "label": qsTr("Used"), "value": 40, "color": "#409eff" }, { "label": qsTr("Cache"), "value": 25, "color": "#67c23a" }, { "label": qsTr("Free"), "value": 35, "color": "#909399" }] }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Custom total

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EMeterGroup { width: 360 maximum: 200 values: [{ "label": qsTr("Used"), "value": 40, "color": "#409eff" }, { "label": qsTr("Cache"), "value": 25, "color": "#67c23a" }, { "label": qsTr("Free"), "value": 35, "color": "#909399" }] }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Thick meter

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EMeterGroup { width: 360 barSize: 24 values: [{ "label": qsTr("Used"), "value": 40, "color": "#409eff" }, { "label": qsTr("Cache"), "value": 25, "color": "#67c23a" }, { "label": qsTr("Free"), "value": 35, "color": "#909399" }] }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Circular segmented meter

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EMeterGroup { width: 360 barSize: 16 diameter: 180 circular: true values: [{ "label": qsTr("Used"), "value": 40, "color": "#409eff" }, { "label": qsTr("Cache"), "value": 25, "color": "#67c23a" }, { "label": qsTr("Free"), "value": 35, "color": "#909399" }] }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Circular total and top labels

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EMeterGroup { width: 360 maximum: 160 diameter: 140 circular: true labelsOnTop: true values: [{ "label": qsTr("Used"), "value": 40, "color": "#409eff" }, { "label": qsTr("Cache"), "value": 25, "color": "#67c23a" }, { "label": qsTr("Free"), "value": 35, "color": "#909399" }] }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Rounded segmented bar

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EMeterGroup { width: 360 barSize: 10 values: [{label: "Completed", value: 75, color: "#67c23a"}, {label: "Failed", value: 15, color: "#f56c6c"}, {label: "Pending", value: 3, color: "#e6a23c"}, {label: "Running", value: 3, color: "#409eff"}, {label: "Other", value: 4, color: "#909399"}] }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Properties

PropertyDescriptionValues and default

valuesvar

Meter segments with label, value, and optional color.

Default[]

barSizeint

Meter bar thickness in pixels.

Default12

maximumreal

Total represented by the bar; segments exceeding it are clipped.

Default100

verticalbool

Whether the meter bar runs vertically.

Defaultfalse

labelsOnTopbool

Place meter labels above the bar.

Defaultfalse

totalrealRead only

Sum of valid meter values.

Defaultitems.reduce(function(sum, item) { return sum + Number(item.value) }, 0)

itemsvarRead only

Meter entries after filtering invalid values.

Default

Show default value

Array.isArray(values) ? values.filter(function(item) { return item && typeof item === "object" && isFinite(item.value) && item.value >= 0 }) : []

circularbool

Display circular segments; takes precedence over vertical.

Defaultfalse

diameterint

Ring diameter in pixels; shrinks when available width is smaller.

Default160