Echarts funnel chart
This article describes the style and data configuration options for an Echarts funnel 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.
Legend: Click the eye icon on the right to show the legend style.
Left: The distance between the legend and the left border of the component. The default is auto. The following inputs are supported:
A specific pixel value, such as 20.
A percentage of the container's width, such as 20%.
left, center, or right. The component will align automatically.
Top: The distance between the legend and the top border of the component. The default is auto. The following inputs are supported:
A specific pixel value, such as 20.
A percentage of the container's height, such as 20%.
top, center, or bottom. The component will align automatically.
Right: The distance between the legend and the right border of the component. The default is auto. The following inputs are supported:
A specific pixel value, such as 20.
A percentage of the container's width, such as 20%.
left, center, or right: The component automatically aligns to the corresponding position.
Bottom: The distance between the legend and the bottom border of the component. The default is auto. The following inputs are supported:
A specific pixel value, such as 20.
A percentage of the container's height, such as 20%.
When set to left, center, or right, the component automatically aligns to the corresponding position.
Width: Manually enter a value to adjust the width of the legend. The default is auto, which adapts to the legend's width.
Height: Manually enter a value to adjust the height of the legend. The default is auto, which adapts to the legend's height.
Orientation: Click the drop-down list to select the layout orientation of the legend.
Horizontal: The legend items are distributed horizontally.
Vertical: The legend items are distributed vertically.
Align: Click the drop-down list to select the alignment of the legend marker and text.
Auto: The default is auto, which is determined by the component's position and orientation.
Left: Aligns to the left when the graphic is to the left of the text.
Center: Aligns to the center when the legend's graphic and text overlap.
Right: Aligns to the right when the graphic is to the right of the text.
Padding: Click the + or - icon, or manually enter a value to adjust the legend's inner padding in pixels. The default padding for all sides is 5.
Item gap: Click the + or - icon, or manually enter a value to adjust the spacing between legend items. This is the horizontal interval for horizontal layouts and the vertical interval for vertical layouts.
Icon width: Click the + or - icon, or manually enter a value to adjust the width of the legend marker.
Icon height: Click the + or - icon, or manually enter a value to adjust the height of the legend marker.
Select mode: Click the eye icon on the right to show the select mode.
Inactive color: Refer to the color picker instructions to modify the color of the legend when it is inactive. The effect is only visible on the preview or published page when a legend item is clicked.
Text style
Color: Refer to the color picker instructions to modify 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 family: The font family of the legend text.
Font size: Click the + or - icon, or manually enter a value to change the legend font size.
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 the + or - icon, or manually enter a value to adjust the border width of the legend.
Tooltip: Click the eye icon on the right to show the tooltip.
Axis pointer
Type: The pointer type, including line and shadow.
Snap to point: If selected, the axis pointer automatically snaps to the nearest point. This is useful for value and time axes to find small data points.
Label: Click the eye icon on the right to show the axis pointer's label.
Precision: The decimal precision of the numeric value in the text label. By default, it is automatically determined based on the current axis value. You can also specify an integer, such as 2, to keep two decimal places.
Outer margin: If selected, there is a margin between the axis pointer label and the axis. If deselected, there is no margin.
Text style
Color: Refer to the color picker instructions to modify the color of the axis pointer's label text.
Font style: The font style of the axis pointer's label text.
Font weight: The font weight of the axis pointer's label text.
Font family: The font family of the axis pointer's label text.
Font size: The font size of the axis pointer's 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.
Axis line style
Color: Refer to the color picker instructions to modify the axis line color.
Width: Click the + or - icon, or manually enter a value to modify the axis line width.
Type: The type of axis line. Options include solid and dashed.
Opacity: Click the + or - icon, or manually enter a value to modify the axis line opacity. The range is [0, 1].
Trigger: Custom trigger type. Options include Mouse move, Mouse click, and Both move and click.
Background color: Refer to the color picker instructions to modify the tooltip background color.
Border color: Refer to the color picker instructions to modify the tooltip border color.
Border width: Click the + or - icon, or manually enter a value to modify the background box border width.
Padding: Click the + or - icon, or manually enter a value to modify the background box padding in pixels. The default padding for all sides is 5.
Text style
Color: Refer to the color picker instructions to modify the tooltip text color.
Font style: The font style of the tooltip text.
Font weight: The font weight of the tooltip text.
Font family: The font family of the tooltip text.
Font size: The font size of the tooltip text.
Chart elements
Name: Sets the name of the funnel chart.
Min value: Sets the minimum value of the chart. Options include 0, dataMin, and auto.
Max value: Sets the maximum value of the chart. Options include 100, dataMax, and auto.
Min size: Sets the minimum size of the chart. The following inputs are supported:
A specific pixel value, such as 20.
A percentage of the container's width or height, such as 20%.
left, center, or right: The component automatically aligns accordingly.
Max size: Sets the maximum size of the chart. The following inputs are supported:
A specific pixel value, such as 20.
A percentage of the container's width or height, such as 20%.
The component automatically aligns to the corresponding position: left, center, or right.
Left: The distance between the element and the left border of the component. The following inputs are supported:
A specific pixel value, such as 20.
A percentage of the container's width, such as 20%.
left, center, or right. The component will align automatically.
Right: The distance between the element and the right border of the component. The following inputs are supported:
A specific pixel value, such as 20.
A percentage of the container's width, such as 20%.
For left, center, or right, the component automatically aligns to that position.
Top: The distance between the element and the top border of the component. The following inputs are supported:
A specific pixel value, such as 20.
A percentage of the container's height, such as 20%.
The component automatically aligns to the left, center, or right position.
Bottom: The distance between the element and the bottom border of the component. The following inputs are supported:
A specific pixel value, such as 20.
A percentage of the container's height, such as 20%.
left, center, or right: The component automatically aligns to the corresponding position.
Sort: Sets the sorting method of the chart. Options include None, Descending, and Ascending.
Gap: Click the + or - icon, or manually enter a value to modify the gap between chart elements.
Legend link highlight: If selected, enables highlight on legend hover.
Horizontal align: Optional, supports left, center, and right alignment.
Label
Normal item: Click the eye icon on the right to show the normal label item.
Label content: Click the eye icon on the right to show label content.
Value
Thousands separator: If selected, enables the thousands separator for numbers.
Value suffix: Custom input to add a suffix to the value.
Percentage
Label wrap: Click the eye icon on the right to show label wrap.
Label style
Name: Click the + or - icon, or manually enter a value to change the size of the name label.
Value: Click the + or - icon, or manually enter a value to change the size of the value label.
Percentage: Click the + or - icon, or manually enter a value to change the size of the percentage label.
Position: Sets the label's position in the funnel chart. Options include left, inside, and right. The default is inside.
Text style
Color: Refer to the color picker instructions to modify the label color.
Font style: The font style of the label text.
Font weight: The font weight of the label text.
Font family: The font family of the label text.
Font size: The font size of the label text.
Emphasis item: Click the eye icon on the right to show the emphasis label item.
Label content: Click the eye icon on the right to show label content.
Value
Thousands separator: If selected, enables the thousands separator for numbers.
Value suffix: Custom input to add a suffix to the value.
Percentage
Label wrap: Click the eye icon on the right to show label wrap.
Label style
Name: Click the + or - icon, or manually enter a value to change the size of the name label.
Value: Click the + or - icon, or manually enter a value to change the size of the value label.
Percentage: Click the + or - icon, or manually enter a value to change the size of the percentage label.
Position: Sets the label's position in the funnel chart. Options include left, inside, and right. The default is inside.
Text style
Color: Refer to the color picker instructions to modify the label color.
Font style: The font style of the label text.
Font weight: The font weight of the label text.
Font family: The font family of the label text.
Font size: The font size of the label text.
Label line
Normal item: Click the eye icon on the right to show the normal label item.
Length: Click the + or - icon, or manually enter a value to modify the length of the label line.
Axis line style
Color: Refer to the color picker instructions to modify the label line color.
Width: Click the + or - icon, or manually enter a value to modify the label line width.
Type: The type of label line. Options include solid and dashed.
Opacity: Click the + or - icon, or manually enter a value to modify the label line opacity. The range is [0, 1].
Emphasis item: Click the eye icon on the right to show the emphasis label item.
Axis line style
Color: Refer to the color picker instructions to modify the label line color.
Width: Click the + or - icon, or manually enter a value to modify the label line width.
Type: The type of label line. Options include solid and dashed.
Opacity: Click the + or - icon, or manually enter a value to modify the label line opacity. The range is [0, 1].
Element style
Normal item
Border color: Refer to the color picker instructions to modify the border color of normal items.
Border width: Click the + or - icon, or manually enter a value to modify the border width of normal items.
Border style: The border stroke type. Options include solid and dashed. The default value is solid.
Opacity: Click the + or - icon, or manually enter a value to modify the opacity of normal items. The range is [0, 1].
Emphasis item
Border color: Refer to the color picker instructions to modify the border color of emphasis items.
Border width: Click the + or - icon, or manually enter a value to modify the border width of emphasis items.
Border style: The border stroke type. Options include solid and dashed. The default value is solid.
Opacity: Click the + or - icon, or manually enter a value to modify the opacity of normal items. The range is [0, 1].
Data series: Click the
or icon to add or delete a conditional style. Click the or icon to configure the arrangement of multiple conditional styles. Click the icon to copy the currently selected conditional style configuration and add a new one with the same configuration.Color: Refer to the color picker instructions to modify the color of the data series.
Animation: If selected, enables animation effects.
Animation threshold: Click the + or - icon, or manually enter a value to modify the animation threshold in milliseconds. When the number of graphics displayed in a single series exceeds the set threshold, the system will disable animation effects to prevent component crashes.
Animation duration: Click the + or - icon, or manually enter a value to modify the duration of the initial animation in milliseconds.
Easing effect: Click the drop-down box to select the easing effect for data update animations. The default is cubicOut.
icon to vertically flip a widget.
or 
icon to add or delete a conditional style. Click the 
or 
icon to configure the arrangement of multiple conditional styles. Click the 
icon to copy the currently selected conditional style configuration and add a new one with the same configuration.Data panel
Configuration fields
Field | Description |
| Configures the name of each part in the funnel chart. |
| Configures the value of each part in the funnel chart. |
Interaction panel
Interactions
Interaction | Description |
When a data item is clicked | Select Enable to turn on the component's interaction feature. The funnel chart component has interaction configurations. When a data item is clicked, a callback value is thrown, which defaults to the name and value fields from the data. For specific configurations, see Configure Component Callback ID. |
When a legend is clicked | Select Enable to turn on the component's interaction feature. The funnel chart component has interaction configurations. When a legend is clicked, a callback value is thrown, which defaults to the selected field from the data. For specific configurations, see Configure Component Callback ID. |
Blueprint Editor interactions
On the canvas editor page, right-click the component and select Export to Blueprint Editor.
Click the
icon in the upper-left corner of the page.On the Blueprint Editor configuration page, click the Funnel Chart component in the imported nodes panel. You can see the Blueprint Editor configuration parameters for the funnel chart in the canvas as shown below.
Events
Event
Description
When data API request is successful
An event that is thrown after a data API request returns and is processed by the filter. The processed data in JSON format is thrown at the same time. For a data example, see the Data Response Result area on the Data tab of the component's right-side configuration panel in the canvas editor.
When data API request fails
An event that is thrown when a data API request fails (due to network issues or API errors) and is processed by the filter. The processed data in JSON format is thrown at the same time. For a data example, see the Data Response Result area on the Data tab of the component's right-side configuration panel in the canvas editor.
When a data item is clicked
An event that is thrown when a data item in the funnel chart is clicked. The corresponding data item is thrown at the same time.
When a legend is clicked
An event that is thrown when a legend of the funnel chart is clicked. The corresponding data item is thrown at the same time.
Actions
Action
Description
Request data API
Re-requests server-side data. Data from upstream data processing nodes or layer nodes will be used as parameters. For example, if a funnel chart is configured with an API data source of
https://api.test, and the data passed to the Request data API action is{ id: '1'}, the final requested API will behttps://api.test?id=1.Import data API
Imports data into the component and redraws it after processing the data according to the component's drawing format. It does not need to re-request server-side data. For a data example, see the Data Response Result area on the Data tab of the component's right-side configuration panel in the canvas editor.
Show tooltip
The action receives an object with parameters including
dataindex(data index),name(data name),x(x-coordinate position), andy(y-coordinate position). Data example:{ "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). Data example:{ "type": "legendToggleSelect", "name": "" }Update component configuration
Dynamically updates the component's style configuration. First, in the component's Configuration panel, click Copy Configuration to Clipboard to get the component configuration data. Then, change the corresponding style field values in the data processing node on the Blueprint Editor page as needed.
Show
Shows the component. See the example data below.
return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }Hide
Hides the component. See the example data below.
return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }Toggle visibility
Toggles the component's visibility. See the example data below.
return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } }Move
Moves the component to a specified position. See the example data below.
return{ // Move type. Absolute position: to, relative position: by. Default: to. "positionType": "to", // Specified position. x-coordinate, y-coordinate. "attr": { "x": 0, "y": 0 }, // Animation. "animation": { "enable": false, // Animation duration. "animationDuration": 1000, // Animation curve. Options: linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }
icon in the upper-left corner of the page.