This topic describes the style and configuration of the ECharts Heatmap component.
Chart style
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. -
Size: The width and height of the component in pixels (px).
Position: The component's x-coordinate and y-coordinate in pixels (px). The x-coordinate is the horizontal distance from the page's left edge to the component's top-left corner. The y-coordinate is the vertical distance from the page's top edge to the component's top-left corner.
Rotation: The rotation of the component around its center point, in degrees (°).
Enter an angle value to control the component's rotation.
Click the
icon to flip the component horizontally.Click the
icon to flip the component vertically.
Opacity: The value ranges from 0 to 1. A value of 0 is completely transparent, while a value of 1 is fully opaque. The default is 1.
Interaction passthrough: When enabled, mouse interactions pass through this component, preventing it from blocking interactions with other components layered underneath it on a dashboard.
Alignment: The alignment of the component within the editor.
Grid: To display the grid, click the eye icon on the right.
Left: Specifies the distance from the left border of the component to the grid. The default value is 3%. The following input formats are supported:
A specific pixel value, such as 20.
A percentage of the container's height and width, for example, 20%.
Aligns the component to the left, center, or right.
Top: Specifies the distance between the grid and the top border of the component. The default value is 60. The following input formats are supported:
A pixel value, such as 20.
A percentage of the container height, such as 20%.
The component is automatically aligned to the specified position, which can be left, center, or right.
Right: Specifies the distance between the grid and the right border of the component. The default is 4%. The following input formats are supported:
Specifies a specific pixel value, such as 20.
A percentage of the container's height and width, such as 20%.
Automatically aligns the component to the left, center, or right.
Bottom: Sets the distance between the grid and the bottom border of the component. The default value is 3%. The following input formats are supported:
A pixel value, such as 20.
A percentage of the container height, such as 20%.
Aligns the component to the left, center, or right.
Width: The width of the grid. The default value is auto, which makes it adaptive.
Height: The height of the grid. The default value is auto, which means the height adjusts automatically.
Adaptive Layout: If you select this checkbox, the chart uses an adaptive layout. If you clear this checkbox, the chart uses the layout that you configure.
Background Color: Specifies the background color of the grid. For more information, see Color picker. The default color is transparent.
Border Color: Specifies the border color of the grid. For more information, see Color picker. The default color is transparent.
Border Weight: Click + or -, or enter a value to adjust the grid's border weight.
X-axis: Click the eye icon on the right to display this axis.
Offset: The displacement of the x-axis from its default position. The default value is 0.
Name: Specifies a custom name for the x-axis.
Name Position: Specifies the position of the name on the x-axis. Valid values are Start, Center, and End. The default value is End.
Name Style
Color: Specifies the color of the x-axis name. For more information, see Color picker.
Font Style: Specifies the font style of the x-axis name.
Font Weight: Specifies the font weight of the x-axis name.
Font: Specifies the font family of the x-axis name.
Font Size: Click + or -, or enter a value to adjust the font size of the x-axis name.
Name Gap: You can click + or -, or enter a value to adjust the distance between the axis name and the axis line.
Name Rotation: Click + or -, or enter a value to set the rotation angle of the axis name.
Reverse: If you select this checkbox, the axis is reversed. If you clear this checkbox, the axis is displayed in the default direction.
Minimum: The minimum value for the axis. The default is Data Min, which represents the minimum value in the dataset. If this parameter is not set, the minimum value is automatically calculated to ensure that the axis ticks are evenly distributed.
Maximum: Sets the maximum value of the axis. By default, this is set to Data Max, which is the largest data value on the axis. If you do not set this parameter, the maximum value is automatically calculated to ensure that the axis ticks are evenly distributed.
Scale: If you select this checkbox, the axis scale does not have to include the zero tick. This parameter is valid only for value axes and is invalid if you set the maximum and minimum values.
Segments: You can click + or -, or enter a value to set the number of segments for the axis. If you do not set this parameter, the number of segments is automatically calculated to ensure that the axis ticks are evenly distributed. Note that this value is an estimate. The actual number of segments may be adjusted for readability. This parameter does not apply to category axes.
Min Interval: You can click + or -, or enter a value to set the minimum interval for the axis. For example, you can set the value to 1 to ensure that the axis ticks are integers. This parameter applies only to value axes or time axes.
Axis Line: Click the eye icon to display the x-axis line.
On Zero: Specifies whether the x-axis or y-axis line is rendered on the 0 tick of the other axis. This parameter is valid only when the other axis is a value axis that includes the 0 tick.
Line Style
Color: Specifies the color of the x-axis line. For more information, see Color picker.
Width: Click + or -, or enter a value to set the width of the x-axis line.
Type: Specifies the type of the x-axis split line. Valid values: Solid line and Dashed line.
Opacity: Adjusts the opacity of the x-axis line. Click + or -, or enter a value from 0 to 1.
Tick: Clicking the eye icon on the right displays the x-axis ticks.
Align with Label: Select this option to align the ticks with the labels. This parameter is available for category axes only when Boundary Gap is selected.
Interval: Click + or -, or enter a value to change the interval between axis ticks. This setting is available only for category axes.
Inside: If you select this checkbox, the axis ticks face inward. If you clear this checkbox, the axis ticks face outward.
Length: To adjust the length of the axis ticks, click + or -, or enter a value.
Axis Line Style
Color: Specifies the color of the tick lines. For more information, see Color picker.
Width: Click + or -, or enter a value to adjust the tick line width.
Type: The style of the axis line. Valid values: Solid line and Dashed line.
Opacity: Click + or -, or enter a value to adjust the opacity of the tick lines. The valid range is 0 to 1.
Tick Label: Click the eye icon to display the x-axis tick labels.
Interval: The display interval for axis tick labels. This parameter applies only to category axes and prevents labels from overlapping. You can set this parameter to 0 to show all labels. If you set the value to 1, every other label is displayed. If you set the value to 2, every third label is displayed, and so on.
Inside: If you select this checkbox, the axis tick labels face inward. If you clear this checkbox, the axis tick labels face outward.
Rotation: Specifies the rotation angle of the tick labels. You can rotate labels on a category axis to prevent them from overlapping. The angle can be from -90 to 90 degrees.
Margin: Specifies the distance between the tick labels and the axis line.
Show Min Label: If you select this checkbox, the minimum tick label is displayed. By default, this is determined automatically and the label is not displayed if it overlaps with other labels.
Show Max Label: If you select this checkbox, the maximum tick label is displayed. By default, this is determined automatically and the label is not displayed if it overlaps with other labels.
Text Style
Color: Specifies the color of the axis tick labels. For more information, see Color picker.
Font Style: Specifies the font style of the axis tick labels.
Font Weight: Specifies the font weight of the axis tick labels.
Font: Specifies the font family of the axis tick labels.
Font Size: Specifies the font size of the axis tick labels.
Align: Specifies the horizontal alignment of the axis tick labels, which can be Auto, Align left, Align center, or Align right. The default value is Auto.
Vertical Align: The valid values are Top, Center, and Bottom.
Split Line: Click the eye icon to show or hide the split lines.
Interval: Click + or -, or enter a value to change the display interval for the axis split lines. This parameter applies to category axes. By default, split lines are automatically hidden to prevent them from overlapping. You can set this parameter to 0 to show all split lines. If you set the value to 1, every other split line is displayed. If you set the value to 2, one of every three split lines is displayed, and so on.
Line Style
Width: Adjust the width of the x-axis split lines by clicking + or -, or by entering a value.
Type: The line style for the x-axis split line. Valid values are Solid line and Dashed line.
Opacity: Click + or -, or enter a value from 0 to 1 to change the opacity of the x-axis split lines.
Split Area: Click the eye icon on the right to view the split areas.
Interval: You can click + or -, or enter a value to change the display interval of axis split areas. This parameter applies only to category axes. By default, only some split areas are displayed to prevent them from overlapping. You can set this parameter to 0 to show all split areas. If you set the value to 1, every other split area is displayed. If you set the value to 2, one out of every three split areas is displayed, and so on.
Area Style
Opacity: Click + or -, or enter a value from 0 to 1 to adjust the opacity of the split areas.
Axis Pointer: Click the eye icon to show or hide the axis pointer.
Type: The pointer type. Valid values are Line and Shadow.
Snap: If you select this checkbox, the axis pointer automatically snaps to points. This feature is useful for value axes and time axes to find small data points.
Initial Value: The initial position of the axis pointer. The default is 0.
Status: Specifies the current status of the axis pointer. Select the checkbox to show the pointer. Clear the checkbox to hide the pointer.
Label: Click the eye icon on the right to display the axis pointer label.
Precision: The number of decimal places for the value in the label. By default, the precision is automatically determined based on the current axis value. You can also specify an integer, such as 2, to retain two decimal places.
Margin: If you select this checkbox, a margin is added between the axis pointer label and the axis. If you clear this checkbox, no margin is added.
Text Style
Color: Specifies the color of the axis pointer label. For more information, see Color picker.
Font Style: Specifies the font style of the axis pointer label.
Font Weight: Specifies the font weight of the axis pointer label.
Font: Specifies the font family of the axis pointer label.
Font Size: Specifies the font size of the axis pointer label.
Background Color: Specifies the background color of the axis pointer label.
Border Color: Specifies the border color of the axis pointer label.
Border Weight: Specifies the border weight of the axis pointer label.
Line Style
Color: Specifies the color of the axis line. For more information, see Color picker.
Width: Enter a value or click + or - to set the width of the axis line.
Type: The type of the axis line. Valid values are Solid line and Dashed line.
Opacity: Click + or -, or enter a value between 0 and 1 to adjust the opacity of the axis line.
Handle: Click the eye icon on the right to view the handle.
Size: To change the handle size, click + or -, or enter a value.
Margin: Click + or -, or enter a value to adjust the distance from the handle's center to the axis.
Color: Specifies the color of the handle.
Refresh Rate: Specifies the interval at which the screen is updated when you drag the handle, in milliseconds. A larger value can improve performance but may degrade the user experience.
Y-axis: For more information, see the X-axis section.
Visual Map: Click the eye icon on the right to display it.
Minimum: Enter a value or select Data Min to set the visual map's minimum value.
Maximum: Enter a value or select Data Max to set the visual map's maximum value.
Visual Elements: You can click the
or icon to add or delete a color style. You can click the or icon to configure the arrangement of multiple color styles. You can click the icon to copy the selected color style and add a new one with the same configuration.Color: Specifies the color of the visual elements. For more information, see Color picker.
Handle: Click the eye button to display the handle style.
Real-time: If you select this checkbox, the display is in real time. If you clear this checkbox, the display is not in real time.
Reverse: If you select this checkbox, the display is reversed. If you clear this checkbox, the display is in the default direction.
Precision: Enter a value, or click + or - to adjust the precision of the visual map.
Graphic Width: Enter a value or click + or - to adjust the graphic width.
Graphic Height: Enter a value or click + or - to change the height of the graphic.
Align: Select the alignment for the visual map. Valid values: Auto, Align left, Align center, and Align right.
Hover Link: If you select this checkbox, the hover link is displayed. If you clear this checkbox, the hover link is not displayed.
Left: Specifies the data percentage for the left side of the visual map. The default value is auto.
Top: Specifies the distance between the visual map and the top border of the component. The default value is auto.
Right: Specifies the data percentage for the right boundary of the visual mapping. The default value is auto.
Bottom: Specifies the distance between the visual map and the bottom border of the component. The default value is auto.
Orientation: The orientation of the component. You can set this to Horizontal or Vertical.
Padding: You can enter a value or click + or - to adjust the padding for the visual map.
Background Color: Specifies the background color of the visual map. For more information, see Color picker.
Border Color: Specifies the border color of the visual map. For more information, see Color picker.
Border Weight: You can click + or -, or enter a value to change the border weight of the visual map.
Text Style
Color: Specifies the color of the visual map text. For more information, see Color picker.
Font Style: Specifies the font style of the visual map text. The default value is normal.
Font Weight: Specifies the font weight of the visual map text. The default value is normal.
Font: Specifies the font family of the visual map text. The default value is sans-serif.
Font Size: Enter a value or click + or - to adjust the font size for text in the visual map.
Tooltip: Click the eye icon on the right to display the tooltip.
Trigger: The type of trigger. Valid values are Mouse move, Mouse click, and Mouse move and click.
Background Color: Specifies the background color of the tooltip. For more information, see Color picker.
Border Color: Specifies the border color of the tooltip. For more information, see Color picker.
Border Weight: Click + or -, or enter a value to change the background box's border weight.
Padding: Click + or -, or enter a value in pixels to adjust the padding of the background box. The default value is 5 for all sides.
Text Style
Color: Specifies the color of the tooltip text. For more information, see Color picker.
Font Style: Specifies the font style of the tooltip text.
Font Weight: Specifies the font weight of the tooltip text.
Font: Specifies the font family of the tooltip text.
Font Size: Specifies the font size of the tooltip text.
Graphic Element
Blur Size: Click + or -, or enter a value to adjust the blur size of the graphic element.
Min Opacity: The minimum opacity of the graphic element. Click + or -, or enter a value.
Max Opacity: Enter a value or click + or - to set the maximum opacity of the graphic element.
Static: If you select this checkbox, the label is static and cannot be interacted with.
Label
Normal: Click the eye icon on the right to display the label text on normal items (columns that do not respond to mouse events).
Text Style
Color: Specifies the color of the normal item label. For more information, see Color picker.
Font Style: Specifies the font style of the normal item label.
Font Weight: Specifies the font weight of the normal item label.
Font: Specifies the font family of the normal item label.
Font Size: Specifies the font size of the normal item label.
Emphasis: Click the eye icon on the right to display the labels for emphasized items (columns that respond to mouse events).
Text Style
Color: Specifies the color of the emphasized item label. For more information, see Color picker.
Font Style: Specifies the font style of the emphasized item label.
Font Weight: Specifies the font weight of the emphasized item label.
Font: Specifies the font family of the emphasized item label.
Font Size: Specifies the font size of the emphasized item label.
or 
icon to add or delete a color style. You can click the 
or 
icon to configure the arrangement of multiple color styles. You can click the 
icon to copy the selected color style and add a new one with the same configuration.Data source panel
Field |
Description |
|
Configures the category for each x-axis in the heatmap, which is the value of the x-axis. |
|
Configures the category for each y-axis in the heatmap, which is the value of the y-axis. |
|
Configures the value for each point in the heatmap. |
| 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
Interaction |
Description |
When a data item is clicked |
You can turn on this switch to enable component interaction. When a data item is clicked, a callback value is returned. By default, the `x`, `y`, and `value` fields from the data are returned. For more information about the configuration, see Component interaction configuration. |
When the visual map is changed |
You can turn on this switch to enable component interaction. When the visual map is changed, a callback value is returned. By default, the `selected` field from the data is returned. For more information about the configuration, see Component interaction configuration. |
Blueprint interaction
To go to the Blueprint page, click the
icon in the upper-left corner of the page.Add the current component to the canvas from the Layer Node tab.
View the Blueprint configuration parameters.
Events
Event
Description
When a data request is complete
This event is triggered after a data request is returned and processed by the filter. The processed data is provided in JSON format. For a data example, see the Data Response section on the Data Source tab of the component's configuration panel in the canvas editor.
When a data item is clicked
This event is triggered when you click a data item in the heatmap. The corresponding data item is returned.
When the visual map is changed
This event is triggered when the visual map is changed. The corresponding data item is returned.
Actions
Action
Description
Request Data
Re-requests server-side data. Data from input data processing nodes or layer nodes is used as a parameter. For example, if the heatmap is configured with an API data source of
https://api.testand the data passed to the Request Data action is{ id: '1'}, the final request URL ishttps://api.test?id=1.Import Data
The data is processed into the format required by the component and imported to redraw the component, which eliminates the need to request data from the server-side again. For a data example, see the Data Response area on the Data Source tab in the configuration panel on the right side of the canvas editor.
Highlight
The input data for this action is an object. Parameters include
seriesName,seriesIndex,dataIndex, andname. Specify a series using seriesName or seriesIndex. To specify a data item, you can also specify dataIndex or name. Example:{ "seriesName": "", "seriesIndex": 1, "dataIndex": 1, "name": "" }Clear Highlight
The input data for this action is an object. Parameters include
seriesName,seriesIndex,dataIndex, andname. Specify a series using seriesName or seriesIndex. To specify a data item, you can also specify dataIndex or name. Example:{ "seriesName": "", "seriesIndex": 1, "dataIndex": 1, "name": "" }Show Tooltip
The input data for this action is an object. Parameters include
dataindex,name,x(horizontal position), andy(vertical position). Example:{ "dataIndex": 1, "name": "", "x": 1, "y": 1 }Hide Tooltip
Hides the tooltip. No parameters are required.
Visual Map Range
The input data for this action is an object. The parameter is
selected(segment object). Example:{ "selected": {} }Move
Moves the component to a specified position. Example:
{ // Movement method. 'to' for absolute position, 'by' for relative position. Default: 'to'. "positionType": "to", // The specified position. x-coordinate, y-coordinate. "attr": { "x": 0, "y": 0 }, // The animation method. "animation": { "enable": false, // The animation duration. "animationDuration": 1000, // The animation curve. Valid values: linear, easeInOutQuad, or easeInOutExpo. "animationEasing": "linear" } }Toggle Visibility
Shows or hides the component. No parameters are required.
Show
Shows the component. Example:
{ "animationType": "",// Animation method. Valid value: fade. If left empty, there is no animation. "animationDuration": 1000,// Animation duration in ms. "animationEasing": ""// Animation curve. }Hide
Hides the component. Example:
{ "animationType": "",// Animation method. Valid value: fade. If left empty, there is no animation. "animationDuration": 1000,// Animation duration in ms. "animationEasing": ""// Animation curve. }Update Component Configuration
Dynamically updates the style configuration of the component. First, in the component's Style panel, click Copy Configuration to Clipboard to get the component configuration data. Then, change the field values for the corresponding styles in the data processing node on the Blueprint editor page as needed.
icon in the upper-left corner of the page.