| {"$schema":"https://echarts.apache.org/doc/json-schem","option":{"type":"Object","properties":{"globe":{"type":["Object"],"description":"<p>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.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the globe component.</p>\n","default":true},"zlevel":{"type":["number"],"description":"<p>The layer in which the component is located.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> 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 <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid the crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n<p><strong>Note:</strong> The layers of the components in echarts-gl need to be separated from the layers of the components in echarts. The same <code class=\"codespan\">zlevel</code> cannot be used for both WebGL and Canvas drawing at the same time.</p>\n","default":-10},"left":{"type":["string","number"],"description":"<p>Distance between component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>; and it can also be <code class=\"codespan\">'left'</code>, <code class=\"codespan\">'center'</code>, or <code class=\"codespan\">'right'</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">'left'</code>, <code class=\"codespan\">'center'</code>, or <code class=\"codespan\">'right'</code>, then the component will be aligned automatically based on position.</p>\n","default":"auto"},"top":{"type":["string","number"],"description":"<p>Distance between component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>; and it can also be <code class=\"codespan\">'top'</code>, <code class=\"codespan\">'middle'</code>, or <code class=\"codespan\">'bottom'</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">'top'</code>, <code class=\"codespan\">'middle'</code>, or <code class=\"codespan\">'bottom'</code>, then the component will be aligned automatically based on position.</p>\n","default":"auto"},"right":{"type":["string","number"],"description":"<p>Distance between component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>.</p>\n<p> Adaptive by default.</p>\n","default":"auto"},"bottom":{"type":["string","number"],"description":"<p>Distance between component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>.</p>\n<p> Adaptive by default.</p>\n","default":"auto"},"width":{"type":["string","number"],"description":"<p> The width of the view of the component.</p>\n","default":"auto"},"height":{"type":["string","number"],"description":"<p> The height of the view of the component.</p>\n","default":"auto"},"globeRadius":{"type":["number"],"description":"<p>The radius of the globe. The unit is relative to the three-dimensional space, related to <a href=\"#globe.viewControl.distance\">viewControl.distance</a>.</p>\n","default":100},"globeOuterRadius":{"type":["number"],"description":"<p>The outer radius of the globe. This area between <code class=\"codespan\">globeRadius</code> and <code class=\"codespan\">globeOuterRadius</code> will be used to display 3D histograms, scatter plots, etc.</p>\n","default":150},"environment":{"type":["string"],"description":"<p>Environment map. Support for solid colors, gradual colors, URL of panoramic texture. The default is <code class=\"codespan\">'auto'</code>, which is used as the environment texture when <a href=\"#.light.ambientCubemap.texture\">light.ambientCubemap.texture</a> is configured. Otherwise, the environment texture is not displayed.</p>\n<p>Example: </p>\n<pre><code class=\"lang-js\">// Configure as a panoramic texture\nenvironment: 'asset/starfield.jpg'\n// Configured as a solid black background\nenvironment: '#000'\n// Configured as a background with a vertical gradient\nenvironment: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{\n offset: 0, color: '#00aaff' // Sky color\n}, {\n offset: 0.7, color: '#998866' // Ground color\n}, {\n offset: 1, color: '#998866' // Ground color\n}], false)\n\n</code></pre>\n","default":"'auto'"},"baseTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement","EChartsInstance"],"description":"<p>The texture of the globe. Support for the string of image paths, images object or Canvas objects.</p>\n<p>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.</p>\n<p>Example: </p>\n<pre><code class=\"lang-js\">// Use the globe's texture image\nbaseTexture: 'asset/earth.jpg'\n\n// Use the world map example of echarts as a texture.\nvar canvas = document.createElement('canvas');\nvar mapChart = echarts.init(canvas, null, {\n width: 4096, height: 2048\n});\nmapChart.setOption({\n series : [\n {\n type: 'map',\n map: 'world',\n // Draw full size echarts example\n top: 0, left: 0,\n right: 0, bottom: 0,\n boundingCoords: [[-180, 90], [180, -90]]\n }\n ]\n});\n...\nbaseTexture: mapChart\n\n</code></pre>\n"},"heightTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"],"description":"<p>The high texture of the globe. High textures can be used to match <a href=\"https://zh.wikipedia.org/wiki/%E5%87%B9%E5%87%B8%E8%B4%B4%E5%9B%BE\" target=\"_blank\">Bump Map</a> to show the light and dark details of the Earth's surface.\nThe following two images show the difference between using <code class=\"codespan\">heightTexture</code> and not using <code class=\"codespan\">heightTexuture</code>.</p>\n<p><img width=\"400\" height=\"auto\" src=\"documents/asset/gl/img/heightmap-enable.png\"></p>\n<p><img width=\"400\" height=\"auto\" src=\"documents/asset/gl/img/heightmap-disable.png\"></p>\n"},"displacementTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"],"description":"<p>The displacement texture of the vertices of the globe, the default is the same as a <a href=\"\" target=\"_blank\">heightTexture</a></p>\n<p>Compared to bump maps, The displacement of the vertex is to directly shift the vertices according to the texture. Valid when <a href=\"#globe.displaymentScale\">displaymentScale</a> is greater than 0.</p>\n"},"displacementScale":{"type":["number"],"description":"<p>The displacement map of the globe's vertex. The default is 0, which means no displacement.\nThe following two images show the effects of setting different <code class=\"codespan\">displacementScale</code>.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/displacement-disable.png\" width=\"100%\" title=\"Scale: 0\"><img />\n <img src=\"documents/asset/gl/img/displacement-enable.png\" width=\"100%\" title=\"Scale: 0.1\"><img />\n<div />\n","default":0},"displacementQuality":{"type":["string"],"description":"<p>The quality of the globe's vertex displacement. Support for <code class=\"codespan\">'low'</code>, <code class=\"codespan\">'medium'</code>, <code class=\"codespan\">'high'</code>, <code class=\"codespan\">'ultra'</code> settings.Higher quality can show more ground height detail. \nThe following two images show the effects of different <code class=\"codespan\">displacementQuality</code>.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/displacement-low.png\" width=\"100%\" title=\"Low\"><img />\n <img src=\"documents/asset/gl/img/displacement-ultra.png\" width=\"100%\" title=\"Ultra\"><img />\n<div />\n\n\n\n","default":"'medium'"},"shading":{"type":["string"],"description":"<p>The coloring effect of 3D graphics in 地球. The following three coloring methods are supported in echarts-gl:</p>\n<ul>\n<li><p><code class=\"codespan\">'color'</code>\nOnly display colors, not affected by other factors such as lighting.</p>\n</li>\n<li><p><code class=\"codespan\">'lambert'</code>\nThrough the classic [lambert] coloring, can express the light and dark that the light shows.</p>\n</li>\n<li><p><code class=\"codespan\">'realistic'</code>\nRealistic rendering, combined with <a href=\"#globe.light.ambientCubemap\">light.ambientCubemap</a> and <a href=\"#globe.postEffect\">postEffect</a>, can improve the quality and texture of the display. [Physical Based Rendering (PBR)] (<a href=\"https://www.marmoset.co/posts/physically-based-rendering-and-you-can-too/\" target=\"_blank\">https://www.marmoset.co/posts/physically-based-rendering-and-you-can-too/</a>) is used in ECharts GL to represent realistic materials.</p>\n</li>\n</ul>\n<p>Here are the differences between different coloring effects.</p>\n<p><img width=\"250\" height=\"auto\" src=\"documents/asset/gl/img/globe-shading-color.png\">\n<img width=\"250\" height=\"auto\" src=\"documents/asset/gl/img/globe-shading-lambert.png\">\n<img width=\"250\" height=\"auto\" src=\"documents/asset/gl/img/globe-shading-realistic.png\"></p>\n"},"realisticMaterial":{"type":["Object"],"description":"<p>The configuration item of the realistic material is valid when <a href=\"#globe.shading\">shading</a> is <code class=\"codespan\">'realistic'</code>.</p>\n","properties":{"detailTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"],"description":"<p>The texture map of the material detail.</p>\n"},"textureTiling":{"type":["number"],"description":"<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n","default":1},"textureOffset":{"type":["number"],"description":"<p>The displacement of the texture detail texture.</p>\n","default":0},"roughness":{"type":["number","string","HTMLImageElement","HTMLCanvasElement"],"description":"<p>The <code class=\"codespan\">roughness</code> attribute is used to indicate the roughness of the material, <code class=\"codespan\">0</code> is completely smooth, <code class=\"codespan\">1</code> is completely rough, and the middle value is between the two.</p>\n<p>The following images show the effect of <code class=\"codespan\">roughness</code> in <a href=\"#globe\"><code class=\"codespan\">globe</code></a> <code class=\"codespan\">0.2</code> (smooth) and <code class=\"codespan\">0.8</code> (rough).</p>\n<p><img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-gloss.png\">\n<img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-rough.png\"></p>\n<p>When you want to express more complex materials. You can set <code class=\"codespan\">roughness</code> directly to the texture that stores the roughness with each pixel as follows.</p>\n<p><img width=\"300\" height=\"300\" src=\"documents/asset/gl/img/roughness.png\"></p>\n<p>The more white the color in the texture, the larger the value and the rougher it is. You can get texture resources of different materials from resource websites such as [<a href=\"http://freepbr.com/]\" target=\"_blank\">http://freepbr.com/]</a> (<a href=\"http://freepbr.com/)\" target=\"_blank\">http://freepbr.com/)</a>. You can also generate it yourself using other tools.</p>\n","default":0.5},"metalness":{"type":["number","string","HTMLImageElement","HTMLCanvasElement"],"description":"<p>The <code class=\"codespan\">metalness</code> attribute is used to indicate whether the material is metal or non-metal, <code class=\"codespan\">0</code> is non-metallic, <code class=\"codespan\">1</code> is metal, and the middle value is between the two. Usually set to <code class=\"codespan\">0</code> and <code class=\"codespan\">1</code> to meet most of the scenes.</p>\n<p>The picture below show the difference between `metal' and '0' in <a href=\"#globe\">globe</a>.</p>\n<p><img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-metal.png\">\n<img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-non-metal.png\"></p>\n<p>As with <a href=\"#globe.realisticMaterial.roughness\">roughness</a> you can set <code class=\"codespan\">metalness</code> directly to the metal texture.</p>\n","default":0},"roughnessAdjust":{"type":["number"],"description":"<p>Roughness adjustment is useful when using roughness map. The overall roughness of the texture can be adjusted. The default is <code class=\"codespan\">0.5</code>, <code class=\"codespan\">0</code> is completely smooth, <code class=\"codespan\">1</code> is completely rough.</p>\n","default":0.5},"metalnessAdjust":{"type":["number"],"description":"<p>Metalness adjustment is useful when using metalness maps. The overall metallicity of the texture can be adjusted. The default is <code class=\"codespan\">0.5</code>, <code class=\"codespan\">0</code> is non-metal, <code class=\"codespan\">1</code> is metal.</p>\n","default":0.5},"normalTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"],"description":"<p>Normal map of material details.</p>\n<p>Using normal maps, you can still display rich shades of detail on the surface of the object with fewer vertices.</p>\n"}}},"lambertMaterial":{"type":["Object"],"description":"<p>The configuration item of the lambert material is valid when <a href=\"#globe.shading\">shading</a> is <code class=\"codespan\">'lambert'</code>.</p>\n","properties":{"detailTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"],"description":"<p>The texture map of the material detail.</p>\n"},"textureTiling":{"type":["number"],"description":"<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n","default":1},"textureOffset":{"type":["number"],"description":"<p>The displacement of the texture detail texture.</p>\n","default":0}}},"colorMaterial":{"type":["Object"],"description":"<p>The color material related configuration item is valid when <a href=\"#globe.shading\">shading</a> is <code class=\"codespan\">'color'</code>.</p>\n","properties":{"detailTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"],"description":"<p>The texture map of the material detail.</p>\n"},"textureTiling":{"type":["number"],"description":"<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n","default":1},"textureOffset":{"type":["number"],"description":"<p>The displacement of the texture detail texture.</p>\n","default":0}}},"light":{"type":["Object"],"description":"<p>Light related settings. Invalid when <a href=\"#globe.shading\">shading</a> is 'color'.</p>\n<p>The lighting settings affect the components and all the charts on the component's coordinate system.</p>\n<p>A reasonable lighting setting can make the brightness and darkness of the whole scene richer and more layered.</p>\n","properties":{"main":{"type":["Object"],"description":"<p>The setting of the main light source of the scene. In the <a href=\"#globe\">globe</a> component is the sun.</p>\n","properties":{"color":{"type":["string"],"description":"<p>The color of the main light source.</p>\n","default":"#fff"},"intensity":{"type":["number"],"description":"<p>The intensity of the main light source.</p>\n","default":1},"shadow":{"type":["boolean"],"description":"<p>Whether the main light source displays a shadow. The default is off.</p>\n<p>Turning on the shadows can bring more realistic and layered lighting to the scene. But it also increases the operating overhead of the program.</p>\n<p>The following two images show the difference between turning on the shadow and turning off the shadow.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-shadow.png\" width=\"100%\" title=\"Shadow\"><img />\n <img src=\"documents/asset/gl/img/geo-no-shadow.png\" width=\"100%\" title=\"No Shadow\"><img />\n<div />\n","default":false},"shadowQuality":{"type":["string"],"description":"<p>The quality of the shadow. You can choose <code class=\"codespan\">'low'</code>, <code class=\"codespan\">'medium'</code>, <code class=\"codespan\">'high'</code>, <code class=\"codespan\">'ultra'</code></p>\n<p>The following two images shows the difference between low quality and high quality shadows.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-shadow-low.png\" width=\"100%\" title=\"Low\"><img />\n <img src=\"documents/asset/gl/img/geo-shadow-high.png\" width=\"100%\" title=\"High\"><img />\n<div />\n","default":"'medium'"},"alpha":{"type":["number"],"description":"<p>The main light source is around the x-axis, which is the angle of up-down rotation. Control the direction of the light with <a href=\"#globe.light.main.beta\">beta</a>.</p>\n<p>As the following image show:</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/light-alpha-beta.png\"></p>\n<p>The <a href=\"#globe\">globe</a> component can control the time of sunlight by <a href=\"#globe.light.main.time\">time</a>.</p>\n","default":0},"beta":{"type":["number"],"description":"<p>The main light source is around the y-axis, which is the angle of the left-right rotation.</p>\n","default":0},"time":{"type":["Date"],"description":"<p>The time of sunshine. The current system time is used by default.</p>\n"}}},"ambient":{"type":["Object"],"description":"<p>Global ambient light settings.</p>\n","properties":{"color":{"type":["string"],"description":"<p>The color of ambient light.</p>\n","default":"#fff"},"intensity":{"type":["number"],"description":"<p>The intensity of ambient light.</p>\n","default":0.2}}},"ambientCubemap":{"type":["Object"],"description":"<p>The ambientCubemap uses texture as the source of ambient light, which provides diffuse and specular for objects. The diffuse and specular can be set separately by <a href=\"#globe.light.ambientCubemap.diffuseIntensity\">diffuseIntensity</a> and <a href=\"#globe.light.ambientCubemap.specularIntensity\">specularIntensity</a>.</p>\n","properties":{"texture":{"type":["string"],"description":"<p>The URL of the ambient cubemap supports HDR images in the <code class=\"codespan\">.hdr</code> format. You can obtained the resources for <code class=\"codespan\">.hdr</code> from <a href=\"http://www.hdrlabs.com/sibl/archive.html\" target=\"_blank\">http://www.hdrlabs.com/sibl/archive.html</a> and other websites.</p>\n<p>Example：</p>\n<pre><code class=\"lang-js\">ambientCubemap: {\n texture: 'pisa.hdr',\n // The exposure value used when analytic hdr\n exposure: 1.0\n}\n</code></pre>\n"},"diffuseIntensity":{"type":["number"],"description":"<p>The intensity of diffuse.</p>\n","default":0.5},"specularIntensity":{"type":["number"],"description":"<p>The intensity of specular.</p>\n","default":0.5}}}}},"postEffect":{"type":["Object"],"description":"<p>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.</p>\n<p>The following are the differences between closing <code class=\"codespan\">postEffect</code> and opening <code class=\"codespan\">postEffect</code>.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/globe-posteffect-disable.png\" width=\"100%\" title=\"Disable\"><img />\n <img src=\"documents/asset/gl/img/globe-posteffect-enable.png\" width=\"100%\" title=\"Enable\"><img />\n<div />\n\n<p>Note that when postEffect is enable, <a href=\"#globe.temporalSuperSampling\">temporalSuperSampling</a> 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.</p>\n","properties":{"enable":{"type":["boolean"],"description":"<p>Whether to enable post-processing effects. Not enabled by default.</p>\n","default":false},"bloom":{"type":["Object"],"description":"<p>Bloom is used to reproducing the effects that occur in real cameras when taking pictures in a bright environment.\nBecause traditional RGB can only represent colors in the range of '0 - 255', so we need to use the bloom effect simulates fringes of light extending from the borders of bright areas, creating the illusion of a bright light overwhelming the camera. As shown below：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/globe-posteffect-bloom.png\"></p>\n","properties":{"enable":{"type":["boolean"],"description":"<p>Whether to enable the bloom effect.</p>\n","default":false},"bloomIntensity":{"type":["number"],"description":"<p>The intensity of the bloom. The default is 0.1.</p>\n","default":0.1}}},"depthOfField":{"type":["Object"],"description":"<p>Depth of Field is a post-processing effect that simulates the focus properties of a camera. The area of focus is clear, and the area away from the focus is gradually blurred.</p>\n<p>The depth of field effect allows the observer to focus on the area of focus and make the picture feel stronger. Large depth of field can also create a macro model effect.</p>\n<p>The following are the differences between turning off and turning on the depth of field effect.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-no-dof.png\" width=\"100%\" title=\"Disable\"><img />\n <img src=\"documents/asset/gl/img/geo-dof.png\" width=\"100%\" title=\"Enable\"><img />\n<div />\n","properties":{"enable":{"type":["boolean"],"description":"<p>Whether to enable the depth of field.</p>\n","default":false},"focalDistance":{"type":["boolean"],"description":"<p>The initial focus distance. The user can click on the area to automatically focus.</p>\n","default":50},"focalRange":{"type":["boolean"],"description":"<p>The size of the in-focus area. The objects in this range are completely clear and there is no blurring.</p>\n","default":20},"fstop":{"type":["number"],"description":"<p>[F value] of the lens (<a href=\"https://zh.wikipedia.org/wiki/%E7%84%A6%E6%AF%94)\" target=\"_blank\">https://zh.wikipedia.org/wiki/%E7%84%A6%E6%AF%94)</a>, the smaller the value, the shallower the depth of field.</p>\n","default":2.8},"blurRadius":{"type":["number"],"description":"<p>Blur radius outside the focus.</p>\n<p>The difference blur effect between the different radius. </p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-dof-small.png\" width=\"100%\" title=\"blurSize: 3\"><img />\n <img src=\"documents/asset/gl/img/geo-dof-large.png\" width=\"100%\" title=\"blurSize: 10\"><img />\n<div />\n","default":10}}},"screenSpaceAmbientOcclusion":{"type":["Object"],"description":"<p>The ambient occlusion post-processing effect darkens the corners, holes, crevices, and areas where most light can`t reach. It is a supplement to the traditional shadow map, which makes the whole scene more natural and layered.</p>\n<p>Below is a comparison of the effects of no SSAO and SSAO:</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-no-ssao.png\" width=\"100%\" title=\"No SSAO\"><img />\n <img src=\"documents/asset/gl/img/geo-ssao.png\" width=\"100%\" title=\"SSAO\"><img />\n<div />\n"},"SSAO":{"type":["Object"],"description":"<p>Same as <a href=\"#globe.postEffect.screenSpaceAmbientOcclusion\">screenSpaceAmbientOcclusion</a></p>\n","properties":{"enable":{"type":["boolean"],"description":"<p>Whether to enable SSAO (screen space ambient occlusion). Not enabled by default.</p>\n","default":false},"quality":{"type":["string"],"description":"<p>The quality of SSAO (screen space ambient occlusion). Supporting<code class=\"codespan\">'low'</code>, <code class=\"codespan\">'medium'</code>, <code class=\"codespan\">'high'</code>, <code class=\"codespan\">'ultra'</code></p>\n","default":"'medium'"},"radius":{"type":["number"],"description":"<p>The radius of the SSAO (screen space ambient occlusion). The larger the radius, the more natural the effect, but you need to set a higher <code class=\"codespan\">'quality'</code>. </p>\n<p>The following example is the difference between a smaller and larger radius:</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-ssao-small-radius.png\" width=\"100%\" title=\"Radius: 1\"><img />\n <img src=\"documents/asset/gl/img/geo-ssao-large-radius.png\" width=\"100%\" title=\"Radius: 10\"><img />\n<div />\n","default":2},"intensity":{"type":["number"],"description":"<p>The intensity of SSAO (screen space ambient occlusion). The larger the value, the darker the color.</p>\n","default":1}}},"colorCorrection":{"type":["Object"],"description":"<p>Color correction and adjustment. Similar to Color Adjustments in Photoshop.</p>\n<p>The same scene in the figure below is adjusted to the difference between the cool color system and the warm color system.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/buildings-cold.jpg\" width=\"100%\" title=\"Cold\"><img />\n <img src=\"documents/asset/gl/img/buildings-warm.jpg\" width=\"100%\" title=\"Warm\"><img />\n<div />\n\n","properties":{"enable":{"type":["boolean"],"description":"<p>Whether to enable the color correction.</p>\n","default":true},"lookupTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"],"description":"<p>Color correction lookup texture, recommended.</p>\n<p>The color correction lookup texture is a texture image like the one below.</p>\n<p><img width=\"200\" height=\"auto\" src=\"documents/asset/gl/img/lookup.png\"></p>\n<p>This is the basic lookup texture image that you can use directly.\nTo adjust the color of the scene to the effect you want, you can take a screenshot of the scene and adjust the color to the desired effect in image processing software such as Photoshop. Then apply the same adjustment to the image of the lookup texture above.</p>\n<p>For example, after turning into a cool tone, the image of the lookup texture will look like this:</p>\n<p><img width=\"200\" height=\"auto\" src=\"documents/asset/gl/img/crispwinter.png\"></p>\n<p>Then the texture image is used as the value of the configuration item, and you can get the same effect in Photoshop.</p>\n<p>Of course, if you just want to get a screenshot, you don't have to do it anymore, but if you want to easily adjust to the ideal color in real-time interactive works, this is very useful.</p>\n"},"exposure":{"type":["number"],"description":"<p>The exposure of the image.</p>\n","default":0},"brightness":{"type":["number"],"description":"<p>The brightness of the image.</p>\n","default":0},"contrast":{"type":["number"],"description":"<p>The contrast of the image.</p>\n","default":1},"saturation":{"type":["number"],"description":"<p>The saturation of the image.</p>\n","default":1}}},"FXAA":{"type":["Object"],"description":"<p>After opening <a href=\"#globe.postEffect\">postEffect</a>, WebGL's default MSAA (Multi Sampling Anti Aliasing) will not work. At this time, FXAA (Fast Approximate Anti-Aliasing) can solve the anti-aliasing problem quickly and easily. FXAA blurs the edge of the scene to solve the problem of aliasing. It works well on some scenes, but in echarts-gl, you need to ensure that the edges of many texts and lines are sharp and clear, so FXAA is not suitable. At this point we can use supersampling by setting a higher <code class=\"codespan\">devicePixelRatio</code> as follows:</p>\n<pre><code class=\"lang-js\">var chart = echarts.init(dom, null, {\n devicePixelRatio: 2\n})\n</code></pre>\n<p>However, setting a higher <code class=\"codespan\">devicePixelRatio</code> has high requirements for computer performance, so more often we recommend using <a href=\"#globe.temporalSuperSampling\">temporalSuperSampling</a> in echarts-gl. 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.</p>\n","properties":{"enable":{"type":["boolean"],"description":"<p>Whether to enable FXAA. Not enabled by default.</p>\n","default":false}}}}},"temporalSuperSampling":{"type":["Object"],"description":"<p>Temporal supersampling. After opening <a href=\"#globe.postEffect\">postEffect</a>, WebGL's default MSAA (MultiSampling Anti-Aliasing) will not work, so we need to solve the problem of sampling.</p>\n<p>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.\nAnd in this process, ECharts-gl also progressively enhances some of the effects in <a href=\"#globe.postEffect\">postEffect</a> that require sampled guarantees. For example <a href=\"#globe.postEffect.SSAO\">SSAO</a>, <a href=\"#globe.postEffect.depthOfField\">Depth of Field</a>, and shadow.</p>\n<p>The following is the difference between not opening <code class=\"codespan\">temporalSuperSampling</code> and opening <code class=\"codespan\">temporalSuperSampling</code>.</p>\n<div class=\"twentytwenty-container\" style=\"width: 800px;\">\n <img src=\"documents/asset/gl/img/surface-no-taa.png\" width=\"100%\" title=\"No AA\"><img />\n <img src=\"documents/asset/gl/img/surface-taa.png\" width=\"100%\" title=\"AA\"><img />\n<div />\n","properties":{"enable":{"type":["boolean"],"description":"<p>Whether to enable temporal supersampling. By default, temporal supersampling is also turned on synchronously when <a href=\"#globe.postEffect\">postEffect</a> is turned on.</p>\n","default":"'auto'"}}},"viewControl":{"type":["Object"],"description":"<p><code class=\"codespan\">viewControl</code> is used for mouse rotation, zooming, and other perspective control.</p>\n","properties":{"projection":{"type":["string"],"description":"<p>The way of projection, the default is <code class=\"codespan\">'perspective'</code> projection, also supports setting to <code class=\"codespan\">'orthogonal'</code> projection.</p>\n","default":"perspective"},"autoRotate":{"type":["boolean"],"description":"<p>Whether to enable the angle of view to automatically rotate around the object.</p>\n","default":false},"autoRotateDirection":{"type":["string"],"description":"<p>The direction in which the object auto rotates. The default is <code class=\"codespan\">'cw'</code> means clockwise from top to bottom, and can also use <code class=\"codespan\">'ccw'</code> means counterclockwise from top to bottom.</p>\n","default":"cw"},"autoRotateSpeed":{"type":["number"],"description":"<p>The speed at which the object auto rotates. The unit is <code class=\"codespan\">angle/second</code>, the default is <code class=\"codespan\">10</code>, which is a turn of <code class=\"codespan\">36</code> seconds.</p>\n","default":10},"autoRotateAfterStill":{"type":["number"],"description":"<p>The time interval for automatic rotation to resume after the mouse is still. Valid after opening <a href=\"#globe.viewControl.autoRotate\">autoRotate</a>.</p>\n","default":3},"damping":{"type":["number"],"description":"<p>The damping when the mouse is rotated, zoomed, etc.\nWhen it is greater than 0, the angle of view will continue to move (rotate and zoom) due to certain inertia after the mouse is still.</p>\n","default":0.8},"rotateSensitivity":{"type":["number","Array"],"description":"<p>The sensitivity of the rotation operation. The greater the value, the more sensitive. Supports the use of arrays to set the horizontal and vertical rotation sensitivity separately.</p>\n<p>The default is <code class=\"codespan\">1</code>.</p>\n<p>Cannot be rotated after setting to <code class=\"codespan\">0</code>.</p>\n<pre><code class=\"lang-js\">// can't rotate\nrotateSensitivity: 0\n// can only be rotated horizontally\nrotateSensitivity: [1, 0]\n// can only rotate vertically\nrotateSensitivity: [0, 1]\n</code></pre>\n","default":1},"zoomSensitivity":{"type":["number"],"description":"<p>The sensitivity of the zoom operation, the larger the value, the more sensitive. The default is <code class=\"codespan\">1</code>.</p>\n<p>Can<code class=\"codespan\">t be scaled after setting to</code>0`.</p>\n","default":1},"panSensitivity":{"type":["number"],"description":"<p>The sensitivity of the panning operation, the greater the value, the more sensitive. Supports the use of arrays to set the horizontal and vertical translation sensitivity.</p>\n<p>The default is <code class=\"codespan\">1</code>.</p>\n<p>Cannot pan after setting to <code class=\"codespan\">0</code>.</p>\n","default":0},"panMouseButton":{"type":["string"],"description":"<p>The mouse button used for panning operation supports:</p>\n<ul>\n<li><p><code class=\"codespan\">'left'</code> left mouse button (default)</p>\n</li>\n<li><p><code class=\"codespan\">'middle'</code> middle mouse button</p>\n</li>\n<li><p><code class=\"codespan\">'right'</code> right mouse button</p>\n</li>\n</ul>\n<p>Note: If set to the right mouse button, the default context menu will be blocked.</p>\n","default":"left"},"rotateMouseButton":{"type":["string"],"description":"<p>The mouse button used for the rotation operation supports:</p>\n<ul>\n<li><p><code class=\"codespan\">'left'</code> left mouse button</p>\n</li>\n<li><p><code class=\"codespan\">'middle'</code> middle mouse button (default)</p>\n</li>\n<li><p><code class=\"codespan\">'right'</code> right mouse button</p>\n</li>\n</ul>\n<p>Note: If set to the right mouse button, the default context menu will be blocked.</p>\n","default":"middle"},"distance":{"type":["number"],"description":"<p>The distance of the default perspective from the subject. For <a href=\"#globe\">globe</a>, the distance from the Earth's surface is the distance from the center origin for other components such as <a href=\"#grid3D\">grid3D</a> and <a href=\"#geo3D\">geo3D</a>. Valid when <a href=\"#globe.viewControl.projection\">projection</a> is <code class=\"codespan\">'perspective'</code>.</p>\n","default":150},"minDistance":{"type":["number"],"description":"<p>The angle of view is controlled by the mouse to bring the minimum distance to the subject. Valid when <a href=\"#globe.viewControl.projection\">projection</a> is <code class=\"codespan\">'perspective'</code>.</p>\n","default":40},"maxDistance":{"type":["number"],"description":"<p>The angle of view can be extended to the maximum distance of the subject by mouse control. Valid when <a href=\"#globe.viewControl.projection\">projection</a> is <code class=\"codespan\">'perspective'</code>.</p>\n","default":400},"orthographicSize":{"type":["number"],"description":"<p>The size of the orthogonal projection. Valid when <a href=\"#globe.viewControl.projection\">projection</a> is <code class=\"codespan\">'orthographic'</code>.</p>\n","default":150},"maxOrthographicSize":{"type":["number"],"description":"<p>The maximum value of the orthogonal projection scaling. Valid when <a href=\"#globe.viewControl.projection\">projection</a> is <code class=\"codespan\">'orthographic'</code>.</p>\n","default":20},"minOrthographicSize":{"type":["number"],"description":"<p>The minimum value of the orthogonal projection scaling. Valid when <a href=\"#globe.viewControl.projection\">projection</a> is <code class=\"codespan\">'orthographic'</code></p>\n","default":400},"alpha":{"type":["number"],"description":"<p>The angle of view is around the x-axis, which is the angle of rotation up and down. With <a href=\"#globe.light.main.beta\">beta</a> you can control the direction of the perspective.</p>\n<p>As shown below：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/view-alpha-beta.png\"></p>\n","default":0},"beta":{"type":["number"],"description":"<p>The angle of view is around the y-axis, which is the angle of rotation from left to right.</p>\n","default":0},"center":{"type":["Array"],"description":"<p>At the center of the angle of view, the rotation will also rotate around this center point. The default is <code class=\"codespan\">[0,0,0]</code>.</p>\n"},"minAlpha":{"type":["number"],"description":"<p>The minimum alpha value to rotate up and down. That is, the angle of view can be rotated to reach the uppermost angle.</p>\n","default":-90},"maxAlpha":{"type":["number"],"description":"<p>The maximum alpha value to rotate up and down. That is, the angle of view can be rotated to the lowest angle.</p>\n","default":90},"minBeta":{"type":["number"],"description":"<p>The minimum beta value to rotate left and right. That is, the angle of view can be rotated to the leftmost angle.</p>\n","default":null},"maxBeta":{"type":["number"],"description":"<p>The maximum beta value to rotate left and right rotation. That is, the angle of view can be rotated to the rightmost angle.</p>\n","default":null},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationDurationUpdate":{"type":["number"],"description":"<p>The duration time for update the transition animation.</p>\n","default":1000},"animationEasingUpdate":{"type":["string"],"description":"<p>The easing effect for update transition animation.</p>\n","default":"cubicInOut"},"targetCoord":{"type":["Array"],"description":"<p>Position the longitudes and latitudes.\nIgnore <a href=\"#globe.viewControl.alpha\">alpha</a> 和 <a href=\"#globe.viewControl.beta\">beta</a> after the setting.</p>\n<pre><code class=\"lang-js\">viewControl: {\n // locate in BeiJing\n targetCoord: [116.46, 39.92]\n}\n</code></pre>\n"}}},"layers":{"type":["Array"],"description":"<p>Configuration of the Earth's Surface Layer.\nYou can use this configuration item to add clouds, or to supplement <a href=\"#globe. baseTexture\">baseTexture</a> to draw the outline of the country, and so on.</p>\n","items":{"type":"Object","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show this layer.</p>\n","default":true},"type":{"type":["string"],"description":"<p>Layper type, Optional：</p>\n<ul>\n<li><code class=\"codespan\">'overlay'</code></li>\n</ul>\n<p>The overlay on the ground surface can be used to display clouds and the like.</p>\n<ul>\n<li><code class=\"codespan\">'blend'</code></li>\n</ul>\n<p>Mix with <a href=\"#globe.baseTexture\">baseTexture</a>.</p>\n","default":"'overlay'"},"name":{"type":["string"],"description":"<p>The name of the layer. When setting the properties of the layer with setOption, you can use the name to identify the layer that needs to be updated.</p>\n<pre><code class=\"lang-js\">chart.setOption({\n globe: {\n layer: [{\n // Update the texture of the layer named 'cloud'\n name: 'cloud',\n texture: 'cloud.png'\n }]\n }\n});\n</code></pre>\n"},"blendTo":{"type":["string"],"description":"<p>When <a href=\"#globe.layers.type\">type</a> is <code class=\"codespan\">'blend'</code> is valid .</p>\n<p>Optional：</p>\n<ul>\n<li><p><code class=\"codespan\">albedo</code> is mixed to albedo, affected by lighting.</p>\n</li>\n<li><p><code class=\"codespan\">emission</code> is mixed to self-illuminating, unaffected by light.</p>\n</li>\n</ul>\n","default":"'albedo'"},"intensity":{"type":["number"],"description":"<p>The intensity of the mixture.</p>\n","default":1},"shading":{"type":["string"],"description":"<p>The coloring effect of the overlay is the same as <a href=\"#globe.shading\">globe.shading</a>, which supports <code class=\"codespan\">'color'</code>, <code class=\"codespan\">'lambert'</code>, <code class=\"codespan\">'realistic'</code></p>\n<p>Valid when <a href=\"globe.layers.type\" target=\"_blank\">type</a> is <code class=\"codespan\">'overlay'</code>.</p>\n","default":"'lambert'"},"distance":{"type":["number"],"description":"<p>The distance from the overlay to the surface of the globe.</p>\n<p>Valid when <a href=\"#globe.layers.type\">type</a> is <code class=\"codespan\">'overlay'</code>.</p>\n","default":null},"texture":{"type":["string","HTMLImageElement","HTMLCanvasElement","EChartsInstance"],"description":"<p>The texture of the globe. Support for the string of image paths, images object or Canvas objects.</p>\n<p>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.</p>\n"}}}}}},"geo3D":{"type":["Object"],"description":"<p>A 3D geographic coordinate system component. The component can draw a 3D GeoJSON and coordinate system. Developers can display 3D Scatter, 3D Bubble, 3D Bar, 3D Lines on it.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to display 3D geographic coordinate system components.</p>\n","default":true},"map":{"type":["string"],"description":"<p>The map type. The map type used in ECharts-gl is the same as the <a href=\"http://echarts.baidu.com/option.html#geo.map\" target=\"_blank\">geo</a> component.</p>\n<p>You can download the required map file in the <a href=\"http://ecomfe.github.io/echarts-builder-web/map3.html\" target=\"_blank\">Map Download Interface</a>, then to import and register it into ECharts.</p>\n<p>EChart provides map data in two formats. One is the JS file that can be imported directly through the script tag. After it is introduced, the map name and data will be automatically registered. Another is the JSON file that needs to be registered manually after loaded asynchronously by AJAX.</p>\n<p>Here are two types of use examples:</p>\n<p><strong> JavaScript Introduction Example </strong></p>\n<pre><code class=\"lang-html\"><script src="echarts.js"></script>\n<script src="map/js/china.js"></script>\n<script>\nvar chart = echarts.init(document.getElementById('main'));\nchart.setOption({\n series: [{\n type: 'map',\n map: 'china'\n }]\n});\n</script>\n</code></pre>\n<p><strong> JSON Introduction Example </strong></p>\n<pre><code class=\"lang-js\">$.get('map/json/china.json', function (chinaJson) {\n echarts.registerMap('china', chinaJson);\n var chart = echarts.init(document.getElementById('main'));\n chart.setOption({\n series: [{\n type: 'map',\n map: 'china'\n }]\n });\n});\n</code></pre>\n<p>ECharts uses the data in [geoJSON] (<a href=\"http://geojson.org/\" target=\"_blank\">http://geojson.org/</a>) format as the outline of the map. In addition, you can also obtain data in [geoJSON] (<a href=\"http://geojson.org/\" target=\"_blank\">http://geojson.org/</a>) format of the map by other means and register it in ECharts.</p>\n"},"boxWidth":{"type":["number"],"description":"<p>A 3D geographic coordinate system component width in a 3D scene. With <a href=\"#geo3D.viewControl.distance\">viewControl.distance</a> you can get the most appropriate display size.</p>\n<p>The following image is a schematic diagram of <code class=\"codespan\">boxWidth</code>, <code class=\"codespan\">boxHeight</code>, <code class=\"codespan\">boxDepth</code>, <code class=\"codespan\">regionHeight</code> in A 3D geographic coordinate system component.</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/gl/img/geo-size.png\"></p>\n","default":100},"boxHeight":{"type":["number"],"description":"<p>A 3D geographic coordinate system component height in a 3D scene.</p>\n<p>Component height. This height contains the height of the bar and scatter on a 3D map.</p>\n","default":10},"boxDepth":{"type":["number"],"description":"<p>A 3D geographic coordinate system component depth in a 3D scene.</p>\n<p>The component depth defaults to automatic, ensuring that the scale of the 3D component is the same as the ratio of the input GeoJSON.</p>\n","default":"auto"},"regionHeight":{"type":["number"],"description":"<p>The height of each area of the 3D map. This height is the height of the model, less than <a href=\"#geo3D.boxHeight\">boxHeight</a>. <code class=\"codespan\">boxHeight - regionHeight</code> will be used for the display of 3D bar, 3D scatter, and etc.</p>\n","default":3},"environment":{"type":["string"],"description":"<p>Environment map. Support for solid colors, gradual colors, URL of panoramic texture. The default is <code class=\"codespan\">'auto'</code>, which is used as the environment texture when <a href=\"#geo3D.light.ambientCubemap.texture\">light.ambientCubemap.texture</a> is configured. Otherwise, the environment texture is not displayed.</p>\n<p>Example: </p>\n<pre><code class=\"lang-js\">// Configure as a panoramic texture\nenvironment: 'asset/starfield.jpg'\n// Configured as a solid black background\nenvironment: '#000'\n// Configured as a background with a vertical gradient\nenvironment: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{\n offset: 0, color: '#00aaff' // Sky color\n}, {\n offset: 0.7, color: '#998866' // Ground color\n}, {\n offset: 1, color: '#998866' // Ground color\n}], false)\n\n</code></pre>\n","default":"'auto'"},"groundPlane":{"type":["Object"],"description":"<p>The ground allows the entire assembly to be “placed” to make the entire scene look more realistic.</p>\n<p> <code class=\"codespan\">groundPlane</code> supports setting up separate <code class=\"codespan\">realisticMaterial</code>, <code class=\"codespan\">colorMaterial</code>, <code class=\"codespan\">lambertMaterial</code> and other materials. If not set, the material parameters of the component are taken by default.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to display the ground.</p>\n","default":false},"color":{"type":["string"],"description":"<p>The color of the ground.</p>\n","default":"'#aaa'"}}},"instancing":{"type":["boolean"],"description":"<p><code class=\"codespan\">instancing</code> will merge all the <a href=\"http://geojson.org/geojson-spec.html#geometry-objects\" target=\"_blank\">geometry</a> in GeoJSON into one. When GeoJSON has a lot of (thousands) <a href=\"http://geojson.org/geojson-spec.html#geometry-objects\" target=\"_blank\">geometry</a>, it can effectively improve drawing efficiency.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>The setting of the label.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the label.</p>\n","default":false},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element.</p>\n<p>The distance from the label to the graphic. In a 3D Scatter, this distance is the pixel value of the screen space. In other figures, this distance is the relative 3D distance.</p>\n"},"formatter":{"type":["Function","string"],"description":"<p>The formatter of the label content, which supports the string template and the callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template:</strong> </p>\n<p>The model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n</ul>\n<p><strong>Example:</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {c}'\n</code></pre>\n<p><strong>Callback function:</strong>\n Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>The <code class=\"codespan\">params</code> is the single data set needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"textStyle":{"type":["Object"],"description":"<p>The font style of the label.</p>\n","properties":{"color":{"type":["string"],"description":"<p>The Color of the text.</p>\n","default":"\"#fff\""},"borderWidth":{"type":["number"],"description":"<p>The border width of the text.</p>\n","default":0},"borderColor":{"type":["string"],"description":"<p>The border color of the text.</p>\n","default":"#fff"},"fontFamily":{"type":["string"],"description":"<p>The font family of the text.</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>The font size of the text.</p>\n","default":12},"fontWeight":{"type":["string"],"description":"<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"}}}}},"itemStyle":{"type":["Object"],"description":"<p>Visual properties of 3D graphics in A 3D geographic coordinate system component, including color, transparency, strokes, etc.</p>\n","properties":{"color":{"type":["string","Function"],"description":"<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n","default":"adaptive"},"opacity":{"type":["number"],"description":"<p>The opacity of the graphic.</p>\n","default":1},"borderWidth":{"type":["number"],"description":"<p>The width of the border. With the border, you can distinguish each area more clearly. As shown below:</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/geo-border.png\"></p>\n","default":0},"borderColor":{"type":["string"],"description":"<p>The color of the border.</p>\n","default":"#333"}}},"emphasis":{"type":["Object"],"description":"<p>Graphic and label styles when mouse hover is highlighted.</p>\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the label.</p>\n","default":false},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element.</p>\n<p>The distance from the label to the graphic. In a 3D Scatter, this distance is the pixel value of the screen space. In other figures, this distance is the relative 3D distance.</p>\n","default":2},"formatter":{"type":["Function","string"],"description":"<p>The formatter of the label content, which supports the string template and the callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template:</strong> </p>\n<p>The model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n</ul>\n<p><strong>Example:</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {c}'\n</code></pre>\n<p><strong>Callback function:</strong>\n Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>The <code class=\"codespan\">params</code> is the single data set needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"textStyle":{"type":["Object"],"description":"<p>The font style of the label.</p>\n","properties":{"color":{"type":["string"],"description":"<p>The Color of the text.</p>\n","default":"#000"},"borderWidth":{"type":["number"],"description":"<p>The border width of the text.</p>\n","default":1},"borderColor":{"type":["string"],"description":"<p>The border color of the text.</p>\n","default":"#fff"},"fontFamily":{"type":["string"],"description":"<p>The font family of the text.</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>The font size of the text.</p>\n","default":20},"fontWeight":{"type":["string"],"description":"<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"description":"<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n","default":"adaptive"},"opacity":{"type":["number"],"description":"<p>The opacity of the graphic.</p>\n","default":1}}}}},"regions":{"type":["Array"],"description":"<p>The setting of the map area.</p>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>The name of the corresponding map area, such as <code class=\"codespan\">'Guangdong'</code>, <code class=\"codespan\">'Zhejiang'</code>.</p>\n"},"regionHeight":{"type":["number"],"description":"<p>The height of the area. Different heights can be set to express the size of the data. When GeoJSON is the data of the building, this value can also be used to represent the approximate height. As shown below：</p>\n<p><img width=\"700\" height=\"auto\" src=\"documents/asset/gl/img/city-region-height.jpg\"></p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style settings for a single area.</p>\n","properties":{"color":{"type":["string"],"description":"<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n","default":"adaptive"},"opacity":{"type":["number"],"description":"<p>The opacity of the graphic.</p>\n","default":1},"borderWidth":{"type":["number"],"description":"<p>The width of the border. With the border, you can distinguish each area more clearly. As shown below:</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/geo-border.png\"></p>\n","default":0},"borderColor":{"type":["string"],"description":"<p>The color of the border.</p>\n","default":"#333"}}},"label":{"type":["Object"],"description":"<p>Label settings for a single area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the label.</p>\n","default":false},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element.</p>\n<p>The distance from the label to the graphic. In a 3D Scatter, this distance is the pixel value of the screen space. In other figures, this distance is the relative 3D distance.</p>\n","default":2},"formatter":{"type":["Function","string"],"description":"<p>The formatter of the label content, which supports the string template and the callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template:</strong> </p>\n<p>The model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n</ul>\n<p><strong>Example:</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {c}'\n</code></pre>\n<p><strong>Callback function:</strong>\n Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>The <code class=\"codespan\">params</code> is the single data set needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"textStyle":{"type":["Object"],"description":"<p>The font style of the label.</p>\n","properties":{"color":{"type":["string"],"description":"<p>The Color of the text.</p>\n","default":"#000"},"borderWidth":{"type":["number"],"description":"<p>The border width of the text.</p>\n","default":1},"borderColor":{"type":["string"],"description":"<p>The border color of the text.</p>\n","default":"#fff"},"fontFamily":{"type":["string"],"description":"<p>The font family of the text.</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>The font size of the text.</p>\n","default":20},"fontWeight":{"type":["string"],"description":"<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"}}}}},"emphasis":{"type":["Object"],"description":"<p>Setting the highlight for labels and styles for a single area.</p>\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"description":"<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n","default":"adaptive"},"opacity":{"type":["number"],"description":"<p>The opacity of the graphic.</p>\n","default":1},"borderWidth":{"type":["number"],"description":"<p>The width of the border. With the border, you can distinguish each area more clearly. As shown below:</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/geo-border.png\"></p>\n","default":0},"borderColor":{"type":["string"],"description":"<p>The color of the border.</p>\n","default":"#333"}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the label.</p>\n","default":false},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element.</p>\n<p>The distance from the label to the graphic. In a 3D Scatter, this distance is the pixel value of the screen space. In other figures, this distance is the relative 3D distance.</p>\n","default":2},"formatter":{"type":["Function","string"],"description":"<p>The formatter of the label content, which supports the string template and the callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template:</strong> </p>\n<p>The model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n</ul>\n<p><strong>Example:</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {c}'\n</code></pre>\n<p><strong>Callback function:</strong>\n Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>The <code class=\"codespan\">params</code> is the single data set needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"textStyle":{"type":["Object"],"description":"<p>The font style of the label.</p>\n","properties":{"color":{"type":["string"],"description":"<p>The Color of the text.</p>\n","default":"#000"},"borderWidth":{"type":["number"],"description":"<p>The border width of the text.</p>\n","default":1},"borderColor":{"type":["string"],"description":"<p>The border color of the text.</p>\n","default":"#fff"},"fontFamily":{"type":["string"],"description":"<p>The font family of the text.</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>The font size of the text.</p>\n","default":20},"fontWeight":{"type":["string"],"description":"<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"}}}}}}}}}},"shading":{"type":["string"],"description":"<p>The coloring effect of 3D graphics in A 3D geographic coordinate system component. The following three coloring methods are supported in echarts-gl:</p>\n<ul>\n<li><p><code class=\"codespan\">'color'</code>\nOnly display colors, not affected by other factors such as lighting.</p>\n</li>\n<li><p><code class=\"codespan\">'lambert'</code>\nThrough the classic [lambert] coloring, can express the light and dark that the light shows.</p>\n</li>\n<li><p><code class=\"codespan\">'realistic'</code>\nRealistic rendering, combined with <a href=\"#globe.light.ambientCubemap\">light.ambientCubemap</a> and <a href=\"#globe.postEffect\">postEffect</a>, can improve the quality and texture of the display. [Physical Based Rendering (PBR)] (<a href=\"https://www.marmoset.co/posts/physically-based-rendering-and-you-can-too/\" target=\"_blank\">https://www.marmoset.co/posts/physically-based-rendering-and-you-can-too/</a>) is used in ECharts GL to represent realistic materials.</p>\n</li>\n</ul>\n"},"realisticMaterial":{"type":["Object"],"description":"<p>The configuration item of the realistic material is valid when <a href=\"#geo3D.shading\">shading</a> is <code class=\"codespan\">'realistic'</code>.</p>\n","properties":{"detailTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"],"description":"<p>The texture map of the material detail.</p>\n"},"textureTiling":{"type":["number"],"description":"<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n","default":1},"textureOffset":{"type":["number"],"description":"<p>The displacement of the texture detail texture.</p>\n","default":0},"roughness":{"type":["number","string","HTMLImageElement","HTMLCanvasElement"],"description":"<p>The <code class=\"codespan\">roughness</code> attribute is used to indicate the roughness of the material, <code class=\"codespan\">0</code> is completely smooth, <code class=\"codespan\">1</code> is completely rough, and the middle value is between the two.</p>\n<p>The following images show the effect of <code class=\"codespan\">roughness</code> in <a href=\"#globe\"><code class=\"codespan\">globe</code></a> <code class=\"codespan\">0.2</code> (smooth) and <code class=\"codespan\">0.8</code> (rough).</p>\n<p><img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-gloss.png\">\n<img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-rough.png\"></p>\n<p>When you want to express more complex materials. You can set <code class=\"codespan\">roughness</code> directly to the texture that stores the roughness with each pixel as follows.</p>\n<p><img width=\"300\" height=\"300\" src=\"documents/asset/gl/img/roughness.png\"></p>\n<p>The more white the color in the texture, the larger the value and the rougher it is. You can get texture resources of different materials from resource websites such as [<a href=\"http://freepbr.com/]\" target=\"_blank\">http://freepbr.com/]</a> (<a href=\"http://freepbr.com/)\" target=\"_blank\">http://freepbr.com/)</a>. You can also generate it yourself using other tools.</p>\n","default":0.5},"metalness":{"type":["number","string","HTMLImageElement","HTMLCanvasElement"],"description":"<p>The <code class=\"codespan\">metalness</code> attribute is used to indicate whether the material is metal or non-metal, <code class=\"codespan\">0</code> is non-metallic, <code class=\"codespan\">1</code> is metal, and the middle value is between the two. Usually set to <code class=\"codespan\">0</code> and <code class=\"codespan\">1</code> to meet most of the scenes.</p>\n<p>The picture below show the difference between `metal' and '0' in <a href=\"#globe\">globe</a>.</p>\n<p><img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-metal.png\">\n<img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-non-metal.png\"></p>\n<p>As with <a href=\"#geo3D.realisticMaterial.roughness\">roughness</a> you can set <code class=\"codespan\">metalness</code> directly to the metal texture.</p>\n","default":0},"roughnessAdjust":{"type":["number"],"description":"<p>Roughness adjustment is useful when using roughness map. The overall roughness of the texture can be adjusted. The default is <code class=\"codespan\">0.5</code>, <code class=\"codespan\">0</code> is completely smooth, <code class=\"codespan\">1</code> is completely rough.</p>\n","default":0.5},"metalnessAdjust":{"type":["number"],"description":"<p>Metalness adjustment is useful when using metalness maps. The overall metallicity of the texture can be adjusted. The default is <code class=\"codespan\">0.5</code>, <code class=\"codespan\">0</code> is non-metal, <code class=\"codespan\">1</code> is metal.</p>\n","default":0.5},"normalTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"],"description":"<p>Normal map of material details.</p>\n<p>Using normal maps, you can still display rich shades of detail on the surface of the object with fewer vertices.</p>\n"}}},"lambertMaterial":{"type":["Object"],"description":"<p>The configuration item of the lambert material is valid when <a href=\"#geo3D.shading\">shading</a> is <code class=\"codespan\">'lambert'</code>.</p>\n","properties":{"detailTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"],"description":"<p>The texture map of the material detail.</p>\n"},"textureTiling":{"type":["number"],"description":"<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n","default":1},"textureOffset":{"type":["number"],"description":"<p>The displacement of the texture detail texture.</p>\n","default":0}}},"colorMaterial":{"type":["Object"],"description":"<p>The color material related configuration item is valid when <a href=\"#geo3D.shading\">shading</a> is <code class=\"codespan\">'color'</code>.</p>\n","properties":{"detailTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"],"description":"<p>The texture map of the material detail.</p>\n"},"textureTiling":{"type":["number"],"description":"<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n","default":1},"textureOffset":{"type":["number"],"description":"<p>The displacement of the texture detail texture.</p>\n","default":0}}},"light":{"type":["Object"],"description":"<p>Light related settings. Invalid when <a href=\"#geo3D.shading\">shading</a> is 'color'.</p>\n<p>The lighting settings affect the components and all the charts on the component's coordinate system.</p>\n<p>A reasonable lighting setting can make the brightness and darkness of the whole scene richer and more layered.</p>\n","properties":{"main":{"type":["Object"],"description":"<p>The setting of the main light source of the scene. In the <a href=\"#globe\">globe</a> component is the sun.</p>\n","properties":{"color":{"type":["string"],"description":"<p>The color of the main light source.</p>\n","default":"#fff"},"intensity":{"type":["number"],"description":"<p>The intensity of the main light source.</p>\n","default":1},"shadow":{"type":["boolean"],"description":"<p>Whether the main light source displays a shadow. The default is off.</p>\n<p>Turning on the shadows can bring more realistic and layered lighting to the scene. But it also increases the operating overhead of the program.</p>\n<p>The following two images show the difference between turning on the shadow and turning off the shadow.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-shadow.png\" width=\"100%\" title=\"Shadow\"><img />\n <img src=\"documents/asset/gl/img/geo-no-shadow.png\" width=\"100%\" title=\"No Shadow\"><img />\n<div />\n","default":false},"shadowQuality":{"type":["string"],"description":"<p>The quality of the shadow. You can choose <code class=\"codespan\">'low'</code>, <code class=\"codespan\">'medium'</code>, <code class=\"codespan\">'high'</code>, <code class=\"codespan\">'ultra'</code></p>\n<p>The following two images shows the difference between low quality and high quality shadows.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-shadow-low.png\" width=\"100%\" title=\"Low\"><img />\n <img src=\"documents/asset/gl/img/geo-shadow-high.png\" width=\"100%\" title=\"High\"><img />\n<div />\n","default":"'medium'"},"alpha":{"type":["number"],"description":"<p>The main light source is around the x-axis, which is the angle of up-down rotation. Control the direction of the light with <a href=\"#geo3D.light.main.beta\">beta</a>.</p>\n<p>As the following image show:</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/light-alpha-beta.png\"></p>\n<p>The <a href=\"#globe\">globe</a> component can control the time of sunlight by <a href=\"#globe.light.main.time\">time</a>.</p>\n","default":40},"beta":{"type":["number"],"description":"<p>The main light source is around the y-axis, which is the angle of the left-right rotation.</p>\n","default":40}}},"ambient":{"type":["Object"],"description":"<p>Global ambient light settings.</p>\n","properties":{"color":{"type":["string"],"description":"<p>The color of ambient light.</p>\n","default":"#fff"},"intensity":{"type":["number"],"description":"<p>The intensity of ambient light.</p>\n","default":0.2}}},"ambientCubemap":{"type":["Object"],"description":"<p>The ambientCubemap uses texture as the source of ambient light, which provides diffuse and specular for objects. The diffuse and specular can be set separately by <a href=\"#geo3D.light.ambientCubemap.diffuseIntensity\">diffuseIntensity</a> and <a href=\"#geo3D.light.ambientCubemap.specularIntensity\">specularIntensity</a>.</p>\n","properties":{"texture":{"type":["string"],"description":"<p>The URL of the ambient cubemap supports HDR images in the <code class=\"codespan\">.hdr</code> format. You can obtained the resources for <code class=\"codespan\">.hdr</code> from <a href=\"http://www.hdrlabs.com/sibl/archive.html\" target=\"_blank\">http://www.hdrlabs.com/sibl/archive.html</a> and other websites.</p>\n<p>Example：</p>\n<pre><code class=\"lang-js\">ambientCubemap: {\n texture: 'pisa.hdr',\n // The exposure value used when analytic hdr\n exposure: 1.0\n}\n</code></pre>\n"},"diffuseIntensity":{"type":["number"],"description":"<p>The intensity of diffuse.</p>\n","default":0.5},"specularIntensity":{"type":["number"],"description":"<p>The intensity of specular.</p>\n","default":0.5}}}}},"postEffect":{"type":["Object"],"description":"<p>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.</p>\n<p>The following are the differences between closing <code class=\"codespan\">postEffect</code> and opening <code class=\"codespan\">postEffect</code>.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/globe-posteffect-disable.png\" width=\"100%\" title=\"Disable\"><img />\n <img src=\"documents/asset/gl/img/globe-posteffect-enable.png\" width=\"100%\" title=\"Enable\"><img />\n<div />\n\n<p>Note that when postEffect is enable, <a href=\"#geo3D.temporalSuperSampling\">temporalSuperSampling</a> 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.</p>\n","properties":{"enable":{"type":["boolean"],"description":"<p>Whether to enable post-processing effects. Not enabled by default.</p>\n","default":false},"bloom":{"type":["Object"],"description":"<p>Bloom is used to reproducing the effects that occur in real cameras when taking pictures in a bright environment.\nBecause traditional RGB can only represent colors in the range of '0 - 255', so we need to use the bloom effect simulates fringes of light extending from the borders of bright areas, creating the illusion of a bright light overwhelming the camera. As shown below：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/globe-posteffect-bloom.png\"></p>\n","properties":{"enable":{"type":["boolean"],"description":"<p>Whether to enable the bloom effect.</p>\n","default":false},"bloomIntensity":{"type":["number"],"description":"<p>The intensity of the bloom. The default is 0.1.</p>\n","default":0.1}}},"depthOfField":{"type":["Object"],"description":"<p>Depth of Field is a post-processing effect that simulates the focus properties of a camera. The area of focus is clear, and the area away from the focus is gradually blurred.</p>\n<p>The depth of field effect allows the observer to focus on the area of focus and make the picture feel stronger. Large depth of field can also create a macro model effect.</p>\n<p>The following are the differences between turning off and turning on the depth of field effect.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-no-dof.png\" width=\"100%\" title=\"Disable\"><img />\n <img src=\"documents/asset/gl/img/geo-dof.png\" width=\"100%\" title=\"Enable\"><img />\n<div />\n","properties":{"enable":{"type":["boolean"],"description":"<p>Whether to enable the depth of field.</p>\n","default":false},"focalDistance":{"type":["boolean"],"description":"<p>The initial focus distance. The user can click on the area to automatically focus.</p>\n","default":50},"focalRange":{"type":["boolean"],"description":"<p>The size of the in-focus area. The objects in this range are completely clear and there is no blurring.</p>\n","default":20},"fstop":{"type":["number"],"description":"<p>[F value] of the lens (<a href=\"https://zh.wikipedia.org/wiki/%E7%84%A6%E6%AF%94)\" target=\"_blank\">https://zh.wikipedia.org/wiki/%E7%84%A6%E6%AF%94)</a>, the smaller the value, the shallower the depth of field.</p>\n","default":2.8},"blurRadius":{"type":["number"],"description":"<p>Blur radius outside the focus.</p>\n<p>The difference blur effect between the different radius. </p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-dof-small.png\" width=\"100%\" title=\"blurSize: 3\"><img />\n <img src=\"documents/asset/gl/img/geo-dof-large.png\" width=\"100%\" title=\"blurSize: 10\"><img />\n<div />\n","default":10}}},"screenSpaceAmbientOcclusion":{"type":["Object"],"description":"<p>The ambient occlusion post-processing effect darkens the corners, holes, crevices, and areas where most light can`t reach. It is a supplement to the traditional shadow map, which makes the whole scene more natural and layered.</p>\n<p>Below is a comparison of the effects of no SSAO and SSAO:</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-no-ssao.png\" width=\"100%\" title=\"No SSAO\"><img />\n <img src=\"documents/asset/gl/img/geo-ssao.png\" width=\"100%\" title=\"SSAO\"><img />\n<div />\n"},"SSAO":{"type":["Object"],"description":"<p>Same as <a href=\"#geo3D.postEffect.screenSpaceAmbientOcclusion\">screenSpaceAmbientOcclusion</a></p>\n","properties":{"enable":{"type":["boolean"],"description":"<p>Whether to enable SSAO (screen space ambient occlusion). Not enabled by default.</p>\n","default":false},"quality":{"type":["string"],"description":"<p>The quality of SSAO (screen space ambient occlusion). Supporting<code class=\"codespan\">'low'</code>, <code class=\"codespan\">'medium'</code>, <code class=\"codespan\">'high'</code>, <code class=\"codespan\">'ultra'</code></p>\n","default":"'medium'"},"radius":{"type":["number"],"description":"<p>The radius of the SSAO (screen space ambient occlusion). The larger the radius, the more natural the effect, but you need to set a higher <code class=\"codespan\">'quality'</code>. </p>\n<p>The following example is the difference between a smaller and larger radius:</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-ssao-small-radius.png\" width=\"100%\" title=\"Radius: 1\"><img />\n <img src=\"documents/asset/gl/img/geo-ssao-large-radius.png\" width=\"100%\" title=\"Radius: 10\"><img />\n<div />\n","default":2},"intensity":{"type":["number"],"description":"<p>The intensity of SSAO (screen space ambient occlusion). The larger the value, the darker the color.</p>\n","default":1}}},"colorCorrection":{"type":["Object"],"description":"<p>Color correction and adjustment. Similar to Color Adjustments in Photoshop.</p>\n<p>The same scene in the figure below is adjusted to the difference between the cool color system and the warm color system.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/buildings-cold.jpg\" width=\"100%\" title=\"Cold\"><img />\n <img src=\"documents/asset/gl/img/buildings-warm.jpg\" width=\"100%\" title=\"Warm\"><img />\n<div />\n\n","properties":{"enable":{"type":["boolean"],"description":"<p>Whether to enable the color correction.</p>\n","default":true},"lookupTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"],"description":"<p>Color correction lookup texture, recommended.</p>\n<p>The color correction lookup texture is a texture image like the one below.</p>\n<p><img width=\"200\" height=\"auto\" src=\"documents/asset/gl/img/lookup.png\"></p>\n<p>This is the basic lookup texture image that you can use directly.\nTo adjust the color of the scene to the effect you want, you can take a screenshot of the scene and adjust the color to the desired effect in image processing software such as Photoshop. Then apply the same adjustment to the image of the lookup texture above.</p>\n<p>For example, after turning into a cool tone, the image of the lookup texture will look like this:</p>\n<p><img width=\"200\" height=\"auto\" src=\"documents/asset/gl/img/crispwinter.png\"></p>\n<p>Then the texture image is used as the value of the configuration item, and you can get the same effect in Photoshop.</p>\n<p>Of course, if you just want to get a screenshot, you don't have to do it anymore, but if you want to easily adjust to the ideal color in real-time interactive works, this is very useful.</p>\n"},"exposure":{"type":["number"],"description":"<p>The exposure of the image.</p>\n","default":0},"brightness":{"type":["number"],"description":"<p>The brightness of the image.</p>\n","default":0},"contrast":{"type":["number"],"description":"<p>The contrast of the image.</p>\n","default":1},"saturation":{"type":["number"],"description":"<p>The saturation of the image.</p>\n","default":1}}},"FXAA":{"type":["Object"],"description":"<p>After opening <a href=\"#geo3D.postEffect\">postEffect</a>, WebGL's default MSAA (Multi Sampling Anti Aliasing) will not work. At this time, FXAA (Fast Approximate Anti-Aliasing) can solve the anti-aliasing problem quickly and easily. FXAA blurs the edge of the scene to solve the problem of aliasing. It works well on some scenes, but in echarts-gl, you need to ensure that the edges of many texts and lines are sharp and clear, so FXAA is not suitable. At this point we can use supersampling by setting a higher <code class=\"codespan\">devicePixelRatio</code> as follows:</p>\n<pre><code class=\"lang-js\">var chart = echarts.init(dom, null, {\n devicePixelRatio: 2\n})\n</code></pre>\n<p>However, setting a higher <code class=\"codespan\">devicePixelRatio</code> has high requirements for computer performance, so more often we recommend using <a href=\"#geo3D.temporalSuperSampling\">temporalSuperSampling</a> in echarts-gl. 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.</p>\n","properties":{"enable":{"type":["boolean"],"description":"<p>Whether to enable FXAA. Not enabled by default.</p>\n","default":false}}}}},"temporalSuperSampling":{"type":["Object"],"description":"<p>Temporal supersampling. After opening <a href=\"#geo3D.postEffect\">postEffect</a>, WebGL's default MSAA (MultiSampling Anti-Aliasing) will not work, so we need to solve the problem of sampling.</p>\n<p>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.\nAnd in this process, ECharts-gl also progressively enhances some of the effects in <a href=\"#geo3D.postEffect\">postEffect</a> that require sampled guarantees. For example <a href=\"#geo3D.postEffect.SSAO\">SSAO</a>, <a href=\"#geo3D.postEffect.depthOfField\">Depth of Field</a>, and shadow.</p>\n<p>The following is the difference between not opening <code class=\"codespan\">temporalSuperSampling</code> and opening <code class=\"codespan\">temporalSuperSampling</code>.</p>\n<div class=\"twentytwenty-container\" style=\"width: 800px;\">\n <img src=\"documents/asset/gl/img/surface-no-taa.png\" width=\"100%\" title=\"No AA\"><img />\n <img src=\"documents/asset/gl/img/surface-taa.png\" width=\"100%\" title=\"AA\"><img />\n<div />\n","properties":{"enable":{"type":["boolean"],"description":"<p>Whether to enable temporal supersampling. By default, temporal supersampling is also turned on synchronously when <a href=\"#geo3D.postEffect\">postEffect</a> is turned on.</p>\n","default":"'auto'"}}},"viewControl":{"type":["Object"],"description":"<p><code class=\"codespan\">viewControl</code> is used for mouse rotation, zooming, and other perspective control.</p>\n","properties":{"projection":{"type":["string"],"description":"<p>The way of projection, the default is <code class=\"codespan\">'perspective'</code> projection, also supports setting to <code class=\"codespan\">'orthogonal'</code> projection.</p>\n","default":"perspective"},"autoRotate":{"type":["boolean"],"description":"<p>Whether to enable the angle of view to automatically rotate around the object.</p>\n","default":false},"autoRotateDirection":{"type":["string"],"description":"<p>The direction in which the object auto rotates. The default is <code class=\"codespan\">'cw'</code> means clockwise from top to bottom, and can also use <code class=\"codespan\">'ccw'</code> means counterclockwise from top to bottom.</p>\n","default":"cw"},"autoRotateSpeed":{"type":["number"],"description":"<p>The speed at which the object auto rotates. The unit is <code class=\"codespan\">angle/second</code>, the default is <code class=\"codespan\">10</code>, which is a turn of <code class=\"codespan\">36</code> seconds.</p>\n","default":10},"autoRotateAfterStill":{"type":["number"],"description":"<p>The time interval for automatic rotation to resume after the mouse is still. Valid after opening <a href=\"#geo3D.viewControl.autoRotate\">autoRotate</a>.</p>\n","default":3},"damping":{"type":["number"],"description":"<p>The damping when the mouse is rotated, zoomed, etc.\nWhen it is greater than 0, the angle of view will continue to move (rotate and zoom) due to certain inertia after the mouse is still.</p>\n","default":0.8},"rotateSensitivity":{"type":["number","Array"],"description":"<p>The sensitivity of the rotation operation. The greater the value, the more sensitive. Supports the use of arrays to set the horizontal and vertical rotation sensitivity separately.</p>\n<p>The default is <code class=\"codespan\">1</code>.</p>\n<p>Cannot be rotated after setting to <code class=\"codespan\">0</code>.</p>\n<pre><code class=\"lang-js\">// can't rotate\nrotateSensitivity: 0\n// can only be rotated horizontally\nrotateSensitivity: [1, 0]\n// can only rotate vertically\nrotateSensitivity: [0, 1]\n</code></pre>\n","default":1},"zoomSensitivity":{"type":["number"],"description":"<p>The sensitivity of the zoom operation, the larger the value, the more sensitive. The default is <code class=\"codespan\">1</code>.</p>\n<p>Can<code class=\"codespan\">t be scaled after setting to</code>0`.</p>\n","default":1},"panSensitivity":{"type":["number"],"description":"<p>The sensitivity of the panning operation, the greater the value, the more sensitive. Supports the use of arrays to set the horizontal and vertical translation sensitivity.</p>\n<p>The default is <code class=\"codespan\">1</code>.</p>\n<p>Cannot pan after setting to <code class=\"codespan\">0</code>.</p>\n","default":1},"panMouseButton":{"type":["string"],"description":"<p>The mouse button used for panning operation supports:</p>\n<ul>\n<li><p><code class=\"codespan\">'left'</code> left mouse button (default)</p>\n</li>\n<li><p><code class=\"codespan\">'middle'</code> middle mouse button</p>\n</li>\n<li><p><code class=\"codespan\">'right'</code> right mouse button</p>\n</li>\n</ul>\n<p>Note: If set to the right mouse button, the default context menu will be blocked.</p>\n","default":"left"},"rotateMouseButton":{"type":["string"],"description":"<p>The mouse button used for the rotation operation supports:</p>\n<ul>\n<li><p><code class=\"codespan\">'left'</code> left mouse button</p>\n</li>\n<li><p><code class=\"codespan\">'middle'</code> middle mouse button (default)</p>\n</li>\n<li><p><code class=\"codespan\">'right'</code> right mouse button</p>\n</li>\n</ul>\n<p>Note: If set to the right mouse button, the default context menu will be blocked.</p>\n","default":"middle"},"distance":{"type":["number"],"description":"<p>The distance of the default perspective from the subject. For <a href=\"#globe\">globe</a>, the distance from the Earth's surface is the distance from the center origin for other components such as <a href=\"#grid3D\">grid3D</a> and <a href=\"#geo3D\">geo3D</a>. Valid when <a href=\"#geo3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'perspective'</code>.</p>\n","default":100},"minDistance":{"type":["number"],"description":"<p>The angle of view is controlled by the mouse to bring the minimum distance to the subject. Valid when <a href=\"#geo3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'perspective'</code>.</p>\n","default":40},"maxDistance":{"type":["number"],"description":"<p>The angle of view can be extended to the maximum distance of the subject by mouse control. Valid when <a href=\"#geo3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'perspective'</code>.</p>\n","default":400},"orthographicSize":{"type":["number"],"description":"<p>The size of the orthogonal projection. Valid when <a href=\"#geo3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'orthographic'</code>.</p>\n","default":100},"maxOrthographicSize":{"type":["number"],"description":"<p>The maximum value of the orthogonal projection scaling. Valid when <a href=\"#geo3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'orthographic'</code>.</p>\n","default":20},"minOrthographicSize":{"type":["number"],"description":"<p>The minimum value of the orthogonal projection scaling. Valid when <a href=\"#geo3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'orthographic'</code></p>\n","default":400},"alpha":{"type":["number"],"description":"<p>The angle of view is around the x-axis, which is the angle of rotation up and down. With <a href=\"#geo3D.light.main.beta\">beta</a> you can control the direction of the perspective.</p>\n<p>As shown below：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/view-alpha-beta.png\"></p>\n","default":40},"beta":{"type":["number"],"description":"<p>The angle of view is around the y-axis, which is the angle of rotation from left to right.</p>\n","default":0},"center":{"type":["Array"],"description":"<p>At the center of the angle of view, the rotation will also rotate around this center point. The default is <code class=\"codespan\">[0,0,0]</code>.</p>\n"},"minAlpha":{"type":["number"],"description":"<p>The minimum alpha value to rotate up and down. That is, the angle of view can be rotated to reach the uppermost angle.</p>\n","default":5},"maxAlpha":{"type":["number"],"description":"<p>The maximum alpha value to rotate up and down. That is, the angle of view can be rotated to the lowest angle.</p>\n","default":90},"minBeta":{"type":["number"],"description":"<p>The minimum beta value to rotate left and right. That is, the angle of view can be rotated to the leftmost angle.</p>\n","default":-80},"maxBeta":{"type":["number"],"description":"<p>The maximum beta value to rotate left and right rotation. That is, the angle of view can be rotated to the rightmost angle.</p>\n","default":80},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationDurationUpdate":{"type":["number"],"description":"<p>The duration time for update the transition animation.</p>\n","default":1000},"animationEasingUpdate":{"type":["string"],"description":"<p>The easing effect for update transition animation.</p>\n","default":"cubicInOut"}}},"zlevel":{"type":["number"],"description":"<p>The layer in which the component is located.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> 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 <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid the crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n<p><strong>Note:</strong> The layers of the components in echarts-gl need to be separated from the layers of the components in echarts. The same <code class=\"codespan\">zlevel</code> cannot be used for both WebGL and Canvas drawing at the same time.</p>\n","default":-10},"left":{"type":["string","number"],"description":"<p>Distance between component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>; and it can also be <code class=\"codespan\">'left'</code>, <code class=\"codespan\">'center'</code>, or <code class=\"codespan\">'right'</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">'left'</code>, <code class=\"codespan\">'center'</code>, or <code class=\"codespan\">'right'</code>, then the component will be aligned automatically based on position.</p>\n","default":"auto"},"top":{"type":["string","number"],"description":"<p>Distance between component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>; and it can also be <code class=\"codespan\">'top'</code>, <code class=\"codespan\">'middle'</code>, or <code class=\"codespan\">'bottom'</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">'top'</code>, <code class=\"codespan\">'middle'</code>, or <code class=\"codespan\">'bottom'</code>, then the component will be aligned automatically based on position.</p>\n","default":"auto"},"right":{"type":["string","number"],"description":"<p>Distance between component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>.</p>\n<p> Adaptive by default.</p>\n","default":"auto"},"bottom":{"type":["string","number"],"description":"<p>Distance between component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>.</p>\n<p> Adaptive by default.</p>\n","default":"auto"},"width":{"type":["string","number"],"description":"<p> The width of the view of the component.</p>\n","default":"auto"},"height":{"type":["string","number"],"description":"<p> The height of the view of the component.</p>\n","default":"auto"}}},"mapbox3D":{"type":["Object"],"description":"<p>A geographic component based on mapbox-gl-js. Support for drawing <a href=\"#series-scatter3D\">3D Scatter</a>, <a href=\"#series-lines3D\">3D Lines</a>, <a href=\"#series-bar3D\">3D Bar</a>, <a href=\"#series-map3D\">3D map</a> on mapbox maps. You can take advantage of Mapbox's powerful map service and ECharts GL's rich visualization and rendering effects to achieve the visualization you want.</p>\n<p>You need to introduce the official sdk of mapbox before using the mapbox component.</p>\n<pre><code class=\"lang-html\"><script src='https://api.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.js'></script>\n<link href='https://api.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css' rel='stylesheet' />\n</code></pre>\n<p>Then get the token provided by mapbox and set it to <code class=\"codespan\">mapbox.accessToken</code>.</p>\n<pre><code class=\"lang-js\">mapboxgl.accessToken = 'your token';\n</code></pre>\n<p>Then you can use the mapbox component just like any other component.</p>\n<pre><code class=\"lang-js\">chart.setOption({\n mapbox: {\n style: 'mapbox://styles/mapbox/dark-v9'\n }\n});\n</code></pre>\n<p>Go to <a href=\"https://www.mapbox.com/mapbox-gl-js/api/\" target=\"_blank\">https://www.mapbox.com/mapbox-gl-js/api/</a> for more details on <code class=\"codespan\">mapbox-gl-js sdk</code>.</p>\n","properties":{"style":{"type":["string","Object"],"description":"<p>Sets the style of the Mapbox map. Same as <a href=\"https://www.mapbox.com/mapbox-gl-js/style-spec/\" target=\"_blank\">https://www.mapbox.com/mapbox-gl-js/style-spec/</a>.</p>\n"},"center":{"type":["Array"],"description":"<p>Sets the longitude and latitude of the center of the map. Longitude and latitude are represented by arrays, for example:</p>\n<pre><code class=\"lang-js\">mapbox3D: {\n center: [104.114129, 37.550339],\n zoom: 3\n}\n</code></pre>\n"},"zoom":{"type":["number"],"description":"<p>Sets the zoom level of the map. See <a href=\"https://www.mapbox.com/mapbox-gl-js/style-spec/#root-zoom\" target=\"_blank\">https://www.mapbox.com/mapbox-gl-js/style-spec/#root-zoom</a></p>\n"},"bearing":{"type":["number"],"description":"<p>Sets the bearing angle of the map. See <a href=\"https://www.mapbox.com/mapbox-gl-js/style-spec/#root-bearing\" target=\"_blank\">https://www.mapbox.com/mapbox-gl-js/style-spec/#root-bearing</a></p>\n","default":0},"pitch":{"type":["number"],"description":"<p>Sets the pitch angle of the map. The default is <code class=\"codespan\">0</code> means perpendicular to the surface of the map. The greater value is <code class=\"codespan\">60</code>. See <a href=\"https://www.mapbox.com/mapbox-gl-js/style-spec/#root-pitch\" target=\"_blank\">https://www.mapbox.com/mapbox-gl-js/style-spec/#root-pitch</a></p>\n","default":0},"altitudeScale":{"type":["number"],"description":"<p>The zoom of the altitude Scale.</p>\n","default":1},"shading":{"type":["string"],"description":"<p>The coloring effect of 3D graphics in mapbox3D. The following three coloring methods are supported in echarts-gl:</p>\n<ul>\n<li><p><code class=\"codespan\">'color'</code>\nOnly display colors, not affected by other factors such as lighting.</p>\n</li>\n<li><p><code class=\"codespan\">'lambert'</code>\nThrough the classic [lambert] coloring, can express the light and dark that the light shows.</p>\n</li>\n<li><p><code class=\"codespan\">'realistic'</code>\nRealistic rendering, combined with <a href=\"#globe.light.ambientCubemap\">light.ambientCubemap</a> and <a href=\"#globe.postEffect\">postEffect</a>, can improve the quality and texture of the display. [Physical Based Rendering (PBR)] (<a href=\"https://www.marmoset.co/posts/physically-based-rendering-and-you-can-too/\" target=\"_blank\">https://www.marmoset.co/posts/physically-based-rendering-and-you-can-too/</a>) is used in ECharts GL to represent realistic materials.</p>\n</li>\n</ul>\n"},"realisticMaterial":{"type":["Object"],"description":"<p>The configuration item of the realistic material is valid when <a href=\"#mapbox3D.shading\">shading</a> is <code class=\"codespan\">'realistic'</code>.</p>\n","properties":{"detailTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"],"description":"<p>The texture map of the material detail.</p>\n"},"textureTiling":{"type":["number"],"description":"<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n","default":1},"textureOffset":{"type":["number"],"description":"<p>The displacement of the texture detail texture.</p>\n","default":0},"roughness":{"type":["number","string","HTMLImageElement","HTMLCanvasElement"],"description":"<p>The <code class=\"codespan\">roughness</code> attribute is used to indicate the roughness of the material, <code class=\"codespan\">0</code> is completely smooth, <code class=\"codespan\">1</code> is completely rough, and the middle value is between the two.</p>\n<p>The following images show the effect of <code class=\"codespan\">roughness</code> in <a href=\"#globe\"><code class=\"codespan\">globe</code></a> <code class=\"codespan\">0.2</code> (smooth) and <code class=\"codespan\">0.8</code> (rough).</p>\n<p><img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-gloss.png\">\n<img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-rough.png\"></p>\n<p>When you want to express more complex materials. You can set <code class=\"codespan\">roughness</code> directly to the texture that stores the roughness with each pixel as follows.</p>\n<p><img width=\"300\" height=\"300\" src=\"documents/asset/gl/img/roughness.png\"></p>\n<p>The more white the color in the texture, the larger the value and the rougher it is. You can get texture resources of different materials from resource websites such as [<a href=\"http://freepbr.com/]\" target=\"_blank\">http://freepbr.com/]</a> (<a href=\"http://freepbr.com/)\" target=\"_blank\">http://freepbr.com/)</a>. You can also generate it yourself using other tools.</p>\n","default":0.5},"metalness":{"type":["number","string","HTMLImageElement","HTMLCanvasElement"],"description":"<p>The <code class=\"codespan\">metalness</code> attribute is used to indicate whether the material is metal or non-metal, <code class=\"codespan\">0</code> is non-metallic, <code class=\"codespan\">1</code> is metal, and the middle value is between the two. Usually set to <code class=\"codespan\">0</code> and <code class=\"codespan\">1</code> to meet most of the scenes.</p>\n<p>The picture below show the difference between `metal' and '0' in <a href=\"#globe\">globe</a>.</p>\n<p><img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-metal.png\">\n<img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-non-metal.png\"></p>\n<p>As with <a href=\"#mapbox3D.realisticMaterial.roughness\">roughness</a> you can set <code class=\"codespan\">metalness</code> directly to the metal texture.</p>\n","default":0},"roughnessAdjust":{"type":["number"],"description":"<p>Roughness adjustment is useful when using roughness map. The overall roughness of the texture can be adjusted. The default is <code class=\"codespan\">0.5</code>, <code class=\"codespan\">0</code> is completely smooth, <code class=\"codespan\">1</code> is completely rough.</p>\n","default":0.5},"metalnessAdjust":{"type":["number"],"description":"<p>Metalness adjustment is useful when using metalness maps. The overall metallicity of the texture can be adjusted. The default is <code class=\"codespan\">0.5</code>, <code class=\"codespan\">0</code> is non-metal, <code class=\"codespan\">1</code> is metal.</p>\n","default":0.5},"normalTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"],"description":"<p>Normal map of material details.</p>\n<p>Using normal maps, you can still display rich shades of detail on the surface of the object with fewer vertices.</p>\n"}}},"lambertMaterial":{"type":["Object"],"description":"<p>The configuration item of the lambert material is valid when <a href=\"#mapbox3D.shading\">shading</a> is <code class=\"codespan\">'lambert'</code>.</p>\n","properties":{"detailTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"],"description":"<p>The texture map of the material detail.</p>\n"},"textureTiling":{"type":["number"],"description":"<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n","default":1},"textureOffset":{"type":["number"],"description":"<p>The displacement of the texture detail texture.</p>\n","default":0}}},"colorMaterial":{"type":["Object"],"description":"<p>The color material related configuration item is valid when <a href=\"#mapbox3D.shading\">shading</a> is <code class=\"codespan\">'color'</code>.</p>\n","properties":{"detailTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"],"description":"<p>The texture map of the material detail.</p>\n"},"textureTiling":{"type":["number"],"description":"<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n","default":1},"textureOffset":{"type":["number"],"description":"<p>The displacement of the texture detail texture.</p>\n","default":0}}},"light":{"type":["Object"],"description":"<p>Light related settings. Invalid when <a href=\"#mapbox3D.shading\">shading</a> is 'color'.</p>\n<p>The lighting settings affect the components and all the charts on the component's coordinate system.</p>\n<p>A reasonable lighting setting can make the brightness and darkness of the whole scene richer and more layered.</p>\n","properties":{"main":{"type":["Object"],"description":"<p>The setting of the main light source of the scene. In the <a href=\"#globe\">globe</a> component is the sun.</p>\n","properties":{"color":{"type":["string"],"description":"<p>The color of the main light source.</p>\n","default":"#fff"},"intensity":{"type":["number"],"description":"<p>The intensity of the main light source.</p>\n","default":1},"shadow":{"type":["boolean"],"description":"<p>Whether the main light source displays a shadow. The default is off.</p>\n<p>Turning on the shadows can bring more realistic and layered lighting to the scene. But it also increases the operating overhead of the program.</p>\n<p>The following two images show the difference between turning on the shadow and turning off the shadow.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-shadow.png\" width=\"100%\" title=\"Shadow\"><img />\n <img src=\"documents/asset/gl/img/geo-no-shadow.png\" width=\"100%\" title=\"No Shadow\"><img />\n<div />\n","default":false},"shadowQuality":{"type":["string"],"description":"<p>The quality of the shadow. You can choose <code class=\"codespan\">'low'</code>, <code class=\"codespan\">'medium'</code>, <code class=\"codespan\">'high'</code>, <code class=\"codespan\">'ultra'</code></p>\n<p>The following two images shows the difference between low quality and high quality shadows.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-shadow-low.png\" width=\"100%\" title=\"Low\"><img />\n <img src=\"documents/asset/gl/img/geo-shadow-high.png\" width=\"100%\" title=\"High\"><img />\n<div />\n","default":"'medium'"},"alpha":{"type":["number"],"description":"<p>The main light source is around the x-axis, which is the angle of up-down rotation. Control the direction of the light with <a href=\"#mapbox3D.light.main.beta\">beta</a>.</p>\n<p>As the following image show:</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/light-alpha-beta.png\"></p>\n<p>The <a href=\"#globe\">globe</a> component can control the time of sunlight by <a href=\"#globe.light.main.time\">time</a>.</p>\n","default":40},"beta":{"type":["number"],"description":"<p>The main light source is around the y-axis, which is the angle of the left-right rotation.</p>\n","default":40}}},"ambient":{"type":["Object"],"description":"<p>Global ambient light settings.</p>\n","properties":{"color":{"type":["string"],"description":"<p>The color of ambient light.</p>\n","default":"#fff"},"intensity":{"type":["number"],"description":"<p>The intensity of ambient light.</p>\n","default":0.2}}},"ambientCubemap":{"type":["Object"],"description":"<p>The ambientCubemap uses texture as the source of ambient light, which provides diffuse and specular for objects. The diffuse and specular can be set separately by <a href=\"#mapbox3D.light.ambientCubemap.diffuseIntensity\">diffuseIntensity</a> and <a href=\"#mapbox3D.light.ambientCubemap.specularIntensity\">specularIntensity</a>.</p>\n","properties":{"texture":{"type":["string"],"description":"<p>The URL of the ambient cubemap supports HDR images in the <code class=\"codespan\">.hdr</code> format. You can obtained the resources for <code class=\"codespan\">.hdr</code> from <a href=\"http://www.hdrlabs.com/sibl/archive.html\" target=\"_blank\">http://www.hdrlabs.com/sibl/archive.html</a> and other websites.</p>\n<p>Example：</p>\n<pre><code class=\"lang-js\">ambientCubemap: {\n texture: 'pisa.hdr',\n // The exposure value used when analytic hdr\n exposure: 1.0\n}\n</code></pre>\n"},"diffuseIntensity":{"type":["number"],"description":"<p>The intensity of diffuse.</p>\n","default":0.5},"specularIntensity":{"type":["number"],"description":"<p>The intensity of specular.</p>\n","default":0.5}}}}},"postEffect":{"type":["Object"],"description":"<p>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.</p>\n<p>The following are the differences between closing <code class=\"codespan\">postEffect</code> and opening <code class=\"codespan\">postEffect</code>.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/globe-posteffect-disable.png\" width=\"100%\" title=\"Disable\"><img />\n <img src=\"documents/asset/gl/img/globe-posteffect-enable.png\" width=\"100%\" title=\"Enable\"><img />\n<div />\n\n<p>Note that when postEffect is enable, <a href=\"#mapbox3D.temporalSuperSampling\">temporalSuperSampling</a> 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.</p>\n","properties":{"enable":{"type":["boolean"],"description":"<p>Whether to enable post-processing effects. Not enabled by default.</p>\n","default":false},"bloom":{"type":["Object"],"description":"<p>Bloom is used to reproducing the effects that occur in real cameras when taking pictures in a bright environment.\nBecause traditional RGB can only represent colors in the range of '0 - 255', so we need to use the bloom effect simulates fringes of light extending from the borders of bright areas, creating the illusion of a bright light overwhelming the camera. As shown below：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/globe-posteffect-bloom.png\"></p>\n","properties":{"enable":{"type":["boolean"],"description":"<p>Whether to enable the bloom effect.</p>\n","default":false},"bloomIntensity":{"type":["number"],"description":"<p>The intensity of the bloom. The default is 0.1.</p>\n","default":0.1}}},"depthOfField":{"type":["Object"],"description":"<p>Depth of Field is a post-processing effect that simulates the focus properties of a camera. The area of focus is clear, and the area away from the focus is gradually blurred.</p>\n<p>The depth of field effect allows the observer to focus on the area of focus and make the picture feel stronger. Large depth of field can also create a macro model effect.</p>\n<p>The following are the differences between turning off and turning on the depth of field effect.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-no-dof.png\" width=\"100%\" title=\"Disable\"><img />\n <img src=\"documents/asset/gl/img/geo-dof.png\" width=\"100%\" title=\"Enable\"><img />\n<div />\n","properties":{"enable":{"type":["boolean"],"description":"<p>Whether to enable the depth of field.</p>\n","default":false},"focalDistance":{"type":["boolean"],"description":"<p>The initial focus distance. The user can click on the area to automatically focus.</p>\n","default":50},"focalRange":{"type":["boolean"],"description":"<p>The size of the in-focus area. The objects in this range are completely clear and there is no blurring.</p>\n","default":20},"fstop":{"type":["number"],"description":"<p>[F value] of the lens (<a href=\"https://zh.wikipedia.org/wiki/%E7%84%A6%E6%AF%94)\" target=\"_blank\">https://zh.wikipedia.org/wiki/%E7%84%A6%E6%AF%94)</a>, the smaller the value, the shallower the depth of field.</p>\n","default":2.8},"blurRadius":{"type":["number"],"description":"<p>Blur radius outside the focus.</p>\n<p>The difference blur effect between the different radius. </p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-dof-small.png\" width=\"100%\" title=\"blurSize: 3\"><img />\n <img src=\"documents/asset/gl/img/geo-dof-large.png\" width=\"100%\" title=\"blurSize: 10\"><img />\n<div />\n","default":10}}},"screenSpaceAmbientOcclusion":{"type":["Object"],"description":"<p>The ambient occlusion post-processing effect darkens the corners, holes, crevices, and areas where most light can`t reach. It is a supplement to the traditional shadow map, which makes the whole scene more natural and layered.</p>\n<p>Below is a comparison of the effects of no SSAO and SSAO:</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-no-ssao.png\" width=\"100%\" title=\"No SSAO\"><img />\n <img src=\"documents/asset/gl/img/geo-ssao.png\" width=\"100%\" title=\"SSAO\"><img />\n<div />\n"},"SSAO":{"type":["Object"],"description":"<p>Same as <a href=\"#mapbox3D.postEffect.screenSpaceAmbientOcclusion\">screenSpaceAmbientOcclusion</a></p>\n","properties":{"enable":{"type":["boolean"],"description":"<p>Whether to enable SSAO (screen space ambient occlusion). Not enabled by default.</p>\n","default":false},"quality":{"type":["string"],"description":"<p>The quality of SSAO (screen space ambient occlusion). Supporting<code class=\"codespan\">'low'</code>, <code class=\"codespan\">'medium'</code>, <code class=\"codespan\">'high'</code>, <code class=\"codespan\">'ultra'</code></p>\n","default":"'medium'"},"radius":{"type":["number"],"description":"<p>The radius of the SSAO (screen space ambient occlusion). The larger the radius, the more natural the effect, but you need to set a higher <code class=\"codespan\">'quality'</code>. </p>\n<p>The following example is the difference between a smaller and larger radius:</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-ssao-small-radius.png\" width=\"100%\" title=\"Radius: 1\"><img />\n <img src=\"documents/asset/gl/img/geo-ssao-large-radius.png\" width=\"100%\" title=\"Radius: 10\"><img />\n<div />\n","default":2},"intensity":{"type":["number"],"description":"<p>The intensity of SSAO (screen space ambient occlusion). The larger the value, the darker the color.</p>\n","default":1}}},"colorCorrection":{"type":["Object"],"description":"<p>Color correction and adjustment. Similar to Color Adjustments in Photoshop.</p>\n<p>The same scene in the figure below is adjusted to the difference between the cool color system and the warm color system.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/buildings-cold.jpg\" width=\"100%\" title=\"Cold\"><img />\n <img src=\"documents/asset/gl/img/buildings-warm.jpg\" width=\"100%\" title=\"Warm\"><img />\n<div />\n\n","properties":{"enable":{"type":["boolean"],"description":"<p>Whether to enable the color correction.</p>\n","default":true},"lookupTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"],"description":"<p>Color correction lookup texture, recommended.</p>\n<p>The color correction lookup texture is a texture image like the one below.</p>\n<p><img width=\"200\" height=\"auto\" src=\"documents/asset/gl/img/lookup.png\"></p>\n<p>This is the basic lookup texture image that you can use directly.\nTo adjust the color of the scene to the effect you want, you can take a screenshot of the scene and adjust the color to the desired effect in image processing software such as Photoshop. Then apply the same adjustment to the image of the lookup texture above.</p>\n<p>For example, after turning into a cool tone, the image of the lookup texture will look like this:</p>\n<p><img width=\"200\" height=\"auto\" src=\"documents/asset/gl/img/crispwinter.png\"></p>\n<p>Then the texture image is used as the value of the configuration item, and you can get the same effect in Photoshop.</p>\n<p>Of course, if you just want to get a screenshot, you don't have to do it anymore, but if you want to easily adjust to the ideal color in real-time interactive works, this is very useful.</p>\n"},"exposure":{"type":["number"],"description":"<p>The exposure of the image.</p>\n","default":0},"brightness":{"type":["number"],"description":"<p>The brightness of the image.</p>\n","default":0},"contrast":{"type":["number"],"description":"<p>The contrast of the image.</p>\n","default":1},"saturation":{"type":["number"],"description":"<p>The saturation of the image.</p>\n","default":1}}},"FXAA":{"type":["Object"],"description":"<p>After opening <a href=\"#mapbox3D.postEffect\">postEffect</a>, WebGL's default MSAA (Multi Sampling Anti Aliasing) will not work. At this time, FXAA (Fast Approximate Anti-Aliasing) can solve the anti-aliasing problem quickly and easily. FXAA blurs the edge of the scene to solve the problem of aliasing. It works well on some scenes, but in echarts-gl, you need to ensure that the edges of many texts and lines are sharp and clear, so FXAA is not suitable. At this point we can use supersampling by setting a higher <code class=\"codespan\">devicePixelRatio</code> as follows:</p>\n<pre><code class=\"lang-js\">var chart = echarts.init(dom, null, {\n devicePixelRatio: 2\n})\n</code></pre>\n<p>However, setting a higher <code class=\"codespan\">devicePixelRatio</code> has high requirements for computer performance, so more often we recommend using <a href=\"#mapbox3D.temporalSuperSampling\">temporalSuperSampling</a> in echarts-gl. 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.</p>\n","properties":{"enable":{"type":["boolean"],"description":"<p>Whether to enable FXAA. Not enabled by default.</p>\n","default":false}}}}},"temporalSuperSampling":{"type":["Object"],"description":"<p>Temporal supersampling. After opening <a href=\"#mapbox3D.postEffect\">postEffect</a>, WebGL's default MSAA (MultiSampling Anti-Aliasing) will not work, so we need to solve the problem of sampling.</p>\n<p>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.\nAnd in this process, ECharts-gl also progressively enhances some of the effects in <a href=\"#mapbox3D.postEffect\">postEffect</a> that require sampled guarantees. For example <a href=\"#mapbox3D.postEffect.SSAO\">SSAO</a>, <a href=\"#mapbox3D.postEffect.depthOfField\">Depth of Field</a>, and shadow.</p>\n<p>The following is the difference between not opening <code class=\"codespan\">temporalSuperSampling</code> and opening <code class=\"codespan\">temporalSuperSampling</code>.</p>\n<div class=\"twentytwenty-container\" style=\"width: 800px;\">\n <img src=\"documents/asset/gl/img/surface-no-taa.png\" width=\"100%\" title=\"No AA\"><img />\n <img src=\"documents/asset/gl/img/surface-taa.png\" width=\"100%\" title=\"AA\"><img />\n<div />\n","properties":{"enable":{"type":["boolean"],"description":"<p>Whether to enable temporal supersampling. By default, temporal supersampling is also turned on synchronously when <a href=\"#mapbox3D.postEffect\">postEffect</a> is turned on.</p>\n","default":"'auto'"}}}}},"grid3D":{"type":["Object"],"description":"<p>3D cartesian coordinate system component. It requires <a href=\"#xAxis3D\">xAxis3D</a>, <a href=\"#yAxis3D\">yAxis3D</a>and <a href=\"#zAxis3D\">zAxis3D</a> axis components to be used together.</p>\n<p>You can draw <a href=\"#series-line3D\">3D Lines</a>, <a href=\"#series-bar3D\">3D Bar</a>, <a href=\"#series-scatter3D\">3D Scatter</a>, <a href=\"#series-surface\">surface</a> on the 3D Cartesian coordinate system.</p>\n<p>You can set the <a href=\"#grid3D.postEffect\">postEffect</a>, <a href=\"#grid3D.light\">light</a> and other configuration items to improve the display of 3D charts in <code class=\"codespan\">grid3D</code>.</p>\n<p>Below is a description of the axis configuration items in grid3D. </p>\n<p><img width=\"700\" height=\"auto\" src=\"documents/asset/gl/img/grid3D.png\"></p>\n<hr>\n<p><strong>Note：</strong> The <a href=\"#xAxis3D.axisLine\">axisLine</a>, <a href=\"#xAxis3D.axisTick\">axisTick</a>, <a href=\"#xAxis3D.axisLabel\">axisLabel</a>, <a href=\"#xAxis3D.splitLine\">splitLine</a>, <a href=\"#xAxis3D.splitArea\">splitArea</a>, <a href=\"#xAxis3D.axisPointer\">axisPointer</a> set separately on <a href=\"#xAxis3D\">xAxis3D</a>, <a href=\"#yAxis3D\">yAxis3D</a>, <a href=\"#zAxis3D\">zAxis3D</a> will cover the corresponding configuration items under <a href=\"#grid3D\">grid3D</a>.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to display a 3D cartesian coordinate system component.</p>\n"},"boxWidth":{"type":["number"],"description":"<p>3D cartesian coordinate system width in a 3D scene. With <a href=\"#grid3D.viewControl.distance\">viewControl.distance</a> you can get the most appropriate display size.</p>\n","default":100},"boxHeight":{"type":["number"],"description":"<p>3D cartesian coordinate system height in a 3D scene.</p>\n","default":100},"boxDepth":{"type":["number"],"description":"<p>3D cartesian coordinate system depth in a 3D scene.</p>\n","default":100},"axisLine":{"type":["Object"],"description":"<p>Settings related to axis line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>axis scale label is valid in the category axis. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The interval data can be represented by a numerical value or by a callback function. The format of the callback function is as follows:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) => boolean\n</code></pre>\n<p>The first parameter is the index of the class, the second value is the name of the class, and if it is skipped, it returns <code class=\"codespan\">false</code>.</p>\n","default":"'auto'"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"description":"<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-js\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n","default":"'#333'"},"opacity":{"type":["number"],"description":"<p>The opacity of the line.</p>\n","default":1},"width":{"type":["number"],"description":"<p>The width of the line.</p>\n","default":2}}}}},"axisLabel":{"type":["Object"],"description":"<p>Settings related to axis label.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis label from appearing.</p>\n","default":true},"margin":{"type":["number"],"description":"<p>The margin between the axis label and the axis line.</p>\n<p><strong>Note：</strong> This distance is three-dimensional space, not screen space.</p>\n","default":8},"interval":{"type":["number","Function"],"description":"<p>axis scale label is valid in the category axis. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The interval data can be represented by a numerical value or by a callback function. The format of the callback function is as follows:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) => boolean\n</code></pre>\n<p>The first parameter is the index of the class, the second value is the name of the class, and if it is skipped, it returns <code class=\"codespan\">false</code>.</p>\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"","default":null},"textStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color","Function"],"description":"<p>Color of axis label is set to be <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class=\"lang-js\">(val: string) => Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class=\"lang-js\">textStyle: {\n color: function (value, index) {\n return value >= 0 ? 'green' : 'red';\n }\n}\n</code></pre>\n"},"borderWidth":{"type":["number"],"description":"<p>The border width of the text.</p>\n","default":0},"borderColor":{"type":["string"],"description":"<p>The border color of the text.</p>\n","default":"#fff"},"fontFamily":{"type":["string"],"description":"<p>The font family of the text.</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>The font size of the text.</p>\n","default":12},"fontWeight":{"type":["string"],"description":"<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"}}}}},"axisTick":{"type":["Object"],"description":"<p>Settings related to axis tick.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis tick from showing.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>axis scale label is valid in the category axis. Defaults to the same as <a href=\"#.axisLabel.interval\">axisLabel.interval</a>. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The interval data can be represented by a numerical value or by a callback function. The format of the callback function is as follows:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) => boolean\n</code></pre>\n<p>The first parameter is the index of the class, the second value is the name of the class, and if it is skipped, it returns <code class=\"codespan\">false</code>.</p>\n","default":"'auto'"},"length":{"type":["number"],"description":"<p>The length of the axis tick.</p>\n","default":5},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Color of axis label is set to be <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"opacity":{"type":["number"],"description":"<p>The opacity of the line.</p>\n","default":1},"width":{"type":["number"],"description":"<p>The width of the line.</p>\n","default":1}}}}},"splitLine":{"type":["Object"],"description":"<p>Settings related to axis line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>axis scale label is valid in the category axis. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The interval data can be represented by a numerical value or by a callback function. The format of the callback function is as follows:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) => boolean\n</code></pre>\n<p>The first parameter is the index of the class, the second value is the name of the class, and if it is skipped, it returns <code class=\"codespan\">false</code>.</p>\n","default":"'auto'"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"description":"<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-js\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n","default":"'#333'"},"opacity":{"type":["number"],"description":"<p>The opacity of the line.</p>\n","default":1},"width":{"type":["number"],"description":"<p>The width of the line.</p>\n","default":2}}}}},"splitArea":{"type":["Object"],"description":"<p>Split area of axis in <a href=\"#grid\">grid</a> area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to be <code class=\"codespan\">true</code> to show the splitArea.</p>\n","default":false},"interval":{"type":["number","Function"],"description":"<p>Axis splitArea is valid in the category axis. Defaults to the same as <a href=\"#.axisLabel.interval\">axisLabel.interval</a>. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The interval data can be represented by a numerical value or by a callback function. The format of the callback function is as follows:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) => boolean\n</code></pre>\n<p>The first parameter is the index of the class, the second value is the name of the class, and if it is skipped, it returns <code class=\"codespan\">false</code>.</p>\n","default":"'auto'"},"areaStyle":{"type":["Object"],"description":"<p>Split area style.</p>\n","properties":{"color":{"type":["Array"],"description":"<p>Color of the split area.\nThe split area color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.</p>\n","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']"}}}}},"axisPointer":{"type":["Object"],"description":"<p>Configurations for axis pointer.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to display the axisPointer. Set this to be <code class=\"codespan\">true</code> to show the splitArea.</p>\n","default":true},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"description":"<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-js\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n","default":"'rgba(0, 0, 0, 0.8)'"},"opacity":{"type":["number"],"description":"<p>The opacity of the line.</p>\n","default":1},"width":{"type":["number"],"description":"<p>The width of the line.</p>\n","default":1}}},"label":{"type":["Object"],"description":"<p>The label of axisPointer.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to display the label of axisPointer. Value axes are displayed by default, while category axes are not.</p>\n","default":true},"formatter":{"type":["Function"],"description":"<p>The formatter of the label. . The first parameter to the function is the value of the current axis. The second parameter to the function is an array of values for all axes.</p>\n<pre><code class=\"lang-js\">(value: number, valueAll: Array) => string\n</code></pre>\n"},"margin":{"type":["number"],"description":"<p>Distance between label and axis.\nLike the scale label, this distance is a 3D space rather than a screen pixel.</p>\n"},"textStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"description":"<p>The Color of the text.</p>\n","default":"\"#fff\""},"borderWidth":{"type":["number"],"description":"<p>The border width of the text.</p>\n","default":0},"borderColor":{"type":["string"],"description":"<p>The border color of the text.</p>\n","default":"#fff"},"fontFamily":{"type":["string"],"description":"<p>The font family of the text.</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>The font size of the text.</p>\n","default":16},"fontWeight":{"type":["string"],"description":"<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"}}}}}}},"environment":{"type":["string"],"description":"<p>Environment map. Support for solid colors, gradual colors, URL of panoramic texture. The default is <code class=\"codespan\">'auto'</code>, which is used as the environment texture when <a href=\"#grid3D.light.ambientCubemap.texture\">light.ambientCubemap.texture</a> is configured. Otherwise, the environment texture is not displayed.</p>\n<p>Example: </p>\n<pre><code class=\"lang-js\">// Configure as a panoramic texture\nenvironment: 'asset/starfield.jpg'\n// Configured as a solid black background\nenvironment: '#000'\n// Configured as a background with a vertical gradient\nenvironment: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{\n offset: 0, color: '#00aaff' // Sky color\n}, {\n offset: 0.7, color: '#998866' // Ground color\n}, {\n offset: 1, color: '#998866' // Ground color\n}], false)\n\n</code></pre>\n","default":"'auto'"},"light":{"type":["Object"],"description":"<p>Light related settings. Invalid when <a href=\"#grid3D.shading\">shading</a> is 'color'.</p>\n<p>The lighting settings affect the components and all the charts on the component's coordinate system.</p>\n<p>A reasonable lighting setting can make the brightness and darkness of the whole scene richer and more layered.</p>\n","properties":{"main":{"type":["Object"],"description":"<p>The setting of the main light source of the scene. In the <a href=\"#globe\">globe</a> component is the sun.</p>\n","properties":{"color":{"type":["string"],"description":"<p>The color of the main light source.</p>\n","default":"#fff"},"intensity":{"type":["number"],"description":"<p>The intensity of the main light source.</p>\n","default":1},"shadow":{"type":["boolean"],"description":"<p>Whether the main light source displays a shadow. The default is off.</p>\n<p>Turning on the shadows can bring more realistic and layered lighting to the scene. But it also increases the operating overhead of the program.</p>\n<p>The following two images show the difference between turning on the shadow and turning off the shadow.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-shadow.png\" width=\"100%\" title=\"Shadow\"><img />\n <img src=\"documents/asset/gl/img/geo-no-shadow.png\" width=\"100%\" title=\"No Shadow\"><img />\n<div />\n","default":false},"shadowQuality":{"type":["string"],"description":"<p>The quality of the shadow. You can choose <code class=\"codespan\">'low'</code>, <code class=\"codespan\">'medium'</code>, <code class=\"codespan\">'high'</code>, <code class=\"codespan\">'ultra'</code></p>\n<p>The following two images shows the difference between low quality and high quality shadows.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-shadow-low.png\" width=\"100%\" title=\"Low\"><img />\n <img src=\"documents/asset/gl/img/geo-shadow-high.png\" width=\"100%\" title=\"High\"><img />\n<div />\n","default":"'medium'"},"alpha":{"type":["number"],"description":"<p>The main light source is around the x-axis, which is the angle of up-down rotation. Control the direction of the light with <a href=\"#grid3D.light.main.beta\">beta</a>.</p>\n<p>As the following image show:</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/light-alpha-beta.png\"></p>\n<p>The <a href=\"#globe\">globe</a> component can control the time of sunlight by <a href=\"#globe.light.main.time\">time</a>.</p>\n","default":30},"beta":{"type":["number"],"description":"<p>The main light source is around the y-axis, which is the angle of the left-right rotation.</p>\n","default":30}}},"ambient":{"type":["Object"],"description":"<p>Global ambient light settings.</p>\n","properties":{"color":{"type":["string"],"description":"<p>The color of ambient light.</p>\n","default":"#fff"},"intensity":{"type":["number"],"description":"<p>The intensity of ambient light.</p>\n","default":0.2}}},"ambientCubemap":{"type":["Object"],"description":"<p>The ambientCubemap uses texture as the source of ambient light, which provides diffuse and specular for objects. The diffuse and specular can be set separately by <a href=\"#grid3D.light.ambientCubemap.diffuseIntensity\">diffuseIntensity</a> and <a href=\"#grid3D.light.ambientCubemap.specularIntensity\">specularIntensity</a>.</p>\n","properties":{"texture":{"type":["string"],"description":"<p>The URL of the ambient cubemap supports HDR images in the <code class=\"codespan\">.hdr</code> format. You can obtained the resources for <code class=\"codespan\">.hdr</code> from <a href=\"http://www.hdrlabs.com/sibl/archive.html\" target=\"_blank\">http://www.hdrlabs.com/sibl/archive.html</a> and other websites.</p>\n<p>Example：</p>\n<pre><code class=\"lang-js\">ambientCubemap: {\n texture: 'pisa.hdr',\n // The exposure value used when analytic hdr\n exposure: 1.0\n}\n</code></pre>\n"},"diffuseIntensity":{"type":["number"],"description":"<p>The intensity of diffuse.</p>\n","default":0.5},"specularIntensity":{"type":["number"],"description":"<p>The intensity of specular.</p>\n","default":0.5}}}}},"postEffect":{"type":["Object"],"description":"<p>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.</p>\n<p>The following are the differences between closing <code class=\"codespan\">postEffect</code> and opening <code class=\"codespan\">postEffect</code>.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/globe-posteffect-disable.png\" width=\"100%\" title=\"Disable\"><img />\n <img src=\"documents/asset/gl/img/globe-posteffect-enable.png\" width=\"100%\" title=\"Enable\"><img />\n<div />\n\n<p>Note that when postEffect is enable, <a href=\"#grid3D.temporalSuperSampling\">temporalSuperSampling</a> 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.</p>\n","properties":{"enable":{"type":["boolean"],"description":"<p>Whether to enable post-processing effects. Not enabled by default.</p>\n","default":false},"bloom":{"type":["Object"],"description":"<p>Bloom is used to reproducing the effects that occur in real cameras when taking pictures in a bright environment.\nBecause traditional RGB can only represent colors in the range of '0 - 255', so we need to use the bloom effect simulates fringes of light extending from the borders of bright areas, creating the illusion of a bright light overwhelming the camera. As shown below：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/globe-posteffect-bloom.png\"></p>\n","properties":{"enable":{"type":["boolean"],"description":"<p>Whether to enable the bloom effect.</p>\n","default":false},"bloomIntensity":{"type":["number"],"description":"<p>The intensity of the bloom. The default is 0.1.</p>\n","default":0.1}}},"depthOfField":{"type":["Object"],"description":"<p>Depth of Field is a post-processing effect that simulates the focus properties of a camera. The area of focus is clear, and the area away from the focus is gradually blurred.</p>\n<p>The depth of field effect allows the observer to focus on the area of focus and make the picture feel stronger. Large depth of field can also create a macro model effect.</p>\n<p>The following are the differences between turning off and turning on the depth of field effect.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-no-dof.png\" width=\"100%\" title=\"Disable\"><img />\n <img src=\"documents/asset/gl/img/geo-dof.png\" width=\"100%\" title=\"Enable\"><img />\n<div />\n","properties":{"enable":{"type":["boolean"],"description":"<p>Whether to enable the depth of field.</p>\n","default":false},"focalDistance":{"type":["boolean"],"description":"<p>The initial focus distance. The user can click on the area to automatically focus.</p>\n","default":50},"focalRange":{"type":["boolean"],"description":"<p>The size of the in-focus area. The objects in this range are completely clear and there is no blurring.</p>\n","default":20},"fstop":{"type":["number"],"description":"<p>[F value] of the lens (<a href=\"https://zh.wikipedia.org/wiki/%E7%84%A6%E6%AF%94)\" target=\"_blank\">https://zh.wikipedia.org/wiki/%E7%84%A6%E6%AF%94)</a>, the smaller the value, the shallower the depth of field.</p>\n","default":2.8},"blurRadius":{"type":["number"],"description":"<p>Blur radius outside the focus.</p>\n<p>The difference blur effect between the different radius. </p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-dof-small.png\" width=\"100%\" title=\"blurSize: 3\"><img />\n <img src=\"documents/asset/gl/img/geo-dof-large.png\" width=\"100%\" title=\"blurSize: 10\"><img />\n<div />\n","default":10}}},"screenSpaceAmbientOcclusion":{"type":["Object"],"description":"<p>The ambient occlusion post-processing effect darkens the corners, holes, crevices, and areas where most light can`t reach. It is a supplement to the traditional shadow map, which makes the whole scene more natural and layered.</p>\n<p>Below is a comparison of the effects of no SSAO and SSAO:</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-no-ssao.png\" width=\"100%\" title=\"No SSAO\"><img />\n <img src=\"documents/asset/gl/img/geo-ssao.png\" width=\"100%\" title=\"SSAO\"><img />\n<div />\n"},"SSAO":{"type":["Object"],"description":"<p>Same as <a href=\"#grid3D.postEffect.screenSpaceAmbientOcclusion\">screenSpaceAmbientOcclusion</a></p>\n","properties":{"enable":{"type":["boolean"],"description":"<p>Whether to enable SSAO (screen space ambient occlusion). Not enabled by default.</p>\n","default":false},"quality":{"type":["string"],"description":"<p>The quality of SSAO (screen space ambient occlusion). Supporting<code class=\"codespan\">'low'</code>, <code class=\"codespan\">'medium'</code>, <code class=\"codespan\">'high'</code>, <code class=\"codespan\">'ultra'</code></p>\n","default":"'medium'"},"radius":{"type":["number"],"description":"<p>The radius of the SSAO (screen space ambient occlusion). The larger the radius, the more natural the effect, but you need to set a higher <code class=\"codespan\">'quality'</code>. </p>\n<p>The following example is the difference between a smaller and larger radius:</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-ssao-small-radius.png\" width=\"100%\" title=\"Radius: 1\"><img />\n <img src=\"documents/asset/gl/img/geo-ssao-large-radius.png\" width=\"100%\" title=\"Radius: 10\"><img />\n<div />\n","default":2},"intensity":{"type":["number"],"description":"<p>The intensity of SSAO (screen space ambient occlusion). The larger the value, the darker the color.</p>\n","default":1}}},"colorCorrection":{"type":["Object"],"description":"<p>Color correction and adjustment. Similar to Color Adjustments in Photoshop.</p>\n<p>The same scene in the figure below is adjusted to the difference between the cool color system and the warm color system.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/buildings-cold.jpg\" width=\"100%\" title=\"Cold\"><img />\n <img src=\"documents/asset/gl/img/buildings-warm.jpg\" width=\"100%\" title=\"Warm\"><img />\n<div />\n\n","properties":{"enable":{"type":["boolean"],"description":"<p>Whether to enable the color correction.</p>\n","default":true},"lookupTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"],"description":"<p>Color correction lookup texture, recommended.</p>\n<p>The color correction lookup texture is a texture image like the one below.</p>\n<p><img width=\"200\" height=\"auto\" src=\"documents/asset/gl/img/lookup.png\"></p>\n<p>This is the basic lookup texture image that you can use directly.\nTo adjust the color of the scene to the effect you want, you can take a screenshot of the scene and adjust the color to the desired effect in image processing software such as Photoshop. Then apply the same adjustment to the image of the lookup texture above.</p>\n<p>For example, after turning into a cool tone, the image of the lookup texture will look like this:</p>\n<p><img width=\"200\" height=\"auto\" src=\"documents/asset/gl/img/crispwinter.png\"></p>\n<p>Then the texture image is used as the value of the configuration item, and you can get the same effect in Photoshop.</p>\n<p>Of course, if you just want to get a screenshot, you don't have to do it anymore, but if you want to easily adjust to the ideal color in real-time interactive works, this is very useful.</p>\n"},"exposure":{"type":["number"],"description":"<p>The exposure of the image.</p>\n","default":0},"brightness":{"type":["number"],"description":"<p>The brightness of the image.</p>\n","default":0},"contrast":{"type":["number"],"description":"<p>The contrast of the image.</p>\n","default":1},"saturation":{"type":["number"],"description":"<p>The saturation of the image.</p>\n","default":1}}},"FXAA":{"type":["Object"],"description":"<p>After opening <a href=\"#grid3D.postEffect\">postEffect</a>, WebGL's default MSAA (Multi Sampling Anti Aliasing) will not work. At this time, FXAA (Fast Approximate Anti-Aliasing) can solve the anti-aliasing problem quickly and easily. FXAA blurs the edge of the scene to solve the problem of aliasing. It works well on some scenes, but in echarts-gl, you need to ensure that the edges of many texts and lines are sharp and clear, so FXAA is not suitable. At this point we can use supersampling by setting a higher <code class=\"codespan\">devicePixelRatio</code> as follows:</p>\n<pre><code class=\"lang-js\">var chart = echarts.init(dom, null, {\n devicePixelRatio: 2\n})\n</code></pre>\n<p>However, setting a higher <code class=\"codespan\">devicePixelRatio</code> has high requirements for computer performance, so more often we recommend using <a href=\"#grid3D.temporalSuperSampling\">temporalSuperSampling</a> in echarts-gl. 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.</p>\n","properties":{"enable":{"type":["boolean"],"description":"<p>Whether to enable FXAA. Not enabled by default.</p>\n","default":false}}}}},"temporalSuperSampling":{"type":["Object"],"description":"<p>Temporal supersampling. After opening <a href=\"#grid3D.postEffect\">postEffect</a>, WebGL's default MSAA (MultiSampling Anti-Aliasing) will not work, so we need to solve the problem of sampling.</p>\n<p>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.\nAnd in this process, ECharts-gl also progressively enhances some of the effects in <a href=\"#grid3D.postEffect\">postEffect</a> that require sampled guarantees. For example <a href=\"#grid3D.postEffect.SSAO\">SSAO</a>, <a href=\"#grid3D.postEffect.depthOfField\">Depth of Field</a>, and shadow.</p>\n<p>The following is the difference between not opening <code class=\"codespan\">temporalSuperSampling</code> and opening <code class=\"codespan\">temporalSuperSampling</code>.</p>\n<div class=\"twentytwenty-container\" style=\"width: 800px;\">\n <img src=\"documents/asset/gl/img/surface-no-taa.png\" width=\"100%\" title=\"No AA\"><img />\n <img src=\"documents/asset/gl/img/surface-taa.png\" width=\"100%\" title=\"AA\"><img />\n<div />\n","properties":{"enable":{"type":["boolean"],"description":"<p>Whether to enable temporal supersampling. By default, temporal supersampling is also turned on synchronously when <a href=\"#grid3D.postEffect\">postEffect</a> is turned on.</p>\n","default":"'auto'"}}},"viewControl":{"type":["Object"],"description":"<p><code class=\"codespan\">viewControl</code> is used for mouse rotation, zooming, and other perspective control.</p>\n","properties":{"projection":{"type":["string"],"description":"<p>The way of projection, the default is <code class=\"codespan\">'perspective'</code> projection, also supports setting to <code class=\"codespan\">'orthogonal'</code> projection.</p>\n","default":"perspective"},"autoRotate":{"type":["boolean"],"description":"<p>Whether to enable the angle of view to automatically rotate around the object.</p>\n","default":false},"autoRotateDirection":{"type":["string"],"description":"<p>The direction in which the object auto rotates. The default is <code class=\"codespan\">'cw'</code> means clockwise from top to bottom, and can also use <code class=\"codespan\">'ccw'</code> means counterclockwise from top to bottom.</p>\n","default":"cw"},"autoRotateSpeed":{"type":["number"],"description":"<p>The speed at which the object auto rotates. The unit is <code class=\"codespan\">angle/second</code>, the default is <code class=\"codespan\">10</code>, which is a turn of <code class=\"codespan\">36</code> seconds.</p>\n","default":10},"autoRotateAfterStill":{"type":["number"],"description":"<p>The time interval for automatic rotation to resume after the mouse is still. Valid after opening <a href=\"#grid3D.viewControl.autoRotate\">autoRotate</a>.</p>\n","default":3},"damping":{"type":["number"],"description":"<p>The damping when the mouse is rotated, zoomed, etc.\nWhen it is greater than 0, the angle of view will continue to move (rotate and zoom) due to certain inertia after the mouse is still.</p>\n","default":0.8},"rotateSensitivity":{"type":["number","Array"],"description":"<p>The sensitivity of the rotation operation. The greater the value, the more sensitive. Supports the use of arrays to set the horizontal and vertical rotation sensitivity separately.</p>\n<p>The default is <code class=\"codespan\">1</code>.</p>\n<p>Cannot be rotated after setting to <code class=\"codespan\">0</code>.</p>\n<pre><code class=\"lang-js\">// can't rotate\nrotateSensitivity: 0\n// can only be rotated horizontally\nrotateSensitivity: [1, 0]\n// can only rotate vertically\nrotateSensitivity: [0, 1]\n</code></pre>\n","default":1},"zoomSensitivity":{"type":["number"],"description":"<p>The sensitivity of the zoom operation, the larger the value, the more sensitive. The default is <code class=\"codespan\">1</code>.</p>\n<p>Can<code class=\"codespan\">t be scaled after setting to</code>0`.</p>\n","default":1},"panSensitivity":{"type":["number"],"description":"<p>The sensitivity of the panning operation, the greater the value, the more sensitive. Supports the use of arrays to set the horizontal and vertical translation sensitivity.</p>\n<p>The default is <code class=\"codespan\">1</code>.</p>\n<p>Cannot pan after setting to <code class=\"codespan\">0</code>.</p>\n","default":1},"panMouseButton":{"type":["string"],"description":"<p>The mouse button used for panning operation supports:</p>\n<ul>\n<li><p><code class=\"codespan\">'left'</code> left mouse button (default)</p>\n</li>\n<li><p><code class=\"codespan\">'middle'</code> middle mouse button</p>\n</li>\n<li><p><code class=\"codespan\">'right'</code> right mouse button</p>\n</li>\n</ul>\n<p>Note: If set to the right mouse button, the default context menu will be blocked.</p>\n","default":"left"},"rotateMouseButton":{"type":["string"],"description":"<p>The mouse button used for the rotation operation supports:</p>\n<ul>\n<li><p><code class=\"codespan\">'left'</code> left mouse button</p>\n</li>\n<li><p><code class=\"codespan\">'middle'</code> middle mouse button (default)</p>\n</li>\n<li><p><code class=\"codespan\">'right'</code> right mouse button</p>\n</li>\n</ul>\n<p>Note: If set to the right mouse button, the default context menu will be blocked.</p>\n","default":"middle"},"distance":{"type":["number"],"description":"<p>The distance of the default perspective from the subject. For <a href=\"#globe\">globe</a>, the distance from the Earth's surface is the distance from the center origin for other components such as <a href=\"#grid3D\">grid3D</a> and <a href=\"#geo3D\">geo3D</a>. Valid when <a href=\"#grid3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'perspective'</code>.</p>\n","default":200},"minDistance":{"type":["number"],"description":"<p>The angle of view is controlled by the mouse to bring the minimum distance to the subject. Valid when <a href=\"#grid3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'perspective'</code>.</p>\n","default":40},"maxDistance":{"type":["number"],"description":"<p>The angle of view can be extended to the maximum distance of the subject by mouse control. Valid when <a href=\"#grid3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'perspective'</code>.</p>\n","default":400},"orthographicSize":{"type":["number"],"description":"<p>The size of the orthogonal projection. Valid when <a href=\"#grid3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'orthographic'</code>.</p>\n","default":200},"maxOrthographicSize":{"type":["number"],"description":"<p>The maximum value of the orthogonal projection scaling. Valid when <a href=\"#grid3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'orthographic'</code>.</p>\n","default":40},"minOrthographicSize":{"type":["number"],"description":"<p>The minimum value of the orthogonal projection scaling. Valid when <a href=\"#grid3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'orthographic'</code></p>\n","default":400},"alpha":{"type":["number"],"description":"<p>The angle of view is around the x-axis, which is the angle of rotation up and down. With <a href=\"#grid3D.light.main.beta\">beta</a> you can control the direction of the perspective.</p>\n<p>As shown below：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/view-alpha-beta.png\"></p>\n","default":20},"beta":{"type":["number"],"description":"<p>The angle of view is around the y-axis, which is the angle of rotation from left to right.</p>\n","default":40},"center":{"type":["Array"],"description":"<p>At the center of the angle of view, the rotation will also rotate around this center point. The default is <code class=\"codespan\">[0,0,0]</code>.</p>\n"},"minAlpha":{"type":["number"],"description":"<p>The minimum alpha value to rotate up and down. That is, the angle of view can be rotated to reach the uppermost angle.</p>\n","default":-90},"maxAlpha":{"type":["number"],"description":"<p>The maximum alpha value to rotate up and down. That is, the angle of view can be rotated to the lowest angle.</p>\n","default":90},"minBeta":{"type":["number"],"description":"<p>The minimum beta value to rotate left and right. That is, the angle of view can be rotated to the leftmost angle.</p>\n","default":null},"maxBeta":{"type":["number"],"description":"<p>The maximum beta value to rotate left and right rotation. That is, the angle of view can be rotated to the rightmost angle.</p>\n","default":null},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationDurationUpdate":{"type":["number"],"description":"<p>The duration time for update the transition animation.</p>\n","default":1000},"animationEasingUpdate":{"type":["string"],"description":"<p>The easing effect for update transition animation.</p>\n","default":"cubicInOut"}}},"zlevel":{"type":["number"],"description":"<p>The layer in which the component is located.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> 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 <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid the crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n<p><strong>Note:</strong> The layers of the components in echarts-gl need to be separated from the layers of the components in echarts. The same <code class=\"codespan\">zlevel</code> cannot be used for both WebGL and Canvas drawing at the same time.</p>\n","default":-10},"left":{"type":["string","number"],"description":"<p>Distance between component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>; and it can also be <code class=\"codespan\">'left'</code>, <code class=\"codespan\">'center'</code>, or <code class=\"codespan\">'right'</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">'left'</code>, <code class=\"codespan\">'center'</code>, or <code class=\"codespan\">'right'</code>, then the component will be aligned automatically based on position.</p>\n","default":"auto"},"top":{"type":["string","number"],"description":"<p>Distance between component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>; and it can also be <code class=\"codespan\">'top'</code>, <code class=\"codespan\">'middle'</code>, or <code class=\"codespan\">'bottom'</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">'top'</code>, <code class=\"codespan\">'middle'</code>, or <code class=\"codespan\">'bottom'</code>, then the component will be aligned automatically based on position.</p>\n","default":"auto"},"right":{"type":["string","number"],"description":"<p>Distance between component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>.</p>\n<p> Adaptive by default.</p>\n","default":"auto"},"bottom":{"type":["string","number"],"description":"<p>Distance between component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>.</p>\n<p> Adaptive by default.</p>\n","default":"auto"},"width":{"type":["string","number"],"description":"<p> The width of the view of the component.</p>\n","default":"auto"},"height":{"type":["string","number"],"description":"<p> The height of the view of the component.</p>\n","default":"auto"}}},"xAxis3D":{"type":["Object"],"description":"<p>The X-axis in a 3D cartesian coordinate system.\nYou can use <a href=\"#xAxis3D.grid3DIndex\">grid3DIndex</a> to index <a href=\"#grid3D\">3D cartesian coordinate system</a>.</p>\n<p>The <a href=\"#xAxis3D.axisLine\">axisLine</a>, <a href=\"#xAxis3D.axisTick\">axisTick</a>, <a href=\"#xAxis3D.axisLabel\">axisLabel</a>, <a href=\"#xAxis3D.splitLine\">splitLine</a>, <a href=\"#xAxis3D.splitArea\">splitArea</a>, <a href=\"#xAxis3D.axisPointer\">axisPointer</a> set separately on <a href=\"#xAxis3D\">xAxis3D</a> will cover the corresponding configuration items under <a href=\"#grid3D\">grid3D</a>.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to display the x-axis.</p>\n"},"name":{"type":["string"],"description":"<p>The name of the axis.</p>\n","default":"'X'"},"grid3DIndex":{"type":["number"],"description":"<p>The index of the <a href=\"#grid3D\">grid3D</a> component used by the axis. The default is to use the first <a href=\"#grid3D\">grid3D</a> component.</p>\n","default":0},"nameTextStyle":{"type":["Object"],"description":"<p>Text style of axis name.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Color of axis name uses <a href=\"#xAxis3D.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"borderWidth":{"type":["number"],"description":"<p>The border width of the text.</p>\n","default":0},"borderColor":{"type":["string"],"description":"<p>The border color of the text.</p>\n","default":"#fff"},"fontFamily":{"type":["string"],"description":"<p>The font family of the text.</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>The font size of the text.</p>\n","default":16},"fontWeight":{"type":["string"],"description":"<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"}}},"nameGap":{"type":["number"],"description":"<p>The gap between the axis name and axis line. Note the distance is in 3D space, not the screen pixel value.</p>\n","default":20},"type":{"type":["string"],"description":"<p>The type of the axis.</p>\n<p>Optional:</p>\n<ul>\n<li><p><code class=\"codespan\">'value'</code>\n The value axis. Suitable for continuous data.</p>\n</li>\n<li><p><code class=\"codespan\">'category'</code>\n The category axis. Suitable for the discrete category data. For this type, the category data must be set through <a href=\"#xAxis3D.data\">data</a>.</p>\n</li>\n<li><p><code class=\"codespan\">'time'</code>\n The timeline. Suitable for the continuous timing data. The time axis has a time format compared to the value axis, and the scale calculation is also different. For example, the scale of the month, week, day, and hour ranges can be determined according to the range of the span.</p>\n</li>\n<li><p><code class=\"codespan\">'log'</code>\n Logarithmic axis. Suitable for the logarithmic data.</p>\n</li>\n</ul>\n","default":"value"},"min":{"type":["number","string"],"description":"<p>The minimum value of axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">'dataMin'</code> so that the minimum value on this axis is set to be the minimum label.</p>\n<p>It will be automatically computed to make sure the axis tick is equally distributed when not set.</p>\n<p>In the category axis, it can also be set as the ordinal number. For example, if a category axis has <code class=\"codespan\">data: ['categoryA', 'categoryB', 'categoryC']</code>, and the ordinal <code class=\"codespan\">2</code> represents <code class=\"codespan\">'categoryC'</code>. Moreover, it can be set as a negative number, like <code class=\"codespan\">-3</code>.</p>\n","default":null},"max":{"type":["number","string"],"description":"<p>The maximum value of the axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">'dataMax'</code> so that the minimum value on this axis is set to be the maximum label.</p>\n<p>It will be automatically computed to make sure the axis tick is equally distributed when not set.</p>\n<p>In the category axis, it can also be set as the ordinal number. For example, if a category axis has <code class=\"codespan\">data: ['categoryA', 'categoryB', 'categoryC']</code>, and the ordinal <code class=\"codespan\">2</code> represents <code class=\"codespan\">'categoryC'</code>. Moreover, it can be set as a negative number, like <code class=\"codespan\">-3</code>.</p>\n","default":null},"scale":{"type":["boolean"],"description":"<p>It is available only in numerical axis, i.e., <a href=\"#xAxis3D.type\">type</a>: 'value'.</p>\n<p>It specifies whether not to contain zero position of axis compulsively. When it is set to be <code class=\"codespan\">true</code>, the axis may not contain zero position, which is useful in the scatter chart for both value axes.</p>\n<p>This configuration item is unavailable when the <a href=\"#xAxis3D.min\">min</a> and <a href=\"#xAxis3D.max\">max</a> are set.</p>\n","default":false},"splitNumber":{"type":["number"],"description":"<p>The number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.</p>\n<p>This is unavailable for the category axis.</p>\n","default":5},"minInterval":{"type":["number"],"description":"<p>Minimum gap between split lines.</p>\n<p>For example, it can be set to be <code class=\"codespan\">1</code> to make sure the axis label is shown as an integer.</p>\n<pre><code class=\"lang-js\">{\n minInterval: 1\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#xAxis3D.type\">type</a> 'value' or 'time'.</p>\n","default":0},"interval":{"type":["number"],"description":"<p>Compulsively set segmentation interval for axis.</p>\n<p>As <a href=\"#xAxis3D.splitNumber\">splitNumber</a> is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with <a href=\"#xAxis3D.min\">min</a> and <a href=\"#xAxis3D.max\">max</a> to compulsively set tickings. But in most cases, we do not suggest using this, out automatic calculation is enough for most situations.</p>\n<p>This is unavailable for category axis. Timestamp should be passed for <a href=\"#xAxis3D.type\">type</a>: 'time' axis. Logged value should be passed for <a href=\"#xAxis3D.type\">type</a>: 'log' axis.</p>\n"},"logBase":{"type":["number"],"description":"<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#xAxis3D.type\">type</a>: 'log'.</p>\n","default":10},"data":{"type":["Array"],"description":"<p>Category data, available in <a href=\"#xAxis3D.type\">type</a>: 'category' axis.</p>\n<p>If <a href=\"#xAxis3D.type\">type</a> is specified as <code class=\"codespan\">'category'</code>, but <code class=\"codespan\">axis.data</code> is not specified, <code class=\"codespan\">axis.data</code> will be auto collected from <a href=\"#series.data\">series.data</a>. It brings convenience, but we should notice that <code class=\"codespan\">axis.data</code> provides then value range of the <code class=\"codespan\">'category'</code> axis. If it is auto collected from <a href=\"#series.data\">series.data</a>, Only the values appearing in <a href=\"#series.data\">series.data</a> can be collected. For example, if <a href=\"#series.data\">series.data</a> is empty, nothing will be collected.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Name list of all categories\ndata: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']\n// Each item could also be a specific configuration item.\n// In this case, `value` is used as the category name.\ndata: [{\n value: 'Monday',\n // Highlight Monday\n textStyle: {\n fontSize: 20,\n color: 'red'\n }\n}, 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']\n</code></pre>\n","items":{"type":"Object","properties":{"value":{"type":["string"],"description":"<p>Name of a category.</p>\n"},"textStyle":{"type":["Object"],"description":"<p>Text style of the category.</p>\n","properties":{"color":{"type":["string"],"description":"<p>The Color of the text.</p>\n","default":"\"#fff\""},"borderWidth":{"type":["number"],"description":"<p>The border width of the text.</p>\n","default":0},"borderColor":{"type":["string"],"description":"<p>The border color of the text.</p>\n","default":"#fff"},"fontFamily":{"type":["string"],"description":"<p>The font family of the text.</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>The font size of the text.</p>\n","default":12},"fontWeight":{"type":["string"],"description":"<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n<p>The display interval of </p>\n","default":"normal"}}}}}},"axisLine":{"type":["Object"],"description":"<p>Settings related to axis line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>axis scale label is valid in the category axis. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The interval data can be represented by a numerical value or by a callback function. The format of the callback function is as follows:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) => boolean\n</code></pre>\n<p>The first parameter is the index of the class, the second value is the name of the class, and if it is skipped, it returns <code class=\"codespan\">false</code>.</p>\n","default":"'auto'"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"description":"<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-js\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n","default":"'#333'"},"opacity":{"type":["number"],"description":"<p>The opacity of the line.</p>\n","default":1},"width":{"type":["number"],"description":"<p>The width of the line.</p>\n","default":2}}}}},"axisLabel":{"type":["Object"],"description":"<p>Settings related to axis label.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis label from appearing.</p>\n","default":true},"margin":{"type":["number"],"description":"<p>The margin between the axis label and the axis line.</p>\n<p><strong>Note：</strong> This distance is three-dimensional space, not screen space.</p>\n","default":8},"interval":{"type":["number","Function"],"description":"<p>axis scale label is valid in the category axis. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The interval data can be represented by a numerical value or by a callback function. The format of the callback function is as follows:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) => boolean\n</code></pre>\n<p>The first parameter is the index of the class, the second value is the name of the class, and if it is skipped, it returns <code class=\"codespan\">false</code>.</p>\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"","default":null},"textStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color","Function"],"description":"<p>Color of axis label is set to be <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class=\"lang-js\">(val: string) => Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class=\"lang-js\">textStyle: {\n color: function (value, index) {\n return value >= 0 ? 'green' : 'red';\n }\n}\n</code></pre>\n"},"borderWidth":{"type":["number"],"description":"<p>The border width of the text.</p>\n","default":0},"borderColor":{"type":["string"],"description":"<p>The border color of the text.</p>\n","default":"#fff"},"fontFamily":{"type":["string"],"description":"<p>The font family of the text.</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>The font size of the text.</p>\n","default":12},"fontWeight":{"type":["string"],"description":"<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"}}}}},"axisTick":{"type":["Object"],"description":"<p>Settings related to axis tick.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis tick from showing.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>axis scale label is valid in the category axis. Defaults to the same as <a href=\"#.axisLabel.interval\">axisLabel.interval</a>. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The interval data can be represented by a numerical value or by a callback function. The format of the callback function is as follows:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) => boolean\n</code></pre>\n<p>The first parameter is the index of the class, the second value is the name of the class, and if it is skipped, it returns <code class=\"codespan\">false</code>.</p>\n","default":"'auto'"},"length":{"type":["number"],"description":"<p>The length of the axis tick.</p>\n","default":5},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Color of axis label is set to be <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"opacity":{"type":["number"],"description":"<p>The opacity of the line.</p>\n","default":1},"width":{"type":["number"],"description":"<p>The width of the line.</p>\n","default":1}}}}},"splitLine":{"type":["Object"],"description":"<p>Settings related to axis line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>axis scale label is valid in the category axis. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The interval data can be represented by a numerical value or by a callback function. The format of the callback function is as follows:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) => boolean\n</code></pre>\n<p>The first parameter is the index of the class, the second value is the name of the class, and if it is skipped, it returns <code class=\"codespan\">false</code>.</p>\n","default":"'auto'"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"description":"<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-js\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n","default":"'#333'"},"opacity":{"type":["number"],"description":"<p>The opacity of the line.</p>\n","default":1},"width":{"type":["number"],"description":"<p>The width of the line.</p>\n","default":2}}}}},"splitArea":{"type":["Object"],"description":"<p>Split area of axis in <a href=\"#grid\">grid</a> area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to be <code class=\"codespan\">true</code> to show the splitArea.</p>\n","default":false},"interval":{"type":["number","Function"],"description":"<p>Axis splitArea is valid in the category axis. Defaults to the same as <a href=\"#.axisLabel.interval\">axisLabel.interval</a>. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The interval data can be represented by a numerical value or by a callback function. The format of the callback function is as follows:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) => boolean\n</code></pre>\n<p>The first parameter is the index of the class, the second value is the name of the class, and if it is skipped, it returns <code class=\"codespan\">false</code>.</p>\n","default":"'auto'"},"areaStyle":{"type":["Object"],"description":"<p>Split area style.</p>\n","properties":{"color":{"type":["Array"],"description":"<p>Color of the split area.\nThe split area color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.</p>\n","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']"}}}}},"axisPointer":{"type":["Object"],"description":"<p>Configurations for axis pointer.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to display the axisPointer. Set this to be <code class=\"codespan\">true</code> to show the splitArea.</p>\n","default":true},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"description":"<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-js\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n","default":"'rgba(0, 0, 0, 0.8)'"},"opacity":{"type":["number"],"description":"<p>The opacity of the line.</p>\n","default":1},"width":{"type":["number"],"description":"<p>The width of the line.</p>\n","default":1}}},"label":{"type":["Object"],"description":"<p>The label of axisPointer.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to display the label of axisPointer. Value axes are displayed by default, while category axes are not.</p>\n","default":true},"formatter":{"type":["Function"],"description":"<p>The formatter of the label. . The first parameter to the function is the value of the current axis. The second parameter to the function is an array of values for all axes.</p>\n<pre><code class=\"lang-js\">(value: number, valueAll: Array) => string\n</code></pre>\n"},"margin":{"type":["number"],"description":"<p>Distance between label and axis.\nLike the scale label, this distance is a 3D space rather than a screen pixel.</p>\n"},"textStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"description":"<p>The Color of the text.</p>\n","default":"\"#fff\""},"borderWidth":{"type":["number"],"description":"<p>The border width of the text.</p>\n","default":0},"borderColor":{"type":["string"],"description":"<p>The border color of the text.</p>\n","default":"#fff"},"fontFamily":{"type":["string"],"description":"<p>The font family of the text.</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>The font size of the text.</p>\n","default":16},"fontWeight":{"type":["string"],"description":"<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"}}}}}}}}},"yAxis3D":{"type":["Object"],"description":"<p>The Y-axis in a 3D cartesian coordinate system.\nYou can use <a href=\"#yAxis3D.grid3DIndex\">grid3DIndex</a> to index <a href=\"#grid3D\">3D cartesian coordinate system</a>.</p>\n<p>The <a href=\"#yAxis3D.axisLine\">axisLine</a>, <a href=\"#yAxis3D.axisTick\">axisTick</a>, <a href=\"#yAxis3D.axisLabel\">axisLabel</a>, <a href=\"#yAxis3D.splitLine\">splitLine</a>, <a href=\"#yAxis3D.splitArea\">splitArea</a>, <a href=\"#yAxis3D.axisPointer\">axisPointer</a> set separately on <a href=\"#yAxis3D\">yAxis3D</a> will cover the corresponding configuration items under <a href=\"#grid3D\">grid3D</a>.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to display the y-axis.</p>\n"},"name":{"type":["string"],"description":"<p>The name of the axis.</p>\n","default":"'Y'"},"grid3DIndex":{"type":["number"],"description":"<p>The index of the <a href=\"#grid3D\">grid3D</a> component used by the axis. The default is to use the first <a href=\"#grid3D\">grid3D</a> component.</p>\n","default":0},"nameTextStyle":{"type":["Object"],"description":"<p>Text style of axis name.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Color of axis name uses <a href=\"#yAxis3D.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"borderWidth":{"type":["number"],"description":"<p>The border width of the text.</p>\n","default":0},"borderColor":{"type":["string"],"description":"<p>The border color of the text.</p>\n","default":"#fff"},"fontFamily":{"type":["string"],"description":"<p>The font family of the text.</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>The font size of the text.</p>\n","default":16},"fontWeight":{"type":["string"],"description":"<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"}}},"nameGap":{"type":["number"],"description":"<p>The gap between the axis name and axis line. Note the distance is in 3D space, not the screen pixel value.</p>\n","default":20},"type":{"type":["string"],"description":"<p>The type of the axis.</p>\n<p>Optional:</p>\n<ul>\n<li><p><code class=\"codespan\">'value'</code>\n The value axis. Suitable for continuous data.</p>\n</li>\n<li><p><code class=\"codespan\">'category'</code>\n The category axis. Suitable for the discrete category data. For this type, the category data must be set through <a href=\"#yAxis3D.data\">data</a>.</p>\n</li>\n<li><p><code class=\"codespan\">'time'</code>\n The timeline. Suitable for the continuous timing data. The time axis has a time format compared to the value axis, and the scale calculation is also different. For example, the scale of the month, week, day, and hour ranges can be determined according to the range of the span.</p>\n</li>\n<li><p><code class=\"codespan\">'log'</code>\n Logarithmic axis. Suitable for the logarithmic data.</p>\n</li>\n</ul>\n","default":"value"},"min":{"type":["number","string"],"description":"<p>The minimum value of axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">'dataMin'</code> so that the minimum value on this axis is set to be the minimum label.</p>\n<p>It will be automatically computed to make sure the axis tick is equally distributed when not set.</p>\n<p>In the category axis, it can also be set as the ordinal number. For example, if a category axis has <code class=\"codespan\">data: ['categoryA', 'categoryB', 'categoryC']</code>, and the ordinal <code class=\"codespan\">2</code> represents <code class=\"codespan\">'categoryC'</code>. Moreover, it can be set as a negative number, like <code class=\"codespan\">-3</code>.</p>\n","default":null},"max":{"type":["number","string"],"description":"<p>The maximum value of the axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">'dataMax'</code> so that the minimum value on this axis is set to be the maximum label.</p>\n<p>It will be automatically computed to make sure the axis tick is equally distributed when not set.</p>\n<p>In the category axis, it can also be set as the ordinal number. For example, if a category axis has <code class=\"codespan\">data: ['categoryA', 'categoryB', 'categoryC']</code>, and the ordinal <code class=\"codespan\">2</code> represents <code class=\"codespan\">'categoryC'</code>. Moreover, it can be set as a negative number, like <code class=\"codespan\">-3</code>.</p>\n","default":null},"scale":{"type":["boolean"],"description":"<p>It is available only in numerical axis, i.e., <a href=\"#yAxis3D.type\">type</a>: 'value'.</p>\n<p>It specifies whether not to contain zero position of axis compulsively. When it is set to be <code class=\"codespan\">true</code>, the axis may not contain zero position, which is useful in the scatter chart for both value axes.</p>\n<p>This configuration item is unavailable when the <a href=\"#yAxis3D.min\">min</a> and <a href=\"#yAxis3D.max\">max</a> are set.</p>\n","default":false},"splitNumber":{"type":["number"],"description":"<p>The number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.</p>\n<p>This is unavailable for the category axis.</p>\n","default":5},"minInterval":{"type":["number"],"description":"<p>Minimum gap between split lines.</p>\n<p>For example, it can be set to be <code class=\"codespan\">1</code> to make sure the axis label is shown as an integer.</p>\n<pre><code class=\"lang-js\">{\n minInterval: 1\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#yAxis3D.type\">type</a> 'value' or 'time'.</p>\n","default":0},"interval":{"type":["number"],"description":"<p>Compulsively set segmentation interval for axis.</p>\n<p>As <a href=\"#yAxis3D.splitNumber\">splitNumber</a> is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with <a href=\"#yAxis3D.min\">min</a> and <a href=\"#yAxis3D.max\">max</a> to compulsively set tickings. But in most cases, we do not suggest using this, out automatic calculation is enough for most situations.</p>\n<p>This is unavailable for category axis. Timestamp should be passed for <a href=\"#yAxis3D.type\">type</a>: 'time' axis. Logged value should be passed for <a href=\"#yAxis3D.type\">type</a>: 'log' axis.</p>\n"},"logBase":{"type":["number"],"description":"<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#yAxis3D.type\">type</a>: 'log'.</p>\n","default":10},"data":{"type":["Array"],"description":"<p>Category data, available in <a href=\"#yAxis3D.type\">type</a>: 'category' axis.</p>\n<p>If <a href=\"#yAxis3D.type\">type</a> is specified as <code class=\"codespan\">'category'</code>, but <code class=\"codespan\">axis.data</code> is not specified, <code class=\"codespan\">axis.data</code> will be auto collected from <a href=\"#series.data\">series.data</a>. It brings convenience, but we should notice that <code class=\"codespan\">axis.data</code> provides then value range of the <code class=\"codespan\">'category'</code> axis. If it is auto collected from <a href=\"#series.data\">series.data</a>, Only the values appearing in <a href=\"#series.data\">series.data</a> can be collected. For example, if <a href=\"#series.data\">series.data</a> is empty, nothing will be collected.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Name list of all categories\ndata: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']\n// Each item could also be a specific configuration item.\n// In this case, `value` is used as the category name.\ndata: [{\n value: 'Monday',\n // Highlight Monday\n textStyle: {\n fontSize: 20,\n color: 'red'\n }\n}, 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']\n</code></pre>\n","items":{"type":"Object","properties":{"value":{"type":["string"],"description":"<p>Name of a category.</p>\n"},"textStyle":{"type":["Object"],"description":"<p>Text style of the category.</p>\n","properties":{"color":{"type":["string"],"description":"<p>The Color of the text.</p>\n","default":"\"#fff\""},"borderWidth":{"type":["number"],"description":"<p>The border width of the text.</p>\n","default":0},"borderColor":{"type":["string"],"description":"<p>The border color of the text.</p>\n","default":"#fff"},"fontFamily":{"type":["string"],"description":"<p>The font family of the text.</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>The font size of the text.</p>\n","default":12},"fontWeight":{"type":["string"],"description":"<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n<p>The display interval of </p>\n","default":"normal"}}}}}},"axisLine":{"type":["Object"],"description":"<p>Settings related to axis line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>axis scale label is valid in the category axis. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The interval data can be represented by a numerical value or by a callback function. The format of the callback function is as follows:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) => boolean\n</code></pre>\n<p>The first parameter is the index of the class, the second value is the name of the class, and if it is skipped, it returns <code class=\"codespan\">false</code>.</p>\n","default":"'auto'"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"description":"<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-js\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n","default":"'#333'"},"opacity":{"type":["number"],"description":"<p>The opacity of the line.</p>\n","default":1},"width":{"type":["number"],"description":"<p>The width of the line.</p>\n","default":2}}}}},"axisLabel":{"type":["Object"],"description":"<p>Settings related to axis label.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis label from appearing.</p>\n","default":true},"margin":{"type":["number"],"description":"<p>The margin between the axis label and the axis line.</p>\n<p><strong>Note：</strong> This distance is three-dimensional space, not screen space.</p>\n","default":8},"interval":{"type":["number","Function"],"description":"<p>axis scale label is valid in the category axis. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The interval data can be represented by a numerical value or by a callback function. The format of the callback function is as follows:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) => boolean\n</code></pre>\n<p>The first parameter is the index of the class, the second value is the name of the class, and if it is skipped, it returns <code class=\"codespan\">false</code>.</p>\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"","default":null},"textStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color","Function"],"description":"<p>Color of axis label is set to be <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class=\"lang-js\">(val: string) => Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class=\"lang-js\">textStyle: {\n color: function (value, index) {\n return value >= 0 ? 'green' : 'red';\n }\n}\n</code></pre>\n"},"borderWidth":{"type":["number"],"description":"<p>The border width of the text.</p>\n","default":0},"borderColor":{"type":["string"],"description":"<p>The border color of the text.</p>\n","default":"#fff"},"fontFamily":{"type":["string"],"description":"<p>The font family of the text.</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>The font size of the text.</p>\n","default":12},"fontWeight":{"type":["string"],"description":"<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"}}}}},"axisTick":{"type":["Object"],"description":"<p>Settings related to axis tick.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis tick from showing.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>axis scale label is valid in the category axis. Defaults to the same as <a href=\"#.axisLabel.interval\">axisLabel.interval</a>. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The interval data can be represented by a numerical value or by a callback function. The format of the callback function is as follows:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) => boolean\n</code></pre>\n<p>The first parameter is the index of the class, the second value is the name of the class, and if it is skipped, it returns <code class=\"codespan\">false</code>.</p>\n","default":"'auto'"},"length":{"type":["number"],"description":"<p>The length of the axis tick.</p>\n","default":5},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Color of axis label is set to be <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"opacity":{"type":["number"],"description":"<p>The opacity of the line.</p>\n","default":1},"width":{"type":["number"],"description":"<p>The width of the line.</p>\n","default":1}}}}},"splitLine":{"type":["Object"],"description":"<p>Settings related to axis line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>axis scale label is valid in the category axis. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The interval data can be represented by a numerical value or by a callback function. The format of the callback function is as follows:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) => boolean\n</code></pre>\n<p>The first parameter is the index of the class, the second value is the name of the class, and if it is skipped, it returns <code class=\"codespan\">false</code>.</p>\n","default":"'auto'"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"description":"<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-js\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n","default":"'#333'"},"opacity":{"type":["number"],"description":"<p>The opacity of the line.</p>\n","default":1},"width":{"type":["number"],"description":"<p>The width of the line.</p>\n","default":2}}}}},"splitArea":{"type":["Object"],"description":"<p>Split area of axis in <a href=\"#grid\">grid</a> area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to be <code class=\"codespan\">true</code> to show the splitArea.</p>\n","default":false},"interval":{"type":["number","Function"],"description":"<p>Axis splitArea is valid in the category axis. Defaults to the same as <a href=\"#.axisLabel.interval\">axisLabel.interval</a>. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The interval data can be represented by a numerical value or by a callback function. The format of the callback function is as follows:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) => boolean\n</code></pre>\n<p>The first parameter is the index of the class, the second value is the name of the class, and if it is skipped, it returns <code class=\"codespan\">false</code>.</p>\n","default":"'auto'"},"areaStyle":{"type":["Object"],"description":"<p>Split area style.</p>\n","properties":{"color":{"type":["Array"],"description":"<p>Color of the split area.\nThe split area color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.</p>\n","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']"}}}}},"axisPointer":{"type":["Object"],"description":"<p>Configurations for axis pointer.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to display the axisPointer. Set this to be <code class=\"codespan\">true</code> to show the splitArea.</p>\n","default":true},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"description":"<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-js\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n","default":"'rgba(0, 0, 0, 0.8)'"},"opacity":{"type":["number"],"description":"<p>The opacity of the line.</p>\n","default":1},"width":{"type":["number"],"description":"<p>The width of the line.</p>\n","default":1}}},"label":{"type":["Object"],"description":"<p>The label of axisPointer.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to display the label of axisPointer. Value axes are displayed by default, while category axes are not.</p>\n","default":true},"formatter":{"type":["Function"],"description":"<p>The formatter of the label. . The first parameter to the function is the value of the current axis. The second parameter to the function is an array of values for all axes.</p>\n<pre><code class=\"lang-js\">(value: number, valueAll: Array) => string\n</code></pre>\n"},"margin":{"type":["number"],"description":"<p>Distance between label and axis.\nLike the scale label, this distance is a 3D space rather than a screen pixel.</p>\n"},"textStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"description":"<p>The Color of the text.</p>\n","default":"\"#fff\""},"borderWidth":{"type":["number"],"description":"<p>The border width of the text.</p>\n","default":0},"borderColor":{"type":["string"],"description":"<p>The border color of the text.</p>\n","default":"#fff"},"fontFamily":{"type":["string"],"description":"<p>The font family of the text.</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>The font size of the text.</p>\n","default":16},"fontWeight":{"type":["string"],"description":"<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"}}}}}}}}},"zAxis3D":{"type":["Object"],"description":"<p>The Z-axis in a 3D cartesian coordinate system.\nYou can use <a href=\"#zAxis3D.grid3DIndex\">grid3DIndex</a> to index <a href=\"#grid3D\">3D cartesian coordinate system</a>.</p>\n<p>The <a href=\"#zAxis3D.axisLine\">axisLine</a>, <a href=\"#zAxis3D.axisTick\">axisTick</a>, <a href=\"#zAxis3D.axisLabel\">axisLabel</a>, <a href=\"#zAxis3D.splitLine\">splitLine</a>, <a href=\"#zAxis3D.splitArea\">splitArea</a>, <a href=\"#zAxis3D.axisPointer\">axisPointer</a> set separately on <a href=\"#zAxis3D\">zAxis3D</a> will cover the corresponding configuration items under <a href=\"#grid3D\">grid3D</a>.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to display the z-axis.</p>\n"},"name":{"type":["string"],"description":"<p>The name of the axis.</p>\n","default":"'Z'"},"grid3DIndex":{"type":["number"],"description":"<p>The index of the <a href=\"#grid3D\">grid3D</a> component used by the axis. The default is to use the first <a href=\"#grid3D\">grid3D</a> component.</p>\n","default":0},"nameTextStyle":{"type":["Object"],"description":"<p>Text style of axis name.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Color of axis name uses <a href=\"#zAxis3D.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"borderWidth":{"type":["number"],"description":"<p>The border width of the text.</p>\n","default":0},"borderColor":{"type":["string"],"description":"<p>The border color of the text.</p>\n","default":"#fff"},"fontFamily":{"type":["string"],"description":"<p>The font family of the text.</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>The font size of the text.</p>\n","default":16},"fontWeight":{"type":["string"],"description":"<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"}}},"nameGap":{"type":["number"],"description":"<p>The gap between the axis name and axis line. Note the distance is in 3D space, not the screen pixel value.</p>\n","default":20},"type":{"type":["string"],"description":"<p>The type of the axis.</p>\n<p>Optional:</p>\n<ul>\n<li><p><code class=\"codespan\">'value'</code>\n The value axis. Suitable for continuous data.</p>\n</li>\n<li><p><code class=\"codespan\">'category'</code>\n The category axis. Suitable for the discrete category data. For this type, the category data must be set through <a href=\"#zAxis3D.data\">data</a>.</p>\n</li>\n<li><p><code class=\"codespan\">'time'</code>\n The timeline. Suitable for the continuous timing data. The time axis has a time format compared to the value axis, and the scale calculation is also different. For example, the scale of the month, week, day, and hour ranges can be determined according to the range of the span.</p>\n</li>\n<li><p><code class=\"codespan\">'log'</code>\n Logarithmic axis. Suitable for the logarithmic data.</p>\n</li>\n</ul>\n","default":"value"},"min":{"type":["number","string"],"description":"<p>The minimum value of axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">'dataMin'</code> so that the minimum value on this axis is set to be the minimum label.</p>\n<p>It will be automatically computed to make sure the axis tick is equally distributed when not set.</p>\n<p>In the category axis, it can also be set as the ordinal number. For example, if a category axis has <code class=\"codespan\">data: ['categoryA', 'categoryB', 'categoryC']</code>, and the ordinal <code class=\"codespan\">2</code> represents <code class=\"codespan\">'categoryC'</code>. Moreover, it can be set as a negative number, like <code class=\"codespan\">-3</code>.</p>\n","default":null},"max":{"type":["number","string"],"description":"<p>The maximum value of the axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">'dataMax'</code> so that the minimum value on this axis is set to be the maximum label.</p>\n<p>It will be automatically computed to make sure the axis tick is equally distributed when not set.</p>\n<p>In the category axis, it can also be set as the ordinal number. For example, if a category axis has <code class=\"codespan\">data: ['categoryA', 'categoryB', 'categoryC']</code>, and the ordinal <code class=\"codespan\">2</code> represents <code class=\"codespan\">'categoryC'</code>. Moreover, it can be set as a negative number, like <code class=\"codespan\">-3</code>.</p>\n","default":null},"scale":{"type":["boolean"],"description":"<p>It is available only in numerical axis, i.e., <a href=\"#zAxis3D.type\">type</a>: 'value'.</p>\n<p>It specifies whether not to contain zero position of axis compulsively. When it is set to be <code class=\"codespan\">true</code>, the axis may not contain zero position, which is useful in the scatter chart for both value axes.</p>\n<p>This configuration item is unavailable when the <a href=\"#zAxis3D.min\">min</a> and <a href=\"#zAxis3D.max\">max</a> are set.</p>\n","default":false},"splitNumber":{"type":["number"],"description":"<p>The number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.</p>\n<p>This is unavailable for the category axis.</p>\n","default":5},"minInterval":{"type":["number"],"description":"<p>Minimum gap between split lines.</p>\n<p>For example, it can be set to be <code class=\"codespan\">1</code> to make sure the axis label is shown as an integer.</p>\n<pre><code class=\"lang-js\">{\n minInterval: 1\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#zAxis3D.type\">type</a> 'value' or 'time'.</p>\n","default":0},"interval":{"type":["number"],"description":"<p>Compulsively set segmentation interval for axis.</p>\n<p>As <a href=\"#zAxis3D.splitNumber\">splitNumber</a> is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with <a href=\"#zAxis3D.min\">min</a> and <a href=\"#zAxis3D.max\">max</a> to compulsively set tickings. But in most cases, we do not suggest using this, out automatic calculation is enough for most situations.</p>\n<p>This is unavailable for category axis. Timestamp should be passed for <a href=\"#zAxis3D.type\">type</a>: 'time' axis. Logged value should be passed for <a href=\"#zAxis3D.type\">type</a>: 'log' axis.</p>\n"},"logBase":{"type":["number"],"description":"<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#zAxis3D.type\">type</a>: 'log'.</p>\n","default":10},"data":{"type":["Array"],"description":"<p>Category data, available in <a href=\"#zAxis3D.type\">type</a>: 'category' axis.</p>\n<p>If <a href=\"#zAxis3D.type\">type</a> is specified as <code class=\"codespan\">'category'</code>, but <code class=\"codespan\">axis.data</code> is not specified, <code class=\"codespan\">axis.data</code> will be auto collected from <a href=\"#series.data\">series.data</a>. It brings convenience, but we should notice that <code class=\"codespan\">axis.data</code> provides then value range of the <code class=\"codespan\">'category'</code> axis. If it is auto collected from <a href=\"#series.data\">series.data</a>, Only the values appearing in <a href=\"#series.data\">series.data</a> can be collected. For example, if <a href=\"#series.data\">series.data</a> is empty, nothing will be collected.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Name list of all categories\ndata: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']\n// Each item could also be a specific configuration item.\n// In this case, `value` is used as the category name.\ndata: [{\n value: 'Monday',\n // Highlight Monday\n textStyle: {\n fontSize: 20,\n color: 'red'\n }\n}, 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']\n</code></pre>\n","items":{"type":"Object","properties":{"value":{"type":["string"],"description":"<p>Name of a category.</p>\n"},"textStyle":{"type":["Object"],"description":"<p>Text style of the category.</p>\n","properties":{"color":{"type":["string"],"description":"<p>The Color of the text.</p>\n","default":"\"#fff\""},"borderWidth":{"type":["number"],"description":"<p>The border width of the text.</p>\n","default":0},"borderColor":{"type":["string"],"description":"<p>The border color of the text.</p>\n","default":"#fff"},"fontFamily":{"type":["string"],"description":"<p>The font family of the text.</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>The font size of the text.</p>\n","default":12},"fontWeight":{"type":["string"],"description":"<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n<p>The display interval of </p>\n","default":"normal"}}}}}},"axisLine":{"type":["Object"],"description":"<p>Settings related to axis line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>axis scale label is valid in the category axis. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The interval data can be represented by a numerical value or by a callback function. The format of the callback function is as follows:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) => boolean\n</code></pre>\n<p>The first parameter is the index of the class, the second value is the name of the class, and if it is skipped, it returns <code class=\"codespan\">false</code>.</p>\n","default":"'auto'"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"description":"<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-js\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n","default":"'#333'"},"opacity":{"type":["number"],"description":"<p>The opacity of the line.</p>\n","default":1},"width":{"type":["number"],"description":"<p>The width of the line.</p>\n","default":2}}}}},"axisLabel":{"type":["Object"],"description":"<p>Settings related to axis label.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis label from appearing.</p>\n","default":true},"margin":{"type":["number"],"description":"<p>The margin between the axis label and the axis line.</p>\n<p><strong>Note：</strong> This distance is three-dimensional space, not screen space.</p>\n","default":8},"interval":{"type":["number","Function"],"description":"<p>axis scale label is valid in the category axis. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The interval data can be represented by a numerical value or by a callback function. The format of the callback function is as follows:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) => boolean\n</code></pre>\n<p>The first parameter is the index of the class, the second value is the name of the class, and if it is skipped, it returns <code class=\"codespan\">false</code>.</p>\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"","default":null},"textStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color","Function"],"description":"<p>Color of axis label is set to be <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class=\"lang-js\">(val: string) => Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class=\"lang-js\">textStyle: {\n color: function (value, index) {\n return value >= 0 ? 'green' : 'red';\n }\n}\n</code></pre>\n"},"borderWidth":{"type":["number"],"description":"<p>The border width of the text.</p>\n","default":0},"borderColor":{"type":["string"],"description":"<p>The border color of the text.</p>\n","default":"#fff"},"fontFamily":{"type":["string"],"description":"<p>The font family of the text.</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>The font size of the text.</p>\n","default":12},"fontWeight":{"type":["string"],"description":"<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"}}}}},"axisTick":{"type":["Object"],"description":"<p>Settings related to axis tick.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis tick from showing.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>axis scale label is valid in the category axis. Defaults to the same as <a href=\"#.axisLabel.interval\">axisLabel.interval</a>. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The interval data can be represented by a numerical value or by a callback function. The format of the callback function is as follows:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) => boolean\n</code></pre>\n<p>The first parameter is the index of the class, the second value is the name of the class, and if it is skipped, it returns <code class=\"codespan\">false</code>.</p>\n","default":"'auto'"},"length":{"type":["number"],"description":"<p>The length of the axis tick.</p>\n","default":5},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Color of axis label is set to be <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"opacity":{"type":["number"],"description":"<p>The opacity of the line.</p>\n","default":1},"width":{"type":["number"],"description":"<p>The width of the line.</p>\n","default":1}}}}},"splitLine":{"type":["Object"],"description":"<p>Settings related to axis line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>axis scale label is valid in the category axis. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The interval data can be represented by a numerical value or by a callback function. The format of the callback function is as follows:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) => boolean\n</code></pre>\n<p>The first parameter is the index of the class, the second value is the name of the class, and if it is skipped, it returns <code class=\"codespan\">false</code>.</p>\n","default":"'auto'"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"description":"<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-js\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n","default":"'#333'"},"opacity":{"type":["number"],"description":"<p>The opacity of the line.</p>\n","default":1},"width":{"type":["number"],"description":"<p>The width of the line.</p>\n","default":2}}}}},"splitArea":{"type":["Object"],"description":"<p>Split area of axis in <a href=\"#grid\">grid</a> area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to be <code class=\"codespan\">true</code> to show the splitArea.</p>\n","default":false},"interval":{"type":["number","Function"],"description":"<p>Axis splitArea is valid in the category axis. Defaults to the same as <a href=\"#.axisLabel.interval\">axisLabel.interval</a>. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The interval data can be represented by a numerical value or by a callback function. The format of the callback function is as follows:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) => boolean\n</code></pre>\n<p>The first parameter is the index of the class, the second value is the name of the class, and if it is skipped, it returns <code class=\"codespan\">false</code>.</p>\n","default":"'auto'"},"areaStyle":{"type":["Object"],"description":"<p>Split area style.</p>\n","properties":{"color":{"type":["Array"],"description":"<p>Color of the split area.\nThe split area color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.</p>\n","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']"}}}}},"axisPointer":{"type":["Object"],"description":"<p>Configurations for axis pointer.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to display the axisPointer. Set this to be <code class=\"codespan\">true</code> to show the splitArea.</p>\n","default":true},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"description":"<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-js\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n","default":"'rgba(0, 0, 0, 0.8)'"},"opacity":{"type":["number"],"description":"<p>The opacity of the line.</p>\n","default":1},"width":{"type":["number"],"description":"<p>The width of the line.</p>\n","default":1}}},"label":{"type":["Object"],"description":"<p>The label of axisPointer.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to display the label of axisPointer. Value axes are displayed by default, while category axes are not.</p>\n","default":true},"formatter":{"type":["Function"],"description":"<p>The formatter of the label. . The first parameter to the function is the value of the current axis. The second parameter to the function is an array of values for all axes.</p>\n<pre><code class=\"lang-js\">(value: number, valueAll: Array) => string\n</code></pre>\n"},"margin":{"type":["number"],"description":"<p>Distance between label and axis.\nLike the scale label, this distance is a 3D space rather than a screen pixel.</p>\n"},"textStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"description":"<p>The Color of the text.</p>\n","default":"\"#fff\""},"borderWidth":{"type":["number"],"description":"<p>The border width of the text.</p>\n","default":0},"borderColor":{"type":["string"],"description":"<p>The border color of the text.</p>\n","default":"#fff"},"fontFamily":{"type":["string"],"description":"<p>The font family of the text.</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>The font size of the text.</p>\n","default":16},"fontWeight":{"type":["string"],"description":"<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"}}}}}}}}},"series":{"type":"Array","items":{"anyOf":[{"type":["Object"],"description":"<p>3D scatter chart. It can be used to display data in <a href=\"#grid3D\">grid3D</a>, <a href=\"#geo3D\"> geo3D</a>, <a href=\"#globe\">globe</a> using attributes such as size、color and so on.</p>\n<p>This example is a 3D simplex noise drawn with a bubble chart.</p>\n<p><img width=\"500\" height=\"auto\" src=\"documents/asset/gl/img/scatter3D.png\"></p>\n","properties":{"type":{"type":["string"],"description":"","default":"'scatter3D'"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"https://echarts.apache.org/zh/option.html#tooltip\" target=\"_blank\">tooltip</a> and filtering with <a href=\"https://echarts.apache.org/zh/option.html#legend\" target=\"_blank\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"coordinateSystem":{"type":["string"],"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class=\"codespan\">'cartesian3D'</code></p>\n<p> Use a 3D rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n<ul>\n<li><code class=\"codespan\">'geo3D'</code>\n Use 3D geographic coordinate, with <a href=\"#series-.geoIndex\">geoIndex</a> to assign the corresponding 3D geographic coordinate components.</li>\n</ul>\n<ul>\n<li><p><code class=\"codespan\">'globe'</code></p>\n<p> Use 3D globe coordinate, with <a href=\"#series-.globeIndex\">globeIndex</a> to assign the corresponding 3D globe coordinate components.</p>\n</li>\n</ul>\n"},"grid3DIndex":{"type":["number"],"description":"<p>Use the index of the <a href=\"#grid3D\">grid3D</a> component. The first <a href=\"#grid3D\">grid3D</a> component is used by default.</p>\n","default":0},"geo3DIndex":{"type":["number"],"description":"<p>The index of the <a href=\"#geo3D\">geo3D</a> component used by the axis.The first <a href=\"#grid3D\">grid3D</a> component is used by default.</p>\n","default":0},"globeIndex":{"type":["number"],"description":"<p>The index of the <a href=\"#globe\">globe</a> component used by the axis.The first <a href=\"#globe\">globe</a> component is used by default.</p>\n","default":0},"symbol":{"type":["string"],"description":"<p>The shape of the scatter. The default is a circle.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">'circle'</code>, <code class=\"codespan\">'rect'</code>, <code class=\"codespan\">'roundRect'</code>, <code class=\"codespan\">'triangle'</code>, <code class=\"codespan\">'diamond'</code>, <code class=\"codespan\">'pin'</code>, <code class=\"codespan\">'arrow'</code>, <code class=\"codespan\">'none'</code></p>\n<p>Icons can be set to arbitrary vector path via <code class=\"codespan\">'path://'</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n","default":"'circle'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p> symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":10},"itemStyle":{"type":["Object"],"description":"<p>Sets the style of scatter such as colors, strokes, etc.</p>\n","properties":{"color":{"type":["string"],"description":"<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n","default":"adaptive"},"opacity":{"type":["number"],"description":"<p>The opacity of the graphic.</p>\n","default":0.8},"borderWidth":{"type":["number"],"description":"<p>Sets the width of the border.</p>\n","default":0},"borderColor":{"type":["string"],"description":"<p>Sets the color of the border.</p>\n","default":"'#fff'"}}},"label":{"type":["Object"],"description":"<p>Sets the style of label.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the label.</p>\n","default":false},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element.</p>\n<p>The distance from the label to the graphic. In a 3D Scatter, this distance is the pixel value of the screen space. In other figures, this distance is the relative 3D distance.</p>\n","default":5},"position":{"type":["string"],"description":"<p>The location of the label.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li>'top'</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n</ul>\n","default":"right"},"formatter":{"type":["Function","string"],"description":"<p>The formatter of the label content, which supports the string template and the callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template:</strong> </p>\n<p>The model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n</ul>\n<p><strong>Example:</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {c}'\n</code></pre>\n<p><strong>Callback function:</strong>\n Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>The <code class=\"codespan\">params</code> is the single data set needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"textStyle":{"type":["Object"],"description":"<p>The font style of the label.</p>\n","properties":{"color":{"type":["string"],"description":"<p>The Color of the text.</p>\n","default":"#000"},"borderWidth":{"type":["number"],"description":"<p>The border width of the text.</p>\n","default":1},"borderColor":{"type":["string"],"description":"<p>The border color of the text.</p>\n","default":"#fff"},"fontFamily":{"type":["string"],"description":"<p>The font family of the text.</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>The font size of the text.</p>\n","default":14},"fontWeight":{"type":["string"],"description":"<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"}}}}},"emphasis":{"type":["Object"],"description":"<p>Graphics and labels are highlighted.</p>\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"description":"<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n","default":"adaptive"},"opacity":{"type":["number"],"description":"<p>The opacity of the graphic.</p>\n","default":0.8},"borderWidth":{"type":["number"],"description":"<p>Sets the width of the border.</p>\n","default":0},"borderColor":{"type":["string"],"description":"<p>Sets the color of the border.</p>\n","default":"'#fff'"}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the label.</p>\n","default":false},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element.</p>\n<p>The distance from the label to the graphic. In a 3D Scatter, this distance is the pixel value of the screen space. In other figures, this distance is the relative 3D distance.</p>\n","default":5},"position":{"type":["string"],"description":"<p>The location of the label.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li>'top'</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n</ul>\n","default":"right"},"formatter":{"type":["Function","string"],"description":"<p>The formatter of the label content, which supports the string template and the callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template:</strong> </p>\n<p>The model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n</ul>\n<p><strong>Example:</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {c}'\n</code></pre>\n<p><strong>Callback function:</strong>\n Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>The <code class=\"codespan\">params</code> is the single data set needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"textStyle":{"type":["Object"],"description":"<p>The font style of the label.</p>\n","properties":{"color":{"type":["string"],"description":"<p>The Color of the text.</p>\n","default":"#000"},"borderWidth":{"type":["number"],"description":"<p>The border width of the text.</p>\n","default":1},"borderColor":{"type":["string"],"description":"<p>The border color of the text.</p>\n","default":"#fff"},"fontFamily":{"type":["string"],"description":"<p>The font family of the text.</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>The font size of the text.</p>\n","default":14},"fontWeight":{"type":["string"],"description":"<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"}}}}}}},"data":{"type":["Array"],"description":"<p>The data array of scatter3D. Each item in the array is a piece of data. Usually, this data stores each attribute/dimension of the data in an array. As Follows:</p>\n<pre><code class=\"lang-js\">data: [\n [[12, 14, 10], [34, 50, 15], [56, 30, 20], [10, 15, 12], [23, 10, 14]]\n]\n</code></pre>\n<p>For each item in the array：</p>\n<ol>\n<li>In <a href=\"#grid3D\">grid3D</a> ,the first three values of each item are<code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">z</code>.</li>\n<li>In <a href=\"#geo3D\">geo3D</a> and <a href=\"globe\" target=\"_blank\">globe</a> ,the first two values of each item are longitude <code class=\"codespan\">lng</code>, latitude <code class=\"codespan\">lat</code>,</li>\n</ol>\n<p>In addition to the default values for the coordinates, each item can be added with any number of values to <a href=\"#visualMap\">visualMap</a> the component for any other graphical property, such as color, etc.</p>\n<p>More likely, we need to assign name to each data item, in which case each item should be an object:</p>\n<pre><code class=\"lang-js\">[{\n // name of date item\n name: 'data1',\n // value of date item is 8\n value: [12, 14, 10]\n}, {\n name: 'data2',\n value: 20\n}]\n</code></pre>\n<p>Each data item can be further customized:</p>\n<pre><code class=\"lang-js\">[{\n name: 'data1',\n value: [12, 14, 10]\n}, {\n // name of data item\n name: 'data2',\n value : [34, 50, 15],\n // user-defined special itemStyle that only useful for this data item\n itemStyle:{}\n}]\n</code></pre>\n"},"blendMode":{"type":["string"],"description":"<p>Sets the type of compositing operation to apply when drawing a new shape. </p>\n<p>Currently supporting <code class=\"codespan\">'source-over'</code>, <code class=\"codespan\">'lighter'</code>. The default is <code class=\"codespan\">'source-over'</code> mode is blended by alpha. The <code class=\"codespan\">'lighter'</code> is overlap mode. In this mode, the area where the number of graphics is concentrated can be highlighted by the overlap.</p>\n","default":"'source-over'"},"zlevel":{"type":["number"],"description":"<p>The layer in which the component is located.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> 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 <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid the crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n<p><strong>Note:</strong> The layers of the components in echarts-gl need to be separated from the layers of the components in echarts. The same <code class=\"codespan\">zlevel</code> cannot be used for both WebGL and Canvas drawing at the same time.</p>\n","default":-10},"silent":{"type":["boolean"],"description":"<p>Whether the graph doesn`t respond and triggers a mouse event. The default is false, which is to respond to and trigger mouse events.</p>\n","default":false},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationDurationUpdate":{"type":["number"],"description":"<p>The duration time for update the transition animation.</p>\n","default":500},"animationEasingUpdate":{"type":["string"],"description":"<p>The easing effect for update transition animation.</p>\n","default":"cubicOut"}}},{"type":["Object"],"description":"<p>3D bar. It can be used to display data in <a href=\"#grid3D\">grid3D</a>, <a href=\"#geo3D\"> geo3D</a>, <a href=\"#globe\">globe</a> using attributes such as size 、color and so on.</p>\n<p>The figure below shows the population density data of the world through a 3D bar chart on [geo3D] (~geo3D).</p>\n<p><img width=\"700\" height=\"auto\" src=\"documents/asset/gl/img/geo-bar3D.jpg\"></p>\n","properties":{"type":{"type":["string"],"description":"","default":"'bar3D'"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"https://echarts.apache.org/zh/option.html#tooltip\" target=\"_blank\">tooltip</a> and filtering with <a href=\"https://echarts.apache.org/zh/option.html#legend\" target=\"_blank\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"coordinateSystem":{"type":["string"],"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class=\"codespan\">'cartesian3D'</code></p>\n<p> Use a 3D rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n<ul>\n<li><code class=\"codespan\">'geo3D'</code>\n Use 3D geographic coordinate, with <a href=\"#series-.geoIndex\">geoIndex</a> to assign the corresponding 3D geographic coordinate components.</li>\n</ul>\n<ul>\n<li><p><code class=\"codespan\">'globe'</code></p>\n<p> Use 3D globe coordinate, with <a href=\"#series-.globeIndex\">globeIndex</a> to assign the corresponding 3D globe coordinate components.</p>\n</li>\n</ul>\n","default":"cartesian3D"},"grid3DIndex":{"type":["number"],"description":"<p>Use the index of the <a href=\"#grid3D\">grid3D</a> component. The first <a href=\"#grid3D\">grid3D</a> component is used by default.</p>\n","default":0},"geo3DIndex":{"type":["number"],"description":"<p>The index of the <a href=\"#geo3D\">geo3D</a> component used by the axis.The first <a href=\"#grid3D\">grid3D</a> component is used by default.</p>\n","default":0},"globeIndex":{"type":["number"],"description":"<p>The index of the <a href=\"#globe\">globe</a> component used by the axis.The first <a href=\"#globe\">globe</a> component is used by default.</p>\n","default":0},"bevelSize":{"type":["number"],"description":"<p>The size of the bevel.\nSupport for setting values from 0 to 1. The default is 0, which means there is no bevel.</p>\n<p>Below are the differences between beveling and no beveling.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/bar3D-no-bevel.png\" width=\"100%\" title=\"bevelSize: 0\"><img />\n <img src=\"documents/asset/gl/img/bar3D-bevel.png\" width=\"100%\" title=\"bevelSize: 0.3\"><img />\n<div />\n","default":0},"bevelSmoothness":{"type":["number"],"description":"<p>The smoothness of the bevel, the larger the value, the smoother.</p>\n","default":2},"stack":{"type":["string"],"description":"<p>Stacking of bar chart. On the same category axis, the series with the same <code class=\"codespan\">stack</code> name would be put on top of each other. Note that the data items that need to be stack in different series must have the same index in the array.</p>\n"},"minHeight":{"type":["number"],"description":"<p>The minimum width of the bar.</p>\n","default":0},"itemStyle":{"type":["Object"],"description":"<p>The style of the bar, including color and opacity.</p>\n","properties":{"color":{"type":["string","Function"],"description":"<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n","default":"adaptive"},"opacity":{"type":["number"],"description":"<p>The opacity of the graphic.</p>\n","default":1}}},"label":{"type":["Object"],"description":"<p>Configure the label of the bar.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the label.</p>\n","default":false},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element.</p>\n<p>The distance from the label to the graphic. In a 3D Scatter, this distance is the pixel value of the screen space. In other figures, this distance is the relative 3D distance.</p>\n","default":2},"formatter":{"type":["Function","string"],"description":"<p>The formatter of the label content, which supports the string template and the callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template:</strong> </p>\n<p>The model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n</ul>\n<p><strong>Example:</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {c}'\n</code></pre>\n<p><strong>Callback function:</strong>\n Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>The <code class=\"codespan\">params</code> is the single data set needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"textStyle":{"type":["Object"],"description":"<p>The font style of the label.</p>\n","properties":{"color":{"type":["string"],"description":"<p>The Color of the text.</p>\n","default":"\"#fff\""},"borderWidth":{"type":["number"],"description":"<p>The border width of the text.</p>\n","default":1},"borderColor":{"type":["string"],"description":"<p>The border color of the text.</p>\n","default":"#fff"},"fontFamily":{"type":["string"],"description":"<p>The font family of the text.</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>The font size of the text.</p>\n","default":20},"fontWeight":{"type":["string"],"description":"<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"}}}}},"emphasis":{"type":["Object"],"description":"<p>Configure labels and styles for bar highlighting.</p>\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"description":"<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n","default":"adaptive"},"opacity":{"type":["number"],"description":"<p>The opacity of the graphic.</p>\n","default":1}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the label.</p>\n","default":true},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element.</p>\n<p>The distance from the label to the graphic. In a 3D Scatter, this distance is the pixel value of the screen space. In other figures, this distance is the relative 3D distance.</p>\n","default":2},"formatter":{"type":["Function","string"],"description":"<p>The formatter of the label content, which supports the string template and the callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template:</strong> </p>\n<p>The model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n</ul>\n<p><strong>Example:</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {c}'\n</code></pre>\n<p><strong>Callback function:</strong>\n Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>The <code class=\"codespan\">params</code> is the single data set needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"textStyle":{"type":["Object"],"description":"<p>The font style of the label.</p>\n","properties":{"color":{"type":["string"],"description":"<p>The Color of the text.</p>\n","default":"\"#fff\""},"borderWidth":{"type":["number"],"description":"<p>The border width of the text.</p>\n","default":1},"borderColor":{"type":["string"],"description":"<p>The border color of the text.</p>\n","default":"#fff"},"fontFamily":{"type":["string"],"description":"<p>The font family of the text.</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>The font size of the text.</p>\n","default":20},"fontWeight":{"type":["string"],"description":"<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"}}}}}}},"data":{"type":["Array"],"description":"<p>A data array of 3D bar. Each item of the array is a piece of data. Usually this data is an array to store each attribute/dimension of the data. For example below:</p>\n<pre><code class=\"lang-js\">data: [\n [[12, 14, 10], [34, 50, 15], [56, 30, 20], [10, 15, 12], [23, 10, 14]]\n]\n</code></pre>\n<p>For each item in the array:</p>\n<ol>\n<li>In [grid3D] (~grid3D), the first three values of each item are <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">z</code>.</li>\n<li>In <a href=\"#geo3D\">geo3D</a> and <a href=\"#globe\">globe</a>, the first two values of each item are longitude <code class=\"codespan\">lng</code>, latitude <code class=\"codespan\">lat</code>, and the third value indicates the size of the value, such as the number of people. This value will be mapped to the range of <a href=\"#series-bar3D.minHeight\">minHeight</a> ~ <a href=\"#series-bar3D.maxHeight\">maxHeight</a>.</li>\n</ol>\n<p>In addition to the three values used by default for the coordinate system, each item can be added with any number of values for mapping the <a href=\"#visualMap\">visualMap</a> component to other graphical properties such as color.</p>\n<p>More likely, we need to assign name to each data item, in which case each item should be an object:</p>\n<pre><code class=\"lang-js\">[{\n // name of date item\n name: 'data1',\n // value of date item is 8\n value: [12, 14, 10]\n}, {\n name: 'data2',\n value: 20\n}]\n</code></pre>\n<p>Each data item can be further customized:</p>\n<pre><code class=\"lang-js\">[{\n name: 'data1',\n value: [12, 14, 10]\n}, {\n // name of data item\n name: 'data2',\n value : [34, 50, 15],\n // user-defined special itemStyle that only useful for this data item\n itemStyle:{}\n}]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>The name of data item.</p>\n"},"value":{"type":["Array"],"description":"<p>Data value.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>The style setting of a single data item.</p>\n","properties":{"color":{"type":["string"],"description":"<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n","default":"adaptive"},"opacity":{"type":["number"],"description":"<p>The opacity of the graphic.</p>\n","default":1}}},"label":{"type":["Object"],"description":"<p>The label setting of a single data item.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the label.</p>\n","default":false},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element.</p>\n<p>The distance from the label to the graphic. In a 3D Scatter, this distance is the pixel value of the screen space. In other figures, this distance is the relative 3D distance.</p>\n","default":2},"formatter":{"type":["Function","string"],"description":"<p>The formatter of the label content, which supports the string template and the callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template:</strong> </p>\n<p>The model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n</ul>\n<p><strong>Example:</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {c}'\n</code></pre>\n<p><strong>Callback function:</strong>\n Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>The <code class=\"codespan\">params</code> is the single data set needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"textStyle":{"type":["Object"],"description":"<p>The font style of the label.</p>\n","properties":{"color":{"type":["string"],"description":"<p>The Color of the text.</p>\n","default":"\"#fff\""},"borderWidth":{"type":["number"],"description":"<p>The border width of the text.</p>\n","default":1},"borderColor":{"type":["string"],"description":"<p>The border color of the text.</p>\n","default":"#fff"},"fontFamily":{"type":["string"],"description":"<p>The font family of the text.</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>The font size of the text.</p>\n","default":20},"fontWeight":{"type":["string"],"description":"<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"}}}}},"emphasis":{"type":["Object"],"description":"<p>Configure labels and styles for a sigle data item highlighting.</p>\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"description":"<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n","default":"adaptive"},"opacity":{"type":["number"],"description":"<p>The opacity of the graphic.</p>\n","default":1}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the label.</p>\n","default":true},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element.</p>\n<p>The distance from the label to the graphic. In a 3D Scatter, this distance is the pixel value of the screen space. In other figures, this distance is the relative 3D distance.</p>\n","default":2},"formatter":{"type":["Function","string"],"description":"<p>The formatter of the label content, which supports the string template and the callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template:</strong> </p>\n<p>The model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n</ul>\n<p><strong>Example:</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {c}'\n</code></pre>\n<p><strong>Callback function:</strong>\n Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>The <code class=\"codespan\">params</code> is the single data set needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"textStyle":{"type":["Object"],"description":"<p>The font style of the label.</p>\n","properties":{"color":{"type":["string"],"description":"<p>The Color of the text.</p>\n","default":"\"#fff\""},"borderWidth":{"type":["number"],"description":"<p>The border width of the text.</p>\n","default":1},"borderColor":{"type":["string"],"description":"<p>The border color of the text.</p>\n","default":"#fff"},"fontFamily":{"type":["string"],"description":"<p>The font family of the text.</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>The font size of the text.</p>\n","default":20},"fontWeight":{"type":["string"],"description":"<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"}}}}}}}}}},"shading":{"type":["string"],"description":"<p>The coloring effect of 3D graphics in 3D Bar. The following three coloring methods are supported in echarts-gl:</p>\n<ul>\n<li><p><code class=\"codespan\">'color'</code>\nOnly display colors, not affected by other factors such as lighting.</p>\n</li>\n<li><p><code class=\"codespan\">'lambert'</code>\nThrough the classic [lambert] coloring, can express the light and dark that the light shows.</p>\n</li>\n<li><p><code class=\"codespan\">'realistic'</code>\nRealistic rendering, combined with <a href=\"#globe.light.ambientCubemap\">light.ambientCubemap</a> and <a href=\"#globe.postEffect\">postEffect</a>, can improve the quality and texture of the display. [Physical Based Rendering (PBR)] (<a href=\"https://www.marmoset.co/posts/physically-based-rendering-and-you-can-too/\" target=\"_blank\">https://www.marmoset.co/posts/physically-based-rendering-and-you-can-too/</a>) is used in ECharts GL to represent realistic materials.</p>\n</li>\n</ul>\n"},"realisticMaterial":{"type":["Object"],"description":"<p>The configuration item of the realistic material is valid when <a href=\"#series-bar3D.shading\">shading</a> is <code class=\"codespan\">'realistic'</code>.</p>\n","properties":{"detailTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"],"description":"<p>The texture map of the material detail.</p>\n"},"textureTiling":{"type":["number"],"description":"<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n","default":1},"textureOffset":{"type":["number"],"description":"<p>The displacement of the texture detail texture.</p>\n","default":0},"roughness":{"type":["number","string","HTMLImageElement","HTMLCanvasElement"],"description":"<p>The <code class=\"codespan\">roughness</code> attribute is used to indicate the roughness of the material, <code class=\"codespan\">0</code> is completely smooth, <code class=\"codespan\">1</code> is completely rough, and the middle value is between the two.</p>\n<p>The following images show the effect of <code class=\"codespan\">roughness</code> in <a href=\"#globe\"><code class=\"codespan\">globe</code></a> <code class=\"codespan\">0.2</code> (smooth) and <code class=\"codespan\">0.8</code> (rough).</p>\n<p><img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-gloss.png\">\n<img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-rough.png\"></p>\n<p>When you want to express more complex materials. You can set <code class=\"codespan\">roughness</code> directly to the texture that stores the roughness with each pixel as follows.</p>\n<p><img width=\"300\" height=\"300\" src=\"documents/asset/gl/img/roughness.png\"></p>\n<p>The more white the color in the texture, the larger the value and the rougher it is. You can get texture resources of different materials from resource websites such as [<a href=\"http://freepbr.com/]\" target=\"_blank\">http://freepbr.com/]</a> (<a href=\"http://freepbr.com/)\" target=\"_blank\">http://freepbr.com/)</a>. You can also generate it yourself using other tools.</p>\n","default":0.5},"metalness":{"type":["number","string","HTMLImageElement","HTMLCanvasElement"],"description":"<p>The <code class=\"codespan\">metalness</code> attribute is used to indicate whether the material is metal or non-metal, <code class=\"codespan\">0</code> is non-metallic, <code class=\"codespan\">1</code> is metal, and the middle value is between the two. Usually set to <code class=\"codespan\">0</code> and <code class=\"codespan\">1</code> to meet most of the scenes.</p>\n<p>The picture below show the difference between `metal' and '0' in <a href=\"#globe\">globe</a>.</p>\n<p><img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-metal.png\">\n<img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-non-metal.png\"></p>\n<p>As with <a href=\"#series-bar3D.realisticMaterial.roughness\">roughness</a> you can set <code class=\"codespan\">metalness</code> directly to the metal texture.</p>\n","default":0},"roughnessAdjust":{"type":["number"],"description":"<p>Roughness adjustment is useful when using roughness map. The overall roughness of the texture can be adjusted. The default is <code class=\"codespan\">0.5</code>, <code class=\"codespan\">0</code> is completely smooth, <code class=\"codespan\">1</code> is completely rough.</p>\n","default":0.5},"metalnessAdjust":{"type":["number"],"description":"<p>Metalness adjustment is useful when using metalness maps. The overall metallicity of the texture can be adjusted. The default is <code class=\"codespan\">0.5</code>, <code class=\"codespan\">0</code> is non-metal, <code class=\"codespan\">1</code> is metal.</p>\n","default":0.5},"normalTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"],"description":"<p>Normal map of material details.</p>\n<p>Using normal maps, you can still display rich shades of detail on the surface of the object with fewer vertices.</p>\n"}}},"lambertMaterial":{"type":["Object"],"description":"<p>The configuration item of the lambert material is valid when <a href=\"#series-bar3D.shading\">shading</a> is <code class=\"codespan\">'lambert'</code>.</p>\n","properties":{"detailTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"],"description":"<p>The texture map of the material detail.</p>\n"},"textureTiling":{"type":["number"],"description":"<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n","default":1},"textureOffset":{"type":["number"],"description":"<p>The displacement of the texture detail texture.</p>\n","default":0}}},"colorMaterial":{"type":["Object"],"description":"<p>The color material related configuration item is valid when <a href=\"#series-bar3D.shading\">shading</a> is <code class=\"codespan\">'color'</code>.</p>\n","properties":{"detailTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"],"description":"<p>The texture map of the material detail.</p>\n"},"textureTiling":{"type":["number"],"description":"<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n","default":1},"textureOffset":{"type":["number"],"description":"<p>The displacement of the texture detail texture.</p>\n","default":0}}},"zlevel":{"type":["number"],"description":"<p>The layer in which the component is located.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> 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 <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid the crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n<p><strong>Note:</strong> The layers of the components in echarts-gl need to be separated from the layers of the components in echarts. The same <code class=\"codespan\">zlevel</code> cannot be used for both WebGL and Canvas drawing at the same time.</p>\n","default":-10},"silent":{"type":["boolean"],"description":"<p>Whether the graph doesn`t respond and triggers a mouse event. The default is false, which is to respond to and trigger mouse events.</p>\n","default":false},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationDurationUpdate":{"type":["number"],"description":"<p>The duration time for update the transition animation.</p>\n","default":500},"animationEasingUpdate":{"type":["string"],"description":"<p>The easing effect for update transition animation.</p>\n","default":"cubicOut"}}},{"type":["Object"],"description":"<p>3D Line. Can be used for [grid3D] (~grid3D)</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/gl/img/line3D.png\"></p>\n","properties":{"type":{"type":["string"],"description":"","default":"'line3D'"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"https://echarts.apache.org/zh/option.html#tooltip\" target=\"_blank\">tooltip</a> and filtering with <a href=\"https://echarts.apache.org/zh/option.html#legend\" target=\"_blank\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"coordinateSystem":{"type":["string"],"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class=\"codespan\">'cartesian3D'</code></p>\n<p> Use a 3D rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n","default":"cartesian3D"},"grid3DIndex":{"type":["number"],"description":"<p>Use the index of the <a href=\"#grid3D\">grid3D</a> component. The first <a href=\"#grid3D\">grid3D</a> component is used by default.</p>\n","default":0},"lineStyle":{"type":["Object"],"description":"<p>The style of the lines.</p>\n","properties":{"color":{"type":["string"],"description":"<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-js\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n","default":"adaptive"},"opacity":{"type":["number"],"description":"<p>The opacity of the line.</p>\n","default":1},"width":{"type":["number"],"description":"<p>The width of the line.</p>\n","default":2},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"description":"<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-js\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n","default":"adaptive"},"opacity":{"type":["number"],"description":"<p>The opacity of the line.</p>\n","default":1},"width":{"type":["number"],"description":"<p>The width of the line.</p>\n","default":2}}}}},"data":{"type":["Array"],"description":"<p>A data array. Each item of the array is a piece of data. Usually this data is an array to store each attribute/dimension of the data. For example below:</p>\n<pre><code class=\"lang-js\">data: [\n [[12, 14, 10], [34, 50, 15], [56, 30, 20], [10, 15, 12], [23, 10, 14]]\n]\n</code></pre>\n<p>The first three values of each item in the array are <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">z</code>. In addition to these three values, you can add other values to the <a href=\"#visualMap\">visualMap</a> component to map to other graphical properties such as colors.</p>\n<p>More likely, we need to assign name to each data item, in which case each item should be an object:</p>\n<pre><code class=\"lang-js\">[{\n // name of date item\n name: 'data1',\n // value of date item is 8\n value: [12, 14, 10]\n}, {\n name: 'data2',\n value: 20\n}]\n</code></pre>\n<p>Each data item can be further customized:</p>\n<pre><code class=\"lang-js\">[{\n name: 'data1',\n value: [12, 14, 10]\n}, {\n // name of data item\n name: 'data2',\n value : [34, 50, 15],\n // user-defined special itemStyle that only useful for this data item\n itemStyle:{}\n}]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>The name of data item.</p>\n"},"value":{"type":["Array"],"description":"<p>Data value.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>The style setting of a single data item.</p>\n","properties":{"color":{"type":["string"],"description":"<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-js\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n","default":"adaptive"},"opacity":{"type":["number"],"description":"<p>The opacity of the line.</p>\n","default":1},"width":{"type":["number"],"description":"<p>The width of the line.</p>\n","default":1}}}}}},"zlevel":{"type":["number"],"description":"<p>The layer in which the component is located.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> 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 <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid the crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n<p><strong>Note:</strong> The layers of the components in echarts-gl need to be separated from the layers of the components in echarts. The same <code class=\"codespan\">zlevel</code> cannot be used for both WebGL and Canvas drawing at the same time.</p>\n","default":-10},"silent":{"type":["boolean"],"description":"<p>Whether the graph doesn`t respond and triggers a mouse event. The default is false, which is to respond to and trigger mouse events.</p>\n","default":false},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationDurationUpdate":{"type":["number"],"description":"<p>The duration time for update the transition animation.</p>\n","default":500},"animationEasingUpdate":{"type":["string"],"description":"<p>The easing effect for update transition animation.</p>\n","default":"cubicOut"}}},{"type":["Object"],"description":"<p>3D lines. Like the 2D [lines] (<a href=\"https://echarts.apache.org/zh/option.html#series-line)\" target=\"_blank\">https://echarts.apache.org/zh/option.html#series-line)</a>, it is used to represent the line data from the start point to the end point. More is used in geographic visualization.</p>\n<p>Below is an example of a visual airplane flight using <a href=\"#series-lines3D\">lines3D</a> on <a href=\"#globe\">globe</a>.</p>\n<p><img width=\"700\" height=\"auto\" src=\"documents/asset/gl/img/globe-airline.png\"></p>\n","properties":{"type":{"type":["string"],"description":"","default":"'lines3D'"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"https://echarts.apache.org/zh/option.html#tooltip\" target=\"_blank\">tooltip</a> and filtering with <a href=\"https://echarts.apache.org/zh/option.html#legend\" target=\"_blank\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"coordinateSystem":{"type":["string"],"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><code class=\"codespan\">'geo3D'</code>\n Use 3D geographic coordinate, with <a href=\"#series-.geoIndex\">geoIndex</a> to assign the corresponding 3D geographic coordinate components.</li>\n</ul>\n<ul>\n<li><p><code class=\"codespan\">'globe'</code></p>\n<p> Use 3D globe coordinate, with <a href=\"#series-.globeIndex\">globeIndex</a> to assign the corresponding 3D globe coordinate components.</p>\n</li>\n</ul>\n"},"geo3DIndex":{"type":["number"],"description":"<p>The index of the <a href=\"#geo3D\">geo3D</a> component used by the axis.The first <a href=\"#grid3D\">grid3D</a> component is used by default.</p>\n","default":0},"globeIndex":{"type":["number"],"description":"<p>The index of the <a href=\"#globe\">globe</a> component used by the axis.The first <a href=\"#globe\">globe</a> component is used by default.</p>\n","default":0},"polyline":{"type":["boolean"],"description":"<p>If draw as a polyline.</p>\n<p>Default to be <code class=\"codespan\">false</code>. Can only draw a two end straight line.</p>\n<p>If it is set true, <a href=\"#series-lines.data.coords\">data.coords</a> can have more than two coords to draw a polyline. It is useful when visualizing GPS track data.</p>\n","default":false},"effect":{"type":["Object"],"description":"<p>The setting about the special effects of lines.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show special effect. It is not displayed by default.</p>\n","default":false},"period":{"type":["number"],"description":"<p>The duration of the special effect, which unit is second.</p>\n","default":4},"constantSpeed":{"type":["number"],"description":"<p>Whether the moving animation of the trail of special effect has a constant speed, which unit is dimensioned in 3D space. The <a href=\"#series-lines.effect.period\">period</a> will be ignored when it is set to a non-null value.</p>\n","default":null},"trailWidth":{"type":["number"],"description":"<p>The width of the trail of special effects. </p>\n","default":4},"trailLength":{"type":["number"],"description":"<p>The length of trail of special effect. The values from 0 to 1 could be set. Is the percentage of the length of the line.</p>\n","default":0.1},"trailColor":{"type":["string"],"description":"<p>The color of the trail, which default is the same as the line color.</p>\n"},"trailOpacity":{"type":["number"],"description":"<p>The opacity of the trail, which default is the same as line opacity.</p>\n"}}},"lineStyle":{"type":["Object"],"description":"<p>The line style of the lines.</p>\n","properties":{"color":{"type":["string"],"description":"<p>The color of the line. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-js\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n","default":"adaptive"},"opacity":{"type":["number"],"description":"<p>The opacity of the line.</p>\n","default":0.5},"width":{"type":["number"],"description":"<p>The width of the line.</p>\n","default":1}}},"data":{"type":["Array"],"description":"<p>A data array of 3D lines.\nUsually, each item of data can be a set of coordinates containing the start point and end point.</p>\n<p>More than two coordinates can be supported when <a href=\"#series-lines3D.polyline\">polyline</a> is set to <code class=\"codespan\">true</code>.\nas follows:</p>\n<pre><code class=\"lang-js\">data: [\n [\n [120, 66, 1], // latitude, longitude and altitude coordinates of the start point\n [122, 67, 2] // latitude, longitude and altitude coordinates of the end point\n ]\n]\n</code></pre>\n<p>Sometimes you need to configure the name of the data item or a separate style. You need to write the latitude and longitude coordinates to the coords property, as follows:</p>\n<pre><code class=\"lang-js\">data: [\n {\n coords: [ [120, 66], [122, 67] ],\n // The value of data\n value: 10,\n // The name of data\n name: 'foo',\n // The style of line\n lineStyle: {}\n }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"coords":{"type":["Array"],"description":"<p>An array of two or more latitude and longitude coordinates. When <a href=\"#series-lines3D.polyline\">polyline</a> is set to <code class=\"codespan\">true</code>, support more than two coordinates.</p>\n"},"value":{"type":["Array","number"],"description":"<p>The value of data.</p>\n"},"lineStyle":{"type":["Object"],"description":"<p>Style setting for single data (single line).</p>\n","properties":{"color":{"type":["string"],"description":"<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-js\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n","default":"adaptive"},"opacity":{"type":["number"],"description":"<p>The opacity of the line.</p>\n","default":1},"width":{"type":["number"],"description":"<p>The width of the line.</p>\n","default":1}}}}}},"blendMode":{"type":["string"],"description":"<p>Sets the type of compositing operation to apply when drawing a new shape. </p>\n<p>Currently supporting <code class=\"codespan\">'source-over'</code>, <code class=\"codespan\">'lighter'</code>. The default is <code class=\"codespan\">'source-over'</code> mode is blended by alpha. The <code class=\"codespan\">'lighter'</code> is overlap mode. In this mode, the area where the number of graphics is concentrated can be highlighted by the overlap.</p>\n","default":"'source-over'"},"zlevel":{"type":["number"],"description":"<p>The layer in which the component is located.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> 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 <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid the crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n<p><strong>Note:</strong> The layers of the components in echarts-gl need to be separated from the layers of the components in echarts. The same <code class=\"codespan\">zlevel</code> cannot be used for both WebGL and Canvas drawing at the same time.</p>\n","default":-10},"silent":{"type":["boolean"],"description":"<p>Whether the graph doesn`t respond and triggers a mouse event. The default is false, which is to respond to and trigger mouse events.</p>\n","default":false}}},{"type":["Object"],"description":"<p><strong>3D map</strong></p>\n<p>3D maps are mainly used for visualizing geographic area data. With the [visualMap] (<a href=\"http://echarts.baidu.com/option.html#visualMap\" target=\"_blank\">http://echarts.baidu.com/option.html#visualMap</a>) component, it can be used to display data such as population distribution density in different regions.</p>\n<p>Compared to 2D maps, 3D maps can set different heights for each area. This height can be used to display data and to display the height of the building in the building data.</p>\n","properties":{"type":{"type":["string"],"description":"","default":"'map3D'"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"https://echarts.apache.org/zh/option.html#tooltip\" target=\"_blank\">tooltip</a> and filtering with <a href=\"https://echarts.apache.org/zh/option.html#legend\" target=\"_blank\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"map":{"type":["string"],"description":"<p>The map type. The map type used in ECharts-gl is the same as the <a href=\"http://echarts.baidu.com/option.html#geo.map\" target=\"_blank\">geo</a> component.</p>\n<p>You can download the required map file in the <a href=\"http://ecomfe.github.io/echarts-builder-web/map3.html\" target=\"_blank\">Map Download Interface</a>, then to import and register it into ECharts.</p>\n<p>EChart provides map data in two formats. One is the JS file that can be imported directly through the script tag. After it is introduced, the map name and data will be automatically registered. Another is the JSON file that needs to be registered manually after loaded asynchronously by AJAX.</p>\n<p>Here are two types of use examples:</p>\n<p><strong> JavaScript Introduction Example </strong></p>\n<pre><code class=\"lang-html\"><script src="echarts.js"></script>\n<script src="map/js/china.js"></script>\n<script>\nvar chart = echarts.init(document.getElementById('main'));\nchart.setOption({\n series: [{\n type: 'map',\n map: 'china'\n }]\n});\n</script>\n</code></pre>\n<p><strong> JSON Introduction Example </strong></p>\n<pre><code class=\"lang-js\">$.get('map/json/china.json', function (chinaJson) {\n echarts.registerMap('china', chinaJson);\n var chart = echarts.init(document.getElementById('main'));\n chart.setOption({\n series: [{\n type: 'map',\n map: 'china'\n }]\n });\n});\n</code></pre>\n<p>ECharts uses the data in [geoJSON] (<a href=\"http://geojson.org/\" target=\"_blank\">http://geojson.org/</a>) format as the outline of the map. In addition, you can also obtain data in [geoJSON] (<a href=\"http://geojson.org/\" target=\"_blank\">http://geojson.org/</a>) format of the map by other means and register it in ECharts.</p>\n"},"boxWidth":{"type":["number"],"description":"<p>三维地图 width in a 3D scene. With <a href=\"#series-map3D.viewControl.distance\">viewControl.distance</a> you can get the most appropriate display size.</p>\n<p>The following image is a schematic diagram of <code class=\"codespan\">boxWidth</code>, <code class=\"codespan\">boxHeight</code>, <code class=\"codespan\">boxDepth</code>, <code class=\"codespan\">regionHeight</code> in 三维地图.</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/gl/img/geo-size.png\"></p>\n","default":100},"boxHeight":{"type":["number"],"description":"<p>三维地图 height in a 3D scene.</p>\n<p>Component height. This height contains the height of the bar and scatter on a 3D map.</p>\n","default":10},"boxDepth":{"type":["number"],"description":"<p>三维地图 depth in a 3D scene.</p>\n<p>The component depth defaults to automatic, ensuring that the scale of the 3D component is the same as the ratio of the input GeoJSON.</p>\n","default":"auto"},"regionHeight":{"type":["number"],"description":"<p>The height of each area of the 3D map. This height is the height of the model, less than <a href=\"#series-map3D.boxHeight\">boxHeight</a>. <code class=\"codespan\">boxHeight - regionHeight</code> will be used for the display of 3D bar, 3D scatter, and etc.</p>\n","default":3},"environment":{"type":["string"],"description":"<p>Environment map. Support for solid colors, gradual colors, URL of panoramic texture. The default is <code class=\"codespan\">'auto'</code>, which is used as the environment texture when <a href=\"#series-map3D.light.ambientCubemap.texture\">light.ambientCubemap.texture</a> is configured. Otherwise, the environment texture is not displayed.</p>\n<p>Example: </p>\n<pre><code class=\"lang-js\">// Configure as a panoramic texture\nenvironment: 'asset/starfield.jpg'\n// Configured as a solid black background\nenvironment: '#000'\n// Configured as a background with a vertical gradient\nenvironment: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{\n offset: 0, color: '#00aaff' // Sky color\n}, {\n offset: 0.7, color: '#998866' // Ground color\n}, {\n offset: 1, color: '#998866' // Ground color\n}], false)\n\n</code></pre>\n","default":"'auto'"},"groundPlane":{"type":["Object"],"description":"<p>The ground allows the entire assembly to be “placed” to make the entire scene look more realistic.</p>\n<p> <code class=\"codespan\">groundPlane</code> supports setting up separate <code class=\"codespan\">realisticMaterial</code>, <code class=\"codespan\">colorMaterial</code>, <code class=\"codespan\">lambertMaterial</code> and other materials. If not set, the material parameters of the component are taken by default.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to display the ground.</p>\n","default":false},"color":{"type":["string"],"description":"<p>The color of the ground.</p>\n","default":"'#aaa'"}}},"instancing":{"type":["boolean"],"description":"<p><code class=\"codespan\">instancing</code> will merge all the <a href=\"http://geojson.org/geojson-spec.html#geometry-objects\" target=\"_blank\">geometry</a> in GeoJSON into one. When GeoJSON has a lot of (thousands) <a href=\"http://geojson.org/geojson-spec.html#geometry-objects\" target=\"_blank\">geometry</a>, it can effectively improve drawing efficiency.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>The setting of the label.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the label.</p>\n","default":false},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element.</p>\n<p>The distance from the label to the graphic. In a 3D Scatter, this distance is the pixel value of the screen space. In other figures, this distance is the relative 3D distance.</p>\n"},"formatter":{"type":["Function","string"],"description":"<p>The formatter of the label content, which supports the string template and the callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template:</strong> </p>\n<p>The model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n</ul>\n<p><strong>Example:</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {c}'\n</code></pre>\n<p><strong>Callback function:</strong>\n Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>The <code class=\"codespan\">params</code> is the single data set needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"textStyle":{"type":["Object"],"description":"<p>The font style of the label.</p>\n","properties":{"color":{"type":["string"],"description":"<p>The Color of the text.</p>\n","default":"\"#fff\""},"borderWidth":{"type":["number"],"description":"<p>The border width of the text.</p>\n","default":0},"borderColor":{"type":["string"],"description":"<p>The border color of the text.</p>\n","default":"#fff"},"fontFamily":{"type":["string"],"description":"<p>The font family of the text.</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>The font size of the text.</p>\n","default":12},"fontWeight":{"type":["string"],"description":"<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"}}}}},"itemStyle":{"type":["Object"],"description":"<p>Visual properties of 3D graphics in 三维地图, including color, transparency, strokes, etc.</p>\n","properties":{"color":{"type":["string","Function"],"description":"<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n","default":"adaptive"},"opacity":{"type":["number"],"description":"<p>The opacity of the graphic.</p>\n","default":1},"borderWidth":{"type":["number"],"description":"<p>The width of the border. With the border, you can distinguish each area more clearly. As shown below:</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/geo-border.png\"></p>\n","default":0},"borderColor":{"type":["string"],"description":"<p>The color of the border.</p>\n","default":"#333"}}},"emphasis":{"type":["Object"],"description":"<p>Graphic and label styles when mouse hover is highlighted.</p>\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the label.</p>\n","default":false},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element.</p>\n<p>The distance from the label to the graphic. In a 3D Scatter, this distance is the pixel value of the screen space. In other figures, this distance is the relative 3D distance.</p>\n","default":2},"formatter":{"type":["Function","string"],"description":"<p>The formatter of the label content, which supports the string template and the callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template:</strong> </p>\n<p>The model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n</ul>\n<p><strong>Example:</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {c}'\n</code></pre>\n<p><strong>Callback function:</strong>\n Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>The <code class=\"codespan\">params</code> is the single data set needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"textStyle":{"type":["Object"],"description":"<p>The font style of the label.</p>\n","properties":{"color":{"type":["string"],"description":"<p>The Color of the text.</p>\n","default":"#000"},"borderWidth":{"type":["number"],"description":"<p>The border width of the text.</p>\n","default":1},"borderColor":{"type":["string"],"description":"<p>The border color of the text.</p>\n","default":"#fff"},"fontFamily":{"type":["string"],"description":"<p>The font family of the text.</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>The font size of the text.</p>\n","default":20},"fontWeight":{"type":["string"],"description":"<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"description":"<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n","default":"adaptive"},"opacity":{"type":["number"],"description":"<p>The opacity of the graphic.</p>\n","default":1}}}}},"data":{"type":["Array"],"description":"<p>The setting of the map area.</p>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>The name of the corresponding map area, such as <code class=\"codespan\">'Guangdong'</code>, <code class=\"codespan\">'Zhejiang'</code>.</p>\n"},"value":{"type":["number"],"description":"<p>The data value for this area.</p>\n"},"regionHeight":{"type":["number"],"description":"<p>The height of the area. Different heights can be set to express the size of the data. When GeoJSON is the data of the building, this value can also be used to represent the approximate height. As shown below：</p>\n<p><img width=\"700\" height=\"auto\" src=\"documents/asset/gl/img/city-region-height.jpg\"></p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style settings for a single area.</p>\n","properties":{"color":{"type":["string"],"description":"<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n","default":"adaptive"},"opacity":{"type":["number"],"description":"<p>The opacity of the graphic.</p>\n","default":1},"borderWidth":{"type":["number"],"description":"<p>The width of the border. With the border, you can distinguish each area more clearly. As shown below:</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/geo-border.png\"></p>\n","default":0},"borderColor":{"type":["string"],"description":"<p>The color of the border.</p>\n","default":"#333"}}},"label":{"type":["Object"],"description":"<p>Label settings for a single area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the label.</p>\n","default":false},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element.</p>\n<p>The distance from the label to the graphic. In a 3D Scatter, this distance is the pixel value of the screen space. In other figures, this distance is the relative 3D distance.</p>\n","default":2},"formatter":{"type":["Function","string"],"description":"<p>The formatter of the label content, which supports the string template and the callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template:</strong> </p>\n<p>The model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n</ul>\n<p><strong>Example:</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {c}'\n</code></pre>\n<p><strong>Callback function:</strong>\n Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>The <code class=\"codespan\">params</code> is the single data set needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"textStyle":{"type":["Object"],"description":"<p>The font style of the label.</p>\n","properties":{"color":{"type":["string"],"description":"<p>The Color of the text.</p>\n","default":"#000"},"borderWidth":{"type":["number"],"description":"<p>The border width of the text.</p>\n","default":1},"borderColor":{"type":["string"],"description":"<p>The border color of the text.</p>\n","default":"#fff"},"fontFamily":{"type":["string"],"description":"<p>The font family of the text.</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>The font size of the text.</p>\n","default":20},"fontWeight":{"type":["string"],"description":"<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"}}}}},"emphasis":{"type":["Object"],"description":"<p>Setting the highlight for labels and styles for a single area.</p>\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"description":"<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n","default":"adaptive"},"opacity":{"type":["number"],"description":"<p>The opacity of the graphic.</p>\n","default":1},"borderWidth":{"type":["number"],"description":"<p>The width of the border. With the border, you can distinguish each area more clearly. As shown below:</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/geo-border.png\"></p>\n","default":0},"borderColor":{"type":["string"],"description":"<p>The color of the border.</p>\n","default":"#333"}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the label.</p>\n","default":false},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element.</p>\n<p>The distance from the label to the graphic. In a 3D Scatter, this distance is the pixel value of the screen space. In other figures, this distance is the relative 3D distance.</p>\n","default":2},"formatter":{"type":["Function","string"],"description":"<p>The formatter of the label content, which supports the string template and the callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template:</strong> </p>\n<p>The model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n</ul>\n<p><strong>Example:</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {c}'\n</code></pre>\n<p><strong>Callback function:</strong>\n Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>The <code class=\"codespan\">params</code> is the single data set needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"textStyle":{"type":["Object"],"description":"<p>The font style of the label.</p>\n","properties":{"color":{"type":["string"],"description":"<p>The Color of the text.</p>\n","default":"#000"},"borderWidth":{"type":["number"],"description":"<p>The border width of the text.</p>\n","default":1},"borderColor":{"type":["string"],"description":"<p>The border color of the text.</p>\n","default":"#fff"},"fontFamily":{"type":["string"],"description":"<p>The font family of the text.</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>The font size of the text.</p>\n","default":20},"fontWeight":{"type":["string"],"description":"<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"}}}}}}}}}},"shading":{"type":["string"],"description":"<p>The coloring effect of 3D graphics in 三维地图. The following three coloring methods are supported in echarts-gl:</p>\n<ul>\n<li><p><code class=\"codespan\">'color'</code>\nOnly display colors, not affected by other factors such as lighting.</p>\n</li>\n<li><p><code class=\"codespan\">'lambert'</code>\nThrough the classic [lambert] coloring, can express the light and dark that the light shows.</p>\n</li>\n<li><p><code class=\"codespan\">'realistic'</code>\nRealistic rendering, combined with <a href=\"#globe.light.ambientCubemap\">light.ambientCubemap</a> and <a href=\"#globe.postEffect\">postEffect</a>, can improve the quality and texture of the display. [Physical Based Rendering (PBR)] (<a href=\"https://www.marmoset.co/posts/physically-based-rendering-and-you-can-too/\" target=\"_blank\">https://www.marmoset.co/posts/physically-based-rendering-and-you-can-too/</a>) is used in ECharts GL to represent realistic materials.</p>\n</li>\n</ul>\n"},"realisticMaterial":{"type":["Object"],"description":"<p>The configuration item of the realistic material is valid when <a href=\"#series-map3D.shading\">shading</a> is <code class=\"codespan\">'realistic'</code>.</p>\n","properties":{"detailTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"],"description":"<p>The texture map of the material detail.</p>\n"},"textureTiling":{"type":["number"],"description":"<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n","default":1},"textureOffset":{"type":["number"],"description":"<p>The displacement of the texture detail texture.</p>\n","default":0},"roughness":{"type":["number","string","HTMLImageElement","HTMLCanvasElement"],"description":"<p>The <code class=\"codespan\">roughness</code> attribute is used to indicate the roughness of the material, <code class=\"codespan\">0</code> is completely smooth, <code class=\"codespan\">1</code> is completely rough, and the middle value is between the two.</p>\n<p>The following images show the effect of <code class=\"codespan\">roughness</code> in <a href=\"#globe\"><code class=\"codespan\">globe</code></a> <code class=\"codespan\">0.2</code> (smooth) and <code class=\"codespan\">0.8</code> (rough).</p>\n<p><img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-gloss.png\">\n<img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-rough.png\"></p>\n<p>When you want to express more complex materials. You can set <code class=\"codespan\">roughness</code> directly to the texture that stores the roughness with each pixel as follows.</p>\n<p><img width=\"300\" height=\"300\" src=\"documents/asset/gl/img/roughness.png\"></p>\n<p>The more white the color in the texture, the larger the value and the rougher it is. You can get texture resources of different materials from resource websites such as [<a href=\"http://freepbr.com/]\" target=\"_blank\">http://freepbr.com/]</a> (<a href=\"http://freepbr.com/)\" target=\"_blank\">http://freepbr.com/)</a>. You can also generate it yourself using other tools.</p>\n","default":0.5},"metalness":{"type":["number","string","HTMLImageElement","HTMLCanvasElement"],"description":"<p>The <code class=\"codespan\">metalness</code> attribute is used to indicate whether the material is metal or non-metal, <code class=\"codespan\">0</code> is non-metallic, <code class=\"codespan\">1</code> is metal, and the middle value is between the two. Usually set to <code class=\"codespan\">0</code> and <code class=\"codespan\">1</code> to meet most of the scenes.</p>\n<p>The picture below show the difference between `metal' and '0' in <a href=\"#globe\">globe</a>.</p>\n<p><img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-metal.png\">\n<img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-non-metal.png\"></p>\n<p>As with <a href=\"#series-map3D.realisticMaterial.roughness\">roughness</a> you can set <code class=\"codespan\">metalness</code> directly to the metal texture.</p>\n","default":0},"roughnessAdjust":{"type":["number"],"description":"<p>Roughness adjustment is useful when using roughness map. The overall roughness of the texture can be adjusted. The default is <code class=\"codespan\">0.5</code>, <code class=\"codespan\">0</code> is completely smooth, <code class=\"codespan\">1</code> is completely rough.</p>\n","default":0.5},"metalnessAdjust":{"type":["number"],"description":"<p>Metalness adjustment is useful when using metalness maps. The overall metallicity of the texture can be adjusted. The default is <code class=\"codespan\">0.5</code>, <code class=\"codespan\">0</code> is non-metal, <code class=\"codespan\">1</code> is metal.</p>\n","default":0.5},"normalTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"],"description":"<p>Normal map of material details.</p>\n<p>Using normal maps, you can still display rich shades of detail on the surface of the object with fewer vertices.</p>\n"}}},"lambertMaterial":{"type":["Object"],"description":"<p>The configuration item of the lambert material is valid when <a href=\"#series-map3D.shading\">shading</a> is <code class=\"codespan\">'lambert'</code>.</p>\n","properties":{"detailTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"],"description":"<p>The texture map of the material detail.</p>\n"},"textureTiling":{"type":["number"],"description":"<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n","default":1},"textureOffset":{"type":["number"],"description":"<p>The displacement of the texture detail texture.</p>\n","default":0}}},"colorMaterial":{"type":["Object"],"description":"<p>The color material related configuration item is valid when <a href=\"#series-map3D.shading\">shading</a> is <code class=\"codespan\">'color'</code>.</p>\n","properties":{"detailTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"],"description":"<p>The texture map of the material detail.</p>\n"},"textureTiling":{"type":["number"],"description":"<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n","default":1},"textureOffset":{"type":["number"],"description":"<p>The displacement of the texture detail texture.</p>\n","default":0}}},"light":{"type":["Object"],"description":"<p>Light related settings. Invalid when <a href=\"#series-map3D.shading\">shading</a> is 'color'.</p>\n<p>The lighting settings affect the components and all the charts on the component's coordinate system.</p>\n<p>A reasonable lighting setting can make the brightness and darkness of the whole scene richer and more layered.</p>\n","properties":{"main":{"type":["Object"],"description":"<p>The setting of the main light source of the scene. In the <a href=\"#globe\">globe</a> component is the sun.</p>\n","properties":{"color":{"type":["string"],"description":"<p>The color of the main light source.</p>\n","default":"#fff"},"intensity":{"type":["number"],"description":"<p>The intensity of the main light source.</p>\n","default":1},"shadow":{"type":["boolean"],"description":"<p>Whether the main light source displays a shadow. The default is off.</p>\n<p>Turning on the shadows can bring more realistic and layered lighting to the scene. But it also increases the operating overhead of the program.</p>\n<p>The following two images show the difference between turning on the shadow and turning off the shadow.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-shadow.png\" width=\"100%\" title=\"Shadow\"><img />\n <img src=\"documents/asset/gl/img/geo-no-shadow.png\" width=\"100%\" title=\"No Shadow\"><img />\n<div />\n","default":false},"shadowQuality":{"type":["string"],"description":"<p>The quality of the shadow. You can choose <code class=\"codespan\">'low'</code>, <code class=\"codespan\">'medium'</code>, <code class=\"codespan\">'high'</code>, <code class=\"codespan\">'ultra'</code></p>\n<p>The following two images shows the difference between low quality and high quality shadows.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-shadow-low.png\" width=\"100%\" title=\"Low\"><img />\n <img src=\"documents/asset/gl/img/geo-shadow-high.png\" width=\"100%\" title=\"High\"><img />\n<div />\n","default":"'medium'"},"alpha":{"type":["number"],"description":"<p>The main light source is around the x-axis, which is the angle of up-down rotation. Control the direction of the light with <a href=\"#series-map3D.light.main.beta\">beta</a>.</p>\n<p>As the following image show:</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/light-alpha-beta.png\"></p>\n<p>The <a href=\"#globe\">globe</a> component can control the time of sunlight by <a href=\"#globe.light.main.time\">time</a>.</p>\n","default":40},"beta":{"type":["number"],"description":"<p>The main light source is around the y-axis, which is the angle of the left-right rotation.</p>\n","default":40}}},"ambient":{"type":["Object"],"description":"<p>Global ambient light settings.</p>\n","properties":{"color":{"type":["string"],"description":"<p>The color of ambient light.</p>\n","default":"#fff"},"intensity":{"type":["number"],"description":"<p>The intensity of ambient light.</p>\n","default":0.2}}},"ambientCubemap":{"type":["Object"],"description":"<p>The ambientCubemap uses texture as the source of ambient light, which provides diffuse and specular for objects. The diffuse and specular can be set separately by <a href=\"#series-map3D.light.ambientCubemap.diffuseIntensity\">diffuseIntensity</a> and <a href=\"#series-map3D.light.ambientCubemap.specularIntensity\">specularIntensity</a>.</p>\n","properties":{"texture":{"type":["string"],"description":"<p>The URL of the ambient cubemap supports HDR images in the <code class=\"codespan\">.hdr</code> format. You can obtained the resources for <code class=\"codespan\">.hdr</code> from <a href=\"http://www.hdrlabs.com/sibl/archive.html\" target=\"_blank\">http://www.hdrlabs.com/sibl/archive.html</a> and other websites.</p>\n<p>Example：</p>\n<pre><code class=\"lang-js\">ambientCubemap: {\n texture: 'pisa.hdr',\n // The exposure value used when analytic hdr\n exposure: 1.0\n}\n</code></pre>\n"},"diffuseIntensity":{"type":["number"],"description":"<p>The intensity of diffuse.</p>\n","default":0.5},"specularIntensity":{"type":["number"],"description":"<p>The intensity of specular.</p>\n","default":0.5}}}}},"postEffect":{"type":["Object"],"description":"<p>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.</p>\n<p>The following are the differences between closing <code class=\"codespan\">postEffect</code> and opening <code class=\"codespan\">postEffect</code>.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/globe-posteffect-disable.png\" width=\"100%\" title=\"Disable\"><img />\n <img src=\"documents/asset/gl/img/globe-posteffect-enable.png\" width=\"100%\" title=\"Enable\"><img />\n<div />\n\n<p>Note that when postEffect is enable, <a href=\"#series-map3D.temporalSuperSampling\">temporalSuperSampling</a> 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.</p>\n","properties":{"enable":{"type":["boolean"],"description":"<p>Whether to enable post-processing effects. Not enabled by default.</p>\n","default":false},"bloom":{"type":["Object"],"description":"<p>Bloom is used to reproducing the effects that occur in real cameras when taking pictures in a bright environment.\nBecause traditional RGB can only represent colors in the range of '0 - 255', so we need to use the bloom effect simulates fringes of light extending from the borders of bright areas, creating the illusion of a bright light overwhelming the camera. As shown below：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/globe-posteffect-bloom.png\"></p>\n","properties":{"enable":{"type":["boolean"],"description":"<p>Whether to enable the bloom effect.</p>\n","default":false},"bloomIntensity":{"type":["number"],"description":"<p>The intensity of the bloom. The default is 0.1.</p>\n","default":0.1}}},"depthOfField":{"type":["Object"],"description":"<p>Depth of Field is a post-processing effect that simulates the focus properties of a camera. The area of focus is clear, and the area away from the focus is gradually blurred.</p>\n<p>The depth of field effect allows the observer to focus on the area of focus and make the picture feel stronger. Large depth of field can also create a macro model effect.</p>\n<p>The following are the differences between turning off and turning on the depth of field effect.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-no-dof.png\" width=\"100%\" title=\"Disable\"><img />\n <img src=\"documents/asset/gl/img/geo-dof.png\" width=\"100%\" title=\"Enable\"><img />\n<div />\n","properties":{"enable":{"type":["boolean"],"description":"<p>Whether to enable the depth of field.</p>\n","default":false},"focalDistance":{"type":["boolean"],"description":"<p>The initial focus distance. The user can click on the area to automatically focus.</p>\n","default":50},"focalRange":{"type":["boolean"],"description":"<p>The size of the in-focus area. The objects in this range are completely clear and there is no blurring.</p>\n","default":20},"fstop":{"type":["number"],"description":"<p>[F value] of the lens (<a href=\"https://zh.wikipedia.org/wiki/%E7%84%A6%E6%AF%94)\" target=\"_blank\">https://zh.wikipedia.org/wiki/%E7%84%A6%E6%AF%94)</a>, the smaller the value, the shallower the depth of field.</p>\n","default":2.8},"blurRadius":{"type":["number"],"description":"<p>Blur radius outside the focus.</p>\n<p>The difference blur effect between the different radius. </p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-dof-small.png\" width=\"100%\" title=\"blurSize: 3\"><img />\n <img src=\"documents/asset/gl/img/geo-dof-large.png\" width=\"100%\" title=\"blurSize: 10\"><img />\n<div />\n","default":10}}},"screenSpaceAmbientOcclusion":{"type":["Object"],"description":"<p>The ambient occlusion post-processing effect darkens the corners, holes, crevices, and areas where most light can`t reach. It is a supplement to the traditional shadow map, which makes the whole scene more natural and layered.</p>\n<p>Below is a comparison of the effects of no SSAO and SSAO:</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-no-ssao.png\" width=\"100%\" title=\"No SSAO\"><img />\n <img src=\"documents/asset/gl/img/geo-ssao.png\" width=\"100%\" title=\"SSAO\"><img />\n<div />\n"},"SSAO":{"type":["Object"],"description":"<p>Same as <a href=\"#series-map3D.postEffect.screenSpaceAmbientOcclusion\">screenSpaceAmbientOcclusion</a></p>\n","properties":{"enable":{"type":["boolean"],"description":"<p>Whether to enable SSAO (screen space ambient occlusion). Not enabled by default.</p>\n","default":false},"quality":{"type":["string"],"description":"<p>The quality of SSAO (screen space ambient occlusion). Supporting<code class=\"codespan\">'low'</code>, <code class=\"codespan\">'medium'</code>, <code class=\"codespan\">'high'</code>, <code class=\"codespan\">'ultra'</code></p>\n","default":"'medium'"},"radius":{"type":["number"],"description":"<p>The radius of the SSAO (screen space ambient occlusion). The larger the radius, the more natural the effect, but you need to set a higher <code class=\"codespan\">'quality'</code>. </p>\n<p>The following example is the difference between a smaller and larger radius:</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-ssao-small-radius.png\" width=\"100%\" title=\"Radius: 1\"><img />\n <img src=\"documents/asset/gl/img/geo-ssao-large-radius.png\" width=\"100%\" title=\"Radius: 10\"><img />\n<div />\n","default":2},"intensity":{"type":["number"],"description":"<p>The intensity of SSAO (screen space ambient occlusion). The larger the value, the darker the color.</p>\n","default":1}}},"colorCorrection":{"type":["Object"],"description":"<p>Color correction and adjustment. Similar to Color Adjustments in Photoshop.</p>\n<p>The same scene in the figure below is adjusted to the difference between the cool color system and the warm color system.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/buildings-cold.jpg\" width=\"100%\" title=\"Cold\"><img />\n <img src=\"documents/asset/gl/img/buildings-warm.jpg\" width=\"100%\" title=\"Warm\"><img />\n<div />\n\n","properties":{"enable":{"type":["boolean"],"description":"<p>Whether to enable the color correction.</p>\n","default":true},"lookupTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"],"description":"<p>Color correction lookup texture, recommended.</p>\n<p>The color correction lookup texture is a texture image like the one below.</p>\n<p><img width=\"200\" height=\"auto\" src=\"documents/asset/gl/img/lookup.png\"></p>\n<p>This is the basic lookup texture image that you can use directly.\nTo adjust the color of the scene to the effect you want, you can take a screenshot of the scene and adjust the color to the desired effect in image processing software such as Photoshop. Then apply the same adjustment to the image of the lookup texture above.</p>\n<p>For example, after turning into a cool tone, the image of the lookup texture will look like this:</p>\n<p><img width=\"200\" height=\"auto\" src=\"documents/asset/gl/img/crispwinter.png\"></p>\n<p>Then the texture image is used as the value of the configuration item, and you can get the same effect in Photoshop.</p>\n<p>Of course, if you just want to get a screenshot, you don't have to do it anymore, but if you want to easily adjust to the ideal color in real-time interactive works, this is very useful.</p>\n"},"exposure":{"type":["number"],"description":"<p>The exposure of the image.</p>\n","default":0},"brightness":{"type":["number"],"description":"<p>The brightness of the image.</p>\n","default":0},"contrast":{"type":["number"],"description":"<p>The contrast of the image.</p>\n","default":1},"saturation":{"type":["number"],"description":"<p>The saturation of the image.</p>\n","default":1}}},"FXAA":{"type":["Object"],"description":"<p>After opening <a href=\"#series-map3D.postEffect\">postEffect</a>, WebGL's default MSAA (Multi Sampling Anti Aliasing) will not work. At this time, FXAA (Fast Approximate Anti-Aliasing) can solve the anti-aliasing problem quickly and easily. FXAA blurs the edge of the scene to solve the problem of aliasing. It works well on some scenes, but in echarts-gl, you need to ensure that the edges of many texts and lines are sharp and clear, so FXAA is not suitable. At this point we can use supersampling by setting a higher <code class=\"codespan\">devicePixelRatio</code> as follows:</p>\n<pre><code class=\"lang-js\">var chart = echarts.init(dom, null, {\n devicePixelRatio: 2\n})\n</code></pre>\n<p>However, setting a higher <code class=\"codespan\">devicePixelRatio</code> has high requirements for computer performance, so more often we recommend using <a href=\"#series-map3D.temporalSuperSampling\">temporalSuperSampling</a> in echarts-gl. 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.</p>\n","properties":{"enable":{"type":["boolean"],"description":"<p>Whether to enable FXAA. Not enabled by default.</p>\n","default":false}}}}},"temporalSuperSampling":{"type":["Object"],"description":"<p>Temporal supersampling. After opening <a href=\"#series-map3D.postEffect\">postEffect</a>, WebGL's default MSAA (MultiSampling Anti-Aliasing) will not work, so we need to solve the problem of sampling.</p>\n<p>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.\nAnd in this process, ECharts-gl also progressively enhances some of the effects in <a href=\"#series-map3D.postEffect\">postEffect</a> that require sampled guarantees. For example <a href=\"#series-map3D.postEffect.SSAO\">SSAO</a>, <a href=\"#series-map3D.postEffect.depthOfField\">Depth of Field</a>, and shadow.</p>\n<p>The following is the difference between not opening <code class=\"codespan\">temporalSuperSampling</code> and opening <code class=\"codespan\">temporalSuperSampling</code>.</p>\n<div class=\"twentytwenty-container\" style=\"width: 800px;\">\n <img src=\"documents/asset/gl/img/surface-no-taa.png\" width=\"100%\" title=\"No AA\"><img />\n <img src=\"documents/asset/gl/img/surface-taa.png\" width=\"100%\" title=\"AA\"><img />\n<div />\n","properties":{"enable":{"type":["boolean"],"description":"<p>Whether to enable temporal supersampling. By default, temporal supersampling is also turned on synchronously when <a href=\"#series-map3D.postEffect\">postEffect</a> is turned on.</p>\n","default":"'auto'"}}},"viewControl":{"type":["Object"],"description":"<p><code class=\"codespan\">viewControl</code> is used for mouse rotation, zooming, and other perspective control.</p>\n","properties":{"projection":{"type":["string"],"description":"<p>The way of projection, the default is <code class=\"codespan\">'perspective'</code> projection, also supports setting to <code class=\"codespan\">'orthogonal'</code> projection.</p>\n","default":"perspective"},"autoRotate":{"type":["boolean"],"description":"<p>Whether to enable the angle of view to automatically rotate around the object.</p>\n","default":false},"autoRotateDirection":{"type":["string"],"description":"<p>The direction in which the object auto rotates. The default is <code class=\"codespan\">'cw'</code> means clockwise from top to bottom, and can also use <code class=\"codespan\">'ccw'</code> means counterclockwise from top to bottom.</p>\n","default":"cw"},"autoRotateSpeed":{"type":["number"],"description":"<p>The speed at which the object auto rotates. The unit is <code class=\"codespan\">angle/second</code>, the default is <code class=\"codespan\">10</code>, which is a turn of <code class=\"codespan\">36</code> seconds.</p>\n","default":10},"autoRotateAfterStill":{"type":["number"],"description":"<p>The time interval for automatic rotation to resume after the mouse is still. Valid after opening <a href=\"#series-map3D.viewControl.autoRotate\">autoRotate</a>.</p>\n","default":3},"damping":{"type":["number"],"description":"<p>The damping when the mouse is rotated, zoomed, etc.\nWhen it is greater than 0, the angle of view will continue to move (rotate and zoom) due to certain inertia after the mouse is still.</p>\n","default":0.8},"rotateSensitivity":{"type":["number","Array"],"description":"<p>The sensitivity of the rotation operation. The greater the value, the more sensitive. Supports the use of arrays to set the horizontal and vertical rotation sensitivity separately.</p>\n<p>The default is <code class=\"codespan\">1</code>.</p>\n<p>Cannot be rotated after setting to <code class=\"codespan\">0</code>.</p>\n<pre><code class=\"lang-js\">// can't rotate\nrotateSensitivity: 0\n// can only be rotated horizontally\nrotateSensitivity: [1, 0]\n// can only rotate vertically\nrotateSensitivity: [0, 1]\n</code></pre>\n","default":1},"zoomSensitivity":{"type":["number"],"description":"<p>The sensitivity of the zoom operation, the larger the value, the more sensitive. The default is <code class=\"codespan\">1</code>.</p>\n<p>Can<code class=\"codespan\">t be scaled after setting to</code>0`.</p>\n","default":1},"panSensitivity":{"type":["number"],"description":"<p>The sensitivity of the panning operation, the greater the value, the more sensitive. Supports the use of arrays to set the horizontal and vertical translation sensitivity.</p>\n<p>The default is <code class=\"codespan\">1</code>.</p>\n<p>Cannot pan after setting to <code class=\"codespan\">0</code>.</p>\n","default":1},"panMouseButton":{"type":["string"],"description":"<p>The mouse button used for panning operation supports:</p>\n<ul>\n<li><p><code class=\"codespan\">'left'</code> left mouse button (default)</p>\n</li>\n<li><p><code class=\"codespan\">'middle'</code> middle mouse button</p>\n</li>\n<li><p><code class=\"codespan\">'right'</code> right mouse button</p>\n</li>\n</ul>\n<p>Note: If set to the right mouse button, the default context menu will be blocked.</p>\n","default":"left"},"rotateMouseButton":{"type":["string"],"description":"<p>The mouse button used for the rotation operation supports:</p>\n<ul>\n<li><p><code class=\"codespan\">'left'</code> left mouse button</p>\n</li>\n<li><p><code class=\"codespan\">'middle'</code> middle mouse button (default)</p>\n</li>\n<li><p><code class=\"codespan\">'right'</code> right mouse button</p>\n</li>\n</ul>\n<p>Note: If set to the right mouse button, the default context menu will be blocked.</p>\n","default":"middle"},"distance":{"type":["number"],"description":"<p>The distance of the default perspective from the subject. For <a href=\"#globe\">globe</a>, the distance from the Earth's surface is the distance from the center origin for other components such as <a href=\"#grid3D\">grid3D</a> and <a href=\"#geo3D\">geo3D</a>. Valid when <a href=\"#series-map3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'perspective'</code>.</p>\n","default":100},"minDistance":{"type":["number"],"description":"<p>The angle of view is controlled by the mouse to bring the minimum distance to the subject. Valid when <a href=\"#series-map3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'perspective'</code>.</p>\n","default":40},"maxDistance":{"type":["number"],"description":"<p>The angle of view can be extended to the maximum distance of the subject by mouse control. Valid when <a href=\"#series-map3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'perspective'</code>.</p>\n","default":400},"orthographicSize":{"type":["number"],"description":"<p>The size of the orthogonal projection. Valid when <a href=\"#series-map3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'orthographic'</code>.</p>\n","default":100},"maxOrthographicSize":{"type":["number"],"description":"<p>The maximum value of the orthogonal projection scaling. Valid when <a href=\"#series-map3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'orthographic'</code>.</p>\n","default":20},"minOrthographicSize":{"type":["number"],"description":"<p>The minimum value of the orthogonal projection scaling. Valid when <a href=\"#series-map3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'orthographic'</code></p>\n","default":400},"alpha":{"type":["number"],"description":"<p>The angle of view is around the x-axis, which is the angle of rotation up and down. With <a href=\"#series-map3D.light.main.beta\">beta</a> you can control the direction of the perspective.</p>\n<p>As shown below：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/view-alpha-beta.png\"></p>\n","default":40},"beta":{"type":["number"],"description":"<p>The angle of view is around the y-axis, which is the angle of rotation from left to right.</p>\n","default":0},"center":{"type":["Array"],"description":"<p>At the center of the angle of view, the rotation will also rotate around this center point. The default is <code class=\"codespan\">[0,0,0]</code>.</p>\n"},"minAlpha":{"type":["number"],"description":"<p>The minimum alpha value to rotate up and down. That is, the angle of view can be rotated to reach the uppermost angle.</p>\n","default":5},"maxAlpha":{"type":["number"],"description":"<p>The maximum alpha value to rotate up and down. That is, the angle of view can be rotated to the lowest angle.</p>\n","default":90},"minBeta":{"type":["number"],"description":"<p>The minimum beta value to rotate left and right. That is, the angle of view can be rotated to the leftmost angle.</p>\n","default":-80},"maxBeta":{"type":["number"],"description":"<p>The maximum beta value to rotate left and right rotation. That is, the angle of view can be rotated to the rightmost angle.</p>\n","default":80},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationDurationUpdate":{"type":["number"],"description":"<p>The duration time for update the transition animation.</p>\n","default":1000},"animationEasingUpdate":{"type":["string"],"description":"<p>The easing effect for update transition animation.</p>\n","default":"cubicInOut"}}},"zlevel":{"type":["number"],"description":"<p>The layer in which the component is located.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> 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 <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid the crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n<p><strong>Note:</strong> The layers of the components in echarts-gl need to be separated from the layers of the components in echarts. The same <code class=\"codespan\">zlevel</code> cannot be used for both WebGL and Canvas drawing at the same time.</p>\n","default":-10},"left":{"type":["string","number"],"description":"<p>Distance between component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>; and it can also be <code class=\"codespan\">'left'</code>, <code class=\"codespan\">'center'</code>, or <code class=\"codespan\">'right'</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">'left'</code>, <code class=\"codespan\">'center'</code>, or <code class=\"codespan\">'right'</code>, then the component will be aligned automatically based on position.</p>\n","default":"auto"},"top":{"type":["string","number"],"description":"<p>Distance between component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>; and it can also be <code class=\"codespan\">'top'</code>, <code class=\"codespan\">'middle'</code>, or <code class=\"codespan\">'bottom'</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">'top'</code>, <code class=\"codespan\">'middle'</code>, or <code class=\"codespan\">'bottom'</code>, then the component will be aligned automatically based on position.</p>\n","default":"auto"},"right":{"type":["string","number"],"description":"<p>Distance between component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>.</p>\n<p> Adaptive by default.</p>\n","default":"auto"},"bottom":{"type":["string","number"],"description":"<p>Distance between component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>.</p>\n<p> Adaptive by default.</p>\n","default":"auto"},"width":{"type":["string","number"],"description":"<p> The width of the view of the component.</p>\n","default":"auto"},"height":{"type":["string","number"],"description":"<p> The height of the view of the component.</p>\n","default":"auto"}}},{"type":["Object"],"description":"<p>Surface. Support to drawn the [Parameter surface] (<a href=\"https://en.wikipedia.org/wiki/Parametric_surface\" target=\"_blank\">https://en.wikipedia.org/wiki/Parametric_surface</a>) by <a href=\"#series-surface.parametric\">parametric</a>.</p>\n<p>The figure below is a parametric surface similar to a metal part configured as a metal material.</p>\n<p><img width=\"500\" height=\"auto\" src=\"documents/asset/gl/img/parametric-surface.png\"></p>\n","properties":{"type":{"type":["string"],"description":"","default":"'surface'"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"https://echarts.apache.org/zh/option.html#tooltip\" target=\"_blank\">tooltip</a> and filtering with <a href=\"https://echarts.apache.org/zh/option.html#legend\" target=\"_blank\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"coordinateSystem":{"type":["string"],"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class=\"codespan\">'cartesian3D'</code></p>\n<p> Use a 3D rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n","default":"cartesian3D"},"grid3DIndex":{"type":["number"],"description":"<p>Use the index of the <a href=\"#grid3D\">grid3D</a> component. The first <a href=\"#grid3D\">grid3D</a> component is used by default.</p>\n","default":0},"parametric":{"type":["boolean"],"description":"<p>Whether it is a parametric surface.</p>\n","default":false},"wireframe":{"type":["Object"],"description":"<p>The wireframe of the surface.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to display wireframe. Default is Display.</p>\n","default":true},"lineStyle":{"type":["Object"],"description":"<p>The style of the wireframe.</p>\n","properties":{"color":{"type":["string"],"description":"<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-js\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n","default":"#222"},"opacity":{"type":["number"],"description":"<p>The opacity of the line.</p>\n","default":1},"width":{"type":["number"],"description":"<p>The width of the line.</p>\n","default":1}}}}},"equation":{"type":["Object"],"description":"<p>The function expression of the surface. If you need to display a function surface, you can set the function expression by <a href=\"#series-surface.equation\">equation</a> without setting <a href=\"#series-surface.data\">data</a>. For example, the ripple effect can be simulated by the following function.</p>\n<pre><code class=\"lang-js\">equation: {\n x: {\n step: 0.1,\n min: -3,\n max: 3,\n },\n y: {\n step: 0.1,\n min: -3,\n max: 3,\n },\n z: function (x, y) {\n return Math.sin(x * x + y * y) * x / 3.14\n }\n}\n</code></pre>\n","properties":{"x":{"type":["Object"],"description":"<p>Independent variable x.</p>\n","properties":{"step":{"type":["number"],"description":"<p>The step size of x.</p>\n"},"min":{"type":["number"],"description":"<p>The minimum value of x.</p>\n"},"max":{"type":["number"],"description":"<p>The maximum value of x.</p>\n"}}},"y":{"type":["Object"],"description":"<p>The independent variable y.</p>\n","properties":{"step":{"type":["number"],"description":"<p>The step size of x.</p>\n"},"min":{"type":["number"],"description":"<p>The minimum value of y.</p>\n"},"max":{"type":["number"],"description":"<p>The maximum value of y.</p>\n"}}},"z":{"type":["Function"],"description":"<p>The dependent variable z.</p>\n<p>z is a function for <a href=\"#series-surface.equation.x\">x</a>, <a href=\"#series-surface.equation.y\">y</a>.</p>\n<pre><code class=\"lang-js\">(x: number, y: number) => number\n</code></pre>\n"}}},"parametricEquation":{"type":["Object"],"description":"<p>The [parameter equation] of the surface (<a href=\"https://zh.wikipedia.org/wiki/%E5%8F%83%E6%95%B8%E6%96%B9%E7%A8%8B)\" target=\"_blank\">https://zh.wikipedia.org/wiki/%E5%8F%83%E6%95%B8%E6%96%B9%E7%A8%8B)</a>. When <a href=\"#series-surface.data\">data</a> is not set, the parameter parameter equation can be declared by <a href=\"#series-surface.equation\">parametricEquation</a>. Valid when <a href=\"#series-surface\">parametric</a> is <code class=\"codespan\">true</code>.</p>\n<p>The parametric equations is <a href=\"#series-surface.parametricEquation.x\">x</a>, <a href=\"#series-surface.parametricEquation.y\">y</a>, <a href=\"#series-surface.parametricEquation.z\">z</a> about the equations of the parameters <a href=\"#series-surface.parametricEquation.u\">u</a>, <a href=\"#series-surface.parametricEquation.v\">v</a>.</p>\n<p>The following parametric equation is to plot the parametric surface of a similar metal part in the previous figure:</p>\n<pre><code class=\"lang-js\">var aa = 0.4;\nvar r = 1 - aa * aa;\nvar w = sqrt(r);\n...\nparametricEquation: {\n u: {\n min: -13.2,\n max: 13.2,\n step: 0.5\n },\n v: {\n min: -37.4,\n max: 37.4,\n step: 0.5\n },\n x: function (u, v) {\n var denom = aa * (pow(w * cosh(aa * u), 2) + aa * pow(sin(w * v), 2))\n return -u + (2 * r * cosh(aa * u) * sinh(aa * u) / denom);\n },\n y: function (u, v) {\n var denom = aa * (pow(w * cosh(aa * u), 2) + aa * pow(sin(w * v), 2))\n return 2 * w * cosh(aa * u) * (-(w * cos(v) * cos(w * v)) - (sin(v) * sin(w * v))) / denom;\n },\n z: function (u, v) {\n var denom = aa * (pow(w * cosh(aa * u), 2) + aa * pow(sin(w * v), 2))\n return 2 * w * cosh(aa * u) * (-(w * sin(v) * cos(w * v)) + (cos(v) * sin(w * v))) / denom\n }\n}\n</code></pre>\n","properties":{"u":{"type":["Object"],"description":"<p>The argument u.</p>\n","properties":{"step":{"type":["number"],"description":"<p>The step size of u.</p>\n"},"min":{"type":["number"],"description":"<p>The minimum value of u.</p>\n"},"max":{"type":["number"],"description":"<p>The maximum value of u.</p>\n"}}},"v":{"type":["Object"],"description":"<p>Independent variable v.</p>\n","properties":{"step":{"type":["number"],"description":"<p>The step size of v.</p>\n"},"min":{"type":["number"],"description":"<p>The minimum value of v.</p>\n"},"max":{"type":["number"],"description":"<p>The maximum value of v.</p>\n"}}},"x":{"type":["Function"],"description":"<p>x is a function for <a href=\"#series-surface.equation.u\">u</a>, <a href=\"#series-surface.equation.v\">v</a>.</p>\n<pre><code class=\"lang-js\">(u: number, v: number) => number\n</code></pre>\n"},"y":{"type":["Function"],"description":"<p>y is a function for <a href=\"#series-surface.equation.u\">u</a>, <a href=\"#series-surface.equation.v\">v</a>.</p>\n<pre><code class=\"lang-js\">(u: number, v: number) => number\n</code></pre>\n"},"z":{"type":["Function"],"description":"<p>z is a function for <a href=\"#series-surface.equation.u\">u</a>, <a href=\"#series-surface.equation.v\">v</a>.</p>\n<pre><code class=\"lang-js\">(u: number, v: number) => number\n</code></pre>\n"}}},"itemStyle":{"type":["Object"],"description":"<p>The color, opacity, and other styles of the surface.</p>\n","properties":{"color":{"type":["string"],"description":"<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n","default":"adaptive"},"opacity":{"type":["number"],"description":"<p>The opacity of the graphic.</p>\n","default":1}}},"data":{"type":["Array"],"description":"<p>The data array of the surface.</p>\n<p>The data is an array of linear stores containing multiply <code class=\"codespan\">X vertices</code> by <code class=\"codespan\">Y vertices</code> data. A 5 x 5 surface has a total of 25 vertices, and the index of the data in the array is as follows</p>\n<p><img width=\"400\" height=\"auto\" src=\"documents/asset/gl/img/surface-index.png\"></p>\n<p>The data used in the above figure:</p>\n<pre><code class=\"lang-js\">data: [\n [-1,-1,0],[-0.5,-1,0],[0,-1,0],[0.5,-1,0],[1,-1,0],\n [-1,-0.5,0],[-0.5,-0.5,1],[0,-0.5,0],[0.5,-0.5,-1],[1,-0.5,0],\n [-1,0,0],[-0.5,0,0],[0,0,0],[0.5,0,0],[1,0,0],\n [-1,0.5,0],[-0.5,0.5,-1],[0,0.5,0],[0.5,0.5,1],[1,0.5,0],\n [-1,1,0],[-0.5,1,0],[0,1,0],[0.5,1,0],[1,1,0]\n]\n</code></pre>\n<p>Each item is <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">z</code>.</p>\n<p>For the parametric equation, each item needs to store five data, namely <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">z</code> and the parameters <code class=\"codespan\">u</code>, <code class=\"codespan\">v</code>. The index of the data is in the order of <code class=\"codespan\">u</code>, <code class=\"codespan\">v</code>. For example the following data:</p>\n<pre><code class=\"lang-js\">data: [\n // v is 0, u is from -3.14 to 3.13\n [0,0,1,-3.14,0],[0,0,1,-1.57,0],[0,0,1,0,0],[0,0,1,1.57,0],[0,0,1,3.14,0],\n // v is 1.57, u is from -3.14 to 3.13\n [0,-1,0,-3.14,1.57],[-1,0,0,-1.57,1.57],[0,1,0,0,1.57],[1,0,0,1.57,1.57],[0,-1,0,3.14,1.57],\n // v is 3.14, u is from -3.14 to 3.13\n [0,0,-1,-3.14,3.14],[0,0,-1,-1.57,3.14],[0,0,-1,0,3.14],[0,0,-1,1.57,3.14],[0,0,-1,3.14,3.14]]\n]\n</code></pre>\n<p>More likely, we need to assign name to each data item, in which case each item should be an object:</p>\n<pre><code class=\"lang-js\">[{\n // name of date item\n name: 'data1',\n // value of date item is 8\n value: [12, 14, 10]\n}, {\n name: 'data2',\n value: 20\n}]\n</code></pre>\n<p>Each data item can be further customized:</p>\n<pre><code class=\"lang-js\">[{\n name: 'data1',\n value: [12, 14, 10]\n}, {\n // name of data item\n name: 'data2',\n value : [34, 50, 15],\n // user-defined special itemStyle that only useful for this data item\n itemStyle:{}\n}]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>The name of the data item.</p>\n"},"value":{"type":["Array"],"description":"<p>Data item value.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>The style setting for a single data item.</p>\n","properties":{"color":{"type":["string"],"description":"<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n","default":"adaptive"},"opacity":{"type":["number"],"description":"<p>The opacity of the graphic.</p>\n","default":1}}}}}},"shading":{"type":["string"],"description":"<p>The coloring effect of 3D graphics in surface. The following three coloring methods are supported in echarts-gl:</p>\n<ul>\n<li><p><code class=\"codespan\">'color'</code>\nOnly display colors, not affected by other factors such as lighting.</p>\n</li>\n<li><p><code class=\"codespan\">'lambert'</code>\nThrough the classic [lambert] coloring, can express the light and dark that the light shows.</p>\n</li>\n<li><p><code class=\"codespan\">'realistic'</code>\nRealistic rendering, combined with <a href=\"#globe.light.ambientCubemap\">light.ambientCubemap</a> and <a href=\"#globe.postEffect\">postEffect</a>, can improve the quality and texture of the display. [Physical Based Rendering (PBR)] (<a href=\"https://www.marmoset.co/posts/physically-based-rendering-and-you-can-too/\" target=\"_blank\">https://www.marmoset.co/posts/physically-based-rendering-and-you-can-too/</a>) is used in ECharts GL to represent realistic materials.</p>\n</li>\n</ul>\n"},"realisticMaterial":{"type":["Object"],"description":"<p>The configuration item of the realistic material is valid when <a href=\"#series-surface.shading\">shading</a> is <code class=\"codespan\">'realistic'</code>.</p>\n","properties":{"detailTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"],"description":"<p>The texture map of the material detail.</p>\n"},"textureTiling":{"type":["number"],"description":"<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n","default":1},"textureOffset":{"type":["number"],"description":"<p>The displacement of the texture detail texture.</p>\n","default":0},"roughness":{"type":["number","string","HTMLImageElement","HTMLCanvasElement"],"description":"<p>The <code class=\"codespan\">roughness</code> attribute is used to indicate the roughness of the material, <code class=\"codespan\">0</code> is completely smooth, <code class=\"codespan\">1</code> is completely rough, and the middle value is between the two.</p>\n<p>The following images show the effect of <code class=\"codespan\">roughness</code> in <a href=\"#globe\"><code class=\"codespan\">globe</code></a> <code class=\"codespan\">0.2</code> (smooth) and <code class=\"codespan\">0.8</code> (rough).</p>\n<p><img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-gloss.png\">\n<img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-rough.png\"></p>\n<p>When you want to express more complex materials. You can set <code class=\"codespan\">roughness</code> directly to the texture that stores the roughness with each pixel as follows.</p>\n<p><img width=\"300\" height=\"300\" src=\"documents/asset/gl/img/roughness.png\"></p>\n<p>The more white the color in the texture, the larger the value and the rougher it is. You can get texture resources of different materials from resource websites such as [<a href=\"http://freepbr.com/]\" target=\"_blank\">http://freepbr.com/]</a> (<a href=\"http://freepbr.com/)\" target=\"_blank\">http://freepbr.com/)</a>. You can also generate it yourself using other tools.</p>\n","default":0.5},"metalness":{"type":["number","string","HTMLImageElement","HTMLCanvasElement"],"description":"<p>The <code class=\"codespan\">metalness</code> attribute is used to indicate whether the material is metal or non-metal, <code class=\"codespan\">0</code> is non-metallic, <code class=\"codespan\">1</code> is metal, and the middle value is between the two. Usually set to <code class=\"codespan\">0</code> and <code class=\"codespan\">1</code> to meet most of the scenes.</p>\n<p>The picture below show the difference between `metal' and '0' in <a href=\"#globe\">globe</a>.</p>\n<p><img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-metal.png\">\n<img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-non-metal.png\"></p>\n<p>As with <a href=\"#series-surface.realisticMaterial.roughness\">roughness</a> you can set <code class=\"codespan\">metalness</code> directly to the metal texture.</p>\n","default":0},"roughnessAdjust":{"type":["number"],"description":"<p>Roughness adjustment is useful when using roughness map. The overall roughness of the texture can be adjusted. The default is <code class=\"codespan\">0.5</code>, <code class=\"codespan\">0</code> is completely smooth, <code class=\"codespan\">1</code> is completely rough.</p>\n","default":0.5},"metalnessAdjust":{"type":["number"],"description":"<p>Metalness adjustment is useful when using metalness maps. The overall metallicity of the texture can be adjusted. The default is <code class=\"codespan\">0.5</code>, <code class=\"codespan\">0</code> is non-metal, <code class=\"codespan\">1</code> is metal.</p>\n","default":0.5},"normalTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"],"description":"<p>Normal map of material details.</p>\n<p>Using normal maps, you can still display rich shades of detail on the surface of the object with fewer vertices.</p>\n"}}},"lambertMaterial":{"type":["Object"],"description":"<p>The configuration item of the lambert material is valid when <a href=\"#series-surface.shading\">shading</a> is <code class=\"codespan\">'lambert'</code>.</p>\n","properties":{"detailTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"],"description":"<p>The texture map of the material detail.</p>\n"},"textureTiling":{"type":["number"],"description":"<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n","default":1},"textureOffset":{"type":["number"],"description":"<p>The displacement of the texture detail texture.</p>\n","default":0}}},"colorMaterial":{"type":["Object"],"description":"<p>The color material related configuration item is valid when <a href=\"#series-surface.shading\">shading</a> is <code class=\"codespan\">'color'</code>.</p>\n","properties":{"detailTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"],"description":"<p>The texture map of the material detail.</p>\n"},"textureTiling":{"type":["number"],"description":"<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n","default":1},"textureOffset":{"type":["number"],"description":"<p>The displacement of the texture detail texture.</p>\n","default":0}}},"zlevel":{"type":["number"],"description":"<p>The layer in which the component is located.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> 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 <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid the crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n<p><strong>Note:</strong> The layers of the components in echarts-gl need to be separated from the layers of the components in echarts. The same <code class=\"codespan\">zlevel</code> cannot be used for both WebGL and Canvas drawing at the same time.</p>\n","default":-10},"silent":{"type":["boolean"],"description":"<p>Whether the graph doesn`t respond and triggers a mouse event. The default is false, which is to respond to and trigger mouse events.</p>\n","default":false},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationDurationUpdate":{"type":["number"],"description":"<p>The duration time for update the transition animation.</p>\n","default":500},"animationEasingUpdate":{"type":["string"],"description":"<p>The easing effect for update transition animation.</p>\n","default":"cubicOut"}}},{"type":["Object"],"description":"<p><code class=\"codespan\">polygons3D</code> is used to visualize polygon data with high information on the map, which is often used for drawing of buildings.\nThe picture below shows the nearly 50w number of New York buildings drawn with <code class=\"codespan\">polygons3D</code>.</p>\n<p><img width=\"900\" height=\"auto\" src=\"documents/asset/gl/img/polygons3D-ny.jpg\"></p>\n","properties":{"type":{"type":["string"],"description":"","default":"'polygons3D'"},"multiPolygon":{"type":["boolean"],"description":"<p>Whether a data contains multiple polygons.</p>\n","default":true},"itemStyle":{"type":["Object"],"description":"<p>Graphic styles, including color, transparency, strokes, and etc.</p>\n","properties":{"color":{"type":["string","Function"],"description":"<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n","default":"adaptive"},"opacity":{"type":["number"],"description":"<p>The opacity of the graphic.</p>\n","default":1}}},"emphasis":{"type":["Object"],"description":"<p>Mouse hover Highlights the style of graphics and labels.</p>\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"description":"<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n","default":"adaptive"},"opacity":{"type":["number"],"description":"<p>The opacity of the graphic.</p>\n","default":1}}}}},"data":{"type":["Object"],"description":"<p>A list of data for the polygon.</p>\n<pre><code class=\"lang-js\">data: [{\n // A square\n coords: [[0, 0], [100, 0], [100, 100], [0, 100]],\n // Height\n height: 3\n}, {\n // A triangle\n coords: [[50, 0], [100, 100], [0, 100]],\n // Height\n height: 5\n}]\n</code></pre>\n","properties":{"coords":{"type":["Array"],"description":"<p>A list of coordinates of the polygon. If <a href=\"#series-polygons3D.multiPolygon\">multiPolygon</a> is set to true, it is an array containing multiple polygons.</p>\n"}}},"progressiveThreshold":{"type":["number"],"description":"<p>Enable progressive rendering thresholds, progressive rendering can be loading the screen without blocking.</p>\n","default":1000},"progressive":{"type":["number"],"description":"<p>Progressively render the amount of data per render.</p>\n","default":1000}}},{"type":["Object"],"description":"<p>A 2D scatter/bubble plot drawn using WebGL.</p>\n<p>It is used in the same way as <a href=\"http://echarts.baidu.com/option.html#series-scatter\" target=\"_blank\">scatter</a>.</p>\n","properties":{"type":{"type":["string"],"description":"","default":"'scatterGL'"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"https://echarts.apache.org/zh/option.html#tooltip\" target=\"_blank\">tooltip</a> and filtering with <a href=\"https://echarts.apache.org/zh/option.html#legend\" target=\"_blank\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"coordinateSystem":{"type":["string"],"description":"<p>The coordinate system used.</p>\n<p>Same as <a href=\"http://echarts.baidu.com/option.html#series-scatter.coordinateSystem\" target=\"_blank\">scatter.coordinateSystem</a></p>\n","default":"'cartesian2d'"},"symbol":{"type":["string"],"description":"<p>The shape of the scatter. The default is a circle.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">'circle'</code>, <code class=\"codespan\">'rect'</code>, <code class=\"codespan\">'roundRect'</code>, <code class=\"codespan\">'triangle'</code>, <code class=\"codespan\">'diamond'</code>, <code class=\"codespan\">'pin'</code>, <code class=\"codespan\">'arrow'</code>, <code class=\"codespan\">'none'</code></p>\n<p>Icons can be set to arbitrary vector path via <code class=\"codespan\">'path://'</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n","default":"'circle'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p> symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":10},"itemStyle":{"type":["Object"],"description":"<p>Sets the style of scatter</p>\n","properties":{"color":{"type":["string"],"description":"<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n","default":"adaptive"},"opacity":{"type":["number"],"description":"<p>The opacity of the graphic.</p>\n","default":0.8},"borderWidth":{"type":["number"],"description":"<p>Sets the width of the border.</p>\n","default":0},"borderColor":{"type":["string"],"description":"<p>Sets the color of the border.</p>\n","default":"'#fff'"}}},"data":{"type":["Array"],"description":"<p>The data array of scatter.</p>\n<p>The data format is the same as <a href=\"http://echarts.baidu.com/option.html#series-scatter.data\" target=\"_blank\">scatter.data</a></p>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>The name of the data item.</p>\n"},"value":{"type":["number","Array"],"description":"<p>Data item value</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>The style of a single data graphic.</p>\n","properties":{"color":{"type":["string"],"description":"<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n","default":"adaptive"},"opacity":{"type":["number"],"description":"<p>The opacity of the graphic.</p>\n","default":0.8},"borderWidth":{"type":["number"],"description":"<p>Sets the width of the border.</p>\n","default":0},"borderColor":{"type":["string"],"description":"<p>Sets the color of the border.</p>\n","default":"'#fff'"}}}}}},"blendMode":{"type":["string"],"description":"<p>Sets the type of compositing operation to apply when drawing a new shape. </p>\n<p>Currently supporting <code class=\"codespan\">'source-over'</code>, <code class=\"codespan\">'lighter'</code>. The default is <code class=\"codespan\">'source-over'</code> mode is blended by alpha. The <code class=\"codespan\">'lighter'</code> is overlap mode. In this mode, the area where the number of graphics is concentrated can be highlighted by the overlap.</p>\n","default":"'source-over'"},"zlevel":{"type":["number"],"description":"<p>The layer in which the component is located.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> 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 <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid the crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n<p><strong>Note:</strong> The layers of the components in echarts-gl need to be separated from the layers of the components in echarts. The same <code class=\"codespan\">zlevel</code> cannot be used for both WebGL and Canvas drawing at the same time.</p>\n","default":10},"progressiveThreshold":{"type":["number"],"description":"<p>Enable progressive rendering thresholds, progressive rendering can be loading the screen without blocking.</p>\n","default":100000},"progressive":{"type":["number"],"description":"<p>Progressively render the amount of data per render.</p>\n","default":100000}}},{"type":["Object"],"description":"<p>Uses WebGL to drawn the relational chart, support the layout and rendering of large-scale network/relational data.</p>\n","properties":{"type":{"type":["string"],"description":"","default":"'graphGL'"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"https://echarts.apache.org/zh/option.html#tooltip\" target=\"_blank\">tooltip</a> and filtering with <a href=\"https://echarts.apache.org/zh/option.html#legend\" target=\"_blank\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"layout":{"type":["string"],"description":"<p>The continuous graph layout algorithm supports the <a href=\"https://github.com/gephi/gephi/wiki/Force-Atlas-2\" target=\"_blank\">forceAtlas2</a> algorithm layout using gephi.</p>\n","default":"'forceAtlas2'"},"forceAtlas2":{"type":["Object"],"description":"<p><a href=\"https://github.com/gephi/gephi/wiki/Force-Atlas-2\" target=\"_blank\">forceAtlas2</a> a continuous graph layout algorithm.</p>\n<p>The algorithm has efficient layout efficiency and stable layout results for large-scale network data.</p>\n<p>Support for configuring GPU or CPU layout via <a href=\"#series-graphGL.forceAtlas2.GPU\">forceAtlas2.GPU</a>.</p>\n<p>The advantage of the CPU is that it is compatible, and the GPU implementation has dozens or even hundreds of performance advantages in high-end graphics cards.</p>\n<p>Below is a performance comparison of the iteration of a layout of a 2w node (nearly 5w edges) on a GTX1070 and an i7 4GHz computer.</p>\n<p><img width=\"400\" height=\"auto\" src=\"documents/asset/gl/img/gpu-layout-perf.png\"></p>\n","properties":{"GPU":{"type":["boolean"],"description":"<p>Whether to enable GPU layout.</p>\n","default":true},"steps":{"type":["number"],"description":"<p>The number of iterations of an update. Because the force-guided algorithm usually draws the results of each iteration, but because the drawing time tends to be greater than the layout time, the layout efficiency will be reduced. At this time, we can set a larger <code class=\"codespan\">steps</code> parameter to ensure the layout and Draw time equalization and speed up the layout.</p>\n","default":1},"stopThreshold":{"type":["number"],"description":"<p>Stops the threshold of the layout and stops the layout when the global velocity factor of the layout is less than this threshold. Set to 0 to never stop.</p>\n","default":1},"barnesHutOptimize":{"type":["boolean"],"description":"<p>Whether to enable [Barnes Hut] (<a href=\"https://en.wikipedia.org/wiki/Barnes%E2%80%93Hut_simulation\" target=\"_blank\">https://en.wikipedia.org/wiki/Barnes%E2%80%93Hut_simulation</a>) optimization, valid when <a href=\"#series-graphGL.forceAtlas2.GPU\">forceAtlas2.GPU</a> is false.</p>\n<p>The default is on when the number of nodes > 1000.</p>\n"},"repulsionByDegree":{"type":["number"],"description":"<p>Whether to calculate the repulsion factor of the node according to the degree of nodes, it is recommended to turn it on.</p>\n","default":true},"linLogMode":{"type":["boolean"],"description":"<p>Whether it is the <code class=\"codespan\">lin-log</code> mode. The <code class=\"codespan\">lin-log</code> mode makes the nodes of the cluster more compact.</p>\n","default":false},"gravity":{"type":["number"],"description":"<p>The gravity that the node is subjected to. This force will make the nodes close to the center.</p>\n","default":1},"gravityCenter":{"type":["Array"],"description":"<p>The position of the gravity center. By default, is the middle point of the initial position.</p>\n"},"scaling":{"type":["number"],"description":"<p>The scaling factor of the layout. The larger the value, the greater the repulsive force between the nodes.</p>\n"},"edgeWeightInfluence":{"type":["number"],"description":"<p>The influence factor of the edge weight. The larger the value, the greater the effect of edge weight on gravity.</p>\n<p>Note: This factor is exponential, so it is invalid when the edge weights are <code class=\"codespan\">0</code> and <code class=\"codespan\">1</code>.</p>\n","default":1},"edgeWeight":{"type":["Array","number"],"description":"<p>The weight distribution of the edges. Mapped from <a href=\"#series-graphGL.links.value\">links.value</a>.</p>\n<p>Support is set to a single number, which is the uniform weight value.</p>\n","default":"[1, 4]"},"nodeWeight":{"type":["Array","number"],"description":"<p>The weight distribution of the nodes. Mapped from <a href=\"#series-graphGL.nodes.value\">nodes.value</a>.</p>\n<p>Support is set to a single number, which is the uniform weight value.</p>\n","default":"[1, 4]"},"preventOverlap":{"type":["boolean"],"description":"<p>Whether to prevent the nodes from overlapping.</p>\n","default":false}}},"symbol":{"type":["string"],"description":"<p>The shape of the scatter. The default is a circle.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">'circle'</code>, <code class=\"codespan\">'rect'</code>, <code class=\"codespan\">'roundRect'</code>, <code class=\"codespan\">'triangle'</code>, <code class=\"codespan\">'diamond'</code>, <code class=\"codespan\">'pin'</code>, <code class=\"codespan\">'arrow'</code>, <code class=\"codespan\">'none'</code></p>\n<p>Icons can be set to arbitrary vector path via <code class=\"codespan\">'path://'</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n","default":"'circle'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p> symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":5},"itemStyle":{"type":["Object"],"description":"<p>The style settings for the node.</p>\n","properties":{"color":{"type":["string"],"description":"<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n","default":"adaptive"},"opacity":{"type":["number"],"description":"<p>The opacity of the graphic.</p>\n","default":1},"borderWidth":{"type":["number"],"description":"<p>Sets the width of the border.</p>\n","default":0},"borderColor":{"type":["string"],"description":"<p>Sets the color of the border.</p>\n","default":"'#fff'"}}},"lineStyle":{"type":["Object"],"description":"<p>The style setting of the relationship line.</p>\n","properties":{"color":{"type":["string"],"description":"<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-js\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n","default":"#aaa"},"opacity":{"type":["number"],"description":"<p>The opacity of the line.</p>\n","default":1},"width":{"type":["number"],"description":"<p>The width of the line.</p>\n","default":1}}},"data":{"type":["Array"],"description":"<p>The data set of the node.</p>\n<p>The data format is the same as <a href=\"http://echarts.baidu.com/option.html#series-graph.data\" target=\"_blank\">graph.data</a></p>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>The name of the data item.</p>\n"},"value":{"type":["number","Array"],"description":"<p>Data item value.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>The style of a single node.</p>\n","properties":{"color":{"type":["string"],"description":"<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n","default":"adaptive"},"opacity":{"type":["number"],"description":"<p>The opacity of the graphic.</p>\n","default":1},"borderWidth":{"type":["number"],"description":"<p>Sets the width of the border.</p>\n","default":0},"borderColor":{"type":["string"],"description":"<p>Sets the color of the border.</p>\n","default":"'#fff'"}}}}}},"nodes":{"type":["Array"],"description":"<p>Same as <a href=\"#series-graphGL.data\">graphGL.data</a>.</p>\n"},"links":{"type":["Array"],"description":"<p>Relational data between nodes.\nThe data format is the same as <a href=\"http://echarts.baidu.com/option.html#series-graph.links\" target=\"_blank\">graph.links</a></p>\n","items":{"type":"Object","properties":{"source":{"type":["string"],"description":"<p>A string of source node names for edges also supports the use of numbers to represent the index of the source node.</p>\n"},"target":{"type":["string"],"description":"<p>A string of the target node name for the edge, which also supports the use of numbers to represent the index of the source node.</p>\n"},"value":{"type":["number"],"description":"<p>The value of the edge.</p>\n"},"lineStyle":{"type":["Object"],"description":"<p>The style of a single edge.</p>\n","properties":{"color":{"type":["string"],"description":"<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-js\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n","default":"#aaa"},"opacity":{"type":["number"],"description":"<p>The opacity of the line.</p>\n","default":1},"width":{"type":["number"],"description":"<p>The width of the line.</p>\n","default":1}}}}}},"edges":{"type":["Array"],"description":"<p>Same as <a href=\"#series-graphGL.links\">graphGL.links</a></p>\n"},"zlevel":{"type":["number"],"description":"<p>The layer in which the component is located.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> 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 <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid the crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n<p><strong>Note:</strong> The layers of the components in echarts-gl need to be separated from the layers of the components in echarts. The same <code class=\"codespan\">zlevel</code> cannot be used for both WebGL and Canvas drawing at the same time.</p>\n","default":10}}},{"type":["Object"],"description":"<p>The <code class=\"codespan\">flowGL</code> component visualizes the traces of the vector field through the particle effects implemented by WebGL.</p>\n<p>The figure below shows the effect of the global wind field visualized by <code class=\"codespan\">flowGL</code>.</p>\n<p><img width=\"700\" height=\"auto\" src=\"documents/asset/gl/img/flowGL-wind.jpg\"></p>\n","properties":{"type":{"type":["string"],"description":"","default":"'flowGL'"},"particleDensity":{"type":["number"],"description":"<p>The density of the particles. The actual number of particles is the square of the set number. The higher the particle density, the better the trace effect, but the greater the performance overhead. In addition to this property, you can get a clearer and more consistent trace using <a href=\"#series-flowGL.particleType\">particleType</a>.</p>\n","default":128},"particleType":{"type":["string"],"description":"<p>The type of particle. The default is <code class=\"codespan\">'point'</code>, which can be set to <code class=\"codespan\">'line'</code>. Line-type particles connect the position of the last motion to the position of the current motion with a line, which makes the trajectory more consistent.</p>\n<p>The following are the differences between the types of <code class=\"codespan\"></code>point'<code class=\"codespan\">and</code>'line'`.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/flowGL-point.jpg\" width=\"100%\" title=\"Point\"><img />\n <img src=\"documents/asset/gl/img/flowGL-line.jpg\" width=\"100%\" title=\"Line\"><img />\n<div />\n","default":"'point'"},"particleSize":{"type":["number"],"description":"<p>The size of the particle. If <a href=\"#series-flowGL.particleType\">particleType</a> is <code class=\"codespan\">'line'</code>, will be expressed as a line width.</p>\n","default":1},"particleSpeed":{"type":["number"],"description":"<p>The speed of the particle, the default is 1. Note that when <a href=\"#series-flowGL.particleType\">particleType</a> is <code class=\"codespan\">'point'</code>, the excessive speed will make the entire track become intermittent.</p>\n","default":1},"particleTrail":{"type":["number"],"description":"<p>The length of the track of the particle. The larger the value, the longer the track.</p>\n","default":2},"supersampling":{"type":["number"],"description":"<p>The oversampling ratio of the picture, using the '4' supersampling can effectively improve the sharpness of the picture and reduce the picture sawtooth. However, because there is a need to process more pixels, there is a higher performance requirement.</p>\n<p>The following are the differences between no oversampling and a supersampling value of 4.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/flowGL-noss.jpg\" width=\"100%\" title=\"No supersampling\"><img />\n <img src=\"documents/asset/gl/img/flowGL-ss.jpg\" width=\"100%\" title=\"Supersampling=4\"><img />\n<div />\n","default":1},"gridWidth":{"type":["number","string"],"description":"<p>The number of grid widths of the incoming grid data. <code class=\"codespan\">flowGL</code> will create a floating-point texture of the stored vector field based on this value and <a href=\"#series-flowGL.gridHeight\">gridHeight</a> for the particle's trajectory calculation.</p>\n","default":"'auto'"},"gridHeight":{"type":["number","string"],"description":"<p>The number of grid heights of incoming grid data.</p>\n","default":"'auto'"},"data":{"type":["Array"],"description":"<p>The data of the vector field, including the position of the vector and the direction of the vector (including the size). <code class=\"codespan\">flowGL</code> has no mandatory requirements for the order in which data is stored. You can even pass in sparse vector data.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">data: [\n // Each data item contains four values representing the lng, lat of the position and the speed sLng, sLat on the corresponding dimension.\n // If it is in a Cartesian coordinate system, it is the position x, y and the speed in the corresponding dimension sx, sy\n [0, 0, 1, 1], [1, 0, 1, 1],\n [0, 1, 1, 1], [1, 1, 1, 1]\n];\n</code></pre>\n<p>The default <code class=\"codespan\">flowGL</code> will automatically calculate <a href=\"#series-flowGL.gridWidth\">gridWidth</a> and <a href=\"#series-flowGL.gridHeight\">gridHeight</a> based on the regular grid data. But because flowGL also supports relatively sparse data formats, you can also specify these two values manually.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>The style of the vector field trace.</p>\n","properties":{"color":{"type":["string"],"description":"<p>The color of the vector field trace. More is to encode the size of the vector through the <code class=\"codespan\">visualMap</code> component as demonstrated in the figure above.</p>\n","default":"'#fff'"},"opacity":{"type":["number"],"description":"<p>Transparency of vector field traces.</p>\n","default":0.8}}}}}]},"description":"<p>Series list. Each series decides its diagram type through <code class=\"codespan\">type</code>.</p>\n<p>ECharts-gl adds a rich 3D visualization type.\nIncluding [3D bar] (~series.bar3D), [3D scatter] (~series.scatter3D), [3D lines] (~series.lines3D), [surface] (~series. Surface),\nMost visualization types can be used in a variety of coordinate system components, and are well integrated with the original echarts legend, tooltip, and other interactive components.</p>\n<p>At the same time, more functional enhancements have been made to the original 2D chart. For example, for scatter chart and diagrams of large amounts of data, you can use <a href=\"#series.scatterGL\">scatterGL</a>, <a href=\"#series.graphGL\">graphGL</a> provided in echarts-gl to speed up drawing and operations.</p>\n"}}}} |