DocsICP FilingConsole
Documentation
Home Page DataV DataV User Guide Widget Guide Charts Column Chart ECharts bar chart

ECharts bar chart

Updated at:
Copy as MD
Product
My Favorites

Configure the chart style, data fields, and interactions for the ECharts bar chart component.

Chart style

The ECharts bar chart visualizes data differences between and within categories.

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 settings.图例

    • Left: The distance from the legend to the left border of the component. The default is auto. The following input formats are supported:

      • A specific pixel value, such as 20.

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

      • left, center, or right.

    • Top: The distance from the legend to the top border of the component. The default is auto. The following input formats are supported:

      • A specific pixel value, such as 20.

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

      • top, center, or bottom.

    • Right: The distance from the legend to the right border of the component. The default is auto. The following input formats are supported:

      • A specific pixel value, such as 20.

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

      • left, center, or right.

    • Bottom: The distance from the legend to the bottom border of the component. The default is auto. The following input formats are supported:

      • A specific pixel value, such as 20.

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

      • top, center, or bottom.

    • Width: Sets the width of the legend. The default is auto, which adjusts the width to fit the content.

    • Height: Sets the height of the legend. The default is auto, which adjusts the height to fit the content.

    • Orientation: Select the layout orientation for the legend items.

      • Horizontal: Arranges legend items horizontally.

      • Vertical: Arranges legend items vertically.

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

      • Automatic: The default setting is Automatic, which is determined by 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 symbol and text in the legend overlap, the alignment is Center Align.

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

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

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

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

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

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

    • Inactive Color: Refer to the Color Picker guide to set the color of a legend item when it is deselected. This effect is visible only when you click a legend item in preview or published mode.

    • Text Style

      • Color: Refer to the Color Picker guide to set 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: Click the + or - icon, or enter a value to adjust the font size of the legend text.

    • Background Color: Refer to the Color Picker guide to set the background color of the legend.

    • Border Color: Refer to the Color Picker guide to set the border color of the legend.

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

  • Grid: Click the e** icon on the right to show the grid settings.网格

    • Left: The distance from the grid to the left border of the component. The default is 3%. The following input formats are supported:

      • A specific pixel value, such as 20.

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

      • left, center, or right.

    • Top: The distance from the grid to the top border of the component. The default is 60. The following input formats are supported:

      • A specific pixel value, such as 20.

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

      • top, center, or bottom.

    • Right: The distance from the grid to the right border of the component. The default is 4%. The following input formats are supported:

      • A specific pixel value, such as 20.

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

      • left, center, or right.

    • Bottom: The distance from the grid to the bottom border of the component. The default is 3%. The following input formats are supported:

      • A specific pixel value, such as 20.

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

      • top, center, or bottom.

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

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

    • Adaptive Layout: If selected, the chart adapts its layout automatically. If cleared, it adheres to your configured layout styles.

    • Background Color: Refer to the Color Picker guide to set the background color of the grid. The default is transparent.

    • Border Color: Refer to the Color Picker guide to set the border color of the grid. The default is transparent.

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

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

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

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

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

    • Name Style

      • Color: Refer to the Color Picker guide to set 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 the + or - icon, or enter a value to change the font size of the x-axis name.

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

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

    • Inverse: If selected, the axis is displayed in re*********er. If cleared, it is displayed in the st**********er.

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

    • Min: Sets the minimum value of the axis scale. The default is Data Min, which uses the minimum value from the data. If not set, the minimum value is automatically calculated to ensure axis ticks are distributed uniformly.

    • Max: Sets the maximum value of the axis scale. The default is Data Max, which uses the maximum value from the data. If not set, the maximum value is automatically calculated to ensure axis ticks are distributed uniformly.

    • Scale: If selected, the axis scale is not forced to include the zero tick. This is only effective for value axes and is disabled if Min and Max are set.

    • Split Number: Click the + or - icon, or enter a value to set the number of segments for the axis. This number is a suggestion; the system may adjust the actual number of segments to ensure the readability of the axis ticks. This setting is not applicable to category axes.

    • Min Interval: Click the + or - icon, or enter a value to set the minimum interval for the axis. For example, you can set it to 1 to ensure that axis ticks are integers. This is only effective for value or time axes.

    • Log Base: The base of the logarithm for a logarithmic axis. This setting only applies to logarithmic axes.

    • Static: If selected, the axis is static and cannot be interacted with.

    • Axis Line: Click the eye icon on the right to toggle the visibility of the x-axis line.

      • On Zero: Specifies whether the x-axis or y-axis line is rendered at the zero-scale mark of the other axis. Effective only when the other axis is a value axis that includes a 0 value.

      • Line Style

        • Color: Refer to the Color Picker guide to set the color of the x-axis line.

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

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

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

    • Axis Tick: Click the eye icon on the right to toggle the visibility of x-axis ticks.

      • Align with Label: If selected, aligns the tick marks with the labels. On a category axis, this is effective only when Boundary Gap is also selected.

      • Interval: Click the + or - icon, or enter a value to set the display interval of axis ticks. This is effective for category axes.

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

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

      • Line Style

        • Color: Refer to the Color Picker guide to set the color of the tick marks.

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

        • Type: The type of the tick marks. Options are Solid and Dashed.

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

    • Axis Label: Click the eye icon on the right to toggle the visibility of x-axis labels.

      • Interval: The display interval for axis labels on category axes. By default, labels are displayed at an interval that prevents them from overlapping. You can set this to 0 to force all labels to be displayed. If set to 1, it means display every other label. If set to 2, it means display every third label, and so on.

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

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

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

      • Show Min Label: If selected, the minimum tick label is always shown. By default, this is determined automatically; the system may hide the label to prevent overlap.

      • Show Max Label: If selected, the maximum tick label is always shown. By default, this is determined automatically; the system may hide the label to prevent overlap.

      • Text Style

        • Color: Refer to the Color Picker guide to set 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: The horizontal alignment of the axis tick labels. Options include Auto, Left Align, Center Align, and Right Align. The default is Auto.

        • Vertical Align: The vertical alignment of the axis tick labels. Options include Top Align, Center Align, and Bottom Align.

    • Split Line: Click the eye icon on the right to toggle the visibility of split lines.

      • Split Interval: Click the + or - icon, or manually enter a value to change the display interval of axis split lines. This setting is effective only on category axes. By default, split lines are displayed at an interval that prevents them from overlapping. You can set the value to 0 to force all split lines to be displayed. If the value is set to 1, it means that one split line is skipped between each displayed split line. If the value is 2, it means that two split lines are skipped between each displayed split line, and so on.

      • Line Style

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

        • Type: The type of the split lines. Options are Solid and Dashed.

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

    • Split Area: Click the eye icon on the right to toggle the visibility of split areas.

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

      • Area Style

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

    • Axis Pointer: Click the eye icon on the right to toggle the visibility of the axis pointer.

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

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

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

      • Status: The current state of the axis pointer. Select to show, clear to hide.

      • Label: Click the eye icon on the right to toggle the visibility of the axis pointer label.

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

        • Margin: If selected, adds a margin between the axis pointer label and the axis. If cleared, there is no margin.

        • Text Style

          • Color: Refer to the Color Picker guide to set 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's text label.

        • Border Color: The border color of the axis pointer's text label.

        • Border Width: The border width of the axis pointer's text label.

      • Handle: Click the eye icon on the right to toggle the visibility of the drag handle.

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

        • Margin: Click the + or - icon, or enter a value to change the distance between the drag handle's center and the axis.

        • Color: The color of the drag handle.

        • Throttle: The update frequency in milliseconds when dragging the handle. A larger value can improve performance but may reduce responsiveness.

  • y-axis: Refer to the x-axis settings for configuration details.

  • Tooltip: Click the eye icon on the right to enable and configure the tooltip.提示框

    • Trigger On: The trigger type. Options include Mouseover, Click, and Mouseover and Click.

    • Background Color: Refer to the Color Picker guide to set the background color of the tooltip.

    • Border Color: Refer to the Color Picker guide to set the border color of the tooltip.

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

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

    • Text Style

      • Color: Refer to the Color Picker guide to set 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 加号图标 or 垃圾桶图标 icon to add or delete a series. Click the 横排列图标 or 竖排列图标 icon to arrange the order of multiple series. Click the 复制图标 icon to duplicate the selected series, creating a new series with the same configuration.系列

    • Name: A custom name for the series. This name corresponds to the s field in your data.

    • Legend Hover Link: If selected, enables linked highlighting when hovering over the legend.

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

      • cartesian2d: Use a 2D Cartesian coordinate system.

      • polar: Use a polar coordinate system.

    • Label

      • Normal: Click the eye icon on the right to show labels on bars in their normal (unhovered) state.

        • Text Style

          • Color: Refer to the Color Picker guide to set the label text color for the normal state.

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

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

          • Font Family: The font family of the label text for the normal state.

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

      • Emphasis: Click the eye icon on the right to show labels on bars in their emphasized (hovered) state.

        • Text Style

          • Color: Refer to the Color Picker guide to set the label text color for the emphasized state.

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

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

          • Font Family: The font family of the label text for the emphasized state.

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

    • Item Style

      • Normal

        • Color: Refer to the Color Picker guide to set the background color for items in the normal state.

        • Border Color: Refer to the Color Picker guide to set the border color for items in the normal state.

        • Border Width: Click the + or - icon, or enter a value to change the border width for items in the normal state.

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

        • Bar Border Radius: Click the + or - icon, or enter a value to adjust the border radius of bars in the normal state.

        • Opacity: Click the + or - icon, or enter a value to adjust the opacity for items in the normal state. The range is [0, 1].

      • Emphasis

        • Color: Refer to the Color Picker guide to set the background color for items in the emphasized state.

        • Border Color: Refer to the Color Picker guide to set the border color for items in the emphasized state.

        • Border Width: Click the + or - icon, or enter a value to change the border width for items in the emphasized state.

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

        • Opacity: Click the + or - icon, or enter a value to adjust the opacity for items in the emphasized state. The range is [0, 1].

    • Stack: To stack series on the same category axis, assign the same stack value to them.

    • Bar Width: Sets the width of the bars. If not set, the width is determined automatically. This setting supports percentage values relative to the category width. The default is 50%.

    • Bar Min Height: Click the + or - icon, or enter a value to set the minimum height for the bars.

    • Bar Spacing: The spacing between the bars of different series, specified as a percentage of the bar width. For example, a value of 30% sets the spacing to 30% of the bar width. To make the bars of two series overlap, you can set Bar Spacing to -100%. This is useful for creating a background with bars.

    • Bar Category Gap: The distance between bars of the same series. The default is 20% of the category gap. A fixed value can also be set.

    • Static: If selected, the series is static and cannot be interacted with.

  • Animation: If selected, enables animation effects.

  • Animation Threshold: Click the + or - icon, or enter a value to set the threshold for the initial animation in milliseconds.

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

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

Data panel

image

Fields

Parameter

Description

x

The categories for the x-axis.

y

The value for each bar, determining its height.

s

(Optional) The series identifier. Used to map data points to a specific series configuration in the configuration panel.

Interaction panel

image

Interactions

Interaction

Description

When a data item is clicked

Select Enable to enable component interactions. The Bar chart component has interaction settings. When you click a data item, it returns a callback value that contains the x and y fields from the data by default. For more information, see How to configure the callback ID of a digital flipper component.

When a legend item is clicked

Select Enable to enable interactions for the component. The Bar Chart component has interaction configurations. When you click a legend, a callback value is emitted. By default, this value is the selected field from the data. For more information, see How to configure the callback ID for the Digital Flipper component.

Blueprint Editor interaction configuration

  1. On the canvas editor page, 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 bar chart component in the imported nodes pane. The configuration parameters for the bar chart appear on the canvas, as shown in the following figure.柱状图

    • Events

      Event

      Description

      When data request is successful

      Triggered after a successful data API request and filter processing. Provides the processed data in JSON format. For a data example, see the data response area on the Data tab of the component's configuration panel.

      When data request fails

      Triggered when a data API request fails due to a network issue or an API error. Provides the processed data in JSON format. For a data example, see the data response area on the Data tab of the component's configuration panel.

      When a data item is clicked

      Triggered when a bar in the bar chart is clicked. The corresponding data item is passed as an output.

      When a legend item is clicked

      Triggered when a legend item in the bar chart is clicked. The corresponding series data is passed as an output.

    • Actions

      Actions

      Description

      Request Data Interface

      Requests data from the server again. Parameters from upstream nodes are passed to the new request. For example, if the bar chart's API data source is https://api.test and the data passed to the Request Data Interface action is { id: '1'}, the final request URL will be https://api.test?id=1.

      Import Data Interface

      Processes and imports data in the component's required format and redraws the component without requesting new data from the server. For a data example, see the data response area on the Data tab of the component's configuration panel.

      Show Tooltip

      The incoming data for this action is an object. Parameters include dataindex (data index), name (data name), x (x-coordinate), and y (y-coordinate). Data example:

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

      Hide Tooltip

      Hides the tooltip. No parameters are required.

      Legend Control

      The incoming data for this action is an object. Parameters include type (legend action type) and name (legend name). Data example:

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

      Update Component Configuration

      Dynamically updates the component's style configuration. Obtain the configuration data by clicking Copy configuration to clipboard in the configuration panel. Then, in the Blueprint Editor, use a data processing node to modify the required field values.

      Show

      Shows the component. Example data:

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

      Hide

      Hides the component. Example data:

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

      Toggle visibility

      Toggles the visibility of the component. Example data:

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

      Move

      Moves the component to a specified position. Example data:

          return{      
      // Move type. "to" for absolute positioning, "by" for relative. Default is "to".
        "positionType": "to",
      // The target position, specified by x and y coordinates.
      "attr": {
        "x": 0,
        "y": 0
      },
      // Animation settings.
      "animation": {
        "enable": false,
        // Animation duration.
        "animationDuration": 1000,
        // Easing curve. Options are linear, easeInOutQuad, and easeInOutExpo.
        "animationEasing": "linear"
      }
    }
Previous：Echarts polar stacking column chartNext：Echarts Stacked Histogram