DocsICP FilingConsole
官方文档
首页

Multi-color gauge

更新时间：
复制 MD 格式
我的收藏

The multi-color gauge component displays a numeric value, such as a device property or a value returned by an API. This topic explains how to configure the component.

Step 1: Add the component

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

  2. In the web application editor, click the component icon 组件 on the far left.

  3. In the search box above the component list, enter multi-color gauge and drag the component onto the canvas.

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

    Search for and add the multi-color gauge component from the Components panel on the left to the canvas. In the Style panel on the right, you can configure settings such as gauge angle (e.g., 180°), number of sections (e.g., 3), range threshold (e.g., Minimum: 0, Section 2: 400, End Section: 800, Maximum: 1200), section fill colors, and pointer color.

Step 2: Configure the data source

  1. In the right-side pane of the web application editor, on the Style tab, click Data Source and then Configure Data Source.
  2. On the Data Source Configuration page, select a data source type and complete the configuration.
    The available data source types are device, API, and App Push.
    Note An API or device data source must return a single-precision number, double-precision number, or integer.
    Take the device data source as an example. In the Select Data Source panel, configure the following parameters in order: select a product, select a device (supports specified device, dynamic device, and empty device), select a Data Item type (for example, device property), and select a specific property. After you complete the configuration, you can click Format Reference to view an example or click Validate Data Format to validate the data format. After you confirm the configuration, click OK.
  3. Click OK.

Step 3: Configure styles

  1. In the Style panel on the right, configure the display settings for the component.
    Parameter Description
    Gauge angle Sets the angle of the gauge arc.
    • 90 degrees.
    • 180 degrees (default).
    • 270 degrees.
    Number of sections Sets the number of sections for the multi-color gauge. Valid values: 2 to 5.
    Range threshold Sets the threshold values that define the boundaries of each section.
    • Minimum
    • Section 2: This option appears when Number of sections is set to 3.
    • Section 3: This option appears when Number of sections is set to 4.
    • Section 4: This option appears when Number of sections is set to 5.
    • End Section
    • Maximum
    Section color Sets the color for each section of the gauge.

    You must first set the Fill Mode:

    • Enumeration: Allows you to set the color of each section and the pointer individually.
    • Gradient: Sets a Start Color and an End Color. The intermediate section colors are then automatically generated to form a gradient.
    Unit Allows you to toggle the display of the unit, data reading, and border, and to configure their styles.
    Reading
    Border
    Background color Sets the background color of the component.

  2. Adjust the component's position on the page. For more information about general component style settings, see Configure styles.

Step 4: Configure interactions

  1. In the Interaction panel on the right side of the web application editor, click Add Interaction, and then set an event and an action.

    This component supports the Mouse In event. For example, you can set the Mouse In event to trigger a Show/Hide action that reveals a hidden component with additional information.

    For more information, see Interaction configuration.

  2. Click Preview in the upper-right corner of the page to view and debug the component's data and style.

Previous：Gauge clockNext：Monochrome gauge