Echarts single-axis bubble chart

Chart style

Configuration panel

• 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 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 icon.
  • Click the icon to horizontally flip a widget.
  • Click the 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.

• Rendering engine: Sets the rendering engine for the bubble chart. Options include canvas and svg.

• Legend: Click the eye icon on the right to show and configure the legend.

  • Horizontal position: Sets the horizontal alignment of the legend symbol and text.

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

    • Left Align: When the graphic is to the left of the text, the alignment is Left Align.

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

    • Right align: The alignment is Right align when the graphic is on the right of the text.

  • Vertical position: Sets the vertical alignment of the legend symbol and text.

    • Auto: The default is Auto, determined based on the position and orientation of the component.

    • Top align: When the graphic is at the top of the window, its alignment is Top align.

    • Center alignment: The alignment is Center alignment when the graphic is in the center of the window.

    • Bottom align: When a graphic is at the bottom of the window, its alignment is Bottom align.

  • Orientation: Sets the layout of the legend.

    • Horizontal: Arranges legend items horizontally.

    • Vertical: Arranges legend items vertically.

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

  • Item Gap: Click + or -, or enter a value to adjust the spacing between legend items. This sets the horizontal gap for horizontal layouts and the vertical gap for vertical layouts.

  • Text style

    • Color: See Color picker to change 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 family: Sets the font family of the legend text.

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

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

  • Trigger type: Sets how the tooltip is triggered. The default is axis.

    • Data item: Shows the tooltip when you hover over a data item. This is typically used for charts without a category axis, such as scatter plots and pie charts.

    • Axis: Shows the tooltip when you hover over an axis. This is typically used for charts with a category axis, such as bar charts and line charts.

    • None: Disables the tooltip.

  • Axis pointer: Click the eye icon on the right to show and configure the axis pointer.

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

    • Snap to Point: If selected, the axis pointer automatically snaps to data points. This feature is useful on numerical and time-based axes for locating specific data points.

    • Indicator line style

      • Color: See Color picker to change the color of the indicator line.

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

      • Type: The line style. Options include solid, dashed, and dotted.

      • Opacity: Click + or -, or enter a value to adjust the opacity of the indicator line. The value must be between 0 and 1.

    • Indicator shadow style

      • Color: See Color picker to change the color of the indicator shadow.

      • Opacity: Click + or -, or enter a value to adjust the opacity of the indicator shadow. The value must be between 0 and 1.

    • Indicator cross style

      • Color: See Color picker to change the color of the crosshair.

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

      • Type: Specifies the type of the cross-line. Optional. The valid values are Solid line, Dashed line, and Dotted line.

      • Opacity: Click + or -, or enter a value to adjust the opacity of the crosshair. The value must be between 0 and 1.

    • Position: The position of the tooltip relative to the axis. Options include top and bottom.

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

    • Text style

      • Color: See Color picker to change the color of the tooltip label text.

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

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

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

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

• Single axis

  • Left margin: Click + or -, or enter a value to adjust the left margin of the single axis in pixels (px).

  • Top margin: Click + or -, or enter a value to adjust the top margin of the single axis in pixels (px).

  • Right margin: Click + or -, or enter a value to adjust the right margin of the single axis in pixels (px).

  • Bottom margin: Click + or -, or enter a value to adjust the bottom margin of the single axis in pixels (px).

  • Orientation: Specifies the layout orientation of the single axis.

    • Horizontal: Arranges the single axis horizontally.

    • Vertical: Arranges the single axis vertically.

  • Name: The name of the single axis.

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

  • Name style

    • Color: See Color picker to change the color of the axis name text.

    • Font style: Sets the font style of the axis name.

    • Font weight: Sets the font weight of the axis name.

    • Font family: Sets the font family of the axis name.

    • Font size: Click + or -, or enter a value to adjust 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 rotation: Click + or -, or enter a value to set the rotation angle of the axis name.

  • Invert axis: If selected, the axis is inverted.

  • Boundary gap: If selected, a gap is added at both ends of the axis. If cleared, no gap is added.

  • Static: If selected, the axis is static and cannot be interacted with.

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

    • Line style

      • Color: Select a fill style for the axis line color, such as Solid Color or Gradient. See Color picker to change the color of the axis line.

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

      • Type: The line style. Options include solid, dashed, and dotted.

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

  • Axis tick: Click the eye icon on the right to show and configure axis ticks.

    • Align with label: Ensures that ticks are aligned with labels. This option is effective only when Boundary gap is enabled.

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

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

    • Line style

      • Color: Select a fill style for the tick color, such as Solid Color or Gradient. See Color picker to change the color of the axis ticks.

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

      • Type: The line style. Options include solid, dashed, and dotted.

      • Opacity: Click + or -, or enter a value to adjust the opacity of the axis ticks. The value must be between 0 and 1.

  • Axis label: Click the eye icon on the right to show and configure axis labels.

    • Interval: Sets the display interval between labels. For example, 0 displays all labels, and 1 displays every other label.

    • Inside: If selected, labels are displayed inside the axis. If cleared, they are displayed outside.

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

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

    • Show min label: If selected, the minimum axis label is always displayed. By default, this label may be hidden to prevent overlapping.

    • Show max label: If selected, the maximum axis label is always displayed. By default, this label may be hidden to prevent overlapping.

    • Color: See Color picker to change the color of the axis labels.

    • Font style: Sets the font style of the axis label text.

    • Font weight: Sets the font weight of the axis label text.

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

    • Font size: The font size of the axis label text.

  • Split line: Click the eye icon on the right to show and configure split lines.

    • Line style

      • Color: See Color picker to change the color of the split lines.

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

      • Type: The line style. Options include solid, dashed, and dotted.

      • Opacity: Click + or -, or enter a value to adjust the opacity of the split lines. The value must be between 0 and 1.

  • Tooltip

    • Text style

      • Color: See Color picker to change the color of the tooltip.

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

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

      • Font family: Sets 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 series. Click the or icon to arrange the series. Click the icon to duplicate the currently selected series.

  • Name: The name of the series. This should correspond to the value of the s field in the data.

  • Hover animation: If selected, an animation is triggered when you hover over a data point.

  • Legend-linked highlight: If selected, hovering over a legend item highlights the corresponding series.

  • Symbol: The shape of the data markers. The default is circle. Options include none, circle, rect, roundRect, triangle, diamond, pin, and arrow. For more information, see the official ECharts website.

  • Bubble size mapping factor: Sets the scaling factor for bubble sizes.

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

  • Large-scale optimization: Optimizes rendering performance for large datasets to prevent lag. When enabled, you can use the Optimization threshold to apply optimizations only when the data volume exceeds a specified threshold. However, custom styles for individual data items are not supported when this is enabled.

  • Label: Click the eye icon on the right to show and configure labels.

    • Position: Sets the position of the label relative to the bubble. Options include top, left, and inside.

    • Distance: Sets the distance from the label to the top border of the bubble.

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

    • Color: See Color picker to change the color of the label text.

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

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

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

    • Font size: The font size of the label text.

  • Item style

    • Color: See Color picker to change the color of the item.

    • Opacity: Click + or -, or enter a value to adjust the opacity of the item. The value must be between 0 and 1.

• Animation: Enables animation effects.

• Animation duration: Click + or -, or enter a value to set the duration of the initial animation in milliseconds.

• Easing: The easing effect for data update animations. The default is cubicOut.

Data panel

Fields

Interaction panel

Interactions

Blueprint editor interactions

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

2. In the upper-left corner of the page, click the icon.

3. On the Blueprint Editor configuration page, click the Echarts single-axis bubble chart component in the import node list. This displays the component's configuration parameters on the canvas.

   • Events

     Event	Description
     When data API request is successful	Triggers when a data API request is successful and the response has been processed by data filters. The event payload is the processed data in JSON format. For a data sample, see the Data tab > data response section in the configuration panel.
     When data API request fails	Triggers if a data API request fails due to a network issue or an API error. The event payload is the processed data in JSON format. For a data sample, see the Data tab > data response section in the configuration panel.
     When a data item is clicked	Triggers when a user clicks a bubble on the chart. The payload contains the data for that bubble.
     When a legend item is clicked	Triggers when a user clicks a legend item on the chart. The event payload contains the data corresponding to that item.

   • Actions

     Actions	Description
     Request data API	Re-requests data from the server. Data from upstream nodes is sent as parameters. For example, if the chart's API data source is https://api.test and the data passed to the request data API action is { id: '1'}, the final request URL will be https://api.test?id=1.
     Import data	Imports data to the component and re-renders it without re-requesting data from the server. The data must be in the required format. For a data sample, see the Data tab > data response section in the configuration panel.
     Highlight	The action receives an object with the following parameters: seriesName (series name), seriesIndex (series index), dataIndex (data index), and name (data name). Sample data: { "seriesName": "", "seriesIndex": 1, "dataIndex": 1, "name": "" }
     Downplay	The action receives an object with the following parameters: seriesName (series name), seriesIndex (series index), dataIndex (data index), and name (data name). Sample data: { "seriesName": "", "seriesIndex": 1, "dataIndex": 1, "name": "" }
     Show tooltip	The action receives an object with the following parameters: dataIndex (data index), name (data name), x (x-coordinate), and y (y-coordinate). Sample data: { "dataIndex": 1, "name": "", "x": 1, "y": 1 }
     Hide tooltip	Hides the tooltip. No parameters are required.
     Legend control	The action receives an object with the following parameters: type (legend action type) and name (legend name). Sample data: { "type": "legendToggleSelect", "name": "" }
     Update component configurations	Dynamically updates the component's style configuration. To get the configuration data, go to the component's configuration panel and click Copy Configuration to Clipboard. You can then modify the style fields in a data processing node and pass the updated data to this action.
     Show	Shows the component. Sample data: return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Hide	Hides the component. Sample data: return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Toggle	Toggles the visibility of the component. Sample data: return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } }
     Move	Moves the component to a specified position. Sample data: return{ // The positioning type. 'to' for absolute, 'by' for relative. Default: 'to'. "positionType": "to", // The target position, specified by x and y coordinates. "attr": { "x": 0, "y": 0 }, // The animation settings. "animation": { "enable": false, // The animation duration in milliseconds. "animationDuration": 1000, // The easing curve. Options: 'linear', 'easeInOutQuad', 'easeInOutExpo'. "animationEasing": "linear" } }