DocsICP FilingConsole
官方文档
首页

Echarts stepped line chart

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

Configure the chart style, data source, and interactions for an ECharts stepped line chart.

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: The rendering engine for the line chart. Valid values: canvas and svg.

  • Legend: Click the eye icon on the right to show or hide the legend style settings.

    • Horizontal position: The horizontal alignment of the legend markers and text.

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

      • Align Left: Places the graphic to the left of the text.

      • Center: Centers the legend. The symbol and text overlap.

      • Right Align: Places the graphic to the right of the text.

    • Vertical position: The vertical alignment of the legend markers and text.

      • Auto: Default. The position depends on the widget's position and orientation.

      • Top Snap: Snaps the legend to the top of the chart area.

      • Align Center: Centers the legend vertically in the chart area.

      • Bottom Alignment: Snaps the legend to the bottom of the chart area.

    • Orientation: The layout orientation of the legend.

      • Horizontal: The legend items are arranged horizontally.

      • Vertical: The legend items are arranged vertically.

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

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

    • Text style

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

  • Grid

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

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

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

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

    • Responsive layout: Select this check box to enable responsive layout. When cleared, the manually configured layout is used.

  • x-axis: Click the eye icon on the right to show or hide the x-axis style settings.

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

      • 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. Valid values: Start, End, and Center. Default value: End.

    • Name style

      • Color: 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 change the distance between the axis name and the axis line.

    • Name rotate: Click + or -, or enter a value to change 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 a gap at both ends of the x-axis.

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

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

      • On zero: Whether the axis line is positioned at the 0 tick mark of the other axis. Valid only if the other axis is a value axis that includes a 0 tick mark.

      • Line style

        • Color: The fill style for the axis line color. Valid values: Color Fill and Gradient Fill. For more information, see Color picker.

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

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

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

    • Tick Marks: Click the Eye icon to display the tick marks on the x-axis.

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

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

      • Line style

        • Color: The fill style for the tick color. Valid values: Color Fill and Gradient Fill. For more information, see Color picker.

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

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

        • Opacity: Click + or -, or enter a value to change the opacity of the ticks. The value must be in the range of [0,1].

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

      • Inside: Select this check box to make the axis tick labels face inward. Clear this check box to make them face outward.

      • Rotate: The rotation angle of the tick labels, from -90 to 90 degrees. Rotation can prevent labels from overlapping if they do not fit on the category axis.

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

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

      • 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 the 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 the labels overlap.

      • Color: See Color picker to change the color of the axis tick labels.

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

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

      • Line style

        • Color: See Color picker to change the color of the x-axis split line.

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

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

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

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

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

    • Trigger type: The trigger type for the tooltip. Default value: Axis.

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

      • Axis: Triggered by an axis. Mainly used for charts with a category axis, such as column charts and line charts.

      • None: Nothing is triggered.

    • Axis Pointer: Click the Eye icon to display the axis pointer.

      • Type: The pointer type. Valid values: Line, Shadow, and Cross.

      • Snap to point: Automatically snaps the axis pointer to the nearest data point. Useful for value and time axes with dense data.

      • Line style

        • Color: 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. The options are Solid, Dashed, and Dotted.

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

      • Shadow style

        • Color: 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 value must be in the range of [0,1].

      • Cross style

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

        • Type: The type of the cross indicator. The options are Solid, Dashed, and Dotted.

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

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

      • Text style

        • Color: 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: You can click the image or image icon to add or delete a conditional style. You can click the image or image icon to configure the arrangement of multiple conditional styles. You can click the image icon to copy the currently selected conditional style configuration and add a new one with the same configuration.

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

    • Symbol: The data point symbol. Default value: circle. Valid values: none, circle, rectangle, roundRect, 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 pixels (px).

    • Symbol rotate: Click + or -, or enter a value to change the symbol rotation angle in degrees.

    • Show Icon: Click the Eye icon on the right to view the icon.

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

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

    • Stepped line chart: The step style for the line chart. Valid values: Off, Start, Middle, and End.

    • Label: Click the Eye icon on the right to display the label.

      • Position: The label position relative to the data point. Values include top, left, and inside.

      • Label Distance: The distance between the label and the data point.

      • Rotate: The rotation angle of the labels, from -90 to 90 degrees. Rotation can prevent labels from overlapping if they do not fit on the category axis.

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

    • Element Style

      • Color: See Color picker to change the color of the item style.

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

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

    • Line style

      • Color: 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. The options are Solid, Dashed, and Dotted.

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

    • Area style

      • Color: 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 value must be in the range of [0,1].

    • Smoothing: Click + or -, or enter a value to change the smoothness of the line. The value is a percentage, and the range is from 0 to 1.

  • Animation: Enables animation effects for the chart.

  • Animation duration: The duration of the initial animation, in milliseconds.

  • Easing: The easing effect for the data update animation. Default value: cubicOut.

Data Source panelimage.png

Field

Description

x

The category value for each x-axis data point in the line chart.

y

The y-axis value for each data point in the line chart.

s

(Optional) The series value. 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 this widget interaction. If 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 about the configuration, see Configure widget interactions.

When a legend item is clicked

Turn on the switch to enable this widget interaction. If a legend item is clicked, a callback value is returned. By default, the selected field from the data is returned. For more information about the configuration, 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 request is complete

      Triggered after a data API request returns a response and the response is processed by a filter. The processed data is returned in JSON format. For a data example, see the Data response area on the Data Source tab in the canvas editor.

      When a data item is clicked

      Triggered when a data item in the stepped line chart is clicked. Returns the corresponding data item.

      When a legend item is clicked

      Triggered when a legend item in the stepped line chart is clicked. Returns the corresponding data item.

    • Actions

      Action

      Description

      Request data API

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

      Import data API

      Imports pre-formatted data to redraw the component without re-requesting server-side data. For a data example, see the Data Response area on the Data Source tab in the canvas editor.

      Highlight

      Accepts an object with parameters: seriesName (series name), seriesIndex (series index), dataIndex (data index), and name (data name). Specify the series by seriesName or seriesIndex. To target a specific data point, also specify dataIndex or name. Example:

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

      Remove highlight

      Accepts an object with parameters: seriesName (series name), seriesIndex (series index), dataIndex (data index), and name (data name). Specify the series by seriesName or seriesIndex. To target a specific data point, also specify dataIndex or name. Example:

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

      Show tooltip

      Accepts an object with parameters: dataindex (data index), name (data name), x (x-coordinate), and y (y-coordinate). Example:

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

      Hide tooltip

      Hides the tooltip. No parameters are required.

      Legend control

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

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

      Move

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

       {      
      // Movement method. 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 component. No parameters are required.

      Show

      Shows the component. See the following data example.

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

      Hide

      Hides the component. See the following data example.

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

      Update component configuration

      Dynamically updates the component's style configuration. In the Style panel, click Copy Configuration to Clipboard to get the configuration data, then modify the style field values in the data processing node as needed.
Previous：Echarts color-segmented line chartNext：ECharts candlestick chart