This article describes the style and data configuration for the ECharts Annotated Bubble Column Chart component.
Chart style
The ECharts Annotated Bubble Column Chart is a hybrid chart that combines a column chart with a bubble chart, allowing you to directly compare values and proportions in a single visualization.
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.
Legend: Click the eye icon on the right to show the legend settings.
Left: Sets the distance from the legend to the component's left border. The default value is auto. The following inputs are supported:
A specific pixel value, such as 20.
A percentage relative to the container's width, such as 20%.
The keywords left, center, or right for automatic alignment.
Top: Sets the distance from the legend to the component's top border. The default value is auto. The following inputs are supported:
A specific pixel value, such as 20.
A percentage relative to the container's height, such as 20%.
The keywords top, middle, or bottom for automatic alignment.
Right: Sets the distance from the legend to the component's right border. The default value is auto. The following inputs are supported:
A specific pixel value, such as 20.
A percentage relative to the container's width, such as 20%.
The keywords left, center, or right for automatic alignment.
Bottom: Sets the distance from the legend to the component's bottom border. The default value is auto. The following inputs are supported:
A specific pixel value, such as 20.
A percentage relative to the container's height, such as 20%.
The keywords top, middle, or bottom for automatic alignment.
Width: Specifies the width of the legend. The default value is auto, which adapts to the content.
Height: Specifies the height of the legend. The default value is auto, which adapts to the content.
Orientation: Select the layout orientation for the legend items.
Horizontal: Arranges legend items horizontally.
Vertical: Arranges legend items vertically.
Align: Select the alignment of the legend marker and its text.
Automatic: The default is Automatic, determined by the position and orientation of the component.
Left align: When the graphic is on the left of the text, this is Left align.
Center Align: When the symbol and text of the legend overlap, the alignment is Center Align.
Right align: The alignment is Right align when the graphic is on the right of the text.
Padding: Click + or -, or enter a value to adjust the padding of the legend in pixels. The default padding is 5px for all sides.
Item gap: Click + or -, or enter a value to adjust the spacing between legend items.
Icon width: Click + or -, or enter a value to adjust the width of the legend markers.
Icon height: Click + or -, or enter a value to adjust the height of the legend markers.
Selection mode: Click the eye icon on the right to show the selection mode settings.
Inactive color: Refer to the color picker instructions to set the color for a legend item after it has been deselected on the preview or published page.
Text style
Color: Refer to the color picker instructions to modify the legend text color.
Font style: Specifies the font style of the legend text.
Font weight: Specifies the font weight of the legend text.
Font family: Specifies the font family of the legend text.
Font size: Click + or -, or enter a value to change the font size of the legend text.
Background color: Refer to the color picker instructions to modify the background color of the legend.
Border color: Refer to the color picker instructions to modify the border color of the legend.
Border width: Click + or -, or enter a value to adjust the border width of the legend.
Grid: Click the eye icon on the right to show the grid settings.
Left: The distance between the grid and the left border of the component. The default value is 3%. The following input types are supported:
A specific pixel value, such as 20.
A percentage relative to the container's height and width, such as 20%.
left, center, or right. The component automatically aligns to the corresponding position.
Top: The distance between the grid and the top edge of the component. The default value is 60. Supports the following inputs:
A specific pixel value, such as 20.
A percentage of the container's height and width, such as 20%.
left, center, or right. The component automatically aligns to the specified position.
Right: The distance from the right border of the component to the right border of the grid, which defaults to 4%. Supports the following inputs:
A specific pixel value, such as 20.
A percentage of the container's height and width, such as 20%.
left, center, or right. The component automatically aligns to the specified position.
Bottom: The distance between the grid and the bottom border of the component. The default value is 3%. The following input types are supported:
A specific pixel value, such as 20.
A percentage of the container's height and width, such as 20%.
left, center, or right. The component aligns accordingly.
Width: The width of the grid. The default value is auto for adaptive width.
Height: The height of the grid. The default value is auto for adaptive height.
Adaptive layout: When selected, the chart uses an adaptive layout. When cleared, the chart layout is based on your configured styles.
Background color: Refer to the color picker instructions to modify the background color of the grid. The default is transparent.
Border color: Refer to the color picker instructions to modify the border color of the grid. The default is transparent.
Border width: Click + or -, or enter a value to adjust the grid's border width.
x-axis: Click the eye icon on the right to show the x-axis settings.
Offset: The offset of the x-axis from its default position. The default value is 0.
Name: Specifies a custom name for the x-axis.
Name location: Specifies the position of the x-axis name. Options are Start, Center, or End. The default is End.
Name style
Color: Refer to the color picker instructions to modify the color of the x-axis name text.
Font style: Specifies the font style of the x-axis name.
Font weight: Specifies the font weight of the x-axis name.
Font family: Specifies 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 adjust the distance between the axis name and the axis line.
Name rotate: Click + or -, or enter a value to adjust the rotation angle of the axis name.
Inverse: When selected, the axis is rendered in the reverse direction. When cleared, it is rendered in the normal direction.
Boundary gap: If selected, adds padding to both ends of the axis.
Min: The minimum value of the axis scale. The default is Data min, which uses the minimum value from the data. If unset, the minimum is automatically calculated to ensure even tick distribution.
Max: The maximum value of the axis scale. The default is Data max, which uses the maximum value from the data. If unset, the maximum is automatically calculated to ensure even tick distribution.
Auto-scaling: When selected, the axis scale is not forced to include zero. This setting applies only to value axes and has no effect if maximum and minimum values are set.
Split number: Click + or -, or enter a value to set the number of segments for the axis. This is an estimate; the actual number of segments may be adjusted for readability. This setting is not effective for category axes.
Min interval: Click + or -, or enter a value to set the minimum interval of the axis. For example, setting it to 1 ensures that the axis ticks are integers. This is only effective for value or time axes.
Interval: Click + or -, or enter a value to specify the interval of axis ticks. This is only effective for category axes.
Log base: The base of the logarithm. This is only effective for logarithmic axes.
Silent: When selected, the axis becomes static and non-interactive.
Axis Line: Click the eye icon on the right to show the x-axis line.
On zero: Specifies whether the axis line is rendered at the zero-scale mark of the other axis. This is only effective when the other axis is a value axis and contains a zero-scale mark.
Line style
Color: Refer to the color picker instructions to modify the color of the x-axis line.
Width: Click + or -, or enter a value to adjust the width of the x-axis line.
Type: The line type for the x-axis. Options are Solid and Dashed.
Opacity: Click + or -, or enter a value to adjust the opacity of the x-axis line. The value must be between 0 and 1.
Axis tick: Click the eye icon on the right to show the x-axis ticks.
Align with label: When selected, the tick marks align with the labels. This is only effective for category axes when boundary gap is also enabled.
Interval: Click + or -, or enter a value to specify the interval of axis ticks. This is only effective for category axes.
Inside: When selected, axis ticks face inward. When cleared, they face outward.
Length: Click + or -, or enter a value to adjust the length of the axis ticks.
Line style
Color: Refer to the color picker instructions to modify the color of the tick marks.
Width: Click + or -, or enter a value to adjust the width of the tick marks.
Type: The line type for the axis ticks. Options are Solid and Dashed.
Opacity: Click + or -, or enter a value to adjust the opacity of the tick marks. The value must be between 0 and 1.
Axis label: Click the eye icon on the right to show the x-axis labels.
Label Interval: The interval at which axis tick labels are displayed. This setting is effective only for category axes. By default, labels are automatically spaced out to prevent them from overlapping. You can set the value to 0 to force all labels to be displayed. If the value is 1, every other label is displayed. If the value is 2, one label is displayed for every three labels, and so on.
Inside: When selected, axis labels are displayed inside the axis. When cleared, they are displayed outside.
Rotate: The rotation angle of the tick labels, from -90 to 90 degrees. This can prevent labels from overlapping on a category axis.
Margin: The distance between the tick labels and the axis line.
Show min label: When selected, the label for the minimum tick is always displayed. By default, this is determined automatically to prevent labels from overlapping.
Show max label: When selected, the label for the maximum tick is always displayed. By default, this is determined automatically to prevent labels from overlapping.
Text style
Color: Refer to the color picker instructions to modify the color of the axis tick labels.
Font style: Specifies the font style of the axis tick labels.
Font weight: Specifies the font weight of the axis tick labels.
Font family: Specifies the font family of the axis tick labels.
Font size: Specifies the font size of the axis tick labels.
Align: The horizontal alignment of the axis tick label text. The default is Auto. Options include:
Auto
Left
Center
Right
Vertical align: Options include Top, Center, and Bottom.
Split area: Click the eye icon on the right to show the split area.
Split Interval: Click + or -, or manually enter a value to set the display interval for split areas on an axis. This setting is effective for category axes. By default, split areas are displayed at an interval that prevents them from overlapping. You can set the value to 0 to force all split areas to be displayed. A value of 1 means that every other split area is displayed. A value of 2 means 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 area. The value must be between 0 and 1.
Axis pointer: Click the eye icon on the right to show the axis pointer.
Type: The type of pointer. Options are Line and Shadow.
Snap: When selected, the axis pointer automatically snaps to data points. This is useful for value and time axes to automatically find small data points.
Value: The initial position of the axis pointer. The default value is 0.
Status: When selected, the axis pointer is shown. When cleared, it is hidden.
Label: Click the eye icon on the right to show the axis pointer label.
Precision: The number of decimal places for the value in the label. By default, it is automatically determined based on the current axis value. You can also specify an integer, such as 2, to display two decimal places.
Margin: When selected, a margin is added between the axis pointer label and the axis. When cleared, no margin is added.
Text style
Color: Refer to the color picker instructions to modify the text color of the axis pointer label.
Font style: Specifies the font style of the axis pointer label text.
Font weight: Specifies the font weight of the axis pointer label text.
Font family: Specifies the font family for the axis pointer label text.
Font size: Specifies the font size of the axis pointer label text.
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: Refer to the color picker instructions to modify the color of the axis line.
Width: Click + or -, or enter a value to adjust the width of the axis line.
Type: The type of the axis line. Options are Solid and Dashed.
Opacity: Click + or -, or enter a value to adjust the opacity of the axis line. The value must be between 0 and 1.
Handle: Click the eye icon on the right to show the drag handle.
Size: Click + or -, or enter a value to adjust the size of the drag handle.
Margin: Click + or -, or enter a value to adjust the distance between the center of the drag handle and the axis.
Color: The color of the drag handle.
Throttle: The update frequency in milliseconds when dragging the handle. A larger value can improve performance but may reduce responsiveness.
y-axis: For configuration details, see the x-axis settings.
Tooltip: Click the eye icon on the right to show the tooltip.
Trigger: Specifies the trigger type. Options are On Mouse Move, On Click, and On Mouse Move & Click.
Background color: Refer to the color picker instructions to modify the background color of the tooltip.
Border color: Refer to the color picker instructions to modify the border color of the tooltip.
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 5px for all sides.
Text style
Color: Refer to the color picker instructions to modify the color of the tooltip text.
Font style: Specifies the font style of the tooltip text.
Font weight: Specifies the font weight of the tooltip text.
Font family: Specifies the font family of the tooltip text.
Font size: Specifies the font size of the tooltip text.
Series: Click the
or icon to add or delete a series. Click the or icon to arrange multiple series. Click the icon to copy the current series configuration and create a new one with the same settings.Name: Specifies a custom series name. This name must match the value of the s field in the data.
Legend hover link: When selected, linked highlighting is enabled when you hover over the legend.
Coordinate system: The coordinate system used by this series. The default is cartesian2d.
cartesian2d: Uses a 2D Cartesian coordinate system.
polar: Uses a polar coordinate system.
Stack: To stack data, assign the same stack value to multiple series on the same category axis.
Bar width: The width of the bars. If not set, it is adaptive. You can set it as a percentage of the category width. The default is 15%.
Bar Gap: The gap between bars of different series, specified as a percentage of the bar width. For example, a value of 30% creates a gap equal to 30% of the bar width. To make the bars of two series overlap, set Bar Gap to -100%. This is useful for using a bar as a background.
Bar category gap: The distance between bars of the same series. The default is 20% of the category gap, but a fixed value can also be set.
Silent: When selected, the series becomes static and non-interactive.
Label
Normal: Click the eye icon on the right to show labels for items in their normal state.
Text style
Color: Refer to the color picker instructions to modify the label text color for the normal state.
Font style: Specifies the font style of the label text for the normal state.
Font weight: Specifies the font weight of the label text for the normal state.
Font family: Specifies the font family for the label text for the normal state.
Font size: Specifies the font size of the label text for the normal state.
Emphasis: Click the eye icon on the right to show labels for items in their emphasis (hover) state.
Text style
Color: Refer to the color picker instructions to modify the label text color for the emphasis state.
Font style: Specifies the font style of the label text for the emphasis state.
Font weight: Specifies the font weight of the label text for the emphasis state.
Font family: Specifies the font family for the label text for the emphasis state.
Font size: Specifies the font size of the label text for the emphasis state.
Item style
Normal
Color: Refer to the color picker instructions to modify the background color of items in the normal state.
Border color: Refer to the color picker instructions to modify the border color of items in the normal state.
Border width: Click + or -, or enter a value to adjust the border width of items in the normal state.
Border type: Specifies the border stroke type. Options are Solid and Dashed. The default is Solid.
Bar border radius: Click + or -, or enter a value to adjust the corner radius of bars in the normal state.
Opacity: Click + or -, or enter a value to adjust the opacity of items in the normal state. The value must be between 0 and 1.
Emphasis
Color: Refer to the color picker instructions to modify the background color of items in the emphasis state.
Border color: Refer to the color picker instructions to modify the border color of items in the emphasis state.
Border width: Click + or -, or enter a value to adjust the border width of items in the emphasis state.
Border type: Specifies the border stroke type. Options are Solid and Dashed. The default is Solid.
Opacity: Click + or -, or enter a value to adjust the opacity of items in the emphasis state. The value must be between 0 and 1.
Mark line
Color: Refer to the color picker instructions to modify the color of the mark line.
Style: Specifies the stroke type of the mark line. Options are Solid and Dashed. The default is Dashed.
Mark point
Color: Refer to the color picker instructions to modify the color of the mark point.
Symbol: Specifies the symbol for the mark point. The default is pin. Options include circle, rect, roundRect, triangle, diamond, arrow, and pin. For details, see the official ECharts documentation.
Symbol size: Click + or -, or enter a value to adjust the symbol size in pixels.
Symbol rotate: Click + or -, or enter a value to adjust the symbol rotation in degrees.
Font size: Click + or -, or enter a value to adjust the font size of the mark point's label.
Font color: Refer to the color picker instructions to modify the font color of the mark point's label.
Animation: When selected, enables animation effects.
Animation threshold: Click + or -, or enter a value to modify the animation threshold. If the number of elements in a single series exceeds this threshold, animation is disabled to prevent performance issues. The unit is milliseconds.
Animation duration: Click + or -, or enter a value to modify the initial animation duration in milliseconds.
Animation easing: Select an easing effect for data update animations. The default is cubicOut.
icon to vertically flip a widget.
or 
icon to add or delete a series. Click the 
or 
icon to arrange multiple series. Click the 
icon to copy the current series configuration and create a new one with the same settings.
Data panel
Fields
Field | Description |
| Configures the category for each item on the x-axis. |
| Configures the value for each data point in the chart. |
| (Optional) The series value. This field is used with the Series settings in the configuration panel. |
Parameter | Description |
Controlled Mode | If enabled, the component requests data only when triggered by a callback ID or a Blueprint Editor method. If disabled, data is requested on initial load or via auto-update requests. This mode is disabled by default. |
Auto-update request | If selected, enables dynamic polling at a set frequency. If cleared, data is not updated automatically and must be triggered by a page refresh, a Blueprint Editor event, or a callback ID. |
Data source | Click Configure Data Source. In the Set Data Source panel, you can change the data source type, modify the data query code, preview results, and view the data response. For details, see Configure Asset Data. |
Data filter | A data filter can transform data structures, filter data, and perform simple calculations. Click Add Filter to configure a filter script in the Set Data Source panel. For details, see Use Data Filters. |
Data response | Displays the response from the data request. When the data source changes, you can click the |
icon on the right to view the real-time data response.Interaction panel
Interactions
Interaction | Description |
When a data item is clicked | Select Enable to enable the component interaction feature. The Labeled Bubble Bar Chart component has interaction settings. When you click a data item, the component emits a callback value, which by default contains the x and y fields from the data. For more information, see How to configure the callback ID for the Digital Flipper component. |
When a legend item is clicked | Select Enable to turn on the component's interaction feature. The Labeled Bubble Bar Chart component has an interaction setting. When you click a legend, the component emits a callback value. By default, this value is the selected field from the data. For more information, see How to configure the callback ID for the Digital Flipper component. |
Blueprint Editor interaction configuration
In the Canvas Editor, right-click the component and select Export to Blueprint Editor.
Click the
icon in the upper-left corner of the page.In the Blueprint Editor, click the component in the Imported Nodes panel. The component's configuration parameters appear on the canvas, as shown in the following figure.
Events
Event
Description
On data request succeeded
This event is triggered after a data request is successful and the data has been processed by a data filter. The processed data is emitted in JSON format. For a data example, see the data response section in the component's Data panel.
On data request failed
This event is triggered when a data request fails (e.g., due to a network issue or API error). The event emits the response, which contains error information, in JSON format. For a data example, see the data response section in the component's Data panel.
When a data item is clicked
Triggered when a bar is clicked. Emits the data item for the clicked bar.
When a legend item is clicked
This event is triggered when a legend item in the annotated bubble column chart is clicked. The data item corresponding to that legend item is emitted.
Actions
Actions
Description
Request data
Sends a new request to the server for data. Data from upstream processing nodes or layer nodes is passed as parameters. For example, if the component's API data source is set to
https://api.testand the data passed to the Request Data action is{ id: '1'}, the final request URL will behttps://api.test?id=1.Import data
Updates the component with the provided data without making a new server request. The data must be in the required format. For a data example, see the data response section in the component's Data panel.
Show tooltip
The action receives an object with parameters including
dataindex(data index),name(data name),x(x-coordinate), andy(y-coordinate). Example 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 parameters including
type(legend action type) andname(legend name). Example data:{ "type": "legendToggleSelect", "name": "" }Update component configuration
Dynamically updates the component's style configuration. The input for this action is an object containing the style settings to update. You can get the component's current configuration data by clicking Copy Configuration to Clipboard in the configuration panel.
Show
Shows the component. Example data:
return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }Hide
Hides the component. Example data:
return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }Toggle visibility
Toggles the visibility of the component. Example data:
return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } }Move
Moves the component to a specified position. Example data:
return{ // Positioning method. "to" for absolute, "by" for relative. Default: "to". "positionType": "to", // Target position: x and y coordinates. "attr": { "x": 0, "y": 0 }, // Animation settings. "animation": { "enable": false, // Animation duration. "animationDuration": 1000, // Easing function. Options: linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }
icon in the upper-left corner of the page.