Gauge-IoT Studio(IoT Studio)-阿里云帮助中心

Step 1: Add the component

Create a web application. For more information, see Create a web application.
In the web application editor, click the component icon on the far left.
In the search box above the component list on the left, enter gauge to find the component and drag it onto the canvas.

For more information about adding components, see Add a component.
Search for gauge in the component panel on the left. Find the component under the industrial components category and drag it to the canvas. After selecting the component, in the properties panel on the right, you can configure properties such as data source, display direction (horizontal/vertical), value range (Minimum, Maximum, step), value bar style (Value Bar Color, Background Bar Color, Radius), tick display (Font Size, Tick Label Color, Tick Line Color), and unit.

In the style panel on the right, click data source and then click Configure Data Source.
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.
Click OK.

In the style panel on the right, configure the display settings for the component.

Parameter	Description
display direction	Sets the display direction of the gauge, which is horizontal by default.
value range	Sets the value range (maximum and minimum) and the tick interval (step).
value bar style	Sets the color and radius of the value bar.
tick display	Specifies whether to show ticks and defines their style.
unit	Specifies whether to show the data unit and defines its style.
reading	Specifies whether to show the current value and defines its style.
background color	Sets the background color of the gauge.
border	Specifies whether to show a border and defines its style.

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

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.
Click Preview in the upper-right corner of the page to view and debug the component's data and style.