DocsICP FilingConsole
Documentation
Home Page DataV DataV User Guide Widget Guide Charts Others E**************

E**************

Updated at:
Copy as MD
Product
My Favorites

Configure the style, data, and interaction settings of the ECharts heatmap component.

Chart style

image

Configuration panelimage

  • Search for Configurations: In the right-side panel of Canvas Editor, click the Settings tab, and click Search for Configurations in the upper-right corner. Enter the required configuration item in the search box, and click the search icon to quickly locate the configuration item. Fuzzy match is supported. For more information, see Search for Configurations.
  • Size: indicates the size of a widget, including its pixel width and height. You can click the Proportional resizing icon to proportionally adjust the width and height of a widget. After you click this icon again, you can adjust the width and height as needed.
  • Position: the position of a widget, which is indicated by pixel X and Y coordinates. X-coordinate indicates the pixel distance between the upper-left corner of the widget and the left border of the canvas. Y-coordinate indicates the pixel distance between the upper-left corner of the widget and the upper border of the canvas.
  • Rotation Angle: the angle of a rotation that uses the center point of a widget as the rotation point. The unit is degrees (°). You can use one of the following methods to control the rotation angle of a widget:
    • Directly enter the degrees in the Rotation Angle spin box or click the plus sign (+) or minus sign (-) to increase or decrease the value in the Rotation Angle spin box.
    • Drag the black dot in the Rotation control icon icon.
    • Click the Horizontal flip icon to horizontally flip a widget.
    • Click the Vertical flip icon to vertically flip a widget.
  • Opacity: the opacity of a widget. Valid values: 0 and 1. If this parameter is set to 0, the widget is hidden. If this parameter is set to 1, the widget is completely displayed. Default value: 1.

  • Grid: Click the eye icon on the right to show the grid.Grid

    • Left: Distance from the left edge. Default: 3%. Accepted values:

      • A pixel value, such as 20.

      • A percentage of the container size, such as 20%.

      • left, center, or right. Aligns the grid automatically.

    • Top: Distance from the top edge. Default: 60. Accepted values:

      • A pixel value, such as 20.

      • A percentage of the container size, such as 20%.

      • top, center, or bottom. Aligns the grid automatically.

    • Right: Distance from the right edge. Default: 4%. Accepted values:

      • A pixel value, such as 20.

      • A percentage of the container size, such as 20%.

      • left, center, or right. Aligns the grid automatically.

    • Bottom: Distance from the bottom edge. Default: 3%. Accepted values:

      • A pixel value, such as 20.

      • A percentage of the container size, such as 20%.

      • top, center, or bottom. Aligns the grid automatically.

    • Width: Grid width. Default: auto.

    • Height: Grid height. Default: auto.

    • Adaptive Layout: When selected, uses adaptive layout. When cleared, uses custom layout settings.

    • Background Color: Grid background color. Default: transparent. Color picker.

    • Border Color: Grid border color. Default: transparent. Color picker.

    • Border Width: Click + or -, or enter a value to adjust the grid border width.

  • x-axis: Click the eye icon on the right to show the x-axis.x-axis

    • Offset: The offset of the x-axis from its default position. The default value is 0.

    • Name: A custom name for the x-axis.

    • Name Location: The position of the axis name. Options include Start, Center, or End. The default value is End.

    • Name Text Style

      • Color: Sets the text color of the axis name. Color picker.

      • Font Style: The font style of the axis name.

      • Font Weight: The font weight of the axis name.

      • Font: The font family of the axis name.

      • Font Size: Click + or -, or enter a value to change the font size of the axis name.

    • Name Gap: Click + or -, or enter a value to adjust the distance between the axis name and the axis line.

    • Name Rotate: Click + or -, or enter a value to set the rotation angle of the axis name.

    • Inverse: Reverses the axis order when selected.

    • Min: The minimum value of the axis. The default is dataMin, which sets the minimum tick to the minimum data value. If this parameter is not set, the value is calculated automatically to ensure that the ticks are evenly distributed.

    • Max: The maximum value of the axis. The default is dataMax, which sets the maximum tick to the maximum data value. If this parameter is not set, the value is calculated automatically to ensure that the ticks are evenly distributed.

    • Auto-scale: When selected, the axis is not forced to include a zero tick. This option is effective only for numeric axes and has no effect if you set a maximum and minimum value.

    • Split Number: Click + or -, or enter a value to set the number of segments for the axis. This value is an estimate. The actual number of segments is adjusted to ensure tick readability and does not apply to category axes.

    • Min Interval: Click + or -, or enter a value to set the minimum interval for the axis. For example, you can set it to 1 to ensure that all ticks are integers. This option applies only to value or time axes.

    • Axis Line: Click the eye icon on the right to show the axis line.

      • On Zero: Specifies whether the x-axis or y-axis line renders on the 0-scale tick of the other axis. This applies only when the other axis is a value axis that includes the 0-scale tick.

      • Line Style

        • Color: Sets the color of the x-axis line. Color picker.

        • Width: Click + or -, or enter a value to adjust the width of the x-axis line.

        • Type: The line type of the x-axis. Options include Solid and Dashed.

        • Opacity: Click + or -, or enter a value to adjust the opacity of the x-axis line. The value must be in the range of [0, 1].

    • Tick: Click the eye icon on the right to show the x-axis ticks.

      • Align with Label: If selected, ticks are aligned with labels. This option applies to category axes only when Boundary Gap is selected.

      • Interval: Click + or -, or enter a value to set the display interval of axis ticks. This setting is valid for category axes.

      • Inside: If selected, ticks face inward. If cleared, ticks face outward.

      • Length: Click + or -, or enter a value to set the length of axis ticks.

      • Line Style

        • Color: Sets the color of the ticks. Color picker.

        • Width: Click + or -, or enter a value to adjust the width of the ticks.

        • Type: The line type of the ticks. Options include Solid and Dashed.

        • Opacity: Click + or -, or enter a value to adjust the opacity of the ticks. The value must be in the range of [0, 1].

    • Tick Label: Click the eye icon on the right to show the x-axis tick labels.

      • Split Interval: The interval at which axis tick labels are displayed. This setting applies only to category axes. By default, an interval that prevents labels from overlapping is automatically used. You can set this parameter to 0 to force all labels to be displayed. If you set this parameter to 1, one label is skipped between each displayed label. If the value is 2, two labels are skipped between each displayed label, and so on.

      • Inside: If selected, tick labels face inward. If cleared, tick labels face outward.

      • Rotate: The rotation angle of the tick labels, from -90 to 90 degrees. You can rotate labels on a category axis to prevent them from overlapping.

      • Margin: The distance between the tick labels and the axis line.

      • Show Min Label: If selected, the minimum tick label is always displayed. By default, this is determined automatically. The minimum tick label is hidden if it overlaps with other labels.

      • Show Max Label: If selected, the maximum tick label is always displayed. By default, this is determined automatically. The maximum tick label is hidden if it overlaps with other labels.

      • Text Style

        • Color: Sets the color of the tick labels. Color picker.

        • Font Style: The font style of the tick labels.

        • Font Weight: The font weight of the tick labels.

        • Font: The font family of the tick labels.

        • Font Size: The font size of the tick labels.

        • Align: The horizontal alignment of the tick labels. By default, this is set to Auto. Options include Auto, Left, Center, and Right.

        • Vertical Align: Options include Top, Center, and Bottom.

    • Split Line: Click the eye icon on the right to show the split lines.

      • Split interval: Click the + or - icon, or manually enter a value to change the display interval of axis split lines. This setting applies only to the category axis. By default, split lines are displayed at intervals to prevent them from overlapping. You can set this parameter to 0 to force all split lines to be displayed. If you set it to 1, every other split line is displayed. If the value is 2, one for every three split lines is displayed, and so on.

      • Line Style

        • Width: Click + or -, or enter a value to adjust the width of the x-axis split lines.

        • Type: The line type of the x-axis split lines. Options include Solid and Dashed.

        • Opacity: Click + or -, or enter a value to adjust the opacity of the x-axis split lines. The value must be in the range of [0, 1].

    • Split Area: Click the eye icon on the right to show the split areas.

      • Split Interval: Click the + or - icon, or manually enter a value to change the display interval of the split areas on an axis. This setting applies to category axes. By default, the display interval is automatically adjusted to prevent the split areas from overlapping. You can set the value to 0 to force all split areas to be displayed. If you set the value to 1, it indicates that every other split area is displayed. If the value is 2, it indicates that every third split area is displayed, and so on.

      • Area Style

        • Opacity: Click + or -, or enter a value to adjust the opacity of the split areas. The value must be in the range of [0, 1].

    • A***********: Click the eye icon on the right to show the axis pointer.

      • Type: The pointer type. Options include line and shadow.

      • Snap: If selected, the axis pointer automatically snaps to points. This is useful for value and time axes to automatically locate small data points.

      • Value: The initial position of the axis pointer. The default value is 0.

      • Status: Controls the visibility of the axis pointer. Select to show; clear to hide.

      • Label: Click the eye icon on the right to show the axis pointer's label.

        • Precision: The decimal precision for the numeric value in the text label. By default, it is determined automatically based on the current axis value. You can also specify an integer, such as 2, to indicate two decimal places.

        • Margin: If selected, adds a margin between the axis pointer label and the axis.

        • Text Style

          • Color: Sets the text color of the axis pointer label. Color picker.

          • Font Style: The font style of the axis pointer label.

          • Font Weight: The font weight of the axis pointer label.

          • Font: The font family of the axis pointer label.

          • Font Size: The font size of the axis pointer label.

        • Background Color: The background color of the axis pointer's text label.

        • Border Color: The border color of the axis pointer's text label.

        • Border Width: The border width of the axis pointer's text label.

      • Line Style

        • Color: Sets the color of the axis line. Color picker.

        • Width: Click + or -, or enter a value to adjust the width of the axis line.

        • Type: The type of the axis line. Options include Solid and Dashed.

        • Opacity: Click + or -, or enter a value to adjust the opacity of the axis line. The value must be in the range of [0, 1].

      • Handle: Click the eye icon on the right to show the handle.

        • Size: Click + or -, or enter a value to set the size of the handle.

        • Margin: Click + or -, or enter a value to adjust the distance between the handle's center and the axis.

        • Color: The color of the handle.

        • Throttle: The update frequency in milliseconds when dragging the handle. A higher value improves performance but reduces responsiveness.

  • y-axis: Same settings as x-axis.

  • Visual Mapping: Click the eye icon on the right to show the visual mapping component.Visual mapping

    • Min: Enter a value or select dataMin to set the minimum value for the visual mapping.

    • Max: Enter a value or select dataMax to set the maximum value for the visual mapping.

    • Pieces: Click the Add icon or Delete icon icon to add or delete a color style. Click the Reorder up icon or Reorder down icon icon to reorder color styles. Click the Duplicate icon icon to duplicate the selected color style.

    • Handle: Click the eye icon to show the handle style.

    • Realtime: If selected, updates the chart in real time as you make changes.

    • Inverse: Reverses the visual mapping order when selected.

    • Precision: Enter a value, or click + or - to change the decimal precision of the visual mapping.

    • Item Width: Enter a value, or click + or - to change the width of the visual mapping graphics.

    • Item Height: Enter a value, or click + or - to change the height of the visual mapping graphics.

    • Align: Select the alignment of the visual mapping from the drop-down list. Options include Auto, Left, Center, and Right.

    • Hover Link: Displays a hover link when selected.

    • Left: The distance from the left edge of the component. The default value is auto.

    • Top: The distance from the top edge of the component. The default value is auto.

    • Right: The distance from the right edge of the component. The default value is auto.

    • Bottom: The distance from the bottom edge of the component. The default value is auto.

    • Orient: Select the orientation from the drop-down list. Options include Horizontal and Vertical.

    • Padding: Enter a value, or click + or - to change the padding of the visual mapping component.

    • Background Color: Sets the background color of the visual mapping component. Color picker.

    • Border Color: Sets the border color of the visual mapping component. Color picker.

    • Border Width: Click + or -, or enter a value to adjust the border width of the visual mapping component.

    • Text Style

      • Color: Sets the text color for the visual mapping component. Color picker.

      • Font Style: The font style for the visual mapping text. The default value is normal.

      • Font Weight: The font weight for the visual mapping text. The default value is normal.

      • Font: The font family for the visual mapping text. The default value is sans-serif.

      • Font Size: Enter a value, or click + or - to change the font size for the visual mapping text.

  • Tooltip: Click the eye icon on the right to show the tooltip.Tooltip

    • Trigger: The event that triggers the tooltip. Options include Mouse move, Mouse click, and Mouse move and click.

    • Background Color: Sets the background color of the tooltip. Color picker.

    • Border Color: Sets the border color of the tooltip. Color picker.

    • Border Width: Click + or -, or enter a value to adjust the border width of the tooltip.

    • Padding: Click + or -, or enter a value to adjust the padding of the tooltip in pixels. The default padding is 5 pixels for all sides.

    • Text Style

      • Color: Sets the text color of the tooltip. Color picker.

      • Font Style: The font style of the tooltip text.

      • Font Weight: The font weight of the tooltip text.

      • Font: The font family of the tooltip text.

      • Font Size: The font size of the tooltip text.

  • SeriesSeries

    • Blur Size: Click + or -, or enter a value to adjust the blur size of the graphic elements.

    • Min Opacity: Click + or -, or enter a value to adjust the minimum opacity of the graphic elements.

    • Max Opacity: Click + or -, or enter a value to adjust the maximum opacity of the graphic elements.

    • Silent: If selected, the series does not respond to mouse events or other interactions.

    • Label

      • Normal: Click the eye icon on the right to show the label text for normal items (items that are not in a hovered state).

        • Text Style

          • Color: Sets the text color of the normal item label. Color picker.

          • Font Style: The font style of the normal item label.

          • Font Weight: The font weight of the normal item label.

          • Font: The font family of the normal item label.

          • Font Size: The font size of the normal item label.

      • Emphasis: Click the eye icon on the right to show the label text for emphasized items (items that are in a hovered state).

        • Text Style

          • Color: Sets the text color of the emphasized item label. Color picker.

          • Font Style: The font style of the emphasized item label.

          • Font Weight: The font weight of the emphasized item label.

          • Font: The font family of the emphasized item label.

          • Font Size: The font size of the emphasized item label.

Data panel

Data panel

Fields

Field

Description

x

X-axis category of a cell.

y

Y-axis category of a cell.

value

Value of each heatmap cell.

Interaction panel

Interaction panel

Interactions

Interaction

Description

When a data item is clicked

Select Enable to enable interaction. Clicking a data item in the heatmap triggers a callback that returns the x and y fields by default. Configure a component callback ID.

When the visual mapping changes

Select Enable to enable interaction. Changing the heatmap visual mapping triggers a callback that returns the selected field by default. Configure a component callback ID.

Blueprint Editor interactions

  1. In the canvas editor, right-click the component and select Export to Blueprint Editor.

  2. Click the Blueprint Editor icon icon in the upper-left corner of the page.

  3. In the Blueprint Editor, click the heatmap component in the node import panel. The configuration parameters for the heatmap are displayed on the canvas as a node.image

    • Events

      Event

      Description

      When Data Request is Successful

      Triggered after a data API request succeeds and the data passes through a filter. Returns JSON. Check the Data Response section on the Data tab for data samples.

      When Data Request Fails

      Triggered when a data API request fails due to a network or API error. Returns JSON. Check the Data Response section on the Data tab for data samples.

      When a data item is clicked

      Triggered when a heatmap graphic element is clicked. Returns the corresponding data item.

      When the visual mapping changes

      Triggered when the heatmap visual mapping changes. Returns the corresponding data item.

    • Actions

      Action

      Description

      Request data API

      Re-requests server-side data. Upstream data from data processing nodes or layer nodes is passed as a parameter. For example, if the heatmap's API data source is set to https://api.test and the data passed to the request data API action is { id: '1'}, the final request URL is https://api.test?id=1.

      Import Data

      Imports data and redraws the component without re-requesting server-side data. Check the Data Response section on the Data tab for data samples.

      Highlight

      The action accepts an object with the parameters seriesName (series name), seriesIndex (series index), dataIndex (data index), and name (data name). Example:

      {  
    "seriesName": "",  
    "seriesIndex": 1,  
    "dataIndex": 1,  
    "name": ""
}

      Downplay

      The action accepts an object with the parameters seriesName (series name), seriesIndex (series index), dataIndex (data index), and name (data name). Example:

      {  
    "seriesName": "",  
    "seriesIndex": 1,  
    "dataIndex": 1,  
    "name": ""
}

      Show Tooltip

      The action accepts an object with the parameters dataindex (data index), name (data name), x (x-coordinate), and y (y-coordinate). Example:

      { 
    "dataIndex": 1,  
    "name": "",  
    "x": 1,  
    "y": 1
}

      Hide Tooltip

      Hides the tooltip. No parameters are required.

      Visual Map Range

      The action accepts an object with the parameter selected.

      Note

      For a continuous visual mapping, this is an array representing a numerical range. For a discrete visual mapping, this is an object where keys are the indices of categories or segments.

      Update component configuration

      Dynamically updates the component style. In the Configuration panel, click Copy All to Clipboard to get the configuration data, then modify the style fields in a Blueprint Editor data processing node.

      Show

      Shows the component. Example:

      return{
  "animationType": "",
  "animationDuration": 1000,
  "animationEasing": "linear"
}

      Hide

      Hides the component. Example:

      return{
  "animationType": "",
  "animationDuration": 1000,
  "animationEasing": "linear"
}

      Toggle Display Status

      Toggles the visibility of the component. Example:

      return {
  "animationIn": {
    "animationType": "",
    "animationDuration": 1000,
    "animationEasing": "linear"
  },
  "animationOut": {
    "animationType": "",
    "animationDuration": 1000,
    "animationEasing": "linear"
  }
}

      Move

      Moves the component to a specified position. Example:

          return{      
      // The move type. `to` for absolute positioning, `by` for relative positioning. Default: to.
        "positionType": "to",
      // The target position, specified by x- and y-coordinates.
      "attr": {
        "x": 0,
        "y": 0
      },
      // Animation settings.
      "animation": {
        "enable": false,
        // The animation duration.
        "animationDuration": 1000,
        // The animation curve. Options include: linear|easeInOutQuad|easeInOutExpo.
        "animationEasing": "linear"
      }
    }
Previous：Echarts gaugeNext：Maps