DocsICP FilingConsole
官方文档
首页

Echarts large-scale scatter plot

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

This document describes the chart styles and configuration panel for the Echarts large-scale scatter plot 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.

  • Legend: Click the eye icon on the right to show the legend settings.图例

    • Top: Sets the distance between the legend and the component's top edge. The default is auto. Supported values include:

      • A pixel value, for example, 20.

      • A percentage of the container's height, for example, 20%.

      • Keywords left, center, or right for automatic alignment.

    • Right: Sets the distance between the legend and the component's right edge. The default is auto. Supported values include:

      • A pixel value, for example, 20.

      • A percentage of the container's width, for example, 20%.

      • Keywords left, center, or right for automatic alignment.

    • Bottom: Sets the distance between the legend and the component's bottom edge. The default is auto. Supported values include:

      • A pixel value, for example, 20.

      • A percentage of the container's height, for example, 20%.

      • Keywords left, center, or right for automatic alignment.

    • Width: Specifies the width of the legend. The default is auto, which adapts to the content.

    • Height: Specifies the height of the legend. The default is auto, which adapts to the content.

    • Orientation: Select the layout orientation for legend items.

      • Horizontal: Arranges legend items in a row.

      • Vertical: Arranges legend items in a column.

    • Align: Sets the alignment of the legend symbol relative to its text.

      • Automatic: The default value is Automatic. The behavior is determined by the position and orientation of the component.

      • Left: Aligns the symbol to the left of the text.

      • Center: Centers the symbol and text, which may cause them to overlap.

      • Right: Aligns the symbol to the right of the text.

    • Padding: Click + or -, or enter a value to set the padding around the legend in pixels. The default padding is 5px for all sides.

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

    • Symbol Width: Click + or -, or enter a value to set the width of the legend symbols.

    • Symbol Height: Click + or -, or enter a value to set the height of the legend symbols.

    • Selection Mode: Click the eye icon on the right to show the selection mode options.

    • Inactive Color: For details, see Color Picker Guide. Sets the color of a legend item when it is inactive. This takes effect when you click a legend item on the preview or published page.

    • Text Style

      • Color: For details, see Color Picker Guide. Sets the color of the legend text.

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

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

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

      • Font Size: Click + or -, or enter a value to set the font size of the legend text.

    • Background Color: For details, see Color Picker Guide. Sets the background color of the legend.

    • Border Color: For details, see Color Picker Guide. Sets the border color of the legend.

    • Border Width: Click + or -, or enter a value to set the legend's border width.

    • Align: Sets the alignment for the legend content. The default is Center. Options are Left and Right.

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

    • Left: The distance from the grid to the component's left edge. The default is 3%. Supported values include:

      • A pixel value, for example, 20.

      • A percentage of the container's width, for example, 20%.

      • Keywords left, center, or right for automatic alignment.

    • Top: The distance from the grid to the component's top edge. The default is 60. Supported values include:

      • A pixel value, for example, 20.

      • A percentage of the container's height, for example, 20%.

      • Keywords left, center, or right for automatic alignment.

    • Right: The distance from the grid to the component's right edge. The default is 4%. Supported values include:

      • A pixel value, for example, 20.

      • A percentage of the container's width, for example, 20%.

      • Keywords left, center, or right for automatic alignment.

    • Bottom: The distance from the grid to the component's bottom edge. The default is 3%. Supported values include:

      • A pixel value, for example, 20.

      • A percentage of the container's height, for example, 20%.

      • Keywords left, center, or right for automatic alignment.

    • Width: The width of the grid. The default is auto for an adaptive width.

    • Height: The height of the grid. The default is auto for an adaptive height.

    • Adaptive Layout: When selected, the chart uses an adaptive layout. When cleared, the chart is laid out according to your specified style settings.

    • Background Color: For details, see Color Picker Guide. Sets the background color of the grid. The default is transparent.

    • Border Color: For details, see Color Picker Guide. Sets the border color of the grid. The default is transparent.

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

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

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

    • Type: The type of the coordinate axis. Options include:

      • value: A numeric axis, suitable for continuous data.

      • category: A category axis, suitable for discrete data. If you select this type, you must map category data in the data panel.

      • time: A time axis, suitable for continuous time-series data. Compared to a value axis, a time axis uses time formatting and calculates its ticks differently. For example, it determines whether to use months, weeks, days, or hours for ticks based on the data's time span.

      • log: A logarithmic axis, suitable for log-scale data.

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

    • Name Location: The position of the x-axis name. Options are Start, Center, or End. The default is End.

    • Name Style

      • Color: For details, see Color Picker Guide. Sets the color of the x-axis name text.

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

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

      • Font: The font family of the x-axis name.

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

    • Name Gap: Click + or -, or enter a value to set 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: If selected, the axis is displayed in reverse order.

    • Boundary Gap: If selected, padding is added to both ends of the axis. If cleared, no padding is added.

    • Minimum: The minimum value of the axis scale. The default is Data Min, which uses the minimum value from the data as the minimum tick. If not set, a minimum value is automatically calculated to ensure even tick distribution.

    • Maximum: The maximum value of the axis scale. The default is Data Max, which uses the maximum value from the data as the maximum tick. If not set, a maximum value is automatically calculated to ensure even tick distribution.

    • Scale: If selected, the axis scale is not required to include the zero tick. This applies only to numeric axes and is disabled if a minimum and maximum are set.

    • 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 may be adjusted to improve readability. This setting does not apply to a category axis.

    • 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 axis ticks are integers. This applies only to numeric or time axes.

    • Log Base: The base of the logarithm for a log axis. This is only effective for log axes.

    • Silent: If selected, the axis is static and does not respond to user interactions.

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

      • On Zero: Determines whether the x-axis or y-axis line is rendered at the 0 tick mark of the other axis. This is only effective when the other axis is a numeric axis and includes a 0 tick.

      • Line Style

        • Color: For details, see Color Picker Guide. Sets the color of the x-axis line.

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

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

        • Opacity: Click + or -, or enter a value from 0 to 1 to set the opacity of the x-axis line.

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

      • Align with Label: If selected, the ticks are aligned with the labels. This applies only to a category axis when Boundary Gap is also selected.

      • Interval: Click + or -, or enter a value to set the display interval for axis ticks. This applies to a category axis.

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

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

      • Line Style

        • Color: For details, see Color Picker Guide. Sets the color of the tick lines.

        • Width: Click + or -, or enter a value to set the width of the tick lines.

        • Type: The type of the tick lines. Options are Solid and Dashed.

        • Opacity: Click + or -, or enter a value from 0 to 1 to set the opacity of the tick lines.

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

      • Label Interval: The interval at which axis labels are displayed. This setting applies only to a category axis. By default, an interval is automatically applied to prevent labels from overlapping. Set this to 0 to force all labels to be displayed. If set to 1, every other label is displayed. If set to 2, one of every three labels is displayed, and so on.

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

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

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

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

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

      • Text Style

        • Color: For details, see Color Picker Guide. Sets the color of the axis labels.

        • Font Style: The font style for the axis labels.

        • Font Weight: The font weight for the axis labels.

        • Font: The font family for the axis labels.

        • Font Size: The font size for the axis labels.

        • Align: The horizontal alignment of the axis labels. The default is Auto. Options include:

          • Auto

          • Left

          • Center

          • 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 + or -, or enter a value to change the display interval of axis separator lines. This setting is effective only on a category axis. By default, separator lines are displayed at an interval that prevents them from overlapping. Set the value to 0 to display all separator lines. A value of 1 indicates that every other separator line is displayed. A value of 2 indicates that one of every three separator lines is displayed, and so on.

      • Line Style

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

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

        • Opacity: Click + or -, or enter a value from 0 to 1 to set the opacity of the x-axis split lines.

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

      • Split Interval: Click + or -, or manually enter a value to modify the display interval of split areas on the axis. This setting is effective on the category axis. By default, the interval is automatically adjusted to prevent the split areas from overlapping. You can set this parameter to 0 to force all split areas to be displayed. If you set the value to 1, every other split area is displayed. If the value is 2, one of every three split areas is displayed, and so on.

      • Area Style

        • Opacity: Click + or -, or enter a value from 0 to 1 to set the opacity of the split areas.

  • y-axis: For configuration options, see the x-axis settings.

  • Tooltip: Click the eye icon on the right to show the tooltip settings.提示框

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

    • Background Color: For details, see Color Picker Guide. Sets the background color of the tooltip.

    • Border Color: For details, see Color Picker Guide. Sets the border color of the tooltip.

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

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

    • Text Style

      • Color: For details, see Color Picker Guide. Sets the color of the tooltip text.

      • 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.

  • Series: Click the 加号图标 or 垃圾桶图标 icon to add or delete a conditional style. Click the 横排列图标 or 竖排列图标 icon to arrange multiple conditional styles. Click the 复制图标 icon to copy the selected conditional style and add a new one with the same configuration.系列

    • Name: A custom series name, used with the s field in the data.

    • Polar Index: The index of the polar coordinate system to use. The default is 0. This is useful when a single chart instance has multiple polar coordinate systems.

    • Geo Index: The index of the geo coordinate system to use. The default is 0. This is useful when a single chart instance has multiple geo coordinate systems.

    • calendarIndex: The index of the calendar coordinate system to use. The default is 0. This is useful when a single chart instance has multiple calendar coordinate systems.

    • Hover Animation: If selected, enables animation effects on mouse hover.

    • Legend Hover Link: If selected, hovering over a legend item highlights the corresponding series.

    • Symbol: The shape of the data point markers (symbols). The default is Circle. Options include None, Circle, Rectangle, Round Rectangle, Triangle, Diamond, Pin, and Arrow. For more information, see the ECharts Official Website.

    • Symbol Size: Click + or -, or enter a value to change the size of the symbol.

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

    • Large-scale Optimization: Enables large-scale rendering optimization to improve performance with large datasets. When enabled, this option works with the Large Threshold setting to optimize rendering when the data volume exceeds the specified threshold. However, enabling this option prevents the customization of individual data item styles.

    • Large Threshold: The threshold for enabling rendering optimization. The default is 2000.

    • Label

      • Normal: Click the eye icon on the right to show labels for items in their normal (non-hovered) state.

        • Text Style

          • Color: For details, see Color Picker Guide. Sets the color of the label text for normal items.

          • Font Style: The font style of the label text for normal items.

          • Font Weight: The font weight of the label text for normal items.

          • Font: The font family of the label text for normal items.

          • Font Size: The font size of the label text for normal items.

      • Emphasis: Click the eye icon on the right to show labels for items in their emphasis (hovered) state.

        • Text Style

          • Color: For details, see Color Picker Guide. Sets the color of the label text for emphasis items.

          • Font Style: The font style of the label text for emphasis items.

          • Font Weight: The font weight of the label text for emphasis items.

          • Font: The font family of the label text for emphasis items.

          • Font Size: The font size of the label text for emphasis items.

    • Item Style

      • Normal

        • Color: For details, see Color Picker Guide. Sets the fill color of normal items.

        • Border Color: For details, see Color Picker Guide. Sets the border color of normal items.

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

        • Border Style: The stroke type of the border. Options are Solid and Dashed. The default is Solid.

        • Opacity: Click + or -, or enter a value from 0 to 1 to set the opacity of normal items.

      • Emphasis

        • Color: For details, see Color Picker Guide. Sets the fill color of emphasis items.

        • Border Color: For details, see Color Picker Guide. Sets the border color of emphasis items.

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

        • Border Style: The stroke type of the border. Options are Solid and Dashed. The default is Solid.

        • Opacity: Click + or -, or enter a value from 0 to 1 to set the opacity of emphasis items.

    • Silent: If selected, this series does not respond to or trigger mouse events.

  • Animation: If selected, animation effects are enabled.

Data panel

image

Fields

Field

Description

x

Specifies the x-axis value for each point.

y

Specifies the y-axis value for each point.

s

(Optional) The series value. This field is used with the series settings in the configuration panel.

Parameter

Description

Controlled mode

When enabled, the component does not request data on initial load. Data requests can only be triggered via a callback ID or by an action configured in the Blueprint Editor. When disabled, the component can request data via the Auto Update setting. This mode is disabled by default.

Auto update request

When selected, enables dynamic polling and allows you to set the polling frequency. When cleared, automatic updates are disabled. You must manually refresh the page or trigger data requests through the Blueprint Editor or callback ID events.

Data source

Click Configure Data Source to open the Set Data Source panel. Here, you can change the data source type, modify the data query code, preview the data source response, and view the data response result. For more information, see Configure component data.

Data filter

Data filters provide data structure transformation, filtering, and some simple calculation functions. Click Add Filter to configure a data filter script in the Configure Data Source panel. For more information, see Filter Usage Instructions.

Data response result

Displays the response from the data request. When the data source changes, click the 刷新图标 icon on the right to view the latest data response in real time.

Interaction panel

image

Interactions

交互

说明

当点击数据项时

选中启用，开启组件交互功能。大规模散点图组件拥有交互配置，当单击选中某个数据项时抛出回调值，默认抛出数据中的x和y字段。具体配置请参见如何配置数字翻牌器组件的回调ID。

当图例点击时

选中启用，开启组件交互功能。大规模散点图组件拥有交互配置，当单击某个图例时抛出回调值，默认抛出数据中的selected字段。具体配置请参见如何配置数字翻牌器组件的回调ID。

Configure interactions in the Blueprint Editor

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

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

  3. On the Blueprint Editor configuration page, click the Large-scale Scatter Plot component in the import node bar. The configuration parameters for the large-scale scatter plot appear in the canvas, as shown in the following figure.Blueprint

    • Events

      Event

      Description

      When a data API request is successful

      This event is triggered after a data API request is returned and processed by the filter. The processed data is also returned in JSON format. For a data sample, see the Data Response area on the Data tab of the component's configuration panel in the Canvas Editor.

      When a data API request fails

      This event is triggered when a data API request fails. Failures can be caused by network issues or API errors. The processed data is also returned in JSON format. For a data sample, see the Data Response area on the Data tab of the component's configuration panel in the Canvas Editor.

      When a data item is clicked

      This event is triggered when a point on the large-scale scatter plot is clicked. The data item that corresponds to that point is also returned.

      When the legend is clicked

      This event is triggered when the legend of the large-scale scatter plot is clicked. The data item that corresponds to that legend item is also returned.

    • Actions

      Action

      Description

      Request Data from API

      Requests data from the server again. Data from upstream data processing nodes or layer nodes is used as parameters. For example, if the large-scale scatter plot is configured with an API data source of https://api.test, and the data passed to the Request Data from API action is { id: '1'}, the final API request is https://api.test?id=1.

      Import Data

      Processes data according to the component's format, imports the data into the component, and then redraws it. This action does not require a new request to the server. For a data sample, see the Data Response area on the Data tab of the component's configuration panel in the Canvas Editor.

      Highlight

      The data passed to this action is an object. The parameters include seriesName (series name), seriesIndex (series index), dataIndex (data index), and name (data name). Data sample:

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

      Downplay

      The data passed to this action is an object. The parameters include seriesName (series name), seriesIndex (series index), dataIndex (data index), and name (data name). Data sample:

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

      Show Tooltip

      The data passed to this action is an object. The parameters include dataIndex (data index), name (data name), x (x-coordinate position), and y (y-coordinate position). Data sample:

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

      Hide Tooltip

      Hides the tooltip. No parameters are required.

      Control Legend

      The data passed to this action is an object. The parameters include type (legend action type) and name (legend name). Data sample:

      {  
    "type": "legendToggleSelect",  
    "name": ""
}

      Update Component Configuration

      Dynamically updates the style configuration of the component. First, on the component's Configuration panel, click Copy Configuration to Clipboard to get the component configuration data. Then, in a data processing node on the Blueprint Editor configuration page, change the field values for the styles as needed.

      Show

      Shows the component. The following is a data sample.

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

      Hide

      Hides the component. The following is a data sample.

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

      Toggle Visibility

      Toggles the component between shown and hidden. The following is a data sample.

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

      Move

      Moves the component to a specified position. The following is a data sample.

          return{      
      // The movement method. Absolute positioning: to. Relative positioning: by. Default value: to.
        "positionType": "to",
      // The specified position. x-coordinate, y-coordinate.
      "attr": {
        "x": 0,
        "y": 0
      },
      // The animation method.
      "animation": {
        "enable": false,
        // The animation delay.
        "animationDuration": 1000,
        // The animation curve. Optional values: linear, easeInOutQuad, or easeInOutExpo.
        "animationEasing": "linear"
      }
    }
Previous：Echarts single-axis bubble chartNext：Radar Chart