DocsICP FilingConsole
官方文档
首页

Echarts Continuous Line Chart

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

Configure the style and data settings of ECharts continuous line charts.

Chart style

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 widget, in pixels. Click the Proportional resizing icon to lock proportional resizing. Click the icon again to adjust the width and height independently.

  • Position: the pixel X and Y coordinates of the widget. X-coordinate is the pixel distance between the upper-left corner of the widget and the left edge of the canvas. Y-coordinate is the pixel distance between the upper-left corner of the widget and the top edge of the canvas.

  • Rotation Angle: the rotation angle of the widget around its center point, in degrees (°). You can control the rotation angle by using one of the following methods:

    • Enter the degrees directly in the Rotation Angle spin box, or click the plus sign (+) or minus sign (-) to adjust the value.

    • 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 the widget. Valid values: 0 and 1. A value of 0 hides the widget. A value of 1 makes the widget fully visible. Default value: 1.

  • Rendering Engine: the rendering engine for the line chart. Select canvas or svg.

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

    • Horizontal Position: Select the alignment of legend markers and text from the dropdown list.

      • Auto: automatically determined by the widget's position and orientation.

      • Align Left: places the graphic on the left side of the text.

      • Align Center: centers the graphic over the text. Useful when the legend graphic overlaps with the text.

      • Align Right: places the graphic on the right side of the text.

    • Vertical Position: Select the vertical alignment of legend markers and text from the dropdown list.

      • Auto: automatically determined by the widget's position and orientation.

      • Align Top: aligns the graphic with the top of the window.

      • Align Center: positions the graphic at the vertical center of the window.

      • Align Bottom: aligns the graphic with the bottom of the window.

    • Orientation: the layout orientation of the legend.

      • Horizontal: arranges legend items horizontally.

      • Vertical: arranges legend items vertically.

    • Padding: the legend padding, in pixels. Default padding is 5 in all directions. Click + or -, or enter a value manually.

    • Element Spacing: the distance between legend items. The spacing is horizontal in a horizontal layout and vertical in a vertical layout. Click + or -, or enter a value manually.

    • Text Style

      • Color: Modify the color of the legend text using 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: Change the font size of the legend by clicking the + or - sign, or by entering a value manually.

  • Grid: Click the icon on the right 箭头 to customize the grid style.

    • Left Margin: Adjust the left margin of the grid by clicking the + or - sign, or by entering a value manually. The unit is pixels.

    • Top Margin: Adjust the top margin of the grid by clicking the + or - sign, or by entering a value manually. The unit is pixels.

    • Right Margin: Adjust the right margin of the grid by clicking the + or - sign, or by entering a value manually. The unit is pixels.

    • Bottom Margin: Adjust the bottom margin of the grid by clicking the + or - sign, or by entering a value manually. The unit is pixels.

  • X-axis: Click the image.png icon to access the x-axis style options.

    • Position: Set the x-axis position within the window.

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

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

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

    • Name Position: the position of the x-axis name. Options: Start, End, or Center. Default: End.

    • Name Style

      • Color: Modify the x-axis name text color using the color picker.

      • Font Style: The style of the x-axis name's font.

      • Font Weight: The weight of the x-axis name's font.

      • Font: The font family used for the x-axis name.

      • Font Size: Adjust the font size of the x-axis name by clicking the + or - sign, or by entering a value manually.

    • Name Interval: Adjust the distance between the axis name and the axis line by clicking the + or - sign, or by entering a value manually.

    • Name Rotation: Modify the rotation angle of the axis name by clicking the + or - sign, or by entering a value manually.

    • Reverse: reverses the axis direction. Deselect to display the axis in normal order.

    • Minimum Value: the minimum value of the axis scale. The default Auto setting uses the minimum data value on this axis. If not set, the minimum value is automatically calculated to ensure even distribution of axis scales.

    • Maximum Value: the maximum value of the axis scale. The default Auto setting uses the maximum data value on this axis. If not set, the maximum value is automatically calculated to ensure even distribution of axis scales.

    • Auto Scale: prevents the axis scale from forcibly including zero. Only effective on value axes and invalid after the maximum and minimum values are set.

    • Segments: the estimated number of axis segments. The actual number may be adjusted for readability. This setting is invalid on category axes. Click + or -, or enter a value manually.

    • Minimum Interval Size: the minimum interval size of the axis. For example, setting this to 1 ensures integer axis scales. Only effective on value axes or timelines. Click + or -, or enter a value manually.

    • Maximum Interval Size: the maximum interval size of the axis. For example, setting it to 500 ensures that the axis scale is displayed as an integer. Only effective on value axes or timelines. Click + or -, or enter a value manually.

    • Static: makes the axis static and non-interactive.

    • Axis Line: Click the icon on the right image.png to customize the x-axis line.

      • On Zero: specifies whether the x-axis or y-axis line is on the 0 scale of the other axis. Only effective when the other axis is a value axis that contains the 0 scale.

      • Line Style

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

        • Width: Adjust the width of the x-axis line by clicking the + or - sign, or by entering a value manually.

        • Type: Choose the type of the axis line from options such as Solid Line, Dashed Line, or Dotted Line.

        • Transparency: Adjust the transparency of the x-axis line by clicking the + or - sign, or by entering a value manually. The range is [0,1].

    • Tick Line: Click the icon on the right image.png to access the x-axis tick options.

      • Inside: orients axis ticks inward. Deselect to orient them outward.

      • Length: Adjust the length of the axis tick by clicking the + or - sign, or by entering a value manually.

      • Line Style

        • Color: Modify the color of the tick line using the color picker.

        • Width: Adjust the width of the tick line by clicking the + or - sign, or by entering a value manually.

        • Type: Choose the type of the tick line from options such as Solid Line, Dashed Line, or Dotted Line.

        • Transparency: Adjust the transparency of the tick line by clicking the + or - sign, or by entering a value manually. The range is [0,1].

    • Tick Label: Click the icon on the right image.png to customize the x-axis tick label.

      • Inside: orients tick labels inward. Deselect to orient them outward.

      • Rotate: the rotation angle of the tick label, ranging from -90 to 90 degrees. Rotate labels to prevent overlapping on the category axis.

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

      • Formatter: the format of the tick label. Options: Integer, 1 Decimal Place, and 2 Decimal Places. Default: Integer.

      • Show Minimum Label: displays the minimum tick label. By default, the label is automatically hidden if it overlaps with other labels.

      • Show Maximum Label: displays the maximum tick label. By default, the label is automatically hidden if it overlaps with other labels.

      • Color: Use the color picker to change the color of the axis tick label.

      • Font Style: The style of the axis tick label's font.

      • Font Weight: The weight of the axis tick label's font.

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

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

    • Line Separator: Click the icon on the right image.png to customize the line separator.

      • Line Style

        • Color: Use the color picker to change the color of the x-axis line separator.

        • Width: Adjust the width of the x-axis line separator by clicking the + or - sign, or by entering a value manually.

        • Type: Select the type of the x-axis line separator from options such as Solid Line, Dashed Line, or Dotted Line.

        • Transparency: Adjust the transparency of the x-axis line separator by clicking the + or - sign, or by entering a value manually. The range is [0,1].

  • Y-axis: Refer to the X-axis configuration for style options.

  • Tooltip: Click the icon on the right image.png to customize the tooltip.

    • Trigger Type: the trigger type for the tooltip. Default: Axis.

      • Data Item: triggers on data item graphics. Mainly used in scatter charts, pie charts, and other charts without category axes.

      • Axis: triggers on axis. Mainly used in column charts, line charts, and other charts with category axes.

      • No Trigger: disables the tooltip trigger.

    • Axis Pointer: Click the icon on the right image.png to customize the axis pointer.

      • Type: Select the type of pointer, with options such as Line Pointer, Shade Pointer, and Cross Pointer.

      • Auto Snap: automatically aligns the axis pointer to the nearest data point. Useful on value axes and timelines to highlight small value points.

      • Pointer Line Style

        • Color: Change the color of the pointer line using the color picker.

        • Width: Adjust the width of the pointer line by clicking the + or - sign, or by entering a value manually.

        • Type: Choose the type of the pointer line from options such as Solid Line, Dashed Line, and Dotted Line.

        • Transparency: Modify the transparency of the pointer line by clicking the + or - sign, or by entering a value manually. The range is [0,1].

      • Pointer Shade Style

        • Color: Change the color of the pointer shade using the color picker.

        • Transparency: Adjust the transparency of the pointer shade by clicking the + or - sign, or by entering a value manually. The range is [0,1].

      • Pointer Cross Style

        • Color: Use the color picker to modify the color of the pointer cross.

        • Width: Adjust the width of the pointer cross by clicking the + or - sign, or by entering a value manually.

        • Type: Select the type of the pointer cross from options such as Solid Line, Dashed Line, and Dotted Line.

        • Transparency: Modify the transparency of the pointer cross by clicking the + or - sign, or by entering a value manually. The range is [0,1].

      • Background Color: Set the background color for the tooltip text label.

      • Text Style

        • Color: Change the color of the tooltip label text using the color picker.

        • Font Style: The style of the tooltip text's font.

        • Font Weight: The weight of the tooltip label text's font.

        • Font: The font family for the tooltip label text.

        • Font Size: The font size of the tooltip label text.

  • Edition: To add or remove a conditional style, click the icon on the right image or image. To configure the arrangement of multiple conditional styles, click image or image. To copy and add a new conditional style with the same configuration as the currently selected one, click image.

    • Name: the edition name, used with the s field value in the dataset.

    • Marker Graphic: the marker shape. Default: Circle. Options: None, Circle, Rectangle, Rounded Rectangle, Triangle, Diamond, Pin, and Arrow. For more information, see ECharts official website.

    • Marker Size: Adjust the marker size by clicking the + or - sign, or by entering a value manually. The unit is pixels (px).

    • Marker Rotation Angle: Adjust the marker rotation angle by clicking the + or - sign, or by entering a value manually. The unit is degrees.

    • Show Icon: To view the icon style, click the icon on the right image.png.

    • Hover Animation: enables the hover animation effect.

    • Legend Filter Interaction Highlight: enables the filter interaction highlight for the legend.

    • Step Line Chart: the step style for the line chart. Options: Off, Turn At Current Point, Turn At Middle Point, and Turn At Next Point.

    • Tag: To view the tag style, click the icon image.png on the right.

      • Position: Specify the tag's position in relation to the line chart, which can include options such as top, left, or inside.

      • Positioning Distance: Adjust the tag's distance from the line chart's top border.

      • Rotate: Set the tag's rotation angle to avoid overlap between tags, especially when category labels on the category axis are not clearly displayed. The angle can range from -90 to 90 degrees.

      • Color: Use the color picker to select a new color for the tag text.

      • Font Style: Choose the style for the tag text's font.

      • Font Weight: Select the weight of the tag text's font.

      • Font: Determine the font family for the tag text.

      • Font Size: Set the size of the tag text's font.

    • Element Style

      • Color: Use the color picker to change the style color of the element.

      • Transparency: Adjust the transparency of the pointer cross by clicking the + or - sign, or by entering a value manually within the range of [0,1].

    • Line Style

      • Color: Use the color picker to change the line color.

      • Width: Adjust the line width by clicking the + or - signs, or by entering a value directly.

      • Type: Choose the line type from the following options: Solid Line, Dashed Line, or Dotted Line.

      • Transparency: Modify the line's transparency by clicking the + or - signs, or by inputting a value within the range of [0,1].

    • Area Style Settings

      • Color: Use the color picker to change the area style's color.

      • Transparency: Adjust transparency by clicking the + or - signs, or by entering a value directly. Valid values range from 0 to 1.

    • Smooth Curve: Adjust the smoothness of the curve by clicking the + or - sign, or by entering a value manually. The unit is percentage (%), with a range from 0 to 1.

  • Animation: enables the animation effect.

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

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

Data source panelimage.png

Field

Description

x

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

y

The value for each data point on the line chart.

s

(Optional) The edition value, used with the Edition configuration 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 Clicking On A Data Item

Enable widget interaction. Clicking a data item triggers a callback with the x, y, and s data fields. For details, see widget interaction configuration.

When Clicking On A Legend

Enable interaction when a legend is clicked, which triggers a callback with the selected field. For details, see widget interaction configuration.

Blueprint interaction

  1. To access the Blueprint page, click the icon in the upper left corner of the page image.

  2. In the Layer Node tab, add the current widget to the main canvas.

  3. Review the blueprint configuration parameters. image.png

    • Event

      Event

      Description

      When The Data Interface Request Is Completed

      Triggered after the data interface request returns and is processed by the filter. The processed JSON data is also emitted. For data examples, see the Data Source tab and the Data Response Result area in the configuration panel on the right side of the widget in the canvas editor.

      When Clicking On A Data Item

      Triggered when a data item in the continuous line chart is clicked. The corresponding data item is also emitted.

      When Clicking On A Legend

      Triggered when a legend in the continuous line chart is clicked. The corresponding data item is also emitted.

    • Action

      Action

      Description

      Request Data Interface

      Re-requests server-side data using data from the upstream data processing node or layer node as parameters. For example, if the continuous line chart uses an API data source such as https://api.test, and the data passed to Request Data Interface is { id: '1'}, the final request URL becomes https://api.test?id=1.

      Import Data Interface

      Imports data to redraw the widget without re-requesting server-side data. For data examples, see the Data Source tab and the Data Response Result area in the configuration panel on the right side of the widget in the canvas editor.

      Highlight

      Requires object-type input data. Parameters: seriesName (edition name), seriesIndex (edition index), dataIndex (data index), and name (data name). Specify the edition through seriesName or seriesIndex. To target a specific data point, also specify dataIndex or name. See the data example.

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

      Cancel Highlight

      Requires object-type input data. Parameters: seriesName (edition name), seriesIndex (edition index), dataIndex (data index), and name (data name). Specify the edition through seriesName or seriesIndex. To target a specific data point, also specify dataIndex or name. See the data example.

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

      Show Tooltip

      Requires object-type input data. Parameters: dataindex (data index), name (data name), x (horizontal coordinate position), and y (vertical coordinate position). See the data example.

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

      Hide Tooltip

      Hides the tooltip. No parameters are required.

      Legend Control

      Requires object-type input data. Parameters: type (legend action type) and name (legend name). See the data example.

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

      Shift

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

       {      
      // Movement type. Absolute positioning: to, relative positioning: by. Default value: to.
        "positionType": "to",
      // Specified position. x-coordinate, y-coordinate.
      "attr": {
        "x": 0,
        "y": 0
      },
      // Animation type.
      "animation": {
        "enable": false,
        // Animation delay.
        "animationDuration": 1000,
        // Animation curve. Optional values are: linear|easeInOutQuad|easeInOutExpo.
        "animationEasing": "linear"
      }
    }

      Switch Visibility

      Toggles the widget's visibility. No parameters are required.

      Show

      Shows the widget. See the data example.

      {
  "animationType": "",//Animation type. Optional value: fade. No animation if not filled.
  "animationDuration": 1000,//Animation delay. Unit is ms.
  "animationEasing": ""//Animation curve
}

      Hide

      Hides the widget. See the data example.

      {
  "animationType": "",//Animation type. Optional value: fade. No animation if not filled.
  "animationDuration": 1000,//Animation delay. Unit is ms.
  "animationEasing": ""//Animation curve
}

      Update Widget Configuration

      Dynamically updates the widget's style configuration. To obtain the configuration data, click Copy Configuration To Clipboard in the Style panel. Then modify the field values in the data processing node on the blueprint editor configuration page as needed.
Previous：Echarts-widgetsNext：Echarts Stacked Line Chart