DocsICP FilingConsole
官方文档
首页

Echarts stepped waterfall chart

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

Configure the styles and options for the Echarts stepped waterfall chart in DataV.

Chart style

The Echarts stepped waterfall chart is a bar chart that shows how sequential values increase or decrease. It supports custom x- and y-axes and is ideal for visualizing how positive and negative values contribute to a total.

image

Configuration panelimage

  • 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 Proportional resizing 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 Rotation control icon icon.
    • Click the Horizontal flip icon to horizontally flip a widget.
    • Click the Vertical flip 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 settings.图例

    • Left: The distance between the legend and the left border of the component. The default value is auto. Supported inputs include:

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

    • Top: The distance between the legend and the top border of the component. The default value is auto. Supported inputs include:

      • A specific pixel value, such as 20.

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

      • top, middle, or bottom. The component automatically aligns to the corresponding position.

    • Right: The distance between the legend and the right border of the component. The default value is auto. Supported inputs include:

      • 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 value is auto. Supported inputs include:

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

    • Width: Manually enter a value to adjust the width of the legend. The default value is auto, which means the width adjusts automatically.

    • Height: Manually enter a value to adjust the height of the legend. The default value is auto, which means the height adjusts automatically.

    • Orientation: Select the layout orientation of the legend from the drop-down list.

      • Horizontal: Arranges legend items horizontally.

      • Vertical: Arranges legend items vertically.

    • Align: Select the alignment of the legend marker and text from the drop-down list.

      • Automatic: The default is Automatic, which is determined based on the position and orientation of the component.

      • Left align: When the graphic is to the left of the text, the alignment is Left align.

      • Center Align: When the legend graphic and text overlap, the alignment is Center Align.

      • Right align: When the image is to the right of the text, the alignment is Right align.

    • Padding: Click the + or - icon, or manually enter a value to adjust the legend padding. The unit is px. The default padding for each side is 5.

    • Element Spacing: Click + or -, or enter a value to adjust the spacing between items in the legend. This setting specifies the horizontal spacing for horizontal layouts and the vertical spacing for vertical layouts.

    • Graphic width: Click + or -, or enter a value to adjust the width of the legend marker.

    • Graphic height: Click the + or - icon, or manually enter a value to adjust the height of the legend markers.

    • Select mode: Click the eye icon on the right to show the select mode options.

    • Inactive Color: Refer to Color Picker instructions to set the color for an inactive legend item. The effect is visible only when you click a legend item on the preview or published page.

    • Text style

      • Color: Sets the color of the legend text. See Color picker for more information.

      • Font style: Sets the font style of the legend text.

      • Font weight: Sets the font weight of the legend text.

      • Font family: Sets the font family of the legend text.

      • Font size: Click + or -, or manually enter a value to change the font size of the legend.

    • Background color: Sets the background color of the legend. See Color picker for more information.

    • Border color: Sets the border color of the legend. See Color picker for more information.

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

  • Grid: 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 component. The default value is 3%. Supported inputs include:

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

    • Top: The distance between the grid and the top border of the component. The default value is 60. Supported inputs include:

      • A specific pixel value, such as 20.

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

      • top, middle, or bottom. The component automatically aligns to the corresponding position.

    • Right: The distance between the grid and the right border of the component. The default value is 4%. Supported inputs include:

      • 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 grid and the bottom border of the component. The default value is 3%. Supported inputs include:

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

    • Width: The width of the grid. The default value is auto, which adjusts the width automatically.

    • Height: The height of the grid. The default value is auto, which adjusts the height automatically.

    • Adaptive layout: If selected, the chart uses an adaptive layout. If cleared, the chart is rendered based on your style configurations.

    • Background color: Sets the background color of the grid. The default color is transparent. See Color picker for more information.

    • Border color: Sets the border color of the grid. The default color is transparent. See Color picker for more information.

    • Border Thickness: Click + or -, or manually enter a value to adjust the grid border thickness.

  • x-axis: Click the eye icon on the right to show the x-axis style settings. x轴

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

    • Name: Specifies a custom name for the x-axis.

    • Name location: The position of the x-axis name. Options include Start, Center, or End. The default value is End.

    • Name text style

      • Color: Sets the color of the x-axis name text. See Color picker for more information.

      • Font style: Sets the font style of the x-axis name.

      • Font weight: Sets the font weight of the x-axis name.

      • Font family: Sets the font family of the x-axis name.

      • Font size: Click + or -, or manually enter a value to change the font size of the x-axis name.

    • Label offset: Click + or -, or manually enter a value to adjust the distance between the axis name and the axis line.

    • Name Rotation: Click + or -, or manually enter a value to modify the rotation angle of the axis name.

    • Inverse: If selected, the axis is inverted. If cleared, the axis is displayed in the default direction.

    • Boundary gap: If selected, padding is added at both ends of the axis. If cleared, no padding is added.

    • Min: The minimum value of the axis scale. The default is Data Min, which uses the minimum data value as the minimum scale value. If not set, the minimum value is automatically calculated to ensure even distribution of the axis scale.

    • Max: The maximum value of the axis scale. The default is Data Max, which uses the maximum data value as the maximum scale value. If not set, the maximum value is automatically calculated to ensure even distribution of the axis scale.

    • Number of segments: Click the + or - icon, or enter a value to set the number of segments for the axis. If you do not specify a value, the system automatically calculates one to ensure that the axis ticks are evenly distributed. Note that the specified number of segments is an estimate. The actual number of segments that are displayed is adjusted based on the readability of the resulting axis ticks. This setting has no effect on a category axis.

    • Minimum Interval Size: Click the + or - sign, or manually enter a value to set the minimum interval of the axis. For example, you can set the value to 1 to ensure that the axis ticks are displayed as integers. This is valid only for the value axis or time axis.

    • Tick Interval: Click the + or - sign, or manually enter a value, to modify the display interval of axis ticks. This setting is effective for the category axis.

    • Log base: The base of the logarithm. This setting is applicable only to a log axis.

    • Axis line: 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 is rendered at the 0-scale mark of the other axis. This is applicable only when the other axis is a value axis and includes a 0-scale mark.

      • Line style

        • Color: Sets the color of the x-axis line. See Color picker for more information.

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

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

        • Transparency: Click + or -, or manually enter a value to change the transparency of the x-axis line. The value range is [0, 1].

    • Tick: Click the eye icon on the right to show the x-axis tick settings.

      • Align with label: If selected, the ticks are aligned with the labels. This is applicable to a category axis when Boundary gap is selected.

      • Split Interval: Click + or -, or manually enter a value to modify the interval between axis ticks. This parameter is valid only for a category axis.

      • Inside: If selected, the ticks face inward. If cleared, the ticks face outward.

      • Length: Click + or -, or manually enter a value to change the length of the axis ticks.

      • Line style

        • Color: Sets the color of the ticks. See Color picker for more information.

        • Width: Click + or -, or manually enter a value to change the width of the tick line.

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

        • Transparency: Click + or -, or manually enter a value to change the transparency of the tick lines. The valid range is [0,1].

    • Tick label: Click the eye icon on the right to show the x-axis tick label settings.

      • Label Interval: The display interval for axis tick labels on a category axis. By default, labels are displayed at an interval to prevent them from overlapping. You can set this parameter to 0 to force all labels to be displayed. If you set this parameter to 1, every other label is displayed. If the value is 2, every third label is displayed, and so on.

      • Inside: If selected, the tick labels face inward. If cleared, the tick labels face outward.

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

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

      • Show min label: If selected, the minimum tick label is always displayed. By default, this is determined automatically. If labels overlap, the minimum tick label may be hidden.

      • Show max label: If selected, the maximum tick label is always displayed. By default, this is determined automatically. If labels overlap, the maximum tick label may be hidden.

      • Text style

        • Color: Sets the color of the tick labels. See Color picker for more information.

        • Font style: Sets the font style of the tick labels.

        • Font weight: Sets the font weight of the tick labels.

        • Font family: Sets the font family of the tick labels.

        • Font size: Sets the font size of the tick labels.

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

          • Auto

          • Left

          • Center

          • Right

        • Vertical align: Options include Top, Middle, and Bottom.

    • Split line: Click the eye icon on the right to show the split line settings.

      • Split Interval: Click + or -, or manually enter a value to change the display interval of the split lines. This parameter applies only to the category axis. By default, split lines are displayed at an interval to prevent them from overlapping. You can set this parameter to 0 to force all split lines to be displayed. A value of 1 means that every other split line is displayed, and a value of 2 means that one of every three split lines is displayed, and so on.

      • Line style

        • Width: Click + or -, or manually enter a value to change the width of the x-axis split line.

        • Type: The line type of the x-axis split lines. Options include Solid and Dashed.

        • Transparency: Click + or -, or manually enter a value to modify the transparency of the x-axis split line. The range is [0, 1].

    • Split area: Click the eye icon on the right to show the split area settings.

      • Split Interval: Click + or -, or manually enter a value to change the display interval of split areas. This setting applies to the category axis. By default, split areas are displayed at an interval that prevents them from overlapping. Set the value to 0 to force all split areas to be displayed. If you set the value to 1, one split area is displayed for every one that is skipped. If the value is 2, one split area is displayed for every two that are skipped, and so on.

      • Area style

        • Transparency: Click + or -, or manually enter a value to modify the transparency of the split area. The valid range is [0, 1].

    • Axis pointer: Click the eye icon on the right to show the axis pointer settings.

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

      • Snap: If selected, the axis pointer automatically snaps to data points. This feature is useful on value and time axes for finding specific data points.

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

      • Status: Shows or hides the axis pointer.

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

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

        • Margin: The distance between the axis pointer label and the axis. If left empty, there is no margin.

        • Text style

          • Color: Sets the color of the axis pointer label text. See Color picker for more information.

          • Font style: Sets the font style of the axis pointer label text.

          • Font weight: Sets the font weight of the axis pointer label text.

          • Font family: Sets the font family of the axis pointer label text.

          • Font size: Sets the font size of the axis pointer label text.

        • Background color: Sets the background color of the axis pointer label.

        • Border color: Sets the border color of the axis pointer label.

        • Border width: Sets the border width of the axis pointer label.

      • Line style

        • Color: Sets the color of the axis pointer. See Color picker for more information.

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

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

        • Transparency: Click + or -, or manually enter a value to change the transparency of the axis labels. The valid range is [0, 1].

      • Handle: Click the eye icon on the right to show the drag handle settings.

        • Size: Click + or -, or manually enter a value to change the size of the drag handle.

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

        • Color: The color of the drag handle.

        • Throttle: The interval, in milliseconds, for triggering screen updates while dragging the handle. A larger value improves performance but may make the handle feel less responsive.

  • y-axis: For configuration details, see the x-axis settings.

  • Tooltip: Click the eye icon on the right to show the tooltip settings.提示框

    • Trigger: Specifies the trigger type. Options include Mousemove, Click, and Mousemove and Click.

    • Background color: Sets the background color of the tooltip. See Color picker for more information.

    • Border color: Sets the border color of the tooltip. See Color picker for more information.

    • Border thickness: Click + or -, or manually enter a value to adjust the border thickness of the background box.

    • Padding: Sets the padding for the background box in pixels (px). You can click the + or - button or manually enter a value. The default value is 5 for each side.

    • Text style

      • Color: Sets the color of the tooltip text. See Color picker for more information.

      • Font style: Sets the font style of the tooltip text.

      • Font weight: Sets the font weight of the tooltip text.

      • Font family: Sets the font family of the tooltip text.

      • Font size: Sets the font size of the tooltip text.

  • Series: Click the 加号图标 or 垃圾桶图标 icon to add or delete a conditional style. Click the 横排列图标 or 竖排列图标 icon to arrange multiple conditional styles. Click the 复制图标 icon to copy the currently selected conditional style and create a new one with the same configuration.系列

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

    • Legend hover link: If selected, hovering over a legend item highlights the corresponding series.

    • Coordinate system: The coordinate system used by the series. The default is cartesian2d.

      • cartesian2d: Uses a 2D Cartesian coordinate system.

      • polar: Uses a polar coordinate system.

    • Stack: Specifies a stack name for data stacking. Series on the same category axis with the same stack value are stacked.

    • Bar width: The width of the bars. If not set, the width is adaptive. You can set this as a percentage of the category width. The default value is 15%.

    • Bar min height: The minimum height of the bars. This can be used to prevent interaction issues when a data item's value is too small.

    • Bar gap: The gap between bars of different series, expressed as a percentage of the bar width (for example, 30% means 30% of the bar width). To make bars of two series overlap, set the Bar gap to -100%. This is useful for creating background bars.

    • Bar category gap: The gap between categories. The default is 20% of the category gap, but a fixed value can also be set.

    • Label

      • Normal item: Click the Eye icon on the right to display the label text for normal items (bars that do not respond to mouse events).

        • Text style

          • Color: Sets the label text color for normal items. See Color picker for more information.

          • Font style: Sets the label font style for normal items.

          • Font weight: Sets the label font weight for normal items.

          • Font family: Sets the label font family for normal items.

          • Font size: Sets the label font size for normal items.

      • Emphasis item: Click the eye icon on the right to display the label text for the emphasis item (the bar that responds to mouse events).

        • Text style

          • Color: Sets the label text color for emphasis items. See Color picker for more information.

          • Font style: Sets the label font style for emphasis items.

          • Font weight: Sets the label font weight for emphasis items.

          • Font family: Sets the label font family for emphasis items.

          • Font size: Sets the label font size for emphasis items.

    • Item style

      • Normal

        • Color: Sets the background color for normal items. See Color picker for more information.

        • Border color: Sets the border color for normal items. See Color picker for more information.

        • Border thickness: Click + or -, or manually enter a value to change the border thickness of normal items.

        • Border type: The stroke type for the border. Options include Solid and Dashed. The default value is Solid.

        • Bar Chart Rounded Corners: Click + or -, or manually enter a value to modify the rounded corners of the normal item bar chart.

        • Transparency: Click + or -, or manually enter a value to change the transparency of the normal item element. The valid range is [0,1].

      • Emphasis

        • Color: Sets the background color for emphasis items. See Color picker for more information.

        • Border color: Sets the border color for emphasis items. See Color picker for more information.

        • Border thickness: Click + or -, or manually enter a value to change the border thickness of the emphasis item.

        • Border type: The stroke type for the border. Options include Solid and Dashed. The default value is Solid.

        • Transparency: Click + or -, or manually enter a value to modify the transparency of the normal item. The value must be in the range of [0, 1].

  • Animation: If selected, enables animation effects.

  • Animation Threshold: Click + or -, or manually enter a value to change the animation threshold in milliseconds. When the number of graphics displayed by a single series exceeds the threshold you set, the system disables the animation effect to prevent the component from crashing.

  • Animation duration: Click + or -, or manually enter a value to change the duration of the initial animation (in milliseconds).

  • Easing effect: Select the easing effect for data update animations from the drop-down list. The default value is cubicOut.

Data panel

image

Fields

Field

Description

x

The category for the x-axis.

y

The value for each data point in the chart.

s

(Optional) The series value is used with the Series option in the Style panel.

Interaction panel

image

Interaction

Interaction

Description

When data item is clicked

Select Enable to enable the interactive features of the component. The stepped waterfall chart component has interaction configurations. When you click a data item, the component emits a callback value. By default, this value contains the x and y fields from the data. For more information, see How to Configure the Callback ID for a Digital Flipper Component.

When legend is clicked

Select Enable to turn on the component's interaction feature. The Stepped Waterfall Chart component has interaction configurations. When you click a legend, the component emits a callback value. By default, it emits the value of the selected field from the data. For more information, see How to configure the callback ID for a digital flipper component.

Blueprint Editor interaction configuration

  1. In the canvas editor, right-click the component and select Export to Blueprint Editor.

  2. Click the 蓝图图标 icon in the upper-left corner of the page.

  3. On the Blueprint Editor configuration page, click the stepped waterfall chart component in the Imported Nodes panel. The configuration parameters for the component are displayed in the canvas.蓝图

    • Events

      Event

      Description

      On data request succeeded

      Triggered when a data request succeeds, passing the data processed by a filter as a JSON object. For a data example, see the data response section on the Data tab of the component's configuration panel in the canvas editor.

      On data request failed

      Triggered when a data request fails. For a data example, see the data response section on the Data tab of the component's configuration panel in the canvas editor.

      When data item is clicked

      Triggered when a bar is clicked, passing the corresponding data item.

      When legend is clicked

      Triggered when a legend item is clicked, passing the corresponding data item.

    • Actions

      Actions

      Description

      Request data

      Re-requests data from the server. Data passed to this action is used as parameters for the request. For example, if the component's API data source is https://api.test and the data { id: '1'} is passed to the Request data action, the final API request will be https://api.test?id=1.

      Import data

      Imports data formatted for the component and redraws it, without re-requesting data from the server. For a data example, see the data response section on the Data tab of the component's configuration panel in the canvas editor.

      Show tooltip

      The action receives an object with the following parameters: dataindex (data index), name (data name), x (x-coordinate position), and y (y-coordinate position). Example:

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

      Hide tooltip

      Hides the tooltip. No parameters are required.

      Control legend

      The action receives an object with the following parameters: type (legend action type) and name (legend name). Example:

      {  
    "type": "legendToggleSelect",  
    "name": ""
}

      Update component configuration

      Dynamically updates the component's configuration. It accepts a configuration object as input. To get the configuration structure, click Copy Configuration to Clipboard in the configuration panel.

      Show

      Shows the component. Example:

      return{
  "animationType": "",
  "animationDuration": 1000,
  "animationEasing": "linear"
}

      Hide

      Hides the component. Example:

      return{
  "animationType": "",
  "animationDuration": 1000,
  "animationEasing": "linear"
}

      Toggle visibility

      Toggles the visibility of the component. Example:

      return {
  "animationIn": {
    "animationType": "",
    "animationDuration": 1000,
    "animationEasing": "linear"
  },
  "animationOut": {
    "animationType": "",
    "animationDuration": 1000,
    "animationEasing": "linear"
  }
}

      Move

      Moves the component to a specified position. Example:

      return{      
      // Movement type. "to" for absolute positioning (default), "by" for relative positioning.
        "positionType": "to",
      // Target position: x and y coordinates.
      "attr": {
        "x": 0,
        "y": 0
      },
      // Animation settings.
      "animation": {
        "enable": false,
        // Animation duration.
        "animationDuration": 1000,
        // Animation easing curve. Options: linear|easeInOutQuad|easeInOutExpo.
        "animationEasing": "linear"
      }
    }
Previous：Echarts Stacked HistogramNext：ECharts Annotated Bubble Column Chart