DocsICP FilingConsole
Documentation
Home Page IoT Studio User Guide Mobile Visual Development Components Chart components Gauge

Gauge

Updated at:
Copy as MD
My Favorites

The gauge component displays a property value from a device or a numeric value returned by an API as a dial. This topic describes how to configure the gauge component.

Step 1: Add the component

  1. Create a mobile application. For more information, see Create a mobile application.

  2. In the mobile application editor, click the Component icon 组件 on the far left.

  3. (Optional) Add a splitter component to configure the page layout. For more information, see Horizontal Splitter and Vertical Splitter.

  4. Above the component list on the left side of the canvas, enter gauge in the search box. Find the component and drag it onto the canvas.

    For more information about adding components, see Add a component.

    After the component is added, it appears on the canvas, and the Style panel automatically opens on the right. In this panel, you can set the component name, visibility, opacity, and dimensions, as well as configure properties such as Data Display (data source), Value Range (minimum and maximum value), and Global Style (theme color, arc progress thickness, arc color, background color, and border width and color).

Step 2: Configure a data source

  1. In the Style panel, click Configure Data Source next to Data Display.

  2. On the Data Source Configuration page that opens, configure the data source.

    Supported data source types are device, API, static data, and app push.

    Note

    The data returned by the data source must be a single-precision number, double-precision number, or integer.

  3. Click OK to complete the configuration.

Step 3: Configure styles

  1. In the Style panel, configure the display settings for the component.

    Parameter

    Description

    Value Range

    Sets the minimum value and maximum value for the gauge's scale.

    Global Style

    Sets the gauge's theme color, arc progress thickness, arc background color, background color, and border style.

    Title

    Specifies whether to display the corresponding configuration item. If enabled, you can configure its display settings.

    The number of scale intervals ranges from 1 to 6.

    Data Display

    Unit

    Scale Numbers

  2. Adjust the component's dimensions and its position on the page. For more information, see General Styles.

  3. Preview and debug the component's data and appearance. For more information, see Preview and Debug.

Previous：Real-time curveNext：Bar chart