DocsICP FilingConsole
官方文档
首页

ECharts basic line chart

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

Configure the style, data source, and interaction settings for an ECharts basic line chart widget.

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.

  • Rendering engine: Specifies the rendering engine for the line chart, which can be canvas or SVG.

  • Legend: Click the image.png icon to display the legend style settings.

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

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

      • Align left: If the symbol is to the left of the text, the alignment is Align left.

      • Align center: The alignment is Align center if the legend symbol and text overlap.

      • Align right: Aligns the symbol to the right of the text, setting the alignment to Align right.

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

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

      • Top Align: When the graph is at the top of the window, the alignment is Top Align.

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

      • Bottom: Sets the alignment to Bottom, which aligns the symbol to the bottom of the window.

    • Orientation: Sets 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 padding of the legend in pixels. The default value is 5 for all sides.

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

    • Text style

      • Color: Changes the color of the legend text. Color picker.

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

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

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

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

  • Grid: Click the arrow icon to display the grid style settings.

    • Left margin: You can click + or -, or enter a value to adjust the left margin of the grid in pixels.

    • Top margin: You can 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: Click + or -, or enter a value to set the bottom margin of the grid in pixels.

  • x-axis: Click the image.png icon to display the x-axis style settings.

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

      • Bottom: The x-axis is at the bottom of the chart area.

      • Top: The x-axis is at the top of the chart area.

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

    • Name location: Specifies the position of the x-axis name. The options are Start, End, or Center. The default value is End.

    • Name style

      • Color: Changes the color of the x-axis name text. 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: 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 name.

    • Name gap: Click + or -, or enter a value to adjust the gap between the axis name and the axis line.

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

    • Inverse: Reverses the axis direction when selected.

    • Boundary gap: Adds a gap to both ends of the axis when selected.

    • Static: Makes the axis static and non-interactive when selected.

    • Axis line: Click the image.png icon to display the x-axis line settings.

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

      • Line style

        • Color: Changes the color of the x-axis line. Color picker.

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

        • Type: The line type of the axis. 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 between 0 and 1.

    • Tick line: Click the image.png icon to display the x-axis tick settings.

      • Inside: Points axis ticks inward when selected; outward when cleared.

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

      • Line style

        • Color: Changes the color of the tick lines. Color picker.

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

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

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

    • Tick label: Click the image.png icon to display the x-axis tick label settings.

      • Inside: Positions tick labels inside the axis when selected; outside when cleared.

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

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

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

      • Show min label: If you select this option, the minimum tick label is displayed. By default, this is determined automatically. The minimum tick label is not displayed if it overlaps with other labels.

      • Show max label: If you select this option, the maximum tick label is displayed. By default, this is determined automatically. The maximum tick label is not displayed if it overlaps with other labels.

      • Color: Changes the color of the axis tick labels. Color picker.

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

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

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

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

    • Split line: Click the image.png icon to display the split line settings.

      • Line style

        • Color: Changes the color of the x-axis split lines. Color picker.

        • Width: Adjust the width of the x-axis split lines by clicking + or -, or by entering a value.

        • Type: The style of the x-axis split lines. You can select Solid, Dashed, or Dotted.

        • Opacity: Sets the opacity of the x-axis split lines. Click + or -, or enter a value between 0 and 1.

  • y-axis: Configures the style of the y-axis. The settings are the same as those for the x-axis.

  • Tooltip: Click the image.png icon to display the tooltip settings.

    • Trigger type: The type of trigger. The default value is Axis.

      • Item: The tooltip is triggered by a data item. This is mainly used for charts without a category axis, such as scatter charts and pie charts.

      • Axis: The tooltip is triggered by an axis. This is mainly used for charts that use a category axis, such as column charts and line charts.

      • No Trigger: Does not trigger any action.

    • Axis pointer: Click the image.png icon to display the axis pointer settings.

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

      • Snap to point: Snaps the axis pointer to the nearest data point when selected. Useful for value and time axes.

      • Line style

        • Color: Changes the color of the pointer line. Color picker.

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

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

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

      • Shadow style

        • Color: Changes the color of the pointer shadow. Color picker.

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

      • Cross style

        • Color: Changes the color of the cross pointer. Color picker.

        • Width: Enter a value, or click + or - to adjust the width of the cross-pointer line.

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

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

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

      • Text style

        • Color: Changes the color of the tooltip label text. Color picker.

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

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

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

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

  • Series: Click the image or image icon to add or delete a conditional style. Click the image or image icon to configure the arrangement of multiple conditional styles. Click the image icon to copy the current conditional style configuration and add a new one with the same settings.

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

    • Symbol: Specifies the custom symbol to display. Available symbols include None, Circle, Rectangle, Rounded rectangle, Triangle, Diamond, Pin, and Arrow. The default is Circle. official ECharts website.

    • Symbol size: Click + or -, or enter a value to change the symbol size in pixels.

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

    • Show symbol: Click the image.png icon to display the symbol style settings.

    • Hover animation: Enables animation on mouse hover when selected.

    • Legend hover link: Enables linked highlighting when hovering over legend items.

    • Step: Specifies the step style for the line chart. The options are Off, Start, Middle, and End.

    • Label: Click the image.png icon to display the label style settings.

      • Position: Specifies the position of the label relative to the line chart. Options include top, left, and inside.

      • Positioning distance: Sets the distance of the label from the graphic element.

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

      • Color: Changes the color of the label text. Color picker.

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

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

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

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

    • Item style

      • Color: Changes the color of the item style. Color picker.

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

    • Line style

      • Color: Changes the color of the line. Color picker.

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

      • Type: The line type. Options: Solid, Dashed, and Dotted.

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

    • Area style

      • Color: Changes the color of the area style. Color picker.

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

    • Smoothing: Click + or -, or enter a value to adjust the line smoothness. The value is a decimal from 0 to 1 that represents the smoothing percentage.

  • Animation: Enables chart animation when selected.

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

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

Data Source pane

Field

Description

x

The x-axis category value for each data item.

y

The y-axis value of each data point.

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

Turn on this switch to enable widget interaction. When a data item is clicked, 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 this switch to enable widget interaction. When a legend item is clicked, 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, add the current widget to the main canvas.

  3. View the blueprint configuration parameters.image.png

    • Events

      Event

      Description

      When data request is complete

      This event is triggered after the filter processes a data API response. The event provides the processed data in JSON format. For an example of the data, see the Data response area on the Data Source tab of the widget's configuration pane in the canvas editor.

      When a data item is clicked

      An event that is triggered when you click a data item in the basic line chart. The corresponding data item is also returned.

      When a legend item is clicked

      An event that is triggered when you click a legend item in the basic line chart. The corresponding data item is also returned.

    • Actions

      Action

      Description

      Request data API

      Requests data from the server-side again. Data from input data processing nodes or layer nodes is used as a parameter. For example, if a basic line 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 in the component's rendering format, then imports it into the component to re-render. This action does not require another request to the server-side. For a data example, see the Data Response area on the Data Source tab in the component's configuration panel in the canvas editor.

      Highlight

      The input data is an object with the following parameters: seriesName (series name), seriesIndex (series index), dataIndex (data index), and name (data name). Use `seriesName` or `seriesIndex` to specify a series. To specify a particular data point, also provide `dataIndex` or `name`. See the following data example.

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

      Remove highlight

      The input data is an object with the following parameters: seriesName (series name), seriesIndex (series index), dataIndex (data index), and name (data name). Use `seriesName` or `seriesIndex` to specify a series. To specify a particular data point, also provide `dataIndex` or `name`. See the following data example.

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

      Show tooltip

      The input data is an object with the following parameters: 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.

      Control legend

      The input data is an object with the following parameters: type (legend action type) and name (legend name). See the following data example.

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

      Move

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

       {      
      // The movement type. 'to' for absolute positioning, 'by' for relative positioning. Default value: to.
        "positionType": "to",
      // The specified position. x-coordinate and 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, or easeInOutExpo.
        "animationEasing": "linear"
      }
    }

      Toggle visibility

      Toggles the component between visible and hidden. No parameters are required.

      Show

      Shows the component. See the following data example.

      {
  "animationType": "",// The animation method. Optional value: fade. If left blank, there is no animation.
  "animationDuration": 1000,// The animation delay in milliseconds (ms).
  "animationEasing": ""// The animation curve.
}

      Hide

      Hides the component. See the following data example.

      {
  "animationType": "",// The animation method. Optional value: fade. If left blank, there is no animation.
  "animationDuration": 1000,// The animation delay in milliseconds (ms).
  "animationEasing": ""// The animation curve.
}

      Update component configuration

      Updates the style configuration of the component dynamically. First, click Copy Configuration to Clipboard in the component's Style panel to get the configuration data. Then, go to the data processing node on the Blueprint Editor's configuration page and change the field values for the styles as needed.
Previous：ECharts 24-hour line chartNext：Echarts funnel chart