组件/数据展示引入于 1.3.0

EMeterGroup 分段计量

import EUI 1.0

示例与代码

分段计量

QML 代码QML

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

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

标签置顶

QML 代码QML

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("已用"), "value": 40, "color": "#409eff" }, { "label": qsTr("缓存"), "value": 25, "color": "#67c23a" }, { "label": qsTr("可用"), "value": 35, "color": "#909399" }] }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

纵向计量

QML 代码QML

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("已用"), "value": 40, "color": "#409eff" }, { "label": qsTr("缓存"), "value": 25, "color": "#67c23a" }, { "label": qsTr("可用"), "value": 35, "color": "#909399" }] }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

自定义总量

QML 代码QML

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("已用"), "value": 40, "color": "#409eff" }, { "label": qsTr("缓存"), "value": 25, "color": "#67c23a" }, { "label": qsTr("可用"), "value": 35, "color": "#909399" }] }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

宽条计量

QML 代码QML

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("已用"), "value": 40, "color": "#409eff" }, { "label": qsTr("缓存"), "value": 25, "color": "#67c23a" }, { "label": qsTr("可用"), "value": 35, "color": "#909399" }] }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

圆环分段计量

QML 代码QML

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("已用"), "value": 40, "color": "#409eff" }, { "label": qsTr("缓存"), "value": 25, "color": "#67c23a" }, { "label": qsTr("可用"), "value": 35, "color": "#909399" }] }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

圆环总量与置顶标签

QML 代码QML

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("已用"), "value": 40, "color": "#409eff" }, { "label": qsTr("缓存"), "value": 25, "color": "#67c23a" }, { "label": qsTr("可用"), "value": 35, "color": "#909399" }] }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

圆角分段条

QML 代码QML

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

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

属性

属性说明取值与默认值

valuesvar

分段计量数组，每项包含 label、value 及可选 color。

默认值[]

barSizeint

计量条的粗细，单位为像素。

默认值12

maximumreal

计量条对应的总量，超过总量的分段将被裁剪。

默认值100

verticalbool

计量条是否竖向显示。

默认值false

labelsOnTopbool

将分段计量标签放在计量条上方。

默认值false

totalreal只读

有效计量数值之和。

默认值items.reduce(function(sum, item) { return sum + Number(item.value) }, 0)

itemsvar只读

过滤掉无效数值后的计量条目。

默认值

展开默认值

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

circularbool

使用圆环分段计量，优先于 vertical。

默认值false

diameterint

圆环直径，单位为像素；宽度不足时自动缩小。

默认值160