| {"$schema":"http://echarts.baidu.com/doc/json-schem","option":{"type":"Object","properties":{"globe":{"type":["Object"],"description":"<p>地球组件。组件提供了地球的绘制以及相应的坐标系，开发者可以在上面展示三维的散点图，气泡图，柱状图，飞线图。</p>\n","properties":{"show":{"type":["boolean"],"default":true},"globeRadius":{"type":["number"],"default":100},"globeOuterRadius":{"type":["number"],"default":150},"environment":{"type":["string"],"default":"'auto'"},"baseTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement","EChartsInstance"]},"heightTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"]},"displacementTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"]},"displacementScale":{"type":["number"],"default":0},"displacementQuality":{"type":["string"],"default":"'medium'"},"shading":{"type":["string"]},"realisticMaterial":{"type":["Object"],"description":"<p>真实感材质相关的配置项，在 <a href=\"#globe.shading\">shading</a> 为<code>'realistic'</code>时有效。</p>\n","properties":{"detailTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"]},"textureTiling":{"type":["number"],"default":1},"textureOffset":{"type":["number"],"default":0},"roughness":{"type":["number","string","HTMLImageElement","HTMLCanvasElement"],"default":0.5},"metalness":{"type":["number","string","HTMLImageElement","HTMLCanvasElement"],"default":0},"roughnessAdjust":{"type":["number"],"default":0.5},"metalnessAdjust":{"type":["number"],"default":0.5},"normalTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"]}}},"lambertMaterial":{"type":["Object"],"description":"<p>lambert 材质相关的配置项，在 <a href=\"#globe.shading\">shading</a> 为<code>'lambert'</code>时有效。</p>\n","properties":{"detailTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"]},"textureTiling":{"type":["number"],"default":1},"textureOffset":{"type":["number"],"default":0}}},"colorMaterial":{"type":["Object"],"description":"<p>color 材质相关的配置项，在 <a href=\"#globe.shading\">shading</a> 为<code>'color'</code>时有效。</p>\n","properties":{"detailTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"]},"textureTiling":{"type":["number"],"default":1},"textureOffset":{"type":["number"],"default":0}}},"light":{"type":["Object"],"description":"<p>光照相关的设置。在 <a href=\"#globe.shading\">shading</a> 为 <code>'color'</code> 的时候无效。</p>\n<p>光照的设置会影响到组件以及组件所在坐标系上的所有图表。</p>\n<p>合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。</p>\n","properties":{"main":{"type":["Object"],"description":"<p>场景主光源的设置，在 <a href=\"#globe\">globe</a> 组件中就是太阳光。</p>\n","properties":{"color":{"type":["string"],"default":"#fff"},"intensity":{"type":["number"],"default":1},"shadow":{"type":["boolean"],"default":false},"shadowQuality":{"type":["string"],"default":"'medium'"},"alpha":{"type":["number"],"default":0},"beta":{"type":["number"],"default":0},"time":{"type":["Date"]}}},"ambient":{"type":["Object"],"description":"<p>全局的环境光设置。</p>\n","properties":{"color":{"type":["string"],"default":"#fff"},"intensity":{"type":["number"],"default":0.2}}},"ambientCubemap":{"type":["Object"],"description":"<p>ambientCubemap 会使用纹理作为光源的环境光， 会为物体提供漫反射和高光反射。可以通过 <a href=\"#globe.light.ambientCubemap.diffuseIntensity\">diffuseIntensity</a> 和 <a href=\"#globe.light.ambientCubemap.specularIntensity\">specularIntensity</a> 分别设置漫反射强度和高光反射强度。</p>\n","properties":{"texture":{"type":["string"]},"diffuseIntensity":{"type":["number"],"default":0.5},"specularIntensity":{"type":["number"],"default":0.5}}}}},"postEffect":{"type":["Object"],"description":"<p>后处理特效的相关配置，后处理特效可以为画面添加高光，景深，环境光遮蔽（SSAO），调色等效果。可以让整个画面更富有质感。</p>\n<p>下面分别是关闭和开启 <code>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\">\n <img src=\"documents/asset/gl/img/globe-posteffect-enable.png\" width=\"100%\" title=\"Enable\">\n</div>\n\n<p>注意在开启 postEffect 的时候默认会开启 <a href=\"#globe.temporalSuperSampling\">temporalSuperSampling</a> 在画面静止后持续对画面增强，包括抗锯齿，景深，SSAO，阴影等。</p>\n","properties":{"enable":{"type":["boolean"],"default":false},"bloom":{"type":["Object"],"description":"<p>高光特效。高光特效用来表现很“亮”的颜色，因为传统的 RGB 只能表现<code>0 - 255</code>范围的颜色，所以对于超出这个范围特别“亮”的颜色，会通过这种高光溢出的特效去表现。如下图</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/globe-posteffect-bloom.png\"></p>\n","properties":{"enable":{"type":["boolean"],"default":false},"bloomIntensity":{"type":["number"],"default":0.1}}},"depthOfField":{"type":["Object"],"description":"<p>景深效果。景深效果是模拟摄像机的光学成像效果，在对焦的区域相对清晰，原理对焦的区域则会逐渐模糊。</p>\n<p>景深效果可以让观察者几种注意力到对焦的区域，而且让画面的镜头感更强，大景深还能塑造出微距的模型效果。</p>\n<p>下面分别是关闭和开启景深的区别。</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-no-dof.png\" width=\"100%\" title=\"Disable\">\n <img src=\"documents/asset/gl/img/geo-dof.png\" width=\"100%\" title=\"Enable\">\n</div>\n","properties":{"enable":{"type":["boolean"],"default":false},"focalDistance":{"type":["boolean"],"default":50},"focalRange":{"type":["boolean"],"default":20},"fstop":{"type":["number"],"default":2.8},"blurRadius":{"type":["number"],"default":10}}},"screenSpaceAmbientOcclusion":{"type":["Object"]},"SSAO":{"type":["Object"],"description":"<p>同 <a href=\"#globe.postEffect.screenSpaceAmbientOcclusion\">screenSpaceAmbientOcclusion</a></p>\n","properties":{"enable":{"type":["boolean"],"default":false},"quality":{"type":["string"],"default":"'medium'"},"radius":{"type":["number"],"default":2},"intensity":{"type":["number"],"default":1}}},"colorCorrection":{"type":["Object"],"description":"<p>颜色纠正和调整。类似 Photoshop 中的 Color Adjustments</p>\n<p>下图同个场景调整为冷色系和暖色系的区别。</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/buildings-cold.jpg\" width=\"100%\" title=\"Cold\">\n <img src=\"documents/asset/gl/img/buildings-warm.jpg\" width=\"100%\" title=\"Warm\">\n</div>\n\n","properties":{"enable":{"type":["boolean"],"default":true},"lookupTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"]},"exposure":{"type":["number"],"default":0},"brightness":{"type":["number"],"default":0},"contrast":{"type":["number"],"default":1},"saturation":{"type":["number"],"default":1}}},"FXAA":{"type":["Object"],"description":"<p>在开启 <a href=\"#globe.postEffect\">postEffect</a> 后，WebGL 默认的 MSAA 会无法使用。这时候通过 FXAA 可以廉价方便的解决抗锯齿的问题，FXAA 会对一些场景的边缘部分进行模糊从而解决锯齿的问题，这在一些场景上效果还不错，但是在 echarts-gl 中，需要保证很多文字和线条边缘的锐利清晰，因此 FXAA 并不是那么适用。这时候我们可以通过如下设置更高的<code>devicePixelRatio</code>来使用超采样</p>\n<pre><code class=\"lang-js\">var chart = echarts.init(dom, null, {\n devicePixelRatio: 2\n})\n</code></pre>\n<p>但是这种方法对电脑性能有很高的要求，所以更多时候我们建议使用 echarts-gl 中的 <a href=\"#globe.temporalSuperSampling\">temporalSuperSampling</a>，在画面静止后会持续分帧对一个像素多次抖动采样，从而达到超采样抗锯齿的效果。</p>\n","properties":{"enable":{"type":["boolean"],"default":false}}}}},"temporalSuperSampling":{"type":["Object"],"description":"<p>分帧超采样。在开启 <a href=\"#globe.postEffect\">postEffect</a> 后，WebGL 默认的 MSAA 会无法使用，所以我们需要自己解决锯齿的问题。</p>\n<p>分帧超采样就是用来解决锯齿的问题，它在画面静止后会持续分帧对一个像素多次抖动采样，从而达到抗锯齿的效果。而且在这个分帧采样的过程中，echarts-gl 也会对 <a href=\"#globe.postEffect\">postEffect</a> 中一些需要采样保证效果的特效，例如 <a href=\"#globe.postEffect.SSAO\">SSAO</a>, <a href=\"#globe.postEffect.depthOfField\">景深</a>，以及阴影进行渐进增强。</p>\n<p>下面是未开启和开启<code>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\">\n <img src=\"documents/asset/gl/img/surface-taa.png\" width=\"100%\" title=\"AA\">\n</div>\n","properties":{"enable":{"type":["boolean"],"default":"'auto'"}}},"viewControl":{"type":["Object"],"description":"<p><code>viewControl</code>用于鼠标的旋转，缩放等视角控制。</p>\n","properties":{"projection":{"type":["string"],"default":"perspective"},"autoRotate":{"type":["boolean"],"default":false},"autoRotateDirection":{"type":["string"],"default":"cw"},"autoRotateSpeed":{"type":["number"],"default":10},"autoRotateAfterStill":{"type":["number"],"default":3},"damping":{"type":["number"],"default":0.8},"rotateSensitivity":{"type":["number","Array"],"default":1},"zoomSensitivity":{"type":["number"],"default":1},"panSensitivity":{"type":["number"],"default":0},"panMouseButton":{"type":["string"],"default":"left"},"rotateMouseButton":{"type":["string"],"default":"middle"},"distance":{"type":["number"],"default":150},"minDistance":{"type":["number"],"default":40},"maxDistance":{"type":["number"],"default":400},"orthographicSize":{"type":["number"],"default":150},"maxOrthographicSize":{"type":["number"],"default":20},"minOrthographicSize":{"type":["number"],"default":400},"alpha":{"type":["number"],"default":0},"beta":{"type":["number"],"default":0},"center":{"type":["Array"]},"minAlpha":{"type":["number"],"default":-90},"maxAlpha":{"type":["number"],"default":90},"minBeta":{"type":["number"],"default":null},"maxBeta":{"type":["number"],"default":null},"animation":{"type":["boolean"],"default":true},"animationDurationUpdate":{"type":["number"],"default":1000},"animationEasingUpdate":{"type":["string"],"default":"cubicInOut"},"targetCoord":{"type":["Array"]}}},"layers":{"type":["Array"],"description":"<p>地球表面层的配置，你可以使用该配置项加入云层，或者对 <a href=\"#globe.baseTexture\">baseTexture</a> 进行补充绘制出国家的轮廓等等。</p>\n","items":{"type":"Object","properties":{"show":{"type":["boolean"],"default":true},"type":{"type":["string"],"default":"'overlay'"},"name":{"type":["string"]},"blendTo":{"type":["string"],"default":"'albedo'"},"intensity":{"type":["number"],"default":1},"shading":{"type":["string"],"default":"'lambert'"},"distance":{"type":["number"],"default":null},"texture":{"type":["string","HTMLImageElement","HTMLCanvasElement","EChartsInstance"]}}}},"zlevel":{"type":["number"],"default":-10},"left":{"type":["string","number"],"default":"auto"},"top":{"type":["string","number"],"default":"auto"},"right":{"type":["string","number"],"default":"auto"},"bottom":{"type":["string","number"],"default":"auto"},"width":{"type":["string","number"],"default":"auto"},"height":{"type":["string","number"],"default":"auto"}}},"geo3D":{"type":["Object"],"description":"<p>三维的地理坐标系组件。组件提供了三维 GeoJSON 的绘制以及相应的坐标系，开发者可以在上面展示三维的散点图，气泡图，柱状图，飞线图。</p>\n","properties":{"show":{"type":["boolean"],"default":true},"map":{"type":["string"]},"boxWidth":{"type":["number"],"default":100},"boxHeight":{"type":["number"],"default":10},"boxDepth":{"type":["number"],"default":"auto"},"regionHeight":{"type":["number"],"default":3},"environment":{"type":["string"],"default":"'auto'"},"groundPlane":{"type":["Object"],"description":"<p>地面可以让整个组件有个“摆放”的地方，从而使整个场景看起来更真实，更有模型感。</p>\n<p><code>groundPlane</code> 下支持设置单独的 <code>realisticMaterial</code>, <code>colorMaterial</code>, <code>lambertMaterial</code> 等材质。如果不设置则默认取组件下的材质参数。</p>\n","properties":{"show":{"type":["boolean"],"default":false},"color":{"type":["string"],"default":"'#aaa'"}}},"instancing":{"type":["boolean"],"default":false},"label":{"type":["Object"],"description":"<p>标签的相关设置。</p>\n","properties":{"show":{"type":["boolean"],"default":false},"distance":{"type":["number"]},"formatter":{"type":["Function","string"]},"textStyle":{"type":["Object"],"description":"<p>标签的字体样式。</p>\n","properties":{"color":{"type":["string"],"default":"\"#fff\""},"borderWidth":{"type":["number"],"default":0},"borderColor":{"type":["string"],"default":"#fff"},"fontFamily":{"type":["string"],"default":"'sans-serif'"},"fontSize":{"type":["number"],"default":12},"fontWeight":{"type":["string"],"default":"normal"}}}}},"itemStyle":{"type":["Object"],"description":"<p>三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。</p>\n","properties":{"color":{"type":["string","Function"],"default":"自适应"},"opacity":{"type":["number"],"default":1},"borderWidth":{"type":["number"],"default":0},"borderColor":{"type":["string"],"default":"#333"}}},"emphasis":{"type":["Object"],"description":"<p>鼠标 hover 高亮时图形和标签的样式</p>\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"default":false},"distance":{"type":["number"],"default":2},"formatter":{"type":["Function","string"]},"textStyle":{"type":["Object"],"description":"<p>标签的字体样式。</p>\n","properties":{"color":{"type":["string"],"default":"#000"},"borderWidth":{"type":["number"],"default":1},"borderColor":{"type":["string"],"default":"#fff"},"fontFamily":{"type":["string"],"default":"'sans-serif'"},"fontSize":{"type":["number"],"default":20},"fontWeight":{"type":["string"],"default":"normal"}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"default":"自适应"},"opacity":{"type":["number"],"default":1}}}}},"regions":{"type":["Array"],"description":"<p>地图区域的设置，</p>\n","items":{"type":"Object","properties":{"name":{"type":["string"]},"regionHeight":{"type":["number"]},"itemStyle":{"type":["Object"],"description":"<p>单个区域的样式设置。</p>\n","properties":{"color":{"type":["string"],"default":"自适应"},"opacity":{"type":["number"],"default":1},"borderWidth":{"type":["number"],"default":0},"borderColor":{"type":["string"],"default":"#333"}}},"label":{"type":["Object"],"description":"<p>单个区域的标签设置。</p>\n","properties":{"show":{"type":["boolean"],"default":false},"distance":{"type":["number"],"default":2},"formatter":{"type":["Function","string"]},"textStyle":{"type":["Object"],"description":"<p>标签的字体样式。</p>\n","properties":{"color":{"type":["string"],"default":"#000"},"borderWidth":{"type":["number"],"default":1},"borderColor":{"type":["string"],"default":"#fff"},"fontFamily":{"type":["string"],"default":"'sans-serif'"},"fontSize":{"type":["number"],"default":20},"fontWeight":{"type":["string"],"default":"normal"}}}}},"emphasis":{"type":["Object"],"description":"<p>单个区域标签和样式的高亮设置。</p>\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"default":"自适应"},"opacity":{"type":["number"],"default":1},"borderWidth":{"type":["number"],"default":0},"borderColor":{"type":["string"],"default":"#333"}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"default":false},"distance":{"type":["number"],"default":2},"formatter":{"type":["Function","string"]},"textStyle":{"type":["Object"],"description":"<p>标签的字体样式。</p>\n","properties":{"color":{"type":["string"],"default":"#000"},"borderWidth":{"type":["number"],"default":1},"borderColor":{"type":["string"],"default":"#fff"},"fontFamily":{"type":["string"],"default":"'sans-serif'"},"fontSize":{"type":["number"],"default":20},"fontWeight":{"type":["string"],"default":"normal"}}}}}}}}}},"shading":{"type":["string"]},"realisticMaterial":{"type":["Object"],"description":"<p>真实感材质相关的配置项，在 <a href=\"#geo3D.shading\">shading</a> 为<code>'realistic'</code>时有效。</p>\n","properties":{"detailTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"]},"textureTiling":{"type":["number"],"default":1},"textureOffset":{"type":["number"],"default":0},"roughness":{"type":["number","string","HTMLImageElement","HTMLCanvasElement"],"default":0.5},"metalness":{"type":["number","string","HTMLImageElement","HTMLCanvasElement"],"default":0},"roughnessAdjust":{"type":["number"],"default":0.5},"metalnessAdjust":{"type":["number"],"default":0.5},"normalTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"]}}},"lambertMaterial":{"type":["Object"],"description":"<p>lambert 材质相关的配置项，在 <a href=\"#geo3D.shading\">shading</a> 为<code>'lambert'</code>时有效。</p>\n","properties":{"detailTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"]},"textureTiling":{"type":["number"],"default":1},"textureOffset":{"type":["number"],"default":0}}},"colorMaterial":{"type":["Object"],"description":"<p>color 材质相关的配置项，在 <a href=\"#geo3D.shading\">shading</a> 为<code>'color'</code>时有效。</p>\n","properties":{"detailTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"]},"textureTiling":{"type":["number"],"default":1},"textureOffset":{"type":["number"],"default":0}}},"light":{"type":["Object"],"description":"<p>光照相关的设置。在 <a href=\"#geo3D.shading\">shading</a> 为 <code>'color'</code> 的时候无效。</p>\n<p>光照的设置会影响到组件以及组件所在坐标系上的所有图表。</p>\n<p>合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。</p>\n","properties":{"main":{"type":["Object"],"description":"<p>场景主光源的设置，在 <a href=\"#globe\">globe</a> 组件中就是太阳光。</p>\n","properties":{"color":{"type":["string"],"default":"#fff"},"intensity":{"type":["number"],"default":1},"shadow":{"type":["boolean"],"default":false},"shadowQuality":{"type":["string"],"default":"'medium'"},"alpha":{"type":["number"],"default":40},"beta":{"type":["number"],"default":40}}},"ambient":{"type":["Object"],"description":"<p>全局的环境光设置。</p>\n","properties":{"color":{"type":["string"],"default":"#fff"},"intensity":{"type":["number"],"default":0.2}}},"ambientCubemap":{"type":["Object"],"description":"<p>ambientCubemap 会使用纹理作为光源的环境光， 会为物体提供漫反射和高光反射。可以通过 <a href=\"#geo3D.light.ambientCubemap.diffuseIntensity\">diffuseIntensity</a> 和 <a href=\"#geo3D.light.ambientCubemap.specularIntensity\">specularIntensity</a> 分别设置漫反射强度和高光反射强度。</p>\n","properties":{"texture":{"type":["string"]},"diffuseIntensity":{"type":["number"],"default":0.5},"specularIntensity":{"type":["number"],"default":0.5}}}}},"postEffect":{"type":["Object"],"description":"<p>后处理特效的相关配置，后处理特效可以为画面添加高光，景深，环境光遮蔽（SSAO），调色等效果。可以让整个画面更富有质感。</p>\n<p>下面分别是关闭和开启 <code>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\">\n <img src=\"documents/asset/gl/img/globe-posteffect-enable.png\" width=\"100%\" title=\"Enable\">\n</div>\n\n<p>注意在开启 postEffect 的时候默认会开启 <a href=\"#geo3D.temporalSuperSampling\">temporalSuperSampling</a> 在画面静止后持续对画面增强，包括抗锯齿，景深，SSAO，阴影等。</p>\n","properties":{"enable":{"type":["boolean"],"default":false},"bloom":{"type":["Object"],"description":"<p>高光特效。高光特效用来表现很“亮”的颜色，因为传统的 RGB 只能表现<code>0 - 255</code>范围的颜色，所以对于超出这个范围特别“亮”的颜色，会通过这种高光溢出的特效去表现。如下图</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/globe-posteffect-bloom.png\"></p>\n","properties":{"enable":{"type":["boolean"],"default":false},"bloomIntensity":{"type":["number"],"default":0.1}}},"depthOfField":{"type":["Object"],"description":"<p>景深效果。景深效果是模拟摄像机的光学成像效果，在对焦的区域相对清晰，原理对焦的区域则会逐渐模糊。</p>\n<p>景深效果可以让观察者几种注意力到对焦的区域，而且让画面的镜头感更强，大景深还能塑造出微距的模型效果。</p>\n<p>下面分别是关闭和开启景深的区别。</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-no-dof.png\" width=\"100%\" title=\"Disable\">\n <img src=\"documents/asset/gl/img/geo-dof.png\" width=\"100%\" title=\"Enable\">\n</div>\n","properties":{"enable":{"type":["boolean"],"default":false},"focalDistance":{"type":["boolean"],"default":50},"focalRange":{"type":["boolean"],"default":20},"fstop":{"type":["number"],"default":2.8},"blurRadius":{"type":["number"],"default":10}}},"screenSpaceAmbientOcclusion":{"type":["Object"]},"SSAO":{"type":["Object"],"description":"<p>同 <a href=\"#geo3D.postEffect.screenSpaceAmbientOcclusion\">screenSpaceAmbientOcclusion</a></p>\n","properties":{"enable":{"type":["boolean"],"default":false},"quality":{"type":["string"],"default":"'medium'"},"radius":{"type":["number"],"default":2},"intensity":{"type":["number"],"default":1}}},"colorCorrection":{"type":["Object"],"description":"<p>颜色纠正和调整。类似 Photoshop 中的 Color Adjustments</p>\n<p>下图同个场景调整为冷色系和暖色系的区别。</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/buildings-cold.jpg\" width=\"100%\" title=\"Cold\">\n <img src=\"documents/asset/gl/img/buildings-warm.jpg\" width=\"100%\" title=\"Warm\">\n</div>\n\n","properties":{"enable":{"type":["boolean"],"default":true},"lookupTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"]},"exposure":{"type":["number"],"default":0},"brightness":{"type":["number"],"default":0},"contrast":{"type":["number"],"default":1},"saturation":{"type":["number"],"default":1}}},"FXAA":{"type":["Object"],"description":"<p>在开启 <a href=\"#geo3D.postEffect\">postEffect</a> 后，WebGL 默认的 MSAA 会无法使用。这时候通过 FXAA 可以廉价方便的解决抗锯齿的问题，FXAA 会对一些场景的边缘部分进行模糊从而解决锯齿的问题，这在一些场景上效果还不错，但是在 echarts-gl 中，需要保证很多文字和线条边缘的锐利清晰，因此 FXAA 并不是那么适用。这时候我们可以通过如下设置更高的<code>devicePixelRatio</code>来使用超采样</p>\n<pre><code class=\"lang-js\">var chart = echarts.init(dom, null, {\n devicePixelRatio: 2\n})\n</code></pre>\n<p>但是这种方法对电脑性能有很高的要求，所以更多时候我们建议使用 echarts-gl 中的 <a href=\"#geo3D.temporalSuperSampling\">temporalSuperSampling</a>，在画面静止后会持续分帧对一个像素多次抖动采样，从而达到超采样抗锯齿的效果。</p>\n","properties":{"enable":{"type":["boolean"],"default":false}}}}},"temporalSuperSampling":{"type":["Object"],"description":"<p>分帧超采样。在开启 <a href=\"#geo3D.postEffect\">postEffect</a> 后，WebGL 默认的 MSAA 会无法使用，所以我们需要自己解决锯齿的问题。</p>\n<p>分帧超采样就是用来解决锯齿的问题，它在画面静止后会持续分帧对一个像素多次抖动采样，从而达到抗锯齿的效果。而且在这个分帧采样的过程中，echarts-gl 也会对 <a href=\"#geo3D.postEffect\">postEffect</a> 中一些需要采样保证效果的特效，例如 <a href=\"#geo3D.postEffect.SSAO\">SSAO</a>, <a href=\"#geo3D.postEffect.depthOfField\">景深</a>，以及阴影进行渐进增强。</p>\n<p>下面是未开启和开启<code>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\">\n <img src=\"documents/asset/gl/img/surface-taa.png\" width=\"100%\" title=\"AA\">\n</div>\n","properties":{"enable":{"type":["boolean"],"default":"'auto'"}}},"viewControl":{"type":["Object"],"description":"<p><code>viewControl</code>用于鼠标的旋转，缩放等视角控制。</p>\n","properties":{"projection":{"type":["string"],"default":"perspective"},"autoRotate":{"type":["boolean"],"default":false},"autoRotateDirection":{"type":["string"],"default":"cw"},"autoRotateSpeed":{"type":["number"],"default":10},"autoRotateAfterStill":{"type":["number"],"default":3},"damping":{"type":["number"],"default":0.8},"rotateSensitivity":{"type":["number","Array"],"default":1},"zoomSensitivity":{"type":["number"],"default":1},"panSensitivity":{"type":["number"],"default":1},"panMouseButton":{"type":["string"],"default":"left"},"rotateMouseButton":{"type":["string"],"default":"middle"},"distance":{"type":["number"],"default":100},"minDistance":{"type":["number"],"default":40},"maxDistance":{"type":["number"],"default":400},"orthographicSize":{"type":["number"],"default":100},"maxOrthographicSize":{"type":["number"],"default":20},"minOrthographicSize":{"type":["number"],"default":400},"alpha":{"type":["number"],"default":40},"beta":{"type":["number"],"default":0},"center":{"type":["Array"]},"minAlpha":{"type":["number"],"default":5},"maxAlpha":{"type":["number"],"default":90},"minBeta":{"type":["number"],"default":-80},"maxBeta":{"type":["number"],"default":80},"animation":{"type":["boolean"],"default":true},"animationDurationUpdate":{"type":["number"],"default":1000},"animationEasingUpdate":{"type":["string"],"default":"cubicInOut"}}},"zlevel":{"type":["number"],"default":-10},"left":{"type":["string","number"],"default":"auto"},"top":{"type":["string","number"],"default":"auto"},"right":{"type":["string","number"],"default":"auto"},"bottom":{"type":["string","number"],"default":"auto"},"width":{"type":["string","number"],"default":"auto"},"height":{"type":["string","number"],"default":"auto"}}},"mapbox3D":{"type":["Object"],"description":"<p>基于 mapbox-gl-js 的地理组件。支持在 mapbox 的地图上绘制三维的散点图，飞线图，柱状图和地图。你可以利用 Mapbox 强大的地图服务和 ECharts GL 丰富的可视化和渲染效果实现你想要的可视化作品。</p>\n<p>在使用 mapbox 组件之前你需要先引入 mapbox 的官方 sdk。</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>然后获取到 mapbox 提供的 token 后设置到 <code>mapbox.accessToken</code> 上。</p>\n<pre><code class=\"lang-js\">mapboxgl.accessToken = '你的 token';\n</code></pre>\n<p>接下来你就可以像使用其它组件一样使用 mapbox 组件了。</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>可以前往 <a href=\"https://www.mapbox.com/mapbox-gl-js/api/\" target=\"_blank\">https://www.mapbox.com/mapbox-gl-js/api/</a> 了解更详细的关于 mapbox-gl-js sdk 的内容。</p>\n","properties":{"style":{"type":["string","Object"]},"center":{"type":["Array"]},"zoom":{"type":["number"]},"bearing":{"type":["number"],"default":0},"pitch":{"type":["number"],"default":0},"altitudeScale":{"type":["number"],"default":1},"shading":{"type":["string"]},"realisticMaterial":{"type":["Object"],"description":"<p>真实感材质相关的配置项，在 <a href=\"#mapbox3D.shading\">shading</a> 为<code>'realistic'</code>时有效。</p>\n","properties":{"detailTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"]},"textureTiling":{"type":["number"],"default":1},"textureOffset":{"type":["number"],"default":0},"roughness":{"type":["number","string","HTMLImageElement","HTMLCanvasElement"],"default":0.5},"metalness":{"type":["number","string","HTMLImageElement","HTMLCanvasElement"],"default":0},"roughnessAdjust":{"type":["number"],"default":0.5},"metalnessAdjust":{"type":["number"],"default":0.5},"normalTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"]}}},"lambertMaterial":{"type":["Object"],"description":"<p>lambert 材质相关的配置项，在 <a href=\"#mapbox3D.shading\">shading</a> 为<code>'lambert'</code>时有效。</p>\n","properties":{"detailTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"]},"textureTiling":{"type":["number"],"default":1},"textureOffset":{"type":["number"],"default":0}}},"colorMaterial":{"type":["Object"],"description":"<p>color 材质相关的配置项，在 <a href=\"#mapbox3D.shading\">shading</a> 为<code>'color'</code>时有效。</p>\n","properties":{"detailTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"]},"textureTiling":{"type":["number"],"default":1},"textureOffset":{"type":["number"],"default":0}}},"light":{"type":["Object"],"description":"<p>光照相关的设置。在 <a href=\"#mapbox3D.shading\">shading</a> 为 <code>'color'</code> 的时候无效。</p>\n<p>光照的设置会影响到组件以及组件所在坐标系上的所有图表。</p>\n<p>合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。</p>\n","properties":{"main":{"type":["Object"],"description":"<p>场景主光源的设置，在 <a href=\"#globe\">globe</a> 组件中就是太阳光。</p>\n","properties":{"color":{"type":["string"],"default":"#fff"},"intensity":{"type":["number"],"default":1},"shadow":{"type":["boolean"],"default":false},"shadowQuality":{"type":["string"],"default":"'medium'"},"alpha":{"type":["number"],"default":40},"beta":{"type":["number"],"default":40}}},"ambient":{"type":["Object"],"description":"<p>全局的环境光设置。</p>\n","properties":{"color":{"type":["string"],"default":"#fff"},"intensity":{"type":["number"],"default":0.2}}},"ambientCubemap":{"type":["Object"],"description":"<p>ambientCubemap 会使用纹理作为光源的环境光， 会为物体提供漫反射和高光反射。可以通过 <a href=\"#mapbox3D.light.ambientCubemap.diffuseIntensity\">diffuseIntensity</a> 和 <a href=\"#mapbox3D.light.ambientCubemap.specularIntensity\">specularIntensity</a> 分别设置漫反射强度和高光反射强度。</p>\n","properties":{"texture":{"type":["string"]},"diffuseIntensity":{"type":["number"],"default":0.5},"specularIntensity":{"type":["number"],"default":0.5}}}}},"postEffect":{"type":["Object"],"description":"<p>后处理特效的相关配置，后处理特效可以为画面添加高光，景深，环境光遮蔽（SSAO），调色等效果。可以让整个画面更富有质感。</p>\n<p>下面分别是关闭和开启 <code>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\">\n <img src=\"documents/asset/gl/img/globe-posteffect-enable.png\" width=\"100%\" title=\"Enable\">\n</div>\n\n<p>注意在开启 postEffect 的时候默认会开启 <a href=\"#mapbox3D.temporalSuperSampling\">temporalSuperSampling</a> 在画面静止后持续对画面增强，包括抗锯齿，景深，SSAO，阴影等。</p>\n","properties":{"enable":{"type":["boolean"],"default":false},"bloom":{"type":["Object"],"description":"<p>高光特效。高光特效用来表现很“亮”的颜色，因为传统的 RGB 只能表现<code>0 - 255</code>范围的颜色，所以对于超出这个范围特别“亮”的颜色，会通过这种高光溢出的特效去表现。如下图</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/globe-posteffect-bloom.png\"></p>\n","properties":{"enable":{"type":["boolean"],"default":false},"bloomIntensity":{"type":["number"],"default":0.1}}},"depthOfField":{"type":["Object"],"description":"<p>景深效果。景深效果是模拟摄像机的光学成像效果，在对焦的区域相对清晰，原理对焦的区域则会逐渐模糊。</p>\n<p>景深效果可以让观察者几种注意力到对焦的区域，而且让画面的镜头感更强，大景深还能塑造出微距的模型效果。</p>\n<p>下面分别是关闭和开启景深的区别。</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-no-dof.png\" width=\"100%\" title=\"Disable\">\n <img src=\"documents/asset/gl/img/geo-dof.png\" width=\"100%\" title=\"Enable\">\n</div>\n","properties":{"enable":{"type":["boolean"],"default":false},"focalDistance":{"type":["boolean"],"default":50},"focalRange":{"type":["boolean"],"default":20},"fstop":{"type":["number"],"default":2.8},"blurRadius":{"type":["number"],"default":10}}},"screenSpaceAmbientOcclusion":{"type":["Object"]},"SSAO":{"type":["Object"],"description":"<p>同 <a href=\"#mapbox3D.postEffect.screenSpaceAmbientOcclusion\">screenSpaceAmbientOcclusion</a></p>\n","properties":{"enable":{"type":["boolean"],"default":false},"quality":{"type":["string"],"default":"'medium'"},"radius":{"type":["number"],"default":2},"intensity":{"type":["number"],"default":1}}},"colorCorrection":{"type":["Object"],"description":"<p>颜色纠正和调整。类似 Photoshop 中的 Color Adjustments</p>\n<p>下图同个场景调整为冷色系和暖色系的区别。</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/buildings-cold.jpg\" width=\"100%\" title=\"Cold\">\n <img src=\"documents/asset/gl/img/buildings-warm.jpg\" width=\"100%\" title=\"Warm\">\n</div>\n\n","properties":{"enable":{"type":["boolean"],"default":true},"lookupTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"]},"exposure":{"type":["number"],"default":0},"brightness":{"type":["number"],"default":0},"contrast":{"type":["number"],"default":1},"saturation":{"type":["number"],"default":1}}},"FXAA":{"type":["Object"],"description":"<p>在开启 <a href=\"#mapbox3D.postEffect\">postEffect</a> 后，WebGL 默认的 MSAA 会无法使用。这时候通过 FXAA 可以廉价方便的解决抗锯齿的问题，FXAA 会对一些场景的边缘部分进行模糊从而解决锯齿的问题，这在一些场景上效果还不错，但是在 echarts-gl 中，需要保证很多文字和线条边缘的锐利清晰，因此 FXAA 并不是那么适用。这时候我们可以通过如下设置更高的<code>devicePixelRatio</code>来使用超采样</p>\n<pre><code class=\"lang-js\">var chart = echarts.init(dom, null, {\n devicePixelRatio: 2\n})\n</code></pre>\n<p>但是这种方法对电脑性能有很高的要求，所以更多时候我们建议使用 echarts-gl 中的 <a href=\"#mapbox3D.temporalSuperSampling\">temporalSuperSampling</a>，在画面静止后会持续分帧对一个像素多次抖动采样，从而达到超采样抗锯齿的效果。</p>\n","properties":{"enable":{"type":["boolean"],"default":false}}}}},"temporalSuperSampling":{"type":["Object"],"description":"<p>分帧超采样。在开启 <a href=\"#mapbox3D.postEffect\">postEffect</a> 后，WebGL 默认的 MSAA 会无法使用，所以我们需要自己解决锯齿的问题。</p>\n<p>分帧超采样就是用来解决锯齿的问题，它在画面静止后会持续分帧对一个像素多次抖动采样，从而达到抗锯齿的效果。而且在这个分帧采样的过程中，echarts-gl 也会对 <a href=\"#mapbox3D.postEffect\">postEffect</a> 中一些需要采样保证效果的特效，例如 <a href=\"#mapbox3D.postEffect.SSAO\">SSAO</a>, <a href=\"#mapbox3D.postEffect.depthOfField\">景深</a>，以及阴影进行渐进增强。</p>\n<p>下面是未开启和开启<code>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\">\n <img src=\"documents/asset/gl/img/surface-taa.png\" width=\"100%\" title=\"AA\">\n</div>\n","properties":{"enable":{"type":["boolean"],"default":"'auto'"}}}}},"grid3D":{"type":["Object"],"description":"<p>三维笛卡尔坐标系组件。需要和 <a href=\"#xAxis3D\">xAxis3D</a>，<a href=\"#yAxis3D\">yAxis3D</a>，<a href=\"#zAxis3D\">zAxis3D</a> 三个坐标轴组件一起使用。</p>\n<p>可以在三维笛卡尔坐标系上绘制<a href=\"#series-line3D\">三维折线图</a>，<a href=\"#series-bar3D\">三维柱状图</a>，<a href=\"#series-scatter3D\">三维散点/气泡图</a>，<a href=\"#series-surface\">曲面图</a>。</p>\n<p>你可以设置 <a href=\"#grid3D.postEffect\">postEffect</a>, <a href=\"#grid3D.light\">light</a> 等配置项提升<code>grid3D</code>中三维图表的显示效果。</p>\n<p>下面是 grid3D 中坐标轴配置项的说明。</p>\n<p><img width=\"700\" height=\"auto\" src=\"documents/asset/gl/img/grid3D.png\"></p>\n<hr>\n<blockquote>\n<p><strong>注意：</strong> <a href=\"#xAxis3D\">xAxis3D</a>，<a href=\"#yAxis3D\">yAxis3D</a>，<a href=\"#zAxis3D\">zAxis3D</a> 上单独设置的<code>axisLine</code>, <code>axisTick</code>, <code>axisLabel</code>, <code>splitLine</code>, <code>splitArea</code>, <code>axisPointer</code>会覆盖<code>grid3D</code>下的相应配置项。</p>\n</blockquote>\n","properties":{"show":{"type":["boolean"]},"boxWidth":{"type":["number"],"default":100},"boxHeight":{"type":["number"],"default":100},"boxDepth":{"type":["number"],"default":100},"axisLine":{"type":["Object"],"description":"<p>坐标轴轴线相关设置。</p>\n","properties":{"show":{"type":["boolean"],"default":true},"interval":{"type":["number","Function"],"default":"'auto'"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"default":"'#333'"},"opacity":{"type":["number"],"default":1},"width":{"type":["number"],"default":2}}}}},"axisLabel":{"type":["Object"],"description":"<p>坐标轴刻度标签的相关设置。</p>\n","properties":{"show":{"type":["boolean"],"default":true},"margin":{"type":["number"],"default":8},"interval":{"type":["number","Function"],"default":"'auto'"},"formatter":{"type":["string","Function"],"default":null},"textStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color","Function"]},"borderWidth":{"type":["number"],"default":0},"borderColor":{"type":["string"],"default":"#fff"},"fontFamily":{"type":["string"],"default":"'sans-serif'"},"fontSize":{"type":["number"],"default":12},"fontWeight":{"type":["string"],"default":"normal"}}}}},"axisTick":{"type":["Object"],"description":"<p>坐标轴刻度相关设置。</p>\n","properties":{"show":{"type":["boolean"],"default":true},"interval":{"type":["number","Function"],"default":"'auto'"},"length":{"type":["number"],"default":5},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"]},"opacity":{"type":["number"],"default":1},"width":{"type":["number"],"default":1}}}}},"splitLine":{"type":["Object"],"description":"<p>坐标轴在 <a href=\"#grid3D\">grid3D</a> 的平面上的分隔线。</p>\n","properties":{"show":{"type":["boolean"],"default":true},"interval":{"type":["number","Function"],"description":"<p>坐标轴分隔线的显示间隔，在类目轴中有效。默认同 <a href=\"#.axisLabel.interval\">axisLabel.interval</a> 一样。</p>\n<p>默认会自动计算<code>interval</code>以保证较好的展示效果。</p>\n<p>可以设置成 0 强制显示所有标签。</p>\n<p>如果设置为 <code>1</code>，表示『隔一个标签显示一个标签』，如果值为 <code>2</code>，表示隔两个标签显示一个标签，以此类推。</p>\n<p>可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：</p>\n<pre><code class=\"lang-js\">(index:number, value: string) => boolean\n</code></pre>\n<p>第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 <code>false</code>。</p>\n","default":"'auto'","properties":{"color":{"type":["Array","string"],"default":"['#ccc']"},"opacity":{"type":["number"],"default":1},"width":{"type":["number"],"default":1}}}}},"splitArea":{"type":["Object"],"description":"<p>坐标轴在 <a href=\"#grid3D\">grid3D</a> 的平面上的分隔区域。</p>\n","properties":{"show":{"type":["boolean"],"default":true},"interval":{"type":["number","Function"],"default":"'auto'"},"areaStyle":{"type":["Object"],"description":"<p>分隔区域的样式设置。</p>\n","properties":{"color":{"type":["Array"],"default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']"}}}}},"axisPointer":{"type":["Object"],"description":"<p>坐标轴指示线。</p>\n","properties":{"show":{"type":["boolean"],"default":true},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"default":"'rgba(0, 0, 0, 0.8)'"},"opacity":{"type":["number"],"default":1},"width":{"type":["number"],"default":1}}},"label":{"type":["Object"],"description":"<p>指示线标签。</p>\n","properties":{"show":{"type":["boolean"],"default":true},"formatter":{"type":["Function"]},"margin":{"type":["number"]},"textStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"default":"\"#fff\""},"borderWidth":{"type":["number"],"default":0},"borderColor":{"type":["string"],"default":"#fff"},"fontFamily":{"type":["string"],"default":"'sans-serif'"},"fontSize":{"type":["number"],"default":16},"fontWeight":{"type":["string"],"default":"normal"}}}}}}},"environment":{"type":["string"],"default":"'auto'"},"light":{"type":["Object"],"description":"<p>光照相关的设置。在 <a href=\"#grid3D.shading\">shading</a> 为 <code>'color'</code> 的时候无效。</p>\n<p>光照的设置会影响到组件以及组件所在坐标系上的所有图表。</p>\n<p>合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。</p>\n","properties":{"main":{"type":["Object"],"description":"<p>场景主光源的设置，在 <a href=\"#globe\">globe</a> 组件中就是太阳光。</p>\n","properties":{"color":{"type":["string"],"default":"#fff"},"intensity":{"type":["number"],"default":1},"shadow":{"type":["boolean"],"default":false},"shadowQuality":{"type":["string"],"default":"'medium'"},"alpha":{"type":["number"],"default":30},"beta":{"type":["number"],"default":30}}},"ambient":{"type":["Object"],"description":"<p>全局的环境光设置。</p>\n","properties":{"color":{"type":["string"],"default":"#fff"},"intensity":{"type":["number"],"default":0.2}}},"ambientCubemap":{"type":["Object"],"description":"<p>ambientCubemap 会使用纹理作为光源的环境光， 会为物体提供漫反射和高光反射。可以通过 <a href=\"#grid3D.light.ambientCubemap.diffuseIntensity\">diffuseIntensity</a> 和 <a href=\"#grid3D.light.ambientCubemap.specularIntensity\">specularIntensity</a> 分别设置漫反射强度和高光反射强度。</p>\n","properties":{"texture":{"type":["string"]},"diffuseIntensity":{"type":["number"],"default":0.5},"specularIntensity":{"type":["number"],"default":0.5}}}}},"postEffect":{"type":["Object"],"description":"<p>后处理特效的相关配置，后处理特效可以为画面添加高光，景深，环境光遮蔽（SSAO），调色等效果。可以让整个画面更富有质感。</p>\n<p>下面分别是关闭和开启 <code>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\">\n <img src=\"documents/asset/gl/img/globe-posteffect-enable.png\" width=\"100%\" title=\"Enable\">\n</div>\n\n<p>注意在开启 postEffect 的时候默认会开启 <a href=\"#grid3D.temporalSuperSampling\">temporalSuperSampling</a> 在画面静止后持续对画面增强，包括抗锯齿，景深，SSAO，阴影等。</p>\n","properties":{"enable":{"type":["boolean"],"default":false},"bloom":{"type":["Object"],"description":"<p>高光特效。高光特效用来表现很“亮”的颜色，因为传统的 RGB 只能表现<code>0 - 255</code>范围的颜色，所以对于超出这个范围特别“亮”的颜色，会通过这种高光溢出的特效去表现。如下图</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/globe-posteffect-bloom.png\"></p>\n","properties":{"enable":{"type":["boolean"],"default":false},"bloomIntensity":{"type":["number"],"default":0.1}}},"depthOfField":{"type":["Object"],"description":"<p>景深效果。景深效果是模拟摄像机的光学成像效果，在对焦的区域相对清晰，原理对焦的区域则会逐渐模糊。</p>\n<p>景深效果可以让观察者几种注意力到对焦的区域，而且让画面的镜头感更强，大景深还能塑造出微距的模型效果。</p>\n<p>下面分别是关闭和开启景深的区别。</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-no-dof.png\" width=\"100%\" title=\"Disable\">\n <img src=\"documents/asset/gl/img/geo-dof.png\" width=\"100%\" title=\"Enable\">\n</div>\n","properties":{"enable":{"type":["boolean"],"default":false},"focalDistance":{"type":["boolean"],"default":50},"focalRange":{"type":["boolean"],"default":20},"fstop":{"type":["number"],"default":2.8},"blurRadius":{"type":["number"],"default":10}}},"screenSpaceAmbientOcclusion":{"type":["Object"]},"SSAO":{"type":["Object"],"description":"<p>同 <a href=\"#grid3D.postEffect.screenSpaceAmbientOcclusion\">screenSpaceAmbientOcclusion</a></p>\n","properties":{"enable":{"type":["boolean"],"default":false},"quality":{"type":["string"],"default":"'medium'"},"radius":{"type":["number"],"default":2},"intensity":{"type":["number"],"default":1}}},"colorCorrection":{"type":["Object"],"description":"<p>颜色纠正和调整。类似 Photoshop 中的 Color Adjustments</p>\n<p>下图同个场景调整为冷色系和暖色系的区别。</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/buildings-cold.jpg\" width=\"100%\" title=\"Cold\">\n <img src=\"documents/asset/gl/img/buildings-warm.jpg\" width=\"100%\" title=\"Warm\">\n</div>\n\n","properties":{"enable":{"type":["boolean"],"default":true},"lookupTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"]},"exposure":{"type":["number"],"default":0},"brightness":{"type":["number"],"default":0},"contrast":{"type":["number"],"default":1},"saturation":{"type":["number"],"default":1}}},"FXAA":{"type":["Object"],"description":"<p>在开启 <a href=\"#grid3D.postEffect\">postEffect</a> 后，WebGL 默认的 MSAA 会无法使用。这时候通过 FXAA 可以廉价方便的解决抗锯齿的问题，FXAA 会对一些场景的边缘部分进行模糊从而解决锯齿的问题，这在一些场景上效果还不错，但是在 echarts-gl 中，需要保证很多文字和线条边缘的锐利清晰，因此 FXAA 并不是那么适用。这时候我们可以通过如下设置更高的<code>devicePixelRatio</code>来使用超采样</p>\n<pre><code class=\"lang-js\">var chart = echarts.init(dom, null, {\n devicePixelRatio: 2\n})\n</code></pre>\n<p>但是这种方法对电脑性能有很高的要求，所以更多时候我们建议使用 echarts-gl 中的 <a href=\"#grid3D.temporalSuperSampling\">temporalSuperSampling</a>，在画面静止后会持续分帧对一个像素多次抖动采样，从而达到超采样抗锯齿的效果。</p>\n","properties":{"enable":{"type":["boolean"],"default":false}}}}},"temporalSuperSampling":{"type":["Object"],"description":"<p>分帧超采样。在开启 <a href=\"#grid3D.postEffect\">postEffect</a> 后，WebGL 默认的 MSAA 会无法使用，所以我们需要自己解决锯齿的问题。</p>\n<p>分帧超采样就是用来解决锯齿的问题，它在画面静止后会持续分帧对一个像素多次抖动采样，从而达到抗锯齿的效果。而且在这个分帧采样的过程中，echarts-gl 也会对 <a href=\"#grid3D.postEffect\">postEffect</a> 中一些需要采样保证效果的特效，例如 <a href=\"#grid3D.postEffect.SSAO\">SSAO</a>, <a href=\"#grid3D.postEffect.depthOfField\">景深</a>，以及阴影进行渐进增强。</p>\n<p>下面是未开启和开启<code>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\">\n <img src=\"documents/asset/gl/img/surface-taa.png\" width=\"100%\" title=\"AA\">\n</div>\n","properties":{"enable":{"type":["boolean"],"default":"'auto'"}}},"viewControl":{"type":["Object"],"description":"<p><code>viewControl</code>用于鼠标的旋转，缩放等视角控制。</p>\n","properties":{"projection":{"type":["string"],"default":"perspective"},"autoRotate":{"type":["boolean"],"default":false},"autoRotateDirection":{"type":["string"],"default":"cw"},"autoRotateSpeed":{"type":["number"],"default":10},"autoRotateAfterStill":{"type":["number"],"default":3},"damping":{"type":["number"],"default":0.8},"rotateSensitivity":{"type":["number","Array"],"default":1},"zoomSensitivity":{"type":["number"],"default":1},"panSensitivity":{"type":["number"],"default":1},"panMouseButton":{"type":["string"],"default":"left"},"rotateMouseButton":{"type":["string"],"default":"middle"},"distance":{"type":["number"],"default":200},"minDistance":{"type":["number"],"default":40},"maxDistance":{"type":["number"],"default":400},"orthographicSize":{"type":["number"],"default":200},"maxOrthographicSize":{"type":["number"],"default":40},"minOrthographicSize":{"type":["number"],"default":400},"alpha":{"type":["number"],"default":20},"beta":{"type":["number"],"default":40},"center":{"type":["Array"]},"minAlpha":{"type":["number"],"default":-90},"maxAlpha":{"type":["number"],"default":90},"minBeta":{"type":["number"],"default":null},"maxBeta":{"type":["number"],"default":null},"animation":{"type":["boolean"],"default":true},"animationDurationUpdate":{"type":["number"],"default":1000},"animationEasingUpdate":{"type":["string"],"default":"cubicInOut"}}},"zlevel":{"type":["number"],"default":-10},"left":{"type":["string","number"],"default":"auto"},"top":{"type":["string","number"],"default":"auto"},"right":{"type":["string","number"],"default":"auto"},"bottom":{"type":["string","number"],"default":"auto"},"width":{"type":["string","number"],"default":"auto"},"height":{"type":["string","number"],"default":"auto"}}},"xAxis3D":{"type":["Object"],"description":"<p>三维笛卡尔坐标系中的 x 轴。可以通过 <a href=\"#xAxis3D.grid3DIndex\">grid3DIndex</a> 索引所在的<a href=\"#grid3D\">三维笛卡尔坐标系</a>。</p>\n<p>在<code>xAxis3D</code>下设置的 <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> 会覆盖 <a href=\"#grid3D\">grid3D</a> 下的相应配置项。</p>\n","properties":{"show":{"type":["boolean"]},"name":{"type":["string"],"default":"'X'"},"grid3DIndex":{"type":["number"],"default":0},"nameTextStyle":{"type":["Object"],"description":"<p>坐标轴名称的显示样式。</p>\n","properties":{"color":{"type":["Color"]},"borderWidth":{"type":["number"],"default":0},"borderColor":{"type":["string"],"default":"#fff"},"fontFamily":{"type":["string"],"default":"'sans-serif'"},"fontSize":{"type":["number"],"default":16},"fontWeight":{"type":["string"],"default":"normal"}}},"nameGap":{"type":["number"],"default":20},"type":{"type":["string"],"default":"value"},"min":{"type":["number","string"],"default":null},"max":{"type":["number","string"],"default":null},"scale":{"type":["boolean"],"default":false},"splitNumber":{"type":["number"],"default":5},"minInterval":{"type":["number"],"default":0},"interval":{"type":["number"]},"logBase":{"type":["number"],"default":10},"data":{"type":["Array"],"description":"<p>类目数据，在类目轴（<a href=\"#xAxis3D.type\">type</a>: 'category'）中有效。</p>\n<p>如果设置了 <a href=\"#xAxis3D.type\">type</a> 是 <code>'category'</code>，但没有设置 <code>axis.data</code>，则 <code>axis.data</code> 的内容会自动从 <a href=\"#series.data\">series.data</a> 中获取，这会比较方便。不过注意，<code>axis.data</code> 指明的是 <code>'category'</code> 轴的取值范围。如果不指定而是从 <a href=\"#series.data\">series.data</a> 中获取，那么只能获取到 <a href=\"#series.data\">series.data</a> 中出现的值。比如说，假如 <a href=\"#series.data\">series.data</a> 为空时，就什么也获取不到。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">// 所有类目名称列表\ndata: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']\n// 每一项也可以是具体的配置项，此时取配置项中的 `value` 为类目名\ndata: [{\n value: '周一',\n // 突出周一\n textStyle: {\n fontSize: 20,\n color: 'red'\n }\n}, '周二', '周三', '周四', '周五', '周六', '周日']\n</code></pre>\n","items":{"type":"Object","properties":{"value":{"type":["string"]},"textStyle":{"type":["Object"],"description":"<p>类目标签的文字样式。</p>\n","properties":{"color":{"type":["string"],"default":"\"#fff\""},"borderWidth":{"type":["number"],"default":0},"borderColor":{"type":["string"],"default":"#fff"},"fontFamily":{"type":["string"],"default":"'sans-serif'"},"fontSize":{"type":["number"],"default":12},"fontWeight":{"type":["string"],"default":"normal"}}}}}},"axisLine":{"type":["Object"],"description":"<p>坐标轴轴线相关设置。</p>\n","properties":{"show":{"type":["boolean"],"default":true},"interval":{"type":["number","Function"],"default":"'auto'"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"default":"'#333'"},"opacity":{"type":["number"],"default":1},"width":{"type":["number"],"default":2}}}}},"axisLabel":{"type":["Object"],"description":"<p>坐标轴刻度标签的相关设置。</p>\n","properties":{"show":{"type":["boolean"],"default":true},"margin":{"type":["number"],"default":8},"interval":{"type":["number","Function"],"default":"'auto'"},"formatter":{"type":["string","Function"],"default":null},"textStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color","Function"]},"borderWidth":{"type":["number"],"default":0},"borderColor":{"type":["string"],"default":"#fff"},"fontFamily":{"type":["string"],"default":"'sans-serif'"},"fontSize":{"type":["number"],"default":12},"fontWeight":{"type":["string"],"default":"normal"}}}}},"axisTick":{"type":["Object"],"description":"<p>坐标轴刻度相关设置。</p>\n","properties":{"show":{"type":["boolean"],"default":true},"interval":{"type":["number","Function"],"default":"'auto'"},"length":{"type":["number"],"default":5},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"]},"opacity":{"type":["number"],"default":1},"width":{"type":["number"],"default":1}}}}},"splitLine":{"type":["Object"],"description":"<p>坐标轴在 <a href=\"#grid3D\">grid3D</a> 的平面上的分隔线。</p>\n","properties":{"show":{"type":["boolean"],"default":true},"interval":{"type":["number","Function"],"description":"<p>坐标轴分隔线的显示间隔，在类目轴中有效。默认同 <a href=\"#.axisLabel.interval\">axisLabel.interval</a> 一样。</p>\n<p>默认会自动计算<code>interval</code>以保证较好的展示效果。</p>\n<p>可以设置成 0 强制显示所有标签。</p>\n<p>如果设置为 <code>1</code>，表示『隔一个标签显示一个标签』，如果值为 <code>2</code>，表示隔两个标签显示一个标签，以此类推。</p>\n<p>可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：</p>\n<pre><code class=\"lang-js\">(index:number, value: string) => boolean\n</code></pre>\n<p>第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 <code>false</code>。</p>\n","default":"'auto'","properties":{"color":{"type":["Array","string"],"default":"['#ccc']"},"opacity":{"type":["number"],"default":1},"width":{"type":["number"],"default":1}}}}},"splitArea":{"type":["Object"],"description":"<p>坐标轴在 <a href=\"#grid3D\">grid3D</a> 的平面上的分隔区域。</p>\n","properties":{"show":{"type":["boolean"],"default":true},"interval":{"type":["number","Function"],"default":"'auto'"},"areaStyle":{"type":["Object"],"description":"<p>分隔区域的样式设置。</p>\n","properties":{"color":{"type":["Array"],"default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']"}}}}},"axisPointer":{"type":["Object"],"description":"<p>坐标轴指示线。</p>\n","properties":{"show":{"type":["boolean"],"default":true},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"default":"'rgba(0, 0, 0, 0.8)'"},"opacity":{"type":["number"],"default":1},"width":{"type":["number"],"default":1}}},"label":{"type":["Object"],"description":"<p>指示线标签。</p>\n","properties":{"show":{"type":["boolean"],"default":true},"formatter":{"type":["Function"]},"margin":{"type":["number"]},"textStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"default":"\"#fff\""},"borderWidth":{"type":["number"],"default":0},"borderColor":{"type":["string"],"default":"#fff"},"fontFamily":{"type":["string"],"default":"'sans-serif'"},"fontSize":{"type":["number"],"default":16},"fontWeight":{"type":["string"],"default":"normal"}}}}}}}}},"yAxis3D":{"type":["Object"],"description":"<p>三维笛卡尔坐标系中的 y 轴。可以通过 <a href=\"#yAxis3D.grid3DIndex\">grid3DIndex</a> 索引所在的<a href=\"#grid3D\">三维笛卡尔坐标系</a>。</p>\n<p>在<code>yAxis3D</code>下设置的 <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> 会覆盖 <a href=\"#grid3D\">grid3D</a> 下的相应配置项。</p>\n","properties":{"show":{"type":["boolean"]},"name":{"type":["string"],"default":"'Y'"},"grid3DIndex":{"type":["number"],"default":0},"nameTextStyle":{"type":["Object"],"description":"<p>坐标轴名称的显示样式。</p>\n","properties":{"color":{"type":["Color"]},"borderWidth":{"type":["number"],"default":0},"borderColor":{"type":["string"],"default":"#fff"},"fontFamily":{"type":["string"],"default":"'sans-serif'"},"fontSize":{"type":["number"],"default":16},"fontWeight":{"type":["string"],"default":"normal"}}},"nameGap":{"type":["number"],"default":20},"type":{"type":["string"],"default":"value"},"min":{"type":["number","string"],"default":null},"max":{"type":["number","string"],"default":null},"scale":{"type":["boolean"],"default":false},"splitNumber":{"type":["number"],"default":5},"minInterval":{"type":["number"],"default":0},"interval":{"type":["number"]},"logBase":{"type":["number"],"default":10},"data":{"type":["Array"],"description":"<p>类目数据，在类目轴（<a href=\"#yAxis3D.type\">type</a>: 'category'）中有效。</p>\n<p>如果设置了 <a href=\"#yAxis3D.type\">type</a> 是 <code>'category'</code>，但没有设置 <code>axis.data</code>，则 <code>axis.data</code> 的内容会自动从 <a href=\"#series.data\">series.data</a> 中获取，这会比较方便。不过注意，<code>axis.data</code> 指明的是 <code>'category'</code> 轴的取值范围。如果不指定而是从 <a href=\"#series.data\">series.data</a> 中获取，那么只能获取到 <a href=\"#series.data\">series.data</a> 中出现的值。比如说，假如 <a href=\"#series.data\">series.data</a> 为空时，就什么也获取不到。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">// 所有类目名称列表\ndata: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']\n// 每一项也可以是具体的配置项，此时取配置项中的 `value` 为类目名\ndata: [{\n value: '周一',\n // 突出周一\n textStyle: {\n fontSize: 20,\n color: 'red'\n }\n}, '周二', '周三', '周四', '周五', '周六', '周日']\n</code></pre>\n","items":{"type":"Object","properties":{"value":{"type":["string"]},"textStyle":{"type":["Object"],"description":"<p>类目标签的文字样式。</p>\n","properties":{"color":{"type":["string"],"default":"\"#fff\""},"borderWidth":{"type":["number"],"default":0},"borderColor":{"type":["string"],"default":"#fff"},"fontFamily":{"type":["string"],"default":"'sans-serif'"},"fontSize":{"type":["number"],"default":12},"fontWeight":{"type":["string"],"default":"normal"}}}}}},"axisLine":{"type":["Object"],"description":"<p>坐标轴轴线相关设置。</p>\n","properties":{"show":{"type":["boolean"],"default":true},"interval":{"type":["number","Function"],"default":"'auto'"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"default":"'#333'"},"opacity":{"type":["number"],"default":1},"width":{"type":["number"],"default":2}}}}},"axisLabel":{"type":["Object"],"description":"<p>坐标轴刻度标签的相关设置。</p>\n","properties":{"show":{"type":["boolean"],"default":true},"margin":{"type":["number"],"default":8},"interval":{"type":["number","Function"],"default":"'auto'"},"formatter":{"type":["string","Function"],"default":null},"textStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color","Function"]},"borderWidth":{"type":["number"],"default":0},"borderColor":{"type":["string"],"default":"#fff"},"fontFamily":{"type":["string"],"default":"'sans-serif'"},"fontSize":{"type":["number"],"default":12},"fontWeight":{"type":["string"],"default":"normal"}}}}},"axisTick":{"type":["Object"],"description":"<p>坐标轴刻度相关设置。</p>\n","properties":{"show":{"type":["boolean"],"default":true},"interval":{"type":["number","Function"],"default":"'auto'"},"length":{"type":["number"],"default":5},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"]},"opacity":{"type":["number"],"default":1},"width":{"type":["number"],"default":1}}}}},"splitLine":{"type":["Object"],"description":"<p>坐标轴在 <a href=\"#grid3D\">grid3D</a> 的平面上的分隔线。</p>\n","properties":{"show":{"type":["boolean"],"default":true},"interval":{"type":["number","Function"],"description":"<p>坐标轴分隔线的显示间隔，在类目轴中有效。默认同 <a href=\"#.axisLabel.interval\">axisLabel.interval</a> 一样。</p>\n<p>默认会自动计算<code>interval</code>以保证较好的展示效果。</p>\n<p>可以设置成 0 强制显示所有标签。</p>\n<p>如果设置为 <code>1</code>，表示『隔一个标签显示一个标签』，如果值为 <code>2</code>，表示隔两个标签显示一个标签，以此类推。</p>\n<p>可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：</p>\n<pre><code class=\"lang-js\">(index:number, value: string) => boolean\n</code></pre>\n<p>第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 <code>false</code>。</p>\n","default":"'auto'","properties":{"color":{"type":["Array","string"],"default":"['#ccc']"},"opacity":{"type":["number"],"default":1},"width":{"type":["number"],"default":1}}}}},"splitArea":{"type":["Object"],"description":"<p>坐标轴在 <a href=\"#grid3D\">grid3D</a> 的平面上的分隔区域。</p>\n","properties":{"show":{"type":["boolean"],"default":true},"interval":{"type":["number","Function"],"default":"'auto'"},"areaStyle":{"type":["Object"],"description":"<p>分隔区域的样式设置。</p>\n","properties":{"color":{"type":["Array"],"default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']"}}}}},"axisPointer":{"type":["Object"],"description":"<p>坐标轴指示线。</p>\n","properties":{"show":{"type":["boolean"],"default":true},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"default":"'rgba(0, 0, 0, 0.8)'"},"opacity":{"type":["number"],"default":1},"width":{"type":["number"],"default":1}}},"label":{"type":["Object"],"description":"<p>指示线标签。</p>\n","properties":{"show":{"type":["boolean"],"default":true},"formatter":{"type":["Function"]},"margin":{"type":["number"]},"textStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"default":"\"#fff\""},"borderWidth":{"type":["number"],"default":0},"borderColor":{"type":["string"],"default":"#fff"},"fontFamily":{"type":["string"],"default":"'sans-serif'"},"fontSize":{"type":["number"],"default":16},"fontWeight":{"type":["string"],"default":"normal"}}}}}}}}},"zAxis3D":{"type":["Object"],"description":"<p>三维笛卡尔坐标系中的 z 轴。可以通过 <a href=\"#zAxis3D.grid3DIndex\">grid3DIndex</a> 索引所在的<a href=\"#grid3D\">三维笛卡尔坐标系</a>。</p>\n<p>在<code>zAxis3D</code>下设置的 <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> 会覆盖 <a href=\"#grid3D\">grid3D</a> 下的相应配置项。</p>\n","properties":{"show":{"type":["boolean"]},"name":{"type":["string"],"default":"'Z'"},"grid3DIndex":{"type":["number"],"default":0},"nameTextStyle":{"type":["Object"],"description":"<p>坐标轴名称的显示样式。</p>\n","properties":{"color":{"type":["Color"]},"borderWidth":{"type":["number"],"default":0},"borderColor":{"type":["string"],"default":"#fff"},"fontFamily":{"type":["string"],"default":"'sans-serif'"},"fontSize":{"type":["number"],"default":16},"fontWeight":{"type":["string"],"default":"normal"}}},"nameGap":{"type":["number"],"default":20},"type":{"type":["string"],"default":"value"},"min":{"type":["number","string"],"default":null},"max":{"type":["number","string"],"default":null},"scale":{"type":["boolean"],"default":false},"splitNumber":{"type":["number"],"default":5},"minInterval":{"type":["number"],"default":0},"interval":{"type":["number"]},"logBase":{"type":["number"],"default":10},"data":{"type":["Array"],"description":"<p>类目数据，在类目轴（<a href=\"#zAxis3D.type\">type</a>: 'category'）中有效。</p>\n<p>如果设置了 <a href=\"#zAxis3D.type\">type</a> 是 <code>'category'</code>，但没有设置 <code>axis.data</code>，则 <code>axis.data</code> 的内容会自动从 <a href=\"#series.data\">series.data</a> 中获取，这会比较方便。不过注意，<code>axis.data</code> 指明的是 <code>'category'</code> 轴的取值范围。如果不指定而是从 <a href=\"#series.data\">series.data</a> 中获取，那么只能获取到 <a href=\"#series.data\">series.data</a> 中出现的值。比如说，假如 <a href=\"#series.data\">series.data</a> 为空时，就什么也获取不到。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">// 所有类目名称列表\ndata: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']\n// 每一项也可以是具体的配置项，此时取配置项中的 `value` 为类目名\ndata: [{\n value: '周一',\n // 突出周一\n textStyle: {\n fontSize: 20,\n color: 'red'\n }\n}, '周二', '周三', '周四', '周五', '周六', '周日']\n</code></pre>\n","items":{"type":"Object","properties":{"value":{"type":["string"]},"textStyle":{"type":["Object"],"description":"<p>类目标签的文字样式。</p>\n","properties":{"color":{"type":["string"],"default":"\"#fff\""},"borderWidth":{"type":["number"],"default":0},"borderColor":{"type":["string"],"default":"#fff"},"fontFamily":{"type":["string"],"default":"'sans-serif'"},"fontSize":{"type":["number"],"default":12},"fontWeight":{"type":["string"],"default":"normal"}}}}}},"axisLine":{"type":["Object"],"description":"<p>坐标轴轴线相关设置。</p>\n","properties":{"show":{"type":["boolean"],"default":true},"interval":{"type":["number","Function"],"default":"'auto'"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"default":"'#333'"},"opacity":{"type":["number"],"default":1},"width":{"type":["number"],"default":2}}}}},"axisLabel":{"type":["Object"],"description":"<p>坐标轴刻度标签的相关设置。</p>\n","properties":{"show":{"type":["boolean"],"default":true},"margin":{"type":["number"],"default":8},"interval":{"type":["number","Function"],"default":"'auto'"},"formatter":{"type":["string","Function"],"default":null},"textStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color","Function"]},"borderWidth":{"type":["number"],"default":0},"borderColor":{"type":["string"],"default":"#fff"},"fontFamily":{"type":["string"],"default":"'sans-serif'"},"fontSize":{"type":["number"],"default":12},"fontWeight":{"type":["string"],"default":"normal"}}}}},"axisTick":{"type":["Object"],"description":"<p>坐标轴刻度相关设置。</p>\n","properties":{"show":{"type":["boolean"],"default":true},"interval":{"type":["number","Function"],"default":"'auto'"},"length":{"type":["number"],"default":5},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"]},"opacity":{"type":["number"],"default":1},"width":{"type":["number"],"default":1}}}}},"splitLine":{"type":["Object"],"description":"<p>坐标轴在 <a href=\"#grid3D\">grid3D</a> 的平面上的分隔线。</p>\n","properties":{"show":{"type":["boolean"],"default":true},"interval":{"type":["number","Function"],"description":"<p>坐标轴分隔线的显示间隔，在类目轴中有效。默认同 <a href=\"#.axisLabel.interval\">axisLabel.interval</a> 一样。</p>\n<p>默认会自动计算<code>interval</code>以保证较好的展示效果。</p>\n<p>可以设置成 0 强制显示所有标签。</p>\n<p>如果设置为 <code>1</code>，表示『隔一个标签显示一个标签』，如果值为 <code>2</code>，表示隔两个标签显示一个标签，以此类推。</p>\n<p>可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：</p>\n<pre><code class=\"lang-js\">(index:number, value: string) => boolean\n</code></pre>\n<p>第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 <code>false</code>。</p>\n","default":"'auto'","properties":{"color":{"type":["Array","string"],"default":"['#ccc']"},"opacity":{"type":["number"],"default":1},"width":{"type":["number"],"default":1}}}}},"splitArea":{"type":["Object"],"description":"<p>坐标轴在 <a href=\"#grid3D\">grid3D</a> 的平面上的分隔区域。</p>\n","properties":{"show":{"type":["boolean"],"default":true},"interval":{"type":["number","Function"],"default":"'auto'"},"areaStyle":{"type":["Object"],"description":"<p>分隔区域的样式设置。</p>\n","properties":{"color":{"type":["Array"],"default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']"}}}}},"axisPointer":{"type":["Object"],"description":"<p>坐标轴指示线。</p>\n","properties":{"show":{"type":["boolean"],"default":true},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"default":"'rgba(0, 0, 0, 0.8)'"},"opacity":{"type":["number"],"default":1},"width":{"type":["number"],"default":1}}},"label":{"type":["Object"],"description":"<p>指示线标签。</p>\n","properties":{"show":{"type":["boolean"],"default":true},"formatter":{"type":["Function"]},"margin":{"type":["number"]},"textStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"default":"\"#fff\""},"borderWidth":{"type":["number"],"default":0},"borderColor":{"type":["string"],"default":"#fff"},"fontFamily":{"type":["string"],"default":"'sans-serif'"},"fontSize":{"type":["number"],"default":16},"fontWeight":{"type":["string"],"default":"normal"}}}}}}}}},"series":{"type":"Array","items":{"anyOf":[{"type":["Object"],"description":"<p>三维散点/气泡图。可以用于<a href=\"#grid3D\">三维直角坐标系 grid3D</a>，<a href=\"#geo3D\">三维地理坐标系 geo3D</a>，<a href=\"#globe\">地球 globe</a>，通过大小，颜色等属性展示数据。</p>\n<p>下图示一个三维的 simplex noise 用气泡图绘制出来的例子。</p>\n<p><img width=\"500\" height=\"auto\" src=\"documents/asset/gl/img/scatter3D.png\"></p>\n","properties":{"type":{"type":["string"],"default":"'scatter3D'"},"name":{"type":["string"]},"coordinateSystem":{"type":["string"]},"grid3DIndex":{"type":["number"],"default":0},"geo3DIndex":{"type":["number"],"default":0},"globeIndex":{"type":["number"],"default":0},"symbol":{"type":["string"],"default":"'circle'"},"symbolSize":{"type":["number","Array","Function"],"default":10},"itemStyle":{"type":["Object"],"description":"<p>散点图颜色描边等样式。</p>\n","properties":{"color":{"type":["string"],"default":"自适应"},"opacity":{"type":["number"],"default":0.8},"borderWidth":{"type":["number"],"default":0},"borderColor":{"type":["string"],"default":"'#fff'"}}},"label":{"type":["Object"],"description":"<p>标签样式</p>\n","properties":{"show":{"type":["boolean"],"default":false},"distance":{"type":["number"],"default":5},"position":{"type":["string"],"default":"right"},"formatter":{"type":["Function","string"]},"textStyle":{"type":["Object"],"description":"<p>标签的字体样式。</p>\n","properties":{"color":{"type":["string"],"default":"#000"},"borderWidth":{"type":["number"],"default":1},"borderColor":{"type":["string"],"default":"#fff"},"fontFamily":{"type":["string"],"default":"'sans-serif'"},"fontSize":{"type":["number"],"default":14},"fontWeight":{"type":["string"],"default":"normal"}}}}},"emphasis":{"type":["Object"],"description":"<p>图形和标签高亮的样式。</p>\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"default":"自适应"},"opacity":{"type":["number"],"default":0.8},"borderWidth":{"type":["number"],"default":0},"borderColor":{"type":["string"],"default":"'#fff'"}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"default":false},"distance":{"type":["number"],"default":5},"position":{"type":["string"],"default":"right"},"formatter":{"type":["Function","string"]},"textStyle":{"type":["Object"],"description":"<p>标签的字体样式。</p>\n","properties":{"color":{"type":["string"],"default":"#000"},"borderWidth":{"type":["number"],"default":1},"borderColor":{"type":["string"],"default":"#fff"},"fontFamily":{"type":["string"],"default":"'sans-serif'"},"fontSize":{"type":["number"],"default":14},"fontWeight":{"type":["string"],"default":"normal"}}}}}}},"data":{"type":["Array"]},"blendMode":{"type":["string"],"default":"'source-over'"},"zlevel":{"type":["number"],"default":-10},"silent":{"type":["boolean"],"default":false},"animation":{"type":["boolean"],"default":true},"animationDurationUpdate":{"type":["number"],"default":500},"animationEasingUpdate":{"type":["string"],"default":"cubicOut"}}},{"type":["Object"],"description":"<p>三维柱状图。可以用于<a href=\"#grid3D\">三维直角坐标系 grid3D</a>，<a href=\"#geo3D\">三维地理坐标系 geo3D</a>，<a href=\"#globe\">地球 globe</a>，通过高度，颜色等属性展示数据。</p>\n<p>下图就是在 <a href=\"#geo3D\">geo3D</a> 上通过三维柱状图展示世界的人口密度数据。</p>\n<p><img width=\"700\" height=\"auto\" src=\"documents/asset/gl/img/geo-bar3D.jpg\"></p>\n","properties":{"type":{"type":["string"],"default":"'bar3D'"},"name":{"type":["string"]},"coordinateSystem":{"type":["string"],"default":"cartesian3D"},"grid3DIndex":{"type":["number"],"default":0},"geo3DIndex":{"type":["number"],"default":0},"globeIndex":{"type":["number"],"default":0},"bevelSize":{"type":["number"],"default":0},"bevelSmoothness":{"type":["number"],"default":2},"stack":{"type":["string"]},"minHeight":{"type":["number"],"default":0},"itemStyle":{"type":["Object"],"description":"<p>柱子的样式，包括颜色和不透明度。</p>\n","properties":{"color":{"type":["string","Function"],"default":"自适应"},"opacity":{"type":["number"],"default":1}}},"label":{"type":["Object"],"description":"<p>柱子的标签配置。</p>\n","properties":{"show":{"type":["boolean"],"default":false},"distance":{"type":["number"],"default":2},"formatter":{"type":["Function","string"]},"textStyle":{"type":["Object"],"description":"<p>标签的字体样式。</p>\n","properties":{"color":{"type":["string"],"default":"\"#fff\""},"borderWidth":{"type":["number"],"default":1},"borderColor":{"type":["string"],"default":"#fff"},"fontFamily":{"type":["string"],"default":"'sans-serif'"},"fontSize":{"type":["number"],"default":20},"fontWeight":{"type":["string"],"default":"normal"}}}}},"emphasis":{"type":["Object"],"description":"<p>柱子高亮状态的标签和样式配置。</p>\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"default":"自适应"},"opacity":{"type":["number"],"default":1}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"default":true},"distance":{"type":["number"],"default":2},"formatter":{"type":["Function","string"]},"textStyle":{"type":["Object"],"description":"<p>标签的字体样式。</p>\n","properties":{"color":{"type":["string"],"default":"\"#fff\""},"borderWidth":{"type":["number"],"default":1},"borderColor":{"type":["string"],"default":"#fff"},"fontFamily":{"type":["string"],"default":"'sans-serif'"},"fontSize":{"type":["number"],"default":20},"fontWeight":{"type":["string"],"default":"normal"}}}}}}},"data":{"type":["Array"],"description":"<p>三维柱状图数据数组。数组每一项为一个数据。通常这个数据是用数组存储数据的每个属性/维度。例如下面：</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>对于数组中的每一项：</p>\n<ol>\n<li>在 <a href=\"#grid3D\">grid3D</a> 中，每一项的前三个值分别是<code>x</code>, <code>y</code>, <code>z</code>。</li>\n<li>在 <a href=\"#geo3D\">geo3D</a> 以及 <a href=\"globe\" target=\"_blank\">globe</a> 中，每一项的前两个值分别是经纬度 <code>lng</code>, <code>lat</code>，第三个值表示数值大小，例如人口的大小。这个值会被映射到 <a href=\"#series-bar3D.minHeight\">minHeight</a> ~ <a href=\"#series-bar3D.maxHeight\">maxHeight</a> 的范围。</li>\n</ol>\n<p>除了默认给坐标系使用的三个值，每一项还可以加入任意多个值，用于给 <a href=\"#visualMap\">visualMap</a> 组件映射到颜色等其它图形属性。</p>\n<p>有些时候我们需要指定每个数据项的名称，这时候需要每个项为一个对象：</p>\n<pre><code class=\"lang-js\">[{\n // 数据项的名称\n name: '数据1',\n // 数据项值\n value: [12, 14, 10]\n}, {\n name: '数据2',\n value: [34, 50, 15]\n}]\n</code></pre>\n<p>需要对个别内容指定进行个性化定义时：</p>\n<pre><code class=\"lang-js\">[{\n name: '数据1',\n value: [12, 14, 10]\n}, {\n // 数据项名称\n name: '数据2',\n value : [34, 50, 15],\n //自定义特殊itemStyle，仅对该item有效\n itemStyle:{}\n}]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"]},"value":{"type":["Array"]},"itemStyle":{"type":["Object"],"description":"<p>单个数据项的样式设置。</p>\n","properties":{"color":{"type":["string"],"default":"自适应"},"opacity":{"type":["number"],"default":1}}},"label":{"type":["Object"],"description":"<p>单个数据项的标签设置。</p>\n","properties":{"show":{"type":["boolean"],"default":false},"distance":{"type":["number"],"default":2},"formatter":{"type":["Function","string"]},"textStyle":{"type":["Object"],"description":"<p>标签的字体样式。</p>\n","properties":{"color":{"type":["string"],"default":"\"#fff\""},"borderWidth":{"type":["number"],"default":1},"borderColor":{"type":["string"],"default":"#fff"},"fontFamily":{"type":["string"],"default":"'sans-serif'"},"fontSize":{"type":["number"],"default":20},"fontWeight":{"type":["string"],"default":"normal"}}}}},"emphasis":{"type":["Object"],"description":"<p>单个数据项高亮状态的标签和样式配置。</p>\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"default":"自适应"},"opacity":{"type":["number"],"default":1}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"default":true},"distance":{"type":["number"],"default":2},"formatter":{"type":["Function","string"]},"textStyle":{"type":["Object"],"description":"<p>标签的字体样式。</p>\n","properties":{"color":{"type":["string"],"default":"\"#fff\""},"borderWidth":{"type":["number"],"default":1},"borderColor":{"type":["string"],"default":"#fff"},"fontFamily":{"type":["string"],"default":"'sans-serif'"},"fontSize":{"type":["number"],"default":20},"fontWeight":{"type":["string"],"default":"normal"}}}}}}}}}},"shading":{"type":["string"]},"realisticMaterial":{"type":["Object"],"description":"<p>真实感材质相关的配置项，在 <a href=\"#series-bar3D.shading\">shading</a> 为<code>'realistic'</code>时有效。</p>\n","properties":{"detailTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"]},"textureTiling":{"type":["number"],"default":1},"textureOffset":{"type":["number"],"default":0},"roughness":{"type":["number","string","HTMLImageElement","HTMLCanvasElement"],"default":0.5},"metalness":{"type":["number","string","HTMLImageElement","HTMLCanvasElement"],"default":0},"roughnessAdjust":{"type":["number"],"default":0.5},"metalnessAdjust":{"type":["number"],"default":0.5},"normalTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"]}}},"lambertMaterial":{"type":["Object"],"description":"<p>lambert 材质相关的配置项，在 <a href=\"#series-bar3D.shading\">shading</a> 为<code>'lambert'</code>时有效。</p>\n","properties":{"detailTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"]},"textureTiling":{"type":["number"],"default":1},"textureOffset":{"type":["number"],"default":0}}},"colorMaterial":{"type":["Object"],"description":"<p>color 材质相关的配置项，在 <a href=\"#series-bar3D.shading\">shading</a> 为<code>'color'</code>时有效。</p>\n","properties":{"detailTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"]},"textureTiling":{"type":["number"],"default":1},"textureOffset":{"type":["number"],"default":0}}},"zlevel":{"type":["number"],"default":-10},"silent":{"type":["boolean"],"default":false},"animation":{"type":["boolean"],"default":true},"animationDurationUpdate":{"type":["number"],"default":500},"animationEasingUpdate":{"type":["string"],"default":"cubicOut"}}},{"type":["Object"],"description":"<p>三维折线图。可以用于<a href=\"#grid3D\">三维直角坐标系 grid3D</a>。</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/gl/img/line3D.png\"></p>\n","properties":{"type":{"type":["string"],"default":"'line3D'"},"name":{"type":["string"]},"coordinateSystem":{"type":["string"],"default":"cartesian3D"},"grid3DIndex":{"type":["number"],"default":0},"lineStyle":{"type":["Object"],"description":"<p>线条样式。</p>\n","properties":{"color":{"type":["string"],"default":"自适应"},"opacity":{"type":["number"],"default":1},"width":{"type":["number"],"default":2},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"default":"自适应"},"opacity":{"type":["number"],"default":1},"width":{"type":["number"],"default":2}}}}},"data":{"type":["Array"],"description":"<p>数据数组。数组每一项为一个数据。通常这个数据是用数组存储数据的每个属性/维度。例如下面：</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>数组中的每一项的前三个值分别是<code>x</code>, <code>y</code>, <code>z</code>。除了这三个值也可以添加其它值给 <a href=\"#visualMap\">visualMap</a> 组件映射到颜色等其它图形属性。</p>\n<p>有些时候我们需要指定每个数据项的名称，这时候需要每个项为一个对象：</p>\n<pre><code class=\"lang-js\">[{\n // 数据项的名称\n name: '数据1',\n // 数据项值\n value: [12, 14, 10]\n}, {\n name: '数据2',\n value: [34, 50, 15]\n}]\n</code></pre>\n<p>需要对个别内容指定进行个性化定义时：</p>\n<pre><code class=\"lang-js\">[{\n name: '数据1',\n value: [12, 14, 10]\n}, {\n // 数据项名称\n name: '数据2',\n value : [34, 50, 15],\n //自定义特殊itemStyle，仅对该item有效\n itemStyle:{}\n}]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"]},"value":{"type":["Array"]},"lineStyle":{"type":["Object"],"description":"<p>单个数据项的样式设置。</p>\n","properties":{"color":{"type":["string"],"default":"自适应"},"opacity":{"type":["number"],"default":1},"width":{"type":["number"],"default":1}}}}}},"zlevel":{"type":["number"],"default":-10},"silent":{"type":["boolean"],"default":false},"animation":{"type":["boolean"],"default":true},"animationDurationUpdate":{"type":["number"],"default":500},"animationEasingUpdate":{"type":["string"],"default":"cubicOut"}}},{"type":["Object"],"description":"<p>三维的飞线图。跟二维的<a href=\"http://echarts.baidu.com/option.html#series-line\" target=\"_blank\">飞线图</a>一样用于表现起点终点的线数据。更多用在地理可视化上。</p>\n<p>下图是使用 <a href=\"#series-lines3D\">lines3D</a> 在 <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"],"default":"'lines3D'"},"name":{"type":["string"]},"coordinateSystem":{"type":["string"]},"geo3DIndex":{"type":["number"],"default":0},"globeIndex":{"type":["number"],"default":0},"polyline":{"type":["boolean"],"default":false},"effect":{"type":["Object"],"description":"<p>飞线的尾迹特效。</p>\n","properties":{"show":{"type":["boolean"],"default":false},"period":{"type":["number"],"default":4},"constantSpeed":{"type":["number"],"default":null},"trailWidth":{"type":["number"],"default":4},"trailLength":{"type":["number"],"default":0.1},"trailColor":{"type":["string"]},"trailOpacity":{"type":["number"]}}},"lineStyle":{"type":["Object"],"description":"<p>飞线的线条样式。</p>\n","properties":{"color":{"type":["string"],"default":"自适应"},"opacity":{"type":["number"],"default":0.5},"width":{"type":["number"],"default":1}}},"data":{"type":["Array"],"description":"<p>三维飞线图的数据数组，通常数据的每一项可以是一个包含起点和终点的坐标集。在 <a href=\"#series-lines3D.polyline\">polyline</a> 设置为 <code>true</code> 时支持多于两个的坐标。\n如下：</p>\n<pre><code class=\"lang-js\">data: [\n [\n [120, 66, 1], // 起点的经纬度和海拔坐标\n [122, 67, 2] // 终点的经纬度和海拔坐标\n ]\n]\n</code></pre>\n<p>有些时候需要配置数据项的名字或者单独的样式。需要把经纬度坐标写到 coords 属性下。如下：</p>\n<pre><code class=\"lang-js\">data: [\n {\n coords: [ [120, 66], [122, 67] ],\n // 数据值\n value: 10,\n // 数据名\n name: 'foo',\n // 线条样式\n lineStyle: {}\n }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"coords":{"type":["Array"]},"value":{"type":["Array","number"]},"lineStyle":{"type":["Object"],"description":"<p>单个数据（单条线）的样式设置。</p>\n","properties":{"color":{"type":["string"],"default":"自适应"},"opacity":{"type":["number"],"default":1},"width":{"type":["number"],"default":1}}}}}},"blendMode":{"type":["string"],"default":"'source-over'"},"zlevel":{"type":["number"],"default":-10},"silent":{"type":["boolean"],"default":false}}},{"type":["Object"],"description":"<p><strong>三维地图</strong></p>\n<p>三维地图主要用于地理区域数据的可视化，配合 <a href=\"http://echarts.baidu.com/option.html#visualMap\" target=\"_blank\">visualMap</a> 组件用于展示不同区域的人口分布密度等数据。</p>\n<p>相比于二维的地图，三维地图还能每个区域设置不同的高度，这个高度能够用来展示数据，也能够用来显示建筑数据中建筑的高度。</p>\n","properties":{"type":{"type":["string"],"default":"'map3D'"},"name":{"type":["string"]},"map":{"type":["string"]},"boxWidth":{"type":["number"],"default":100},"boxHeight":{"type":["number"],"default":10},"boxDepth":{"type":["number"],"default":"auto"},"regionHeight":{"type":["number"],"default":3},"environment":{"type":["string"],"default":"'auto'"},"groundPlane":{"type":["Object"],"description":"<p>地面可以让整个组件有个“摆放”的地方，从而使整个场景看起来更真实，更有模型感。</p>\n<p><code>groundPlane</code> 下支持设置单独的 <code>realisticMaterial</code>, <code>colorMaterial</code>, <code>lambertMaterial</code> 等材质。如果不设置则默认取组件下的材质参数。</p>\n","properties":{"show":{"type":["boolean"],"default":false},"color":{"type":["string"],"default":"'#aaa'"}}},"instancing":{"type":["boolean"],"default":false},"label":{"type":["Object"],"description":"<p>标签的相关设置。</p>\n","properties":{"show":{"type":["boolean"],"default":false},"distance":{"type":["number"]},"formatter":{"type":["Function","string"]},"textStyle":{"type":["Object"],"description":"<p>标签的字体样式。</p>\n","properties":{"color":{"type":["string"],"default":"\"#fff\""},"borderWidth":{"type":["number"],"default":0},"borderColor":{"type":["string"],"default":"#fff"},"fontFamily":{"type":["string"],"default":"'sans-serif'"},"fontSize":{"type":["number"],"default":12},"fontWeight":{"type":["string"],"default":"normal"}}}}},"itemStyle":{"type":["Object"],"description":"<p>三维地图 中三维图形的视觉属性，包括颜色，透明度，描边等。</p>\n","properties":{"color":{"type":["string","Function"],"default":"自适应"},"opacity":{"type":["number"],"default":1},"borderWidth":{"type":["number"],"default":0},"borderColor":{"type":["string"],"default":"#333"}}},"emphasis":{"type":["Object"],"description":"<p>鼠标 hover 高亮时图形和标签的样式</p>\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"default":false},"distance":{"type":["number"],"default":2},"formatter":{"type":["Function","string"]},"textStyle":{"type":["Object"],"description":"<p>标签的字体样式。</p>\n","properties":{"color":{"type":["string"],"default":"#000"},"borderWidth":{"type":["number"],"default":1},"borderColor":{"type":["string"],"default":"#fff"},"fontFamily":{"type":["string"],"default":"'sans-serif'"},"fontSize":{"type":["number"],"default":20},"fontWeight":{"type":["string"],"default":"normal"}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"default":"自适应"},"opacity":{"type":["number"],"default":1}}}}},"data":{"type":["Array"],"description":"<p>地图区域的设置，</p>\n","items":{"type":"Object","properties":{"name":{"type":["string"]},"value":{"type":["number"]},"regionHeight":{"type":["number"]},"itemStyle":{"type":["Object"],"description":"<p>单个区域的样式设置。</p>\n","properties":{"color":{"type":["string"],"default":"自适应"},"opacity":{"type":["number"],"default":1},"borderWidth":{"type":["number"],"default":0},"borderColor":{"type":["string"],"default":"#333"}}},"label":{"type":["Object"],"description":"<p>单个区域的标签设置。</p>\n","properties":{"show":{"type":["boolean"],"default":false},"distance":{"type":["number"],"default":2},"formatter":{"type":["Function","string"]},"textStyle":{"type":["Object"],"description":"<p>标签的字体样式。</p>\n","properties":{"color":{"type":["string"],"default":"#000"},"borderWidth":{"type":["number"],"default":1},"borderColor":{"type":["string"],"default":"#fff"},"fontFamily":{"type":["string"],"default":"'sans-serif'"},"fontSize":{"type":["number"],"default":20},"fontWeight":{"type":["string"],"default":"normal"}}}}},"emphasis":{"type":["Object"],"description":"<p>单个区域标签和样式的高亮设置。</p>\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"default":"自适应"},"opacity":{"type":["number"],"default":1},"borderWidth":{"type":["number"],"default":0},"borderColor":{"type":["string"],"default":"#333"}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"default":false},"distance":{"type":["number"],"default":2},"formatter":{"type":["Function","string"]},"textStyle":{"type":["Object"],"description":"<p>标签的字体样式。</p>\n","properties":{"color":{"type":["string"],"default":"#000"},"borderWidth":{"type":["number"],"default":1},"borderColor":{"type":["string"],"default":"#fff"},"fontFamily":{"type":["string"],"default":"'sans-serif'"},"fontSize":{"type":["number"],"default":20},"fontWeight":{"type":["string"],"default":"normal"}}}}}}}}}},"shading":{"type":["string"]},"realisticMaterial":{"type":["Object"],"description":"<p>真实感材质相关的配置项，在 <a href=\"#series-map3D.shading\">shading</a> 为<code>'realistic'</code>时有效。</p>\n","properties":{"detailTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"]},"textureTiling":{"type":["number"],"default":1},"textureOffset":{"type":["number"],"default":0},"roughness":{"type":["number","string","HTMLImageElement","HTMLCanvasElement"],"default":0.5},"metalness":{"type":["number","string","HTMLImageElement","HTMLCanvasElement"],"default":0},"roughnessAdjust":{"type":["number"],"default":0.5},"metalnessAdjust":{"type":["number"],"default":0.5},"normalTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"]}}},"lambertMaterial":{"type":["Object"],"description":"<p>lambert 材质相关的配置项，在 <a href=\"#series-map3D.shading\">shading</a> 为<code>'lambert'</code>时有效。</p>\n","properties":{"detailTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"]},"textureTiling":{"type":["number"],"default":1},"textureOffset":{"type":["number"],"default":0}}},"colorMaterial":{"type":["Object"],"description":"<p>color 材质相关的配置项，在 <a href=\"#series-map3D.shading\">shading</a> 为<code>'color'</code>时有效。</p>\n","properties":{"detailTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"]},"textureTiling":{"type":["number"],"default":1},"textureOffset":{"type":["number"],"default":0}}},"light":{"type":["Object"],"description":"<p>光照相关的设置。在 <a href=\"#series-map3D.shading\">shading</a> 为 <code>'color'</code> 的时候无效。</p>\n<p>光照的设置会影响到组件以及组件所在坐标系上的所有图表。</p>\n<p>合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。</p>\n","properties":{"main":{"type":["Object"],"description":"<p>场景主光源的设置，在 <a href=\"#globe\">globe</a> 组件中就是太阳光。</p>\n","properties":{"color":{"type":["string"],"default":"#fff"},"intensity":{"type":["number"],"default":1},"shadow":{"type":["boolean"],"default":false},"shadowQuality":{"type":["string"],"default":"'medium'"},"alpha":{"type":["number"],"default":40},"beta":{"type":["number"],"default":40}}},"ambient":{"type":["Object"],"description":"<p>全局的环境光设置。</p>\n","properties":{"color":{"type":["string"],"default":"#fff"},"intensity":{"type":["number"],"default":0.2}}},"ambientCubemap":{"type":["Object"],"description":"<p>ambientCubemap 会使用纹理作为光源的环境光， 会为物体提供漫反射和高光反射。可以通过 <a href=\"#series-map3D.light.ambientCubemap.diffuseIntensity\">diffuseIntensity</a> 和 <a href=\"#series-map3D.light.ambientCubemap.specularIntensity\">specularIntensity</a> 分别设置漫反射强度和高光反射强度。</p>\n","properties":{"texture":{"type":["string"]},"diffuseIntensity":{"type":["number"],"default":0.5},"specularIntensity":{"type":["number"],"default":0.5}}}}},"postEffect":{"type":["Object"],"description":"<p>后处理特效的相关配置，后处理特效可以为画面添加高光，景深，环境光遮蔽（SSAO），调色等效果。可以让整个画面更富有质感。</p>\n<p>下面分别是关闭和开启 <code>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\">\n <img src=\"documents/asset/gl/img/globe-posteffect-enable.png\" width=\"100%\" title=\"Enable\">\n</div>\n\n<p>注意在开启 postEffect 的时候默认会开启 <a href=\"#series-map3D.temporalSuperSampling\">temporalSuperSampling</a> 在画面静止后持续对画面增强，包括抗锯齿，景深，SSAO，阴影等。</p>\n","properties":{"enable":{"type":["boolean"],"default":false},"bloom":{"type":["Object"],"description":"<p>高光特效。高光特效用来表现很“亮”的颜色，因为传统的 RGB 只能表现<code>0 - 255</code>范围的颜色，所以对于超出这个范围特别“亮”的颜色，会通过这种高光溢出的特效去表现。如下图</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/globe-posteffect-bloom.png\"></p>\n","properties":{"enable":{"type":["boolean"],"default":false},"bloomIntensity":{"type":["number"],"default":0.1}}},"depthOfField":{"type":["Object"],"description":"<p>景深效果。景深效果是模拟摄像机的光学成像效果，在对焦的区域相对清晰，原理对焦的区域则会逐渐模糊。</p>\n<p>景深效果可以让观察者几种注意力到对焦的区域，而且让画面的镜头感更强，大景深还能塑造出微距的模型效果。</p>\n<p>下面分别是关闭和开启景深的区别。</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-no-dof.png\" width=\"100%\" title=\"Disable\">\n <img src=\"documents/asset/gl/img/geo-dof.png\" width=\"100%\" title=\"Enable\">\n</div>\n","properties":{"enable":{"type":["boolean"],"default":false},"focalDistance":{"type":["boolean"],"default":50},"focalRange":{"type":["boolean"],"default":20},"fstop":{"type":["number"],"default":2.8},"blurRadius":{"type":["number"],"default":10}}},"screenSpaceAmbientOcclusion":{"type":["Object"]},"SSAO":{"type":["Object"],"description":"<p>同 <a href=\"#series-map3D.postEffect.screenSpaceAmbientOcclusion\">screenSpaceAmbientOcclusion</a></p>\n","properties":{"enable":{"type":["boolean"],"default":false},"quality":{"type":["string"],"default":"'medium'"},"radius":{"type":["number"],"default":2},"intensity":{"type":["number"],"default":1}}},"colorCorrection":{"type":["Object"],"description":"<p>颜色纠正和调整。类似 Photoshop 中的 Color Adjustments</p>\n<p>下图同个场景调整为冷色系和暖色系的区别。</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/buildings-cold.jpg\" width=\"100%\" title=\"Cold\">\n <img src=\"documents/asset/gl/img/buildings-warm.jpg\" width=\"100%\" title=\"Warm\">\n</div>\n\n","properties":{"enable":{"type":["boolean"],"default":true},"lookupTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"]},"exposure":{"type":["number"],"default":0},"brightness":{"type":["number"],"default":0},"contrast":{"type":["number"],"default":1},"saturation":{"type":["number"],"default":1}}},"FXAA":{"type":["Object"],"description":"<p>在开启 <a href=\"#series-map3D.postEffect\">postEffect</a> 后，WebGL 默认的 MSAA 会无法使用。这时候通过 FXAA 可以廉价方便的解决抗锯齿的问题，FXAA 会对一些场景的边缘部分进行模糊从而解决锯齿的问题，这在一些场景上效果还不错，但是在 echarts-gl 中，需要保证很多文字和线条边缘的锐利清晰，因此 FXAA 并不是那么适用。这时候我们可以通过如下设置更高的<code>devicePixelRatio</code>来使用超采样</p>\n<pre><code class=\"lang-js\">var chart = echarts.init(dom, null, {\n devicePixelRatio: 2\n})\n</code></pre>\n<p>但是这种方法对电脑性能有很高的要求，所以更多时候我们建议使用 echarts-gl 中的 <a href=\"#series-map3D.temporalSuperSampling\">temporalSuperSampling</a>，在画面静止后会持续分帧对一个像素多次抖动采样，从而达到超采样抗锯齿的效果。</p>\n","properties":{"enable":{"type":["boolean"],"default":false}}}}},"temporalSuperSampling":{"type":["Object"],"description":"<p>分帧超采样。在开启 <a href=\"#series-map3D.postEffect\">postEffect</a> 后，WebGL 默认的 MSAA 会无法使用，所以我们需要自己解决锯齿的问题。</p>\n<p>分帧超采样就是用来解决锯齿的问题，它在画面静止后会持续分帧对一个像素多次抖动采样，从而达到抗锯齿的效果。而且在这个分帧采样的过程中，echarts-gl 也会对 <a href=\"#series-map3D.postEffect\">postEffect</a> 中一些需要采样保证效果的特效，例如 <a href=\"#series-map3D.postEffect.SSAO\">SSAO</a>, <a href=\"#series-map3D.postEffect.depthOfField\">景深</a>，以及阴影进行渐进增强。</p>\n<p>下面是未开启和开启<code>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\">\n <img src=\"documents/asset/gl/img/surface-taa.png\" width=\"100%\" title=\"AA\">\n</div>\n","properties":{"enable":{"type":["boolean"],"default":"'auto'"}}},"viewControl":{"type":["Object"],"description":"<p><code>viewControl</code>用于鼠标的旋转，缩放等视角控制。</p>\n","properties":{"projection":{"type":["string"],"default":"perspective"},"autoRotate":{"type":["boolean"],"default":false},"autoRotateDirection":{"type":["string"],"default":"cw"},"autoRotateSpeed":{"type":["number"],"default":10},"autoRotateAfterStill":{"type":["number"],"default":3},"damping":{"type":["number"],"default":0.8},"rotateSensitivity":{"type":["number","Array"],"default":1},"zoomSensitivity":{"type":["number"],"default":1},"panSensitivity":{"type":["number"],"default":1},"panMouseButton":{"type":["string"],"default":"left"},"rotateMouseButton":{"type":["string"],"default":"middle"},"distance":{"type":["number"],"default":100},"minDistance":{"type":["number"],"default":40},"maxDistance":{"type":["number"],"default":400},"orthographicSize":{"type":["number"],"default":100},"maxOrthographicSize":{"type":["number"],"default":20},"minOrthographicSize":{"type":["number"],"default":400},"alpha":{"type":["number"],"default":40},"beta":{"type":["number"],"default":0},"center":{"type":["Array"]},"minAlpha":{"type":["number"],"default":5},"maxAlpha":{"type":["number"],"default":90},"minBeta":{"type":["number"],"default":-80},"maxBeta":{"type":["number"],"default":80},"animation":{"type":["boolean"],"default":true},"animationDurationUpdate":{"type":["number"],"default":1000},"animationEasingUpdate":{"type":["string"],"default":"cubicInOut"}}},"zlevel":{"type":["number"],"default":-10},"left":{"type":["string","number"],"default":"auto"},"top":{"type":["string","number"],"default":"auto"},"right":{"type":["string","number"],"default":"auto"},"bottom":{"type":["string","number"],"default":"auto"},"width":{"type":["string","number"],"default":"auto"},"height":{"type":["string","number"],"default":"auto"}}},{"type":["Object"],"description":"<p>曲面图。支持通过 <a href=\"#series-surface.parametric\">parametric</a> 绘制<a href=\"https://en.wikipedia.org/wiki/Parametric_surface\" target=\"_blank\">参数曲面</a>。</p>\n<p>下图就是一个配置成金属材质的类似一个金属零件的参数曲面。</p>\n<p><img width=\"500\" height=\"auto\" src=\"documents/asset/gl/img/parametric-surface.png\"></p>\n","properties":{"type":{"type":["string"],"default":"'surface'"},"name":{"type":["string"]},"coordinateSystem":{"type":["string"],"default":"cartesian3D"},"grid3DIndex":{"type":["number"],"default":0},"parametric":{"type":["boolean"],"default":false},"wireframe":{"type":["Object"],"description":"<p>曲面图的网格线。</p>\n","properties":{"show":{"type":["boolean"],"default":true},"lineStyle":{"type":["Object"],"description":"<p>网格线的样式。</p>\n","properties":{"color":{"type":["string"],"default":"#222"},"opacity":{"type":["number"],"default":1},"width":{"type":["number"],"default":1}}}}},"equation":{"type":["Object"],"description":"<p>曲面的函数表达式。如果需要展示的是函数曲面，可以不设置 <a href=\"#series-surface.data\">data</a>，通过 <a href=\"#series-surface.equation\">equation</a> 去声明函数表达式。例如通过下面这个函数可以模拟波纹效果。</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>自变量 x。</p>\n","properties":{"step":{"type":["number"]},"min":{"type":["number"]},"max":{"type":["number"]}}},"y":{"type":["Object"],"description":"<p>自变量 y。</p>\n","properties":{"step":{"type":["number"]},"min":{"type":["number"]},"max":{"type":["number"]}}},"z":{"type":["Function"]}}},"parametricEquation":{"type":["Object"],"description":"<p>曲面的<a href=\"https://zh.wikipedia.org/wiki/%E5%8F%83%E6%95%B8%E6%96%B9%E7%A8%8B\" target=\"_blank\">参数方程</a>。在不设置 <a href=\"#series-surface.data\">data</a>，可以通过 <a href=\"#series-surface.equation\">parametricEquation</a> 去声明参数参数方程。在 <a href=\"#series-surface\">parametric</a> 为<code>true</code>时有效。</p>\n<p>参数方程是 <a href=\"#series-surface.parametricEquation.x\">x</a>, <a href=\"#series-surface.parametricEquation.y\">y</a>, <a href=\"#series-surface.parametricEquation.z\">z</a> 关于参数 <a href=\"#series-surface.parametricEquation.u\">u</a>，<a href=\"#series-surface.parametricEquation.v\">v</a> 的方程。\n下面的参数方程就是绘制前面图中类似一个金属零件的参数曲面的。</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>自变量 u。</p>\n","properties":{"step":{"type":["number"]},"min":{"type":["number"]},"max":{"type":["number"]}}},"v":{"type":["Object"],"description":"<p>自变量 v。</p>\n","properties":{"step":{"type":["number"]},"min":{"type":["number"]},"max":{"type":["number"]}}},"x":{"type":["Function"]},"y":{"type":["Function"]},"z":{"type":["Function"]}}},"itemStyle":{"type":["Object"],"description":"<p>曲面的颜色和不透明度等样式。</p>\n","properties":{"color":{"type":["string"],"default":"自适应"},"opacity":{"type":["number"],"default":1}}},"data":{"type":["Array"],"description":"<p>曲面图的数据数组。</p>\n<p>数据是线性存储的数组，包含<code>X 顶点数</code>x<code>Y 顶点数</code>个数据。一个 5 x 5 的曲面共有 25 个顶点，数据在数组中的索引如下</p>\n<p><img width=\"400\" height=\"auto\" src=\"documents/asset/gl/img/surface-index.png\"></p>\n<p>上图使用的数据：</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>每一项分别为 <code>x</code>, <code>y</code>, <code>z</code>。</p>\n<p>对于参数方程来说，每一项需要存储五个数据，分别是 <code>x</code>, <code>y</code>, <code>z</code> 和参数 <code>u</code>, <code>v</code>。而数据的索引按照<code>u</code>, <code>v</code> 的顺序。例如下面的数据：</p>\n<pre><code class=\"lang-js\">data: [\n // v 为 0，u 从 -3.14 到 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 为 1.57，u 从 -3.14 到 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 为 3.14，u 从 -3.14 到 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>有些时候我们需要指定每个数据项的名称，这时候需要每个项为一个对象：</p>\n<pre><code class=\"lang-js\">[{\n // 数据项的名称\n name: '数据1',\n // 数据项值\n value: [12, 14, 10]\n}, {\n name: '数据2',\n value: [34, 50, 15]\n}]\n</code></pre>\n<p>需要对个别内容指定进行个性化定义时：</p>\n<pre><code class=\"lang-js\">[{\n name: '数据1',\n value: [12, 14, 10]\n}, {\n // 数据项名称\n name: '数据2',\n value : [34, 50, 15],\n //自定义特殊itemStyle，仅对该item有效\n itemStyle:{}\n}]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"]},"value":{"type":["Array"]},"itemStyle":{"type":["Object"],"description":"<p>单个数据项的样式设置。</p>\n","properties":{"color":{"type":["string"],"default":"自适应"},"opacity":{"type":["number"],"default":1}}}}}},"shading":{"type":["string"]},"realisticMaterial":{"type":["Object"],"description":"<p>真实感材质相关的配置项，在 <a href=\"#series-surface.shading\">shading</a> 为<code>'realistic'</code>时有效。</p>\n","properties":{"detailTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"]},"textureTiling":{"type":["number"],"default":1},"textureOffset":{"type":["number"],"default":0},"roughness":{"type":["number","string","HTMLImageElement","HTMLCanvasElement"],"default":0.5},"metalness":{"type":["number","string","HTMLImageElement","HTMLCanvasElement"],"default":0},"roughnessAdjust":{"type":["number"],"default":0.5},"metalnessAdjust":{"type":["number"],"default":0.5},"normalTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"]}}},"lambertMaterial":{"type":["Object"],"description":"<p>lambert 材质相关的配置项，在 <a href=\"#series-surface.shading\">shading</a> 为<code>'lambert'</code>时有效。</p>\n","properties":{"detailTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"]},"textureTiling":{"type":["number"],"default":1},"textureOffset":{"type":["number"],"default":0}}},"colorMaterial":{"type":["Object"],"description":"<p>color 材质相关的配置项，在 <a href=\"#series-surface.shading\">shading</a> 为<code>'color'</code>时有效。</p>\n","properties":{"detailTexture":{"type":["string","HTMLImageElement","HTMLCanvasElement"]},"textureTiling":{"type":["number"],"default":1},"textureOffset":{"type":["number"],"default":0}}},"zlevel":{"type":["number"],"default":-10},"silent":{"type":["boolean"],"default":false},"animation":{"type":["boolean"],"default":true},"animationDurationUpdate":{"type":["number"],"default":500},"animationEasingUpdate":{"type":["string"],"default":"cubicOut"}}},{"type":["Object"],"description":"<p><code>polygons3D</code> 用于可视化地图上带有高度信息的多边形数据，常用于建筑群的绘制。下图就是用<code>polygons3D</code>绘制的近 50w 数量的纽约建筑群。</p>\n<p><img width=\"900\" height=\"auto\" src=\"documents/asset/gl/img/polygons3D-ny.jpg\"></p>\n","properties":{"type":{"type":["string"],"default":"'polygons3D'"},"multiPolygon":{"type":["boolean"],"default":true},"itemStyle":{"type":["Object"],"description":"<p>图形样式，包括颜色，透明度，描边等。</p>\n","properties":{"color":{"type":["string","Function"],"default":"自适应"},"opacity":{"type":["number"],"default":1}}},"emphasis":{"type":["Object"],"description":"<p>鼠标 hover 高亮时图形和标签的样式</p>\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["string"],"default":"自适应"},"opacity":{"type":["number"],"default":1}}}}},"data":{"type":["Object"],"description":"<p>多边形的数据列表。</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"]}}},"progressiveThreshold":{"type":["number"],"default":1000},"progressive":{"type":["number"],"default":1000}}},{"type":["Object"],"description":"<p>使用 WebGL 绘制的二维散点/气泡图。</p>\n<p>使用方式同 <a href=\"http://echarts.baidu.com/option.html#series-scatter\" target=\"_blank\">scatter</a>。</p>\n","properties":{"type":{"type":["string"],"default":"'scatterGL'"},"name":{"type":["string"]},"coordinateSystem":{"type":["string"],"default":"'cartesian2d'"},"symbol":{"type":["string"],"default":"'circle'"},"symbolSize":{"type":["number","Array","Function"],"default":10},"itemStyle":{"type":["Object"],"description":"<p>散点图的样式设置。</p>\n","properties":{"color":{"type":["string"],"default":"自适应"},"opacity":{"type":["number"],"default":0.8},"borderWidth":{"type":["number"],"default":0},"borderColor":{"type":["string"],"default":"'#fff'"}}},"data":{"type":["Array"],"description":"<p>散点图的数据集。</p>\n<p>数据格式同 <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"]},"value":{"type":["number","Array"]},"itemStyle":{"type":["Object"],"description":"<p>单个数据图形的样式。</p>\n","properties":{"color":{"type":["string"],"default":"自适应"},"opacity":{"type":["number"],"default":0.8},"borderWidth":{"type":["number"],"default":0},"borderColor":{"type":["string"],"default":"'#fff'"}}}}}},"blendMode":{"type":["string"],"default":"'source-over'"},"zlevel":{"type":["number"],"default":10},"progressiveThreshold":{"type":["number"],"default":100000},"progressive":{"type":["number"],"default":100000}}},{"type":["Object"],"description":"<p>使用 WebGL 绘制的关系图，支持大规模的网络/关系数据的布局和绘制。</p>\n","properties":{"type":{"type":["string"],"default":"'graphGL'"},"name":{"type":["string"]},"layout":{"type":["string"],"default":"'forceAtlas2'"},"forceAtlas2":{"type":["Object"],"description":"<p><a href=\"https://github.com/gephi/gephi/wiki/Force-Atlas-2\" target=\"_blank\">forceAtlas2</a> 布局算法。</p>\n<p>该算法对大规模的网络数据有着高效的布局效率和稳定的布局结果。</p>\n<p>支持通过 <a href=\"#series-graphGL.forceAtlas2.GPU\">forceAtlas2.GPU</a> 配置为 GPU 还是 CPU 布局。</p>\n<p>CPU 实现的优势是兼容性好，而 GPU 实现在高端显卡中有着数十倍甚至上百倍的性能优势。</p>\n<p>下面是在 GTX1070 和 i7 4GHz 的电脑中对一个 2w 个节点，近 5w 条边的关系图一次布局的迭代的性能对比。</p>\n<p><img width=\"400\" height=\"auto\" src=\"documents/asset/gl/img/gpu-layout-perf.png\"></p>\n","properties":{"GPU":{"type":["boolean"],"default":true},"steps":{"type":["number"],"default":1},"stopThreshold":{"type":["number"],"default":1},"barnesHutOptimize":{"type":["boolean"]},"repulsionByDegree":{"type":["number"],"default":true},"linLogMode":{"type":["boolean"],"default":false},"gravity":{"type":["number"],"default":1},"gravityCenter":{"type":["Array"]},"scaling":{"type":["number"]},"edgeWeightInfluence":{"type":["number"],"default":1},"edgeWeight":{"type":["Array","number"],"default":"[1, 4]"},"nodeWeight":{"type":["Array","number"],"default":"[1, 4]"},"preventOverlap":{"type":["boolean"],"default":false}}},"symbol":{"type":["string"],"default":"'circle'"},"symbolSize":{"type":["number","Array","Function"],"default":5},"itemStyle":{"type":["Object"],"description":"<p>节点的样式设置。</p>\n","properties":{"color":{"type":["string"],"default":"自适应"},"opacity":{"type":["number"],"default":1},"borderWidth":{"type":["number"],"default":0},"borderColor":{"type":["string"],"default":"'#fff'"}}},"lineStyle":{"type":["Object"],"description":"<p>关系边的样式设置。</p>\n","properties":{"color":{"type":["string"],"default":"#aaa"},"opacity":{"type":["number"],"default":1},"width":{"type":["number"],"default":1}}},"data":{"type":["Array"],"description":"<p>节点的数据集。</p>\n<p>数据格式同 <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"]},"value":{"type":["number","Array"]},"itemStyle":{"type":["Object"],"description":"<p>单个节点的样式。</p>\n","properties":{"color":{"type":["string"],"default":"自适应"},"opacity":{"type":["number"],"default":1},"borderWidth":{"type":["number"],"default":0},"borderColor":{"type":["string"],"default":"'#fff'"}}}}}},"nodes":{"type":["Array"]},"links":{"type":["Array"],"description":"<p>节点间的关系数据。\n数据格式同 <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"]},"target":{"type":["string"]},"value":{"type":["number"]},"lineStyle":{"type":["Object"],"description":"<p>单条边的样式。</p>\n","properties":{"color":{"type":["string"],"default":"#aaa"},"opacity":{"type":["number"],"default":1},"width":{"type":["number"],"default":1}}}}}},"edges":{"type":["Array"]},"zlevel":{"type":["number"],"default":10}}},{"type":["Object"],"description":"<p><code>flowGL</code> 组件通过 WebGL 实现的粒子效果可视化向量场的迹线。</p>\n<p>下图是全球的风场通过<code>flowGL</code>可视化后的效果。</p>\n<p><img width=\"700\" height=\"auto\" src=\"documents/asset/gl/img/flowGL-wind.jpg\"></p>\n","properties":{"type":{"type":["string"],"default":"'flowGL'"},"particleDensity":{"type":["number"],"default":128},"particleType":{"type":["string"],"default":"'point'"},"particleSize":{"type":["number"],"default":1},"particleSpeed":{"type":["number"],"default":1},"particleTrail":{"type":["number"],"default":2},"supersampling":{"type":["number"],"default":1},"gridWidth":{"type":["number","string"],"default":"'auto'"},"gridHeight":{"type":["number","string"],"default":"'auto'"},"data":{"type":["Array"]},"itemStyle":{"type":["Object"],"description":"<p>向量场迹线的样式。</p>\n","properties":{"color":{"type":["string"],"default":"'#fff'"},"opacity":{"type":["number"],"default":0.8}}}}}]},"description":"<p>系列列表。每个系列通过 <code>type</code> 决定自己的图表类型。</p>\n<p>echarts-gl 加入了丰富的三维可视化类型，包括 <a href=\"#series.bar3D\">三维柱状图 bar3D</a>，<a href=\"#series.scatter3D\">三维散点图 scatter3D</a>，<a href=\"#series.lines3D\">三维飞线 lines3D</a>，<a href=\"#series.surface\">曲面图 surface</a>，大部分可视化类型都能在多种坐标系组件中使用。而且与 echarts 原先的图例，tooltip 等交互组件有良好的集成。</p>\n<p>同时对原先二维的图表也有功能上的增强，对于大量数据的散点图和关系图，你可以使用 echarts-gl 中提供的 <a href=\"#series.scatterGL\">scatterGL</a>，<a href=\"#series.graphGL\">graphGL</a> 加速绘制和运算。</p>\n"}}}} |