DocsICP FilingConsole
Documentation
Home Page DataV DataV User Guide Widget Guide Charts Line Chart ECharts step line chart

ECharts step line chart

Updated at:
Copy as MD
Product
My Favorites

This topic describes the style and data configuration options for the ECharts step line chart component.

Chart style

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.

  • Render engine: Sets the rendering engine for the chart. Options are canvas and svg.

  • Legend: Click the eye icon to show the legend and configure its style.图例

    • Horizontal position: Sets the horizontal alignment of the legend marker and text.

      • Automatic: The default is Automatic. The setting 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: Select Center Align when the symbol and text of the legend overlap.

      • Right align: When the graphic is to the right of the text, the alignment is Right align.

    • Vertical position: Sets the vertical alignment of the legend marker and text.

      • Automatic: The default is Automatic. The setting is determined by the position and orientation of the component.

      • Top align: When a graphic is at the top of the window, its alignment is Top align.

      • Center Align: When the graphic is in the center of the window, its alignment is Center Align.

      • Bottom align: The alignment is Bottom align when the graphic is at the bottom of the window.

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

      • Horizontal: Arranges legend items horizontally.

      • Vertical: Arranges legend items vertically.

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

    • Item Spacing: Click + or -, or manually enter a value to adjust the spacing between legend items. This value specifies the horizontal spacing in a horizontal layout and the vertical spacing in a vertical layout.

    • Text style

      • Color: See Color Picker to change the color of the legend text.

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

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

      • Font: Sets the font family of the legend text.

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

  • Grid

    • Left margin: Click the + or - sign or manually enter a value to adjust the left margin of the grid in pixels.

    • Top margin: Click + or -, or manually enter a value to adjust the top margin of the grid. The unit is px.

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

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

    • Adaptive layout: If selected, the chart uses an adaptive layout. If cleared, the chart is rendered based on the specified margin settings.

  • x-axis: Click the eye icon to show and configure the x-axis.x轴

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

      • Bottom: Places the x-axis at the bottom of the chart.

      • Top: Places the x-axis at the top of the chart.

    • Name: Sets a custom name for the x-axis.

    • Name Location: Sets the location of the axis name. Options are Start, End, and Center. The default value is End.

    • Name Style

      • Color: See Color Picker to change the color of the axis name text.

      • Font Style: Sets the font style of the axis name.

      • Font Weight: Sets the font weight of the axis name.

      • Font: Sets the font family of the axis name.

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

    • Label Spacing: Click + or -, or manually enter a value to set the distance between the axis label and the axis line.

    • Label Rotation: Click + or -, or enter a value to change the rotation angle of the axis label.

    • Inverse: When selected, renders the axis in reverse order.

    • Boundary Gap: If selected, blank space is added to both ends of the x-axis.

    • Static: When selected, makes the axis non-interactive.

    • Axis line: Click the eye icon to show and configure the x-axis line.

      • On zero: When enabled, renders the axis line at the zero-scale mark of the opposing axis. This only applies if the opposing axis is a value axis that includes zero.

      • Line style

        • Color: Selects the fill style for the axis line color, including Solid Color and Gradient. See Color Picker to change the color of the axis line.

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

        • Type: Sets the type of the axis line. Options are Solid, Dashed, and Dotted.

        • Transparency: Click + or -, or manually enter a value to modify the transparency of the x-axis line. The range is [0,1].

    • Axis tick: Click the eye icon to show and configure the axis ticks.

      • Inside: When selected, draws the axis ticks inside the axis line. By default, they are drawn outside.

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

      • Line style

        • Color: Selects the fill style for the axis tick color, including Solid Color and Gradient. See Color Picker to change the color of the axis ticks.

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

        • Type: Sets the type of the axis ticks. Options are Solid, Dashed, and Dotted.

        • Transparency: Click + or -, or manually enter a value to adjust the transparency of the axis tick. The valid range is [0, 1].

    • Axis label: Click the eye icon to show and configure the axis labels.

      • Inside: If selected, the axis labels are displayed inside the axis line. If cleared, they are displayed outside.

      • Rotation: Sets the rotation angle of the axis labels, from -90 to 90 degrees. Rotating labels can prevent them from overlapping.

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

      • Formatter: Sets the format of the axis labels. Options include Integer, 1 Decimal Place, and 2 Decimal Places. The default value is Integer.

      • Show min label: When selected, forces the minimum axis label to be displayed, even if it might overlap with other labels.

      • Show max label: When selected, forces the maximum axis label to be displayed, even if it might overlap with other labels.

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

      • Font Style: Sets the font style of the axis labels.

      • Font Weight: Sets the font weight of the axis labels.

      • Font: Sets the font family of the axis labels.

      • Font Size: Sets the font size of the axis labels.

    • Split line: Click the eye icon to show and configure the split lines.

      • Line style

        • Color: See Color Picker to change the color of the x-axis split lines.

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

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

        • Transparency: Click + or -, or manually enter a value to modify the transparency of the x-axis split line. The valid range is [0, 1].

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

  • Tooltip: Click the eye icon to show and configure the tooltip.提示框

    • Trigger type: Sets how the tooltip is triggered. The default is Axis.

      • Item: Triggers when hovering over a data item. Primarily used for charts without a category axis, like scatter plots and pie charts.

      • Axis: Triggered by hovering over an axis. This is mainly used for charts with a category axis, such as bar charts and line charts.

      • None: Tooltip is not triggered.

    • Axis pointer: Click the eye icon to show and configure the axis pointer.

      • Type: Sets the pointer type. Options are Line, Shadow, and Cross.

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

      • Line style

        • Color: See Color Picker to change the color of the pointer line.

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

        • Type: Sets the type of the pointer line. Options are Solid, Dashed, and Dotted.

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

      • Shadow Style

        • Color: See Color Picker to change the color of the pointer shadow.

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

      • Cross Style

        • Color: See Color Picker to change the color of the crosshair pointer.

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

        • Type: Sets the type of the crosshair pointer line. Options are Solid, Dashed, and Dotted.

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

      • Background color: Sets the background color of the tooltip.

      • Text style

        • Color: See Color Picker to change the color of the tooltip text.

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

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

        • Font: Sets the font family of the tooltip text.

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

  • Series: Click the 加号图标 or 垃圾桶图标 icon to add or delete a series. Click the 横排列图标 or 竖排列图标 icon to reorder a series. Click the 复制图标 icon to duplicate the currently selected series.系列

    • Name: Sets a custom name for the series. This name must match the value of the s field in your data.

    • Marker symbol: Sets the symbol for the series markers. The default is Circle. Symbol types include None, Circle, Rectangle, Rounded Rectangle, Triangle, Diamond, Pin, and Arrow. For more information, see the ECharts documentation.

    • Marker size: Click + or -, or manually enter a value to change the marker size. The unit is px.

    • Marker rotation angle: Click + or -, or manually enter a value. The unit is degrees.

    • Show symbol: Click the eye icon to show or hide the marker symbols.

    • Hover animation: If selected, enables animation effects when you hover over the chart.

    • Legend highlight link: If selected, hovering over a legend item highlights the corresponding series.

    • Step: Sets the style of the step line chart. Options are Off, Current Point, Midpoint, and Next Point.

    • Label: Click the eye icon to show and configure label styles.

      • Position: Sets the position of the label relative to the data point, such as top, left, and inside.

      • Distance: Sets the distance of the label from the data point.

      • Rotation: Sets the rotation angle of the labels from -90 to 90 degrees. Rotating labels can prevent them from overlapping.

      • Color: See Color Picker to change the color of the label text.

      • Font Style: Sets the font style of the label text.

      • Font Weight: Sets the font weight of the label text.

      • Font: Sets the font family of the label text.

      • Font Size: Sets the font size of the label text.

    • Item Style

      • Color: See Color Picker to change the item color.

      • Bar Corner Radius: Click + or -, or manually enter a value to change the corner radius of the bars.

      • Transparency: Click + or -, or manually enter a value to adjust the transparency of the crosshair. The range is [0, 1].

    • Line Style

      • Color: See Color Picker to change the color of the line.

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

      • Type: Sets the type of the line. Options are Solid, Dashed, and Dotted.

      • Transparency: Click + or -, or manually enter a value in the range of [0, 1] to modify the transparency of the line.

    • Area Style

      • Color: See Color Picker to change the color of the area fill.

      • Transparency: Click + or -, or manually enter a value to change the transparency of the intersecting area. The valid range is [0, 1].

    • Smoothness: Click + or -, or manually enter a value to modify the smoothness of the line. The value is a percentage in the range of [0, 1].

  • Animation: If selected, enables animation effects when the chart is rendered.

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

  • Animation easing: Selects the animation easing effect for data updates. The default is cubicOut.

Data panel

image

Configuration fields

Field

Description

x

The category for each point on the x-axis.

y

The value for each point on the line chart.

s

(Optional) The series identifier. This value corresponds to the Name setting for a series in the configuration panel.

Parameter

Description

Controlled mode

When enabled, the component does not request data on initialization. Instead, you must trigger data requests using a callback ID or a method in the Blueprint Editor. When disabled, data can be requested automatically using the auto-update feature. This option is disabled by default.

Auto update request

If selected, you can set a polling interval for automatic data updates. If cleared, data is not updated automatically. You must manually refresh the page or trigger a data request through the Blueprint Editor or a callback ID event.

Data source

Click Configure Data Source to open the Set Data Source panel, where you can change the data source type, modify the data query code, preview the returned data, and view the data response. For more information, see Configure Asset Data.

Data filter

A data filter transforms, filters, or performs simple calculations on your data. Click Add Filter to configure a data filter script in the Set Data Source panel. For more information, see Use Data Filters.

Data response result

Displays the response from the data request. If the data source changes, click the 刷新图标 icon on the right to view the live data response.

Interaction panel

image

Interaction

Interaction

Description

On item click

Select Enable to enable component interactions. The Step Line Chart component has interaction configurations. When you click a data item, the component returns a callback value. By default, the component returns the x and y fields from the data. For more information, see Component Callback ID Configuration.

On legend click

Select Enable to activate component interactions. The Step line chart component has interaction configurations. When you click a legend, the component returns a callback value. By default, this value is the selected field from the data. For more information, see Component Callback ID Configuration.

Blueprint Editor interactions

  1. In the canvas editor, right-click the component and select Export to Blueprint Editor.

  2. Click the 蓝图图标 icon in the upper-left corner of the page.

  3. In the Blueprint Editor, click the step line chart component in the Imported Nodes panel. The configuration parameters for the component are displayed on the canvas as shown in the following figure.蓝图

    • Events

      Event

      Description

      On data fetched

      This event is emitted after the data API request is completed and the data has been processed by the data filter. The processed data is also emitted in JSON format. For a data sample, see the Data response result section on the Data tab of the component's configuration panel.

      On fetch failed

      This event is thrown when a data interface request fails, for example, due to network issues or an interface error. The event is triggered after the response is processed by a filter and includes the processed data in JSON format. For a data example, see the Data Response Result area on the Data tab of the component's configuration panel in the canvas editor.

      On item click

      This event is emitted when a data point on the step line chart is clicked. The corresponding data item is also emitted.

      On legend click

      This event is emitted when a legend item on the step line chart is clicked. The corresponding data item is also emitted.

    • Actions

      Actions

      Description

      Request data

      Triggers a new data request. This action passes data from upstream nodes as URL parameters. For example, if the component's API data source is set to https://api.test and the data passed to the Request data action is { id: '1'}, the final request URL is https://api.test?id=1.

      Import data

      Processes data according to the component's required format and imports it to redraw the component. This action does not re-request data from the server. For a data sample, see the Data response result section on the Data tab of the component's configuration panel.

      Highlight

      The data passed to the action is an object whose parameters include seriesName (series name), seriesIndex (series index), dataIndex (data index), and name (data name). Example data:

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

      Downplay

      The input data for the action is an object whose parameters include seriesName (series name), seriesIndex (series index), dataIndex (data index), and name (data name). Data example:

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

      Show tooltip

      The input data for the action is an object whose parameters include dataindex (data index), name (data name), x (x-coordinate), and y (y-coordinate). Example data:

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

      Hide tooltip

      Hides the tooltip. No parameters are required.

      Legend control

      The data passed to the action is an object. The parameters include type (legend action type) and name (legend name). Example:

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

      Update component options

      Dynamically updates the component's style configuration. You can pass an object containing updated style properties. To get the current configuration structure, click Copy Options to Clipboard in the component's configuration panel and use it as a template in a data processing node.

      Show

      Shows the component. Sample data:

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

      Hide

      Hides the component. Sample data:

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

      Toggle visibility

      Toggles the visibility of the component. Sample data:

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

      Move

      Moves the component to a new position, either absolutely (to) or relatively (by). An optional animation can be configured. Example:

          return{      
      // Movement type. 'to' for absolute positioning, 'by' for relative positioning. Default: 'to'.
        "positionType": "to",
      // Target position specified by x and y coordinates.
      "attr": {
        "x": 0,
        "y": 0
      },
      // Animation settings.
      "animation": {
        "enable": false,
        // Animation duration in ms.
        "animationDuration": 1000,
        // Easing curve. Options: 'linear', 'easeInOutQuad', 'easeInOutExpo'.
        "animationEasing": "linear"
      }
    }
Previous：Echarts stacked line chartNext：ECharts color-segmented line chart