Doughnut layer

Chart style

The doughnut layer is a sub-component of the 3D globe. You can configure the radius, size, color, and tooltip of each doughnut independently.

Style Panel

• Search Configuration: Click the Search configuration items icon in the upper-right corner of the Style panel. In the Search Configuration panel, enter the name of the configuration items that you want to search for and locate the configuration items. Fuzzy match is supported. For more information, see Search configuration items.

• Minimum Radius: The inner radius of the doughnut layer.

• Max Radius: The outer radius of the doughnut layer.

• Donut Size: The overall size of the doughnut layer.

• Outer Ring Color: The color of the outer ring of the doughnut layer.

• Inner Render Mode: The color rendering mode of the inner circle of the doughnut layer. Valid values: Monochrome and Gradient.

• Start Color and End Color: The start and end colors of the doughnut gradient. This parameter is displayed only when you set Inner Render Mode to Gradient.

• Inner Color: The color of the inner circle of the doughnut layer. This parameter is displayed only when you set Inner Render Mode to Monochrome.

• dialog box Configuration: The style of the tooltip that appears when you hover over or click a doughnut on a preview or published page.

  Metric	description
  Background Color	The background color of the tooltip.
  Font	The font style of the text in the tooltip.
  The color of the font. For more information, see Color setting parameters.	The font color in the tooltip.
  Font Size	The font size in the tooltip.

• Series: Click the or icon to add or delete a scatter series. Click the or icon to configure the arrangement style of multiple scatter series. Click the icon to copy the currently selected scatter pattern configuration and add a scatter pattern with the same configuration.

  Metric	description
  Key Name	The field name of the series, which corresponds to the series field in the data panel.
  Color	The color of this series.

Data Sources panel

Advanced Panel

Turn on the switch to enable widget interaction. When a doughnut is clicked, a data request is triggered and a temporary variable is emitted to dynamically load data for different doughnuts. By default, the lng and lat values are emitted. For more information, see Component interaction configuration.

Blueprint Interaction

1. Click the icon in the upper-left corner to go to the Blueprint page.

2. On the Layer Nodes tab, add the widget to the main canvas.

3. View blueprint configuration parameters.

   • Event

     Event	Description
     When the data interface request is completed	Triggered with the processed JSON data after a data interface request is completed and processed by a filter. For specific data examples, see the Data Response Result section on the Data Source tab in the right-side configuration panel of the canvas editor.
     Donut is triggered by clicking	Triggered when a doughnut is clicked. The corresponding data item for that doughnut is emitted.

   • Action

     Action	Description
     Request Data Interface	Requests server data again. Data sent by an upstream data processing node or layer node is used as query parameters. For example, if the API data source is https://api.test and the data passed to request data interface is { id: '1'}, the final request URL is https://api.test?id=1.
     Import data	Imports pre-processed data in the widget drawing format to redraw the widget without requesting server data again. For specific data examples, see the Data Response Result section on the Data Source tab in the right-side configuration panel of the canvas editor.
     Switch Display /Hide	Toggles the visibility of a widget. No parameters are required.
     Display	Displays the widget. For more information, see the data example. { "animationType": "",// The animation method. Valid value: fade. If you do not specify this parameter, no animation is generated. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     Hide	Hides the widget. For more information, see the data example. { "animationType": "",// The animation method. Valid value: fade. If you do not specify this parameter, no animation is generated. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     Update component configurations	Dynamically updates the style configurations of the widget. In the Style panel, click Copy Configuration to Clipboard to obtain the configuration data. Then, modify the style field in the data processing node in Blueprint Editor.