DocsICP FilingConsole
官方文档
首页

Echarts funnel chart

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

Configure the style and data of a funnel chart.

Chart styleimage.png

Style panelimage.png

  • Search Configuration: Click the Style icon image 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 image icon to flip the component horizontally.

      • Click the image 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: Click the image.png icon to configure the legend style.

    • Left: The distance between the legend and the left border of the widget. Default value: auto. Valid 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 itself to the corresponding position.

    • Top: The distance between the legend and the top border of the widget. Default value: auto. Valid values:

      • A specific pixel value, such as 20.

      • A percentage of the container's height, such as 20%.

      • If you select left, center, or right, the component automatically snaps to the corresponding position.

    • Right: The distance between the legend and the right border of the widget. Default value: auto. Valid values:

      • A specific pixel value, such as 20.

      • A percentage of the height and width of the container, such as 20%.

      • left, center, or right: The widget automatically aligns to the selected position.

    • Bottom: The distance between the legend and the bottom border of the widget. Default value: auto. Valid values:

      • A specific pixel value, such as 20.

      • A percentage of the container's height, such as 20%.

      • Aligns the widget to the left, center, or right.

    • Width: The width of the legend. Default value: auto.

    • Height: The height of the legend. Default value: auto.

    • Orientation: The layout orientation of the legend.

      • Horizontal: The legend items are arranged horizontally.

      • Vertical: The legend items are arranged vertically.

    • Alignment: The alignment of legend markers and text.

      • Auto: Alignment is determined by the position and orientation of the widget. This is the default value.

      • Align left: Places the icon to the left of the text.

      • Align center: The legend icon and text overlap at the center.

      • Align right: Places the icon to the right of the text.

    • Padding: The padding of the legend, in pixels. Default value: 5 for all sides.

    • Item Gap: The spacing between legend items. This is the horizontal gap for a horizontal layout and the vertical gap for a vertical layout.

    • Icon Width: The width of the legend markers.

    • Icon Height: The height of the legend markers.

    • Selection Mode: Click the Eye icon to enable selection mode.

    • Inactive Color: The color of an inactive legend item, visible when you click a legend item on the preview or published page.

    • Text Style

      • Color: Sets the color of the legend text. For more information, see Color picker.

      • 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: Click + or -, or enter a value to change the font size of the legend.

    • Background Color: The background color of the legend. For more information, see Color picker.

    • Border Color: The border color of the legend. For more information, see Color picker.

    • Border Width: The border width of the legend.

  • Tooltip: Click the image.png icon to configure the tooltip.

    • Axis Pointer

      • Type: The pointer type. Options include Line, Shadow, and Cross.

      • Snap to points: Select this check box to automatically snap the axis pointer to a point. This feature is useful for value axes and time axes because it helps locate small data points.

      • Label: Click the Eye icon on the right to show the labels of the coordinate axis indicator.

        • Precision: The decimal precision of the numeric value in the text label. The precision is automatically determined by default. You can specify an integer, such as 2, for two decimal places.

        • Outer Margin: Select this check box to add a margin between the axis pointer label and the axis. Clear the check box to remove the margin.

        • Text Style

          • Color: Sets the color of the axis pointer label text. For more information, see Color picker.

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

      • Axis Line Style

        • Color: Sets the color of the axis line. For more information, see Color picker.

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

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

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

    • Trigger Condition: Sets the custom trigger type. Options include Trigger on mousemove, Trigger on click, and Trigger on mousemove and click.

    • Background Color: Sets the background color of the tooltip. For more information, see Color picker.

    • Border Color: Sets the border color of the tooltip. For more information, see Color picker.

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

    • Padding: The padding of the tooltip background, in pixels. Default value: 5 for all sides.

    • Text Style

      • Color: Sets the color of the tooltip text. For more information, see Color picker.

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

  • Chart Element

    • Name: Sets the name of the funnel chart.

    • Minimum: Sets the minimum value for the chart. Options include 0, Data Minimum, and Auto.

    • Maximum: Sets the maximum value for the chart. Options include 100, Data Maximum, and Auto.

    • Minimum Size: The minimum size of the chart. Valid values:

      • A specific pixel value, such as 20.

      • A percentage of the container's size, such as 20%.

      • left, center, or right: The widget is automatically aligned to the selected position.

    • Maximum Size: The maximum size of the chart. Valid values:

      • A specific pixel value, such as 20.

      • A percentage of the container's size, such as 20%.

      • left, center, or right: Aligns the widget to the corresponding position.

    • Left: The distance between the element and the left border of the widget. Valid 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 itself to the corresponding position.

    • Right: The distance between the element and the right border of the widget. Valid values:

      • A specific pixel value, such as 20.

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

      • The widget is automatically aligned to the left, center, or right.

    • Top: The distance between the element and the top border of the widget. Valid values:

      • 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 snaps to the corresponding position.

    • Bottom: The distance between the element and the bottom border of the widget. Valid values:

      • A specific pixel value, such as 20.

      • A percentage of the container's height, such as 20%.

      • Automatically aligns the widget to the left, center, or right.

    • Sorting: Sets the sort order for the chart. Options include None, Descending, and Ascending.

    • Pitch: Click + or -, or enter a value to modify the pitch between chart elements.

    • Highlight on legend hover: Select this check box to enable highlighting when you hover over a legend item.

    • Horizontal Alignment: Optional. Options include Align left, Align center, and Align right.

    • Label

      • General Items: Click the Eye icon on the right to show the general items of the label.

        • Label Content: Click the Eye icon on the right to show the label content.

          • Value

            • Thousands separator: Select this check box to enable the thousands separator for numeric values.

            • Value suffix: Enter a custom suffix to add to the value.

          • Percentage

            • Label Wrap: Click the Eye icon on the right to show wrapped labels.

              • Label Style

                • Name: Click + or -, or enter a value to modify the size of the name label.

                • Value: Click + or -, or enter a value to modify the size of the value label.

                • Percentage: Click + or -, or enter a value to modify the size of the percentage label.

            • Position: Sets the position of the label on the funnel chart. Options include Left, Inside, and Right. The default value is Inside.

        • Text Style

          • Color: Sets the color of the label. For more information, see Color picker.

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

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

          • Font: The font family of the label text.

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

      • Highlight: Click the Eye icon on the right to show label highlights.

        • Label Content: Click the Eye icon on the right to show the label content.

          • Value

            • Thousands separator: Select this check box to enable the thousands separator for numeric values.

            • Value suffix: Enter a custom suffix to add to the value.

          • Percentage

            • Label Wrapping: Click the Eye icon on the right to show label wrapping.

              • Label Style

                • Name: Click + or -, or enter a value to modify the size of the name label.

                • Value: Click + or -, or enter a value to modify the size of the value label.

                • Percentage: Click + or -, or enter a value to modify the size of the percentage label.

            • Position: Sets the position of the label on the funnel chart. Options include Left, Inside, and Right. The default value is Inside.

        • Text Style

          • Color: Sets the color of the label. For more information, see Color picker.

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

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

          • Font: The font family of the label text.

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

    • Label Line

      • General Items: Click the Eye icon on the right to show the general items of the label.

        • Length: Click + or -, or enter a value to modify the length of the label line.

        • Axis Line Style

          • Color: Sets the color of the label line. For more information, see Color picker.

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

          • Type: The type of the label line. Options include Solid line and Dashed line.

          • Opacity: Click + or -, or enter a value to modify the opacity of the label line. The value ranges from 0 to 1.

      • Highlights: Click the Eye icon on the right to show label highlights.

        • Axis Line Style

          • Color: Sets the color of the label line. For more information, see Color picker.

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

          • Type: The type of the label line. Options include Solid line and Dashed line.

          • Opacity: Click + or -, or enter a value to modify the opacity of the label line. The value ranges from 0 to 1.

    • Element Style

      • Normal

        • Border Color: Sets the border color of the normal item. For more information, see Color picker.

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

        • Border Style: The outline type of the border. Options include Solid line and Dashed line. The default value is Solid line.

        • Opacity: Click + or -, or enter a value to modify the opacity of the normal item. The value ranges from 0 to 1.

      • Key Items

        • Border Color: Sets the border color of the emphasis item. For more information, see Color picker.

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

        • Border Style: The outline type of the border. Options include Solid line and Dashed line. The default value is Solid line.

        • Opacity: Click + or -, or enter a value to modify the opacity of the normal item. The value ranges from 0 to 1.

  • Data Series: Click the image or image icon on the right to add or delete a conditional style. Click the image or image icon to arrange multiple conditional styles. Click the image icon to copy the current conditional style configuration and add a new one with the same configuration.

    • Color: Sets the color of the data series. For more information, see Color picker.

  • Animation: Select this check box to enable animation effects.

  • Animation Threshold: Click + or -, or enter a value to modify the animation threshold. The unit is milliseconds. If the number of graphics displayed in a single series exceeds the threshold you set, the animation effect is disabled to prevent the widget from crashing.

  • Animation Duration: The duration of the initial animation, in milliseconds.

  • Easing Effect: The easing effect for the data update animation. Default value: cubicOut.

Data source panelimage.png

Field

Description

name

The name of each section in the funnel chart.

value

The value of each section in the funnel chart.

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 image icon to configure field styles individually.

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 image icon on the right to check the current data response result, or click the image 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.

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.

Advanced panelimage.png

Interaction

Description

When a data item is clicked

Enable this switch to allow widget interaction. When a data item is clicked, a callback value is returned. By default, the x, y, and s fields are returned. For more information, see Configure widget interactions.

When a legend item is clicked

Enable this switch to allow widget interaction. When a legend item is clicked, a callback value is returned. By default, the selected field is returned. For more information, see Configure widget interactions.

Blueprint interaction

  1. Click the image icon in the upper-left corner of the page to open the Blueprint page.

  2. On the Layer Node tab, add the current widget to the main canvas.

  3. View the Blueprint configuration parameters.image.png

    • Events

      Event

      Description

      When data API request is complete

      Triggered after the data from the API request is returned and processed by the filter. The processed data is in JSON format. For a data example, see the Data Response section on the Data Source tab in the widget's configuration panel.

      When a data item is clicked

      Triggered when you click a data item in the funnel chart. The corresponding data item is returned.

      When a legend item is clicked

      Triggered when you click a legend item in the funnel chart. The corresponding data item is returned.

    • Actions

      Action

      Description

      Request data API

      Requests data from the server again. Data from input data processing nodes or layer nodes is passed as parameters. For example, if a funnel chart uses the API data source https://api.test and the data { id: '1'} is passed to the Request data API action, the final request URL becomes https://api.test?id=1.

      Import data API

      Processes data in the component's drawing format and imports it to redraw the component without requesting data from the server again. For a data example, see the Data Response area on the Data Source tab in the component's configuration panel.

      Show tooltip

      The data passed to the action is an object. The parameters include dataindex (data index), name (data name), x (x-coordinate position), and y (y-coordinate position). See the data example below.

      { 
    "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. The parameters include type (legend action type) and name (legend name). See the data example below.

      {
  "type": "",// Legend action types: legendSelect, legendUnSelect, legendToggleSelect
  "name": ""
}

      Move

      Moves the component to a specified position. See the data example below.

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

      Toggle visibility

      Toggles the visibility of the component. No parameters are required.

      Show

      Shows the component. See the data example below.

      {
  "animationType": "",// The animation method. Optional value: fade. If left blank, there is no animation.
  "animationDuration": 1000,// The animation delay in ms.
  "animationEasing": ""// The animation curve.
}

      Hide

      Hides the component. See the data example below.

      {
  "animationType": "",// The animation method. Optional value: fade. If left blank, there is no animation.
  "animationDuration": 1000,// The animation delay in ms.
  "animationEasing": ""// The animation curve.
}

      Update component configuration

      Dynamically updates the component's style configuration. Click Copy Configuration to Clipboard in the component's Style panel to get the configuration data. Then, in the data processing node on the Blueprint Editor configuration page, change the field values as needed.
Previous：ECharts basic line chartNext：Echarts pictorial bar chart