DocsICP FilingConsole
官方文档
首页

ECharts stacked bar chart

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

Configure the style, data source, and interactions for the ECharts stacked bar chart widget.

Chart style

The ECharts stacked bar chart supports custom x-axis intervals, multiple data series, and stacked display to show multi-dimensional data differences in a compact space.image.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 bar chart. The available options are canvas and svg.

  • Global bar style

    • Bar width: Click + or -, or enter a value in pixels.

    • Maximum bar width: Click + or -, or enter a value to adjust the maximum bar width in pixels.

    • Minimum bar height: Click + or -, or enter a value in pixels.

    • Intra-category gap: Sets the gap between bars of different series as a percentage.

    • Inter-category gap: Sets the gap between bars of the same series as a percentage.

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

    • Horizontal position: Click the drop-down list to select the horizontal alignment of the legend markers and text.

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

      • Align Left: The graphic is Aligned Left when it is to the left of the text.

      • Center Align: The alignment is Center Align when the legend symbol and text overlap.

      • Right Align: The alignment is called Right Align when the graph is to the right of the text.

    • Vertical position: Click the drop-down list to select the vertical alignment of the legend markers and text.

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

      • Top Align: Sets the alignment to Top Align, which aligns the graph to the top of the window.

      • Center Align: A graph is Center-aligned when it is in the center of the window.

      • Bottom Align: Sets the alignment to Bottom Align to position the graph at the bottom of the window.

    • Orientation: Click the drop-down list to select the layout orientation of the legend.

      • Horizontal: The legend items are arranged horizontally.

      • Vertical: The legend items are arranged vertically.

    • Padding: The legend padding in pixels. Click + or -, or enter a value. Default: 5 for all sides.

    • Item gap: The gap between legend items. Click + or -, or enter a value. Horizontal gap for horizontal layout; vertical gap for vertical layout.

    • Text style

      • Color: The legend text color. Select a color from the Color picker.

      • 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: Sets the font size of the legend. You can click + or -, or enter a value.

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

    • Left margin: Click + or -, or enter a value in px to adjust the left margin of the grid.

    • Top margin: Click + or -, or enter a value to adjust the top margin of the grid in pixels.

    • Right margin: Click + or -, or enter a value in pixels (px) to adjust the right margin of the grid.

    • Bottom margin: You can click + or -, or enter a value to set the bottom margin of the grid in pixels.

    • Adaptive layout: Enables adaptive layout. When cleared, the chart uses manually configured layout settings.

  • x-axis: Click the eye icon to show or hide the 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: Specifies the location of the x-axis name. The options are Start, End, or Center. The default value is End.

    • Name style

      • Color: The x-axis name color. Select a color from the Color picker.

      • 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 set the font size for 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 rotation: Click + or -, or enter a value to adjust the axis name's rotation angle.

    • Inverse: Reverses the axis direction.

    • Minimum: The minimum axis scale value. Defaults to Automatic, which sets the minimum tick to the minimum data value on the axis to ensure even tick distribution.

    • Maximum: The maximum axis scale value. Defaults to Automatic, which calculates from the largest data point on the axis to ensure even tick distribution.

    • Scale: When selected, the axis scale does not include the zero tick. Applies only to value axes. Invalid if both maximum and minimum are set.

    • Segments: The number of axis segments. Click + or -, or enter a value. Defaults to automatic calculation for even tick distribution. The actual number may be adjusted for readability. Does not apply to category axes.

    • Min interval: The minimum interval between axis ticks. Click + or -, or enter a value. For example, set to 1 for integer-only ticks. Applies only to value or time axes.

    • Max interval: The maximum axis tick interval. Click + or -, or enter a value. For example, set to 500 to ensure integer ticks. Applies only to value or time axes.

    • Static: Makes the axis non-interactive.

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

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

      • Line style

        • Color: The axis line fill style: Color fill or Gradient fill. Color picker.

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

        • Type: Specifies the line type of the axis. The options are Solid line, Dashed line, and Dotted line.

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

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

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

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

      • Line style

        • Color: The tick line fill style: Color fill or Gradient fill. Color picker.

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

        • Type: The style of the axis line, which can be a Solid line, a Dashed line, or a Dotted line.

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

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

      • Inside: When selected, tick labels face inward. When cleared, they face outward.

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

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

      • Formatter: Sets the format of the tick labels. Options include Integer, 1 decimal place, and 2 decimal places. The default value is Integer.

      • Show min label: Displays the minimum tick label. Defaults to automatic; hidden if labels overlap.

      • Show max label: Displays the maximum tick label. Defaults to automatic; hidden if labels overlap.

      • Color: The tick label color. Select a color from the Color picker.

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

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

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

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

    • Line separator: To display the line separators, click the eye icon on the right.

      • Line style

        • Color: The line separator color. Select a color from the Color picker.

        • Width: To set the width of the x-axis line separators, click + or -, or enter a value.

        • Type: The type of line separator for the x-axis, which can be Solid line, Dashed line, or Dotted line.

        • Opacity: Sets the opacity of the x-axis line separators. Click + or - to adjust the value, or enter a value from 0 to 1.

  • y-axis: Same configuration as the x-axis.

  • Tooltip: Appears when you click the eye icon on the right.

    • Trigger type: The tooltip trigger type. Default: 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 bar charts and line charts.

      • None: Nothing is triggered.

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

      • Type: The pointer type: Line, Shadow, or Cross.

      • Snap to point: Automatically snaps the axis pointer to data points. Useful for finding small values on value and time axes.

      • Line style

        • Color: The pointer line color. Select a color from the Color picker.

        • Width: To change the width of the pointer line, click + or -, or enter a value.

        • Type: The style of the pointer line. The options are Solid line, Dashed line, and Dotted line.

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

      • Shadow style

        • Color: The pointer shadow color. Select a color from the Color picker.

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

      • Cross style

        • Color: The cross pointer color. Select a color from the Color picker.

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

        • Type: The style of the cross pointer, which can be Solid line, Dashed line, or Dotted line.

        • Opacity: Click + or -, or enter a value to adjust the opacity of the cross pointer. The value can range from 0 to 1.

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

      • Text style

        • Color: The tooltip label text color. Select a color from the 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: You can click the add icon or delete icon icon to add or delete a conditional style. You can click the horizontal layout icon or vertical layout icon icon to configure the arrangement of multiple conditional styles. You can click the copy icon icon to copy the current conditional style and add a new one with the same configuration.

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

    • Legend highlight: Enables a highlight effect when hovering over the legend.

    • Label: Click the eye icon to show the label.

      • Position: Sets the position of the label relative to the bar. Options include top, left, and inside.

      • Distance: Sets the distance of the label from the top border of the bar.

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

      • Color: The label text color. Select a color from the Color picker.

      • 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: The bar color. Select a color from the Color picker.

      • Bar border radius: Click + or - to adjust the border radius, or enter a value.

      • Opacity: Adjusts the opacity of the bar. You can click + or -, or enter a value from 0 to 1.

    • Stack: The stack value. Series on the same category axis that have the same stack value are stacked together. For example, `total`.

    • Large-scale optimization: Click the eye icon on the right to enable or disable large-scale optimization.

  • Animation: Enables animation effects.

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

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

Data Source panelimage.png

Field

Description

x

Configures the category for each bar in the bar chart, which is the value on the x-axis.

y

Configures the value for each bar in the bar chart.

s

(Optional) The series value. It is used with the Series configuration item 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 switch to enable widget interaction. When you click a data item, a callback value is returned. By default, the x, y, and s fields from the data are returned. Configure widget interactions.

When a legend item is clicked

Turn on the switch to enable widget interaction. When you click a legend item, a callback value is returned. By default, the selected field from the data is returned. Configure widget interactions.

Blueprint interaction

  1. Click the image icon in the upper-left corner of the page to open the Blueprint page.

  2. On the Layer Node tab, you can add the current widget to the main canvas.

  3. View the Blueprint configuration parameters.image.png

    • Events

      Event

      Description

      When the data API request is complete

      This event is triggered after the filter processes the response from a data API request, returning the processed data in JSON format. For a data example, see the Data response area on the Data Source tab in the widget's configuration panel in the canvas editor.

      When a data item is clicked

      This event is triggered when you click data in the stacked bar chart. The corresponding data item is returned.

      When a legend item is clicked

      This event is triggered when you click a legend item in the stacked bar chart. The corresponding data item is returned.

    • Actions

      Action

      Description

      Request data API

      Requests data from the server again. Data from upstream data processing nodes or layer nodes is used as parameters. For example, if a stacked bar chart has its API data source set to https://api.test, and the data passed to the Request data API action is { id: '1'}, the final API request is https://api.test?id=1.

      Import data API

      Processes data into the format required by the component, then imports the data to redraw the component. This action does not re-request data from the server. For a data example, see the Data Response area on the Data Source tab in the component's configuration panel in the canvas editor.

      Show tooltip

      The input data for this action is an object. It includes the dataindex (data index), name (data name), x (x-coordinate), and y (y-coordinate) parameters. See the data example below.

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

      Hide tooltip

      Hides the tooltip. No parameters are required.

      Legend control

      The input data for this action is an object. It includes the type (legend action type) and name (legend name) parameters. See the data example below.

      {
  "type": "",// The legend action type. Valid values: legendSelect, legendUnSelect, and legendToggleSelect.
  "name": ""
}

      Move

      Moves the component to a specified position. See the data example below.

       {      
      // The movement method. Use 'to' for absolute positioning or 'by' for relative positioning. Default: to.
        "positionType": "to",
      // The target position, specified by x and y coordinates.
      "attr": {
        "x": 0,
        "y": 0
      },
      // The animation configuration.
      "animation": {
        "enable": false,
        // The animation duration in milliseconds.
        "animationDuration": 1000,
        // The animation curve. Valid values: linear, easeInOutQuad, and easeInOutExpo.
        "animationEasing": "linear"
      }
    }

      Toggle visibility

      Shows or hides the component. No parameters are required.

      Show

      Shows the component. See the data example below.

      {
  "animationType": "",// The animation method. Set to 'fade' for a fade-in effect. If empty, no animation is used.
  "animationDuration": 1000,// The animation duration in milliseconds (ms).
  "animationEasing": ""// The animation curve.
}

      Hide

      Hides the component. See the data example below.

      {
  "animationType": "",// The animation method. Set to 'fade' for a fade-out effect. If empty, no animation is used.
  "animationDuration": 1000,// The animation duration in milliseconds (ms).
  "animationEasing": ""// The animation curve.
}

      Update component configuration

      Updates the style configuration of the component dynamically. First, click Copy Configuration to Clipboard on the component's Style panel to get the configuration data. Then, in a data processing node in the Blueprint Editor, change the field values for the styles as needed.
Previous：ECharts candlestick chartNext：Echarts positive and negative bar chart