globe layers distance option
Each layer has a distance option (number, default: null) that sets the distance from the overlay to the surface of the globe. This is valid only when type is 'overlay'.
globe
28 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
globe layers texture option
Each layer has a texture option that accepts a string (image path), HTMLImageElement, HTMLCanvasElement, or EChartsInstance. It sets the texture for the layer. When using an ECharts instance, mouse actions will be linked to that instance.
globe component overview
The globe component provides drawing of the Earth and a coordinate system. Developers can display 3D Scatter, 3D Bubble, 3D Bar, and 3D Lines on the globe.
globe show option
The show option is a boolean (default: true) that controls whether the globe component is displayed.
globe globeRadius option
The globeRadius option is a number (default: 100) that sets the radius of the globe. The unit is relative to the three-dimensional space and relates to viewControl.distance.
globe globeOuterRadius option
The globeOuterRadius option is a number (default: 150) that sets the outer radius of the globe. The area between globeRadius and globeOuterRadius is used to display 3D histograms, scatter plots, and other elements.
globe baseTexture option
The baseTexture option accepts a string (image path), HTMLImageElement, HTMLCanvasElement, or EChartsInstance. It sets the texture of the globe. When using an ECharts instance as a texture, mouse actions on the Earth will be linked to that instance.
globe baseTexture example with image path
To use an image file as globe texture, set baseTexture to the image path as a string: baseTexture: 'asset/earth.jpg'
globe baseTexture example with echarts map
To use an ECharts map instance as a globe texture, create a canvas, initialize an ECharts instance on it with the map series, then assign the instance to baseTexture. The canvas should have dimensions (e.g., 4096x2048) and the map series should use boundingCoords like [[-180, 90], [180, -90]] to fill the canvas completely.
globe heightTexture option
The heightTexture option accepts a string (image path), HTMLImageElement, or HTMLCanvasElement. It provides a height texture that matches a bump map to show light and dark details of the Earth's surface.
globe displacementTexture option
The displacementTexture option accepts a string (image path), HTMLImageElement, or HTMLCanvasElement. It sets the displacement texture for the globe's vertices; by default it is the same as heightTexture. Vertex displacement directly shifts vertices according to the texture and is valid when displacementScale is greater than 0.
globe displacementScale option
The displacementScale option is a number (default: 0) that sets the displacement amount for the globe's vertices. A value of 0 means no displacement occurs.
globe displacementQuality option
The displacementQuality option is a string (default: 'medium') that sets the quality of the globe's vertex displacement. Supported values are 'low', 'medium', 'high', and 'ultra'. Higher quality settings show more ground height detail.
globe viewControl.targetCoord option
The targetCoord option within viewControl accepts an array of [longitude, latitude] to position the globe at a specific coordinate. When set, it overrides the alpha and beta angle settings.
globe viewControl.targetCoord example
To locate the globe view at Beijing, use: viewControl: { targetCoord: [116.46, 39.92] }
globe layers option
The layers option is an array that configures Earth's surface layers. Layers can be used to add clouds or supplement the baseTexture to draw country outlines and other overlay elements.
globe layers show option
Each layer has a show option (boolean, default: true) that controls whether that layer is displayed.
globe layers type option
Each layer has a type option (string, default: 'overlay') that specifies the layer type. Supported values are 'overlay' (overlay on ground surface for clouds, etc.) and 'blend' (mix with baseTexture).
globe layers name option
Each layer has a name option (string) that identifies the layer. When using setOption to update layer properties, the name is used to identify which layer to update.
globe layers name example
To update the texture of a layer named 'cloud', use: chart.setOption({ globe: { layer: [{ name: 'cloud', texture: 'cloud.png' }] } })
globe layers blendTo option
Each layer has a blendTo option (string, default: 'albedo') that is valid when type is 'blend'. Supported values are 'albedo' (mixed and affected by lighting) and 'emission' (mixed as self-illuminating, unaffected by light).
globe layers intensity option
Each layer has an intensity option (number, default: 1) that sets the intensity of the mixture effect.
globe layers shading option
Each layer has a shading option (string, default: 'lambert') that sets the coloring effect. Supported values are 'color', 'lambert', and 'realistic'. This is valid only when type is 'overlay'.
environment option default and behavior
The environment option has a default value of 'auto'. When set to 'auto', it displays as an environment texture only if light.ambientCubemap.texture is configured. Otherwise, the environment texture is not displayed.
environment option accepts panoramic texture URL
The environment option accepts a URL string pointing to a panoramic texture file, for example 'asset/starfield.jpg'.
environment option accepts solid color hex
The environment option accepts a solid color specified as a hex string, for example '#000' for a solid black background.
environment option accepts LinearGradient
The environment option accepts a LinearGradient instance created with echarts.graphic.LinearGradient() to display a gradient background. Example: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: '#00aaff'}, {offset: 0.7, color: '#998866'}, {offset: 1, color: '#998866'}], false) creates a vertical gradient from sky blue at the top to ground brown at the bottom.
globeIndex default and purpose
globeIndex specifies which globe component the series uses, with a default value of 0 (the first globe component). It is only applicable when coordinateSystem is set to 'globe'.