geo3D map parameter - map type
The map option specifies the map type to display in the 3D geo component. It accepts a string value representing the map name, such as 'china'. The map type used in ECharts-gl is the same as the geo component. ECharts provides map data in two formats: JavaScript files that can be imported directly via script tag (data is automatically registered), and JSON files that must be registered manually after being loaded asynchronously via AJAX.
Registering maps in ECharts - JavaScript format
Maps can be loaded as JavaScript files directly through a script tag. After inclusion, the map name and data are automatically registered. For example: <script src="map/js/china.js"></script> followed by setting series type to 'map' with map: 'china'.
Registering maps in ECharts - JSON format
Maps can be loaded as JSON files asynchronously via AJAX, then registered manually using echarts.registerMap(). For example: $.get('map/json/china.json', function (chinaJson) { echarts.registerMap('china', chinaJson); ... }).
geo3D map data format - GeoJSON
ECharts uses geoJSON format as the outline of maps. Map data can be obtained in geoJSON format by various means and registered in ECharts.
geo3D regionHeight parameter - default value
The regionHeight option specifies the height of each area of the 3D map. The default value is 3. This height represents the height of the model and must be less than boxHeight. The difference (boxHeight - regionHeight) is used for display of 3D bar, 3D scatter, and similar graphics.
geo3D groundPlane configuration
The groundPlane object allows the entire assembly to be visually 'placed' to make the scene more realistic. groundPlane supports separate realisticMaterial, colorMaterial, lambertMaterial and other material settings. If not set, the component's material parameters are used by default.
geo3D groundPlane show parameter - default value
The show option within groundPlane controls whether to display the ground. The default value is false.
geo3D groundPlane color parameter - default value
The color option within groundPlane specifies the color of the ground. The default value is '#aaa'.
geo3D instancing parameter - performance optimization
The instancing option with value true will merge all geometry objects in GeoJSON into one. When GeoJSON contains many (thousands) geometry objects, this can effectively improve drawing efficiency. The default value is false.
geo3D label configuration - default show
The label object controls the setting of labels on the 3D map. By default, label display is false.
geo3D itemStyle configuration
The itemStyle object controls visual properties of 3D graphics in the geo3D component, including color, transparency, and strokes. It supports color palette and callbacks.
geo3D emphasis configuration - hover highlight
The emphasis object specifies graphic and label styles when mouse hover is highlighted on the 3D map. It contains label and itemStyle sub-options for customizing highlighted appearance.
geo3D regions data configuration - area properties
The regions array option (or data in map components) configures individual map area settings. Each region entry can have name (string), regionHeight (number), itemStyle (Object), label (Object), and emphasis (Object) properties. The name property specifies the map area name such as 'Guangdong' or 'Zhejiang'.
geo3D region regionHeight parameter - per-area height
The regionHeight option within a region definition specifies the height of that individual area. Different heights can be set across different regions to express data size differences. When GeoJSON represents building data, this value can represent approximate building height.
geo3D itemStyle borderWidth parameter - default value
The borderWidth option within itemStyle specifies the width of the border around map areas. The default value is 0. With a border, individual areas can be distinguished more clearly.
geo3D itemStyle borderColor parameter - default value
The borderColor option within itemStyle specifies the color of the border around map areas. The default value is '#333'.
geo3D label default text properties
The label object in geo3D has default text properties: distance is 2, fontSize is 20, color is '#000', borderWidth is 1, and borderColor is '#fff'.
geo3D boxDepth parameter - automatic scale
The boxDepth parameter for geo3D component depth defaults to automatic mode, which ensures that the scale of the 3D component matches the ratio of the input GeoJSON data.
geo3D boxHeight parameter - contains bar and scatter
The boxHeight parameter specifies the component height in geo3D. This height includes the height allocated for 3D bars and 3D scatter plots on the 3D map.
mapbox3D component overview and setup
The mapbox3D component is a geographic component based on mapbox-gl-js that supports drawing 3D Scatter, 3D Lines, 3D Bar, and 3D map series on mapbox maps. To use it, first introduce the mapbox-gl-js SDK by including script and link tags for version 0.38.0 or later, then set the mapboxgl.accessToken to your token provided by mapbox, then use the mapbox3D component in setOption just like any other component.
mapbox3D style option
The style option accepts a string or Object that sets the style of the Mapbox map. It follows the same specification as the mapbox-gl-js style spec at https://www.mapbox.com/mapbox-gl-js/style-spec/. Example: style: 'mapbox://styles/mapbox/dark-v9'.
mapbox3D center option
The center option accepts an Array that sets the longitude and latitude of the center of the map. Example: center: [104.114129, 37.550339] where the first value is longitude and the second is latitude.
mapbox3D zoom option
The zoom option accepts a number that sets the zoom level of the map. See https://www.mapbox.com/mapbox-gl-js/style-spec/#root-zoom for details on zoom levels.
mapbox3D bearing option default 0
The bearing option accepts a number that sets the bearing angle of the map. The default value is 0. See https://www.mapbox.com/mapbox-gl-js/style-spec/#root-bearing for details.
mapbox3D pitch option default 0
The pitch option accepts a number that sets the pitch angle of the map. The default value is 0, which means perpendicular to the surface of the map. The maximum value is 60. See https://www.mapbox.com/mapbox-gl-js/style-spec/#root-pitch for details.
mapbox3D altitudeScale option default 1
The altitudeScale option accepts a number that sets the zoom of the altitude scale. The default value is 1.
mapbox3D setup code example
To set up mapbox3D with a specific style, zoom, and center: mapboxgl.accessToken = 'your token'; chart.setOption({ mapbox3D: { style: 'mapbox://styles/mapbox/dark-v9', center: [104.114129, 37.550339], zoom: 3 } });
geo3DIndex default and purpose
geo3DIndex specifies which geo3D component the series uses, with a default value of 0 (the first geo3D component). It is only applicable when coordinateSystem is set to 'geo3D'.
viewControl component overview
viewControl is used for mouse rotation, zooming, and other perspective control in 3D visualizations.
projection option: perspective or orthogonal
The projection option sets the way of projection. It accepts 'perspective' (default) or 'orthogonal'. This setting affects which distance options are valid: perspective mode uses distance, minDistance, and maxDistance; orthographic mode uses orthographicSize, minOrthographicSize, and maxOrthographicSize.
autoRotate option for automatic rotation
The autoRotate option (boolean, default false) enables or disables automatic rotation of the angle of view around the object.
damping controls inertial movement
The damping option (number, default 0.8) controls the damping effect when the mouse performs rotation, zoom, or other operations. When greater than 0, the angle of view will continue to move due to inertia after the mouse becomes still.
rotateSensitivity: number or array for rotation control
The rotateSensitivity option (number or array, default 1) controls the sensitivity of rotation operations. Greater values make rotation more sensitive. Setting to 0 disables rotation. When using an array, it sets horizontal and vertical rotation sensitivity separately: [1, 0] allows only horizontal rotation; [0, 1] allows only vertical rotation.
distance for perspective projection: default 150
The distance option (number, default 150) sets the distance of the default perspective view from the subject. For globe, it represents the distance from the Earth's surface. For grid3D and geo3D, it represents the distance from the center origin. This option is only valid when projection is set to 'perspective'.
minDistance and maxDistance constrain perspective zoom
The minDistance option (number, default 40) sets the minimum distance that mouse control can bring the angle of view to the subject. The maxDistance option (number, default 400) sets the maximum distance that mouse control can extend the angle of view from the subject. Both are only valid when projection is set to 'perspective'.
orthographicSize for orthogonal projection
The orthographicSize option (number, default 150) sets the size of the orthogonal projection viewport. This option is only valid when projection is set to 'orthographic'.
minOrthographicSize and maxOrthographicSize for orthographic scaling
The minOrthographicSize option (number, default 400) sets the minimum value for orthographic projection scaling. The maxOrthographicSize option (number, default 20) sets the maximum value for orthographic projection scaling. Both are only valid when projection is set to 'orthographic'.
center: rotation center point for viewControl
The center option (array, default [0,0,0]) sets the center point of the angle of view. The rotation will also rotate around this center point.
minAlpha and maxAlpha constrain up/down rotation
The minAlpha option (number, default -90) sets the minimum alpha value for up and down rotation, which is the uppermost angle the view can reach. The maxAlpha option (number, default 90) sets the maximum alpha value for up and down rotation, which is the lowest angle the view can reach.
minBeta and maxBeta constrain left/right rotation
The minBeta option (number, default -Infinity) sets the minimum beta value for left and right rotation, which is the leftmost angle the view can reach. The maxBeta option (number, default Infinity) sets the maximum beta value for left and right rotation, which is the rightmost angle the view can reach.