ipecharts.option.globe module#
- class ipecharts.option.globe.Globe(**kwargs: Any)[source]#
Bases:
BaseWidget- Warning:
Autogenerated class
Globe component. The component provides the drawing of the Earth and the coordinate system. The developer can display 3D Scatter, 3D Bubble, 3D Bar, 3D Lines on it.
- show Bool(None)#
Whether to show the globe component.
- zlevel Float(None)#
The layer in which the component is located.
zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid the crash.
Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.
Note: The layers of the components in echarts-gl need to be separated from the layers of the components in echarts. The same zlevel cannot be used for both WebGL and Canvas drawing at the same time.
- left Union(None)#
Distance between component and the left side of the container.
left value can be instant pixel value like 20; it can also be a percentage value relative to container width like ‘20%’; and it can also be ‘left’, ‘center’, or ‘right’.
If the left value is set to be ‘left’, ‘center’, or ‘right’, then the component will be aligned automatically based on position.
- top Union(None)#
Distance between component and the top side of the container.
top value can be instant pixel value like 20; it can also be a percentage value relative to container width like ‘20%’; and it can also be ‘top’, ‘middle’, or ‘bottom’.
If the top value is set to be ‘top’, ‘middle’, or ‘bottom’, then the component will be aligned automatically based on position.
- right Union(None)#
Distance between component and the right side of the container.
right value can be instant pixel value like 20; it can also be a percentage value relative to container width like ‘20%’.
Adaptive by default.
- bottom Union(None)#
Distance between component and the bottom side of the container.
bottom value can be instant pixel value like 20; it can also be a percentage value relative to container width like ‘20%’.
Adaptive by default.
- width Union(None)#
The width of the view of the component.
- height Union(None)#
The height of the view of the component.
- globeRadius Float(None)#
The radius of the globe. The unit is relative to the three-dimensional space, related to [viewControl.distance](#globe.viewControl.distance).
- globeOuterRadius Float(None)#
The outer radius of the globe. This area between globeRadius and globeOuterRadius will be used to display 3D histograms, scatter plots, etc.
- environment Unicode(None)#
Environment map. Support for solid colors, gradual colors, URL of panoramic texture. The default is ‘auto’, which is used as the environment texture when [light.ambientCubemap.texture](#.light.ambientCubemap.texture) is configured. Otherwise, the environment texture is not displayed.
Example:
``` // Configure as a panoramic texture environment: ‘asset/starfield.jpg’ // Configured as a solid black background environment: ‘#000’ // Configured as a background with a vertical gradient environment: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: ‘#00aaff’ // Sky color
- }, {
offset: 0.7, color: ‘#998866’ // Ground color
- }, {
offset: 1, color: ‘#998866’ // Ground color
}], false)
- baseTexture Union(None)#
The texture of the globe. Support for the string of image paths, images object or Canvas objects.
It also supports to use an echarts example as a texture directly, in which case mouse actions on Earth will be linked to the echarts instance used on the texture.
Example:
``` // Use the globe’s texture image baseTexture: ‘asset/earth.jpg’
// Use the world map example of echarts as a texture. var canvas = document.createElement(‘canvas’); var mapChart = echarts.init(canvas, null, {
width: 4096, height: 2048
}); mapChart.setOption({
- series[
- {
type: ‘map’, map: ‘world’, // Draw full size echarts example top: 0, left: 0, right: 0, bottom: 0, boundingCoords: [[-180, 90], [180, -90]]
}
]
});#
baseTexture: mapChart
- heightTexture Union(None)#
The high texture of the globe. High textures can be used to match [Bump Map](https://zh.wikipedia.org/wiki/%E5%87%B9%E5%87%B8%E8%B4%B4%E5%9B%BE) to show the light and dark details of the Earth’s surface. The following two images show the difference between using heightTexture and not using heightTexuture.
- displacementTexture Union(None)#
The displacement texture of the vertices of the globe, the default is the same as a heightTexture
Compared to bump maps, The displacement of the vertex is to directly shift the vertices according to the texture. Valid when [displaymentScale](#globe.displaymentScale) is greater than 0.
- displacementScale Float(None)#
The displacement map of the globe’s vertex. The default is 0, which means no displacement. The following two images show the effects of setting different displacementScale.
 
- displacementQuality Unicode(None)#
The quality of the globe’s vertex displacement. Support for ‘low’, ‘medium’, ‘high’, ‘ultra’ settings.Higher quality can show more ground height detail. The following two images show the effects of different displacementQuality.
 
- shading Unicode(None)#
The coloring effect of 3D graphics in globe. The following three coloring methods are supported in echarts-gl:
‘color’ Only display colors, not affected by other factors such as lighting.
‘lambert’ Through the classic [lambert] coloring, can express the light and dark that the light shows.
‘realistic’ Realistic rendering, combined with [light.ambientCubemap](#globe.light.ambientCubemap) and [postEffect](#globe.postEffect), can improve the quality and texture of the display. [Physical Based Rendering (PBR)] (<https://www.marmoset.co/posts/physically-based-rendering-and-you-can-too/>) is used in ECharts GL to represent realistic materials.
Here are the differences between different coloring effects.
  
- realisticMaterial Dict()#
The configuration item of the realistic material is valid when [shading](#globe.shading) is ‘realistic’.
- lambertMaterial Dict()#
The configuration item of the lambert material is valid when [shading](#globe.shading) is ‘lambert’.
- colorMaterial Dict()#
The color material related configuration item is valid when [shading](#globe.shading) is ‘color’.
- light Dict()#
Light related settings. Invalid when [shading](#globe.shading) is ‘color’.
The lighting settings affect the components and all the charts on the component’s coordinate system.
A reasonable lighting setting can make the brightness and darkness of the whole scene richer and more layered.
- postEffect Dict()#
Post-processing effects related configuration. It can add effects such as highlights, depth of field, screen space ambient occlusion (SSAO), toning to the picture. And it can make the whole picture more textured.
The following are the differences between closing postEffect and opening postEffect.
 
Note that when postEffect is enable, [temporalSuperSampling](#globe.temporalSuperSampling) is enable by default. After the picture is still, the picture will continue to be enhanced, including anti-aliasing, depth of field, SSAO, shadows, etc.
- temporalSuperSampling Dict()#
Temporal supersampling. After opening [postEffect](#globe.postEffect), WebGL’s default MSAA (MultiSampling Anti-Aliasing) will not work, so we need to solve the problem of sampling.
Temporal supersampling is an anti-aliasing method. After the picture is still, it will continue to sample multiple times and taken at several instances inside the pixel and an average color value is calculated, thus achieving anti-aliasing effect. And in this process, ECharts-gl also progressively enhances some of the effects in [postEffect](#globe.postEffect) that require sampled guarantees. For example [SSAO](#globe.postEffect.SSAO), [Depth of Field](#globe.postEffect.depthOfField), and shadow.
The following is the difference between not opening temporalSuperSampling and opening temporalSuperSampling.
 
- viewControl Dict()#
viewControl is used for mouse rotation, zooming, and other perspective control.
- layers Any(None)#
Configuration of the Earth’s Surface Layer. You can use this configuration item to add clouds, or to supplement [baseTexture](#globe. baseTexture) to draw the outline of the country, and so on.