This topic describes the chart style and configuration panel features of the ECharts annotated bubble column chart.
Chart style
The ECharts annotated bubble column chart combines a column chart with a bubble chart. This combination lets you directly compare values and proportions in your visualization.
Style panel
-
Search Configuration: Click the Style icon
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
icon to flip the component horizontally.Click the
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: You can click the eye icon on the right to show the legend style settings.
Left: 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 specific pixel value, such as 20.
A percentage of the container's height and width, for example, 20%.
left, center, or right. The widget automatically aligns to the corresponding position.
Top: 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 height, such as 20%.
left, center, or right. The widget automatically aligns to the corresponding position.
Right: 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.
A percentage of the container height and width, such as 20%.
left, center, or right. The widget automatically aligns to the corresponding position.
Bottom: The distance between the legend and the bottom 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 height, such as 20%.
left, center, or right. The widget automatically aligns to the corresponding position.
Width: You can enter a value to adjust the width of the legend. The default value is auto, which automatically adjusts the width.
Height: You can enter a value to adjust the height of the legend. The default value is auto, which automatically adjusts the height.
Orientation: You can 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: You can click the drop-down list to select the alignment of the legend icon and text.
Automatic: The default value is Automatic, which adjusts the alignment based on the widget's position and orientation.
Left Align: If the graphic is to the left of the text, the alignment is Left Align.
Center Alignment: If the legend icon and text overlap, the alignment is Center Alignment.
Right Alignment: If the graphic is to the right of the text, the alignment is Right Alignment.
Padding: You can click the + or - icon, or enter a value to adjust the legend padding in pixels. The default padding is 5 for all sides.
Item Gap: You can click the + or - icon, or enter a value to adjust the distance between legend items. This setting specifies the horizontal gap for horizontal layouts and the vertical gap for vertical layouts.
Icon Width: You can click the + or - icon, or enter a value to adjust the width of the legend icon.
Icon Height: You can click the + or - icon, or enter a value to adjust the height of the legend icon.
Selection Mode: You can click the eye icon on the right to show the selection mode settings.
Inactive Color: You can use the color picker to change the color of a disabled legend item. The effect is visible only when you click a legend item on the preview or published page.
Text Style
Color: You can use the color picker to change the color of the legend text.
Font Style: The font style of the legend text.
Font Weight: The font weight of the legend text.
Font: The font family of the legend text.
Font Size: You can click the + or - icon, or enter a value to change the font size of the legend.
Background Color: You can use the color picker to change the background color of the legend.
Border Color: You can use the color picker to change the border color of the legend.
Border Width: You can click the + or - icon, or enter a value to adjust the border width of the legend.
Grid: You can click the eye icon on the right to show the grid style settings.
Left: The distance between the grid and the left border of the widget. The default value is 3%. You can enter one of the following values:
A specific pixel value, such as 20.
A percentage of the container's height and width, such as 20%.
left, center, or right. The widget automatically aligns to the corresponding position.
Top: The distance between the grid and the top border of the widget. The default value is 60. You can enter one of the following values:
A specific pixel value, such as 20.
A percentage of the container's height, such as 20%.
left, center, or right. The widget automatically aligns to the corresponding position.
Right: The distance between the grid and the right border of the widget. The default value is 4%. You can enter one of the following values:
A specific pixel value, such as 20.
A percentage of the container's height and width, such as 20%.
left, center, or right. The widget automatically aligns to the corresponding position.
Bottom: The distance between the grid and the bottom border of the widget. The default value is 3%. You can enter one of the following values:
A specific pixel value, such as 20.
A percentage of the container's height, such as 20%.
left, center, or right. The widget automatically aligns to the corresponding position.
Width: The width of the grid. The default value is auto, which automatically adjusts the width.
Height: The height of the grid. The default value is auto, which automatically adjusts the height.
Responsive Layout: You can select this check box to enable a responsive layout for the column chart. Clear this check box to use the layout style that you configure.
Background Color: You can use the color picker to change the background color of the grid. The default color is transparent.
Border Color: You can use the color picker to change the border color of the grid. The default color is transparent.
Border Width: You can click the + or - icon, or enter a value to adjust the grid border width.
x-axis: You can click the eye icon on the right to show the x-axis style settings.
Offset: The offset of the x-axis from its default position. The default value is 0.
Name: The custom name of the x-axis.
Name Location: The position of the x-axis name. Options include Start, Center, and End. The default value is End.
Name Style
Color: You can use the color picker to change 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: You can click the + or - icon, or enter a value to change the font size of the x-axis name.
Name Gap: You can click the + or - icon, or enter a value to change the distance between the axis name and the axis line.
Name Rotation: You can click the + or - icon, or enter a value to change the rotation angle of the axis name.
Inverse: You can select this check box to reverse the axis. Clear it to display the axis in the normal direction.
Boundary Gap: You can select this check box to add padding on both sides of the axis. Clear it to remove the padding.
Min: The minimum value of the axis scale. The default value is Data Min, which uses the minimum value from the data on this axis as the minimum tick. If this parameter is not set, the minimum value is calculated automatically to ensure an even distribution of ticks.
Max: The maximum value of the axis scale. The default value is Data Max, which uses the maximum value from the data on this axis as the maximum tick. If this parameter is not set, the maximum value is calculated automatically to ensure an even distribution of ticks.
Scale: You can select this check box to prevent the axis scale from being forced to include the zero tick. This option is valid only for value axes and has no effect if you set a minimum and maximum value.
Split Number: You can click the + or - icon, or enter a value to set the number of segments for the axis. If this parameter is not set, the number is calculated automatically to ensure an even distribution of ticks. Note that this is an estimated value. The actual number of segments displayed is adjusted based on the readability of the resulting axis ticks. This option is not valid for category axes.
Min Interval: You can click the + or - icon, or enter a value to set the minimum interval for the axis. For example, you can set it to 1 to ensure that axis ticks are integers. This option is valid only for value or time axes.
Interval: You can click the + or - icon, or enter a value to change the display interval of axis ticks. This option is valid for category axes.
Log Base: The base of the logarithm. This option is valid only for log axes.
Static: If selected, the axis is static and cannot be interacted with.
Axis Line: You can click the eye icon on the right to show the x-axis line settings.
On Zero: Specifies whether the x-axis or y-axis line should be on the 0 tick of the other axis. This setting is valid only when the other axis is a value axis and includes the 0 tick.
Axis Line Style
Color: You can use the color picker to change the color of the x-axis line.
Width: You can click the + or - icon, or enter a value to change the width of the x-axis line.
Type: The type of the x-axis line. Options include Solid line and Dashed line.
Opacity: You can click the + or - icon, or enter a value to change the opacity of the x-axis line. The range is [0, 1].
Tick: You can click the eye icon on the right to show the x-axis tick settings.
Align with Label: You can select this check box to align ticks with labels. For category axes, this setting is valid only after you select the Boundary Gap check box.
Interval: You can click the + or - icon, or enter a value to change the display interval of axis ticks. This option is valid for category axes.
Inside: You can select this check box to point the axis ticks inward. Clear it to point them outward.
Length: You can click the + or - icon, or enter a value to change the length of the axis ticks.
Axis Line Style
Color: You can use the color picker to change the color of the tick lines.
Width: You can click the + or - icon, or enter a value to change the width of the tick lines.
Type: The type of the axis line. Options include Solid line and Dashed line.
Opacity: You can click the + or - icon, or enter a value to change the opacity of the tick lines. The range is [0, 1].
Tick Label: You can click the eye icon on the right to show the x-axis tick label settings.
Interval: The display interval of axis tick labels. This option is valid for category axes. By default, labels are displayed at intervals to prevent them from overlapping. You can set this parameter to 0 to force all labels to be displayed. A value of 1 means display every other label. A value of 2 means display every third label, and so on.
Inside: You can select this check box to point the axis tick labels inward. Clear it to point them outward.
Rotate: The rotation angle of the tick labels, from -90 to 90 degrees. You can rotate labels on a category axis to prevent them from overlapping.
Margin: The distance between the tick labels and the axis line.
Show Min Label: You can select this check box to show the minimum tick label. By default, this is determined automatically. The minimum tick label is not shown if labels overlap.
Show Max Label: You can select this check box to show the maximum tick label. By default, this is determined automatically. The maximum tick label is not shown if labels overlap.
Text Style
Color: You can use the color picker to change the color of the axis tick labels.
Font Style: The font style of the axis tick label text.
Font Weight: The font weight of the axis tick label text.
Font: The font family of the axis tick label text.
Font Size: The font size of the axis tick label text.
Align: The horizontal alignment of the axis tick label text. The default is Automatic. Options include the following:
Automatic
Align left
Align center
Align right
Alignment: The vertical alignment. Options include Top, Center, and Bottom.
Split Area: You can click the eye icon on the right to show the split area settings.
Interval: You can click the + or - icon, or enter a value to change the display interval of the axis split area. This option is valid for category axes. By default, split areas are displayed at intervals to prevent them from overlapping. You can set this parameter to 0 to force all split areas to be displayed. A value of 1 means display every other split area. A value of 2 means display every third split area, and so on.
Area Style
Opacity: You can click the + or - icon, or enter a value to change the opacity of the split area. The range is [0, 1].
Axis Pointer: You can click the eye icon on the right to show the axis pointer settings.
Type: The pointer type. Options include Line and Shadow.
Snap: You can select this check box to automatically snap the axis pointer to a point. This is useful for value and time axes to find small data points.
Initial Value: The initial position of the axis pointer. The default value is 0.
Status: The current status of the axis pointer. You can select the check box to show it. You can clear the check box to hide it.
Label: You can click the eye icon on the right to show the axis pointer's label settings.
Precision: The decimal precision of the numeric value in the text label. By default, it is determined automatically based on the current axis value. You can also specify an integer, such as 2, to keep two decimal places.
Margin: You can select this check box to add a margin between the axis pointer label and the axis. Clear it to remove the margin.
Text Style
Color: You can use the color picker to change the color of the axis pointer label text.
Font Style: The font style of the axis pointer label text.
Font Weight: The font weight of the axis pointer label text.
Font: The font family of the axis pointer label text.
Font Size: The font size of the axis pointer label text.
Background Color: The background color of the axis pointer text label.
Border Color: The border color of the axis pointer text label.
Border Width: The border width of the axis pointer text label.
Line Style
Color: You can use the color picker to change the color of the axis line.
Width: You can click the + or - icon, or enter a value to change the width of the axis line.
Type: The type of the axis line. Options include Solid line and Dashed line.
Opacity: You can click the + or - icon, or enter a value to change the opacity of the axis line. The range is [0, 1].
Handle: You can click the eye icon on the right to show the handle settings.
Size: You can click the + or - icon, or enter a value to change the size of the handle.
Margin: You can click the + or - icon, or enter a value to change the distance between the handle's center point and the axis.
Color: The color of the handle.
Refresh Rate: The update period in milliseconds when dragging the handle. A larger value can improve performance but may reduce the user experience.
y-axis: For configuration details, see the x-axis settings.
Tooltip: You can click the Eye icon on the right to view the tooltip.
Trigger: The custom trigger type. Options include Mouse move, Mouse click, and Mouse move and click.
Background Color: You can use the color picker to change the background color of the tooltip.
Border Color: You can use the color picker to change the border color of the tooltip.
Border Width: You can click the + or - icon, or enter a value to change the border width of the background.
Padding: You can click the + or - icon, or enter a value to change the padding of the background in pixels. The default padding is 5 for all sides.
Text Style
Color: You can use the color picker to change 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: You can click the
or icon to add or delete a conditional style. You can click the or icon to arrange multiple conditional styles. You can click the icon to copy the currently selected conditional style and add a new one with the same configuration.Name: The custom series name. This name must be used with the
sfield in the data.Legend Hover Link: You can select this check box to enable highlight linkage when hovering 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: Stacks data. Series on the same category axis can be stacked if they have the same stack value.
Bar Width: The width of the bars. If this parameter is not set, the width is adaptive. You can set it as a percentage of the category width. The default is 15%.
Bar Gap: The distance between bars of different series, as a percentage (for example, 30% means 30% of the bar width). To make the bars of two series overlap, set Bar Gap to -100%. This is useful for using bars as a background.
Bar Category Gap: The distance between bars of the same series. The default is 20% of the category gap. You can set a fixed value.
Static: If checked, the coordinate axis becomes static and non-interactive.
Label
Normal: You can click the eye icon on the right to show the label text for normal items (bars that are not responding to mouse events).
Text Style
Color: You can use the color picker to change the color of the normal item label text.
Font Style: The font style of the normal item label text.
Font Weight: The font weight of the normal item label text.
Font: The font family of the normal item label text.
Font Size: The font size of the normal item label text.
Emphasis: You can click the eye icon on the right to show the label text for emphasized items (bars that are responding to mouse events).
Text Style
Color: You can use the color picker to change the color of the emphasized item label text.
Font Style: The font style of the emphasized item label text.
Font Weight: The font weight of the emphasized item label text.
Font: The font family of the emphasized item label text.
Font Size: The font size of the emphasized item label text.
Item Style
Normal
Color: You can use the color picker to change the background color of normal items.
Border Color: You can use the color picker to change the border color of normal items.
Border Width: You can click the + or - icon, or enter a value to change the border width of normal items.
Border Style: The border stroke type. Options include Solid line and Dashed line. The default value is Solid line.
Bar Border Radius: You can click the + or - icon, or enter a value to change the border radius of normal item bars.
Opacity: You can click the + or - icon, or enter a value to change the opacity of normal items. The range is [0, 1].
Emphasis
Color: You can use the color picker to change the background color of emphasized items.
Border Color: You can use the color picker to change the border color of emphasized items.
Border Width: You can click the + or - icon, or enter a value to change the border width of emphasized items.
Border Style: The border stroke type. Options include Solid line and Dashed line. The default value is Solid line.
Opacity: You can click the + or - icon, or enter a value to change the opacity of normal items. The range is [0, 1].
Chart Average Line
Color: You can use the color picker to change the color of the chart's mark line.
Style: The stroke type of the chart's mark line. Options include Solid line and Dashed line. The default value is Dashed line.
Chart Marker
Color: You can use the color picker to change the color of the chart's mark line.
Symbol: The custom symbol for the mark. The default value is pin. Symbol types include circle, rect, roundRect, triangle, diamond, arrow, and pin. For more information, see the ECharts official website.
Symbol Size: You can click the + or - icon, or enter a value to change the symbol size in pixels.
Symbol Rotate: You can click the + or - icon, or enter a value to change the symbol rotation angle in degrees.
Font Size: You can click the + or - icon, or enter a value to change the font size of the chart mark.
Font Color: You can use the color picker to change the font color of the chart mark.
Animation: You can select this check box to enable animation effects.
Animation Threshold: You can click the + or - icon, or enter a value to change the animation threshold in milliseconds. If the number of graphics displayed in a single series exceeds the threshold you set, the system disables animation effects to prevent the widget from crashing.
Animation Duration: You can click the + or - icon, or enter a value to change the duration of the initial animation in milliseconds.
Easing: You can click the drop-down list to select the easing effect for the data update animation. The default is cubicOut.
or 
icon to add or delete a conditional style. You can click the 
or 
icon to arrange multiple conditional styles. You can click the 
icon to copy the currently selected conditional style and add a new one with the same configuration.Data Source panel
Field |
Description |
|
Configures the category for each x-axis in the column chart, which is the value of the x-axis. |
|
Configures the value for each point in the column chart. |
|
(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 |
| 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 |
| 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. |
icon to configure field styles individually.
icon on the right to check the current data response result, or click the 
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.Advanced panel
Interaction |
Description |
On Data Item Click |
Turn on the switch to enable widget interaction. When a data item is clicked, a callback value is thrown. By default, the |
On Legend Click |
Turn on the switch to enable widget interaction. When a legend item is clicked, a callback value is thrown. By default, the |
Blueprint Interaction
You can click the
icon in the upper-left corner of the page to go to the Blueprint page.On the Layer Node tab, add the current widget to the main canvas.
View the Blueprint configuration parameters.
Events
Event
Description
On Data Fetched
An event that is thrown after a data API request returns and is processed by a filter. The processed data is also thrown in JSON format. For a data example, see the Data Response area on the Data Source tab of the widget's configuration panel in the canvas editor.
On Data Item Click
An event that is thrown when you click data in the annotated bubble column chart. The corresponding data item is also thrown.
On Legend Click
An event that is thrown when you click a legend in the annotated bubble column chart. The corresponding data item is also thrown.
Actions
Action
Description
Request Data
Re-requests server-side data. Data thrown by input data processing nodes or layer nodes is used as a parameter. For example, if the annotated bubble column chart is configured with an API data source of
https://api.testand the data passed to the Request Data action is{ id: '1'}, the final requested API will behttps://api.test?id=1.Import Data
The data is processed into the format required by the component and then imported to redraw it. This eliminates the need to request data from the server. For a data example, see the Data Response area on the Data Source tab in the component configuration panel on the right side of the canvas editor.
Show Tooltip
The data passed to the action is an object. Parameters include
dataindex(data index),name(data name),x(x-coordinate position), andy(y-coordinate position). See the data example:{ "dataIndex": 1, "name": "", "x": 1, "y": 1 }Hide Tooltip
Hides the tooltip. No parameters are required.
Legend Control
The data passed to the action is an object. Parameters include
type(legend action type) andname(legend name). See the data example:{ "type": "",// The legend action type. Options: legendSelect, legendUnSelect, legendToggleSelect "name": "" }Move
Moves the widget to a specified position. See the data example.
{ // The move type. 'to' for absolute positioning, 'by' for relative positioning. Default: to. "positionType": "to", // The target position. x-coordinate, y-coordinate. "attr": { "x": 0, "y": 0 }, // The animation method. "animation": { "enable": false, // The animation delay. "animationDuration": 1000, // The animation curve. Options: linear, easeInOutQuad, easeInOutExpo. "animationEasing": "linear" } }Toggle Visibility
Toggles the visibility of the widget. No parameters are required.
Show
Shows the widget. See the data example.
{ "animationType": "",// The animation type. Option: fade. If left blank, there is no animation. "animationDuration": 1000,// The animation delay in ms. "animationEasing": ""// The animation curve. }Hide
Hides the widget. See the data example.
{ "animationType": "",// The animation type. Option: fade. If left blank, there is no animation. "animationDuration": 1000,// The animation delay in ms. "animationEasing": ""// The 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 configuration page as needed.
icon in the upper-left corner of the page to go to the Blueprint page.