Echarts radar chart

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: Sets the rendering engine for the radar chart. The options are canvas and svg.

• Legend: Click the eye icon to configure the legend style.

  • Horizontal position: Select the horizontal alignment of the legend from the drop-down list.

    • Auto: Automatically determines the position based on the widget's position and orientation.

    • Left Align: Positions the graphic to the left of the text.

    • Align Center: Centers the legend symbol relative to the text.

    • Right Align: Positions the graphic to the right of the text.

  • Vertical position: Select the vertical alignment of the legend from the drop-down list.

    • Auto: Automatically determines the position based on the widget's position and orientation.

    • Top Align: Aligns the legend to the top of the container.

    • Align Center: Centers the legend vertically in the container.

    • Bottom Align: Aligns the legend to the bottom of the container.

  • Orientation: Select the layout orientation of the legend from the drop-down list.

    • Horizontal: Arranges the legend items horizontally.

    • Vertical: Arranges the legend items vertically.

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

  • Item gap: You can click + or -, or manually enter a value to adjust the gap between legend items. This setting applies to the horizontal gap for a horizontal layout and the vertical gap for a vertical layout.

  • Text style

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

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

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

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

    • Font size: You can click + or -, or manually enter a value to change the font size of the legend text.

• Radar chart

  • Radius: Specifies the radius of the radar chart. You can enter the following values:

    • A specific pixel value, such as 20.

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

  • Start Angle: The angle, in radians, where the radar chart's counter-clockwise rotation begins.

  • Name

    • Color: Sets the color of the indicator names. For more information, see Color picker.

    • Font style: Sets the font style of the indicator names.

    • Font weight: Sets the font weight of the indicator names.

    • Font: Sets the font family of the indicator names.

    • Font size: You can click + or -, or manually enter a value to change the font size of the indicator names.

  • Name gap: You can click + or -, or manually enter a value to change the distance between the indicator name and the radar chart.

  • Segments: You can click + or -, or manually enter a value to set the number of segments for the indicator axis.

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

  • Auto scale: Enables automatic scaling of the indicator axes.

  • Static: Makes the coordinate axes static and non-interactive.

  • Axis line: Click the eye icon to configure the axis lines of the radar chart.

    • Line style

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

      • Width: You can click + or -, or manually enter a value to change the width of the axis line.

      • Type: Sets the type of the axis line. The options are Solid, Dashed, and Dotted.

      • Opacity: You can click + or -, or manually enter a value to change the opacity of the axis line. The value must be between 0 and 1.

  • Tick line: Click the eye icon to configure the axis tick lines.

    • Inside: If you select this option, the axis ticks face inward. If you clear this option, they face outward.

    • Length: You can click + or -, or manually enter a value to change the length of the axis ticks.

    • Line style

      • Color: Sets the color of the tick line. For more information, see Color picker.

      • Width: You can click + or -, or manually enter a value to change the width of the tick line.

      • Type: Sets the type of the tick line. The options are Solid, Dashed, and Dotted.

      • Opacity: You can click + or -, or manually enter a value to change the opacity of the tick line. The value must be between 0 and 1.

  • Line Separator: Click the Eye icon to configure the line separators.

    • Line style

      • Color: Sets the color of the line separators. For more information, see Color picker.

      • Width: You can click + or -, or manually enter a value to change the width of the line separators.

      • Type: Sets the type of the line separators. The options are Solid, Dashed, and Dotted.

      • Opacity: You can click + or -, or manually enter a value to change the opacity of the line separators. The value must be between 0 and 1.

  • Split area: Click the eye icon to configure the split areas.

    • Area style

      • Color: Sets the color of the split areas. You can click the icon to add a color style or the icon to delete one. You can click the or icon to arrange multiple color styles. You can click the icon to copy the selected color style configuration and add a new one with the same configuration. For more information, see Color picker.

      • Opacity: You can click + or -, or manually enter a value to change the opacity of the split area. The value must be between 0 and 1.

  • Dimension: You can click the icon to add a dimension style or the icon to delete one. You can click the or icon to arrange multiple dimension color styles. You can click the icon to copy the selected dimension style configuration and add a new one with the same configuration.

• Prompt: Click the Eye icon to configure tooltip settings.

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

  • Text style

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

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

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

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

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

• Series: You can click the icon to add a series or the icon to delete one. You can click the or icon to arrange multiple series. You can click the icon to copy the selected series configuration and add a new one with the same configuration.

  • Name: The series name, corresponding to the s field in the data.

  • Symbol: The symbol for data points. Defaults to Circle. Available types include None, Circle, Rectangle, Rounded rectangle, Triangle, Diamond, Pin, and Arrow. For more information, see the ECharts documentation.

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

  • Label

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

    • Distance: You can click + or -, or manually enter a value to change the distance of the label from the data point.

    • Rotate: Click + or -, or enter a value to set the rotation angle of the radar chart.

    • Color: Sets the color of the label. For more information, see Color picker.

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

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

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

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

  • Item style

    • Color: You can use the color picker to change the color of the element.

    • Opacity: You can click + or -, or manually enter a value to change the opacity of the data point symbol. The value must be between 0 and 1.

  • Line style

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

    • Width: You can click + or -, or manually enter a value to change the width of the series line.

    • Type: Sets the line stroke type. The options are Solid and Dashed.

    • Opacity: You can click + or -, or manually enter a value to change the opacity of the series line. The value must be between 0 and 1.

  • Area style

    • Color: Use the color picker to set the color of the area style.

    • Opacity: You can click + or -, or manually enter a value to change the opacity of the fill area. The value must be between 0 and 1.

• Animation: Enables animation effects for the chart.

• Animation duration: You can click + or -, or manually enter a value to change the duration of the initial animation in milliseconds.

• Easing effect: Select the easing effect for the data update animation from the drop-down list. The default is cubicOut.

Data Source panel

Advanced panel

Blueprint interaction

1. Click the icon in the upper-left corner of the page to go to 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 data API request is complete	Triggered after the data API request completes and the data is processed by the filter. The processed data is returned in JSON format. For a data example, see the Data response area on the Data Source tab in the widget's configuration panel in the canvas editor.
     When a data item is clicked	Triggered when a data item in the radar chart is clicked. The corresponding data item is returned.
     When an axis label is clicked	Triggered when an axis label on the radar chart is clicked. The data item corresponding to the label is returned.
     When a legend item is clicked	Triggered when a legend item in the radar chart is clicked. The corresponding data item is returned.

   • Actions

     Action	Description
     Request data API	Re-requests server-side data, using data from input processing nodes or layer nodes as parameters. For example, if a radar chart is configured with an API data source of 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 redraws the component without re-requesting server-side data. For data examples, see the Data Response area on the Data Source tab of the component's configuration pane in the canvas editor.
     Highlight	Accepts an object with the parameters seriesName (series name), seriesIndex (series index), dataIndex (data index), and name (data name). Use seriesName or seriesIndex to specify a series. To specify a data point, also use dataIndex or name. See the following data example. { "seriesName": "", "seriesIndex": 1, "dataIndex": 1, "name": "" }
     Clear highlight	Accepts an object with the parameters seriesName (series name), seriesIndex (series index), dataIndex (data index), and name (data name). Use seriesName or seriesIndex to specify a series. To specify a data point, also use dataIndex or name. See the following data example. { "seriesName": "", "seriesIndex": 1, "dataIndex": 1, "name": "" }
     Show tooltip	Accepts an object with the parameters 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.
     Control legend	Accepts an object with the parameters 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 component to a specified position. See the following data example. { // Movement method. 'to': absolute positioning. 'by': relative positioning. Default: 'to'. "positionType": "to", // The specified position. x-coordinate, y-coordinate. "attr": { "x": 0, "y": 0 }, // Animation method. "animation": { "enable": false, // Animation delay. "animationDuration": 1000, // Animation curve. Optional values: linear, easeInOutQuad, or easeInOutExpo. "animationEasing": "linear" } }
     Toggle visibility	Toggles the component's visibility. No parameters are required.
     Show	Shows the component. See the following data example. { "animationType": "",// Animation method. Optional value: fade. If left blank, there is no animation. "animationDuration": 1000,// Animation delay in ms. "animationEasing": ""// Animation curve. }
     Hide	Hides the component. See the following data example. { "animationType": "",// Animation method. Optional value: fade. If left blank, there is no animation. "animationDuration": 1000,// Animation delay in ms. "animationEasing": ""// Animation curve. }
     Update component configuration	Dynamically updates the component's style configuration. Go to the component's Style pane and click Copy Configuration to Clipboard to get the configuration data. In the data processing node on the Blueprint Editor configuration page, change the field values for the styles as needed.