DocsICP FilingConsole
Documentation
Home Page DataV DataV User Guide Widget Guide Charts Line Chart Echarts waterfall chart

Echarts waterfall chart

Updated at:
Copy as MD
Product
My Favorites

This document describes the style settings and configuration panel options for the Echarts waterfall chart.

Chart style

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.

  • Rendering engine: Sets the rendering engine for the waterfall chart. Options include canvas and svg.

  • Legend: Click the eye icon on the right to show the legend options.图例

    • Horizontal position: Specifies the horizontal alignment of the legend.

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

      • Left align: The alignment is Left align when the graphic is to the left of the text.

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

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

    • Vertical position: Specifies the vertical alignment of the legend.

      • Automatic: The default is Automatic, determined by the position and orientation of the component.

      • Top Align: When the graphic is at the top of the window, the alignment is Top Align.

      • Center align: When the graphic is in the center of the window, it is Center align.

      • Bottom Align: When the graphic is at the bottom of the window, the alignment is Bottom Align.

    • Orientation: Specifies the layout orientation of the legend items.

      • horizontal: Arranges legend items horizontally.

      • vertical: Arranges legend items vertically.

    • Padding: Specifies the padding around the legend in pixels (px). You can click the + or - icons or enter a value. The default padding is 5 for all sides.

    • Item gap: Specifies the distance between legend items. This setting controls the horizontal gap in a horizontal layout and the vertical gap in a vertical layout. You can click the + or - icons or enter a value.

    • Text style

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

      • Font Style: Specifies the font style of the legend text.

      • Font Weight: Specifies the font weight of the legend text.

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

      • Font Size: Specifies the font size of the legend text. You can click the + or - icons or enter a value.

  • x-axis: Click the eye icon on the right to display the x-axis options.x轴

    • Position: Specifies the position of the x-axis in the chart area.

      • bottom: Places the x-axis at the bottom of the chart.

      • top: Places the x-axis at the top of the chart.

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

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

    • Name style

      • Color: Specifies the color of the x-axis name text. For more information, see Color picker configurations.

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

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

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

      • Font Size: Specifies the font size of the x-axis name. You can click the + or - icons or enter a value.

    • Name gap: Specifies the distance between the axis name and the axis line. You can click the + or - icons or enter a value.

    • Name rotate: Specifies the rotation angle of the axis name. You can click the + or - icons or enter a value.

    • Inverse: Renders the axis in the reverse direction.

    • Boundary gap: Adds padding to both ends of the axis.

    • Static: If selected, the axis is static and non-interactive.

    • Axis line: Click the eye icon on the right to show the x-axis line.

      • On zero: Renders the axis line on the zero-scale tick of the other axis. This option applies only when the other axis is a value axis that contains a zero-scale tick.

      • Line style

        • Color: Specifies the color of the x-axis line. For more information, see Color picker configurations.

        • Width: Specifies the width of the x-axis line. You can click the + or - icons or enter a value.

        • Type: Specifies the axis line type. Options are Solid, Dashed, and Dotted.

        • Opacity: Specifies the opacity of the x-axis line. The value can range from 0 to 1. You can click the + or - icons or enter a value.

    • Axis tick: Click the eye icon on the right to show the x-axis ticks.

      • Align with label: If selected, the axis ticks are aligned with the labels. This option is only effective for a category axis when boundary gap is enabled.

      • Inside: Orients the axis ticks to face inward.

      • Length: Specifies the length of the axis ticks. You can click the + or - icons or enter a value.

      • Line style

        • Color: Specifies the color of the axis ticks. For more information, see Color picker configurations.

        • Width: Specifies the width of the axis ticks. You can click the + or - icons or enter a value.

        • Type: Specifies the tick line type. Options are Solid, Dashed, and Dotted.

        • Opacity: Specifies the opacity of the axis ticks. The value can range from 0 to 1. You can click the + or - icons or enter a value.

    • Axis label: Click the eye icon on the right to show the x-axis labels.

      • Inside: Displays axis labels inside the axis line.

      • Rotate: Specifies the rotation angle of the axis labels, from -90 to 90 degrees. Rotating labels can prevent them from overlapping on a category axis.

      • Margin: Specifies the distance between the axis labels and the axis line.

      • Show min label: Forces the minimum scale label to always be visible. By default, this label may be hidden to prevent overlapping.

      • Show max label: Forces the maximum scale label to always be visible. By default, this label may be hidden to prevent overlapping.

      • Color: Specifies the color of the axis labels. For more information, see Color picker configurations.

      • Font Style: Specifies the font style of the axis labels.

      • Font Weight: Specifies the font weight of the axis labels.

      • Font: Specifies the font family of the axis labels.

      • Font Size: Specifies the font size of the axis labels.

    • Split line: Click the eye icon on the right to show the grid's split lines.

      • Line style

        • Color: Specifies the color of the x-axis split lines. For more information, see Color picker configurations.

        • Width: Specifies the width of the x-axis split lines. You can click the + or - icons or enter a value.

        • Type: Specifies the type of the x-axis split lines. Options are Solid, Dashed, and Dotted.

        • Opacity: Specifies the opacity of the x-axis split lines. The value can range from 0 to 1. You can click the + or - icons or enter a value.

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

  • Data zoom: Click the eye icon on the right to show the data zoom control.数据缩放

    • Background color: Specifies the background color of the data zoom control. For more information, see Color picker configurations.

    • Data shadow

      • Line style

        • Color: Specifies the color of the line. For more information, see Color picker configurations.

        • Width: Specifies the width of the line. You can click the + or - icons or enter a value.

        • Type: Specifies the line type. Options are Solid, Dashed, and Dotted.

        • Opacity: Specifies the opacity of the line. The value can range from 0 to 1. You can click the + or - icons or enter a value.

      • Area Style

        • Color: Specifies the color of the area. For more information, see Color picker configurations.

        • Opacity: Specifies the opacity of the area. The value can range from 0 to 1. You can click the + or - icons or enter a value.

      • Filler color: Specifies the color of the selected area. For more information, see Color picker configurations.

      • Border color: Specifies the color of the border. For more information, see Color picker configurations.

      • Handle style

        • Color: Specifies the color of the handles. For more information, see Color picker configurations.

        • Opacity: Specifies the opacity of the handles. The value can range from 0 to 1. You can click the + or - icons or enter a value.

      • Real-time: Click the Eye icon on the right to show or hide the real-time effect.

      • Text Style

        • Color: Specifies the color of the text. For more information, see Color picker configurations.

        • Font Style: Specifies the font style of the text.

        • Font Weight: Specifies the font weight of the text.

        • Font: Specifies the font family of the text.

        • Font Size: Specifies the font size of the text. You can click the + or - icons or enter a value.

      • Filter mode: Specifies the data filtering mode. Options include filter, weakFilter, empty, and none.

      • Start percentage: Specifies the starting percentage of the data window.

      • End percentage: Specifies the ending percentage of the data window.

      • Orientation: Specifies the layout orientation of the data zoom control.

        • auto: The orientation is determined automatically.

        • horizontal: Arranges the data zoom control horizontally.

        • vertical: Arranges the data zoom control vertically.

  • Tooltip: Click the eye icon on the right to show the tooltip.Tooltip

    • Trigger type: Specifies the trigger type. This parameter is optional. The default value is Axis.

      • Data item: The tooltip is triggered by a data item. This is mainly used for charts that do not have a category axis, such as scatter charts and pie charts.

      • Axis: The tooltip is triggered by the axis. This is mainly used for charts that have a category axis, such as bar charts and line charts.

      • None: The tooltip is not triggered.

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

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

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

      • Pointer line style

        • Color: The color of the pointer line. For more information, see Color picker.

        • Width: The width of the pointer line. Click + or -, or enter a value to set the width.

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

        • Opacity: The opacity of the pointer line. Click + or -, or enter a value to set the opacity. The value must be between 0 and 1.

      • Pointer shadow style

        • Color: The color of the pointer shadow. For more information, see Color picker.

        • Opacity: The opacity of the pointer shadow. Click + or -, or enter a value to set the opacity. The value must be between 0 and 1.

      • Pointer cross style

        • Color: The color of the pointer cross. For more information, see Color picker.

        • Width: The width of the pointer cross line. Click + or -, or enter a value to set the width.

        • Type: The type of the pointer cross. Options include Solid, Dashed, and Dotted.

        • Opacity: The opacity of the pointer cross. Click + or -, or enter a value to set the opacity. The value must be between 0 and 1.

      • Background color: The background color of the tooltip text label.

      • Text style

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

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

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

        • Font: The font family of the tooltip label text.

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

  • Series: Click the plus icon icon or the trash can icon icon to add or remove a conditional style. Click the horizontal arrangement icon icon or the vertical arrangement icon icon to configure the arrangement for multiple conditional styles. Click the copy icon icon to copy the selected conditional style and create a new one with the same configuration.Series

    • Name: Enter a custom name for the series. This name must match the value of the s field in your data.

    • Marker shape: Select a custom marker shape. The default value is Circle. Marker types include None, Circle, Rectangle, Rounded rectangle, Triangle, Diamond, Pin, and Arrow. For more information, see the official ECharts website.

    • Marker size: Set the marker size in pixels (px). Click + or -, or enter a value directly.

    • Show icon: Click the Eye icon to show the icon.

    • Hover animation: Select this option to enable animation effects when you hover over the chart.

    • Legend hover highlight: Select this option to highlight the corresponding series when you hover over the legend.

    • Step line: Set the step style for the waterfall chart. Options include Off, Turn at current point, Turn at midpoint, and Turn at next point.

    • Label: Click the Eye icon to show the label settings.

      • Position: Set the position of the label relative to the waterfall chart. Options include top, left, and inside.

      • Offset: Set the distance of the label from the top border of the chart.

      • Rotation: Set the rotation angle of the label. Rotate labels on the category axis to prevent them from overlapping. The angle can range from -90 to 90 degrees.

      • Color: Set the color of the label text. For more information, see Color picker instructions.

      • Font style: Set the font style of the label text.

      • Font weight: Set the font weight of the label text.

      • Font family: Set the font family for the label text.

      • Font size: Set the font size of the label text.

    • Item style

      • Color: Set the color for the item style. For more information, see Color picker instructions.

      • Opacity: Set the opacity. Click + or -, or enter a value from 0 to 1.

    • Line style

      • Color: Set the color of the line. For more information, see Color picker instructions.

      • Width: Set the line width. Click + or -, or enter a value.

      • Type: Set the line type. Options include Solid, Dashed, and Dotted.

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

    • Area style

      • Color: Set the color of the area style. For more information, see Color picker instructions.

      • Opacity: Set the opacity of the area. Click + or -, or enter a value from 0 to 1.

    • Smooth line: Set the smoothness of the line. Click + or -, or enter a value from 0 to 1.

    • Mark line

      • Line style

        • Color: Set the color of the line. For more information, see Color picker instructions.

        • Width: Set the line width. Click + or -, or enter a value.

        • Type: Set the line type. Options include Solid, Dashed, and Dotted.

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

        • Curvature: Set the curvature of the line. Click + or -, or enter a value.

    • Animation: Configure the series animation. Click the Eye icon to show or hide the animation settings.

  • Animation: Select this option to enable animation effects.

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

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

Data panel

image

Fields

Field

Description

x

Specifies the category value for the x-axis.

y

Specifies the value of each data point in the waterfall chart.

s

(Optional) The series value. This field is used with the series configuration in the style panel.

Parameter

Description

Controlled mode

If enabled, the component does not request data on initial load. Data is requested only when triggered by a callback ID or an action in the Blueprint Editor. When disabled, data can be requested via automatic updates. This option is disabled by default.

Automatic update request

Enables dynamic polling at a set frequency. If this option is disabled, data updates must be triggered manually, for example by refreshing the page or using an event from a callback ID or the Blueprint Editor.

Data source

Click Configure Data Source to open the Set Data Source panel. In this panel, you can change the data source type and query, preview the response, and view the final data result. For more information, see Configure component data.

Data filter

A data filter transforms data structures, filters data, or performs simple calculations. Click Add Filter to configure a data filter script in the Set Data Source panel. For more information, see Use a data filter.

Data response

Displays the response from the data request. When the data source changes, you can click the 刷新图标 icon on the right to view the real-time data response.

Interaction panel

image

Interactions

Interaction

Description

When data item is clicked

Select Enable to enable the component interaction feature. The Waterfall Chart component has interaction configurations. When you click a data item, the component emits a callback value. By default, it emits the x and y fields from the data. For more information, see Component Callback ID Configuration.

When legend is clicked

Select Enable to enable the component interaction feature. The Waterfall Chart component has interaction configurations. When you click a legend, the component emits a callback value. By default, the component emits the selected field from the data. For more information, see Component Callback ID Configuration.

When data zoom is changed

Select Enable to enable component interactions. The Waterfall chart component has interaction configurations that return a callback value when the data zoom changes. By default, this value contains the start and end fields from the data. For more information, see Component Callback ID Configuration.

Blueprint editor interactions

  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 page, click the waterfall chart component in the Imported Nodes pane. The configuration parameters for the component appear on the canvas, as shown in the following figure.蓝图

    • Events

      Event

      Description

      When data request is completed

      This event is triggered after a successful data API request and after the response is processed by the data filter. It passes the processed data. For a data sample, see the data response section on the data tab of the configuration panel.

      When data request fails

      This event is triggered if a data API request fails (for example, due to a network issue or API error). It passes the error information. For a data sample, see the data response section on the data tab of the configuration panel.

      When data item is clicked

      This event is triggered when a bar in the waterfall chart is clicked. It passes the data item corresponding to that bar.

      When legend is clicked

      This event is triggered when a legend item is clicked. It passes the data corresponding to that legend item.

      When data zoom is changed

      This event is triggered when the data zoom range changes. It passes the data corresponding to the change.

    • Actions

      Actions

      Description

      Request Data

      Triggers a new data request to the server. Data from upstream nodes is passed as parameters. For example, if the waterfall chart's API data source is set to https://api.test and the data passed to the Request Data action is { id: '1'}, the final request URL will be https://api.test?id=1.

      Import Data

      Imports and redraws the chart with a new data set, without triggering a server request. For a data sample, see the data response section on the data tab of the configuration panel.

      Highlight

      Accepts an object with parameters including seriesName, seriesIndex, dataIndex, and name. Example:

      {  
    "seriesName": "",  
    "seriesIndex": 1,  
    "dataIndex": 1,  
    "name": ""
}

      Downplay

      Accepts an object with parameters including seriesName, seriesIndex, dataIndex, and name. Example:

      {  
    "seriesName": "",  
    "seriesIndex": 1,  
    "dataIndex": 1,  
    "name": ""
}

      Show Tooltip

      Accepts an object with parameters including dataIndex, name, x (x-coordinate), and y (y-coordinate). Example:

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

      Hide Tooltip

      This action takes no parameters.

      Legend Control

      Accepts an object with parameters including type (legend action type) and name (legend name). Example:

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

      Update Component Options

      Dynamically updates the component's style configuration. First, in the component's configuration panel, click Copy Options to Clipboard to get the component configuration data. Then, modify the style field values in a data processing node within the Blueprint Editor.

      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{      
      // Position type. 'to' for absolute, 'by' for relative. Default: 'to'.
        "positionType": "to",
      // Target position as x and y coordinates.
      "attr": {
        "x": 0,
        "y": 0
      },
      // Animation settings.
      "animation": {
        "enable": false,
        // Animation duration.
        "animationDuration": 1000,
        // Animation easing function. Options: linear|easeInOutQuad|easeInOutExpo.
        "animationEasing": "linear"
      }
    }
Previous：Echarts continuous line chartNext：Echarts stacked line chart