series-map

object Map series component. Used to configure the type of chart series. It contains various properties of chart series, including chart type, style settings, animation effects, etc.

series-map.type = 'map'

string

series-map.name = 'three-auto-map'

string

Map name. This name can help identify and manage multiple map instances.

series-map.id = 0

number | string

Set a unique identifier ID for the map. This can be in numeric or string form, used to distinguish different map instances in complex applications.

series-map.json

JSON Map geographic GeoJSON file. This JSON file records the map's geometric data (geometry) and basic geographic information.

Note

First you need to create a geographic JSON file.

China Map JSON Files

World Map JSON Files

series-map.animation = true

boolean

Enable map region animation.

series-map.animationDuration = 1000

number

Map region animation transition time in milliseconds.

series-map.animationEasing = 'power1.inOut'

string

Map region animation easing function.

series-map.animationDelay = 0

number

Animation delay time in milliseconds. When the chart loads, the animation will start after this delay.

series-map.eventName = 'click'

number

Map region animation trigger event.

Options

• click Click event
• dblclick Double-click event
• mousedown Mouse button is pressed down.
• mouseup Mouse button is released.
• mousemove Mouse is moved.
• mouseover Mouse moves over an element.
• mouseout Mouse moves away from an element.

series-map.selectedOffset

Offset of the selected item. This configuration is usually used to adjust the visual effect of the selected item.

series-map.tooltip

object

Tooltip settings. When the mouse hovers over a region on the map, a tooltip will pop up to display relevant information.

series-map.tooltip.show = true

boolean

Controls whether to display the tooltip. Currently set to true, i.e., tooltip is enabled.

series-map.tooltip.className

string

Specify a CSS class name for the tooltip for style customization.

series-map.tooltip.background

string

Set the background color of the tooltip.

series-map.tooltip.borderWidth

number

Define the width of the tooltip border in pixels.

series-map.tooltip.padding

string

Set the padding between the tooltip content and border.

series-map.tooltip.hideDelay

number

Set the delay time before the tooltip automatically hides, in milliseconds.

series-map.tooltip.textStyle

object

Define the text style in the tooltip.

series-map.tooltip.textStyle['font-size']

string

Text font size.

series-map.tooltip.textStyle.color

string

Text color.

series-map.tooltip.textStyle['font-weight']

number

Text font weight.

series-map.tooltip.textStyle['font-style']

string

Text font style.

series-map.label

object

Label settings. Used to customize the label style for each region on the map.

series-map.label.show

boolean

Controls whether to display labels.

series-map.label.distance

number

Defines the distance between the label and its corresponding map region.

series-map.label.rotation

object

Set the rotation angle of the label.

series-map.label.rotation.x

number

Rotation angle on the X-axis.

series-map.label.rotation.y

number

Rotation angle on the Y-axis.

series-map.label.rotation.z

number

Rotation angle on the Z-axis.

series-map.label.textStyle

object

Define the text style of the label.

series-map.label.textStyle['font-size']

string

Text font size.

series-map.label.textStyle.color

string

Text color.

series-map.label.textStyle['font-weight']

number

Text font weight.

series-map.label.textStyle['font-style']

string

Text font style.

series-map.label.textStyle.bold

boolean

Whether to bold the text.

series-map.itemStyle

object

Item style settings. Allows customization of the appearance of each item on the map, such as material, color, transparency.

series-map.itemStyle.depth

number

Set the depth of the map.

series-map.itemStyle.bevelEnabled

boolean

Whether to enable bevel effect.

series-map.itemStyle.bevelSegments

number

Number of bevel segments.

series-map.itemStyle.bevelSize

number

Bevel size.

series-map.itemStyle.bevelThickness

number

Bevel thickness.

series-map.itemStyle.extrudeFaces

object

Extruded faces configuration.

series-map.itemStyle.extrudeFaces.material

string

Material type used for extruded faces.

Options

THREE.ShaderMaterial | THREE.MeshBasicMaterial | THREE.MeshDepthMaterial | THREE.MeshLambertMaterial | THREE.MeshMatcapMaterial | THREE.MeshNormalMaterial | THREE.MeshPhongMaterial | THREE.MeshStandardMaterial | THREE.MeshToonMaterial

series-map.itemStyle.extrudeFaces.color

string

Color of the extruded faces.

series-map.itemStyle.extrudeFaces.opacity

number

Transparency of the extruded faces.

series-map.itemStyle.extrudeFaces.metalness

number

Metalness of the extruded faces.

series-map.itemStyle.extrudeFaces.roughness

number

Roughness of the extruded faces.

series-map.itemStyle.crossSection

object

Cross-section configuration.

series-map.itemStyle.crossSection.material = 'MeshNormalMaterial'

string

Material type used for cross-section.

Options

THREE.ShaderMaterial | THREE.MeshBasicMaterial | THREE.MeshDepthMaterial | THREE.MeshLambertMaterial | THREE.MeshMatcapMaterial | THREE.MeshNormalMaterial | THREE.MeshPhongMaterial | THREE.MeshStandardMaterial | THREE.MeshToonMaterial

series-map.itemStyle.crossSection.opacity

number

Transparency of the cross-section.

series-map.itemStyle.crossSection.color

string

Color of the cross-section.

series-map.itemStyle.lineStyle

object

Line style settings.

series-map.itemStyle.lineStyle.show

boolean

Controls whether to display lines.

series-map.itemStyle.lineStyle.color

string

Line color.

series-map.itemStyle.lineStyle.width

number

Line width.