Radar chart - Double 11

Style

The Radar chart - Double 11 is a variant of a basic radar chart. Unlike a standard radar chart, it supports visualizing only a single dimension of data. This makes it ideal for displaying quantities across different categories, for example, showing sales volume in various regions during the Double 11 event.

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.

• General

  Top offset: The distance from the radar chart to the top edge of the component.

• Circle style

  Parameter	Description
  Border color	Specifies the color of the outer circle's border. For more information, see Color picker.
  Border width	Specifies the width of the outer circle's border.

• Area and gradient

  Parameter	Description
  Radial axis scale	Specifies the maximum value for the radial axis. If this value is greater than the maximum value in your data, a larger scale makes the data areas appear smaller.
  Gradient colors	Specifies the gradient colors for the radar chart. Click the icon or icon to add or remove a color stop. Click the icon or icon to reorder multiple color series. Click the icon to duplicate the selected color series configuration. Position: Specifies the position of each color in the gradient. Color: Specifies the color for each position.
  Stroke width	Specifies the width of the area border in pixels (px).
  Stroke type	Specifies the style of the area border. Options: Smooth and Linear.
  Curve arc	Specifies the border curvature when the stroke type is Smooth. The value ranges from 0 to 1. A value of 1 renders a straight line.

• Text and lines

  Parameter	Description
  Space between text and lines	Specifies the vertical distance between the text box and the line in pixels (px).
  Font family	Specifies the font family for all text in the component. The default is Microsoft YaHei.
  Font color	Specifies the font color for all text in the component.
  Font size	Specifies the font size for all text in the component.
  Font weight	Specifies the font weight for all text in the component.
  Line color	Specifies the color of the lines.
  Line width	Specifies the width of the lines in pixels (px).

• Spinning overlay: Configures the style of the spinning overlay effect. You can click the icon to enable or disable this effect.

  • Image: The image used for the spinning overlay effect. Enter the image URL.

  • Animation duration: The duration of the spinning animation in seconds (s).

Data

Field configuration

Interaction

This component does not have any interactive events.

Blueprint Editor interaction configuration

1. In Canvas Editor, right-click a widget in the Layer panel and select Add to Blueprint Editor.
2. Click the icon in the upper-left corner of the page.

3. On the Blueprint Editor page, click the Radar chart - Double 11 component in the Imported Nodes pane. The configuration parameters for the component appear on the canvas.

   • Events

     Event	Description
     When data API request is successful	This event triggers after a successful data API request and after the response is processed by any data filters. The event passes the processed data. For a data example, see the Data tab's data response section in the component's configuration panel.
     When data API request fails	This event triggers when the data API request fails due to issues such as network problems or API errors. It passes the failure details. For a data example, see the Data tab's data response section in the component's configuration panel.

   • Actions

     Action	Description
     Request data API	Sends a new request to the data source. Data from upstream processing nodes or layer nodes is passed as parameters. For example, if the component's API data source is https://api.test and the data passed to the request data API action is { id: '1'}, the final request URL will be https://api.test?id=1.
     Import data	Imports pre-formatted data and redraws the component. This action does not send a new request to the server. For a data example, see the Data tab's data response section in the component's configuration panel.
     Update component configuration	Dynamically updates the component's style configuration. First, go to the component's configuration panel and click Copy Configuration to Clipboard to get the configuration data. Then, modify the field values for the desired styles in a data processing node within the Blueprint Editor.
     Show	This action shows the component. Sample data: return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Hide	This action hides the component. Sample data: return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Toggle visibility	This action toggles the component's visibility. Sample data: return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } }
     Move	This action moves the component to a specified position. Sample data: return{ // Movement mode. 'to' for absolute positioning, 'by' for relative positioning. Default: 'to'. "positionType": "to", // The target position, specified by x and y coordinates. "attr": { "x": 0, "y": 0 }, // Animation settings. "animation": { "enable": false, // Animation duration. "animationDuration": 1000, // Animation easing function. Valid values: linear, easeInOutQuad, easeInOutExpo. "animationEasing": "linear" } }