Echarts network graph

Chart style

Style panel

• Search Configuration: Click the Style icon 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 icon to flip the component horizontally.

    • Click the 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.

• Chart elements

  • Name: Sets the name of the chart element.

  • Left: The distance between the element and the left border of the widget. The following formats are supported:

    • A pixel value, such as 20.

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

    • The widget is automatically aligned to the left, center, or right.

  • Top: The distance between the element and the top border of the widget. The following formats are supported:

    • A pixel value, such as 20.

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

    • left, center, or right: The widget automatically aligns to the specified position.

  • Right: The distance between the element and the right border of the widget. The following formats are supported:

    • A pixel value, such as 20.

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

    • The widget is automatically aligned to the left, center, or right position.

  • Bottom: The distance between the element and the bottom border of the widget. The following formats are supported:

    • A pixel value, such as 20.

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

    • The widget automatically aligns to the specified left, center, or right position.

  • Width: The width of the element. The default value is auto, which automatically adjusts the width to fit the content.

  • Height: The height of the element. The default value is auto, which automatically adjusts the height to fit the content.

  • Force-directed layout configuration

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

    • Gravity factor: Click + or -, or enter a value to adjust the force that pulls nodes toward the center.

    • Edge length: Click + or -, or enter a value to adjust the distance between the two nodes of an edge.

    • Show layout animation: Shows the layout animation when enabled.

  • Draggable nodes: Enables node dragging.

  • Legend interaction: Enables interactions on legend hover.

  • Hover animation: Enables the animation effect on element hover.

  • Mouse scaling & panning: Enables mouse scaling and panning.

  • Node hover: Enables the node hover feature.

  • Marker symbol: The marker symbol for nodes. The default value is Circle. Marker types include None, Circle, Rectangle, Rounded rectangle, Triangle, Diamond, Pin, and Arrow. For more information, see the ECharts official website.

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

  • Element style

    • Normal

      • Border color: Modifies the border color of normal elements. For more information, see color picker.

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

      • Border style: The style of the border. The options are Solid line and Dashed line. The default value is Solid line.

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

    • Selected

      • Border color: Modifies the border color of selected elements. For more information, see color picker.

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

      • Border style: The style of the border outline. Options are Solid line and Dashed line. The default value is Solid line.

      • Opacity: Click + or -, or enter a value to adjust the opacity of the selected elements. The value range is 0 to 1.

  • Axis Line Style

    • Show direction arrow: Shows direction arrows on lines connecting nodes.

    • Normal

      • Color: Modifies the color of normal elements. For more information, see color picker.

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

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

      • Curvature: Click + or -, or enter a value to adjust the curvature of the element normals.

    • Selected

      • Color: Modifies the color of selected elements. For more information, see color picker.

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

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

  • Label

    • Normal: Click the eye icon to show labels for items in their default state.

      • Text style

        • Color: Modifies the color of normal item labels. For more information, see color picker.

        • Font style: Specifies the font style of normal item labels.

        • Font weight: Specifies the font weight of normal item labels.

        • Font: Specifies the font family of normal item labels.

        • Font size: Specifies the font size of normal item labels.

    • Selected: Click the eye icon to show labels for items in the selected state.

      • Text style

        • Color: Modifies the color of selected item labels. For more information, see color picker.

        • Font style: Specifies the font style of selected item labels.

        • Font weight: Specifies the font weight of selected item labels.

        • Font: Specifies the font family of selected item labels.

        • Font size: Specifies the font size of selected item labels.

  • Edge label

    • Label content: Specifies the Prefix, Value field, and Suffix of the edge label.

    • Normal: Click the eye icon to display edge labels for items in their default state.

      • Text style

        • Color: Modifies the color of normal edge labels. For more information, see color picker.

        • Font style: Specifies the font style of normal edge labels.

        • Font weight: Specifies the font weight of normal edge labels.

        • Font: Specifies the font family of normal edge labels.

        • Font size: Specifies the font size of normal edge labels.

    • Selected: Click the eye icon to display edge labels for items in the selected state.

      • Text style

        • Color: Modifies the color of selected edge labels. For more information, see color picker.

        • Font style: Specifies the font style of selected edge labels.

        • Font weight: Specifies the font weight of selected edge labels.

        • Font: Specifies the font family of selected edge labels.

        • Font size: Specifies the font size of selected edge labels.

• Legend: Click the eye icon to show the legend.

  • Top: Specifies the distance between the legend and the top border of the widget. The default value is auto. The following formats are supported:

    • Specifies a pixel value, such as 20.

    • The value is a percentage of the container's height and width, such as 20%.

    • The widget automatically aligns to the specified position: left, center, or right.

  • Right: Specifies the distance between the legend and the right border of the widget. The default is auto. The following formats are supported:

    • An example pixel value is 20.

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

    • Aligns the widget to the left, center, or right.

  • Bottom: Specifies the distance from the legend to the bottom border of the widget. The default value is auto. The following formats are supported:

    • A specific pixel value, such as 20.

    • Specifies the height as a percentage of the container. For example, 20%.

    • Aligns the widget to the left, center, or right.

  • Width: The width of the legend. The default value is auto, which automatically adjusts the width.

  • Height: The height of the legend. The default value is auto, which automatically adjusts the height to fit the content.

  • Orientation: The layout orientation of the legend.

    • Horizontal: The legend items are arranged horizontally.

    • Vertical: The legend items are arranged vertically.

  • Alignment: The alignment of the legend symbol and text.

    • Auto: When set to auto (the default), the setting is determined by the position and orientation of the widget.

    • Align Left: A graphic is aligned to the left of the text if the alignment is set to Align Left.

    • Center Align: Sets the alignment to Center Align when the legend graphic and text overlap.

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

  • Padding: You can enter a value in pixels (px) or click + or - to adjust the legend padding. The default padding is 5 for all sides.

  • Item gap: Click + or -, or enter a value to adjust the gap between legend items. The gap is horizontal for horizontal layouts and vertical for vertical layouts.

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

  • Symbol height: Click + or -, or enter a value to adjust the height of the legend symbol.

  • Inactive color: Modifies the color of an inactive legend item. The effect is visible only when you click a legend item on the preview or published page. For more information, see color picker.

  • Text style

    • Color: Modifies the color of the legend text. For more information, see 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 change the legend font size.

  • Background color: Modifies the background color of the legend. For more information, see color picker.

  • Border color: Modifies the border color of the legend. For more information, see color picker.

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

  • Alignment: Specifies the alignment of the legend marker and text. Options include Left, Center, and Right. The default value is Center.

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

  • Trigger Condition: The trigger type. Options are Trigger On Mouse Move, Trigger On Mouse Click, and Trigger On Both Mouse Move And Click.

  • Background color: Modifies the background color of the tooltip. For more information, see color picker.

  • Border color: Modifies the border color of the tooltip. For more information, see color picker.

  • Border width: Click + or -, or enter a value to set the background frame's border width.

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

  • Text style

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

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

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

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

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

• Series: Click or to add or delete a conditional style. Click or to rearrange conditional styles. Click to copy the current conditional style configuration.

  • Series name: Customizes the series name.

  • Series color: Modifies the color of the series. For more information, see color picker.

Data Source panel

Advanced panel

Blueprint interaction

1. Click the icon in the upper-left corner of the page to open the Blueprint page.

2. On the Layer Node tab, you can add the current widget to the main canvas.

3. View the Blueprint configuration parameters.

   • Events

     Event	Description
     When data request is complete	Triggered after a data API request returns and the data is processed by the filter. Provides the processed JSON data. For a data sample, see the Data response area on the Data Source tab in the widget configuration panel on the right side of the canvas editor.
     When a data item is clicked	Triggered when you click a data item in the network graph. Returns the corresponding data item.
     When a legend item is clicked	Triggered when you click a legend item in the network graph. Returns the corresponding data item.

   • Actions

     Action	Description
     Request data	Re-requests data from the server, using data from upstream processing nodes or layer nodes as parameters. For example, if the API data source is https://api.test and the data passed to Request data is { id: '1'}, the final request URL is https://api.test?id=1.
     Import data	Imports data in the widget's drawing format to redraw the widget without re-requesting from the server. For a data example, see the Data response area on the Data Source tab in the widget's configuration panel on the right side of the canvas editor.
     Show tooltip	Receives an object that includes dataindex (data index), name (data name), x (x-coordinate), and y (y-coordinate). See the following data example: { "dataIndex": 1, "name": "", "x": 1, "y": 1 }
     Hide tooltip	Hides the tooltip. No parameters are required.
     Legend control	Receives an object that includes type (legend action type) and name (legend name). See the following data example: { "type": "",// Legend action types include the following: legendSelect, legendUnSelect, and legendToggleSelect "name": "" }
     Move	Moves the widget to a specified position. See the following data example. { // The movement method. 'to' for absolute positioning, 'by' for relative positioning. Default is 'to'. "positionType": "to", // The target position. x-coordinate, y-coordinate. "attr": { "x": 0, "y": 0 }, // The animation method. "animation": { "enable": false, // The animation delay. "animationDuration": 1000, // The animation curve. Options include the following: linear, easeInOutQuad, or easeInOutExpo. "animationEasing": "linear" } }
     Toggle visibility	Toggles the visibility of the widget. No parameters are required.
     Show	Shows the widget. See the following data example. { "animationType": "",// The animation method. Set to 'fade' for a fade animation. Leave blank for no animation. "animationDuration": 1000,// The animation delay in ms. "animationEasing": ""// The animation curve. }
     Hide	Hides the widget. See the following data example. { "animationType": "",// The animation method. Set to 'fade' for a fade animation. Leave blank for no animation. "animationDuration": 1000,// The animation delay in ms. "animationEasing": ""// The animation curve. }
     Update widget configuration	Dynamically updates the widget style configuration. In the widget's Style panel, click Copy configuration to clipboard to get the configuration data, then modify the field values in the Blueprint editor's data processing node.