DocsICP FilingConsole
官方文档
首页

Echarts stepped waterfall chart

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

The ECharts stepped waterfall chart displays cumulative data increases and decreases in a waterfall layout. You can customize its style, data sources, and interactions from the configuration panel.

Chart style

The ECharts stepped waterfall chart is a column chart variant that supports custom x- and y-axes, multi-category data difference configuration, and waterfall-style data rise-and-fall display, making it ideal for showing cumulative changes in a compact dashboard space.

image

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 eye icon on the right to display the legend.

    • Left: The distance between the legend and the left border of the widget. Default: auto. Valid values:

      • A specific pixel value, such as 20.

      • The value is a percentage of the container's width or height, such as 20%.

      • left, center, or right: Snaps the widget to the selected position.

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

      • A pixel value, such as 20.

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

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

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

      • A pixel value, such as 20.

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

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

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

      • A pixel value, such as 20.

      • Specifies a percentage of the container's width or height, such as 20%.

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

    • Width: The width of the legend. Default: auto (adaptive).

    • Height: The height of the legend. Default: auto (adaptive).

    • Orientation: The layout orientation of the legend.

      • Horizontal: The legend items are arranged horizontally.

      • Vertical: The legend items are arranged vertically.

    • Align: The alignment of the legend markers and text.

      • Auto: Automatically determines alignment based on the widget position and orientation.

      • Left Align: Places the graphic to the left of the text.

      • Center: Centers the legend icon and text.

      • Align Right: Places the graphic to the right of the text.

    • Padding: Click + or -, or enter a value to set the padding of the legend in pixels. The default is 5.

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

    • Item Width: The width of the legend markers. Click + or -, or enter a value to adjust.

    • Item Height: The height of the legend markers. Click + or -, or enter a value to adjust.

    • Select Mode: Click the eye icon on the right to enter selection mode.

    • Inactive Color: For more information, see Color picker. Changes the color of an inactive legend item. The effect is visible only when you click a legend item on the preview or published page.

    • Text Style

      • Color: For more information, see Color picker. Changes 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: To change the font size of the legend, click + or -, or enter a value.

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

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

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

  • Grid: Click the eye icon on the right to display the grid.

    • Left: The distance from the grid to the left border of the widget. Default: 3%. Valid values:

      • Specifies a pixel value, such as 20.

      • Specifies a percentage of the container width or height, such as 20%.

      • Select left, center, or right to automatically align the widget.

    • Top: The distance from the grid to the top border of the widget. Default: 60. Valid values:

      • A specific pixel value, such as 20.

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

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

    • Right: The distance from the grid to the right border of the widget. Default: 4%. Valid values:

      • Specifies a pixel value, such as 20.

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

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

    • Bottom: The distance from the grid to the bottom border of the widget. Default: 3%. Valid values:

      • A pixel value, such as 20.

      • A percentage of the container's width or height. For example, 20%.

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

    • Width: The width of the grid. Default: auto (adaptive).

    • Height: The height of the grid. Default: auto (adaptive).

    • Adaptive Layout: When selected, the column chart uses an adaptive layout. When cleared, it uses the manually configured layout.

    • Background Color: For more information, see Color picker. Changes the background color of the grid. The default color is transparent.

    • Border Color: For more information, see Color picker. Changes the border color of the grid. The default color is transparent.

    • Border Width: Click + or -, or enter a value to set the grid's border width.

  • x-axis: Click the eye icon on the right to configure the x-axis style.

    • Offset: The offset of the x-axis from its default position. Default: 0.

    • Name: The name of the x-axis.

    • Name Location: The position of the x-axis name, which can be Start, Center, or End. The default value is End.

    • Name Style

      • Color: For more information, see Color picker. Changes 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 Family: The font family of the x-axis name.

      • Font Size: Click + or -, or enter a value to adjust the x-axis name font size.

    • Name Gap: The distance between the axis name and the axis line. Click + or -, or enter a value to adjust the distance.

    • Name Rotate: Click + or -, or enter a value to set the rotation angle of the axis name.

    • Inverse: When selected, the axis is displayed in reverse order. When cleared, the axis uses the default order.

    • Boundary Gap: When selected, blank space is added on both sides of the axis. When cleared, no blank space is added.

    • Min: The minimum value for the axis. Default: Data Min, which uses the minimum data value as the lower bound. If not set, the minimum is automatically calculated to ensure evenly distributed tick marks.

    • Max: The maximum value of the axis. Default: Data Max, which uses the maximum data value as the upper bound. If not set, the maximum is automatically calculated to ensure evenly distributed tick marks.

    • Split Number: The number of segments for the axis. Click + or -, or enter a value. If not set, the system automatically calculates a value to ensure evenly distributed tick marks. This is an estimated value; the actual number of segments may be adjusted for label readability. Not applicable to category axes.

    • Min Interval: Click + or -, or enter a value to set the minimum axis interval. For example, set this parameter to 1 to ensure that the axis tick labels are integers. This parameter applies only to value or time axes.

    • Interval: Click + or -, or enter a value to set the interval between axis tick marks. This parameter applies only to category axes.

    • Log Base: The base of the logarithmic axis. This parameter is valid only for logarithmic axes.

    • Axis Line: Click the eye icon to display the x-axis line.

      • On Zero: Whether the axis line is displayed at the 0 tick mark of the other axis. Valid only when the other axis is a value axis that includes the 0 tick mark.

      • Line Style

        • Color: For more information, see Color picker. Changes 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 of the x-axis. The options are Solid and Dashed.

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

    • Tick: Click the eye icon to show or hide the x-axis ticks.

      • Align with Label: Aligns tick marks with labels. This option is effective for category axes only when the Boundary Gap check box is selected.

      • Interval: Click + or -, or enter a value to set the interval between axis tick marks. This parameter applies only to category axes.

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

      • Length: Enter a value or click + or - to set the length of the axis ticks.

      • Line Style

        • Color: For more information, see Color picker. Changes the color of the tick marks.

        • Width: Enter a value or click + or - to set the width of the tick marks.

        • Type: The type of the axis line. The options are Solid and Dashed.

        • Opacity: Sets the opacity of the tick marks. Click + or -, or enter a value between 0 and 1.

    • Tick Label: Click the eye icon to display the x-axis tick labels.

      • Interval: The interval for displaying axis tick labels on a category axis. By default, the interval is automatically adjusted to prevent labels from overlapping. You can set this to 0 to force all labels to be displayed. If you set this to 1, every other label is displayed. If you set this to 2, every third label is displayed, and so on.

      • Inside: When selected, axis tick labels face inward. When cleared, they face outward.

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

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

      • Show Min Label: When selected, the minimum tick label is always displayed. By default, visibility is determined automatically and the label is hidden if it overlaps with other labels.

      • Show Max Label: When selected, the maximum tick label is always displayed. By default, visibility is determined automatically and the label is hidden if it overlaps with other labels.

      • Text Style

        • Color: For more information, see Color picker. Changes the color of the axis tick labels.

        • Font Style: The font style of the axis tick labels.

        • Font Weight: The font weight of the axis tick labels.

        • Font Family: The font family of the axis tick labels.

        • Font Size: The font size of the axis tick labels.

        • Align: Sets the horizontal alignment of the axis tick labels. The default is Auto. Options:

          • Auto

          • align left

          • Center

          • align right

        • Vertical Align: The options are Top, Center, and Bottom.

    • Split Line: Click the eye icon to show or hide the split lines.

      • Interval: Click + or -, or enter a value to set the display interval for the axis split lines. This option applies only to category axes. By default, an interval is automatically calculated to prevent the split lines from overlapping. You can set this to 0 to display all split lines. If you set this to 1, every other split line is displayed. If you set this to 2, every third split line is displayed, and so on.

      • Axis Line Style

        • Width: Specifies the width of the x-axis split lines. Click + or -, or enter a value.

        • Type: The type of split lines on the x-axis. You can select Solid or Dashed.

        • Opacity: Click + or -, or enter a value to adjust the opacity of the x-axis split lines. The valid value range is [0, 1].

    • Split Area: To show the split areas, click the eye icon on the right.

      • Interval: Click + or -, or enter a value to change the display interval of the axis split areas. This parameter applies only to category axes. By default, split areas are displayed at intervals to prevent them from overlapping. You can set this to 0 to force all split areas to be displayed. For example, a setting of 1 means that every other split area is displayed, and a setting of 2 means that every third split area is displayed, and so on.

      • Area Style

        • Opacity: Click + or -, or enter a value between 0 and 1 to set the opacity of the split areas.

    • Axis Pointer: Click the eye icon to show the axis pointer.

      • Type: The type of the pointer. The options are Line and Shadow.

      • Snap: If you select this check box, the axis pointer automatically snaps to points. This feature is useful for value and time axes because it helps find small data points.

      • Value: The initial position of the axis pointer. The default is 0.

      • Status: The current status of the axis pointer. If you select this check box, the pointer is displayed. If you clear this check box, the pointer is hidden.

      • Label: Click the eye icon on the right to show the axis pointer's label.

        • Precision: The number of decimal places for the numerical value in the text label. By default, this value is automatically determined based on the current axis value. You can also specify an integer, such as 2, to specify two decimal places.

        • Margin: The margin between the axis pointer label and the axis.

        • Text Style

          • Color: For more information, see Color picker. Changes 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 Family: 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: For more information, see Color picker. Changes the color of the axis label.

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

        • Type: The style of the axis line. The options are Solid and Dashed.

        • Opacity: Click + or - to adjust the opacity of the axis label, or enter a value from 0 to 1.

      • Handle: Click the eye icon on the right to reveal it.

        • Size: Click + or -, or enter a value to set the handle size.

        • Margin: Click + or -, or enter a value to adjust the distance between the center of the handle and the axis.

        • Color: The color of the handle.

        • Throttle: The interval in milliseconds at which the dashboard is updated when the handle is dragged. A larger value can improve performance but may degrade the user experience.

  • y-axis: The configurations are the same as for the x-axis.

  • Tooltip: Click the eye icon to view the tooltip.

    • Trigger: The type of trigger. The options are Mousemove, Click, and Mousemove and Click.

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

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

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

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

    • Text Style

      • Color: For more information, see Color picker. Changes 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 Family: The font family of the tooltip text.

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

  • Series: Click the image or image icon on the right to add or delete a conditional style. Click the image or image icon to change the order of the conditional styles. Click the image icon to duplicate the selected conditional style.

    • Name: The name of the series. This must be used with the s field in the data.

    • Legend Hover Link: If you select this check box, highlighting is enabled when you hover over a legend item.

    • Coordinate System: The coordinate system of the series. The default value is cartesian2d.

      • cartesian2d: Uses a 2D Cartesian coordinate system.

      • polar: Uses a polar coordinate system.

    • Stack: Stacks data series that have the same stack value on the same category axis.

    • Bar Width: The width of the bars, specified as a percentage of the category width. The default value is 15%. If no value is set, the width is adaptive.

    • Bar Min Height: The minimum height of the bars. This can be used to prevent a data item with a very small value from affecting interaction.

    • Bar Gap: The distance between bars of different series. This value is a percentage of the bar width. For example, a value of 30% means the gap is 30% of the bar width. To make the bars of two series overlap, set Bar Gap to -100%. This is useful when you use bars as a background.

    • Bar Category Gap: Specifies the gap between bars in the same series. The default value is 20% of the category gap, but you can also set a fixed value.

    • Label

      • Normal: To display the labels for normal items (bars that do not respond to mouse events), click the eye icon on the right.

        • Text Style

          • Color: For more information, see Color picker. Changes 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 Family: 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 to display labels for highlighted items (bars that respond to mouse events).

        • Text Style

          • Color: For more information, see Color picker. Changes the color of the highlighted item label text.

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

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

          • Font Family: The font family of the highlighted item label text.

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

    • Item Style

      • Normal

        • Color: For more information, see Color picker. Changes the background color of normal items.

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

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

        • Border Type: The style of the border. Options are Solid and Dashed. The default value is Solid.

        • Bar Border Radius: Click + or -, or enter a value to change the border radius of the bars.

        • Opacity: Click + or -, or enter a value between 0 and 1 to set the opacity.

      • Highlights

        • Color: For more information, see Color picker. Changes the background color of highlighted items.

        • Border Color: For more information, see Color picker. Changes the border color of highlighted items.

        • Border Width: Click + or -, or enter a value to adjust the border width of highlighted items.

        • Border Type: The style of the border. The options are Solid and Dashed. The default value is Solid.

        • Opacity: Click + or -, or enter a value between 0 and 1 to set the opacity of highlighted items.

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

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

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

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

Data source panelimage.png

Field

Description

x

The category label for each column on the x-axis.

y

The numeric value of each column.

s

(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 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

Enables widget interaction. When you click a data item, a callback value is returned. By default, the x, y, and s fields are returned. For more information about specific configurations, see Configure widget interactions.

When a legend item is clicked

Enables widget interaction. When you click a legend item, a callback value is returned. By default, the selected field is returned. For more information about specific configurations, see Configure widget interactions.

Blueprint interaction

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

  2. On the Layer Node tab, you can 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 API response is processed by the filter. The processed JSON data is returned. For a data example, see the Data Response section on the Data Source tab of the configuration panel.

      When a data item is clicked

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

      When a legend item is clicked

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

    • Actions

      Action

      Description

      Request Data API

      Re-requests server-side data. Upstream data from data processing nodes or layer nodes is used as parameters. For example, if the API data source for the stepped waterfall chart is set to https://api.test and the data passed to the Request Data API action is { id: '1'}, the final requested API is https://api.test?id=1.

      Import Data API

      Imports data in the widget's drawing format to redraw the widget without re-requesting server-side data. For a data example, see the Data Response section on the Data Source tab of the configuration panel in the canvas editor.

      Show Tooltip

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

      { 
    "dataIndex": 1,  
    "name": "",  
    "x": 1,  
    "y": 1
}

      Hide Tooltip

      Hides the tooltip. No parameters are required.

      Legend Control

      The data passed to this action is an object. The parameters include type (legend action type) and name (legend name). See the following data example:

      {
  "type": "",//The legend action type. Options include the following: legendSelect, legendUnSelect, legendToggleSelect
  "name": ""
}

      Move

      Moves the widget to a specified position. See the following data example.

       {      
      // The move 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 duration.
        "animationDuration": 1000,
        // The animation curve. Options: linear|easeInOutQuad|easeInOutExpo.
        "animationEasing": "linear"
      }
    }

      Toggle Display

      Shows or hides the widget. No parameters are required.

      Show

      Shows the widget. See the following data example.

      {
  "animationType": "",//The animation method. Option: fade. If left empty, there is no animation.
  "animationDuration": 1000,//The animation duration in ms.
  "animationEasing": ""//The animation curve.
}

      Hide

      Hides the widget. See the following data example.

      {
  "animationType": "",//The animation method. Option: fade. If left empty, there is no animation.
  "animationDuration": 1000,//The animation duration in ms.
  "animationEasing": ""//The animation curve.
}

      Update Widget Configuration

      Dynamically updates the widget style configuration. First click Copy Configuration to Clipboard in the widget's Style panel to get the configuration data, then modify the field values in the data processing node on the Blueprint editor page.
Previous：ECharts Stacked Bar ChartNext：ECharts annotated bubble column chart