DocsICP FilingConsole
官方文档
首页

ECharts calendar heatmap

更新时间：
复制 MD 格式
产品详情
我的收藏

This topic describes the styles and configuration panel of the ECharts calendar heatmap.

Chart style

image

Style panelimage.png

  • Search Configuration: Click the Style icon image 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 image icon to flip the component horizontally.

      • Click the image 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.

  • Legend: To display the legend, click the eye icon on the right.

    • Top: Specifies the distance between the legend and the top border of the widget. The default value is auto. You can enter one of the following values:

      • A specific pixel value, such as 20.

      • A percentage of the container's width or height, such as 20%.

      • The widget automatically aligns to the left, center, or right.

    • Right: Specifies the distance between the legend and the right border of the widget. The default value is auto. You can enter one of the following values:

      • A specific pixel value, such as 20.

      • Specifies a percentage of the container's width or height, such as 20%.

      • left, center, or right: The widget aligns to the selected position.

    • Bottom: Specifies the distance between the legend and the bottom border of the widget. The default is auto. You can enter one of the following values:

      • A pixel value, such as 20.

      • A percentage of the container's width or height, such as 20%.

      • The widget automatically aligns to the selected position: left, center, or right.

    • Left: Specifies the distance between the legend and the left border of the widget. The default value is auto. You can enter one of the following values:

      • A pixel value, such as 20.

      • Expressed as a percentage of the container's width or height. For example, 20%.

      • left, center, or right: The widget is automatically aligned based on the selected position.

    • Width: Sets the width of the legend. The default value is auto, which automatically adjusts the width.

    • Height: The height of the legend. The default value is auto, which automatically adjusts the height to fit the legend.

    • Orientation: Click the drop-down list to select the layout orientation of the legend.

      • Horizontal: The legend items are arranged horizontally.

      • Vertical: The legend items are arranged vertically.

    • Alignment: Click the drop-down list to select the alignment of the legend markers and text.

      • Auto: The default value is auto, which automatically sets the alignment based on the position and orientation of the widget.

      • Left Align: An alignment setting, also called Left Align, that places the graphic to the left of the text.

      • Center Align: The alignment is set to Center Align when the legend symbol and text overlap.

      • Right Align: Sets the alignment to Right Align, placing the graphic to the right of the text.

    • Padding: You can click the + or - icon, or enter a value to adjust the legend padding in pixels. The default padding is 5 pixels on all sides.

    • Item Gap: Click the + or - icon, or enter a value to adjust the distance between legend items. This setting applies horizontally for horizontal layouts and vertically for vertical layouts.

    • Marker Width: Click the + or - icon or enter a value to adjust the legend marker width.

    • Marker Height: Click the + or - icon, or enter a value to adjust the legend marker height.

    • Selection Mode: Click the eye icon on the right to display the mode.

    • Inactive Color: For more information, see Color picker. Sets the color of an inactive legend item. This effect is only visible when you click a legend item on the preview or published page.

    • Text Style

      • Color: For more information, see Color picker. Sets the color of the legend text.

      • Font Style: Sets the font style of the legend text.

      • Font Weight: Sets the font weight of the legend text.

      • Font: Sets the font family of the legend text.

      • Font Size: To change the font size of the legend, click the + or - icon, or enter a value.

    • Background Color: For more information, see Color picker. Sets the background color of the legend.

    • Border Color: For more information, see Color picker. Sets the border color of the legend.

    • Border Width: You can adjust the border width of the legend by clicking the + or - icon, or by entering a value.

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

    • Trigger: Specifies the event that displays the tooltip. Options: Mouse move, Mouse click, and Mouse move and click.

    • Background Color: For more information, see Color picker. Sets the background color of the tooltip.

    • Border Color: For more information, see Color picker. Sets the border color of the tooltip.

    • Border Width: To set the border width of the background box, you can click the + or - icon, or enter a value.

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

    • Text Style

      • Color: For more information, see Color picker. Sets the color of the tooltip text.

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

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

      • Font: Sets the font family of the tooltip text.

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

  • Calendar

    • Left: Sets the distance between the calendar area and the left border of the widget. The default value is 80. You can enter one of the following values:

      • A specific pixel value, such as 20.

      • A percentage of the container's width or height, such as 20%.

      • left, center, or right: The widget automatically aligns to the selected position.

    • Top: The distance from the top border of the widget to the calendar area. The default value is 100. You can enter one of the following values:

      • A specific pixel value, such as 20.

      • Specifies a percentage of the container's width or height, such as 20%.

      • The widget is automatically aligned to the left, center, or right.

    • Right: Specifies the distance between the calendar area and the right border of the widget. The default value is 50. You can enter one of the following values:

      • Specifies a pixel value, such as 20.

      • A percentage of the container's width or height, such as 20%.

      • The widget automatically aligns to the left, center, or right.

    • Bottom: Specifies the distance between the calendar area and the bottom border of the widget. The default value is 60. You can enter one of the following values:

      • A pixel value, such as 20.

      • A percentage of the container width or height, such as 20%.

      • Automatically aligns the widget to the left, center, or right.

    • Start Date: The start date of the calendar coordinate. This parameter is used with End Date to define the date range. The value can be a year (for example, 2022), a month (for example, 2022-08), or a day (for example, 2022-08-01).

    • End Date: The end date of the calendar coordinate. This parameter is used with Start Date to define the date range of the calendar. The value can be a year (2022), a month (2022-08), or a day (2022-08-01).

    • Cell Size: The height and width of each cell in the calendar. The default value is 20.

    • Orientation: Specifies the orientation of the calendar coordinate, which can be Horizontal or Vertical.

    • Line Separator: Click the eye icon on the right to display the line separator for the calendar coordinates.

      • Axis Line Style

        • Color: For more information, see Color picker. Sets the color of the axis line.

        • Width: Enter a value or click the + or - icon to set the width of the axis line.

        • Type: Specifies whether the axis line is a Solid line or a Dashed line.

        • Opacity: Click the + or - icon, or enter a value between 0 and 1 to adjust the opacity of the axis line.

    • Element Style

      • Normal

        • Color: For more information, see Color picker. Sets the background color of normal items.

        • Border Color: For more information, see Color picker. Sets the border color of normal items.

        • Border Width: Click the + or - icon, or enter a value to set the border width for the items.

        • Border Style: The style of the border. Options are Solid line and Dashed line. The default value is Solid line.

        • Opacity: Click the + or - icon, or enter a value to adjust the opacity of the items. The value can range from 0 to 1.

    • Day Label

      • First Day: Sets the day on which the week starts. The default is Sunday.

      • Margin: Sets the distance between the day label and the axis line.

      • Locale: Sets the display format for the days of the week. The default is English. You can click the drop-down list to switch to Chinese.

      • Text Style

        • Color: For more information, see Color picker. Sets the color of the day label text.

        • Font Style: Sets the font style of the day label text.

        • Font Weight: Sets the font weight of the day label text.

        • Font: Sets the font family of the day label text.

        • Font Size: Sets the font size of the day label text.

    • Month Label

      • Alignment: The horizontal alignment of the text. The options are Auto, Align Left, Align Center, and Align Right. The default is Auto.

      • Margin: Sets the distance between the month label and the axis line.

      • Locale: Sets the display format for the months. The default is English. You can click the drop-down list to switch to Chinese.

      • Text Style

        • Color: For more information, see Color picker. Sets the color of the month label text.

        • Font Style: Sets the font style of the month label text.

        • Font Weight: Sets the font weight of the month label text.

        • Font: Sets the font family of the month label text.

        • Font Size: Sets the font size of the month label text.

    • Year Label

      • Margin: Sets the distance between the year label and the axis line.

      • Text Style

        • Color: For more information, see Color picker. Sets the color of the year label text.

        • Font Style: Sets the font style of the year label text.

        • Font Weight: Sets the font weight of the year label text.

        • Font: Sets the font family of the year label text.

        • Font Size: Sets the font size of the year label text.

    • Static: If you select this checkbox, the coordinate axis becomes static and cannot be interacted with.

  • Series: Click the image or image icon to add or delete a conditional style. Click the image or image icon to arrange the conditional styles. Click the image icon to duplicate the selected conditional style.

    • Type: Specifies the chart type used to display the data. The default value is scatter. You can also set the type to effectScatter, which displays a scatter plot with ripple effects.

    • Name: Sets the name of the series. This must be used with the s field in the data.

    • Hover Animation: If you select this checkbox, an animation effect is enabled when you move the mouse pointer over an item.

    • Legend Hover Link: If you select this checkbox, hovering over a legend item highlights the corresponding series.

    • Symbol: The symbol for the markers. The available options are circle, rect, roundRect, triangle, diamond, pin, arrow, and none. The default value is circle. You can also set this to an image URL or path. For more information, see the ECharts official website.

    • Symbol Size:

      • Value Mapping: If you select this option, DataV maps the symbol size to the data `value`. This setting is used with Value Scaling Ratio to adjust the symbol size, resulting in different sizes for symbols with different `value`s. If you clear this option, all symbols have the same size, which you can specify in Default Size.

      • Value Scaling Ratio: Sets the scaling ratio for the symbol size if Value Mapping is checked.

    • Symbol Rotate: Click the + or - icon, or enter a value to adjust the rotation angle of the symbol.

    • Static: If you select this checkbox, this series does not respond to or trigger mouse events.

    • Label

      • Normal: Click the eye icon on the right to show labels for normal items. These are points that do not respond to mouse events.

        • Text Style

          • Color: For more information, see Color picker. Sets the color of the normal item label text.

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

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

          • Font: Sets the font family of the normal item label text.

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

      • Emphasis: Click the eye icon on the right to display labels for emphasized items (points that respond to mouse events).

        • Text Style

          • Color: For more information, see Color picker. Sets the color of the emphasized item label text.

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

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

          • Font: Sets the font family of the emphasized item label text.

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

    • Item Style

      • Normal

        • Color: For more information, see Color picker. Sets the background color of normal items.

        • Border Color: For more information, see Color picker. Sets the border color of normal items.

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

        • Border Style: Sets the style for the border outline. You can select Solid line or Dashed line. The default value is Solid line.

        • Opacity: Click the + or - icon to adjust the item opacity, or enter a value from 0 to 1.

      • Key Items

        • Color: For more information, see Color picker. Sets the background color of emphasized items.

        • Border Color: For more information, see Color picker. Sets the border color of emphasized items.

        • Border Width: Click the + or - icon, or enter a value to adjust the border width for emphasized items.

        • Border Style: The style of the border outline. The options are Solid line and Dashed line. The default value is Solid line.

        • Opacity: Click the + or - icon, or enter a value to change the opacity of normal items. Valid values range from 0 to 1.

Data Source panel

Field

Description

name

The category of each point in the calendar heatmap, which is the name of the point.

value

The value of each point in the calendar heatmap.

s

(Optional) The series value. This is used with the Series configuration item in the Style panel.

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 image icon to configure field styles individually.

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 image icon on the right to check the current data response result, or click the image 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.

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.

Advanced panelimage.png

Interaction

Description

When a data item is clicked

Turn on the switch to enable widget interaction. When a data item is clicked, a callback value is returned. By default, the name, value, and s fields from the data are returned. For more information, see Configure widget interactions.

When a legend item is clicked

Turn on the switch to enable widget interaction. When a legend item is clicked, a callback value is returned. By default, the selected field from the data is returned. For more information, see Configure widget interactions.

Blueprint interaction

  1. Click the image icon in the upper-left corner to open the Blueprint page.

  2. On the Layer Node tab, you can add the current widget to the main canvas.

  3. View the Blueprint configuration parameters.image.png

    • Events

      Event

      Description

      When a data API request is complete

      This event is triggered after the response to a data API request is received and processed by the filter. The event returns the processed data in JSON format. For a data sample, see the Data Response section on the Data Source tab in the widget's configuration panel in the canvas editor.

      When a data item is clicked

      This event is triggered when a data item in the calendar heatmap is clicked. The corresponding data item is returned.

      When a legend item is clicked

      This event is triggered when a legend item in the calendar heatmap is clicked. The corresponding data item is returned.

    • Actions

      Action

      Description

      Request Data API

      Re-requests data from the server-side. Data from an input data processing node or a layer node is used as a parameter. For example, if the calendar heatmap is configured with an API data source of 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 API

      Processes the data according to the widget's format and then imports it to redraw the widget. This does not require re-requesting data from the server-side. For a data sample, see the Data Response section on the Data Source tab in the widget's configuration panel in the canvas editor.

      Highlight

      The action receives data of the object type. Parameters include seriesName, seriesIndex, dataIndex, and name. Specify a series using `seriesName` or `seriesIndex`. To specify a specific data item, also specify `dataIndex` or `name`. Sample data:

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

      Clear Highlight

      The action receives data of the object type. Parameters include seriesName, seriesIndex, dataIndex, and name. Specify a series using `seriesName` or `seriesIndex`. To specify a specific data item, also specify `dataIndex` or `name`. Sample data:

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

      Show Tooltip

      The action receives data of the object type. Parameters include dataindex (data index), name (data name), x (horizontal coordinate), and y (vertical coordinate). Sample data:

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

      Hide Tooltip

      Hides the tooltip. No parameters are required.

      Control Legend

      The action receives data of the object type. Parameters include type (legend action type) and name (legend name). Sample data:

      {
  "type": "",// Legend action types include the following: legendSelect, legendUnSelect, legendToggleSelect
  "name": ""
}

      Move

      Moves the widget to a specified position. Sample data:

       {      
      // Movement type. Absolute positioning: to. Relative positioning: by. Default: to.
        "positionType": "to",
      // Specified position. x-coordinate, y-coordinate.
      "attr": {
        "x": 0,
        "y": 0
      },
      // Animation method.
      "animation": {
        "enable": false,
        // Animation delay.
        "animationDuration": 1000,
        // Animation curve. Options: linear|easeInOutQuad|easeInOutExpo.
        "animationEasing": "linear"
      }
    }

      Toggle Visibility

      Shows or hides the widget. No parameters are required.

      Show

      Shows the widget. Sample data:

      {
  "animationType": "",// Animation type. Optional value: fade. If left blank, there is no animation.
  "animationDuration": 1000,// Animation delay in ms.
  "animationEasing": ""// Animation curve
}

      Hide

      Hides the widget. Sample data:

      {
  "animationType": "",// Animation type. Optional value: fade. If left blank, there is no animation.
  "animationDuration": 1000,// Animation delay in ms.
  "animationEasing": ""// Animation curve
}

      Update Widget Configuration

      Dynamically updates the style configuration of the widget. First, in the widget's Style panel, click Copy Configuration to Clipboard to get the widget configuration data. Then, change the field values for the corresponding styles in the data processing node on the Blueprint editor page as needed.
Previous：Echarts single-axis bubble chartNext：Echarts large-scale scatter chart