DocsICP FilingConsole
官方文档
首页

ECharts column chart

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

The ECharts column chart displays categorical data as vertical bars. You can customize its appearance, data mapping, and interactions.

Chart styleimage.png

Style paneimage.png

  • Search Configuration: Click the Style icon image in the upper right corner of the panel to enter the name of the configuration item you wish to locate in the search field. The system supports fuzzy matching. For more information, see Search configuration item.

    • Size: The width and height of the component in pixels (px).

    • Position: The component's x-coordinate and y-coordinate in pixels (px). The x-coordinate is the horizontal distance from the page's left edge to the component's top-left corner. The y-coordinate is the vertical distance from the page's top edge to the component's top-left corner.

    • Rotation: The rotation of the component around its center point, in degrees (°).

      • Enter an angle value to control the component's rotation.

      • Click the image icon to flip the component horizontally.

      • Click the image icon to flip the component vertically.

    • Opacity: The value ranges from 0 to 1. A value of 0 is completely transparent, while a value of 1 is fully opaque. The default is 1.

    • Interaction passthrough: When enabled, mouse interactions pass through this component, preventing it from blocking interactions with other components layered underneath it on a dashboard.

    • Alignment: The alignment of the component within the editor.

  • Legend: Click the eye icon to show or hide the legend and configure its style.

    • Left: Specifies the distance between the legend and the left border of the widget. The default value is auto. You can use the following values:

      • A specific pixel value, such as 20.

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

      • If you select left, center, or right, the component automatically aligns.

    • Top: Specifies the distance between the legend and the top border of the widget. The default value is auto. You can use the following values:

      • A specific pixel value, such as 20.

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

      • When you select left, center, or right, the component automatically aligns itself accordingly.

    • Right: Specifies the distance between the legend and the right border of the widget. The default value is auto. You can use the following values:

      • A specific pixel value, such as 20.

      • A percentage relative to the container's height and width, such as 20%.

      • left, center, or right. The legend automatically aligns to the selected position.

    • Bottom: Specifies the distance between the legend and the bottom border of the widget. The default value is auto. You can use the following values:

      • A pixel value, such as 20.

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

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

    • Width: The width of the legend. The default value is auto.

    • Height: The height of the legend. The default value is auto.

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

      • Horizontal: The legend items are arranged horizontally.

      • Vertical: The legend items are arranged vertically.

    • Alignment: Specifies the alignment of the legend markers and text.

      • Auto: The default value is auto, which determines the alignment based on the position and orientation of the widget.

      • Left: The icon is aligned to the left of the text.

      • Center: If the legend icon and text overlap, the alignment is center.

      • Right: The alignment is right when the icon is to the right of the text.

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

    • Item Gap: The distance between legend items. Click + or -, or enter a value. The gap is horizontal for a horizontal layout and vertical for a vertical layout.

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

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

    • Selection Mode: Click the eye icon to show or hide the selection mode.

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

    • Text Style

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

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

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

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

      • Font Size: Adjust the font size of the legend by clicking + or -, or by entering a value.

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

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

    • Border Width: The border width of the legend. Enter a value or click + or -.

  • Grid: Click the Eye icon on the right to show the grid.

    • Left: Specifies the distance between the grid and the left border of the widget. The default value is 3%. You can use the following values:

      • A specific pixel value, such as 20.

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

      • When set to left, center, or right, the component automatically aligns accordingly.

    • Top: Specifies the distance between the grid and the top border of the widget. The default value is 60. You can use the following values:

      • A specific pixel value, such as 20.

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

      • When you select left, center, or right, the component automatically snaps to the corresponding position.

    • Right: Specifies the distance between the grid and the right border of the widget. The default value is 4%. You can use the following values:

      • A pixel value, such as 20.

      • The value is a percentage of the container's height and width. For example, 20%.

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

    • Bottom: Specifies the distance between the grid and the bottom border of the widget. The default value is 3%. You can use the following values:

      • A specific pixel value, such as 20.

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

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

    • Width: The width of the grid. The default value is auto.

    • Height: The height of the grid. The default value is auto.

    • Responsive Layout: If you select this check box, the column chart uses a responsive layout. Otherwise, the chart uses the layout that you configure.

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

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

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

  • x-axis: Click the eye icon to show or hide the x-axis and configure its style.

    • Offset: Specifies 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: Specifies the position of the x-axis name. Options include Start, Center, or End. The default value is End.

    • Name Style

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

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

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

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

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

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

    • Name Rotation: Enter a value or click + or - to set the rotation angle of the axis name.

    • Inverse: If you select this check box, the axis is inverted. Otherwise, the axis is displayed in the default direction.

    • Boundary Gap: If you select this check box, padding is added to both ends of the axis.

    • Minimum: Specifies the minimum value of the axis scale. The default value is DataMin, which uses the minimum value from the data. If this parameter is not set, the minimum value is automatically calculated to ensure that the axis ticks are evenly distributed.

    • Maximum: Specifies the maximum value of the axis scale. The default value is DataMax, which uses the maximum value from the data. If this parameter is not set, the maximum value is automatically calculated to ensure that the axis ticks are evenly distributed.

    • Scale: If you select this check box, the axis scale does not need to start from 0. This parameter is valid only for value axes and is ignored if you set a minimum and maximum value.

    • Split Number: Click + or -, or enter a value to set the number of segments for the axis. If a value is not set, the system automatically calculates one to ensure that the axis ticks are evenly distributed. This is a suggested value. The actual number of segments may be adjusted to improve the readability of the axis labels. This setting does not apply to category axes.

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

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

    • Static: If you select this check box, the axis is static and does not respond to interactions.

    • Axis Line: Click the eye icon to show or hide the x-axis line.

      • On Zero: Specifies whether the axis line is on the 0 tick of the other axis. This parameter is valid only when the other axis is a value axis and includes the 0 tick.

      • Axis Line Style

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

        • Width: Enter a value or click + or - to set the width of the x-axis line.

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

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

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

      • Align with Label: If you select this check box, ticks are aligned with labels. This parameter is valid for category axes only when Boundary Gap is selected.

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

      • Inside: If you select this check box, the axis ticks face inward. If you clear this check box, they face outward.

      • Length: To set the length of the axis ticks, click + or -, or enter a value.

      • Line Style

        • Color: Specifies the color of the tick lines. For more information, see Color picker.

        • Width: Enter a value, or click + or - to adjust the width of the tick lines.

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

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

    • Axis Label: Click the eye icon to show or hide the x-axis labels.

      • Interval: Specifies the display interval of axis labels. This parameter is valid for category axes. By default, labels are displayed at intervals to prevent them from overlapping. You can set this to 0 to force all labels to be displayed. A value of 1 means that every other label is displayed. A value of 2 means that every third label is displayed, and so on.

      • Inside: If you select this check box, the axis labels face inward. If you clear this check box, they face outward.

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

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

      • Show Min Label: If you select this check box, the minimum tick label is always displayed. By default, the visibility is determined automatically to prevent labels from overlapping.

      • Show Max Label: If you select this check box, the maximum tick label is always displayed. By default, the visibility is determined automatically to prevent labels from overlapping.

      • Text Style

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

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

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

        • Font Family: Specifies the font family of the axis label text.

        • Font Size: Specifies the font size of the axis label text.

        • Align: Specifies the horizontal alignment of the axis label text. Options include Auto, Left, Center, and Right. The default value is Auto.

        • Vertical Align: Optional. Supported values are Top, Center, and Bottom.

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

      • Interval: Click + or -, or enter a value to set the interval for the axis split lines. This setting applies only to category axes. By default, the interval is automatically adjusted to prevent the split lines from overlapping. You can set the value to 0 to display all split lines. For example, a value of 1 means that every other split line is displayed, and a value of 2 means that every third split line is displayed, and so on.

      • Line Style

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

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

        • Opacity: Specifies the opacity of the x-axis split lines. You can click + or -, or enter a value between 0 and 1.

    • Split Area: Click the eye icon to show or hide the split areas.

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

      • Area Style

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

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

      • Type: Specifies the pointer type. Options include Line and Shadow.

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

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

      • Status: Select this check box to show the pointer. Clear it to hide the pointer.

      • Label: Click the eye icon to show or hide the axis pointer label.

        • Precision: Specifies the decimal precision of the value in the text label. By default, the precision is determined automatically. You can also specify an integer, such as 2, to display two decimal places.

        • Margin: If you select this check box, a margin is added between the axis pointer label and the axis.

        • Text Style

          • Color: Specifies the color of the axis pointer label text. For more information, see Color picker.

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

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

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

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

        • Background Color: Specifies the background color of the axis pointer text label.

        • Border Color: Specifies the border color of the axis pointer text label.

        • Border Width: Specifies the border width of the axis pointer text label.

      • Handle: Click the eye icon to show or hide the handle.

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

        • Margin: Click + or -, or enter a value to set the distance from the handle center to the axis.

        • Color: Specifies the color of the handle.

        • Throttle: Specifies the interval in milliseconds (ms) at which updates are triggered when the handle is dragged. A larger value can improve performance but may reduce the user experience.

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

  • Tooltip: Click the eye icon to show or hide the tooltip.

    • Trigger: Specifies the trigger type. Options include Mouse move, Mouse click, and Mouse move and click.

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

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

    • Border Width: Sets the border width of the background box. Click + or -, or enter a value.

    • Padding: Sets the padding of the background box in pixels. Click + or -, or enter a value. The default value is 5 for all sides.

    • Text Style

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

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

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

      • Font Family: Specifies the font family of the tooltip text.

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

  • Series: Click the image or image icon to add or delete a conditional style. Click the image or image icon to reorder the conditional styles. Click the image icon to duplicate the selected conditional style.

    • Name: Specifies a custom name for the series. This name must correspond to the value of the s field in the data.

    • Legend Hover Link: If you select this check box, hovering over a legend item highlights the corresponding series in the chart.

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

      • cartesian2d: Uses a 2D Cartesian coordinate system.

      • polar: Uses a polar coordinate system.

    • Label

      • Normal: Click the eye icon to configure the labels for normal items (columns that are not being hovered over).

        • Text Style

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

          • Font Style: Specifies the font style of the normal item label text.

          • Font Weight: Specifies the font weight of the normal item label text.

          • Font Family: Specifies the font family of the normal item label text.

          • Font Size: Specifies the font size of the normal item label text.

      • Emphasis: Click the eye icon to configure the labels for emphasized items (columns that are being hovered over).

        • Text Style

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

          • Font Style: Specifies the font style of the emphasized item label text.

          • Font Weight: Specifies the font weight of the emphasized item label text.

          • Font Family: Specifies the font family of the emphasized item label text.

          • Font Size: Specifies the font size of the emphasized item label text.

    • Item Style

      • Normal

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

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

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

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

        • Border Radius: Click + or -, or enter a value to adjust the border radius of the item columns.

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

      • Highlights

        • Color: Specifies the background color of emphasized items. For more information, see Color picker.

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

        • Border Width: Sets the border width for emphasized items. Click + or -, or enter a value.

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

        • Opacity: Click + or -, or enter a value from 0 to 1 to change the opacity of normal items.

    • Stack: Specifies the stack name. Series on the same category axis that have the same stack value are stacked on top of each other.

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

    • Bar Min Height: Click + or -, or enter a value to set the minimum height of the bars in the column chart.

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

    • Bar Category Gap: Specifies the gap between bars within the same category. The default value is 20% of the category gap. You can also set a fixed value.

    • Static: If you select this check box, the axis is static and does not respond to interactions.

  • Animation: If you select this check box, animation effects are enabled for the chart.

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

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

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

Data Source paneimage.png

Field

Description

x

The category of each item on the x-axis.

y

The data value for each bar in the column chart.

s

(Optional) The series value. Used with the Series configuration item in the Style pane.

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 paneimage.png

Interaction

Description

When a data item is clicked

When enabled, an interaction event is triggered when a data item is clicked, and 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

When enabled, an interaction event is triggered when a legend item is clicked, and a callback value is returned. By default, the selected field from the data is 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 a data API request completes

      Triggered after data from a data API request is returned and processed by the filter. The processed data is in JSON format. For a data example, see the Data Response section on the Data Source tab of the widget's configuration pane in the canvas editor.

      When a data item is clicked

      Triggered when you click a data item in the column chart. The data for the clicked item is returned.

      When a legend item is clicked

      Triggered when you click a legend item in the column chart. The data for the clicked item is returned.

    • Actions

      Action

      Description

      Request Data API

      Re-requests data from the server, using data from an input data processing node or a layer node as a parameter. For example, if the API data source for a column chart 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

      Imports pre-processed data to redraw the widget without making another server request. For a data example, see the Data Response Result area on the Data Source tab in the configuration panel to the right of the component in the canvas editor.

      Show Tooltip

      The action receives data of the object type. Parameters include dataindex (data index), name (data name), x (x-coordinate position), and y (y-coordinate position). See the following data example:

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

      Hide Tooltip

      Hides the tooltip. No parameters are required.

      Legend Control

      The action receives data of the object type. Parameters include type (legend action type) and name (legend name). See the following data example:

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

      Move

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

      {      
      // The move type. Absolute positioning: to. Relative positioning: by. Default: to.
        "positionType": "to",
      // The specified position. x-coordinate, y-coordinate.
      "attr": {
        "x": 0,
        "y": 0
      },
      // The animation method.
      "animation": {
        "enable": false,
        // The animation delay.
        "animationDuration": 1000,
        // The 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 following data example.

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

      Hide

      Hides the widget. See the following data example.

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

      Update Widget Configuration

      Dynamically updates the widget style configuration. Go to the Style pane, click Copy Configuration to Clipboard to get the configuration data, then modify the field values in the data processing node on the Blueprint editor page as needed.
Previous：Echarts polar stacked column chartNext：ECharts Stacked Bar Chart