Echarts radar chart

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.

• Rendering engine: Specifies the rendering engine for the radar chart. The options are canvas and svg.

• Legend: You can click the eye icon on the right to display the legend.

  • Horizontal position: Select the horizontal alignment of the legend.

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

    • Left: Places the graphic to the left of the text.

    • Center: If the legend graphic and text overlap, the alignment is set to Center.

    • Right: Places the graphic to the right of the text.

  • Vertical position: Select the vertical alignment of the legend.

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

    • Top: Aligns the graphic to the top of the window.

    • Center Align: Aligns the graphic to the vertical center of the window.

    • Bottom: Aligns the graphic to the bottom of the window.

  • Orientation: Select the layout of the legend items.

    • Horizontal: The legend items are arranged horizontally.

    • Vertical: The legend items are arranged vertically.

  • Padding: Click + or -, or enter a value to set the legend padding in pixels (px). The default value is 5.

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

  • Text style

    • Color: Set the color of the legend text. For more information, see Color picker description.

    • Font style: Set the font style of the legend text.

    • Font weight: Set the font weight of the legend text.

    • Font: Set the font family of the legend text.

    • Font size: Click + or -, or enter a value to change the legend font size.

• Radar chart

  • Radius: Set the radius of the radar chart. The following input formats are supported:

    • A specific pixel value, such as 20.

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

  • Starting Angle: The starting angle, in radians, for the counterclockwise rotation of the radar chart.

  • Name

    • Color: Set the color of the axis name text. For more information, see Color picker description.

    • Font style: Set the font style of the axis name text.

    • Font Weight: The font weight applied to the name.

    • Font: The font family for the name.

    • Font size: Click + or -, or enter a value to adjust the font size of the name.

  • Name gap: Click + or -, or enter a value to adjust the distance between the axis name and the axis line.

  • Split number: Click + or -, or enter a value to set the number of segments of the coordinate axis.

  • Shape: The shape of the radar chart. The options are Polygon and Circle.

  • Scale: Enables or disables automatic scaling for the radar chart.

  • Static: The coordinate axis is not interactive.

  • Axis line: Click the eye icon to show or hide the axis lines on the radar chart.

    • Line style

      • Color: Set the color of the axis line. For more information, see Color picker description.

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

      • Type: The line type for the coordinate axis, which can be Solid, Dashed, or Dotted.

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

  • Tick line: Click the eye icon to show or hide the coordinate axis ticks.

    • Inside: When selected, the axis ticks face inward. When deselected, they face outward.

    • Length: Click + or -, or enter a value to set the coordinate axis tick length.

    • Line style

      • Color: Set the color of the tick lines. For more information, see Color picker description.

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

      • Type: Specifies the line type of the coordinate axis. Options: Solid, Dashed, and Dotted.

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

  • Split line: Click the eye icon to show or hide the split lines.

    • Line style

      • Color: Set the color of the split lines. For more information, see Color picker description.

      • Width: Enter a value, or click + or - to adjust the width of the split lines.

      • Type: The line style for the coordinate axis. The options are Solid, Dashed, and Dotted.

      • Opacity: Click + or -, or enter a value to set the opacity of the split lines. The value must be between 0 and 1.

  • Split area: Click the eye icon to show or hide the split areas.

    • Area style

      • Color: Click the or icon on the right to add or delete a color style. Click the or icon to arrange multiple color styles. Click the icon to copy the selected color style configuration and create a new one with the same settings. You can also modify the color of the split lines. For more information, see Color picker description.

      • Opacity: Sets the opacity of the split area. Enter a value from 0 to 1, or click + or -.

  • Dimension: Click the icon on the right to add a dimension style, or the icon to delete one. Click the icon to arrange multiple dimension color styles horizontally, or the icon to arrange them vertically. Click the icon to copy the selected dimension style configuration and add a new style with the same settings.

• Tooltip: Click the eye icon to show or hide the tooltip.

  • Background color: Set the background color of the tooltip. For more information, see Color picker description.

  • Text style

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

    • 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 arrange multiple conditional styles. Click the icon to copy the selected conditional style configuration and add a new style with the same settings.

  • Name: A custom name for the series. This name must match the value of the s field in the data.

  • Symbol: Specifies the custom symbol. By default, this is set to Circle. Available symbols include None, Circle, Rectangle, Rounded Rectangle, Triangle, Diamond, Pin, and Arrow. For more information, see the ECharts official website.

  • Symbol size: You can click + or -, or enter a value to adjust the symbol size.

  • Label

    • Position: Sets the position of the label relative to the radar chart. Options include top, left, and inside.

    • Distance: Click + or -, or enter a value to set the distance of the label from the radar chart.

    • Rotate: Click + or -, or enter a number to rotate the radar chart.

    • Color: Set the color of the label text. For more information, see Color picker description.

    • Font style: Set the font style of the label text.

    • Font weight: Set the font weight of the label text.

    • Font: Set the font family of the label text.

    • Font size: Set the font size of the label text.

  • Item style

    • Color: Set the color of the data point symbol. For more information, see Color picker description.

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

  • Line style

    • Color: Set the color of the series line. For more information, see Color picker description.

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

    • Type: The type of outline for the line. Options include Solid and Dashed.

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

  • Area style

    • Color: Set the fill color of the area under the series line. For more information, see Color picker description.

    • Opacity: Sets the opacity of the area intersection. Click + or -, or enter a value in the range of 0 to 1.

• Animation: Enables or disables animation effects for the radar chart.

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

• Easing: Select the easing effect for the data update animation. The default value is cubicOut.

Data panel

Field description

Interaction panel

Interaction description

Blueprint editor interaction configuration

1. On the canvas editor page, right-click the widget and select Export to Blueprint Editor.

2. Click the icon in the upper-left corner of the page.

3. On the blueprint editor's configuration page, click the Radar chart widget in the Imported Nodes pane. The widget's configuration parameters appear on the canvas, as shown in the following figure.

   • Events

     Event	Description
     When the data API request is complete	This event triggers after the filter has processed the data from an API request. It returns the processed data in JSON format. For a data sample, see the Data Response area on the Data tab of the widget's configuration panel in the canvas editor.
     When the data API request fails	This event is triggered when a data API request fails, for example, due to network issues or API errors. The filter processes the event and returns the resulting data in JSON format. For a data example, see the Data Response area on the Data tab of the widget configuration panel in the canvas editor.
     When a data item is clicked	This event is triggered when a data point on the radar chart is clicked. The event returns the data item corresponding to that point.
     When an axis label is clicked	This event is triggered when an axis label on the radar chart is clicked. The event returns the data item corresponding to that label.
     When the legend is clicked	This event is triggered when a legend item is clicked. The event returns the data item corresponding to that series.

   • Actions

     Action	Description
     Request data API	Re-requests data from the server. Data from input data processing nodes or layer nodes is used as parameters. For example, if a radar chart has its API data source configured as https://api.test, and the data passed to the Request data API action is { id: '1'}, the final API request is https://api.test?id=1.
     Import data API	Processes data in the component's drawing format and imports it into the component for redrawing, without making a new server request. For a data example, see the Data Response area on the Data tab of the component's configuration pane in the canvas editor.
     Highlight	The data passed to the action is an object. The parameters include seriesName (series name), seriesIndex (series index), dataIndex (data index), and name (data name). Data example: { "seriesName": "", "seriesIndex": 1, "dataIndex": 1, "name": "" }
     Clear highlight	The data passed to the action is an object. The parameters include seriesName (series name), seriesIndex (series index), dataIndex (data index), and name (data name). Data example: { "seriesName": "", "seriesIndex": 1, "dataIndex": 1, "name": "" }
     Show tooltip	The data passed to the action is an object. The parameters include dataindex (data index), name (data name), x (x-coordinate position), and y (y-coordinate position). Data example: { "dataIndex": 1, "name": "", "x": 1, "y": 1 }
     Hide tooltip	Hides the tooltip. No parameters are required.
     Legend control	The data passed to the action is an object. The parameters include type (legend action type) and name (legend name). Data example: { "type": "legendToggleSelect", "name": "" }
     Update component configuration	Dynamically updates the style configuration of the component. First, in the component's Configuration pane, click Copy Configuration to Clipboard to get the component configuration data. Then, in the data processing node on the blueprint editor's configuration page, change the field values for the corresponding styles as needed.
     Show	Shows the component. The following is a reference data example. return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Hide	Hides the component. The following is a reference data example. return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Toggle visibility	Toggles the component between shown and hidden. The following is a reference data example. return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } }
     Move	Moves the component to a specified position. The following is a reference data example. return{ // The movement method. 'to' for absolute positioning and 'by' for relative positioning. Default: 'to'. "positionType": "to", // The target position, specified by x and y coordinates. "attr": { "x": 0, "y": 0 }, // The animation settings. "animation": { "enable": false, // The animation duration. "animationDuration": 1000, // The animation curve. Optional values: 'linear', 'easeInOutQuad', or 'easeInOutExpo'. "animationEasing": "linear" } }