ECharts Sankey Diagram

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.

• Rendering Engine: The rendering engine. Options: canvas and svg.

• Global Style

  • Custom Margin: Distance in px between the Sankey diagram area and each border of the widget.

  • Horizontal Position: Alignment of the legend markers and text.

    • Auto: The default (Auto). Alignment depends on widget position and orientation.

    • Align Left: Aligns the chart to the left.

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

  • Node Width: Width of each node, in px. Click + or - or enter a value.

  • Node Gap: Gap between nodes, in px. Click + or - or enter a value.

  • Layout Iterations: Number of layout iterations. Click + or - or enter a value. More iterations reduce node and edge overlap.

  • Draggable: Enables dragging the chart in preview or published mode.

  • Highlight on Interaction: Highlight behavior when interacting with elements. Options: None, Highlight Adjacent Upstream and Downstream Edges, Highlight Adjacent Upstream Edges, and Highlight Adjacent Downstream Edges.

  • Label: Click the eye icon to toggle label style settings.

    • Position: Label position relative to the Sankey diagram. Options: top, left, and inside.

    • Positioning Distance: Distance from the label to the border of the Sankey diagram.

    • Rotation: Rotation angle of the label, from -90 to 90 degrees. Useful for preventing label overlap.

    • Color: Label text color. Select from the Color picker.

    • Font Style: Font style of the label text.

    • Font Weight: Font weight of the label text.

    • Font: Font family of the label text.

    • Font Size: Font size of the label text.

  • Element Style

    • Border Color: Border color of the element. Select from the Color picker.

    • Border Width: Border width of the element. Click + or - or enter a value.

    • Opacity: Opacity of the element. Range: [0, 1]. Click + or - or enter a value.

  • Line Style

    • Color

      • Color Mode: Color mode for lines. Options: Same as source, Same as target, and Custom.

    • Opacity: Opacity of lines. Range: [0, 1]. Click + or - or enter a value.

    • Curvature: Curvature of lines. Click + or - or enter a value.

  • Tooltip: Click the eye icon to toggle tooltip settings.

    • Background Color: Background color of the tooltip.

    • Text Style

      • Color: Tooltip text color. Select from the Color picker.

      • Font Style: Font style of the tooltip text.

      • Font Weight: Font weight of the tooltip text.

      • Font: Font family of the tooltip text.

      • Font Size: Font size of the tooltip text.

• Color Palette: Click or to add or delete a color palette style. Click or to rearrange styles. Click to duplicate a style.

• Animation: Enables animation effects.

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

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

Data Source panel

Advanced panel

Blueprint interaction

1. Click in the upper-left corner 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.

   • Events

     Event	Description
     When a data request is complete	Triggered after a data request completes and passes through a filter. Returns processed data in JSON format. Check the Data Response area on the Data Source tab for a data example.
     When a data item is clicked	Triggered when you click a data item. Returns the corresponding data item.
     On a point click	Triggered when you click a node. Returns the corresponding data item.
     When a link is clicked	Triggered when you click a link. Returns the corresponding data item.

   • Actions

     Action	Description
     Request Data	Re-requests data from the server. Upstream data processing or layer node data is used as parameters. For example, if the API data source is https://api.test and the Request Data input is { id: '1'}, the final URL is https://api.test?id=1.
     Import Data	Imports pre-formatted data to redraw the widget without re-requesting server data. Check the Data Response Result area on the Data Source tab for a data example.
     Highlight	Input: an object with seriesName, seriesIndex, dataIndex, and name. Use seriesName or seriesIndex to specify a series, and dataIndex or name to specify a data item. Example: { "seriesName": "", "seriesIndex": 1, "dataIndex": 1, "name": "" }
     Clear Highlight	Input: an object with seriesName, seriesIndex, dataIndex, and name. Use seriesName or seriesIndex to specify a series, and dataIndex or name to specify a data item. Example: { "seriesName": "", "seriesIndex": 1, "dataIndex": 1, "name": "" }
     Show Tooltip	Input: an object with dataindex (data index), name (data name), x (horizontal coordinate), and y (vertical coordinate). Example: { "dataIndex": 1, "name": "", "x": 1, "y": 1 }
     Hide Tooltip	Hides the tooltip.
     Move	Moves the widget to a specified position. Example: { // Movement type. Absolute positioning: to. Relative positioning: by. Default: to. "positionType": "to", // Specified position. x-coordinate, y-coordinate. "attr": { "x": 0, "y": 0 }, // Animation method. "animation": { "enable": false, // Animation delay. "animationDuration": 1000, // Easing curve. Optional values: linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }
     Toggle Visibility	Toggles widget visibility.
     Show	Shows the widget. Example: { "animationType": "",// Animation type. Optional value: fade. If left blank, there is no animation. "animationDuration": 1000,// Animation delay, in ms. "animationEasing": ""// Easing curve }
     Hide	Hides the widget. Example: { "animationType": "",// Animation type. Optional value: fade. If left blank, there is no animation. "animationDuration": 1000,// Animation delay, in ms. "animationEasing": ""// Easing curve }
     Update Widget Configuration	Dynamically updates widget style configuration. Click Copy Configuration to Clipboard in the Style panel to get the configuration data, then modify field values in the data processing node as needed.