Custom area drill-down layer (v3.x)-DataV(DataV)-阿里云帮助中心

A control widget that provides a drop-down form for selecting and submitting data in visualization applications.

Chart style

The Drop-down selector is a control widget that serves as a drop-down form in visualization applications, submitting user-selected data to the backend for processing or displaying selected content on other widgets through interactive configurations.

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.

Input Box

Default Selection: Specifies the default selected item. The value must exist in the value field of the data panel. Otherwise, the placeholder text is displayed (path: Input Box > Content Style > Placeholder Text).

Enhanced Features: Enhanced features for the input box.

Parameter	Description
Dropdown Search	When enabled, you can enter search content in the input box to filter data in the drop-down list.
Clear Selection	When enabled, a icon appears on the right side of the input box after you select an item. Click the icon to clear the selected content.
Disable	Turn on the switch and set the disable value.
Custom Backfill Content	The content displayed in the input box after you select an item. Options: auto (all content by default), value (the value field value), and title (the title field value).

Border Style: The style of the input box border.

Parameter	Description
Default	The line weight, line type, line color, and border radius of the default border.
Hover	The line weight, line type, line color, and border radius of the input box border when you hover the mouse over it.
Selected	The border color when the input box is selected (clicked). The recommended color is the hover color with an opacity of 0.2.

Content Style: The style of the content in the input box.

Parameter	Description
Alignment	The alignment of the placeholder text in the input box. Options include align left, align center, and align right.
Background Color	The background color of the input box. For more information, see Color picker.
Content Text	The style of the content text in the input box, including font, weight, size, and color.
Text Style	The style for the search text, placeholder text, and the text displayed when the drop-down list is empty. Styles include font, weight, size, and color.
Placeholder Text	The content of the placeholder text displayed when the input box is empty.

Arrow Style: The style of the arrow in the input box. Click the icon to show or hide the arrow.

Parameter	Description
Size	The size of the arrow in the input box.
Color	The color of the arrow in the input box.
Right Margin	The distance between the arrow and the right border of the widget.

Clear Style: The style of the clear icon. This can be configured when the Clear Selection feature is enabled.

Parameter	Description
Size	The size of the clear icon.
Color	The color of the clear icon.
Right Margin	The distance between the clear icon and the right border of the widget.
Background Color	The background color of the clear icon.

Drop-down Box

Debug Drop-down Box: Click the icon to enable the debug feature for the drop-down box. This lets you view the configured styles in real time.

Height: The height style of the drop-down box.

Parameter	Description
List Height	The total height of the drop-down list.
Option Height	The height of each option in the drop-down list, in px.

Background: The background color of the drop-down box.

Border: The style of the drop-down box border.

Parameter	Description
Weight	The weight of the border line.
Type	The type of the border line. Options include solid line, dashed line, dotted line, double solid line, engraved, embossed, inset, and outset.
Color	The color of the border.
Border Radius	The radius of the border corners. The value range is 0 to 360. A value of 0 creates a square shape. A value of 360 creates a circular shape.

Text: The style of the option text in the drop-down box.

Parameter	Description
Font	The font of the option text.
Weight	The weight of the option text.
Font Size	The font size of the option text.
Color	The color of the option text.

Margin: The distance between the content of an option and its four borders.

Icon Configuration: The style of the icon to the left of the option text. Click the icon to show or hide the icon configuration.

Note

The value of the Icon Configuration control must match the value of the imgSrc field in the Data Source panel. In the sample data source for the widget, this field is configured by default for the first data item only. To configure icons for other options, you must customize the imgSrc field for the corresponding data items.

Parameter	Description
Width	The width of the icon.
Height	The height of the icon.
Distance to Text	The distance between the icon and the text.

Option Hover Style

Parameter	Description
Background	The background color of an option when you hover the mouse over it.
Text	The style of the text when you hover the mouse over an option, including font, weight, size, and color.

Selected Option Style: The style of the selected option. For configuration details, see Option Hover Style.

Data Source panel

Field	Description
`title`	The display title for each option in the drop-down list.
`value`	The actual value of each option in the drop-down selector. This field must be a string and cannot be an integer.
`isDefaultShow`	(Optional) The default selected value for the drop-down selector.
`imgSrc`	(Optional) The icon for each option. This is displayed only when the Icon Configuration item in the Style panel is enabled.

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 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 icon on the right to check the current data response result, or click the 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 panel

Enable this option to associate global variables, change drop-down option content, trigger data requests, and expose temporary variables for other widgets. By default, the title, value, isDefaultShow, and imgSrc values from the Data Source panel are exposed as variables. For more information, see Configure widget interactions.

Blueprint interactions

Click the icon in the upper-left corner of the page to go to the Blueprint page.
On the Layer Node tab, add the current widget to the main canvas.

View the Blueprint configuration parameters.

Events

Event

Description

When the Drop-down Selector API Request is Complete

Triggered after the data API request returns and the data is processed by the filter. Exposes the processed data in JSON format. For a data example, see the Data Response area on the Data Source tab in the widget's configuration panel.

When a Drop-down Item is Selected

Triggered when a user selects an item from the drop-down list. Exposes the data item that corresponds to the selected value. See the data example.

{
  "title": "Beijing",
  "value": "Beijing City",
  "isDefaultShow": true,
  "imgSrc": "https://img.alicdn.com/tfs/TB1jV1lcF67gK0jSZPfXXahhFXa-128-129.png"
}

Actions

Action	Description
Import data for drop-down selector	Imports data in the component's format to redraw the component without requesting new data from the server. For a data example, see the following code. `[ { "title": "Beijing", "value": "Beijing City", "isDefaultShow": true, "imgSrc": "https://img.alicdn.com/tfs/TB1jV1lcF67gK0jSZPfXXahhFXa-128-129.png" } ]`
Request data for drop-down selector	Requests new data from the server. Data from upstream data processing nodes or layer nodes is passed as parameters. For example, if you set the API data source for the drop-down selector to `https://api.test` and pass the data `{ id: '1'}` to the Request data for drop-down selector action, the final request URL is `https://api.test?id=1`.
Set selected item	Sets the current value of the drop-down selector. For a data example, see the following code. `{ "title": "Shanghai", "value": "Shanghai City" }`
Clear selected item	Clears the selected item in the drop-down selector. This action requires no parameters.
Get current drop-down value	Gets the current value of the drop-down selector. This action requires no parameters.
Revert to default value	Reverts the current value of the drop-down selector to its default value. This action requires no parameters.
Move	Moves the component to a specified position. For a data example, see the following code. { // Move method. `to` for absolute positioning, `by` for relative positioning. Default: `to`. "positionType": "to", // Target position with x and y coordinates. "attr": { "x": 0, "y": 0 }, // Animation method. "animation": { "enable": false, // Animation duration. "animationDuration": 1000, // Animation curve. Options: linear, easeInOutQuad, or easeInOutExpo. "animationEasing": "linear" } }
Toggle visibility	Toggles the component between visible and hidden. This action requires no parameters.
Show	Shows the component. For a data example, see the following code. { "animationType": "",// Animation method. Set to `fade` for a fade effect. Leave blank for no animation. "animationDuration": 1000,// Animation duration in milliseconds (ms). "animationEasing": ""// Animation curve. }
Hide	Hides the component. For a data example, see the following code. { "animationType": "",// Animation method. Set to `fade` for a fade effect. Leave blank for no animation. "animationDuration": 1000,// Animation duration in milliseconds (ms). "animationEasing": ""// Animation curve. }
Update component configuration	Dynamically updates the style configuration of the component. First, in the component's Style panel, click Copy configuration to clipboard to get the component's configuration data. Then, in the data processing node on the blueprint editor's configuration page, change the field values for the styles as needed.

Demo

Use the Drop-down selector to dynamically display a city choropleth layer on a basic plane map.

Access the DataV console.
Select a dashboard and click Edit to open the canvas editor.
Follow the steps in the figure to add the Drop-down selector and Basic Plane Map 4.0 widgets to the canvas.

Click the Drop-down selector. On the Data Source panel, modify the static data.

[
  {
    "title": "Beijing",
    "value": "Beijlng",
    "lng": 116.40632076,
    "lat": 39.89450291,
    "isDefaultShow": true,
    "adcode": "110000",
    "colorField": 1200,
    "textureShapeField": "A",
    "textureColorField": 1200,
    "info": "Beijing City"
  },
  {
    "title": "Shanghai",
    "value": "Shanghai",
    "lng": 121.47299061,
    "lat": 31.22716135,
    "adcode": "310000",
    "colorField": 1200,
    "textureShapeField": "B",
    "textureColorField": 150,
    "info": "Shanghai City"
  },
  {
    "title": "Guangdong",
    "value": "Guangdong",
    "lng": 113.2571588,
    "lat": 23.09843572,
    "adcode": "440000",
    "colorField": 1200,
    "textureShapeField": "B",
    "textureColorField": 200,
    "info": "Guangdong Province"
  },
  {
    "title": "Shenzhen",
    "value": "Shenzhen",
    "lng": 114.05894426,
    "lat": 22.54231542,
    "adcode": "440300",
    "colorField": 1200,
    "textureShapeField": "B",
    "textureColorField": 700,
    "info": "Shenzhen City"
  },
  {
    "title": "Tianjin",
    "value": "Tianjin",
    "lng": 117.19545325,
    "lat": 39.07749431,
    "adcode": "120000",
    "colorField": 1200,
    "textureShapeField": "B",
    "textureColorField": 1500,
    "info": "Tianjin City"
  },
  {
    "title": "Chongqing",
    "value": "Chongqlng",
    "lng": 106.54702949,
    "lat": 29.53667791,
    "adcode": "500000",
    "colorField": 1200,
    "textureShapeField": "B",
    "textureColorField": 800,
    "info": "Chongqing City"
  },
  {
    "title": "Jiangsu",
    "value": "Jiangsu",
    "lng": 118.7892579,
    "lat": 32.04676609,
    "adcode": "320000",
    "colorField": 1200,
    "textureShapeField": "B",
    "textureColorField": 100,
    "info": "Jiangsu Province"
  },
  {
    "title": "Sichuan",
    "value": "Sichuan",
    "lng": 104.04941941,
    "lat": 30.5477514,
    "adcode": "510000",
    "colorField": 1200,
    "textureShapeField": "B",
    "textureColorField": 1200,
    "info": "Sichuan Province"
  },
  {
    "title": "Hubei",
    "value": "Hubei",
    "lng": 114.30359243,
    "lat": 30.57913598,
    "adcode": "420000",
    "colorField": 1200,
    "textureShapeField": "B",
    "textureColorField": 400,
    "info": "Hubei Province"
  },
  {
    "title": "Shaanxi",
    "value": "Shanxi",
    "lng": 108.92574006,
    "lat": 34.30156022,
    "adcode": "610000",
    "colorField": 1200,
    "textureShapeField": "B",
    "textureColorField": 600,
    "info": "Shaanxi Province"
  },
  {
    "title": "Qinghai",
    "value": "Qlnghai",
    "lng": 101.78380219,
    "lat": 36.58760494,
    "adcode": "630000",
    "colorField": 1200,
    "textureShapeField": "B",
    "textureColorField": 200,
    "info": "Qinghai Province"
  }
]

Click the Basic Plane Map 4.0 widget, select the Choropleth Layer, and delete the static data from Data Source > Data API.
Click the icon in the upper-left corner of the page to go to the Blueprint page.
On the Layer Node tab, add the Choropleth Layer, Basic Plane Map 4.0, and Drop-down selector to the main canvas.
On the Logic Node tab, add two Serial Data Processing nodes to the main canvas.
Connect the widgets.

Configure the processing methods for the Serial Data Processing nodes.

Set display position

return {
  "zoom": 7,//Zoom level
  "lat": data.lat,//Latitude
  "lng": data.lng,//Longitude
  "duration": 0.25//Response time interval
}

Target choropleth layer

return [{
  "adcode": data.adcode,
  "name": data.name,
  "colorField": data.colorField,
  "textureShapeField": data.textureShapeField,
  "textureColorField": data.textureColorField,
  "info": data.info
}]

Click Preview in the upper-right corner of the page to preview the result.