Echarts network graph

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.

• Chart Elements

  • Name: Set the name of the chart element.

  • Left: The offset of the element or component from the left edge. Supports the following inputs:

    • A specific pixel value, such as 20.

    • A percentage of the container's height and width, for example, 20%.

    • left, center, or right: The component automatically aligns to the corresponding position.

  • Top: The distance from the top edge of the element or component. Supports the following types of input:

    • A specific pixel value, such as 20.

    • A percentage relative to the height and width of the container, for example, 20%.

    • The component automatically aligns to the corresponding position: left, center, or right.

  • Right: The distance from the right border of the element or component. The following types of input are supported:

    • A specific pixel value, for example, 20.

    • A percentage of the container's height and width, for example, 20%.

    • When set to left, center, or right, the component automatically aligns to the corresponding position.

  • Bottom: The distance between the element and the bottom boundary of the component. The following input types are supported:

    • A specific pixel value, such as 20.

    • A percentage of the container's height and width, such as 20%.

    • left, center, or right: The component automatically aligns to the corresponding position.

  • Width: Enter a value to set the element's width. The default value is auto, which makes the width adaptive.

  • Height: Enter a numeric value to set the height of the element. The default is auto, which automatically adjusts the height.

  • Force-directed layout configuration

    • Repulsion factor: Click + or -, or enter a value to modify the repulsion factor between nodes.

    • Gravity factor: Click the + or - button, or manually enter a value to change the gravitational pull on the node toward the center.

    • Edge length: Click the + or - button, or manually enter a value to change the distance between the two nodes on an edge.

    • Show layout animation: Displays layout animations when selected.

  • Draggable node: When selected, you can drag nodes.

  • Legend Interaction: When selected, enables interaction when you hover over the legend.

  • Hover Animation: Enables the animation effect on mouse hover.

  • Mouse Zoom & Pan: when selected, enables zooming and panning with the mouse.

  • Node suspension: Select this option to enable the node suspension feature.

  • Marker: Specifies the shape of the marker. The default value is Circle. The options are None, Circle, Rectangle, Rounded Rectangle, Triangle, Diamond, Pin, and Arrow. For more information, see the ECharts website.

  • Marker rotation angle: Click + or -, or manually enter a value to modify the rotation angle of the marker.

  • Element Style

    • Normal

      • Border color: Refer to the Color Picker Description to modify the border color of normal items.

      • Border width: Click + or -, or manually enter a value to modify the border width of the normal item element.

      • Border style: Specifies the stroke type of the border, including Solid line and Dashed line. The default value is Solid line.

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

    • Selected

      • Border color: See Color picker instructions to change the border color of the selected item.

      • Border width: Click + or -, or enter a value to change the border width of the selected item.

      • Border style: The stroke type of the border, including Solid and Dashed. The default value is Solid.

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

  • Axis Style

    • Show Direction Arrows: When selected, the connecting lines between diagrams display direction arrows.

    • Normal

      • Color: Changes the color of normal items. For more information, see Color Picker description.

      • Width: Click the + or - button, or manually enter a value, to modify the width of the normal element.

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

      • Curvature: Click + or -, or manually enter a value to modify the curvature of the normal item.

    • Selected

      • Color: Refer to Color picker description to modify the color of the selected item.

      • Width: Click + or -, or manually enter a value to modify the width of the selected element.

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

  • Label

    • Normal: Click the Eye icon on the right to show the label text for normal items (bars that do not respond to mouse events).

      • Text Style

        • Color: See Color picker instructions to change the text color of normal labels.

        • Font style: The font style of the label text for normal items.

        • Font weight: The font weight of the label text for normal items.

        • Font: The font family of the normal item label text.

        • Font size: The font size of the label text for normal items.

    • Selected: Click the Eye icon on the right to show the label text for the selected item (the bar that responds to mouse events).

      • Text Style

        • Color: Refer to Color picker instructions to change the text color of the selected label.

        • Font Style: The font style of the label for the selected item.

        • Font weight: The font weight of the selected label text.

        • Font: The font family of the selected label text.

        • Font size: The font size of the selected label text.

  • Edge label

    • Label Content: Sets the Prefix, Value Field, and Suffix of the edge label.

    • Normal: Click the eye icon on the right to display the edge label text for normal items (bars that do not respond to mouse events).

      • Text Style

        • Color: Refer to the Color Picker Description to change the text color of the normal edge label.

        • Font style: The font style of the normal edge label text.

        • Font weight: The font weight of the edge label text for normal items.

        • Font: The font family for normal edge label text.

        • Font size: The font size of normal edge label text.

    • Selected Item: Click the Eye icon on the right to display the edge label text for the selected item (the bar that responds to mouse events).

      • Text Style

        • Color: See Color picker instructions to change the color of the selected edge label text.

        • Font style: The font style of the selected edge label text.

        • Font weight: The font weight of the selected edge label text.

        • Font: The font family of the selected edge label text. For example, Arial, Times New Roman, or Verdana. You can also specify a custom font family. For more information, see Custom Fonts and Font Awesome.

        • Font size: The font size of the edge label text for the selected item.

• Legend: Click the Eye icon on the right to show the legend.

  • Top: The distance between the legend and the top border of the component. The default value is auto. The following input types are supported:

    • A specific pixel value, for example 20.

    • A percentage of the container's height and width, for example, 20%.

    • When set to left, center, or right, the component automatically aligns accordingly.

  • Right: The distance between the legend and the right border of the component. The default value is auto. The following inputs are supported:

    • A specific pixel value, such as 20.

    • A percentage relative to the width and height of the container, for example, 20%.

    • When set to left, center, or right, the component automatically aligns to the corresponding position.

  • Bottom: The distance from the legend to the bottom border of the component. The default value is auto. The following input types are supported:

    • A specific pixel value, for example 20.

    • A percentage relative to the height and width of the container, for example, 20%.

    • When set to left, center, or right, the component automatically aligns to the corresponding position.

  • Width: Manually enter a value to adjust the width of the legend. The default value is auto, which automatically adjusts the width.

  • Height: Enter a value to adjust the height of the legend. The default value is auto, which automatically adjusts the height.

  • Orientation: Click the drop-down list to select the layout orientation of the legend.

    • Horizontal: The legend is arranged horizontally.

    • Vertical: The legend is arranged vertically.

  • Align: Click the drop-down list to select the alignment for the legend marker and text.

    • Automatic: The default is Automatic, determined based on the position and orientation of the component.

    • Left align: When the graphic is on the left of the text, this is called Left align.

    • Center Align: When the symbol and text of the legend overlap, the alignment is Center Align.

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

  • Padding: Click the + or - icon, or manually enter a value to adjust the padding of the legend. The unit is px. The default padding for each side is 5.

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

  • Graphic Width: Click + or -, or manually enter a value to adjust the width of the legend marker.

  • Graphic Height: Click + or -, or manually enter a value to adjust the graphic height of the legend marker.

  • Inactive Color: Sets the color of a legend item when it is inactive. For more information, see Color Picker Instructions. The effect is visible only when you click a legend item on the preview or publish page.

  • Text Style

    • Color: Refer to the Color picker instructions 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 manually enter a value to change the legend font size.

  • Background color: Refer to Color picker description to change the background color of the legend.

  • Border color: Refer to Color picker description to modify the border color of the legend.

  • Border width: Click the + or - icon, or manually enter a value to adjust the border width of the legend.

  • Alignment: Click the drop-down list to select the alignment of the legend. The options are Left align, Center align, and Right align. The default is Center align.

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

  • Trigger: Custom trigger type, optional, including On Hover, On Click, and On Hover and Click.

  • Background color: See Color picker description to change the background color of the tooltip.

  • Border color: Refer to Color Picker Instructions to modify the border color of the tooltip.

  • Border width: Click + or -, or manually enter a value to change the border width of the background box.

  • Padding: Click + or -, or manually enter a value to change the padding of the background box. The value is in pixels (px), and the default is 5 for all sides.

  • Text Style

    • Color: Sets the color of the tooltip text. For more information, see Color Picker Instructions.

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

    • Font weight: The font weight of the tooltip text.

    • Font: The font family of the tooltip text.

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

• Series: Click the or icon on the right to add or delete a conditional style. Click the or icon to configure the arrangement of multiple conditional styles. Click the icon to duplicate the selected conditional style.

  • Series name: Customize the series name.

  • Series color: See Color picker description to change the color of the series.

Data panel

Fields

Interaction panel

Interactions

Blueprint Editor interactions

1. On the Canvas Editor page, right-click the component, 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 Network Graph component in the Import Node bar. The configuration parameters for the network graph appear in the canvas, as shown in the following figure.

   • Events

     Event	Description
     When the data API request completes	This event is emitted after a data API request returns and is processed by a filter, and provides the processed data in JSON format. For a specific data example, see the Data Response area on the Data tab of the configuration panel on the right side of the component in the canvas editor.
     When a data interface request fails	When a data interface request fails, for example, due to network issues or interface errors, an event is thrown after the response is processed by a filter. This event includes the processed data in JSON format. For a data example, see the Data Response area on the Data tab of the component's configuration panel in the canvas editor.
     When you click a data item	This event is triggered when a data item in the network graph is clicked. It emits the corresponding data item.
     When the legend is clicked	This event is triggered when a legend item in the network graph is clicked. It emits the corresponding data item.

   • Actions

     Action	Description
     Request data	Requests data from the server again, using the data output by upstream data processing nodes or layer nodes as parameters. For example, if a network graph has an API data source of 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	After the data is processed into the component's drawing format, you can import it into the component and redraw it. 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 for the component in the canvas editor.
     Show tooltip	The data passed to the action is an object whose parameters include dataindex (data index), name (data name), x (x-coordinate), and y (y-coordinate). Data example: { "dataIndex": 1, "name": "", "x": 1, "y": 1 }
     Hide Tooltip	Hides the tooltip. No parameters are required.
     Legend Control	The input data for the action is of the object type. The parameters include type (legend action type) and name (legend name). Example data: { "type": "legendToggleSelect", "name": "" }
     Update component configuration	You can dynamically update the style configuration of a component. First, click Copy configuration to clipboard in the component's Configuration panel to obtain its configuration data. Then, in a data processing node on the Blueprint Editor configuration page, change the field values for the corresponding styles as needed.
     Display	The following is sample data for the display component. return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Hide	The following is sample data for hiding a component. return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Toggle Visibility	The following is a data sample for showing or hiding a component. return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } }
     Move	Moves the component to a specified position. See the sample data below. return{ // Move mode. 'to' for absolute positioning, 'by' for relative positioning. Default: 'to'. "positionType": "to", // Target position: x and y coordinates. "attr": { "x": 0, "y": 0 }, // Animation settings. "animation": { "enable": false, // Animation duration. "animationDuration": 1000, // Animation easing curve. Options: linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }