DocsICP FilingConsole
Documentation
Home Page DataV DataV-Board 7.0 User Guide visualization-console Component Guide Component management widgets-on-pcs Echarts-widgets Echarts waterfall chart

Echarts waterfall chart

Updated at:
Copy as MD
Product
My Favorites

You can configure the style, data source, and interactions of an ECharts waterfall chart to visualize cumulative data changes across categories.

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.

  • Rendering Engine: Specifies the rendering engine for the waterfall chart. You can select canvas or svg.

  • Legend: Click the eye icon on the right to show the legend styles.

    • Horizontal position: Select the horizontal alignment for the legend markers and text from the drop-down list.

      • Auto: The default value is Auto. The position is automatically determined by the location and orientation of the widget.

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

      • Center Align: When the legend symbol and text overlap, their alignment is set to Align Center.

      • Right Align: A graphic is Right Align when it is to the right of the text.

    • Vertical position: Select the vertical alignment for the legend markers and text from the drop-down list.

      • Auto: The default value is Auto. The position is determined by the widget's position and orientation.

      • Top Align: When the graph is at the top of the window, it is set to Top Align.

      • Center Align: If the graph is in the center of the window, the alignment is set to Center Align.

      • Bottom Align: When a graph is aligned to the bottom of the window, its alignment type is Bottom Align.

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

      • Horizontal: The legend items are arranged horizontally.

      • Vertical: The legend items are arranged vertically.

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

    • Item gap: Click + or -, or enter a value to adjust the distance between legend items. This setting specifies the horizontal gap for a horizontal layout and the vertical gap for a vertical layout.

    • Text style

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

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

  • X-axis: Click the Eye icon on the right to configure the style of the x-axis.

    • Position: Sets the position of the x-axis in the window.

      • Bottom: The x-axis is at the bottom of the window.

      • Top: The x-axis is at the top of the window.

    • Name: A custom name for the x-axis.

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

    • Name style

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

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

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

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

    • Inverse: Select this check box to display the axis in reverse. Clear this check box to display the axis normally.

    • Boundary gap: Select this check box to add padding on both sides of the axis. Clear this check box to remove the padding.

    • Static: Select this check box to make the axis static and non-interactive.

    • Axis Line: Click the Eye icon to show the x-axis line.

      • On zero: Specifies whether the axis line of the x-axis or y-axis is on the 0 tick mark of the other axis. This setting is valid only when the other axis is a value axis and includes the 0 tick mark.

      • Line style

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

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

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

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

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

      • Align with label: Select this check box to align tick marks with labels. This setting is effective for a category axis when Boundary gap is selected.

      • Inside: Select this check box to point the axis ticks inward. Clear this check box to point them outward.

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

      • Line style

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

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

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

        • Opacity: Click + or -, or enter a value to change the opacity of the tick marks. The range is [0,1].

    • Tick Label: Click the Eye icon to show the x-axis tick labels.

      • Inside: Select this check box to position the axis labels inside the axis. Clear this check box to position them outside.

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

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

      • Show min label: Select this check box to show the minimum tick label. By default, this is determined automatically. The minimum tick label is not shown if labels overlap.

      • Show max label: Select this check box to show the maximum tick label. By default, this is determined automatically. The maximum tick label is not shown if labels overlap.

      • Color: For more information, see Color picker to change the color of the axis labels.

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

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

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

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

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

      • Line style

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

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

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

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

  • y-axis: For more information about the configuration, see the settings for the x-axis.

  • Data zoom: Click the eye icon on the right to show the data zoom controls.

    • Background color: For more information, see Color picker to change the color of the data background.

    • Data shadow

      • Line style

        • Color: For more information, see Color picker to change the color of the line.

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

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

        • Opacity: Click + or -, or enter a value to change the opacity of the line. The range is [0,1].

      • Area style

        • Color: For more information, see Color picker to change the color of the area.

        • Opacity: Click + or -, or enter a value to change the opacity of the split area. The range is [0,1].

      • Selected color: For more information, see Color picker to change the color on mouse selection.

      • Border color: For more information, see Color picker to change the border color.

      • Handle style

        • Color: For more information, see Color picker to change the background color of the handle elements.

        • Opacity: Click + or -, or enter a value to change the opacity of the handle elements. The range is [0,1].

      • Real-time: Click the Eye icon on the right to toggle the real-time effect.

      • Text style

        • Color: For more information, see Color picker to change the color of the text.

        • Font style: The font style of the text.

        • Font weight: The font weight of the text.

        • Font: The font family of the text.

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

      • Filter mode: Sets the data filtering mode. Options include but are not limited to Filter, Weak filter, Empty, and Disabled.

      • Start percentage: The starting percentage of the data window range for the waterfall chart.

      • End percentage: The ending percentage of the data window range for the waterfall chart.

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

        • Auto: When you select Auto, the data zoom is arranged horizontally.

        • Horizontal: Scales data horizontally.

        • Vertical: The data zoom is arranged vertically.

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

    • Trigger type: A custom trigger type. This setting is optional. The default value is Axis.

      • Item: Triggered by a data item graphic. This is mainly used for charts without a category axis, such as scatter charts and pie charts.

      • Axis: Triggered by an axis. This is mainly used for charts that use a category axis, such as column charts and line charts.

      • None: Nothing is 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: Select this check box to make the axis pointer automatically snap to points. This is useful for value and time axes to find small data points.

      • Line style

        • Color: For more information, see Color picker to change the color of the indicator line.

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

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

        • Opacity: Click + or -, or enter a value to change the opacity of the indicator line. The range is [0,1].

      • Shadow style

        • Color: For more information, see Color picker to change the color of the indicator shadow.

        • Opacity: Click + or -, or enter a value to change the opacity of the indicator shadow. The range is [0,1].

      • Cross style

        • Color: For more information, see Color picker to change the color of the cross indicator.

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

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

        • Opacity: Click + or -, or enter a value to change the opacity of the cross indicator. The range is [0,1].

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

      • Text style

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

        • 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 image icon to add a conditional style, or click the image icon to delete one. Click the image or image icons to change the order of the conditional styles. Click the image icon to duplicate the currently selected conditional style.

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

    • Symbol: You can customize the symbol for the mark. The default value is Circle. The available symbol types are None, Circle, Rectangle, Rounded Rectangle, Triangle, Diamond, Pin, and Arrow. For more information, see the ECharts official website.

    • Symbol size: Click + or -, or enter a value to change the symbol size in px.

    • Show icon: Click the eye icon on the right to show the icon styles.

    • Hover animation: Select this check box to enable an animation effect on mouse hover.

    • Legend hover link: Select this check box to enable linked highlighting when you hover over a legend item.

    • Step line: Sets the step style for the waterfall chart. Options include Off, Current point, Midpoint, and Next point.

    • Label: Click the eye icon on the right to show the label styles.

      • Position: Sets the position of the label relative to the waterfall chart. Options include but are not limited to top, left, and inside.

      • Distance: Sets the distance from the label to the top border of the waterfall chart.

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

      • Color: For more information, see Color picker to change the color of the label text.

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

    • Item style

      • Color: For more information, see Color picker to change the color of the item style.

      • Opacity: Click + or -, or enter a value to change the opacity of the cross indicator. The range is [0,1].

    • Line style

      • Color: For more information, see Color picker to change the color of the line.

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

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

      • Opacity: Click + or -, or enter a value to change the opacity of the line. The range is [0,1].

    • Area style

      • Color: For more information, see Color picker to change the color of the area style.

      • Opacity: Click + or -, or enter a value to change the opacity of the area. The range is [0,1].

    • Smoothing: Click + or -, or enter a value to adjust the smoothness of the waterfall curve. The value is a percentage from 0 to 1.

    • Mark line

      • Line style

        • Color: For more information, see Color picker to change the color of the line.

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

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

        • Opacity: Click + or -, or enter a value to change the opacity of the line. The range is [0,1].

        • Curveness: Click + or -, or enter a value to adjust the curveness of the line.

    • Animation: Sets the series animation. Click the eye icon on the right to show or hide the animation styles.

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

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

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

Data Source panelimage.png

Field

Description

x

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

y

The numeric value of each data point in the waterfall chart.

s

(Optional) The series name, used with the Series configuration 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

Turn on the toggle to enable widget interaction. When a data item is clicked, a callback value is returned. By default, the x, y, and s fields from the data are returned. For more information, see Configure widget interactions.

When a legend item is clicked

Turn on the toggle to enable widget interaction. When a legend item is clicked, a callback value is returned. By default, the selected field from the data is returned. For more information, see Configure widget interactions.

When data zoom is changed

Turn on the toggle to enable widget interaction. When the data zoom range is changed, a callback value is returned. By default, the start and end fields from the data are returned. For more information, see Configure widget interactions.

Blueprint Interaction

  1. Click the image icon in the upper-left corner of the page to go to 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 a data API request completes and the response is processed by the filter. The processed JSON data is returned. For a data example, see the Data response area on the Data Source tab of the widget's configuration panel in the canvas editor.

      When a data item is clicked

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

      When a legend item is clicked

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

      When data zoom is changed

      Triggered when the data zoom range is changed. The corresponding data item is returned.

    • Actions

      Action

      Description

      Request data API

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

      Import data API

      Processes data in the widget's drawing format and imports it to redraw the widget without sending a new server request. For a data example, see the Data response area on the Data Source tab of the widget's configuration panel in the canvas editor.

      Highlight

      Accepts an object with the following parameters: seriesName (series name), seriesIndex (series index), dataIndex (data index), and name (data name). Specify a series using `seriesName` or `seriesIndex`. To specify a particular data point, you can also specify `dataIndex` or `name`. See the sample data:

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

      Clear highlight

      Accepts an object with the following parameters: seriesName (series name), seriesIndex (series index), dataIndex (data index), and name (data name). Specify a series using `seriesName` or `seriesIndex`. To specify a particular data point, you can also specify `dataIndex` or `name`. See the sample data:

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

      Show tooltip

      Accepts an object with the following parameters: dataindex (data index), name (data name), x (x-coordinate position), and y (y-coordinate position). See the sample data:

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

      Hide tooltip

      Hides the tooltip. No parameters are required.

      Legend control

      Accepts an object with the following parameters: type (legend action type) and name (legend name). See the sample data:

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

      Move

      Moves the widget to a specified position. See the sample data.

       {      
      // Movement type. Absolute positioning: to, relative positioning: by. Default: to.
        "positionType": "to",
      // Specified position. x-coordinate, y-coordinate.
      "attr": {
        "x": 0,
        "y": 0
      },
      // Animation method.
      "animation": {
        "enable": false,
        // Animation delay.
        "animationDuration": 1000,
        // Animation curve. Optional values: linear|easeInOutQuad|easeInOutExpo.
        "animationEasing": "linear"
      }
    }

      Toggle visibility

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

      Show

      Shows the widget. See the sample data.

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

      Hide

      Hides the widget. See the sample data.

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

      Update widget configuration

      Dynamically updates the widget's style configuration. In the widget's Style panel, click Copy Configuration to Clipboard to get the configuration data. Then modify the field values in a data processing node on the blueprint editor's configuration page.
Previous：Echarts radar chartNext：Echarts color-segmented line chart