Echarts continuous line chart

Chart style

Configuration panel

• 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 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 icon.
  • Click the icon to horizontally flip a widget.
  • Click the 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.

• Rendering Engine: The rendering engine for the line chart. You can select canvas or svg.

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

  • Horizontal Position: Select the horizontal alignment for the legend markers and text from the drop-down list.

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

    • Align Left: Places the legend icon to the left of the text.

    • Align Center: Aligns the legend to the center if its icon and text overlap.

    • Align Right: Places the legend icon to the right of the text.

  • Vertical Position: Select the vertical alignment for the legend markers and text from the drop-down list.

    • Auto: The default setting is Auto, which determines the alignment based on the widget's position and orientation.

    • Top Snap: Snaps the legend to the top of the window.

    • Align Center: The graph is Center-aligned in the window.

    • Bottom Snap: Snaps the legend to the bottom of the window.

  • Orientation: Select the layout orientation of the legend from the drop-down list.

    • 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 distance between legend items. The gap is horizontal for horizontal layouts and vertical for vertical layouts.

  • Text Style

    • Color: Changes the color of the legend text. For more information, see Color picker.

    • 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 enter a value to adjust the legend font size.

• Grid: Click the icon to configure the grid style.

  • Left Margin: Click + or -, or enter a value in pixels to set the margin for the grid.

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

  • Right Margin: Click + or -, 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.

• x-axis: Click the eye icon on the right to display the style settings for the x-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: Sets a custom name for the x-axis.

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

  • Name Style

    • Color: Changes the color of the x-axis name text. For more information, see Color picker.

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

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

    • Font: Sets 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 Rotate: Enter a value or click + or - to rotate the axis name.

  • Inverse: Reverses the axis direction when selected.

  • Minimum: The minimum value of the axis. The default is Auto, which automatically calculates a minimum value from the data to ensure that the axis ticks are evenly distributed.

  • Maximum: The maximum value of the axis. The default is Auto, which automatically calculates a maximum value based on the data to ensure that the axis ticks are evenly distributed.

  • Scale: If you select this option, the axis scale is not forced to include 0. This is valid only for value axes. This setting has no effect if you set a maximum and a minimum value.

  • Split Number: Click + or -, or enter a value to set the number of segments for the axis. If you do not set a value, a minimum number of segments is automatically calculated to ensure that the axis ticks are evenly distributed. Note that this setting is an estimate, and the final number of segments is adjusted based on the readability of the axis ticks. This setting does not apply to category axes.

  • Min Interval: Click + or -, or enter a value to set the minimum interval for the axis. For example, you can set the interval to 1 to ensure that the axis ticks are integers. This setting applies only to value or time axes.

  • Max Interval: Click + or -, or enter a value to set the maximum interval for the axis. For example, you can set the value to 500 to ensure that the axis ticks are integers. This setting applies only to value or time axes.

  • Static: If you select this option, the axis becomes static and non-interactive.

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

    • On Zero: Places the x-axis or y-axis line on the 0 tick of the other axis. Valid only when the other axis is a value axis and contains a 0 tick.

    • Line Style

      • Color: Changes the color of the x-axis line. For more information, see Color picker.

      • Width: Enter a value or click + or - to change the width of the x-axis line.

      • Type: The axis line type. Valid values: Solid line, Dashed line, and Dotted line.

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

  • Axis Tick: Click the eye icon to display the x-axis ticks.

    • Inside: If you select this option, the axis ticks point inward. If you deselect this option, they point outward.

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

    • Line Style

      • Color: Changes the color of the tick lines. For more information, see Color picker.

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

      • Type: The tick line style: Solid line, Dashed line, or Dotted line.

      • Opacity: Click + or -, or enter a value between 0 and 1 to change the opacity of the tick lines.

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

    • Inside: If you select this option, the axis labels are placed inside the axis. If you deselect this option, they are placed outside.

    • Rotate: Sets the rotation angle of the labels. On a category axis, you can rotate labels to prevent them from overlapping. The angle can be from -90 to 90 degrees.

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

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

    • Show Min Label: If you select this option, the minimum tick label is always shown. By default, this is determined automatically. If labels overlap, the minimum tick label might not be shown.

    • Show Max Label: If you select this option, the maximum tick label is always shown. By default, this is determined automatically. If labels overlap, the maximum tick label might not be shown.

    • Color: Changes the color of the axis labels. For more information, see Color picker.

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

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

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

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

  • Line Separator: Click the eye icon on the right to display the line separators.

    • Line Style

      • Color: Changes the color of the x-axis line separators. For more information, see Color picker.

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

      • Type: The line separator type: Solid line, Dashed line, or Dotted line.

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

• y-axis: The y-axis is configured in the same way as the x-axis.

• Tooltip: Click the eye icon on the right to display the tooltip.

  • Trigger: The trigger type. This parameter is optional. 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 with a category axis, such as column charts and line charts.

    • No Trigger: No action is triggered.

  • Axis Pointer: Click the eye icon to show or hide the axis pointer.

    • Type: The pointer type. The options are Line indicator, Shadow indicator, and Cross indicator.

    • Snap: If you select this option, the axis pointer automatically snaps to points. This is useful on value and time axes for finding small data points.

    • Indicator Line Style

      • Color: Changes the color of the indicator line. For more information, see Color picker.

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

      • Type: The indicator line type. Available types: Solid line, Dashed line, and Dotted line.

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

    • Indicator Shadow Style

      • Color: Changes the color of the indicator shadow. For more information, see Color picker.

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

    • Indicator Cross Style

      • Color: Changes the color of the indicator cross. For more information, see Color picker.

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

      • Type: The indicator cross line style: Solid line, Dashed line, and Dotted line.

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

    • Background Color: Sets the background color of the tooltip text label.

    • Text Style

      • Color: Changes the color of the tooltip label text. For more information, see Color picker.

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

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

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

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

• Series: You can click the or icon on the right to add or delete a conditional style. You can click the or icon to configure the layout for multiple conditional styles. You can click the icon to duplicate the selected conditional style.

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

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

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

  • Symbol Rotate: Click + or -, or enter a value to set the symbol's rotation angle in degrees.

  • Show Symbol: Click the eye icon to display the symbol.

  • Hover Animation: If you select this option, an animation effect is enabled on mouse hover.

  • Legend Hover Link: If you select this option, a highlight interaction is enabled when you hover over a legend item.

  • Step: Sets the step style for the line chart. Options include Off, Turn at current point, Turn at middle point, and Turn at next point.

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

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

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

    • Rotate: Sets the rotation angle of the labels. On a category axis, you can rotate labels to prevent them from overlapping. The angle can be from -90 to 90 degrees.

    • Color: Changes the color of the label text. For more information, see Color picker.

    • 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: Changes the color of the item style. For more information, see Color picker.

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

  • Line Style

    • Color: Changes the color of the line. For more information, see Color picker.

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

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

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

  • Area Style

    • Color: Changes the color of the area style. For more information, see Color picker.

    • Opacity: Click + or -, or enter a value between 0 and 1 to adjust the opacity of the area.

  • Smooth: Click + or -, or enter a value from 0 to 1 to adjust the smoothness of the line.

• Animation: If you select this option, the animation effect is enabled.

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

• Easing Effect: You can select an easing effect for the data update animation from the drop-down list. The default is cubicOut.

Data panel

Field description

Interaction panel

Interaction description

Blueprint Editor interaction configuration

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

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

3. On the blueprint editor configuration page, click the continuous line chart widget in the Imported Nodes pane to display its configuration parameters on the canvas.

   • Events

     Event	Description
     On Data API Request Completion	This event is triggered after the filter processes the response from the data API. The event returns the processed data in JSON format. For a data example, see the Data Response section on the Data tab of the widget's configuration panel in the canvas editor.
     When the data API request fails	This event is triggered and processed by the filter when a data API request fails due to an issue such as a network problem or an API error. The processed data is returned in JSON format. For a data example, see the Data Response section on the Data tab of the widget's configuration panel in the canvas editor.
     When a data item is clicked	This event is triggered when you click a data point in the continuous line chart. The data item that corresponds to that point is also returned.
     When a legend item is clicked	This event is triggered when you click a legend item in the continuous line chart. The data item that corresponds to that series 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 parameters. For example, if a line chart is configured with an API data source of https://api.test, and the data passed to the Request data API action is { id: '1'}, then the final API request is https://api.test?id=1.
     Import data API	After the data is processed in the format required by the component, it is imported to redraw the component. You do not need to request data from the server again. For a data example, see the Data Response area on the Data tab of the configuration panel to the right of the component in the canvas editor.
     Highlight	The data passed to the action is an object. Parameters include seriesName (series name), seriesIndex (series index), dataIndex (data index), and name (data name). Data example: { "seriesName": "", "seriesIndex": 1, "dataIndex": 1, "name": "" }
     Remove highlight	The data passed to the action is an object. 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 data passed to the action is an object. Parameters include dataindex (data index), name (data name), x (x-coordinate position), and y (y-coordinate position). Data example: { "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. Parameters include type (legend action type) and name (legend name). Data example: { "type": "legendToggleSelect", "name": "" }
     Update component configuration	Dynamically updates the style configuration of the component. First, in the component's Configuration panel, click Copy Configuration to Clipboard to get the component configuration data. Then, change the field values for the corresponding styles in the data processing node on the blueprint editor's configuration page as needed.
     Show	Shows the component. See the following data example. return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Hide	Hides the component. See the following data example. return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Toggle visibility	Toggles the component between shown and hidden. See the following data example. return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } }
     Move	Moves the component to a specified position. See the following data example. return{ // The move method. Absolute positioning: to. Relative positioning: by. Default: to. "positionType": "to", // The specified position. x-coordinate, 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|easeInOutExpo. "animationEasing": "linear" } }