Configure the heatline layer to render line elements on a 3D globe with custom width, gradient speed, color, and geographic coordinates.
Chart style
The heatline layer is a 3D globe sub-component with independent style and data settings. You can configure line length, width, gradient speed, color, and latitude/longitude to depict line elements on geographical maps. 
Style panel
-
Search Configuration: Click the Style icon
in the upper right corner of the panel to enter the name of the configuration item you wish to locate in the search field. The system supports fuzzy matching. For more information, see Search configuration item. -
Dashed Line: Turn on the switch to display the heatline as a dashed line. You can also set the dashed line length and dash-to-solid ratio.
-
Height: Set the heatline layer's height relative to the globe.
-
Maximum Width: Set the maximum width of the heatline based on data values.
-
Gradient Speed: Control the fade-in and fade-out speed of the heatline. A higher value produces a faster gradient.
-
Minimum Value Color: Set the color for the line that represents the smallest value in the dataset.
-
Maximum Value Color: Set the color for the line that represents the largest value in the dataset. For more information, see the color picker description.
-
Maximum Transparency: Set the maximum transparency of the heatline based on the corresponding value for each line in the dataset.
Data source panel
Set the value for each line in the properties field.
The scale range is determined by the data's value range, which calculates the color gradient range from maximum to minimum values.
|
Data Item Configuration |
Description |
|
Data Source |
The component's data source displays the data fields contained within the component using code editing or visual editor. You can also modify the data type to flexibly configure the component's data. |
|
Data Mapping |
When you need to customize chart field configurations, you can set different field mappings in the Data Mapping module to map these fields to the corresponding fields of the component. This allows for real-time data matching without altering the data source fields. Additionally, click the |
|
Filter |
Open the Filter to select an existing data filter or create a new one, and configure the data filter script to achieve data filtering capabilities. For more information, see manage data filters. |
|
Data Response Result |
This feature displays the component's data in real-time. When the component's data source changes, the data response result will display the latest data accordingly. In case of a delayed system response, you can click the |
|
Disable Loading State |
Check the check box to hide the loading content during component updates and data dashboard previews. Unchecking will display the loading content. The default setting is unchecked. |
|
Controlled Mode |
Check the check box to prevent data requests upon the component's initialization. Data requests will only be initiated through global variables or methods configured in the blueprint editor. Unchecking allows for automatic update requests. The default setting is unchecked. |
|
Automatic Update Request |
Check the check box to manually set the polling frequency for dynamic polling. Clearing this option disables automatic updates, requiring manual page refreshes or data request triggers through the blueprint editor and global variable events for updates. |
icon to configure field styles individually.
icon on the right to check the current data response result, or click the 
icon on the right to obtain the most recent data for the component. You can also click to view examples to see sample response results for the current component.Advanced panel
This component does not support interaction events.
Blueprint interaction
-
Click the
icon in the upper left corner of the page to access the Blueprint page. -
In the Layer Node tab, add the current component to the main canvas.
-
Review the blueprint configuration parameters.
-
Event
Event
Description
When The Heatline Layer Request Is Completed
Triggered after the heatline layer request completes and the data is processed by the filter. Outputs the processed data in JSON format. For data examples, see the Data Source tab in the configuration panel on the right side of the component in the canvas editor, under Data Response Result.
-
Action
Action
Description
Request Heatline Layer
Send a new data request to the server. Data from the input data processing node or layer node is used as parameters. For example, if the heatline layer uses an API data source such as
https://api.test, and the data sent to the Request Heatline Layer action is{ id: '1'}, the final request URL will behttps://api.test?id=1.Import Heatline Layer
Import the component after processing the data in the component's rendering format, and re-render without sending another server request. For data examples, see the Data Source tab in the configuration panel on the right side of the component in the canvas editor, under Data Response Result.
Switch Visibility
Toggle the component's visibility. No parameters are required.
Show
Show the component. For data examples, see the reference.
{ "animationType": "",//Animation type. Optional value: fade. Leave empty for no animation. "animationDuration": 1000,//Animation delay in ms. "animationEasing": ""//Animation curve }Hide
Hide the component. For data examples, see the reference.
{ "animationType": "",//Animation type. Optional value: fade. Leave empty for no animation. "animationDuration": 1000,//Animation delay in ms. "animationEasing": ""//Animation curve }Update Component Configuration
Dynamically update the component's style configuration. In the Style panel, click Copy Configuration To Clipboard to copy the component configuration data. Then modify the corresponding style field values as needed in the data processing node on the blueprint editor configuration page.
-
icon in the upper left corner of the page to access the Blueprint page.