DocsICP FilingConsole
官方文档
首页

Echarts chordal graph

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

You can configure the chart style, data source, and blueprint interactions of an ECharts chord chart.

Chart styleimage.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.

  • Basic configurations:

    • 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 image icon to flip the component horizontally.

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

    • Left: Specifies the distance from the element to the left border of the widget. You can enter one of the following values:

      • A specific pixel value, such as 20.

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

      • left, center, or right. The element automatically snaps to the corresponding position.

    • Top: Specifies the distance from the element to the top border of the widget. You can enter one of the following values:

      • A specific pixel value, such as 20.

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

      • left, center, or right. The element automatically snaps to the corresponding position.

    • Right: Specifies the distance from the element to the right border of the widget. You can enter one of the following values:

      • A specific pixel value, such as 20.

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

      • left, center, or right. The element automatically snaps to the corresponding position.

    • Bottom: Specifies the distance from the element to the bottom border of the widget. You can enter one of the following values:

      • A specific pixel value, such as 20.

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

      • left, center, or right. The element automatically snaps to the corresponding position.

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

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

    • Static: Makes the labels static and non-interactive.

    • Legend interaction: Enables filter interactions when you hover over the legend.

    • Hover animation: Enables an animation effect when you hover over the chart.

    • Circular layout: Specifies the layout for nodes and links in the chord chart.

      Rotate labels: Places the text outside the chart elements when selected. When cleared, the text floats above the chart.

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

    • Node hover: Enables the node hover feature.

    • Marker symbol: Specifies a custom marker symbol. This parameter is optional. The default value is circle. Options include circle, rect, roundRect, triangle, diamond, pin, arrow, and none. You can also set this parameter to an image URL or path. For more information, see the ECharts official website.

    • Marker rotation angle: You can click + or -, or enter a value to change the rotation angle of the marker symbol.

    • Element style

      • Normal: If you select this check box, the labels for normal elements are displayed. Normal elements do not respond to mouse events.

        • Border color: You can change the border color of normal elements. For more information, see Color picker.

        • Border width: You can click + or -, or enter a value to change the border width of normal elements.

        • Border style: Specifies the outline type for the border. Options include solid line and dashed line. The default value is solid line.

        • Opacity: You can click + or -, or enter a value to change the opacity of normal elements. The value must be in the range of 0 to 1.

      • Selected: If you select this check box, the labels for selected elements are displayed. Selected elements respond to mouse events.

        • Border color: You can change the border color of selected elements. For more information, see Color picker.

        • Border width: You can click + or -, or enter a value to change the border width of selected elements.

        • Border style: Specifies the outline type for the border. Options include solid line and dashed line. The default value is solid line.

        • Opacity: You can click + or -, or enter a value to change the opacity of selected elements. The value must be in the range of 0 to 1.

    • Axis line style

      • Show direction arrow: Displays direction arrows on the links between chart elements.

      • Normal: If you select this check box, the labels for normal elements are displayed. Normal elements do not respond to mouse events.

        • Color: You can change the color of normal elements. For more information, see Color picker.

        • Width: You can click + or -, or enter a value to change the width of normal elements.

        • Opacity: You can click + or -, or enter a value to change the opacity of normal elements. The value must be in the range of 0 to 1.

        • Curvature: You can click + or -, or enter a value to change the curvature of normal elements.

      • Selected: If you select this check box, the labels for selected elements are displayed. Selected elements respond to mouse events.

        • Color: You can change the color of selected elements. For more information, see Color picker.

        • Width: You can click + or -, or enter a value to change the width of selected elements.

        • Opacity: You can click + or -, or enter a value to change the opacity of selected elements. The value must be in the range of 0 to 1.

    • Labels

      • Normal: If you select this check box, the labels for normal elements are displayed. Normal elements do not respond to mouse events. You can configure the Text style of the labels.

        • Color: You can change the color of the label text for normal elements. For more information, see Color picker.

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

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

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

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

      • Selected: If you select this check box, the labels for selected elements are displayed. Selected elements respond to mouse events. You can configure the Text style of the labels.

        • Color: You can change the color of the label text for selected elements. For more information, see Color picker.

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

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

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

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

    • Edge labels

      • Normal: If you select this check box, the edge labels for normal elements are displayed. Normal elements do not respond to mouse events. You can configure the Text style of the labels.

        • Color: You can change the color of the edge label text for normal elements. For more information, see Color picker.

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

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

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

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

      • Selected: If you select this check box, the edge labels for selected elements are displayed. Selected elements respond to mouse events. You can configure the Text style of the labels.

        • Color: You can change the color of the edge label text for selected elements. For more information, see Color picker.

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

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

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

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

  • Legend

    • Top: Specifies the distance from the legend to the top border of the widget. You can enter one of the following values:

      • A specific pixel value, such as 20.

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

      • left, center, or right. The widget automatically snaps to the corresponding position.

    • Right: Specifies the distance from the legend to the right border of the widget. You can enter one of the following values:

      • A specific pixel value, such as 20.

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

      • left, center, or right. The widget automatically snaps to the corresponding position.

    • Bottom: Specifies the distance from the legend to the bottom border of the widget. You can enter one of the following values:

      • A specific pixel value, such as 20.

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

      • left, center, or right. The widget automatically snaps to the corresponding position.

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

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

    • Orientation: You can select the layout orientation of the legend from the drop-down list. Options are horizontal and vertical.

    • Alignment: You can select the alignment of the legend symbol and text from the drop-down list.

      • Auto: The default value is Auto. The alignment is determined by the position and orientation of the widget.

      • Left: Select Left to align the symbol to the left of the text.

      • Center: Select Center to center-align the symbol and text.

      • Right: Select Right to align the symbol to the right of the text.

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

    • Item gap: You can click + or -, or enter a value to adjust the distance between legend items. This parameter sets the horizontal gap for horizontal layouts and the vertical gap for vertical layouts.

    • Symbol width: You can click + or -, or enter a value to adjust the width of the legend marker symbol.

    • Symbol height: You can click + or -, or enter a value to adjust the height of the legend marker symbol.

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

    • Text style

      • Color: You can change the color of the legend text. For more information, see 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: You can click + or -, or enter a value to change the font size of the legend.

    • Background color: You can change the background color of the legend. For more information, see Color picker.

    • Border color: You can change the border color of the legend. For more information, see Color picker.

    • Border width: You can click + or -, or enter a value to adjust the border width of the legend.

    • Alignment: You can select the alignment of the legend marker relative to the widget from the drop-down list. Options include align left, align center, and align right. The default value is align center.

  • Tooltip: Enables and configures the tooltip style.

    • Trigger Condition: Specifies a custom trigger type. This parameter is optional. Conditions can include the distance between the legend and the top border of the widget. The default options are Mouse Move, Mouse Click, and Mouse Move And Click.

    • Background color: You can change the background color of the tooltip. For more information, see Color picker.

    • Border color: You can change the border color of the tooltip. For more information, see Color picker.

    • Border width: You can click + or -, or enter a value to change the border width of the background box.

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

    • Text style

      • Color: You can change the color of the tooltip text. For more information, see Color picker.

      • 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 image or image icon to add or delete a conditional style. Click the image or image icon to reorder multiple conditional styles. Click the image icon to duplicate the selected conditional style.

    • Series name: Specifies a custom series name.

    • Series color: You can change the color of the series. For more information, see Color picker.

Data Source panel{0C083A36-4FE8-46D2-A8B1-EDC7F1B420FB}

Field

Description

nodes

Configures the nodes in the chord chart. Nodes are the basic units in the graph. The node list is an array of objects. Each object must contain at least a `name` property to identify the node. You can also specify additional properties such as color.

links

Configures the links in the chord chart, representing the relationships between nodes. The link list is an array of objects. Each object typically specifies a source node (`source`) and a target node (`target`). You can also optionally specify the connection weight (`value`) to indicate the strength of the relationship.

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

Configure interaction events or associate global variables for filter interactions between widgets. Configure widget interactions.

Blueprint interaction

  1. Click the image icon in the upper-left corner of the page to go to 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.{0652EC55-1534-4401-AF8E-32FC1E32F9A7}

    Note

    Click the image icon in the anchor point area on the right to view event and action parameter tooltips.

    • Events

      Event

      Description

      When data request is complete

      Triggered after the data API request returns and the data is processed by a filter. The processed data is returned in JSON format. For a data example, see the Data Response section on the Data Source tab of the widget's configuration panel in the canvas editor.

      When data request status changes

      Triggered when the data request status changes. The callback parameter is the current status. For a data example, see the Data Response section on the Data Source tab of the widget's configuration panel in the canvas editor.

      When a data item is clicked

      Triggered when you click a data item in the chord chart. Returns the clicked data.

      When the legend is clicked

      Triggered when you click the legend of the chord chart. Returns the legend data.

    • Actions

      Action

      Description

      Request data API

      Re-requests data from the server, using data from upstream processing nodes or layer nodes as parameters. For example, if the chord chart uses the API data source https://api.test and the data passed to the Request data API action is { id: '1'}, the final request URL is https://api.test?id=1.

      Import data API

      Imports pre-processed data in the required format and redraws the widget without requesting server-side data. For a data example, see the Data Response area on the Data Source tab in the configuration panel to the right of the widget in the canvas editor.

      Show tooltip

      The action to show the tooltip. See the data example.

      { 
    "dataIndex": 1,  // Data index
    "name": "",  // Data name
    "x": 1,  // X-coordinate position
    "y": 1 // Y-coordinate position
}

      Hide tooltip

      Hides the tooltip. No parameters are required.

      Control legend

      The action to control the behavior of the legend. See the data example.

      {
  "type": "",// The type of legend action. Options include the following: legendSelect, legendUnSelect, legendToggleSelect
  "name": ""
}

      Move

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

       {      
      // Move method. 'to' for absolute positioning, 'by' for relative positioning. Default: 'to'.
        "positionType": "to",
      // Target position. x-coordinate, y-coordinate.
      "attr": {
        "x": 0,
        "y": 0
      },
      // Animation method.
      "animation": {
        "enable": false,
        // Animation delay.
        "animationDuration": 1000,
        // Animation curve. Options: linear|easeInOutQuad|easeInOutExpo.
        "animationEasing": "linear"
      }
    }

      Toggle visibility

      The Toggle Visibility, Show, and Hide actions do not require parameters by default. You can add animation configurations as needed. See the data example.

      {
  // Animation type. Optional values: appear|fade|slideToUp. The default is fade. If left blank, there is no animation.
  "animationType": "fade",
  // Animation duration. The default is 1000 ms.
  "animationDuration": 1000,
  // Animation curve. Optional values: linear|easeInOutQuad|easeInOutExpo. The default is linear.
  "animationEasing": "linear"
}

      Show

      Hide

      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 for the corresponding styles in the blueprint editor's data processing node.
Previous：Echarts network graphNext：ECharts gauge