| {"option":{"properties":{"globe":{"properties":{"show":{"description":"<p>是否显示地球组件。</p>\n"},"globeRadius":{"description":"<p>地球的半径。单位相对于三维空间，跟 <a href=\"#globe.viewControl.distance\">viewControl.distance</a> 相关。</p>\n"},"globeOuterRadius":{"description":"<p>地球的外半径。<code>globeRadius</code> 到 <code>globeOuterRadius</code> 之间这篇区域会被用于展示三维柱状图，散点图等。</p>\n"},"environment":{"description":"<p>环境贴图，支持純颜色值，渐变色，全景贴图的 url。默认为 <code>'auto'</code>，在配置有 <a href=\"#globe.light.ambientCubemap.texture\">light.ambientCubemap.texture</a> 的时候会使用该纹理作为环境贴图。否则则不显示环境贴图。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">// 配置为全景贴图\nenvironment: 'asset/starfield.jpg'\n// 配置为纯黑色的背景\nenvironment: '#000'\n// 配置为垂直渐变的背景\nenvironment: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{\n offset: 0, color: '#00aaff' // 天空颜色\n}, {\n offset: 0.7, color: '#998866' // 地面颜色\n}, {\n offset: 1, color: '#998866' // 地面颜色\n}], false)\n</code></pre>\n"},"baseTexture":{"description":"<p>地球的纹理。支持图片路径字符串，图片或者 Canvas 的对象。</p>\n<p>也支持直接使用 echarts 的实例作为纹理，此时在地球上的鼠标动作会跟纹理上使用的 echarts 实例有联动。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">// 使用地球的纹理图片\nbaseTexture: 'asset/earth.jpg'\n\n\n// 使用 echarts 绘制世界地图的实例作为纹理\nvar canvas = document.createElement('canvas');\nvar mapChart = echarts.init(canvas, null, {\n width: 4096, height: 2048\n});\nmapChart.setOption({\n series : [\n {\n type: 'map',\n map: 'world',\n // 绘制完整尺寸的 echarts 实例\n top: 0, left: 0,\n right: 0, bottom: 0,\n boundingCoords: [[-180, 90], [180, -90]]\n }\n ]\n});\n...\nbaseTexture: mapChart\n</code></pre>\n"},"heightTexture":{"description":"<p>地球的高度纹理。高度纹理可以用于<a href=\"https://zh.wikipedia.org/wiki/%E5%87%B9%E5%87%B8%E8%B4%B4%E5%9B%BE\" target=\"_blank\">凹凸贴图</a>表现地球表面的明暗细节。下面两图分别是使用<code>heightTexture</code>和未使用<code>heightTexuture</code>的效果区别。</p>\n<p><img width=\"400\" height=\"auto\" src=\"documents/asset/gl/img/heightmap-enable.png\"></p>\n<p><img width=\"400\" height=\"auto\" src=\"documents/asset/gl/img/heightmap-disable.png\"></p>\n"},"displacementTexture":{"description":"<p>地球顶点的置换纹理，默认同 <a href=\"#globe.heightTexture\">heightTexture</a>。</p>\n<p>相比于凹凸贴图，顶点的置换是根据纹理直接对顶点做位移。在 <a href=\"#globe.displaymentScale\">displaymentScale</a> 大于 0 时有效。</p>\n"},"displacementScale":{"description":"<p>地球顶点位移的大小。默认为 0， 也就是没位移，下面两图分别是设置不同的<code>displacementScale</code>的效果</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/displacement-disable.png\" width=\"100%\" title=\"Scale: 0\">\n <img src=\"documents/asset/gl/img/displacement-enable.png\" width=\"100%\" title=\"Scale: 0.1\">\n</div>\n"},"displacementQuality":{"description":"<p>地球顶点位移的质量。支持设置成 <code>'low'</code>, <code>'medium'</code>, <code>'high'</code>, <code>'ultra'</code> 。更高的质量能够表现更多的地表高度细节。下面截图分别是不同<code>displacementQuality</code>的效果</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/displacement-low.png\" width=\"100%\" title=\"Low\">\n <img src=\"documents/asset/gl/img/displacement-ultra.png\" width=\"100%\" title=\"Ultra\">\n</div>\n\n\n\n"},"shading":{"description":"<p>地球中三维图形的着色效果，echarts-gl 中支持下面三种着色方式</p>\n<ul>\n<li><p><code>'color'</code>\n只显示颜色，不受光照等其它因素的影响。</p>\n</li>\n<li><p><code>'lambert'</code>\n通过经典的 <a href=\"https://en.wikipedia.org/wiki/Lambertian_reflectance\" target=\"_blank\">lambert</a> 着色表现光照带来的明暗。</p>\n</li>\n<li><p><code>'realistic'</code>\n真实感渲染，配合 <a href=\"#globe.light.ambientCubemap\">light.ambientCubemap</a> 和 <a href=\"#globe.postEffect\">postEffect</a> 使用可以让展示的画面效果和质感有质的提升。ECharts GL 中使用了<a href=\"https://www.marmoset.co/posts/physically-based-rendering-and-you-can-too/\" target=\"_blank\">基于物理的渲染（PBR）</a> 来表现真实感材质。</p>\n</li>\n</ul>\n<p>下面是不同着色效果的区别</p>\n<p><img width=\"250\" height=\"auto\" src=\"documents/asset/gl/img/globe-shading-color.png\">\n<img width=\"250\" height=\"auto\" src=\"documents/asset/gl/img/globe-shading-lambert.png\">\n<img width=\"250\" height=\"auto\" src=\"documents/asset/gl/img/globe-shading-realistic.png\"></p>\n"},"realisticMaterial":{"properties":{"detailTexture":{"description":"<p>材质细节的纹理贴图。</p>\n"},"textureTiling":{"description":"<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>detailTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n"},"textureOffset":{"description":"<p>材质细节纹理的位移。</p>\n"},"roughness":{"description":"<p><code>roughness</code>属性用于表示材质的粗糙度，<code>0</code>为完全光滑，<code>1</code>完全粗糙，中间的值则是介于这两者之间。</p>\n<p>下图是 <a href=\"#globe\">globe</a> 中<code>roughness</code>分别是<code>0.2</code>（光滑）与<code>0.8</code>（粗糙）的效果</p>\n<p><img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-gloss.png\">\n<img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-rough.png\"></p>\n<p>当你想要表达更复杂的材质时。你可以直接将 <code>roughness</code> 设置为如下用每个像素存储粗糙度的贴图。</p>\n<p><img width=\"300\" height=\"300\" src=\"documents/asset/gl/img/roughness.png\"></p>\n<p>贴图中颜色越白的地方值越大，也就是越粗糙。你可以从 <a href=\"http://freepbr.com/\" target=\"_blank\">http://freepbr.com/</a> 等资源网站获取不同材质的贴图资源，也可以自己使用工具生成。</p>\n"},"metalness":{"description":"<p><code>metalness</code>属性用于表示材质是金属还是非金属，<code>0</code>为非金属，<code>1</code>为金属，中间的值则是介于这两者之间，但是通常设成<code>0</code>和<code>1</code>就能满足大部分场景了</p>\n<p>下图是 <a href=\"#globe\">globe</a> 中<code>metalness</code>分别设成<code>1</code>与<code>0</code>的效果区别。</p>\n<p><img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-metal.png\">\n<img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-non-metal.png\"></p>\n<p>跟 <a href=\"#globe.realisticMaterial.roughness\">roughness</a> 一样 你可以直接将 <code>metalness</code> 设置为金属度贴图。</p>\n"},"roughnessAdjust":{"description":"<p>粗糙度调整，在使用粗糙度贴图的时候有用。可以对贴图整体的粗糙度进行调整。默认为 0.5 的时候不调整，0 的时候变成完全光滑，1 的时候变成完全粗糙。</p>\n"},"metalnessAdjust":{"description":"<p>金属度调整，在使用金属度贴图的时候有用。可以对贴图整体的金属度进行调整。默认为 0.5 的时候不调整，0 的时候变成非金属，1 的时候变成金属。</p>\n"},"normalTexture":{"description":"<p>材质细节的法线贴图。</p>\n<p>使用法线贴图可以在较少的顶点下依然表现出物体表面丰富的明暗细节。</p>\n"}}},"lambertMaterial":{"properties":{"detailTexture":{"description":"<p>材质细节的纹理贴图。</p>\n"},"textureTiling":{"description":"<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>detailTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n"},"textureOffset":{"description":"<p>材质细节纹理的位移。</p>\n"}}},"colorMaterial":{"properties":{"detailTexture":{"description":"<p>材质细节的纹理贴图。</p>\n"},"textureTiling":{"description":"<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>detailTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n"},"textureOffset":{"description":"<p>材质细节纹理的位移。</p>\n"}}},"light":{"properties":{"main":{"properties":{"color":{"description":"<p>主光源的颜色。</p>\n"},"intensity":{"description":"<p>主光源的强度。</p>\n"},"shadow":{"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-shadow.png\" width=\"100%\" title=\"Shadow\">\n <img src=\"documents/asset/gl/img/geo-no-shadow.png\" width=\"100%\" title=\"No Shadow\">\n</div>\n"},"shadowQuality":{"description":"<p>阴影的质量。可选<code>'low'</code>, <code>'medium'</code>, <code>'high'</code>, <code>'ultra'</code></p>\n<p>下图是低质量和高质量阴影的区别。</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-shadow-low.png\" width=\"100%\" title=\"Low\">\n <img src=\"documents/asset/gl/img/geo-shadow-high.png\" width=\"100%\" title=\"High\">\n</div>\n"},"alpha":{"description":"<p>主光源绕 x 轴，即上下旋转的角度。配合 <a href=\"#globe.light.main.beta\">beta</a> 控制光源的方向。</p>\n<p>如下示意图：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/light-alpha-beta.png\"></p>\n<p><a href=\"#globe\">globe</a> 组件中可以通过 <a href=\"#globe.light.main.time\">time</a> 控制日光的时间。</p>\n"},"beta":{"description":"<p>主光源绕 y 轴，即左右旋转的角度。</p>\n"},"time":{"description":"<p>日照的时间，默认使用当前的系统时间。</p>\n"}}},"ambient":{"properties":{"color":{"description":"<p>环境光的颜色。</p>\n"},"intensity":{"description":"<p>环境光的强度。</p>\n"}}},"ambientCubemap":{"properties":{"texture":{"description":"<p>环境光纹理的 url，支持使用<code>.hdr</code>格式的 HDR 贴图。可以从 <a href=\"http://www.hdrlabs.com/sibl/archive.html\" target=\"_blank\">http://www.hdrlabs.com/sibl/archive.html</a> 等网站获取 <code>.hdr</code> 的资源。</p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">ambientCubemap: {\n texture: 'pisa.hdr',\n // 解析 hdr 时使用的曝光值\n exposure: 1.0\n}\n</code></pre>\n"},"diffuseIntensity":{"description":"<p>漫反射的强度。</p>\n"},"specularIntensity":{"description":"<p>高光反射的强度。</p>\n"}}}}},"postEffect":{"properties":{"enable":{"description":"<p>是否开启后处理特效，默认关闭。</p>\n"},"bloom":{"properties":{"enable":{"description":"<p>是否开启光晕特效。</p>\n"},"bloomIntensity":{"description":"<p>光晕的强度，默认为 0.1</p>\n"}}},"depthOfField":{"properties":{"enable":{"description":"<p>是否开启景深</p>\n"},"focalDistance":{"description":"<p>初始的焦距，用户可以点击区域自动聚焦。</p>\n"},"focalRange":{"description":"<p>完全聚焦的区域范围，在此范围内的物体时完全清晰的，不会有模糊</p>\n"},"fstop":{"description":"<p>镜头的<a href=\"https://zh.wikipedia.org/wiki/%E7%84%A6%E6%AF%94\" target=\"_blank\">F值</a>，值越小景深越浅。</p>\n"},"blurRadius":{"description":"<p>焦外的模糊半径</p>\n<p>不同模糊半径的区别：</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-dof-small.png\" width=\"100%\" title=\"blurSize: 3\">\n <img src=\"documents/asset/gl/img/geo-dof-large.png\" width=\"100%\" title=\"blurSize: 10\">\n</div>\n"}}},"screenSpaceAmbientOcclusion":{"description":"<p>屏幕空间的环境光遮蔽效果。环境光遮蔽可以让角落，缝隙等大部分光无法到达的区域变暗，是传统的阴影贴图的补充，可以让整个场景更加自然，有层次。</p>\n<p>下面是无 SSAO 和有 SSAO 的对比。</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-no-ssao.png\" width=\"100%\" title=\"No SSAO\">\n <img src=\"documents/asset/gl/img/geo-ssao.png\" width=\"100%\" title=\"SSAO\">\n</div>\n"},"SSAO":{"properties":{"enable":{"description":"<p>是否开启环境光遮蔽，默认不开启</p>\n"},"quality":{"description":"<p>环境光遮蔽的质量，支持<code>'low'</code>, <code>'medium'</code>, <code>'high'</code>, <code>'ultra'</code></p>\n"},"radius":{"description":"<p>环境光遮蔽的采样半径。半径越大效果越自然，但是需要设置较高的<code>'quality'</code>。</p>\n<p>下面是半径值较小与较大之间的区别</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-ssao-small-radius.png\" width=\"100%\" title=\"Radius: 1\">\n <img src=\"documents/asset/gl/img/geo-ssao-large-radius.png\" width=\"100%\" title=\"Radius: 10\">\n</div>\n"},"intensity":{"description":"<p>环境光遮蔽的强度。值越大颜色越深。</p>\n"}}},"colorCorrection":{"properties":{"enable":{"description":"<p>是否开启颜色纠正</p>\n"},"lookupTexture":{"description":"<p>颜色查找表，推荐使用。</p>\n<p>颜色查找表是一张像下面这样的纹理图片。</p>\n<p><img width=\"200\" height=\"auto\" src=\"documents/asset/gl/img/lookup.png\"></p>\n<p>这张是基础的查找表图片，你可以直接拿来使用，为了方便将场景色调调整你想要的效果，你可以将场景截图后在 Photoshop 等图像处理软件中调整颜色到想要的效果，然后将相同的调整应用到上面这张查找表的图片上。</p>\n<p>比如调成冷色调后，查找表的纹理图片就会成为下面这样：</p>\n<p><img width=\"200\" height=\"auto\" src=\"documents/asset/gl/img/crispwinter.png\"></p>\n<p>然后那这张纹理图片就作为该配置项的值，就可以得到相同的你在 Photoshop 上的效果了。</p>\n<p>当然如果你只是想得到一张截图，完全不用再这样折腾，但是如果你想在能实时交互的作品中也能方便的调整到理想的色调，这个就非常有用了。</p>\n"},"exposure":{"description":"<p>画面的曝光。</p>\n"},"brightness":{"description":"<p>画面的亮度。</p>\n"},"contrast":{"description":"<p>画面的对比度。</p>\n"},"saturation":{"description":"<p>画面的饱和度。</p>\n"}}},"FXAA":{"properties":{"enable":{"description":"<p>是否开启 FXAA，默认关闭。</p>\n"}}}}},"temporalSuperSampling":{"properties":{"enable":{"description":"<p>是否开启分帧超采样。默认在开启 <a href=\"#globe.postEffect\">postEffect</a> 后也会同步开启。</p>\n"}}},"viewControl":{"properties":{"projection":{"description":"<p>投影方式，默认为透视投影<code>'perspective'</code>，也支持设置为正交投影<code>'orthographic'</code>。</p>\n"},"autoRotate":{"description":"<p>是否开启视角绕物体的自动旋转查看。</p>\n"},"autoRotateDirection":{"description":"<p>物体自传的方向。默认是 <code>'cw'</code> 也就是从上往下看是顺时针方向，也可以取 <code>'ccw'</code>，既从上往下看为逆时针方向。</p>\n"},"autoRotateSpeed":{"description":"<p>物体自传的速度。单位为<code>角度 / 秒</code>，默认为<code>10</code> ，也就是<code>36</code>秒转一圈。</p>\n"},"autoRotateAfterStill":{"description":"<p>在鼠标静止操作后恢复自动旋转的时间间隔。在开启 <a href=\"#globe.viewControl.autoRotate\">autoRotate</a> 后有效。</p>\n"},"damping":{"description":"<p>鼠标进行旋转，缩放等操作时的迟滞因子，在大于 0 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。</p>\n"},"rotateSensitivity":{"description":"<p>旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。</p>\n<p>默认为``</p>\n<p>设置为<code>0</code>后无法旋转。</p>\n<pre><code class=\"lang-js\">// 无法旋转\nrotateSensitivity: 0\n// 只能横向旋转\nrotateSensitivity: [1, 0]\n// 只能纵向旋转\nrotateSensitivity: [0, 1]\n</code></pre>\n"},"zoomSensitivity":{"description":"<p>缩放操作的灵敏度，值越大越灵敏。默认为``</p>\n<p>设置为<code>0</code>后无法缩放。</p>\n"},"panSensitivity":{"description":"<p>平移操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的平移灵敏度</p>\n<p>默认为``</p>\n<p>设置为<code>0</code>后无法平移。</p>\n"},"panMouseButton":{"description":"<p>平移操作使用的鼠标按键，支持：</p>\n<ul>\n<li><p><code>'left'</code> 鼠标左键（默认）</p>\n</li>\n<li><p><code>'middle'</code> 鼠标中键</p>\n</li>\n<li><p><code>'right'</code> 鼠标右键</p>\n</li>\n</ul>\n<p>注意：如果设置为鼠标右键则会阻止默认的右键菜单。</p>\n"},"rotateMouseButton":{"description":"<p>旋转操作使用的鼠标按键，支持：</p>\n<ul>\n<li><p><code>'left'</code> 鼠标左键</p>\n</li>\n<li><p><code>'middle'</code> 鼠标中键（默认）</p>\n</li>\n<li><p><code>'right'</code> 鼠标右键</p>\n</li>\n</ul>\n<p>注意：如果设置为鼠标右键则会阻止默认的右键菜单。</p>\n"},"distance":{"description":"<p>默认视角距离主体的距离，对于 <a href=\"#globe\">globe</a> 来说是距离地球表面的距离，对于 <a href=\"#grid3D\">grid3D</a> 和 <a href=\"#geo3D\">geo3D</a> 等其它组件来说是距离中心原点的距离。在 <a href=\"#globe.viewControl.projection\">projection</a> 为<code>'perspective'</code>的时候有效。</p>\n"},"minDistance":{"description":"<p>视角通过鼠标控制能拉近到主体的最小距离。在 <a href=\"#globe.viewControl.projection\">projection</a> 为<code>'perspective'</code>的时候有效。</p>\n"},"maxDistance":{"description":"<p>视角通过鼠标控制能拉远到主体的最大距离。在 <a href=\"#globe.viewControl.projection\">projection</a> 为<code>'perspective'</code>的时候有效。</p>\n"},"orthographicSize":{"description":"<p>正交投影的大小。在 <a href=\"#globe.viewControl.projection\">projection</a> 为<code>'orthographic'</code>的时候有效。</p>\n"},"maxOrthographicSize":{"description":"<p>正交投影缩放的最大值。在 <a href=\"#globe.viewControl.projection\">projection</a> 为<code>'orthographic'</code>的时候有效。</p>\n"},"minOrthographicSize":{"description":"<p>正交投影缩放的最小值。在 <a href=\"#globe.viewControl.projection\">projection</a> 为<code>'orthographic'</code>的时候有效。</p>\n"},"alpha":{"description":"<p>视角绕 x 轴，即上下旋转的角度。配合 <a href=\"#globe.light.main.beta\">beta</a> 可以控制视角的方向。</p>\n<p>如下示意图：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/view-alpha-beta.png\"></p>\n"},"beta":{"description":"<p>视角绕 y 轴，即左右旋转的角度。</p>\n"},"center":{"description":"<p>视角中心点，旋转也会围绕这个中心点旋转，默认为<code>[0,0,0]</code>。</p>\n"},"minAlpha":{"description":"<p>上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。</p>\n"},"maxAlpha":{"description":"<p>上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。</p>\n"},"minBeta":{"description":"<p>左右旋转的最小 beta 值。即视角能旋转到达最左的角度。</p>\n"},"maxBeta":{"description":"<p>左右旋转的最大 beta 值。即视角能旋转到达最右的角度。</p>\n"},"animation":{"description":"<p>是否开启动画。</p>\n"},"animationDurationUpdate":{"description":"<p>过渡动画的时长。</p>\n"},"animationEasingUpdate":{"description":"<p>过渡动画的缓动效果。</p>\n"},"targetCoord":{"description":"<p>定位目标的经纬度坐标。设置后会忽略 <a href=\"#globe.viewControl.alpha\">alpha</a> 和 <a href=\"#globe.viewControl.beta\">beta</a>。</p>\n<pre><code class=\"lang-js\">viewControl: {\n // 定位到北京\n targetCoord: [116.46, 39.92]\n}\n</code></pre>\n"}}},"layers":{"items":{"properties":{"show":{"description":"<p>是否显示该层。</p>\n"},"type":{"description":"<p>层的类型，可选：</p>\n<ul>\n<li><code>'overlay'</code></li>\n</ul>\n<p>在地表上的覆盖层，可以用来显示云层等。</p>\n<ul>\n<li><code>'blend'</code></li>\n</ul>\n<p>跟 <a href=\"#globe.baseTexture\">baseTexture</a> 混合。</p>\n"},"name":{"description":"<p>层的名字，在用 setOption 设置层属性的时候可以用 name 来标识需要更新的层。</p>\n<pre><code class=\"lang-js\">chart.setOption({\n globe: {\n layer: [{\n // 更新 name 为 'cloud' 的层的纹理\n name: 'cloud',\n texture: 'cloud.png'\n }]\n }\n});\n</code></pre>\n"},"blendTo":{"description":"<p>在 <a href=\"#globe.layers.type\">type</a> 为 <code>'blend'</code> 时有效。</p>\n<p>可选：</p>\n<ul>\n<li><p><code>albedo</code> 混合到 albedo，受光照的影响。</p>\n</li>\n<li><p><code>emission</code> 混合到自发光，不受光照影响。</p>\n</li>\n</ul>\n"},"intensity":{"description":"<p>混合的强度。</p>\n"},"shading":{"description":"<p>覆盖层的着色效果，同 <a href=\"#globe.shading\">globe.shading</a>， 支持 <code>'color'</code>, <code>'lambert'</code>, <code>'realistic'</code></p>\n<p>在 <a href=\"globe.layers.type\" target=\"_blank\">type</a> 为 <code>'overlay'</code> 时有效。</p>\n"},"distance":{"description":"<p>覆盖层离地球表面的距离。</p>\n<p>在 <a href=\"#globe.layers.type\">type</a> 为 <code>'overlay'</code> 时有效。</p>\n"},"texture":{"description":"<p>层的纹理，支持图片路径字符串，图片或者 Canvas 的对象。</p>\n<p>也支持直接使用 echarts 的实例作为纹理，此时在地球上的鼠标动作会跟纹理上使用的 echarts 实例有联动。</p>\n"}}}},"zlevel":{"description":"<p>组件所在的层。</p>\n<p><code>zlevel</code>用于 Canvas 分层，不同<code>zlevel</code>值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的<code>zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。</p>\n<p><code>zlevel</code> 大的 Canvas 会放在 <code>zlevel</code> 小的 Canvas 的上面。</p>\n<p><strong>注:</strong> echarts-gl 中组件的层需要跟 echarts 中组件的层分开。同一个 zlevel 不能同时用于 WebGL 和 Canvas 的绘制。</p>\n"},"left":{"description":"<p>组件的视图离容器左侧的距离。</p>\n<p><code>left</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比，也可以是 <code>'left'</code>, <code>'center'</code>, <code>'right'</code>。</p>\n<p>如果 <code>left</code> 的值为<code>'left'</code>, <code>'center'</code>, <code>'right'</code>，组件会根据相应的位置自动对齐。</p>\n"},"top":{"description":"<p>组件的视图离容器上侧的距离。</p>\n<p><code>top</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比，也可以是 <code>'top'</code>, <code>'middle'</code>, <code>'bottom'</code>。</p>\n<p>如果 <code>top</code> 的值为<code>'top'</code>, <code>'middle'</code>, <code>'bottom'</code>，组件会根据相应的位置自动对齐。</p>\n"},"right":{"description":"<p>组件的视图离容器右侧的距离。</p>\n<p><code>right</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比。</p>\n<p>默认自适应。</p>\n"},"bottom":{"description":"<p>组件的视图离容器下侧的距离。</p>\n<p><code>bottom</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比。</p>\n<p>默认自适应。</p>\n"},"width":{"description":"<p>组件的视图宽度。</p>\n"},"height":{"description":"<p>组件的视图高度。</p>\n"}}},"geo3D":{"properties":{"show":{"description":"<p>是否显示三维地理坐标系组件</p>\n"},"map":{"description":"<p>地图类型。echarts-gl 中使用的地图类型同 <a href=\"http://echarts.baidu.com/option.html#geo.map\" target=\"_blank\">geo</a> 组件相同</p>\n<p>你可以在<a href=\"http://ecomfe.github.io/echarts-builder-web/map3.html\" target=\"_blank\">地图下载界面</a>下载到需要的地图文件引入并注册到 ECharts 中。</p>\n<p>ECharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。</p>\n<p>下面是两种类型的使用示例：</p>\n<p><strong> JavaScript 引入示例 </strong></p>\n<pre><code class=\"lang-html\"><script src="echarts.js"></script>\n<script src="map/js/china.js"></script>\n<script>\nvar chart = echarts.init(document.getElementById('main'));\nchart.setOption({\n series: [{\n type: 'map',\n map: 'china'\n }]\n});\n</script>\n</code></pre>\n<p><strong> JSON 引入示例 </strong></p>\n<pre><code class=\"lang-js\">$.get('map/json/china.json', function (chinaJson) {\n echarts.registerMap('china', chinaJson);\n var chart = echarts.init(document.getElementById('main'));\n chart.setOption({\n series: [{\n type: 'map',\n map: 'china'\n }]\n });\n});\n</code></pre>\n<p>ECharts 使用 <a href=\"http://geojson.org/\" target=\"_blank\">geoJSON</a> 格式的数据作为地图的轮廓，除了上述数据，你也可以通过其它手段获取地图的 <a href=\"http://geojson.org/\" target=\"_blank\">geoJSON</a> 数据注册到 ECharts 中。</p>\n"},"boxWidth":{"description":"<p>三维地理坐标系组件组件在三维场景中的宽度。配合 <a href=\"#geo3D.viewControl.distance\">viewControl.distance</a> 可以得到最合适的展示尺寸。</p>\n<p>下面是三维地理坐标系组件 中<code>boxWidth</code>, <code>boxHeight</code>, <code>boxDepth</code>, <code>regionHeight</code>的示意图。</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/gl/img/geo-size.png\"></p>\n"},"boxHeight":{"description":"<p>三维地理坐标系组件组件在三维场景中的高度。</p>\n<p>组件高度。这个高度包含三维地图上的柱状图，散点图。</p>\n"},"boxDepth":{"description":"<p>三维地理坐标系组件组件在三维场景中的深度。</p>\n<p>组件深度默认自动，保证三维组件的显示比例跟输入的 GeoJSON 的比例相同</p>\n"},"regionHeight":{"description":"<p>三维地图每个区域的高度。这个高度是模型的高度，小于 <a href=\"#geo3D.boxHeight\">boxHeight</a>。<code>boxHeight - regionHeight</code> 这一片区域会被用于三维柱状图，散点图等的展示。</p>\n"},"environment":{"description":"<p>环境贴图，支持純颜色值，渐变色，全景贴图的 url。默认为 <code>'auto'</code>，在配置有 <a href=\"#geo3D.light.ambientCubemap.texture\">light.ambientCubemap.texture</a> 的时候会使用该纹理作为环境贴图。否则则不显示环境贴图。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">// 配置为全景贴图\nenvironment: 'asset/starfield.jpg'\n// 配置为纯黑色的背景\nenvironment: '#000'\n// 配置为垂直渐变的背景\nenvironment: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{\n offset: 0, color: '#00aaff' // 天空颜色\n}, {\n offset: 0.7, color: '#998866' // 地面颜色\n}, {\n offset: 1, color: '#998866' // 地面颜色\n}], false)\n</code></pre>\n"},"groundPlane":{"properties":{"show":{"description":"<p>是否显示地面。</p>\n"},"color":{"description":"<p>地面颜色。</p>\n"}}},"instancing":{"description":"<p><code>instancing</code>会将 GeoJSON 中所有的 <a href=\"http://geojson.org/geojson-spec.html#geometry-objects\" target=\"_blank\">geometry</a> 合并成一个，在 GeoJSON 拥有特别多（上千）的 <a href=\"http://geojson.org/geojson-spec.html#geometry-objects\" target=\"_blank\">geometry</a> 时可以有效提升绘制效率。</p>\n"},"label":{"properties":{"show":{"description":"<p>是否显示标签。</p>\n"},"distance":{"description":"<p>标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离。</p>\n"},"formatter":{"description":"<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code>\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有 <code>{a}</code>、<code>{b}</code>、<code>{c}</code>，分别表示系列名，数据名，数据值。</p>\n<p><strong>示例：</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {c}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式：</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code>params</code> 是 formatter 需要的单个数据集。格式如下：</p>\n"},"textStyle":{"properties":{"color":{"description":"<p>文字的颜色。</p>\n"},"borderWidth":{"description":"<p>文字的描边宽度。</p>\n"},"borderColor":{"description":"<p>文字的描边颜色。</p>\n"},"fontFamily":{"description":"<p>文字的字体系列。</p>\n"},"fontSize":{"description":"<p>文字的字体大小。</p>\n"},"fontWeight":{"description":"<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"}}}}},"itemStyle":{"properties":{"color":{"description":"<p>图形的颜色。 默认从全局调色盘 <a href=\"http://echarts.baidu.com/option.html#color\" target=\"_blank\">option.color</a> 获取颜色 </p>\n<p>除了颜色字符串外，支持使用数组表示的 RGBA 值，例如：</p>\n<pre><code class=\"lang-js\">// 纯白色\n[1, 1, 1, 1]\n</code></pre>\n<p>使用数组表示的时候，每个通道可以设置大于 1 的值用于表示 HDR 的色值。</p>\n"},"opacity":{"description":"<p>图形的不透明度。</p>\n"},"borderWidth":{"description":"<p>图形描边的宽度。加上描边后可以更清晰的区分每个区域。如下图：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/geo-border.png\"></p>\n"},"borderColor":{"description":"<p>图形描边的颜色。</p>\n"}}},"emphasis":{"properties":{"label":{"properties":{"show":{"description":"<p>是否显示标签。</p>\n"},"distance":{"description":"<p>标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离。</p>\n"},"formatter":{"description":"<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code>\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有 <code>{a}</code>、<code>{b}</code>、<code>{c}</code>，分别表示系列名，数据名，数据值。</p>\n<p><strong>示例：</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {c}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式：</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code>params</code> 是 formatter 需要的单个数据集。格式如下：</p>\n"},"textStyle":{"properties":{"color":{"description":"<p>文字的颜色。</p>\n"},"borderWidth":{"description":"<p>文字的描边宽度。</p>\n"},"borderColor":{"description":"<p>文字的描边颜色。</p>\n"},"fontFamily":{"description":"<p>文字的字体系列。</p>\n"},"fontSize":{"description":"<p>文字的字体大小。</p>\n"},"fontWeight":{"description":"<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"}}}}},"itemStyle":{"properties":{"color":{"description":"<p>图形的颜色。</p>\n<p>除了颜色字符串外，支持使用数组表示的 RGBA 值，例如：</p>\n<pre><code class=\"lang-js\">// 纯白色\n[1, 1, 1, 1]\n</code></pre>\n<p>使用数组表示的时候，每个通道可以设置大于 1 的值用于表示 HDR 的色值。</p>\n"},"opacity":{"description":"<p>图形的不透明度。</p>\n"}}}}},"regions":{"items":{"properties":{"name":{"description":"<p>所对应的地图区域的名称，例如 <code>'广东'</code>，<code>'浙江'</code>。</p>\n"},"regionHeight":{"description":"<p>区域的高度，可以设置不同的高度用来表达数据的大小。当 GeoJSON 为建筑的数据时，也可以通过这个值表示简直的高度。如下图</p>\n<p><img width=\"700\" height=\"auto\" src=\"documents/asset/gl/img/city-region-height.jpg\"></p>\n"},"itemStyle":{"properties":{"color":{"description":"<p>图形的颜色。</p>\n<p>除了颜色字符串外，支持使用数组表示的 RGBA 值，例如：</p>\n<pre><code class=\"lang-js\">// 纯白色\n[1, 1, 1, 1]\n</code></pre>\n<p>使用数组表示的时候，每个通道可以设置大于 1 的值用于表示 HDR 的色值。</p>\n"},"opacity":{"description":"<p>图形的不透明度。</p>\n"},"borderWidth":{"description":"<p>图形描边的宽度。加上描边后可以更清晰的区分每个区域。如下图：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/geo-border.png\"></p>\n"},"borderColor":{"description":"<p>图形描边的颜色。</p>\n"}}},"label":{"properties":{"show":{"description":"<p>是否显示标签。</p>\n"},"distance":{"description":"<p>标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离。</p>\n"},"formatter":{"description":"<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code>\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有 <code>{a}</code>、<code>{b}</code>、<code>{c}</code>，分别表示系列名，数据名，数据值。</p>\n<p><strong>示例：</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {c}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式：</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code>params</code> 是 formatter 需要的单个数据集。格式如下：</p>\n"},"textStyle":{"properties":{"color":{"description":"<p>文字的颜色。</p>\n"},"borderWidth":{"description":"<p>文字的描边宽度。</p>\n"},"borderColor":{"description":"<p>文字的描边颜色。</p>\n"},"fontFamily":{"description":"<p>文字的字体系列。</p>\n"},"fontSize":{"description":"<p>文字的字体大小。</p>\n"},"fontWeight":{"description":"<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"}}}}},"emphasis":{"properties":{"itemStyle":{"properties":{"color":{"description":"<p>图形的颜色。</p>\n<p>除了颜色字符串外，支持使用数组表示的 RGBA 值，例如：</p>\n<pre><code class=\"lang-js\">// 纯白色\n[1, 1, 1, 1]\n</code></pre>\n<p>使用数组表示的时候，每个通道可以设置大于 1 的值用于表示 HDR 的色值。</p>\n"},"opacity":{"description":"<p>图形的不透明度。</p>\n"},"borderWidth":{"description":"<p>图形描边的宽度。加上描边后可以更清晰的区分每个区域。如下图：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/geo-border.png\"></p>\n"},"borderColor":{"description":"<p>图形描边的颜色。</p>\n"}}},"label":{"properties":{"show":{"description":"<p>是否显示标签。</p>\n"},"distance":{"description":"<p>标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离。</p>\n"},"formatter":{"description":"<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code>\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有 <code>{a}</code>、<code>{b}</code>、<code>{c}</code>，分别表示系列名，数据名，数据值。</p>\n<p><strong>示例：</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {c}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式：</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code>params</code> 是 formatter 需要的单个数据集。格式如下：</p>\n"},"textStyle":{"properties":{"color":{"description":"<p>文字的颜色。</p>\n"},"borderWidth":{"description":"<p>文字的描边宽度。</p>\n"},"borderColor":{"description":"<p>文字的描边颜色。</p>\n"},"fontFamily":{"description":"<p>文字的字体系列。</p>\n"},"fontSize":{"description":"<p>文字的字体大小。</p>\n"},"fontWeight":{"description":"<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"}}}}}}}}}},"shading":{"description":"<p>三维地理坐标系组件中三维图形的着色效果，echarts-gl 中支持下面三种着色方式</p>\n<ul>\n<li><p><code>'color'</code>\n只显示颜色，不受光照等其它因素的影响。</p>\n</li>\n<li><p><code>'lambert'</code>\n通过经典的 <a href=\"https://en.wikipedia.org/wiki/Lambertian_reflectance\" target=\"_blank\">lambert</a> 着色表现光照带来的明暗。</p>\n</li>\n<li><p><code>'realistic'</code>\n真实感渲染，配合 <a href=\"#globe.light.ambientCubemap\">light.ambientCubemap</a> 和 <a href=\"#globe.postEffect\">postEffect</a> 使用可以让展示的画面效果和质感有质的提升。ECharts GL 中使用了<a href=\"https://www.marmoset.co/posts/physically-based-rendering-and-you-can-too/\" target=\"_blank\">基于物理的渲染（PBR）</a> 来表现真实感材质。</p>\n</li>\n</ul>\n"},"realisticMaterial":{"properties":{"detailTexture":{"description":"<p>材质细节的纹理贴图。</p>\n"},"textureTiling":{"description":"<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>detailTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n"},"textureOffset":{"description":"<p>材质细节纹理的位移。</p>\n"},"roughness":{"description":"<p><code>roughness</code>属性用于表示材质的粗糙度，<code>0</code>为完全光滑，<code>1</code>完全粗糙，中间的值则是介于这两者之间。</p>\n<p>下图是 <a href=\"#globe\">globe</a> 中<code>roughness</code>分别是<code>0.2</code>（光滑）与<code>0.8</code>（粗糙）的效果</p>\n<p><img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-gloss.png\">\n<img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-rough.png\"></p>\n<p>当你想要表达更复杂的材质时。你可以直接将 <code>roughness</code> 设置为如下用每个像素存储粗糙度的贴图。</p>\n<p><img width=\"300\" height=\"300\" src=\"documents/asset/gl/img/roughness.png\"></p>\n<p>贴图中颜色越白的地方值越大，也就是越粗糙。你可以从 <a href=\"http://freepbr.com/\" target=\"_blank\">http://freepbr.com/</a> 等资源网站获取不同材质的贴图资源，也可以自己使用工具生成。</p>\n"},"metalness":{"description":"<p><code>metalness</code>属性用于表示材质是金属还是非金属，<code>0</code>为非金属，<code>1</code>为金属，中间的值则是介于这两者之间，但是通常设成<code>0</code>和<code>1</code>就能满足大部分场景了</p>\n<p>下图是 <a href=\"#globe\">globe</a> 中<code>metalness</code>分别设成<code>1</code>与<code>0</code>的效果区别。</p>\n<p><img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-metal.png\">\n<img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-non-metal.png\"></p>\n<p>跟 <a href=\"#geo3D.realisticMaterial.roughness\">roughness</a> 一样 你可以直接将 <code>metalness</code> 设置为金属度贴图。</p>\n"},"roughnessAdjust":{"description":"<p>粗糙度调整，在使用粗糙度贴图的时候有用。可以对贴图整体的粗糙度进行调整。默认为 0.5 的时候不调整，0 的时候变成完全光滑，1 的时候变成完全粗糙。</p>\n"},"metalnessAdjust":{"description":"<p>金属度调整，在使用金属度贴图的时候有用。可以对贴图整体的金属度进行调整。默认为 0.5 的时候不调整，0 的时候变成非金属，1 的时候变成金属。</p>\n"},"normalTexture":{"description":"<p>材质细节的法线贴图。</p>\n<p>使用法线贴图可以在较少的顶点下依然表现出物体表面丰富的明暗细节。</p>\n"}}},"lambertMaterial":{"properties":{"detailTexture":{"description":"<p>材质细节的纹理贴图。</p>\n"},"textureTiling":{"description":"<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>detailTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n"},"textureOffset":{"description":"<p>材质细节纹理的位移。</p>\n"}}},"colorMaterial":{"properties":{"detailTexture":{"description":"<p>材质细节的纹理贴图。</p>\n"},"textureTiling":{"description":"<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>detailTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n"},"textureOffset":{"description":"<p>材质细节纹理的位移。</p>\n"}}},"light":{"properties":{"main":{"properties":{"color":{"description":"<p>主光源的颜色。</p>\n"},"intensity":{"description":"<p>主光源的强度。</p>\n"},"shadow":{"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-shadow.png\" width=\"100%\" title=\"Shadow\">\n <img src=\"documents/asset/gl/img/geo-no-shadow.png\" width=\"100%\" title=\"No Shadow\">\n</div>\n"},"shadowQuality":{"description":"<p>阴影的质量。可选<code>'low'</code>, <code>'medium'</code>, <code>'high'</code>, <code>'ultra'</code></p>\n<p>下图是低质量和高质量阴影的区别。</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-shadow-low.png\" width=\"100%\" title=\"Low\">\n <img src=\"documents/asset/gl/img/geo-shadow-high.png\" width=\"100%\" title=\"High\">\n</div>\n"},"alpha":{"description":"<p>主光源绕 x 轴，即上下旋转的角度。配合 <a href=\"#geo3D.light.main.beta\">beta</a> 控制光源的方向。</p>\n<p>如下示意图：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/light-alpha-beta.png\"></p>\n<p><a href=\"#globe\">globe</a> 组件中可以通过 <a href=\"#globe.light.main.time\">time</a> 控制日光的时间。</p>\n"},"beta":{"description":"<p>主光源绕 y 轴，即左右旋转的角度。</p>\n"}}},"ambient":{"properties":{"color":{"description":"<p>环境光的颜色。</p>\n"},"intensity":{"description":"<p>环境光的强度。</p>\n"}}},"ambientCubemap":{"properties":{"texture":{"description":"<p>环境光纹理的 url，支持使用<code>.hdr</code>格式的 HDR 贴图。可以从 <a href=\"http://www.hdrlabs.com/sibl/archive.html\" target=\"_blank\">http://www.hdrlabs.com/sibl/archive.html</a> 等网站获取 <code>.hdr</code> 的资源。</p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">ambientCubemap: {\n texture: 'pisa.hdr',\n // 解析 hdr 时使用的曝光值\n exposure: 1.0\n}\n</code></pre>\n"},"diffuseIntensity":{"description":"<p>漫反射的强度。</p>\n"},"specularIntensity":{"description":"<p>高光反射的强度。</p>\n"}}}}},"postEffect":{"properties":{"enable":{"description":"<p>是否开启后处理特效，默认关闭。</p>\n"},"bloom":{"properties":{"enable":{"description":"<p>是否开启光晕特效。</p>\n"},"bloomIntensity":{"description":"<p>光晕的强度，默认为 0.1</p>\n"}}},"depthOfField":{"properties":{"enable":{"description":"<p>是否开启景深</p>\n"},"focalDistance":{"description":"<p>初始的焦距，用户可以点击区域自动聚焦。</p>\n"},"focalRange":{"description":"<p>完全聚焦的区域范围，在此范围内的物体时完全清晰的，不会有模糊</p>\n"},"fstop":{"description":"<p>镜头的<a href=\"https://zh.wikipedia.org/wiki/%E7%84%A6%E6%AF%94\" target=\"_blank\">F值</a>，值越小景深越浅。</p>\n"},"blurRadius":{"description":"<p>焦外的模糊半径</p>\n<p>不同模糊半径的区别：</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-dof-small.png\" width=\"100%\" title=\"blurSize: 3\">\n <img src=\"documents/asset/gl/img/geo-dof-large.png\" width=\"100%\" title=\"blurSize: 10\">\n</div>\n"}}},"screenSpaceAmbientOcclusion":{"description":"<p>屏幕空间的环境光遮蔽效果。环境光遮蔽可以让角落，缝隙等大部分光无法到达的区域变暗，是传统的阴影贴图的补充，可以让整个场景更加自然，有层次。</p>\n<p>下面是无 SSAO 和有 SSAO 的对比。</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-no-ssao.png\" width=\"100%\" title=\"No SSAO\">\n <img src=\"documents/asset/gl/img/geo-ssao.png\" width=\"100%\" title=\"SSAO\">\n</div>\n"},"SSAO":{"properties":{"enable":{"description":"<p>是否开启环境光遮蔽，默认不开启</p>\n"},"quality":{"description":"<p>环境光遮蔽的质量，支持<code>'low'</code>, <code>'medium'</code>, <code>'high'</code>, <code>'ultra'</code></p>\n"},"radius":{"description":"<p>环境光遮蔽的采样半径。半径越大效果越自然，但是需要设置较高的<code>'quality'</code>。</p>\n<p>下面是半径值较小与较大之间的区别</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-ssao-small-radius.png\" width=\"100%\" title=\"Radius: 1\">\n <img src=\"documents/asset/gl/img/geo-ssao-large-radius.png\" width=\"100%\" title=\"Radius: 10\">\n</div>\n"},"intensity":{"description":"<p>环境光遮蔽的强度。值越大颜色越深。</p>\n"}}},"colorCorrection":{"properties":{"enable":{"description":"<p>是否开启颜色纠正</p>\n"},"lookupTexture":{"description":"<p>颜色查找表，推荐使用。</p>\n<p>颜色查找表是一张像下面这样的纹理图片。</p>\n<p><img width=\"200\" height=\"auto\" src=\"documents/asset/gl/img/lookup.png\"></p>\n<p>这张是基础的查找表图片，你可以直接拿来使用，为了方便将场景色调调整你想要的效果，你可以将场景截图后在 Photoshop 等图像处理软件中调整颜色到想要的效果，然后将相同的调整应用到上面这张查找表的图片上。</p>\n<p>比如调成冷色调后，查找表的纹理图片就会成为下面这样：</p>\n<p><img width=\"200\" height=\"auto\" src=\"documents/asset/gl/img/crispwinter.png\"></p>\n<p>然后那这张纹理图片就作为该配置项的值，就可以得到相同的你在 Photoshop 上的效果了。</p>\n<p>当然如果你只是想得到一张截图，完全不用再这样折腾，但是如果你想在能实时交互的作品中也能方便的调整到理想的色调，这个就非常有用了。</p>\n"},"exposure":{"description":"<p>画面的曝光。</p>\n"},"brightness":{"description":"<p>画面的亮度。</p>\n"},"contrast":{"description":"<p>画面的对比度。</p>\n"},"saturation":{"description":"<p>画面的饱和度。</p>\n"}}},"FXAA":{"properties":{"enable":{"description":"<p>是否开启 FXAA，默认关闭。</p>\n"}}}}},"temporalSuperSampling":{"properties":{"enable":{"description":"<p>是否开启分帧超采样。默认在开启 <a href=\"#geo3D.postEffect\">postEffect</a> 后也会同步开启。</p>\n"}}},"viewControl":{"properties":{"projection":{"description":"<p>投影方式，默认为透视投影<code>'perspective'</code>，也支持设置为正交投影<code>'orthographic'</code>。</p>\n"},"autoRotate":{"description":"<p>是否开启视角绕物体的自动旋转查看。</p>\n"},"autoRotateDirection":{"description":"<p>物体自传的方向。默认是 <code>'cw'</code> 也就是从上往下看是顺时针方向，也可以取 <code>'ccw'</code>，既从上往下看为逆时针方向。</p>\n"},"autoRotateSpeed":{"description":"<p>物体自传的速度。单位为<code>角度 / 秒</code>，默认为<code>10</code> ，也就是<code>36</code>秒转一圈。</p>\n"},"autoRotateAfterStill":{"description":"<p>在鼠标静止操作后恢复自动旋转的时间间隔。在开启 <a href=\"#geo3D.viewControl.autoRotate\">autoRotate</a> 后有效。</p>\n"},"damping":{"description":"<p>鼠标进行旋转，缩放等操作时的迟滞因子，在大于 0 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。</p>\n"},"rotateSensitivity":{"description":"<p>旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。</p>\n<p>默认为``</p>\n<p>设置为<code>0</code>后无法旋转。</p>\n<pre><code class=\"lang-js\">// 无法旋转\nrotateSensitivity: 0\n// 只能横向旋转\nrotateSensitivity: [1, 0]\n// 只能纵向旋转\nrotateSensitivity: [0, 1]\n</code></pre>\n"},"zoomSensitivity":{"description":"<p>缩放操作的灵敏度，值越大越灵敏。默认为``</p>\n<p>设置为<code>0</code>后无法缩放。</p>\n"},"panSensitivity":{"description":"<p>平移操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的平移灵敏度</p>\n<p>默认为``</p>\n<p>设置为<code>0</code>后无法平移。</p>\n"},"panMouseButton":{"description":"<p>平移操作使用的鼠标按键，支持：</p>\n<ul>\n<li><p><code>'left'</code> 鼠标左键（默认）</p>\n</li>\n<li><p><code>'middle'</code> 鼠标中键</p>\n</li>\n<li><p><code>'right'</code> 鼠标右键</p>\n</li>\n</ul>\n<p>注意：如果设置为鼠标右键则会阻止默认的右键菜单。</p>\n"},"rotateMouseButton":{"description":"<p>旋转操作使用的鼠标按键，支持：</p>\n<ul>\n<li><p><code>'left'</code> 鼠标左键</p>\n</li>\n<li><p><code>'middle'</code> 鼠标中键（默认）</p>\n</li>\n<li><p><code>'right'</code> 鼠标右键</p>\n</li>\n</ul>\n<p>注意：如果设置为鼠标右键则会阻止默认的右键菜单。</p>\n"},"distance":{"description":"<p>默认视角距离主体的距离，对于 <a href=\"#globe\">globe</a> 来说是距离地球表面的距离，对于 <a href=\"#grid3D\">grid3D</a> 和 <a href=\"#geo3D\">geo3D</a> 等其它组件来说是距离中心原点的距离。在 <a href=\"#geo3D.viewControl.projection\">projection</a> 为<code>'perspective'</code>的时候有效。</p>\n"},"minDistance":{"description":"<p>视角通过鼠标控制能拉近到主体的最小距离。在 <a href=\"#geo3D.viewControl.projection\">projection</a> 为<code>'perspective'</code>的时候有效。</p>\n"},"maxDistance":{"description":"<p>视角通过鼠标控制能拉远到主体的最大距离。在 <a href=\"#geo3D.viewControl.projection\">projection</a> 为<code>'perspective'</code>的时候有效。</p>\n"},"orthographicSize":{"description":"<p>正交投影的大小。在 <a href=\"#geo3D.viewControl.projection\">projection</a> 为<code>'orthographic'</code>的时候有效。</p>\n"},"maxOrthographicSize":{"description":"<p>正交投影缩放的最大值。在 <a href=\"#geo3D.viewControl.projection\">projection</a> 为<code>'orthographic'</code>的时候有效。</p>\n"},"minOrthographicSize":{"description":"<p>正交投影缩放的最小值。在 <a href=\"#geo3D.viewControl.projection\">projection</a> 为<code>'orthographic'</code>的时候有效。</p>\n"},"alpha":{"description":"<p>视角绕 x 轴，即上下旋转的角度。配合 <a href=\"#geo3D.light.main.beta\">beta</a> 可以控制视角的方向。</p>\n<p>如下示意图：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/view-alpha-beta.png\"></p>\n"},"beta":{"description":"<p>视角绕 y 轴，即左右旋转的角度。</p>\n"},"center":{"description":"<p>视角中心点，旋转也会围绕这个中心点旋转，默认为<code>[0,0,0]</code>。</p>\n"},"minAlpha":{"description":"<p>上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。</p>\n"},"maxAlpha":{"description":"<p>上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。</p>\n"},"minBeta":{"description":"<p>左右旋转的最小 beta 值。即视角能旋转到达最左的角度。</p>\n"},"maxBeta":{"description":"<p>左右旋转的最大 beta 值。即视角能旋转到达最右的角度。</p>\n"},"animation":{"description":"<p>是否开启动画。</p>\n"},"animationDurationUpdate":{"description":"<p>过渡动画的时长。</p>\n"},"animationEasingUpdate":{"description":"<p>过渡动画的缓动效果。</p>\n"}}},"zlevel":{"description":"<p>组件所在的层。</p>\n<p><code>zlevel</code>用于 Canvas 分层，不同<code>zlevel</code>值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的<code>zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。</p>\n<p><code>zlevel</code> 大的 Canvas 会放在 <code>zlevel</code> 小的 Canvas 的上面。</p>\n<p><strong>注:</strong> echarts-gl 中组件的层需要跟 echarts 中组件的层分开。同一个 zlevel 不能同时用于 WebGL 和 Canvas 的绘制。</p>\n"},"left":{"description":"<p>组件的视图离容器左侧的距离。</p>\n<p><code>left</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比，也可以是 <code>'left'</code>, <code>'center'</code>, <code>'right'</code>。</p>\n<p>如果 <code>left</code> 的值为<code>'left'</code>, <code>'center'</code>, <code>'right'</code>，组件会根据相应的位置自动对齐。</p>\n"},"top":{"description":"<p>组件的视图离容器上侧的距离。</p>\n<p><code>top</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比，也可以是 <code>'top'</code>, <code>'middle'</code>, <code>'bottom'</code>。</p>\n<p>如果 <code>top</code> 的值为<code>'top'</code>, <code>'middle'</code>, <code>'bottom'</code>，组件会根据相应的位置自动对齐。</p>\n"},"right":{"description":"<p>组件的视图离容器右侧的距离。</p>\n<p><code>right</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比。</p>\n<p>默认自适应。</p>\n"},"bottom":{"description":"<p>组件的视图离容器下侧的距离。</p>\n<p><code>bottom</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比。</p>\n<p>默认自适应。</p>\n"},"width":{"description":"<p>组件的视图宽度。</p>\n"},"height":{"description":"<p>组件的视图高度。</p>\n"}}},"mapbox3D":{"properties":{"style":{"description":"<p>Mapbox 地图样式。同 <a href=\"https://www.mapbox.com/mapbox-gl-js/style-spec/\" target=\"_blank\">https://www.mapbox.com/mapbox-gl-js/style-spec/</a></p>\n"},"center":{"description":"<p>Mapbox 地图中心经纬度。经纬度用数组表示，例如：</p>\n<pre><code class=\"lang-js\">mapbox3D: {\n center: [104.114129, 37.550339],\n zoom: 3\n}\n</code></pre>\n"},"zoom":{"description":"<p>Mapbox 地图的缩放等级。见 <a href=\"https://www.mapbox.com/mapbox-gl-js/style-spec/#root-zoom\" target=\"_blank\">https://www.mapbox.com/mapbox-gl-js/style-spec/#root-zoom</a></p>\n"},"bearing":{"description":"<p>Mapbox 地图的旋转角度。见 <a href=\"https://www.mapbox.com/mapbox-gl-js/style-spec/#root-bearing\" target=\"_blank\">https://www.mapbox.com/mapbox-gl-js/style-spec/#root-bearing</a></p>\n"},"pitch":{"description":"<p>视角俯视的倾斜角度。默认为<code>0</code>，也就是正对着地图。最大<code>60</code>。见 <a href=\"https://www.mapbox.com/mapbox-gl-js/style-spec/#root-pitch\" target=\"_blank\">https://www.mapbox.com/mapbox-gl-js/style-spec/#root-pitch</a></p>\n"},"altitudeScale":{"description":"<p>海拔的缩放。</p>\n"},"shading":{"description":"<p>mapbox3D中三维图形的着色效果，echarts-gl 中支持下面三种着色方式</p>\n<ul>\n<li><p><code>'color'</code>\n只显示颜色，不受光照等其它因素的影响。</p>\n</li>\n<li><p><code>'lambert'</code>\n通过经典的 <a href=\"https://en.wikipedia.org/wiki/Lambertian_reflectance\" target=\"_blank\">lambert</a> 着色表现光照带来的明暗。</p>\n</li>\n<li><p><code>'realistic'</code>\n真实感渲染，配合 <a href=\"#globe.light.ambientCubemap\">light.ambientCubemap</a> 和 <a href=\"#globe.postEffect\">postEffect</a> 使用可以让展示的画面效果和质感有质的提升。ECharts GL 中使用了<a href=\"https://www.marmoset.co/posts/physically-based-rendering-and-you-can-too/\" target=\"_blank\">基于物理的渲染（PBR）</a> 来表现真实感材质。</p>\n</li>\n</ul>\n"},"realisticMaterial":{"properties":{"detailTexture":{"description":"<p>材质细节的纹理贴图。</p>\n"},"textureTiling":{"description":"<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>detailTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n"},"textureOffset":{"description":"<p>材质细节纹理的位移。</p>\n"},"roughness":{"description":"<p><code>roughness</code>属性用于表示材质的粗糙度，<code>0</code>为完全光滑，<code>1</code>完全粗糙，中间的值则是介于这两者之间。</p>\n<p>下图是 <a href=\"#globe\">globe</a> 中<code>roughness</code>分别是<code>0.2</code>（光滑）与<code>0.8</code>（粗糙）的效果</p>\n<p><img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-gloss.png\">\n<img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-rough.png\"></p>\n<p>当你想要表达更复杂的材质时。你可以直接将 <code>roughness</code> 设置为如下用每个像素存储粗糙度的贴图。</p>\n<p><img width=\"300\" height=\"300\" src=\"documents/asset/gl/img/roughness.png\"></p>\n<p>贴图中颜色越白的地方值越大，也就是越粗糙。你可以从 <a href=\"http://freepbr.com/\" target=\"_blank\">http://freepbr.com/</a> 等资源网站获取不同材质的贴图资源，也可以自己使用工具生成。</p>\n"},"metalness":{"description":"<p><code>metalness</code>属性用于表示材质是金属还是非金属，<code>0</code>为非金属，<code>1</code>为金属，中间的值则是介于这两者之间，但是通常设成<code>0</code>和<code>1</code>就能满足大部分场景了</p>\n<p>下图是 <a href=\"#globe\">globe</a> 中<code>metalness</code>分别设成<code>1</code>与<code>0</code>的效果区别。</p>\n<p><img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-metal.png\">\n<img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-non-metal.png\"></p>\n<p>跟 <a href=\"#mapbox3D.realisticMaterial.roughness\">roughness</a> 一样 你可以直接将 <code>metalness</code> 设置为金属度贴图。</p>\n"},"roughnessAdjust":{"description":"<p>粗糙度调整，在使用粗糙度贴图的时候有用。可以对贴图整体的粗糙度进行调整。默认为 0.5 的时候不调整，0 的时候变成完全光滑，1 的时候变成完全粗糙。</p>\n"},"metalnessAdjust":{"description":"<p>金属度调整，在使用金属度贴图的时候有用。可以对贴图整体的金属度进行调整。默认为 0.5 的时候不调整，0 的时候变成非金属，1 的时候变成金属。</p>\n"},"normalTexture":{"description":"<p>材质细节的法线贴图。</p>\n<p>使用法线贴图可以在较少的顶点下依然表现出物体表面丰富的明暗细节。</p>\n"}}},"lambertMaterial":{"properties":{"detailTexture":{"description":"<p>材质细节的纹理贴图。</p>\n"},"textureTiling":{"description":"<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>detailTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n"},"textureOffset":{"description":"<p>材质细节纹理的位移。</p>\n"}}},"colorMaterial":{"properties":{"detailTexture":{"description":"<p>材质细节的纹理贴图。</p>\n"},"textureTiling":{"description":"<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>detailTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n"},"textureOffset":{"description":"<p>材质细节纹理的位移。</p>\n"}}},"light":{"properties":{"main":{"properties":{"color":{"description":"<p>主光源的颜色。</p>\n"},"intensity":{"description":"<p>主光源的强度。</p>\n"},"shadow":{"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-shadow.png\" width=\"100%\" title=\"Shadow\">\n <img src=\"documents/asset/gl/img/geo-no-shadow.png\" width=\"100%\" title=\"No Shadow\">\n</div>\n"},"shadowQuality":{"description":"<p>阴影的质量。可选<code>'low'</code>, <code>'medium'</code>, <code>'high'</code>, <code>'ultra'</code></p>\n<p>下图是低质量和高质量阴影的区别。</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-shadow-low.png\" width=\"100%\" title=\"Low\">\n <img src=\"documents/asset/gl/img/geo-shadow-high.png\" width=\"100%\" title=\"High\">\n</div>\n"},"alpha":{"description":"<p>主光源绕 x 轴，即上下旋转的角度。配合 <a href=\"#mapbox3D.light.main.beta\">beta</a> 控制光源的方向。</p>\n<p>如下示意图：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/light-alpha-beta.png\"></p>\n<p><a href=\"#globe\">globe</a> 组件中可以通过 <a href=\"#globe.light.main.time\">time</a> 控制日光的时间。</p>\n"},"beta":{"description":"<p>主光源绕 y 轴，即左右旋转的角度。</p>\n"}}},"ambient":{"properties":{"color":{"description":"<p>环境光的颜色。</p>\n"},"intensity":{"description":"<p>环境光的强度。</p>\n"}}},"ambientCubemap":{"properties":{"texture":{"description":"<p>环境光纹理的 url，支持使用<code>.hdr</code>格式的 HDR 贴图。可以从 <a href=\"http://www.hdrlabs.com/sibl/archive.html\" target=\"_blank\">http://www.hdrlabs.com/sibl/archive.html</a> 等网站获取 <code>.hdr</code> 的资源。</p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">ambientCubemap: {\n texture: 'pisa.hdr',\n // 解析 hdr 时使用的曝光值\n exposure: 1.0\n}\n</code></pre>\n"},"diffuseIntensity":{"description":"<p>漫反射的强度。</p>\n"},"specularIntensity":{"description":"<p>高光反射的强度。</p>\n"}}}}},"postEffect":{"properties":{"enable":{"description":"<p>是否开启后处理特效，默认关闭。</p>\n"},"bloom":{"properties":{"enable":{"description":"<p>是否开启光晕特效。</p>\n"},"bloomIntensity":{"description":"<p>光晕的强度，默认为 0.1</p>\n"}}},"depthOfField":{"properties":{"enable":{"description":"<p>是否开启景深</p>\n"},"focalDistance":{"description":"<p>初始的焦距，用户可以点击区域自动聚焦。</p>\n"},"focalRange":{"description":"<p>完全聚焦的区域范围，在此范围内的物体时完全清晰的，不会有模糊</p>\n"},"fstop":{"description":"<p>镜头的<a href=\"https://zh.wikipedia.org/wiki/%E7%84%A6%E6%AF%94\" target=\"_blank\">F值</a>，值越小景深越浅。</p>\n"},"blurRadius":{"description":"<p>焦外的模糊半径</p>\n<p>不同模糊半径的区别：</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-dof-small.png\" width=\"100%\" title=\"blurSize: 3\">\n <img src=\"documents/asset/gl/img/geo-dof-large.png\" width=\"100%\" title=\"blurSize: 10\">\n</div>\n"}}},"screenSpaceAmbientOcclusion":{"description":"<p>屏幕空间的环境光遮蔽效果。环境光遮蔽可以让角落，缝隙等大部分光无法到达的区域变暗，是传统的阴影贴图的补充，可以让整个场景更加自然，有层次。</p>\n<p>下面是无 SSAO 和有 SSAO 的对比。</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-no-ssao.png\" width=\"100%\" title=\"No SSAO\">\n <img src=\"documents/asset/gl/img/geo-ssao.png\" width=\"100%\" title=\"SSAO\">\n</div>\n"},"SSAO":{"properties":{"enable":{"description":"<p>是否开启环境光遮蔽，默认不开启</p>\n"},"quality":{"description":"<p>环境光遮蔽的质量，支持<code>'low'</code>, <code>'medium'</code>, <code>'high'</code>, <code>'ultra'</code></p>\n"},"radius":{"description":"<p>环境光遮蔽的采样半径。半径越大效果越自然，但是需要设置较高的<code>'quality'</code>。</p>\n<p>下面是半径值较小与较大之间的区别</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-ssao-small-radius.png\" width=\"100%\" title=\"Radius: 1\">\n <img src=\"documents/asset/gl/img/geo-ssao-large-radius.png\" width=\"100%\" title=\"Radius: 10\">\n</div>\n"},"intensity":{"description":"<p>环境光遮蔽的强度。值越大颜色越深。</p>\n"}}},"colorCorrection":{"properties":{"enable":{"description":"<p>是否开启颜色纠正</p>\n"},"lookupTexture":{"description":"<p>颜色查找表，推荐使用。</p>\n<p>颜色查找表是一张像下面这样的纹理图片。</p>\n<p><img width=\"200\" height=\"auto\" src=\"documents/asset/gl/img/lookup.png\"></p>\n<p>这张是基础的查找表图片，你可以直接拿来使用，为了方便将场景色调调整你想要的效果，你可以将场景截图后在 Photoshop 等图像处理软件中调整颜色到想要的效果，然后将相同的调整应用到上面这张查找表的图片上。</p>\n<p>比如调成冷色调后，查找表的纹理图片就会成为下面这样：</p>\n<p><img width=\"200\" height=\"auto\" src=\"documents/asset/gl/img/crispwinter.png\"></p>\n<p>然后那这张纹理图片就作为该配置项的值，就可以得到相同的你在 Photoshop 上的效果了。</p>\n<p>当然如果你只是想得到一张截图，完全不用再这样折腾，但是如果你想在能实时交互的作品中也能方便的调整到理想的色调，这个就非常有用了。</p>\n"},"exposure":{"description":"<p>画面的曝光。</p>\n"},"brightness":{"description":"<p>画面的亮度。</p>\n"},"contrast":{"description":"<p>画面的对比度。</p>\n"},"saturation":{"description":"<p>画面的饱和度。</p>\n"}}},"FXAA":{"properties":{"enable":{"description":"<p>是否开启 FXAA，默认关闭。</p>\n"}}}}},"temporalSuperSampling":{"properties":{"enable":{"description":"<p>是否开启分帧超采样。默认在开启 <a href=\"#mapbox3D.postEffect\">postEffect</a> 后也会同步开启。</p>\n"}}}}},"grid3D":{"properties":{"show":{"description":"<p>是否显示三维笛卡尔坐标系。</p>\n"},"boxWidth":{"description":"<p>三维笛卡尔坐标系组件在三维场景中的宽度。配合 <a href=\"#grid3D.viewControl.distance\">viewControl.distance</a> 可以得到最合适的展示尺寸。</p>\n"},"boxHeight":{"description":"<p>三维笛卡尔坐标系组件在三维场景中的高度。</p>\n"},"boxDepth":{"description":"<p>三维笛卡尔坐标系组件在三维场景中的深度。</p>\n"},"axisLine":{"properties":{"show":{"description":"<p>是否显示坐标轴轴线。</p>\n"},"interval":{"description":"<p>坐标轴刻度标签的显示间隔，在类目轴中有效。</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"},"lineStyle":{"properties":{"color":{"description":"<p>线条的颜色。</p>\n<p>除了颜色字符串外，支持使用数组表示的 RGBA 值，例如：</p>\n<pre><code class=\"lang-js\">// 纯白色\n[1, 1, 1, 1]\n</code></pre>\n<p>使用数组表示的时候，每个通道可以设置大于 1 的值用于表示 HDR 的色值。</p>\n"},"opacity":{"description":"<p>线条的不透明度。</p>\n"},"width":{"description":"<p>线条的宽度。</p>\n"}}}}},"axisLabel":{"properties":{"show":{"description":"<p>是否显示刻度标签。</p>\n"},"margin":{"description":"<p>刻度标签与轴线之间的距离。</p>\n<p><strong>注意：</strong> 这个距离是三维空间而非屏幕空间的。</p>\n"},"interval":{"description":"<p>坐标轴刻度标签的显示间隔，在类目轴中有效。</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"},"formatter":{"description":""},"textStyle":{"properties":{"color":{"description":"<p>刻度标签文字的颜色，默认取 <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。支持回调函数，格式如下</p>\n<pre><code class=\"lang-js\">(val: string) => Color\n</code></pre>\n<p>参数是标签的文本，返回颜色值，如下示例：</p>\n<pre><code class=\"lang-js\">textStyle: {\n color: function (value, index) {\n return value >= 0 ? 'green' : 'red';\n }\n}\n</code></pre>\n"},"borderWidth":{"description":"<p>文字的描边宽度。</p>\n"},"borderColor":{"description":"<p>文字的描边颜色。</p>\n"},"fontFamily":{"description":"<p>文字的字体系列。</p>\n"},"fontSize":{"description":"<p>文字的字体大小。</p>\n"},"fontWeight":{"description":"<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n<!-- Overwrite color -->"}}}}},"axisTick":{"properties":{"show":{"description":"<p>是否显示坐标轴刻度。</p>\n"},"interval":{"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"},"length":{"description":"<p>坐标轴刻度的长度。</p>\n"},"lineStyle":{"properties":{"color":{"description":"<p>刻度线的颜色，默认取 <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。</p>\n"},"opacity":{"description":"<p>线条的不透明度。</p>\n"},"width":{"description":"<p>线条的宽度。</p>\n<!-- Overwrite color -->"}}}}},"splitLine":{"properties":{"show":{"description":"<p>是否显示分隔线。默认数值轴显示，类目轴不显示。</p>\n"},"interval":{"properties":{"color":{"description":"<p>分隔线颜色，可以设置成单个颜色。</p>\n<p>也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色。</p>\n<p>示例</p>\n<pre><code>splitLine: {\n lineStyle: {\n // 使用深浅的间隔色\n color: ['#aaa', '#ddd']\n }\n}\n</code></pre>"},"opacity":{"description":"<p>线条的不透明度。</p>\n"},"width":{"description":"<p>线条的宽度。</p>\n<!-- overwrite color -->"}}}}},"splitArea":{"properties":{"show":{"description":"<p>是否显示分隔区域。</p>\n"},"interval":{"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"},"areaStyle":{"properties":{"color":{"description":"<p>分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。</p>\n"}}}}},"axisPointer":{"properties":{"show":{"description":"<p>是否显示坐标轴指示线。</p>\n"},"lineStyle":{"properties":{"color":{"description":"<p>线条的颜色。</p>\n<p>除了颜色字符串外，支持使用数组表示的 RGBA 值，例如：</p>\n<pre><code class=\"lang-js\">// 纯白色\n[1, 1, 1, 1]\n</code></pre>\n<p>使用数组表示的时候，每个通道可以设置大于 1 的值用于表示 HDR 的色值。</p>\n"},"opacity":{"description":"<p>线条的不透明度。</p>\n"},"width":{"description":"<p>线条的宽度。</p>\n"}}},"label":{"properties":{"show":{"description":"<p>是否显示指示线标签。默认数值轴显示，类目轴不显示。</p>\n"},"formatter":{"description":"<p>标签格式器，函数第一个参数是当前坐标轴的数值，第二个参数是所有坐标轴的数值数组</p>\n<pre><code class=\"lang-js\">(value: number, valueAll: Array) => string\n</code></pre>\n"},"margin":{"description":"<p>标签距离坐标轴的距离。同刻度标签一样，这个距离是三维空间而非屏幕像素。</p>\n"},"textStyle":{"properties":{"color":{"description":"<p>文字的颜色。</p>\n"},"borderWidth":{"description":"<p>文字的描边宽度。</p>\n"},"borderColor":{"description":"<p>文字的描边颜色。</p>\n"},"fontFamily":{"description":"<p>文字的字体系列。</p>\n"},"fontSize":{"description":"<p>文字的字体大小。</p>\n"},"fontWeight":{"description":"<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"}}}}}}},"environment":{"description":"<p>环境贴图，支持純颜色值，渐变色，全景贴图的 url。默认为 <code>'auto'</code>，在配置有 <a href=\"#grid3D.light.ambientCubemap.texture\">light.ambientCubemap.texture</a> 的时候会使用该纹理作为环境贴图。否则则不显示环境贴图。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">// 配置为全景贴图\nenvironment: 'asset/starfield.jpg'\n// 配置为纯黑色的背景\nenvironment: '#000'\n// 配置为垂直渐变的背景\nenvironment: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{\n offset: 0, color: '#00aaff' // 天空颜色\n}, {\n offset: 0.7, color: '#998866' // 地面颜色\n}, {\n offset: 1, color: '#998866' // 地面颜色\n}], false)\n</code></pre>\n"},"light":{"properties":{"main":{"properties":{"color":{"description":"<p>主光源的颜色。</p>\n"},"intensity":{"description":"<p>主光源的强度。</p>\n"},"shadow":{"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-shadow.png\" width=\"100%\" title=\"Shadow\">\n <img src=\"documents/asset/gl/img/geo-no-shadow.png\" width=\"100%\" title=\"No Shadow\">\n</div>\n"},"shadowQuality":{"description":"<p>阴影的质量。可选<code>'low'</code>, <code>'medium'</code>, <code>'high'</code>, <code>'ultra'</code></p>\n<p>下图是低质量和高质量阴影的区别。</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-shadow-low.png\" width=\"100%\" title=\"Low\">\n <img src=\"documents/asset/gl/img/geo-shadow-high.png\" width=\"100%\" title=\"High\">\n</div>\n"},"alpha":{"description":"<p>主光源绕 x 轴，即上下旋转的角度。配合 <a href=\"#grid3D.light.main.beta\">beta</a> 控制光源的方向。</p>\n<p>如下示意图：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/light-alpha-beta.png\"></p>\n<p><a href=\"#globe\">globe</a> 组件中可以通过 <a href=\"#globe.light.main.time\">time</a> 控制日光的时间。</p>\n"},"beta":{"description":"<p>主光源绕 y 轴，即左右旋转的角度。</p>\n"}}},"ambient":{"properties":{"color":{"description":"<p>环境光的颜色。</p>\n"},"intensity":{"description":"<p>环境光的强度。</p>\n"}}},"ambientCubemap":{"properties":{"texture":{"description":"<p>环境光纹理的 url，支持使用<code>.hdr</code>格式的 HDR 贴图。可以从 <a href=\"http://www.hdrlabs.com/sibl/archive.html\" target=\"_blank\">http://www.hdrlabs.com/sibl/archive.html</a> 等网站获取 <code>.hdr</code> 的资源。</p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">ambientCubemap: {\n texture: 'pisa.hdr',\n // 解析 hdr 时使用的曝光值\n exposure: 1.0\n}\n</code></pre>\n"},"diffuseIntensity":{"description":"<p>漫反射的强度。</p>\n"},"specularIntensity":{"description":"<p>高光反射的强度。</p>\n"}}}}},"postEffect":{"properties":{"enable":{"description":"<p>是否开启后处理特效，默认关闭。</p>\n"},"bloom":{"properties":{"enable":{"description":"<p>是否开启光晕特效。</p>\n"},"bloomIntensity":{"description":"<p>光晕的强度，默认为 0.1</p>\n"}}},"depthOfField":{"properties":{"enable":{"description":"<p>是否开启景深</p>\n"},"focalDistance":{"description":"<p>初始的焦距，用户可以点击区域自动聚焦。</p>\n"},"focalRange":{"description":"<p>完全聚焦的区域范围，在此范围内的物体时完全清晰的，不会有模糊</p>\n"},"fstop":{"description":"<p>镜头的<a href=\"https://zh.wikipedia.org/wiki/%E7%84%A6%E6%AF%94\" target=\"_blank\">F值</a>，值越小景深越浅。</p>\n"},"blurRadius":{"description":"<p>焦外的模糊半径</p>\n<p>不同模糊半径的区别：</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-dof-small.png\" width=\"100%\" title=\"blurSize: 3\">\n <img src=\"documents/asset/gl/img/geo-dof-large.png\" width=\"100%\" title=\"blurSize: 10\">\n</div>\n"}}},"screenSpaceAmbientOcclusion":{"description":"<p>屏幕空间的环境光遮蔽效果。环境光遮蔽可以让角落，缝隙等大部分光无法到达的区域变暗，是传统的阴影贴图的补充，可以让整个场景更加自然，有层次。</p>\n<p>下面是无 SSAO 和有 SSAO 的对比。</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-no-ssao.png\" width=\"100%\" title=\"No SSAO\">\n <img src=\"documents/asset/gl/img/geo-ssao.png\" width=\"100%\" title=\"SSAO\">\n</div>\n"},"SSAO":{"properties":{"enable":{"description":"<p>是否开启环境光遮蔽，默认不开启</p>\n"},"quality":{"description":"<p>环境光遮蔽的质量，支持<code>'low'</code>, <code>'medium'</code>, <code>'high'</code>, <code>'ultra'</code></p>\n"},"radius":{"description":"<p>环境光遮蔽的采样半径。半径越大效果越自然，但是需要设置较高的<code>'quality'</code>。</p>\n<p>下面是半径值较小与较大之间的区别</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-ssao-small-radius.png\" width=\"100%\" title=\"Radius: 1\">\n <img src=\"documents/asset/gl/img/geo-ssao-large-radius.png\" width=\"100%\" title=\"Radius: 10\">\n</div>\n"},"intensity":{"description":"<p>环境光遮蔽的强度。值越大颜色越深。</p>\n"}}},"colorCorrection":{"properties":{"enable":{"description":"<p>是否开启颜色纠正</p>\n"},"lookupTexture":{"description":"<p>颜色查找表，推荐使用。</p>\n<p>颜色查找表是一张像下面这样的纹理图片。</p>\n<p><img width=\"200\" height=\"auto\" src=\"documents/asset/gl/img/lookup.png\"></p>\n<p>这张是基础的查找表图片，你可以直接拿来使用，为了方便将场景色调调整你想要的效果，你可以将场景截图后在 Photoshop 等图像处理软件中调整颜色到想要的效果，然后将相同的调整应用到上面这张查找表的图片上。</p>\n<p>比如调成冷色调后，查找表的纹理图片就会成为下面这样：</p>\n<p><img width=\"200\" height=\"auto\" src=\"documents/asset/gl/img/crispwinter.png\"></p>\n<p>然后那这张纹理图片就作为该配置项的值，就可以得到相同的你在 Photoshop 上的效果了。</p>\n<p>当然如果你只是想得到一张截图，完全不用再这样折腾，但是如果你想在能实时交互的作品中也能方便的调整到理想的色调，这个就非常有用了。</p>\n"},"exposure":{"description":"<p>画面的曝光。</p>\n"},"brightness":{"description":"<p>画面的亮度。</p>\n"},"contrast":{"description":"<p>画面的对比度。</p>\n"},"saturation":{"description":"<p>画面的饱和度。</p>\n"}}},"FXAA":{"properties":{"enable":{"description":"<p>是否开启 FXAA，默认关闭。</p>\n"}}}}},"temporalSuperSampling":{"properties":{"enable":{"description":"<p>是否开启分帧超采样。默认在开启 <a href=\"#grid3D.postEffect\">postEffect</a> 后也会同步开启。</p>\n"}}},"viewControl":{"properties":{"projection":{"description":"<p>投影方式，默认为透视投影<code>'perspective'</code>，也支持设置为正交投影<code>'orthographic'</code>。</p>\n"},"autoRotate":{"description":"<p>是否开启视角绕物体的自动旋转查看。</p>\n"},"autoRotateDirection":{"description":"<p>物体自传的方向。默认是 <code>'cw'</code> 也就是从上往下看是顺时针方向，也可以取 <code>'ccw'</code>，既从上往下看为逆时针方向。</p>\n"},"autoRotateSpeed":{"description":"<p>物体自传的速度。单位为<code>角度 / 秒</code>，默认为<code>10</code> ，也就是<code>36</code>秒转一圈。</p>\n"},"autoRotateAfterStill":{"description":"<p>在鼠标静止操作后恢复自动旋转的时间间隔。在开启 <a href=\"#grid3D.viewControl.autoRotate\">autoRotate</a> 后有效。</p>\n"},"damping":{"description":"<p>鼠标进行旋转，缩放等操作时的迟滞因子，在大于 0 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。</p>\n"},"rotateSensitivity":{"description":"<p>旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。</p>\n<p>默认为``</p>\n<p>设置为<code>0</code>后无法旋转。</p>\n<pre><code class=\"lang-js\">// 无法旋转\nrotateSensitivity: 0\n// 只能横向旋转\nrotateSensitivity: [1, 0]\n// 只能纵向旋转\nrotateSensitivity: [0, 1]\n</code></pre>\n"},"zoomSensitivity":{"description":"<p>缩放操作的灵敏度，值越大越灵敏。默认为``</p>\n<p>设置为<code>0</code>后无法缩放。</p>\n"},"panSensitivity":{"description":"<p>平移操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的平移灵敏度</p>\n<p>默认为``</p>\n<p>设置为<code>0</code>后无法平移。</p>\n"},"panMouseButton":{"description":"<p>平移操作使用的鼠标按键，支持：</p>\n<ul>\n<li><p><code>'left'</code> 鼠标左键（默认）</p>\n</li>\n<li><p><code>'middle'</code> 鼠标中键</p>\n</li>\n<li><p><code>'right'</code> 鼠标右键</p>\n</li>\n</ul>\n<p>注意：如果设置为鼠标右键则会阻止默认的右键菜单。</p>\n"},"rotateMouseButton":{"description":"<p>旋转操作使用的鼠标按键，支持：</p>\n<ul>\n<li><p><code>'left'</code> 鼠标左键</p>\n</li>\n<li><p><code>'middle'</code> 鼠标中键（默认）</p>\n</li>\n<li><p><code>'right'</code> 鼠标右键</p>\n</li>\n</ul>\n<p>注意：如果设置为鼠标右键则会阻止默认的右键菜单。</p>\n"},"distance":{"description":"<p>默认视角距离主体的距离，对于 <a href=\"#globe\">globe</a> 来说是距离地球表面的距离，对于 <a href=\"#grid3D\">grid3D</a> 和 <a href=\"#geo3D\">geo3D</a> 等其它组件来说是距离中心原点的距离。在 <a href=\"#grid3D.viewControl.projection\">projection</a> 为<code>'perspective'</code>的时候有效。</p>\n"},"minDistance":{"description":"<p>视角通过鼠标控制能拉近到主体的最小距离。在 <a href=\"#grid3D.viewControl.projection\">projection</a> 为<code>'perspective'</code>的时候有效。</p>\n"},"maxDistance":{"description":"<p>视角通过鼠标控制能拉远到主体的最大距离。在 <a href=\"#grid3D.viewControl.projection\">projection</a> 为<code>'perspective'</code>的时候有效。</p>\n"},"orthographicSize":{"description":"<p>正交投影的大小。在 <a href=\"#grid3D.viewControl.projection\">projection</a> 为<code>'orthographic'</code>的时候有效。</p>\n"},"maxOrthographicSize":{"description":"<p>正交投影缩放的最大值。在 <a href=\"#grid3D.viewControl.projection\">projection</a> 为<code>'orthographic'</code>的时候有效。</p>\n"},"minOrthographicSize":{"description":"<p>正交投影缩放的最小值。在 <a href=\"#grid3D.viewControl.projection\">projection</a> 为<code>'orthographic'</code>的时候有效。</p>\n"},"alpha":{"description":"<p>视角绕 x 轴，即上下旋转的角度。配合 <a href=\"#grid3D.light.main.beta\">beta</a> 可以控制视角的方向。</p>\n<p>如下示意图：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/view-alpha-beta.png\"></p>\n"},"beta":{"description":"<p>视角绕 y 轴，即左右旋转的角度。</p>\n"},"center":{"description":"<p>视角中心点，旋转也会围绕这个中心点旋转，默认为<code>[0,0,0]</code>。</p>\n"},"minAlpha":{"description":"<p>上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。</p>\n"},"maxAlpha":{"description":"<p>上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。</p>\n"},"minBeta":{"description":"<p>左右旋转的最小 beta 值。即视角能旋转到达最左的角度。</p>\n"},"maxBeta":{"description":"<p>左右旋转的最大 beta 值。即视角能旋转到达最右的角度。</p>\n"},"animation":{"description":"<p>是否开启动画。</p>\n"},"animationDurationUpdate":{"description":"<p>过渡动画的时长。</p>\n"},"animationEasingUpdate":{"description":"<p>过渡动画的缓动效果。</p>\n"}}},"zlevel":{"description":"<p>组件所在的层。</p>\n<p><code>zlevel</code>用于 Canvas 分层，不同<code>zlevel</code>值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的<code>zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。</p>\n<p><code>zlevel</code> 大的 Canvas 会放在 <code>zlevel</code> 小的 Canvas 的上面。</p>\n<p><strong>注:</strong> echarts-gl 中组件的层需要跟 echarts 中组件的层分开。同一个 zlevel 不能同时用于 WebGL 和 Canvas 的绘制。</p>\n"},"left":{"description":"<p>组件的视图离容器左侧的距离。</p>\n<p><code>left</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比，也可以是 <code>'left'</code>, <code>'center'</code>, <code>'right'</code>。</p>\n<p>如果 <code>left</code> 的值为<code>'left'</code>, <code>'center'</code>, <code>'right'</code>，组件会根据相应的位置自动对齐。</p>\n"},"top":{"description":"<p>组件的视图离容器上侧的距离。</p>\n<p><code>top</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比，也可以是 <code>'top'</code>, <code>'middle'</code>, <code>'bottom'</code>。</p>\n<p>如果 <code>top</code> 的值为<code>'top'</code>, <code>'middle'</code>, <code>'bottom'</code>，组件会根据相应的位置自动对齐。</p>\n"},"right":{"description":"<p>组件的视图离容器右侧的距离。</p>\n<p><code>right</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比。</p>\n<p>默认自适应。</p>\n"},"bottom":{"description":"<p>组件的视图离容器下侧的距离。</p>\n<p><code>bottom</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比。</p>\n<p>默认自适应。</p>\n"},"width":{"description":"<p>组件的视图宽度。</p>\n"},"height":{"description":"<p>组件的视图高度。</p>\n"}}},"xAxis3D":{"properties":{"show":{"description":"<p>是否显示 x 轴。</p>\n"},"name":{"description":"<p>坐标轴名称。</p>\n"},"grid3DIndex":{"description":"<p>坐标轴使用的 <a href=\"#grid3D\">grid3D</a> 组件的索引。默认使用第一个 <a href=\"#grid3D\">grid3D</a> 组件。</p>\n"},"nameTextStyle":{"properties":{"color":{"description":"<p>坐标轴名称的颜色，默认取 <a href=\"#xAxis3D.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。</p>\n"},"borderWidth":{"description":"<p>文字的描边宽度。</p>\n"},"borderColor":{"description":"<p>文字的描边颜色。</p>\n"},"fontFamily":{"description":"<p>文字的字体系列。</p>\n"},"fontSize":{"description":"<p>文字的字体大小。</p>\n"},"fontWeight":{"description":"<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"}}},"nameGap":{"description":"<p>坐标轴名称与轴线之间的距离，注意是三维空间的距离而非屏幕像素值。</p>\n"},"type":{"description":"<p>坐标轴类型。</p>\n<p>可选：</p>\n<ul>\n<li><p><code>'value'</code>\n 数值轴，适用于连续数据。</p>\n</li>\n<li><p><code>'category'</code>\n 类目轴，适用于离散的类目数据，为该类型时必须通过 <a href=\"#xAxis3D.data\">data</a> 设置类目数据。</p>\n</li>\n<li><p><code>'time'</code>\n 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。</p>\n</li>\n<li><p><code>'log'</code>\n 对数轴。适用于对数数据。</p>\n</li>\n</ul>\n"},"min":{"description":"<p>坐标轴刻度最小值。</p>\n<p>可以设置成特殊值 <code>'dataMin'</code>，此时取数据在该轴上的最小值作为最小刻度。</p>\n<p>不设置时会自动计算最小值保证坐标轴刻度的均匀分布。</p>\n<p>在类目轴中，也可以设置为类目的序数（如类目轴 <code>data: ['类A', '类B', '类C']</code> 中，序数 <code>2</code> 表示 <code>'类C'</code>。也可以设置为负数，如 <code>-3</code>）。</p>\n"},"max":{"description":"<p>坐标轴刻度最大值。</p>\n<p>可以设置成特殊值 <code>'dataMax'</code>，此时取数据在该轴上的最大值作为最大刻度。</p>\n<p>不设置时会自动计算最大值保证坐标轴刻度的均匀分布。</p>\n<p>在类目轴中，也可以设置为类目的序数（如类目轴 <code>data: ['类A', '类B', '类C']</code> 中，序数 <code>2</code> 表示 <code>'类C'</code>。也可以设置为负数，如 <code>-3</code>）。</p>\n"},"scale":{"description":"<p>只在数值轴中（<a href=\"#xAxis3D.type\">type</a>: 'value'）有效。</p>\n<p>是否是脱离 0 值比例。设置成 <code>true</code> 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。</p>\n<p>在设置 <a href=\"#xAxis3D.min\">min</a> 和 <a href=\"#xAxis3D.max\">max</a> 之后该配置项无效。</p>\n"},"splitNumber":{"description":"<p>坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。</p>\n<p>在类目轴中无效。</p>\n"},"minInterval":{"description":"<p>自动计算的坐标轴最小间隔大小。</p>\n<p>例如可以设置成<code>1</code>保证坐标轴分割刻度显示成整数。</p>\n<pre><code class=\"lang-js\">{\n minInterval: 1\n}\n</code></pre>\n<p>只在数值轴中（<a href=\"#xAxis3D.type\">type</a>: 'value'）有效。</p>\n"},"interval":{"description":"<p>强制设置坐标轴分割间隔。</p>\n<p>因为 <a href=\"#xAxis3D.splitNumber\">splitNumber</a> 是预估的值，实际根据策略计算出来的刻度可能无法达到想要的效果，这时候可以使用 interval 配合 <a href=\"#xAxis3D.min\">min</a>、<a href=\"#xAxis3D.max\">max</a> 强制设定刻度划分，一般不建议使用。</p>\n<p>无法在类目轴中使用。在时间轴（<a href=\"#xAxis3D.type\">type</a>: 'time'）中需要传时间戳，在对数轴（<a href=\"#xAxis3D.type\">type</a>: 'log'）中需要传指数值。</p>\n"},"logBase":{"description":"<p>对数轴的底数，只在对数轴中（<a href=\"#xAxis3D.type\">type</a>: 'log'）有效。</p>\n"},"data":{"items":{"properties":{"value":{"description":"<p>单个类目名称。</p>\n"},"textStyle":{"properties":{"color":{"description":"<p>文字的颜色。</p>\n"},"borderWidth":{"description":"<p>文字的描边宽度。</p>\n"},"borderColor":{"description":"<p>文字的描边颜色。</p>\n"},"fontFamily":{"description":"<p>文字的字体系列。</p>\n"},"fontSize":{"description":"<p>文字的字体大小。</p>\n"},"fontWeight":{"description":"<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"}}}}}},"axisLine":{"properties":{"show":{"description":"<p>是否显示坐标轴轴线。</p>\n"},"interval":{"description":"<p>坐标轴刻度标签的显示间隔，在类目轴中有效。</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"},"lineStyle":{"properties":{"color":{"description":"<p>线条的颜色。</p>\n<p>除了颜色字符串外，支持使用数组表示的 RGBA 值，例如：</p>\n<pre><code class=\"lang-js\">// 纯白色\n[1, 1, 1, 1]\n</code></pre>\n<p>使用数组表示的时候，每个通道可以设置大于 1 的值用于表示 HDR 的色值。</p>\n"},"opacity":{"description":"<p>线条的不透明度。</p>\n"},"width":{"description":"<p>线条的宽度。</p>\n"}}}}},"axisLabel":{"properties":{"show":{"description":"<p>是否显示刻度标签。</p>\n"},"margin":{"description":"<p>刻度标签与轴线之间的距离。</p>\n<p><strong>注意：</strong> 这个距离是三维空间而非屏幕空间的。</p>\n"},"interval":{"description":"<p>坐标轴刻度标签的显示间隔，在类目轴中有效。</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"},"formatter":{"description":""},"textStyle":{"properties":{"color":{"description":"<p>刻度标签文字的颜色，默认取 <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。支持回调函数，格式如下</p>\n<pre><code class=\"lang-js\">(val: string) => Color\n</code></pre>\n<p>参数是标签的文本，返回颜色值，如下示例：</p>\n<pre><code class=\"lang-js\">textStyle: {\n color: function (value, index) {\n return value >= 0 ? 'green' : 'red';\n }\n}\n</code></pre>\n"},"borderWidth":{"description":"<p>文字的描边宽度。</p>\n"},"borderColor":{"description":"<p>文字的描边颜色。</p>\n"},"fontFamily":{"description":"<p>文字的字体系列。</p>\n"},"fontSize":{"description":"<p>文字的字体大小。</p>\n"},"fontWeight":{"description":"<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n<!-- Overwrite color -->"}}}}},"axisTick":{"properties":{"show":{"description":"<p>是否显示坐标轴刻度。</p>\n"},"interval":{"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"},"length":{"description":"<p>坐标轴刻度的长度。</p>\n"},"lineStyle":{"properties":{"color":{"description":"<p>刻度线的颜色，默认取 <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。</p>\n"},"opacity":{"description":"<p>线条的不透明度。</p>\n"},"width":{"description":"<p>线条的宽度。</p>\n<!-- Overwrite color -->"}}}}},"splitLine":{"properties":{"show":{"description":"<p>是否显示分隔线。默认数值轴显示，类目轴不显示。</p>\n"},"interval":{"properties":{"color":{"description":"<p>分隔线颜色，可以设置成单个颜色。</p>\n<p>也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色。</p>\n<p>示例</p>\n<pre><code>splitLine: {\n lineStyle: {\n // 使用深浅的间隔色\n color: ['#aaa', '#ddd']\n }\n}\n</code></pre>"},"opacity":{"description":"<p>线条的不透明度。</p>\n"},"width":{"description":"<p>线条的宽度。</p>\n<!-- overwrite color -->"}}}}},"splitArea":{"properties":{"show":{"description":"<p>是否显示分隔区域。</p>\n"},"interval":{"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"},"areaStyle":{"properties":{"color":{"description":"<p>分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。</p>\n"}}}}},"axisPointer":{"properties":{"show":{"description":"<p>是否显示坐标轴指示线。</p>\n"},"lineStyle":{"properties":{"color":{"description":"<p>线条的颜色。</p>\n<p>除了颜色字符串外，支持使用数组表示的 RGBA 值，例如：</p>\n<pre><code class=\"lang-js\">// 纯白色\n[1, 1, 1, 1]\n</code></pre>\n<p>使用数组表示的时候，每个通道可以设置大于 1 的值用于表示 HDR 的色值。</p>\n"},"opacity":{"description":"<p>线条的不透明度。</p>\n"},"width":{"description":"<p>线条的宽度。</p>\n"}}},"label":{"properties":{"show":{"description":"<p>是否显示指示线标签。默认数值轴显示，类目轴不显示。</p>\n"},"formatter":{"description":"<p>标签格式器，函数第一个参数是当前坐标轴的数值，第二个参数是所有坐标轴的数值数组</p>\n<pre><code class=\"lang-js\">(value: number, valueAll: Array) => string\n</code></pre>\n"},"margin":{"description":"<p>标签距离坐标轴的距离。同刻度标签一样，这个距离是三维空间而非屏幕像素。</p>\n"},"textStyle":{"properties":{"color":{"description":"<p>文字的颜色。</p>\n"},"borderWidth":{"description":"<p>文字的描边宽度。</p>\n"},"borderColor":{"description":"<p>文字的描边颜色。</p>\n"},"fontFamily":{"description":"<p>文字的字体系列。</p>\n"},"fontSize":{"description":"<p>文字的字体大小。</p>\n"},"fontWeight":{"description":"<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"}}}}}}}}},"yAxis3D":{"properties":{"show":{"description":"<p>是否显示 y 轴。</p>\n"},"name":{"description":"<p>坐标轴名称。</p>\n"},"grid3DIndex":{"description":"<p>坐标轴使用的 <a href=\"#grid3D\">grid3D</a> 组件的索引。默认使用第一个 <a href=\"#grid3D\">grid3D</a> 组件。</p>\n"},"nameTextStyle":{"properties":{"color":{"description":"<p>坐标轴名称的颜色，默认取 <a href=\"#yAxis3D.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。</p>\n"},"borderWidth":{"description":"<p>文字的描边宽度。</p>\n"},"borderColor":{"description":"<p>文字的描边颜色。</p>\n"},"fontFamily":{"description":"<p>文字的字体系列。</p>\n"},"fontSize":{"description":"<p>文字的字体大小。</p>\n"},"fontWeight":{"description":"<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"}}},"nameGap":{"description":"<p>坐标轴名称与轴线之间的距离，注意是三维空间的距离而非屏幕像素值。</p>\n"},"type":{"description":"<p>坐标轴类型。</p>\n<p>可选：</p>\n<ul>\n<li><p><code>'value'</code>\n 数值轴，适用于连续数据。</p>\n</li>\n<li><p><code>'category'</code>\n 类目轴，适用于离散的类目数据，为该类型时必须通过 <a href=\"#yAxis3D.data\">data</a> 设置类目数据。</p>\n</li>\n<li><p><code>'time'</code>\n 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。</p>\n</li>\n<li><p><code>'log'</code>\n 对数轴。适用于对数数据。</p>\n</li>\n</ul>\n"},"min":{"description":"<p>坐标轴刻度最小值。</p>\n<p>可以设置成特殊值 <code>'dataMin'</code>，此时取数据在该轴上的最小值作为最小刻度。</p>\n<p>不设置时会自动计算最小值保证坐标轴刻度的均匀分布。</p>\n<p>在类目轴中，也可以设置为类目的序数（如类目轴 <code>data: ['类A', '类B', '类C']</code> 中，序数 <code>2</code> 表示 <code>'类C'</code>。也可以设置为负数，如 <code>-3</code>）。</p>\n"},"max":{"description":"<p>坐标轴刻度最大值。</p>\n<p>可以设置成特殊值 <code>'dataMax'</code>，此时取数据在该轴上的最大值作为最大刻度。</p>\n<p>不设置时会自动计算最大值保证坐标轴刻度的均匀分布。</p>\n<p>在类目轴中，也可以设置为类目的序数（如类目轴 <code>data: ['类A', '类B', '类C']</code> 中，序数 <code>2</code> 表示 <code>'类C'</code>。也可以设置为负数，如 <code>-3</code>）。</p>\n"},"scale":{"description":"<p>只在数值轴中（<a href=\"#yAxis3D.type\">type</a>: 'value'）有效。</p>\n<p>是否是脱离 0 值比例。设置成 <code>true</code> 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。</p>\n<p>在设置 <a href=\"#yAxis3D.min\">min</a> 和 <a href=\"#yAxis3D.max\">max</a> 之后该配置项无效。</p>\n"},"splitNumber":{"description":"<p>坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。</p>\n<p>在类目轴中无效。</p>\n"},"minInterval":{"description":"<p>自动计算的坐标轴最小间隔大小。</p>\n<p>例如可以设置成<code>1</code>保证坐标轴分割刻度显示成整数。</p>\n<pre><code class=\"lang-js\">{\n minInterval: 1\n}\n</code></pre>\n<p>只在数值轴中（<a href=\"#yAxis3D.type\">type</a>: 'value'）有效。</p>\n"},"interval":{"description":"<p>强制设置坐标轴分割间隔。</p>\n<p>因为 <a href=\"#yAxis3D.splitNumber\">splitNumber</a> 是预估的值，实际根据策略计算出来的刻度可能无法达到想要的效果，这时候可以使用 interval 配合 <a href=\"#yAxis3D.min\">min</a>、<a href=\"#yAxis3D.max\">max</a> 强制设定刻度划分，一般不建议使用。</p>\n<p>无法在类目轴中使用。在时间轴（<a href=\"#yAxis3D.type\">type</a>: 'time'）中需要传时间戳，在对数轴（<a href=\"#yAxis3D.type\">type</a>: 'log'）中需要传指数值。</p>\n"},"logBase":{"description":"<p>对数轴的底数，只在对数轴中（<a href=\"#yAxis3D.type\">type</a>: 'log'）有效。</p>\n"},"data":{"items":{"properties":{"value":{"description":"<p>单个类目名称。</p>\n"},"textStyle":{"properties":{"color":{"description":"<p>文字的颜色。</p>\n"},"borderWidth":{"description":"<p>文字的描边宽度。</p>\n"},"borderColor":{"description":"<p>文字的描边颜色。</p>\n"},"fontFamily":{"description":"<p>文字的字体系列。</p>\n"},"fontSize":{"description":"<p>文字的字体大小。</p>\n"},"fontWeight":{"description":"<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"}}}}}},"axisLine":{"properties":{"show":{"description":"<p>是否显示坐标轴轴线。</p>\n"},"interval":{"description":"<p>坐标轴刻度标签的显示间隔，在类目轴中有效。</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"},"lineStyle":{"properties":{"color":{"description":"<p>线条的颜色。</p>\n<p>除了颜色字符串外，支持使用数组表示的 RGBA 值，例如：</p>\n<pre><code class=\"lang-js\">// 纯白色\n[1, 1, 1, 1]\n</code></pre>\n<p>使用数组表示的时候，每个通道可以设置大于 1 的值用于表示 HDR 的色值。</p>\n"},"opacity":{"description":"<p>线条的不透明度。</p>\n"},"width":{"description":"<p>线条的宽度。</p>\n"}}}}},"axisLabel":{"properties":{"show":{"description":"<p>是否显示刻度标签。</p>\n"},"margin":{"description":"<p>刻度标签与轴线之间的距离。</p>\n<p><strong>注意：</strong> 这个距离是三维空间而非屏幕空间的。</p>\n"},"interval":{"description":"<p>坐标轴刻度标签的显示间隔，在类目轴中有效。</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"},"formatter":{"description":""},"textStyle":{"properties":{"color":{"description":"<p>刻度标签文字的颜色，默认取 <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。支持回调函数，格式如下</p>\n<pre><code class=\"lang-js\">(val: string) => Color\n</code></pre>\n<p>参数是标签的文本，返回颜色值，如下示例：</p>\n<pre><code class=\"lang-js\">textStyle: {\n color: function (value, index) {\n return value >= 0 ? 'green' : 'red';\n }\n}\n</code></pre>\n"},"borderWidth":{"description":"<p>文字的描边宽度。</p>\n"},"borderColor":{"description":"<p>文字的描边颜色。</p>\n"},"fontFamily":{"description":"<p>文字的字体系列。</p>\n"},"fontSize":{"description":"<p>文字的字体大小。</p>\n"},"fontWeight":{"description":"<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n<!-- Overwrite color -->"}}}}},"axisTick":{"properties":{"show":{"description":"<p>是否显示坐标轴刻度。</p>\n"},"interval":{"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"},"length":{"description":"<p>坐标轴刻度的长度。</p>\n"},"lineStyle":{"properties":{"color":{"description":"<p>刻度线的颜色，默认取 <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。</p>\n"},"opacity":{"description":"<p>线条的不透明度。</p>\n"},"width":{"description":"<p>线条的宽度。</p>\n<!-- Overwrite color -->"}}}}},"splitLine":{"properties":{"show":{"description":"<p>是否显示分隔线。默认数值轴显示，类目轴不显示。</p>\n"},"interval":{"properties":{"color":{"description":"<p>分隔线颜色，可以设置成单个颜色。</p>\n<p>也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色。</p>\n<p>示例</p>\n<pre><code>splitLine: {\n lineStyle: {\n // 使用深浅的间隔色\n color: ['#aaa', '#ddd']\n }\n}\n</code></pre>"},"opacity":{"description":"<p>线条的不透明度。</p>\n"},"width":{"description":"<p>线条的宽度。</p>\n<!-- overwrite color -->"}}}}},"splitArea":{"properties":{"show":{"description":"<p>是否显示分隔区域。</p>\n"},"interval":{"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"},"areaStyle":{"properties":{"color":{"description":"<p>分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。</p>\n"}}}}},"axisPointer":{"properties":{"show":{"description":"<p>是否显示坐标轴指示线。</p>\n"},"lineStyle":{"properties":{"color":{"description":"<p>线条的颜色。</p>\n<p>除了颜色字符串外，支持使用数组表示的 RGBA 值，例如：</p>\n<pre><code class=\"lang-js\">// 纯白色\n[1, 1, 1, 1]\n</code></pre>\n<p>使用数组表示的时候，每个通道可以设置大于 1 的值用于表示 HDR 的色值。</p>\n"},"opacity":{"description":"<p>线条的不透明度。</p>\n"},"width":{"description":"<p>线条的宽度。</p>\n"}}},"label":{"properties":{"show":{"description":"<p>是否显示指示线标签。默认数值轴显示，类目轴不显示。</p>\n"},"formatter":{"description":"<p>标签格式器，函数第一个参数是当前坐标轴的数值，第二个参数是所有坐标轴的数值数组</p>\n<pre><code class=\"lang-js\">(value: number, valueAll: Array) => string\n</code></pre>\n"},"margin":{"description":"<p>标签距离坐标轴的距离。同刻度标签一样，这个距离是三维空间而非屏幕像素。</p>\n"},"textStyle":{"properties":{"color":{"description":"<p>文字的颜色。</p>\n"},"borderWidth":{"description":"<p>文字的描边宽度。</p>\n"},"borderColor":{"description":"<p>文字的描边颜色。</p>\n"},"fontFamily":{"description":"<p>文字的字体系列。</p>\n"},"fontSize":{"description":"<p>文字的字体大小。</p>\n"},"fontWeight":{"description":"<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"}}}}}}}}},"zAxis3D":{"properties":{"show":{"description":"<p>是否显示 z 轴。</p>\n"},"name":{"description":"<p>坐标轴名称。</p>\n"},"grid3DIndex":{"description":"<p>坐标轴使用的 <a href=\"#grid3D\">grid3D</a> 组件的索引。默认使用第一个 <a href=\"#grid3D\">grid3D</a> 组件。</p>\n"},"nameTextStyle":{"properties":{"color":{"description":"<p>坐标轴名称的颜色，默认取 <a href=\"#zAxis3D.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。</p>\n"},"borderWidth":{"description":"<p>文字的描边宽度。</p>\n"},"borderColor":{"description":"<p>文字的描边颜色。</p>\n"},"fontFamily":{"description":"<p>文字的字体系列。</p>\n"},"fontSize":{"description":"<p>文字的字体大小。</p>\n"},"fontWeight":{"description":"<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"}}},"nameGap":{"description":"<p>坐标轴名称与轴线之间的距离，注意是三维空间的距离而非屏幕像素值。</p>\n"},"type":{"description":"<p>坐标轴类型。</p>\n<p>可选：</p>\n<ul>\n<li><p><code>'value'</code>\n 数值轴，适用于连续数据。</p>\n</li>\n<li><p><code>'category'</code>\n 类目轴，适用于离散的类目数据，为该类型时必须通过 <a href=\"#zAxis3D.data\">data</a> 设置类目数据。</p>\n</li>\n<li><p><code>'time'</code>\n 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。</p>\n</li>\n<li><p><code>'log'</code>\n 对数轴。适用于对数数据。</p>\n</li>\n</ul>\n"},"min":{"description":"<p>坐标轴刻度最小值。</p>\n<p>可以设置成特殊值 <code>'dataMin'</code>，此时取数据在该轴上的最小值作为最小刻度。</p>\n<p>不设置时会自动计算最小值保证坐标轴刻度的均匀分布。</p>\n<p>在类目轴中，也可以设置为类目的序数（如类目轴 <code>data: ['类A', '类B', '类C']</code> 中，序数 <code>2</code> 表示 <code>'类C'</code>。也可以设置为负数，如 <code>-3</code>）。</p>\n"},"max":{"description":"<p>坐标轴刻度最大值。</p>\n<p>可以设置成特殊值 <code>'dataMax'</code>，此时取数据在该轴上的最大值作为最大刻度。</p>\n<p>不设置时会自动计算最大值保证坐标轴刻度的均匀分布。</p>\n<p>在类目轴中，也可以设置为类目的序数（如类目轴 <code>data: ['类A', '类B', '类C']</code> 中，序数 <code>2</code> 表示 <code>'类C'</code>。也可以设置为负数，如 <code>-3</code>）。</p>\n"},"scale":{"description":"<p>只在数值轴中（<a href=\"#zAxis3D.type\">type</a>: 'value'）有效。</p>\n<p>是否是脱离 0 值比例。设置成 <code>true</code> 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。</p>\n<p>在设置 <a href=\"#zAxis3D.min\">min</a> 和 <a href=\"#zAxis3D.max\">max</a> 之后该配置项无效。</p>\n"},"splitNumber":{"description":"<p>坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。</p>\n<p>在类目轴中无效。</p>\n"},"minInterval":{"description":"<p>自动计算的坐标轴最小间隔大小。</p>\n<p>例如可以设置成<code>1</code>保证坐标轴分割刻度显示成整数。</p>\n<pre><code class=\"lang-js\">{\n minInterval: 1\n}\n</code></pre>\n<p>只在数值轴中（<a href=\"#zAxis3D.type\">type</a>: 'value'）有效。</p>\n"},"interval":{"description":"<p>强制设置坐标轴分割间隔。</p>\n<p>因为 <a href=\"#zAxis3D.splitNumber\">splitNumber</a> 是预估的值，实际根据策略计算出来的刻度可能无法达到想要的效果，这时候可以使用 interval 配合 <a href=\"#zAxis3D.min\">min</a>、<a href=\"#zAxis3D.max\">max</a> 强制设定刻度划分，一般不建议使用。</p>\n<p>无法在类目轴中使用。在时间轴（<a href=\"#zAxis3D.type\">type</a>: 'time'）中需要传时间戳，在对数轴（<a href=\"#zAxis3D.type\">type</a>: 'log'）中需要传指数值。</p>\n"},"logBase":{"description":"<p>对数轴的底数，只在对数轴中（<a href=\"#zAxis3D.type\">type</a>: 'log'）有效。</p>\n"},"data":{"items":{"properties":{"value":{"description":"<p>单个类目名称。</p>\n"},"textStyle":{"properties":{"color":{"description":"<p>文字的颜色。</p>\n"},"borderWidth":{"description":"<p>文字的描边宽度。</p>\n"},"borderColor":{"description":"<p>文字的描边颜色。</p>\n"},"fontFamily":{"description":"<p>文字的字体系列。</p>\n"},"fontSize":{"description":"<p>文字的字体大小。</p>\n"},"fontWeight":{"description":"<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"}}}}}},"axisLine":{"properties":{"show":{"description":"<p>是否显示坐标轴轴线。</p>\n"},"interval":{"description":"<p>坐标轴刻度标签的显示间隔，在类目轴中有效。</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"},"lineStyle":{"properties":{"color":{"description":"<p>线条的颜色。</p>\n<p>除了颜色字符串外，支持使用数组表示的 RGBA 值，例如：</p>\n<pre><code class=\"lang-js\">// 纯白色\n[1, 1, 1, 1]\n</code></pre>\n<p>使用数组表示的时候，每个通道可以设置大于 1 的值用于表示 HDR 的色值。</p>\n"},"opacity":{"description":"<p>线条的不透明度。</p>\n"},"width":{"description":"<p>线条的宽度。</p>\n"}}}}},"axisLabel":{"properties":{"show":{"description":"<p>是否显示刻度标签。</p>\n"},"margin":{"description":"<p>刻度标签与轴线之间的距离。</p>\n<p><strong>注意：</strong> 这个距离是三维空间而非屏幕空间的。</p>\n"},"interval":{"description":"<p>坐标轴刻度标签的显示间隔，在类目轴中有效。</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"},"formatter":{"description":""},"textStyle":{"properties":{"color":{"description":"<p>刻度标签文字的颜色，默认取 <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。支持回调函数，格式如下</p>\n<pre><code class=\"lang-js\">(val: string) => Color\n</code></pre>\n<p>参数是标签的文本，返回颜色值，如下示例：</p>\n<pre><code class=\"lang-js\">textStyle: {\n color: function (value, index) {\n return value >= 0 ? 'green' : 'red';\n }\n}\n</code></pre>\n"},"borderWidth":{"description":"<p>文字的描边宽度。</p>\n"},"borderColor":{"description":"<p>文字的描边颜色。</p>\n"},"fontFamily":{"description":"<p>文字的字体系列。</p>\n"},"fontSize":{"description":"<p>文字的字体大小。</p>\n"},"fontWeight":{"description":"<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n<!-- Overwrite color -->"}}}}},"axisTick":{"properties":{"show":{"description":"<p>是否显示坐标轴刻度。</p>\n"},"interval":{"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"},"length":{"description":"<p>坐标轴刻度的长度。</p>\n"},"lineStyle":{"properties":{"color":{"description":"<p>刻度线的颜色，默认取 <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。</p>\n"},"opacity":{"description":"<p>线条的不透明度。</p>\n"},"width":{"description":"<p>线条的宽度。</p>\n<!-- Overwrite color -->"}}}}},"splitLine":{"properties":{"show":{"description":"<p>是否显示分隔线。默认数值轴显示，类目轴不显示。</p>\n"},"interval":{"properties":{"color":{"description":"<p>分隔线颜色，可以设置成单个颜色。</p>\n<p>也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色。</p>\n<p>示例</p>\n<pre><code>splitLine: {\n lineStyle: {\n // 使用深浅的间隔色\n color: ['#aaa', '#ddd']\n }\n}\n</code></pre>"},"opacity":{"description":"<p>线条的不透明度。</p>\n"},"width":{"description":"<p>线条的宽度。</p>\n<!-- overwrite color -->"}}}}},"splitArea":{"properties":{"show":{"description":"<p>是否显示分隔区域。</p>\n"},"interval":{"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"},"areaStyle":{"properties":{"color":{"description":"<p>分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。</p>\n"}}}}},"axisPointer":{"properties":{"show":{"description":"<p>是否显示坐标轴指示线。</p>\n"},"lineStyle":{"properties":{"color":{"description":"<p>线条的颜色。</p>\n<p>除了颜色字符串外，支持使用数组表示的 RGBA 值，例如：</p>\n<pre><code class=\"lang-js\">// 纯白色\n[1, 1, 1, 1]\n</code></pre>\n<p>使用数组表示的时候，每个通道可以设置大于 1 的值用于表示 HDR 的色值。</p>\n"},"opacity":{"description":"<p>线条的不透明度。</p>\n"},"width":{"description":"<p>线条的宽度。</p>\n"}}},"label":{"properties":{"show":{"description":"<p>是否显示指示线标签。默认数值轴显示，类目轴不显示。</p>\n"},"formatter":{"description":"<p>标签格式器，函数第一个参数是当前坐标轴的数值，第二个参数是所有坐标轴的数值数组</p>\n<pre><code class=\"lang-js\">(value: number, valueAll: Array) => string\n</code></pre>\n"},"margin":{"description":"<p>标签距离坐标轴的距离。同刻度标签一样，这个距离是三维空间而非屏幕像素。</p>\n"},"textStyle":{"properties":{"color":{"description":"<p>文字的颜色。</p>\n"},"borderWidth":{"description":"<p>文字的描边宽度。</p>\n"},"borderColor":{"description":"<p>文字的描边颜色。</p>\n"},"fontFamily":{"description":"<p>文字的字体系列。</p>\n"},"fontSize":{"description":"<p>文字的字体大小。</p>\n"},"fontWeight":{"description":"<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"}}}}}}}}},"series":{"items":{"anyOf":[{"properties":{"type":{"description":""},"name":{"description":"<p>系列名称，用于<a href=\"http://echarts.baidu.com/option.html#tooltip\" target=\"_blank\">tooltip</a>的显示，<a href=\"http://echarts.baidu.com/option.html#legend\" target=\"_blank\">legend</a> 的图例筛选，在 <code>setOption</code> 更新数据和配置项时用于指定对应的系列。</p>\n"},"coordinateSystem":{"description":"<p>该系列使用的坐标系，可选：</p>\n<ul>\n<li><p><code>'cartesian3D'</code></p>\n<p> 使用三维笛卡尔坐标系，通过 <a href=\"#series-.grid3DIndex\">grid3DIndex</a> 指定相应的三维笛卡尔坐标系组件。</p>\n</li>\n</ul>\n<ul>\n<li><p><code>'geo3D'</code></p>\n<p> 使用三维地理坐标系，通过 <a href=\"#series-.geo3DIndex\">geo3DIndex</a> 指定相应的三维地理坐标系组件</p>\n</li>\n</ul>\n<ul>\n<li><p><code>'globe'</code></p>\n<p> 使用地球坐标系，通过 <a href=\"#series-.globeIndex\">globeIndex</a> 指定相应的地球坐标系组件</p>\n</li>\n</ul>\n"},"grid3DIndex":{"description":"<p>使用的 <a href=\"#grid3D\">grid3D</a> 组件的索引。默认使用第一个 <a href=\"#grid3D\">grid3D</a> 组件。</p>\n"},"geo3DIndex":{"description":"<p>坐标轴使用的 <a href=\"#geo3D\">geo3D</a> 组件的索引。默认使用第一个 <a href=\"#geo3D\">geo3D</a> 组件。</p>\n"},"globeIndex":{"description":"<p>坐标轴使用的 <a href=\"#globe\">globe</a> 组件的索引。默认使用第一个 <a href=\"#globe\">globe</a> 组件。</p>\n"},"symbol":{"description":"<p>散点的形状。默认为圆形。</p>\n<p>ECharts 提供的标记类型包括 \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code></p>\n<p>可以通过 <code>'path://'</code> 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适（如果是 <code>symbol</code> 的话就是 <code>symbolSize</code>）的大小。路径的格式参见 <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a>。可以从 Adobe Illustrator 等工具编辑导出。</p>\n"},"symbolSize":{"description":"<p>标记的大小，可以设置成诸如 <code>10</code> 这样单一的数字，也可以用数组分开表示宽和高，例如 <code>[20, 10]</code> 表示标记宽为<code>20</code>，高为<code>10</code>。</p>\n<p>如果需要每个数据的图形大小不一样，可以设置为如下格式的回调函数：</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => number|Array\n</code></pre>\n<p>其中第一个参数 <code>value</code> 为 <a href=\"#series-.data\">data</a> 中的数据值。第二个参数<code>params</code> 是其它的数据项参数。</p>\n"},"itemStyle":{"properties":{"color":{"description":"<p>图形的颜色。</p>\n<p>除了颜色字符串外，支持使用数组表示的 RGBA 值，例如：</p>\n<pre><code class=\"lang-js\">// 纯白色\n[1, 1, 1, 1]\n</code></pre>\n<p>使用数组表示的时候，每个通道可以设置大于 1 的值用于表示 HDR 的色值。</p>\n"},"opacity":{"description":"<p>图形的不透明度。</p>\n"},"borderWidth":{"description":"<p>图形描边宽度。</p>\n"},"borderColor":{"description":"<p>图形描边颜色。</p>\n"}}},"label":{"properties":{"show":{"description":"<p>是否显示标签。</p>\n"},"distance":{"description":"<p>标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离。</p>\n"},"position":{"description":"<p>标签的位置。</p>\n<p><strong>可选：</strong></p>\n<ul>\n<li>'top'</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n</ul>\n"},"formatter":{"description":"<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code>\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有 <code>{a}</code>、<code>{b}</code>、<code>{c}</code>，分别表示系列名，数据名，数据值。</p>\n<p><strong>示例：</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {c}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式：</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code>params</code> 是 formatter 需要的单个数据集。格式如下：</p>\n"},"textStyle":{"properties":{"color":{"description":"<p>文字的颜色。</p>\n"},"borderWidth":{"description":"<p>文字的描边宽度。</p>\n"},"borderColor":{"description":"<p>文字的描边颜色。</p>\n"},"fontFamily":{"description":"<p>文字的字体系列。</p>\n"},"fontSize":{"description":"<p>文字的字体大小。</p>\n"},"fontWeight":{"description":"<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"}}}}},"emphasis":{"properties":{"itemStyle":{"properties":{"color":{"description":"<p>图形的颜色。</p>\n<p>除了颜色字符串外，支持使用数组表示的 RGBA 值，例如：</p>\n<pre><code class=\"lang-js\">// 纯白色\n[1, 1, 1, 1]\n</code></pre>\n<p>使用数组表示的时候，每个通道可以设置大于 1 的值用于表示 HDR 的色值。</p>\n"},"opacity":{"description":"<p>图形的不透明度。</p>\n"},"borderWidth":{"description":"<p>图形描边宽度。</p>\n"},"borderColor":{"description":"<p>图形描边颜色。</p>\n"}}},"label":{"properties":{"show":{"description":"<p>是否显示标签。</p>\n"},"distance":{"description":"<p>标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离。</p>\n"},"position":{"description":"<p>标签的位置。</p>\n<p><strong>可选：</strong></p>\n<ul>\n<li>'top'</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n</ul>\n"},"formatter":{"description":"<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code>\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有 <code>{a}</code>、<code>{b}</code>、<code>{c}</code>，分别表示系列名，数据名，数据值。</p>\n<p><strong>示例：</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {c}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式：</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code>params</code> 是 formatter 需要的单个数据集。格式如下：</p>\n"},"textStyle":{"properties":{"color":{"description":"<p>文字的颜色。</p>\n"},"borderWidth":{"description":"<p>文字的描边宽度。</p>\n"},"borderColor":{"description":"<p>文字的描边颜色。</p>\n"},"fontFamily":{"description":"<p>文字的字体系列。</p>\n"},"fontSize":{"description":"<p>文字的字体大小。</p>\n"},"fontWeight":{"description":"<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"}}}}}}},"data":{"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>。</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"},"blendMode":{"description":"<p>混合模式，目前支持<code>'source-over'</code>，<code>'lighter'</code>，默认使用的<code>'source-over'</code>是通过 alpha 混合，而<code>'lighter'</code>是叠加模式，该模式可以让数据集中的区域因为叠加而产生高亮的效果。</p>\n"},"zlevel":{"description":"<p>组件所在的层。</p>\n<p><code>zlevel</code>用于 Canvas 分层，不同<code>zlevel</code>值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的<code>zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。</p>\n<p><code>zlevel</code> 大的 Canvas 会放在 <code>zlevel</code> 小的 Canvas 的上面。</p>\n<p><strong>注:</strong> echarts-gl 中组件的层需要跟 echarts 中组件的层分开。同一个 zlevel 不能同时用于 WebGL 和 Canvas 的绘制。</p>\n"},"silent":{"description":"<p>图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。</p>\n"},"animation":{"description":"<p>是否开启动画。</p>\n"},"animationDurationUpdate":{"description":"<p>过渡动画的时长。</p>\n"},"animationEasingUpdate":{"description":"<p>过渡动画的缓动效果。</p>\n"}}},{"properties":{"type":{"description":""},"name":{"description":"<p>系列名称，用于<a href=\"http://echarts.baidu.com/option.html#tooltip\" target=\"_blank\">tooltip</a>的显示，<a href=\"http://echarts.baidu.com/option.html#legend\" target=\"_blank\">legend</a> 的图例筛选，在 <code>setOption</code> 更新数据和配置项时用于指定对应的系列。</p>\n"},"coordinateSystem":{"description":"<p>该系列使用的坐标系，可选：</p>\n<ul>\n<li><p><code>'cartesian3D'</code></p>\n<p> 使用三维笛卡尔坐标系，通过 <a href=\"#series-.grid3DIndex\">grid3DIndex</a> 指定相应的三维笛卡尔坐标系组件。</p>\n</li>\n</ul>\n<ul>\n<li><p><code>'geo3D'</code></p>\n<p> 使用三维地理坐标系，通过 <a href=\"#series-.geo3DIndex\">geo3DIndex</a> 指定相应的三维地理坐标系组件</p>\n</li>\n</ul>\n<ul>\n<li><p><code>'globe'</code></p>\n<p> 使用地球坐标系，通过 <a href=\"#series-.globeIndex\">globeIndex</a> 指定相应的地球坐标系组件</p>\n</li>\n</ul>\n"},"grid3DIndex":{"description":"<p>使用的 <a href=\"#grid3D\">grid3D</a> 组件的索引。默认使用第一个 <a href=\"#grid3D\">grid3D</a> 组件。</p>\n"},"geo3DIndex":{"description":"<p>坐标轴使用的 <a href=\"#geo3D\">geo3D</a> 组件的索引。默认使用第一个 <a href=\"#geo3D\">geo3D</a> 组件。</p>\n"},"globeIndex":{"description":"<p>坐标轴使用的 <a href=\"#globe\">globe</a> 组件的索引。默认使用第一个 <a href=\"#globe\">globe</a> 组件。</p>\n"},"bevelSize":{"description":"<p>柱子的倒角尺寸。支持设置为从 0 到 1 的值。默认为 0，即没有倒角。</p>\n<p>下面是无倒角和有倒角的区别。</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/bar3D-no-bevel.png\" width=\"100%\" title=\"bevelSize: 0\">\n <img src=\"documents/asset/gl/img/bar3D-bevel.png\" width=\"100%\" title=\"bevelSize: 0.3\">\n</div>\n"},"bevelSmoothness":{"description":"<p>柱子倒角的光滑/圆润度，数值越大越光滑/圆润。</p>\n"},"stack":{"description":"<p>柱状图堆叠，相同 <code>stack</code> 值的柱状图系列数据会有叠加。注意不同系列需要叠加的数据项在数组中的索引必须是一样的。</p>\n"},"minHeight":{"description":"<p>最小柱子高度。</p>\n"},"itemStyle":{"properties":{"color":{"description":"<p>图形的颜色。 默认从全局调色盘 <a href=\"http://echarts.baidu.com/option.html#color\" target=\"_blank\">option.color</a> 获取颜色 </p>\n<p>除了颜色字符串外，支持使用数组表示的 RGBA 值，例如：</p>\n<pre><code class=\"lang-js\">// 纯白色\n[1, 1, 1, 1]\n</code></pre>\n<p>使用数组表示的时候，每个通道可以设置大于 1 的值用于表示 HDR 的色值。</p>\n"},"opacity":{"description":"<p>图形的不透明度。</p>\n"}}},"label":{"properties":{"show":{"description":"<p>是否显示标签。</p>\n"},"distance":{"description":"<p>标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离。</p>\n"},"formatter":{"description":"<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code>\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有 <code>{a}</code>、<code>{b}</code>、<code>{c}</code>，分别表示系列名，数据名，数据值。</p>\n<p><strong>示例：</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {c}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式：</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code>params</code> 是 formatter 需要的单个数据集。格式如下：</p>\n"},"textStyle":{"properties":{"color":{"description":"<p>文字的颜色。</p>\n"},"borderWidth":{"description":"<p>文字的描边宽度。</p>\n"},"borderColor":{"description":"<p>文字的描边颜色。</p>\n"},"fontFamily":{"description":"<p>文字的字体系列。</p>\n"},"fontSize":{"description":"<p>文字的字体大小。</p>\n"},"fontWeight":{"description":"<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"}}}}},"emphasis":{"properties":{"itemStyle":{"properties":{"color":{"description":"<p>图形的颜色。</p>\n<p>除了颜色字符串外，支持使用数组表示的 RGBA 值，例如：</p>\n<pre><code class=\"lang-js\">// 纯白色\n[1, 1, 1, 1]\n</code></pre>\n<p>使用数组表示的时候，每个通道可以设置大于 1 的值用于表示 HDR 的色值。</p>\n"},"opacity":{"description":"<p>图形的不透明度。</p>\n"}}},"label":{"properties":{"show":{"description":"<p>是否显示标签。</p>\n"},"distance":{"description":"<p>标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离。</p>\n"},"formatter":{"description":"<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code>\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有 <code>{a}</code>、<code>{b}</code>、<code>{c}</code>，分别表示系列名，数据名，数据值。</p>\n<p><strong>示例：</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {c}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式：</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code>params</code> 是 formatter 需要的单个数据集。格式如下：</p>\n"},"textStyle":{"properties":{"color":{"description":"<p>文字的颜色。</p>\n"},"borderWidth":{"description":"<p>文字的描边宽度。</p>\n"},"borderColor":{"description":"<p>文字的描边颜色。</p>\n"},"fontFamily":{"description":"<p>文字的字体系列。</p>\n"},"fontSize":{"description":"<p>文字的字体大小。</p>\n"},"fontWeight":{"description":"<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"}}}}}}},"data":{"items":{"properties":{"name":{"description":"<p>数据项名称。</p>\n"},"value":{"description":"<p>数据项值。</p>\n"},"itemStyle":{"properties":{"color":{"description":"<p>图形的颜色。</p>\n<p>除了颜色字符串外，支持使用数组表示的 RGBA 值，例如：</p>\n<pre><code class=\"lang-js\">// 纯白色\n[1, 1, 1, 1]\n</code></pre>\n<p>使用数组表示的时候，每个通道可以设置大于 1 的值用于表示 HDR 的色值。</p>\n"},"opacity":{"description":"<p>图形的不透明度。</p>\n"}}},"label":{"properties":{"show":{"description":"<p>是否显示标签。</p>\n"},"distance":{"description":"<p>标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离。</p>\n"},"formatter":{"description":"<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code>\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有 <code>{a}</code>、<code>{b}</code>、<code>{c}</code>，分别表示系列名，数据名，数据值。</p>\n<p><strong>示例：</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {c}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式：</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code>params</code> 是 formatter 需要的单个数据集。格式如下：</p>\n"},"textStyle":{"properties":{"color":{"description":"<p>文字的颜色。</p>\n"},"borderWidth":{"description":"<p>文字的描边宽度。</p>\n"},"borderColor":{"description":"<p>文字的描边颜色。</p>\n"},"fontFamily":{"description":"<p>文字的字体系列。</p>\n"},"fontSize":{"description":"<p>文字的字体大小。</p>\n"},"fontWeight":{"description":"<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"}}}}},"emphasis":{"properties":{"itemStyle":{"properties":{"color":{"description":"<p>图形的颜色。</p>\n<p>除了颜色字符串外，支持使用数组表示的 RGBA 值，例如：</p>\n<pre><code class=\"lang-js\">// 纯白色\n[1, 1, 1, 1]\n</code></pre>\n<p>使用数组表示的时候，每个通道可以设置大于 1 的值用于表示 HDR 的色值。</p>\n"},"opacity":{"description":"<p>图形的不透明度。</p>\n"}}},"label":{"properties":{"show":{"description":"<p>是否显示标签。</p>\n"},"distance":{"description":"<p>标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离。</p>\n"},"formatter":{"description":"<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code>\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有 <code>{a}</code>、<code>{b}</code>、<code>{c}</code>，分别表示系列名，数据名，数据值。</p>\n<p><strong>示例：</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {c}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式：</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code>params</code> 是 formatter 需要的单个数据集。格式如下：</p>\n"},"textStyle":{"properties":{"color":{"description":"<p>文字的颜色。</p>\n"},"borderWidth":{"description":"<p>文字的描边宽度。</p>\n"},"borderColor":{"description":"<p>文字的描边颜色。</p>\n"},"fontFamily":{"description":"<p>文字的字体系列。</p>\n"},"fontSize":{"description":"<p>文字的字体大小。</p>\n"},"fontWeight":{"description":"<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"}}}}}}}}}},"shading":{"description":"<p>三维柱状图中三维图形的着色效果，echarts-gl 中支持下面三种着色方式</p>\n<ul>\n<li><p><code>'color'</code>\n只显示颜色，不受光照等其它因素的影响。</p>\n</li>\n<li><p><code>'lambert'</code>\n通过经典的 <a href=\"https://en.wikipedia.org/wiki/Lambertian_reflectance\" target=\"_blank\">lambert</a> 着色表现光照带来的明暗。</p>\n</li>\n<li><p><code>'realistic'</code>\n真实感渲染，配合 <a href=\"#globe.light.ambientCubemap\">light.ambientCubemap</a> 和 <a href=\"#globe.postEffect\">postEffect</a> 使用可以让展示的画面效果和质感有质的提升。ECharts GL 中使用了<a href=\"https://www.marmoset.co/posts/physically-based-rendering-and-you-can-too/\" target=\"_blank\">基于物理的渲染（PBR）</a> 来表现真实感材质。</p>\n</li>\n</ul>\n"},"realisticMaterial":{"properties":{"detailTexture":{"description":"<p>材质细节的纹理贴图。</p>\n"},"textureTiling":{"description":"<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>detailTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n"},"textureOffset":{"description":"<p>材质细节纹理的位移。</p>\n"},"roughness":{"description":"<p><code>roughness</code>属性用于表示材质的粗糙度，<code>0</code>为完全光滑，<code>1</code>完全粗糙，中间的值则是介于这两者之间。</p>\n<p>下图是 <a href=\"#globe\">globe</a> 中<code>roughness</code>分别是<code>0.2</code>（光滑）与<code>0.8</code>（粗糙）的效果</p>\n<p><img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-gloss.png\">\n<img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-rough.png\"></p>\n<p>当你想要表达更复杂的材质时。你可以直接将 <code>roughness</code> 设置为如下用每个像素存储粗糙度的贴图。</p>\n<p><img width=\"300\" height=\"300\" src=\"documents/asset/gl/img/roughness.png\"></p>\n<p>贴图中颜色越白的地方值越大，也就是越粗糙。你可以从 <a href=\"http://freepbr.com/\" target=\"_blank\">http://freepbr.com/</a> 等资源网站获取不同材质的贴图资源，也可以自己使用工具生成。</p>\n"},"metalness":{"description":"<p><code>metalness</code>属性用于表示材质是金属还是非金属，<code>0</code>为非金属，<code>1</code>为金属，中间的值则是介于这两者之间，但是通常设成<code>0</code>和<code>1</code>就能满足大部分场景了</p>\n<p>下图是 <a href=\"#globe\">globe</a> 中<code>metalness</code>分别设成<code>1</code>与<code>0</code>的效果区别。</p>\n<p><img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-metal.png\">\n<img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-non-metal.png\"></p>\n<p>跟 <a href=\"#series-bar3D.realisticMaterial.roughness\">roughness</a> 一样 你可以直接将 <code>metalness</code> 设置为金属度贴图。</p>\n"},"roughnessAdjust":{"description":"<p>粗糙度调整，在使用粗糙度贴图的时候有用。可以对贴图整体的粗糙度进行调整。默认为 0.5 的时候不调整，0 的时候变成完全光滑，1 的时候变成完全粗糙。</p>\n"},"metalnessAdjust":{"description":"<p>金属度调整，在使用金属度贴图的时候有用。可以对贴图整体的金属度进行调整。默认为 0.5 的时候不调整，0 的时候变成非金属，1 的时候变成金属。</p>\n"},"normalTexture":{"description":"<p>材质细节的法线贴图。</p>\n<p>使用法线贴图可以在较少的顶点下依然表现出物体表面丰富的明暗细节。</p>\n"}}},"lambertMaterial":{"properties":{"detailTexture":{"description":"<p>材质细节的纹理贴图。</p>\n"},"textureTiling":{"description":"<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>detailTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n"},"textureOffset":{"description":"<p>材质细节纹理的位移。</p>\n"}}},"colorMaterial":{"properties":{"detailTexture":{"description":"<p>材质细节的纹理贴图。</p>\n"},"textureTiling":{"description":"<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>detailTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n"},"textureOffset":{"description":"<p>材质细节纹理的位移。</p>\n"}}},"zlevel":{"description":"<p>组件所在的层。</p>\n<p><code>zlevel</code>用于 Canvas 分层，不同<code>zlevel</code>值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的<code>zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。</p>\n<p><code>zlevel</code> 大的 Canvas 会放在 <code>zlevel</code> 小的 Canvas 的上面。</p>\n<p><strong>注:</strong> echarts-gl 中组件的层需要跟 echarts 中组件的层分开。同一个 zlevel 不能同时用于 WebGL 和 Canvas 的绘制。</p>\n"},"silent":{"description":"<p>图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。</p>\n"},"animation":{"description":"<p>是否开启动画。</p>\n"},"animationDurationUpdate":{"description":"<p>过渡动画的时长。</p>\n"},"animationEasingUpdate":{"description":"<p>过渡动画的缓动效果。</p>\n"}}},{"properties":{"type":{"description":""},"name":{"description":"<p>系列名称，用于<a href=\"http://echarts.baidu.com/option.html#tooltip\" target=\"_blank\">tooltip</a>的显示，<a href=\"http://echarts.baidu.com/option.html#legend\" target=\"_blank\">legend</a> 的图例筛选，在 <code>setOption</code> 更新数据和配置项时用于指定对应的系列。</p>\n"},"coordinateSystem":{"description":"<p>该系列使用的坐标系，可选：</p>\n<ul>\n<li><p><code>'cartesian3D'</code></p>\n<p> 使用三维笛卡尔坐标系，通过 <a href=\"#series-.grid3DIndex\">grid3DIndex</a> 指定相应的三维笛卡尔坐标系组件。</p>\n</li>\n</ul>\n"},"grid3DIndex":{"description":"<p>使用的 <a href=\"#grid3D\">grid3D</a> 组件的索引。默认使用第一个 <a href=\"#grid3D\">grid3D</a> 组件。</p>\n"},"lineStyle":{"properties":{"color":{"description":"<p>线条的颜色。</p>\n<p>除了颜色字符串外，支持使用数组表示的 RGBA 值，例如：</p>\n<pre><code class=\"lang-js\">// 纯白色\n[1, 1, 1, 1]\n</code></pre>\n<p>使用数组表示的时候，每个通道可以设置大于 1 的值用于表示 HDR 的色值。</p>\n"},"opacity":{"description":"<p>线条的不透明度。</p>\n"},"width":{"description":"<p>线条的宽度。</p>\n"},"lineStyle":{"properties":{"color":{"description":"<p>线条的颜色。</p>\n<p>除了颜色字符串外，支持使用数组表示的 RGBA 值，例如：</p>\n<pre><code class=\"lang-js\">// 纯白色\n[1, 1, 1, 1]\n</code></pre>\n<p>使用数组表示的时候，每个通道可以设置大于 1 的值用于表示 HDR 的色值。</p>\n"},"opacity":{"description":"<p>线条的不透明度。</p>\n"},"width":{"description":"<p>线条的宽度。</p>\n"}}}}},"data":{"items":{"properties":{"name":{"description":"<p>数据项名称。</p>\n"},"value":{"description":"<p>数据项值。</p>\n"},"lineStyle":{"properties":{"color":{"description":"<p>线条的颜色。</p>\n<p>除了颜色字符串外，支持使用数组表示的 RGBA 值，例如：</p>\n<pre><code class=\"lang-js\">// 纯白色\n[1, 1, 1, 1]\n</code></pre>\n<p>使用数组表示的时候，每个通道可以设置大于 1 的值用于表示 HDR 的色值。</p>\n"},"opacity":{"description":"<p>线条的不透明度。</p>\n"},"width":{"description":"<p>线条的宽度。</p>\n"}}}}}},"zlevel":{"description":"<p>组件所在的层。</p>\n<p><code>zlevel</code>用于 Canvas 分层，不同<code>zlevel</code>值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的<code>zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。</p>\n<p><code>zlevel</code> 大的 Canvas 会放在 <code>zlevel</code> 小的 Canvas 的上面。</p>\n<p><strong>注:</strong> echarts-gl 中组件的层需要跟 echarts 中组件的层分开。同一个 zlevel 不能同时用于 WebGL 和 Canvas 的绘制。</p>\n"},"silent":{"description":"<p>图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。</p>\n"},"animation":{"description":"<p>是否开启动画。</p>\n"},"animationDurationUpdate":{"description":"<p>过渡动画的时长。</p>\n"},"animationEasingUpdate":{"description":"<p>过渡动画的缓动效果。</p>\n"}}},{"properties":{"type":{"description":""},"name":{"description":"<p>系列名称，用于<a href=\"http://echarts.baidu.com/option.html#tooltip\" target=\"_blank\">tooltip</a>的显示，<a href=\"http://echarts.baidu.com/option.html#legend\" target=\"_blank\">legend</a> 的图例筛选，在 <code>setOption</code> 更新数据和配置项时用于指定对应的系列。</p>\n"},"coordinateSystem":{"description":"<p>该系列使用的坐标系，可选：</p>\n<ul>\n<li><p><code>'geo3D'</code></p>\n<p> 使用三维地理坐标系，通过 <a href=\"#series-.geo3DIndex\">geo3DIndex</a> 指定相应的三维地理坐标系组件</p>\n</li>\n</ul>\n<ul>\n<li><p><code>'globe'</code></p>\n<p> 使用地球坐标系，通过 <a href=\"#series-.globeIndex\">globeIndex</a> 指定相应的地球坐标系组件</p>\n</li>\n</ul>\n"},"geo3DIndex":{"description":"<p>坐标轴使用的 <a href=\"#geo3D\">geo3D</a> 组件的索引。默认使用第一个 <a href=\"#geo3D\">geo3D</a> 组件。</p>\n"},"globeIndex":{"description":"<p>坐标轴使用的 <a href=\"#globe\">globe</a> 组件的索引。默认使用第一个 <a href=\"#globe\">globe</a> 组件。</p>\n"},"polyline":{"description":"<p>是否是多段线。</p>\n<p>默认为 <code>false</code>，只能用于绘制只有两个端点的线段（表现为被赛尔曲线）。</p>\n<p>如果该配置项为 <code>true</code>，则可以在 <a href=\"#series-lines3D.data.coords\">data.coords</a> 中设置多于 2 个的顶点用来绘制多段线，在绘制路线轨迹的时候比较有用。</p>\n"},"effect":{"properties":{"show":{"description":"<p>是否显示尾迹特效，默认不显示。</p>\n"},"period":{"description":"<p>尾迹特效的周期。</p>\n"},"constantSpeed":{"description":"<p>轨迹特效的移动动画是否是固定速度，单位按三维空间的尺寸，设置为非 null 的值后会忽略 <a href=\"#series-lines3D.effect.period\">period</a> 配置项。</p>\n"},"trailWidth":{"description":"<p>尾迹的宽度。</p>\n"},"trailLength":{"description":"<p>尾迹的长度，范围从 0 到 1，为线条长度的百分比。</p>\n"},"trailColor":{"description":"<p>尾迹的颜色，默认跟线条颜色相同。</p>\n"},"trailOpacity":{"description":"<p>尾迹的不透明度，默认跟线条不透明度相同。</p>\n"}}},"lineStyle":{"properties":{"color":{"description":"<p>线条的颜色。</p>\n<p>除了颜色字符串外，支持使用数组表示的 RGBA 值，例如：</p>\n<pre><code class=\"lang-js\">// 纯白色\n[1, 1, 1, 1]\n</code></pre>\n<p>使用数组表示的时候，每个通道可以设置大于 1 的值用于表示 HDR 的色值。</p>\n"},"opacity":{"description":"<p>线条的不透明度。</p>\n"},"width":{"description":"<p>线条的宽度。</p>\n"}}},"data":{"items":{"properties":{"coords":{"description":"<p>一个包含两个到多个经纬度坐标的数组。在 <a href=\"#series-lines3D.polyline\">polyline</a> 设置为 <code>true</code> 时支持多于两个的坐标。</p>\n"},"value":{"description":"<p>数据值。</p>\n"},"lineStyle":{"properties":{"color":{"description":"<p>线条的颜色。</p>\n<p>除了颜色字符串外，支持使用数组表示的 RGBA 值，例如：</p>\n<pre><code class=\"lang-js\">// 纯白色\n[1, 1, 1, 1]\n</code></pre>\n<p>使用数组表示的时候，每个通道可以设置大于 1 的值用于表示 HDR 的色值。</p>\n"},"opacity":{"description":"<p>线条的不透明度。</p>\n"},"width":{"description":"<p>线条的宽度。</p>\n"}}}}}},"blendMode":{"description":"<p>混合模式，目前支持<code>'source-over'</code>，<code>'lighter'</code>，默认使用的<code>'source-over'</code>是通过 alpha 混合，而<code>'lighter'</code>是叠加模式，该模式可以让数据集中的区域因为叠加而产生高亮的效果。</p>\n"},"zlevel":{"description":"<p>组件所在的层。</p>\n<p><code>zlevel</code>用于 Canvas 分层，不同<code>zlevel</code>值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的<code>zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。</p>\n<p><code>zlevel</code> 大的 Canvas 会放在 <code>zlevel</code> 小的 Canvas 的上面。</p>\n<p><strong>注:</strong> echarts-gl 中组件的层需要跟 echarts 中组件的层分开。同一个 zlevel 不能同时用于 WebGL 和 Canvas 的绘制。</p>\n"},"silent":{"description":"<p>图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。</p>\n"}}},{"properties":{"type":{"description":""},"name":{"description":"<p>系列名称，用于<a href=\"http://echarts.baidu.com/option.html#tooltip\" target=\"_blank\">tooltip</a>的显示，<a href=\"http://echarts.baidu.com/option.html#legend\" target=\"_blank\">legend</a> 的图例筛选，在 <code>setOption</code> 更新数据和配置项时用于指定对应的系列。</p>\n"},"map":{"description":"<p>地图类型。echarts-gl 中使用的地图类型同 <a href=\"http://echarts.baidu.com/option.html#geo.map\" target=\"_blank\">geo</a> 组件相同</p>\n<p>你可以在<a href=\"http://ecomfe.github.io/echarts-builder-web/map3.html\" target=\"_blank\">地图下载界面</a>下载到需要的地图文件引入并注册到 ECharts 中。</p>\n<p>ECharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。</p>\n<p>下面是两种类型的使用示例：</p>\n<p><strong> JavaScript 引入示例 </strong></p>\n<pre><code class=\"lang-html\"><script src="echarts.js"></script>\n<script src="map/js/china.js"></script>\n<script>\nvar chart = echarts.init(document.getElementById('main'));\nchart.setOption({\n series: [{\n type: 'map',\n map: 'china'\n }]\n});\n</script>\n</code></pre>\n<p><strong> JSON 引入示例 </strong></p>\n<pre><code class=\"lang-js\">$.get('map/json/china.json', function (chinaJson) {\n echarts.registerMap('china', chinaJson);\n var chart = echarts.init(document.getElementById('main'));\n chart.setOption({\n series: [{\n type: 'map',\n map: 'china'\n }]\n });\n});\n</code></pre>\n<p>ECharts 使用 <a href=\"http://geojson.org/\" target=\"_blank\">geoJSON</a> 格式的数据作为地图的轮廓，除了上述数据，你也可以通过其它手段获取地图的 <a href=\"http://geojson.org/\" target=\"_blank\">geoJSON</a> 数据注册到 ECharts 中。</p>\n"},"boxWidth":{"description":"<p>三维地图组件在三维场景中的宽度。配合 <a href=\"#series-map3D.viewControl.distance\">viewControl.distance</a> 可以得到最合适的展示尺寸。</p>\n<p>下面是三维地图 中<code>boxWidth</code>, <code>boxHeight</code>, <code>boxDepth</code>, <code>regionHeight</code>的示意图。</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/gl/img/geo-size.png\"></p>\n"},"boxHeight":{"description":"<p>三维地图组件在三维场景中的高度。</p>\n<p>组件高度。这个高度包含三维地图上的柱状图，散点图。</p>\n"},"boxDepth":{"description":"<p>三维地图组件在三维场景中的深度。</p>\n<p>组件深度默认自动，保证三维组件的显示比例跟输入的 GeoJSON 的比例相同</p>\n"},"regionHeight":{"description":"<p>三维地图每个区域的高度。这个高度是模型的高度，小于 <a href=\"#series-map3D.boxHeight\">boxHeight</a>。<code>boxHeight - regionHeight</code> 这一片区域会被用于三维柱状图，散点图等的展示。</p>\n"},"environment":{"description":"<p>环境贴图，支持純颜色值，渐变色，全景贴图的 url。默认为 <code>'auto'</code>，在配置有 <a href=\"#series-map3D.light.ambientCubemap.texture\">light.ambientCubemap.texture</a> 的时候会使用该纹理作为环境贴图。否则则不显示环境贴图。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">// 配置为全景贴图\nenvironment: 'asset/starfield.jpg'\n// 配置为纯黑色的背景\nenvironment: '#000'\n// 配置为垂直渐变的背景\nenvironment: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{\n offset: 0, color: '#00aaff' // 天空颜色\n}, {\n offset: 0.7, color: '#998866' // 地面颜色\n}, {\n offset: 1, color: '#998866' // 地面颜色\n}], false)\n</code></pre>\n"},"groundPlane":{"properties":{"show":{"description":"<p>是否显示地面。</p>\n"},"color":{"description":"<p>地面颜色。</p>\n"}}},"instancing":{"description":"<p><code>instancing</code>会将 GeoJSON 中所有的 <a href=\"http://geojson.org/geojson-spec.html#geometry-objects\" target=\"_blank\">geometry</a> 合并成一个，在 GeoJSON 拥有特别多（上千）的 <a href=\"http://geojson.org/geojson-spec.html#geometry-objects\" target=\"_blank\">geometry</a> 时可以有效提升绘制效率。</p>\n"},"label":{"properties":{"show":{"description":"<p>是否显示标签。</p>\n"},"distance":{"description":"<p>标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离。</p>\n"},"formatter":{"description":"<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code>\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有 <code>{a}</code>、<code>{b}</code>、<code>{c}</code>，分别表示系列名，数据名，数据值。</p>\n<p><strong>示例：</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {c}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式：</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code>params</code> 是 formatter 需要的单个数据集。格式如下：</p>\n"},"textStyle":{"properties":{"color":{"description":"<p>文字的颜色。</p>\n"},"borderWidth":{"description":"<p>文字的描边宽度。</p>\n"},"borderColor":{"description":"<p>文字的描边颜色。</p>\n"},"fontFamily":{"description":"<p>文字的字体系列。</p>\n"},"fontSize":{"description":"<p>文字的字体大小。</p>\n"},"fontWeight":{"description":"<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"}}}}},"itemStyle":{"properties":{"color":{"description":"<p>图形的颜色。 默认从全局调色盘 <a href=\"http://echarts.baidu.com/option.html#color\" target=\"_blank\">option.color</a> 获取颜色 </p>\n<p>除了颜色字符串外，支持使用数组表示的 RGBA 值，例如：</p>\n<pre><code class=\"lang-js\">// 纯白色\n[1, 1, 1, 1]\n</code></pre>\n<p>使用数组表示的时候，每个通道可以设置大于 1 的值用于表示 HDR 的色值。</p>\n"},"opacity":{"description":"<p>图形的不透明度。</p>\n"},"borderWidth":{"description":"<p>图形描边的宽度。加上描边后可以更清晰的区分每个区域。如下图：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/geo-border.png\"></p>\n"},"borderColor":{"description":"<p>图形描边的颜色。</p>\n"}}},"emphasis":{"properties":{"label":{"properties":{"show":{"description":"<p>是否显示标签。</p>\n"},"distance":{"description":"<p>标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离。</p>\n"},"formatter":{"description":"<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code>\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有 <code>{a}</code>、<code>{b}</code>、<code>{c}</code>，分别表示系列名，数据名，数据值。</p>\n<p><strong>示例：</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {c}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式：</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code>params</code> 是 formatter 需要的单个数据集。格式如下：</p>\n"},"textStyle":{"properties":{"color":{"description":"<p>文字的颜色。</p>\n"},"borderWidth":{"description":"<p>文字的描边宽度。</p>\n"},"borderColor":{"description":"<p>文字的描边颜色。</p>\n"},"fontFamily":{"description":"<p>文字的字体系列。</p>\n"},"fontSize":{"description":"<p>文字的字体大小。</p>\n"},"fontWeight":{"description":"<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"}}}}},"itemStyle":{"properties":{"color":{"description":"<p>图形的颜色。</p>\n<p>除了颜色字符串外，支持使用数组表示的 RGBA 值，例如：</p>\n<pre><code class=\"lang-js\">// 纯白色\n[1, 1, 1, 1]\n</code></pre>\n<p>使用数组表示的时候，每个通道可以设置大于 1 的值用于表示 HDR 的色值。</p>\n"},"opacity":{"description":"<p>图形的不透明度。</p>\n"}}}}},"data":{"items":{"properties":{"name":{"description":"<p>所对应的地图区域的名称，例如 <code>'广东'</code>，<code>'浙江'</code>。</p>\n"},"value":{"description":"<p>该区域的数据值。</p>\n"},"regionHeight":{"description":"<p>区域的高度，可以设置不同的高度用来表达数据的大小。当 GeoJSON 为建筑的数据时，也可以通过这个值表示简直的高度。如下图</p>\n<p><img width=\"700\" height=\"auto\" src=\"documents/asset/gl/img/city-region-height.jpg\"></p>\n"},"itemStyle":{"properties":{"color":{"description":"<p>图形的颜色。</p>\n<p>除了颜色字符串外，支持使用数组表示的 RGBA 值，例如：</p>\n<pre><code class=\"lang-js\">// 纯白色\n[1, 1, 1, 1]\n</code></pre>\n<p>使用数组表示的时候，每个通道可以设置大于 1 的值用于表示 HDR 的色值。</p>\n"},"opacity":{"description":"<p>图形的不透明度。</p>\n"},"borderWidth":{"description":"<p>图形描边的宽度。加上描边后可以更清晰的区分每个区域。如下图：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/geo-border.png\"></p>\n"},"borderColor":{"description":"<p>图形描边的颜色。</p>\n"}}},"label":{"properties":{"show":{"description":"<p>是否显示标签。</p>\n"},"distance":{"description":"<p>标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离。</p>\n"},"formatter":{"description":"<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code>\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有 <code>{a}</code>、<code>{b}</code>、<code>{c}</code>，分别表示系列名，数据名，数据值。</p>\n<p><strong>示例：</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {c}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式：</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code>params</code> 是 formatter 需要的单个数据集。格式如下：</p>\n"},"textStyle":{"properties":{"color":{"description":"<p>文字的颜色。</p>\n"},"borderWidth":{"description":"<p>文字的描边宽度。</p>\n"},"borderColor":{"description":"<p>文字的描边颜色。</p>\n"},"fontFamily":{"description":"<p>文字的字体系列。</p>\n"},"fontSize":{"description":"<p>文字的字体大小。</p>\n"},"fontWeight":{"description":"<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"}}}}},"emphasis":{"properties":{"itemStyle":{"properties":{"color":{"description":"<p>图形的颜色。</p>\n<p>除了颜色字符串外，支持使用数组表示的 RGBA 值，例如：</p>\n<pre><code class=\"lang-js\">// 纯白色\n[1, 1, 1, 1]\n</code></pre>\n<p>使用数组表示的时候，每个通道可以设置大于 1 的值用于表示 HDR 的色值。</p>\n"},"opacity":{"description":"<p>图形的不透明度。</p>\n"},"borderWidth":{"description":"<p>图形描边的宽度。加上描边后可以更清晰的区分每个区域。如下图：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/geo-border.png\"></p>\n"},"borderColor":{"description":"<p>图形描边的颜色。</p>\n"}}},"label":{"properties":{"show":{"description":"<p>是否显示标签。</p>\n"},"distance":{"description":"<p>标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离。</p>\n"},"formatter":{"description":"<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code>\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有 <code>{a}</code>、<code>{b}</code>、<code>{c}</code>，分别表示系列名，数据名，数据值。</p>\n<p><strong>示例：</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {c}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式：</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code>params</code> 是 formatter 需要的单个数据集。格式如下：</p>\n"},"textStyle":{"properties":{"color":{"description":"<p>文字的颜色。</p>\n"},"borderWidth":{"description":"<p>文字的描边宽度。</p>\n"},"borderColor":{"description":"<p>文字的描边颜色。</p>\n"},"fontFamily":{"description":"<p>文字的字体系列。</p>\n"},"fontSize":{"description":"<p>文字的字体大小。</p>\n"},"fontWeight":{"description":"<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"}}}}}}}}}},"shading":{"description":"<p>三维地图中三维图形的着色效果，echarts-gl 中支持下面三种着色方式</p>\n<ul>\n<li><p><code>'color'</code>\n只显示颜色，不受光照等其它因素的影响。</p>\n</li>\n<li><p><code>'lambert'</code>\n通过经典的 <a href=\"https://en.wikipedia.org/wiki/Lambertian_reflectance\" target=\"_blank\">lambert</a> 着色表现光照带来的明暗。</p>\n</li>\n<li><p><code>'realistic'</code>\n真实感渲染，配合 <a href=\"#globe.light.ambientCubemap\">light.ambientCubemap</a> 和 <a href=\"#globe.postEffect\">postEffect</a> 使用可以让展示的画面效果和质感有质的提升。ECharts GL 中使用了<a href=\"https://www.marmoset.co/posts/physically-based-rendering-and-you-can-too/\" target=\"_blank\">基于物理的渲染（PBR）</a> 来表现真实感材质。</p>\n</li>\n</ul>\n"},"realisticMaterial":{"properties":{"detailTexture":{"description":"<p>材质细节的纹理贴图。</p>\n"},"textureTiling":{"description":"<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>detailTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n"},"textureOffset":{"description":"<p>材质细节纹理的位移。</p>\n"},"roughness":{"description":"<p><code>roughness</code>属性用于表示材质的粗糙度，<code>0</code>为完全光滑，<code>1</code>完全粗糙，中间的值则是介于这两者之间。</p>\n<p>下图是 <a href=\"#globe\">globe</a> 中<code>roughness</code>分别是<code>0.2</code>（光滑）与<code>0.8</code>（粗糙）的效果</p>\n<p><img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-gloss.png\">\n<img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-rough.png\"></p>\n<p>当你想要表达更复杂的材质时。你可以直接将 <code>roughness</code> 设置为如下用每个像素存储粗糙度的贴图。</p>\n<p><img width=\"300\" height=\"300\" src=\"documents/asset/gl/img/roughness.png\"></p>\n<p>贴图中颜色越白的地方值越大，也就是越粗糙。你可以从 <a href=\"http://freepbr.com/\" target=\"_blank\">http://freepbr.com/</a> 等资源网站获取不同材质的贴图资源，也可以自己使用工具生成。</p>\n"},"metalness":{"description":"<p><code>metalness</code>属性用于表示材质是金属还是非金属，<code>0</code>为非金属，<code>1</code>为金属，中间的值则是介于这两者之间，但是通常设成<code>0</code>和<code>1</code>就能满足大部分场景了</p>\n<p>下图是 <a href=\"#globe\">globe</a> 中<code>metalness</code>分别设成<code>1</code>与<code>0</code>的效果区别。</p>\n<p><img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-metal.png\">\n<img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-non-metal.png\"></p>\n<p>跟 <a href=\"#series-map3D.realisticMaterial.roughness\">roughness</a> 一样 你可以直接将 <code>metalness</code> 设置为金属度贴图。</p>\n"},"roughnessAdjust":{"description":"<p>粗糙度调整，在使用粗糙度贴图的时候有用。可以对贴图整体的粗糙度进行调整。默认为 0.5 的时候不调整，0 的时候变成完全光滑，1 的时候变成完全粗糙。</p>\n"},"metalnessAdjust":{"description":"<p>金属度调整，在使用金属度贴图的时候有用。可以对贴图整体的金属度进行调整。默认为 0.5 的时候不调整，0 的时候变成非金属，1 的时候变成金属。</p>\n"},"normalTexture":{"description":"<p>材质细节的法线贴图。</p>\n<p>使用法线贴图可以在较少的顶点下依然表现出物体表面丰富的明暗细节。</p>\n"}}},"lambertMaterial":{"properties":{"detailTexture":{"description":"<p>材质细节的纹理贴图。</p>\n"},"textureTiling":{"description":"<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>detailTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n"},"textureOffset":{"description":"<p>材质细节纹理的位移。</p>\n"}}},"colorMaterial":{"properties":{"detailTexture":{"description":"<p>材质细节的纹理贴图。</p>\n"},"textureTiling":{"description":"<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>detailTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n"},"textureOffset":{"description":"<p>材质细节纹理的位移。</p>\n"}}},"light":{"properties":{"main":{"properties":{"color":{"description":"<p>主光源的颜色。</p>\n"},"intensity":{"description":"<p>主光源的强度。</p>\n"},"shadow":{"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-shadow.png\" width=\"100%\" title=\"Shadow\">\n <img src=\"documents/asset/gl/img/geo-no-shadow.png\" width=\"100%\" title=\"No Shadow\">\n</div>\n"},"shadowQuality":{"description":"<p>阴影的质量。可选<code>'low'</code>, <code>'medium'</code>, <code>'high'</code>, <code>'ultra'</code></p>\n<p>下图是低质量和高质量阴影的区别。</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-shadow-low.png\" width=\"100%\" title=\"Low\">\n <img src=\"documents/asset/gl/img/geo-shadow-high.png\" width=\"100%\" title=\"High\">\n</div>\n"},"alpha":{"description":"<p>主光源绕 x 轴，即上下旋转的角度。配合 <a href=\"#series-map3D.light.main.beta\">beta</a> 控制光源的方向。</p>\n<p>如下示意图：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/light-alpha-beta.png\"></p>\n<p><a href=\"#globe\">globe</a> 组件中可以通过 <a href=\"#globe.light.main.time\">time</a> 控制日光的时间。</p>\n"},"beta":{"description":"<p>主光源绕 y 轴，即左右旋转的角度。</p>\n"}}},"ambient":{"properties":{"color":{"description":"<p>环境光的颜色。</p>\n"},"intensity":{"description":"<p>环境光的强度。</p>\n"}}},"ambientCubemap":{"properties":{"texture":{"description":"<p>环境光纹理的 url，支持使用<code>.hdr</code>格式的 HDR 贴图。可以从 <a href=\"http://www.hdrlabs.com/sibl/archive.html\" target=\"_blank\">http://www.hdrlabs.com/sibl/archive.html</a> 等网站获取 <code>.hdr</code> 的资源。</p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">ambientCubemap: {\n texture: 'pisa.hdr',\n // 解析 hdr 时使用的曝光值\n exposure: 1.0\n}\n</code></pre>\n"},"diffuseIntensity":{"description":"<p>漫反射的强度。</p>\n"},"specularIntensity":{"description":"<p>高光反射的强度。</p>\n"}}}}},"postEffect":{"properties":{"enable":{"description":"<p>是否开启后处理特效，默认关闭。</p>\n"},"bloom":{"properties":{"enable":{"description":"<p>是否开启光晕特效。</p>\n"},"bloomIntensity":{"description":"<p>光晕的强度，默认为 0.1</p>\n"}}},"depthOfField":{"properties":{"enable":{"description":"<p>是否开启景深</p>\n"},"focalDistance":{"description":"<p>初始的焦距，用户可以点击区域自动聚焦。</p>\n"},"focalRange":{"description":"<p>完全聚焦的区域范围，在此范围内的物体时完全清晰的，不会有模糊</p>\n"},"fstop":{"description":"<p>镜头的<a href=\"https://zh.wikipedia.org/wiki/%E7%84%A6%E6%AF%94\" target=\"_blank\">F值</a>，值越小景深越浅。</p>\n"},"blurRadius":{"description":"<p>焦外的模糊半径</p>\n<p>不同模糊半径的区别：</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-dof-small.png\" width=\"100%\" title=\"blurSize: 3\">\n <img src=\"documents/asset/gl/img/geo-dof-large.png\" width=\"100%\" title=\"blurSize: 10\">\n</div>\n"}}},"screenSpaceAmbientOcclusion":{"description":"<p>屏幕空间的环境光遮蔽效果。环境光遮蔽可以让角落，缝隙等大部分光无法到达的区域变暗，是传统的阴影贴图的补充，可以让整个场景更加自然，有层次。</p>\n<p>下面是无 SSAO 和有 SSAO 的对比。</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-no-ssao.png\" width=\"100%\" title=\"No SSAO\">\n <img src=\"documents/asset/gl/img/geo-ssao.png\" width=\"100%\" title=\"SSAO\">\n</div>\n"},"SSAO":{"properties":{"enable":{"description":"<p>是否开启环境光遮蔽，默认不开启</p>\n"},"quality":{"description":"<p>环境光遮蔽的质量，支持<code>'low'</code>, <code>'medium'</code>, <code>'high'</code>, <code>'ultra'</code></p>\n"},"radius":{"description":"<p>环境光遮蔽的采样半径。半径越大效果越自然，但是需要设置较高的<code>'quality'</code>。</p>\n<p>下面是半径值较小与较大之间的区别</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-ssao-small-radius.png\" width=\"100%\" title=\"Radius: 1\">\n <img src=\"documents/asset/gl/img/geo-ssao-large-radius.png\" width=\"100%\" title=\"Radius: 10\">\n</div>\n"},"intensity":{"description":"<p>环境光遮蔽的强度。值越大颜色越深。</p>\n"}}},"colorCorrection":{"properties":{"enable":{"description":"<p>是否开启颜色纠正</p>\n"},"lookupTexture":{"description":"<p>颜色查找表，推荐使用。</p>\n<p>颜色查找表是一张像下面这样的纹理图片。</p>\n<p><img width=\"200\" height=\"auto\" src=\"documents/asset/gl/img/lookup.png\"></p>\n<p>这张是基础的查找表图片，你可以直接拿来使用，为了方便将场景色调调整你想要的效果，你可以将场景截图后在 Photoshop 等图像处理软件中调整颜色到想要的效果，然后将相同的调整应用到上面这张查找表的图片上。</p>\n<p>比如调成冷色调后，查找表的纹理图片就会成为下面这样：</p>\n<p><img width=\"200\" height=\"auto\" src=\"documents/asset/gl/img/crispwinter.png\"></p>\n<p>然后那这张纹理图片就作为该配置项的值，就可以得到相同的你在 Photoshop 上的效果了。</p>\n<p>当然如果你只是想得到一张截图，完全不用再这样折腾，但是如果你想在能实时交互的作品中也能方便的调整到理想的色调，这个就非常有用了。</p>\n"},"exposure":{"description":"<p>画面的曝光。</p>\n"},"brightness":{"description":"<p>画面的亮度。</p>\n"},"contrast":{"description":"<p>画面的对比度。</p>\n"},"saturation":{"description":"<p>画面的饱和度。</p>\n"}}},"FXAA":{"properties":{"enable":{"description":"<p>是否开启 FXAA，默认关闭。</p>\n"}}}}},"temporalSuperSampling":{"properties":{"enable":{"description":"<p>是否开启分帧超采样。默认在开启 <a href=\"#series-map3D.postEffect\">postEffect</a> 后也会同步开启。</p>\n"}}},"viewControl":{"properties":{"projection":{"description":"<p>投影方式，默认为透视投影<code>'perspective'</code>，也支持设置为正交投影<code>'orthographic'</code>。</p>\n"},"autoRotate":{"description":"<p>是否开启视角绕物体的自动旋转查看。</p>\n"},"autoRotateDirection":{"description":"<p>物体自传的方向。默认是 <code>'cw'</code> 也就是从上往下看是顺时针方向，也可以取 <code>'ccw'</code>，既从上往下看为逆时针方向。</p>\n"},"autoRotateSpeed":{"description":"<p>物体自传的速度。单位为<code>角度 / 秒</code>，默认为<code>10</code> ，也就是<code>36</code>秒转一圈。</p>\n"},"autoRotateAfterStill":{"description":"<p>在鼠标静止操作后恢复自动旋转的时间间隔。在开启 <a href=\"#series-map3D.viewControl.autoRotate\">autoRotate</a> 后有效。</p>\n"},"damping":{"description":"<p>鼠标进行旋转，缩放等操作时的迟滞因子，在大于 0 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。</p>\n"},"rotateSensitivity":{"description":"<p>旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。</p>\n<p>默认为``</p>\n<p>设置为<code>0</code>后无法旋转。</p>\n<pre><code class=\"lang-js\">// 无法旋转\nrotateSensitivity: 0\n// 只能横向旋转\nrotateSensitivity: [1, 0]\n// 只能纵向旋转\nrotateSensitivity: [0, 1]\n</code></pre>\n"},"zoomSensitivity":{"description":"<p>缩放操作的灵敏度，值越大越灵敏。默认为``</p>\n<p>设置为<code>0</code>后无法缩放。</p>\n"},"panSensitivity":{"description":"<p>平移操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的平移灵敏度</p>\n<p>默认为``</p>\n<p>设置为<code>0</code>后无法平移。</p>\n"},"panMouseButton":{"description":"<p>平移操作使用的鼠标按键，支持：</p>\n<ul>\n<li><p><code>'left'</code> 鼠标左键（默认）</p>\n</li>\n<li><p><code>'middle'</code> 鼠标中键</p>\n</li>\n<li><p><code>'right'</code> 鼠标右键</p>\n</li>\n</ul>\n<p>注意：如果设置为鼠标右键则会阻止默认的右键菜单。</p>\n"},"rotateMouseButton":{"description":"<p>旋转操作使用的鼠标按键，支持：</p>\n<ul>\n<li><p><code>'left'</code> 鼠标左键</p>\n</li>\n<li><p><code>'middle'</code> 鼠标中键（默认）</p>\n</li>\n<li><p><code>'right'</code> 鼠标右键</p>\n</li>\n</ul>\n<p>注意：如果设置为鼠标右键则会阻止默认的右键菜单。</p>\n"},"distance":{"description":"<p>默认视角距离主体的距离，对于 <a href=\"#globe\">globe</a> 来说是距离地球表面的距离，对于 <a href=\"#grid3D\">grid3D</a> 和 <a href=\"#geo3D\">geo3D</a> 等其它组件来说是距离中心原点的距离。在 <a href=\"#series-map3D.viewControl.projection\">projection</a> 为<code>'perspective'</code>的时候有效。</p>\n"},"minDistance":{"description":"<p>视角通过鼠标控制能拉近到主体的最小距离。在 <a href=\"#series-map3D.viewControl.projection\">projection</a> 为<code>'perspective'</code>的时候有效。</p>\n"},"maxDistance":{"description":"<p>视角通过鼠标控制能拉远到主体的最大距离。在 <a href=\"#series-map3D.viewControl.projection\">projection</a> 为<code>'perspective'</code>的时候有效。</p>\n"},"orthographicSize":{"description":"<p>正交投影的大小。在 <a href=\"#series-map3D.viewControl.projection\">projection</a> 为<code>'orthographic'</code>的时候有效。</p>\n"},"maxOrthographicSize":{"description":"<p>正交投影缩放的最大值。在 <a href=\"#series-map3D.viewControl.projection\">projection</a> 为<code>'orthographic'</code>的时候有效。</p>\n"},"minOrthographicSize":{"description":"<p>正交投影缩放的最小值。在 <a href=\"#series-map3D.viewControl.projection\">projection</a> 为<code>'orthographic'</code>的时候有效。</p>\n"},"alpha":{"description":"<p>视角绕 x 轴，即上下旋转的角度。配合 <a href=\"#series-map3D.light.main.beta\">beta</a> 可以控制视角的方向。</p>\n<p>如下示意图：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/view-alpha-beta.png\"></p>\n"},"beta":{"description":"<p>视角绕 y 轴，即左右旋转的角度。</p>\n"},"center":{"description":"<p>视角中心点，旋转也会围绕这个中心点旋转，默认为<code>[0,0,0]</code>。</p>\n"},"minAlpha":{"description":"<p>上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。</p>\n"},"maxAlpha":{"description":"<p>上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。</p>\n"},"minBeta":{"description":"<p>左右旋转的最小 beta 值。即视角能旋转到达最左的角度。</p>\n"},"maxBeta":{"description":"<p>左右旋转的最大 beta 值。即视角能旋转到达最右的角度。</p>\n"},"animation":{"description":"<p>是否开启动画。</p>\n"},"animationDurationUpdate":{"description":"<p>过渡动画的时长。</p>\n"},"animationEasingUpdate":{"description":"<p>过渡动画的缓动效果。</p>\n"}}},"zlevel":{"description":"<p>组件所在的层。</p>\n<p><code>zlevel</code>用于 Canvas 分层，不同<code>zlevel</code>值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的<code>zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。</p>\n<p><code>zlevel</code> 大的 Canvas 会放在 <code>zlevel</code> 小的 Canvas 的上面。</p>\n<p><strong>注:</strong> echarts-gl 中组件的层需要跟 echarts 中组件的层分开。同一个 zlevel 不能同时用于 WebGL 和 Canvas 的绘制。</p>\n"},"left":{"description":"<p>组件的视图离容器左侧的距离。</p>\n<p><code>left</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比，也可以是 <code>'left'</code>, <code>'center'</code>, <code>'right'</code>。</p>\n<p>如果 <code>left</code> 的值为<code>'left'</code>, <code>'center'</code>, <code>'right'</code>，组件会根据相应的位置自动对齐。</p>\n"},"top":{"description":"<p>组件的视图离容器上侧的距离。</p>\n<p><code>top</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比，也可以是 <code>'top'</code>, <code>'middle'</code>, <code>'bottom'</code>。</p>\n<p>如果 <code>top</code> 的值为<code>'top'</code>, <code>'middle'</code>, <code>'bottom'</code>，组件会根据相应的位置自动对齐。</p>\n"},"right":{"description":"<p>组件的视图离容器右侧的距离。</p>\n<p><code>right</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比。</p>\n<p>默认自适应。</p>\n"},"bottom":{"description":"<p>组件的视图离容器下侧的距离。</p>\n<p><code>bottom</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比。</p>\n<p>默认自适应。</p>\n"},"width":{"description":"<p>组件的视图宽度。</p>\n"},"height":{"description":"<p>组件的视图高度。</p>\n"}}},{"properties":{"type":{"description":""},"name":{"description":"<p>系列名称，用于<a href=\"http://echarts.baidu.com/option.html#tooltip\" target=\"_blank\">tooltip</a>的显示，<a href=\"http://echarts.baidu.com/option.html#legend\" target=\"_blank\">legend</a> 的图例筛选，在 <code>setOption</code> 更新数据和配置项时用于指定对应的系列。</p>\n"},"coordinateSystem":{"description":"<p>该系列使用的坐标系，可选：</p>\n<ul>\n<li><p><code>'cartesian3D'</code></p>\n<p> 使用三维笛卡尔坐标系，通过 <a href=\"#series-.grid3DIndex\">grid3DIndex</a> 指定相应的三维笛卡尔坐标系组件。</p>\n</li>\n</ul>\n"},"grid3DIndex":{"description":"<p>使用的 <a href=\"#grid3D\">grid3D</a> 组件的索引。默认使用第一个 <a href=\"#grid3D\">grid3D</a> 组件。</p>\n"},"parametric":{"description":"<p>是否为参数曲面。</p>\n"},"wireframe":{"properties":{"show":{"description":"<p>是否显示网格线。默认显示。</p>\n"},"lineStyle":{"properties":{"color":{"description":"<p>线条的颜色。</p>\n<p>除了颜色字符串外，支持使用数组表示的 RGBA 值，例如：</p>\n<pre><code class=\"lang-js\">// 纯白色\n[1, 1, 1, 1]\n</code></pre>\n<p>使用数组表示的时候，每个通道可以设置大于 1 的值用于表示 HDR 的色值。</p>\n"},"opacity":{"description":"<p>线条的不透明度。</p>\n"},"width":{"description":"<p>线条的宽度。</p>\n"}}}}},"equation":{"properties":{"x":{"properties":{"step":{"description":"<p>x 的步长。</p>\n"},"min":{"description":"<p>x 的最小值。</p>\n"},"max":{"description":"<p>x 的最大值。</p>\n"}}},"y":{"properties":{"step":{"description":"<p>y 的步长。</p>\n"},"min":{"description":"<p>y 的最小值。</p>\n"},"max":{"description":"<p>y 的最大值。</p>\n"}}},"z":{"description":"<p>因变量 z。</p>\n<p>z 为关于 <a href=\"#series-surface.equation.x\">x</a>, <a href=\"#series-surface.equation.y\">y</a> 的函数。</p>\n<pre><code class=\"lang-js\">(x: number, y: number) => number\n</code></pre>\n"}}},"parametricEquation":{"properties":{"u":{"properties":{"step":{"description":"<p>u 的步长。</p>\n"},"min":{"description":"<p>u 的最小值。</p>\n"},"max":{"description":"<p>u 的最大值。</p>\n"}}},"v":{"properties":{"step":{"description":"<p>v 的步长。</p>\n"},"min":{"description":"<p>v 的最小值。</p>\n"},"max":{"description":"<p>v 的最大值。</p>\n"}}},"x":{"description":"<p>x 为关于 <a href=\"#series-surface.equation.u\">u</a>, <a href=\"#series-surface.equation.v\">v</a> 的函数。</p>\n<pre><code class=\"lang-js\">(u: number, v: number) => number\n</code></pre>\n"},"y":{"description":"<p>x 为关于 <a href=\"#series-surface.equation.u\">u</a>, <a href=\"#series-surface.equation.v\">v</a> 的函数。</p>\n<pre><code class=\"lang-js\">(u: number, v: number) => number\n</code></pre>\n"},"z":{"description":"<p>x 为关于 <a href=\"#series-surface.equation.u\">u</a>, <a href=\"#series-surface.equation.v\">v</a> 的函数。</p>\n<pre><code class=\"lang-js\">(u: number, v: number) => number\n</code></pre>\n"}}},"itemStyle":{"properties":{"color":{"description":"<p>图形的颜色。</p>\n<p>除了颜色字符串外，支持使用数组表示的 RGBA 值，例如：</p>\n<pre><code class=\"lang-js\">// 纯白色\n[1, 1, 1, 1]\n</code></pre>\n<p>使用数组表示的时候，每个通道可以设置大于 1 的值用于表示 HDR 的色值。</p>\n"},"opacity":{"description":"<p>图形的不透明度。</p>\n"}}},"data":{"items":{"properties":{"name":{"description":"<p>数据项名称。</p>\n"},"value":{"description":"<p>数据项值。</p>\n"},"itemStyle":{"properties":{"color":{"description":"<p>图形的颜色。</p>\n<p>除了颜色字符串外，支持使用数组表示的 RGBA 值，例如：</p>\n<pre><code class=\"lang-js\">// 纯白色\n[1, 1, 1, 1]\n</code></pre>\n<p>使用数组表示的时候，每个通道可以设置大于 1 的值用于表示 HDR 的色值。</p>\n"},"opacity":{"description":"<p>图形的不透明度。</p>\n"}}}}}},"shading":{"description":"<p>曲面图中三维图形的着色效果，echarts-gl 中支持下面三种着色方式</p>\n<ul>\n<li><p><code>'color'</code>\n只显示颜色，不受光照等其它因素的影响。</p>\n</li>\n<li><p><code>'lambert'</code>\n通过经典的 <a href=\"https://en.wikipedia.org/wiki/Lambertian_reflectance\" target=\"_blank\">lambert</a> 着色表现光照带来的明暗。</p>\n</li>\n<li><p><code>'realistic'</code>\n真实感渲染，配合 <a href=\"#globe.light.ambientCubemap\">light.ambientCubemap</a> 和 <a href=\"#globe.postEffect\">postEffect</a> 使用可以让展示的画面效果和质感有质的提升。ECharts GL 中使用了<a href=\"https://www.marmoset.co/posts/physically-based-rendering-and-you-can-too/\" target=\"_blank\">基于物理的渲染（PBR）</a> 来表现真实感材质。</p>\n</li>\n</ul>\n"},"realisticMaterial":{"properties":{"detailTexture":{"description":"<p>材质细节的纹理贴图。</p>\n"},"textureTiling":{"description":"<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>detailTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n"},"textureOffset":{"description":"<p>材质细节纹理的位移。</p>\n"},"roughness":{"description":"<p><code>roughness</code>属性用于表示材质的粗糙度，<code>0</code>为完全光滑，<code>1</code>完全粗糙，中间的值则是介于这两者之间。</p>\n<p>下图是 <a href=\"#globe\">globe</a> 中<code>roughness</code>分别是<code>0.2</code>（光滑）与<code>0.8</code>（粗糙）的效果</p>\n<p><img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-gloss.png\">\n<img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-rough.png\"></p>\n<p>当你想要表达更复杂的材质时。你可以直接将 <code>roughness</code> 设置为如下用每个像素存储粗糙度的贴图。</p>\n<p><img width=\"300\" height=\"300\" src=\"documents/asset/gl/img/roughness.png\"></p>\n<p>贴图中颜色越白的地方值越大，也就是越粗糙。你可以从 <a href=\"http://freepbr.com/\" target=\"_blank\">http://freepbr.com/</a> 等资源网站获取不同材质的贴图资源，也可以自己使用工具生成。</p>\n"},"metalness":{"description":"<p><code>metalness</code>属性用于表示材质是金属还是非金属，<code>0</code>为非金属，<code>1</code>为金属，中间的值则是介于这两者之间，但是通常设成<code>0</code>和<code>1</code>就能满足大部分场景了</p>\n<p>下图是 <a href=\"#globe\">globe</a> 中<code>metalness</code>分别设成<code>1</code>与<code>0</code>的效果区别。</p>\n<p><img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-metal.png\">\n<img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-non-metal.png\"></p>\n<p>跟 <a href=\"#series-surface.realisticMaterial.roughness\">roughness</a> 一样 你可以直接将 <code>metalness</code> 设置为金属度贴图。</p>\n"},"roughnessAdjust":{"description":"<p>粗糙度调整，在使用粗糙度贴图的时候有用。可以对贴图整体的粗糙度进行调整。默认为 0.5 的时候不调整，0 的时候变成完全光滑，1 的时候变成完全粗糙。</p>\n"},"metalnessAdjust":{"description":"<p>金属度调整，在使用金属度贴图的时候有用。可以对贴图整体的金属度进行调整。默认为 0.5 的时候不调整，0 的时候变成非金属，1 的时候变成金属。</p>\n"},"normalTexture":{"description":"<p>材质细节的法线贴图。</p>\n<p>使用法线贴图可以在较少的顶点下依然表现出物体表面丰富的明暗细节。</p>\n"}}},"lambertMaterial":{"properties":{"detailTexture":{"description":"<p>材质细节的纹理贴图。</p>\n"},"textureTiling":{"description":"<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>detailTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n"},"textureOffset":{"description":"<p>材质细节纹理的位移。</p>\n"}}},"colorMaterial":{"properties":{"detailTexture":{"description":"<p>材质细节的纹理贴图。</p>\n"},"textureTiling":{"description":"<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>detailTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n"},"textureOffset":{"description":"<p>材质细节纹理的位移。</p>\n"}}},"zlevel":{"description":"<p>组件所在的层。</p>\n<p><code>zlevel</code>用于 Canvas 分层，不同<code>zlevel</code>值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的<code>zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。</p>\n<p><code>zlevel</code> 大的 Canvas 会放在 <code>zlevel</code> 小的 Canvas 的上面。</p>\n<p><strong>注:</strong> echarts-gl 中组件的层需要跟 echarts 中组件的层分开。同一个 zlevel 不能同时用于 WebGL 和 Canvas 的绘制。</p>\n"},"silent":{"description":"<p>图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。</p>\n"},"animation":{"description":"<p>是否开启动画。</p>\n"},"animationDurationUpdate":{"description":"<p>过渡动画的时长。</p>\n"},"animationEasingUpdate":{"description":"<p>过渡动画的缓动效果。</p>\n"}}},{"properties":{"type":{"description":""},"multiPolygon":{"description":"<p>是否一个数据包含多个多边形。</p>\n"},"itemStyle":{"properties":{"color":{"description":"<p>图形的颜色。 默认从全局调色盘 <a href=\"http://echarts.baidu.com/option.html#color\" target=\"_blank\">option.color</a> 获取颜色 </p>\n<p>除了颜色字符串外，支持使用数组表示的 RGBA 值，例如：</p>\n<pre><code class=\"lang-js\">// 纯白色\n[1, 1, 1, 1]\n</code></pre>\n<p>使用数组表示的时候，每个通道可以设置大于 1 的值用于表示 HDR 的色值。</p>\n"},"opacity":{"description":"<p>图形的不透明度。</p>\n"}}},"emphasis":{"properties":{"itemStyle":{"properties":{"color":{"description":"<p>图形的颜色。</p>\n<p>除了颜色字符串外，支持使用数组表示的 RGBA 值，例如：</p>\n<pre><code class=\"lang-js\">// 纯白色\n[1, 1, 1, 1]\n</code></pre>\n<p>使用数组表示的时候，每个通道可以设置大于 1 的值用于表示 HDR 的色值。</p>\n"},"opacity":{"description":"<p>图形的不透明度。</p>\n"}}}}},"data":{"properties":{"coords":{"description":"<p>多边形的坐标列表。如果 <a href=\"#series-polygons3D.multiPolygon\">multiPolygon</a> 设成 true，则是包含多个多边形的数组。</p>\n"}}},"progressiveThreshold":{"description":"<p>启用渐进渲染的阈值，渐进渲染可以让你在加载画面的过程中不会有阻塞。</p>\n"},"progressive":{"description":"<p>渐进渲染每次渲染的数据量。</p>\n"}}},{"properties":{"type":{"description":""},"name":{"description":"<p>系列名称，用于<a href=\"http://echarts.baidu.com/option.html#tooltip\" target=\"_blank\">tooltip</a>的显示，<a href=\"http://echarts.baidu.com/option.html#legend\" target=\"_blank\">legend</a> 的图例筛选，在 <code>setOption</code> 更新数据和配置项时用于指定对应的系列。</p>\n"},"coordinateSystem":{"description":"<p>使用的坐标系。</p>\n<p>同 <a href=\"http://echarts.baidu.com/option.html#series-scatter.coordinateSystem\" target=\"_blank\">scatter.coordinateSystem</a></p>\n"},"symbol":{"description":"<p>散点的形状。默认为圆形。</p>\n<p>ECharts 提供的标记类型包括 \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code></p>\n<p>可以通过 <code>'path://'</code> 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适（如果是 <code>symbol</code> 的话就是 <code>symbolSize</code>）的大小。路径的格式参见 <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a>。可以从 Adobe Illustrator 等工具编辑导出。</p>\n"},"symbolSize":{"description":"<p>标记的大小，可以设置成诸如 <code>10</code> 这样单一的数字，也可以用数组分开表示宽和高，例如 <code>[20, 10]</code> 表示标记宽为<code>20</code>，高为<code>10</code>。</p>\n<p>如果需要每个数据的图形大小不一样，可以设置为如下格式的回调函数：</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => number|Array\n</code></pre>\n<p>其中第一个参数 <code>value</code> 为 <a href=\"#series-.data\">data</a> 中的数据值。第二个参数<code>params</code> 是其它的数据项参数。</p>\n"},"itemStyle":{"properties":{"color":{"description":"<p>图形的颜色。</p>\n<p>除了颜色字符串外，支持使用数组表示的 RGBA 值，例如：</p>\n<pre><code class=\"lang-js\">// 纯白色\n[1, 1, 1, 1]\n</code></pre>\n<p>使用数组表示的时候，每个通道可以设置大于 1 的值用于表示 HDR 的色值。</p>\n"},"opacity":{"description":"<p>图形的不透明度。</p>\n"},"borderWidth":{"description":"<p>图形描边宽度。</p>\n"},"borderColor":{"description":"<p>图形描边颜色。</p>\n"}}},"data":{"items":{"properties":{"name":{"description":"<p>数据项名称。</p>\n"},"value":{"description":"<p>数据项值</p>\n"},"itemStyle":{"properties":{"color":{"description":"<p>图形的颜色。</p>\n<p>除了颜色字符串外，支持使用数组表示的 RGBA 值，例如：</p>\n<pre><code class=\"lang-js\">// 纯白色\n[1, 1, 1, 1]\n</code></pre>\n<p>使用数组表示的时候，每个通道可以设置大于 1 的值用于表示 HDR 的色值。</p>\n"},"opacity":{"description":"<p>图形的不透明度。</p>\n"},"borderWidth":{"description":"<p>图形描边宽度。</p>\n"},"borderColor":{"description":"<p>图形描边颜色。</p>\n"}}}}}},"blendMode":{"description":"<p>混合模式，目前支持<code>'source-over'</code>，<code>'lighter'</code>，默认使用的<code>'source-over'</code>是通过 alpha 混合，而<code>'lighter'</code>是叠加模式，该模式可以让数据集中的区域因为叠加而产生高亮的效果。</p>\n"},"zlevel":{"description":"<p>组件所在的层。</p>\n<p><code>zlevel</code>用于 Canvas 分层，不同<code>zlevel</code>值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的<code>zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。</p>\n<p><code>zlevel</code> 大的 Canvas 会放在 <code>zlevel</code> 小的 Canvas 的上面。</p>\n<p><strong>注:</strong> echarts-gl 中组件的层需要跟 echarts 中组件的层分开。同一个 zlevel 不能同时用于 WebGL 和 Canvas 的绘制。</p>\n"},"progressiveThreshold":{"description":"<p>启用渐进渲染的阈值，渐进渲染可以让你在加载画面的过程中不会有阻塞。</p>\n"},"progressive":{"description":"<p>渐进渲染每次渲染的数据量。</p>\n"}}},{"properties":{"type":{"description":""},"name":{"description":"<p>系列名称，用于<a href=\"http://echarts.baidu.com/option.html#tooltip\" target=\"_blank\">tooltip</a>的显示，<a href=\"http://echarts.baidu.com/option.html#legend\" target=\"_blank\">legend</a> 的图例筛选，在 <code>setOption</code> 更新数据和配置项时用于指定对应的系列。</p>\n"},"layout":{"description":"<p>布局的算法，支持使用 gephi 的 <a href=\"https://github.com/gephi/gephi/wiki/Force-Atlas-2\" target=\"_blank\">forceAtlas2</a> 算法布局。</p>\n"},"forceAtlas2":{"properties":{"GPU":{"description":"<p>是否启用 GPU 布局。</p>\n"},"steps":{"description":"<p>一次更新的迭代次数。因为力引导算法通常会把每次迭代的结果都绘制出来，但是因为绘制时间往往会大于布局的时间，会导致布局的效率降低，这时候我们可以设置更大的<code>steps</code>参数，保证布局和绘制的时间均衡，加快布局的速度。</p>\n"},"stopThreshold":{"description":"<p>停止布局的阈值，当布局的全局速度因子小于这个阈值时停止布局。设为 0 则永远不停止。</p>\n"},"barnesHutOptimize":{"description":"<p>是否开启 <a href=\"https://en.wikipedia.org/wiki/Barnes%E2%80%93Hut_simulation\" target=\"_blank\">Barnes Hut</a> 优化，在 <a href=\"#series-graphGL.forceAtlas2.GPU\">forceAtlas2.GPU</a> 为 false 时有效。</p>\n<p>默认在节点数 > 1000时开启。</p>\n"},"repulsionByDegree":{"description":"<p>是否根据节点边的数量来计算节点的斥力因子，建议开启。</p>\n"},"linLogMode":{"description":"<p>是否是<code>lin-log</code>模式。<code>lin-log</code> 模式会让聚类的节点更加紧凑。</p>\n"},"gravity":{"description":"<p>节点受到的向心力。这个力会让节点像中心靠拢。</p>\n"},"gravityCenter":{"description":"<p>向心力中心的位置。默认去初始位置的中间点。</p>\n"},"scaling":{"description":"<p>布局的缩放因子，值越大则节点间的斥力越大。</p>\n"},"edgeWeightInfluence":{"description":"<p>边权重的影响因子。值越大，则边权重对于引力的影响也越大。</p>\n<p>注：这个因子是指数级的，因此在边权重为<code>0</code>和<code>1</code>的时候无效。</p>\n"},"edgeWeight":{"description":"<p>边的权重分布。映射自 <a href=\"#series-graphGL.links.value\">links.value</a>。</p>\n<p>支持设置为单个数字，这时候就是统一的权重值。</p>\n"},"nodeWeight":{"description":"<p>节点的权重分布。映射自 <a href=\"#series-graphGL.nodes.value\">nodes.value</a>。</p>\n<p>支持设置为单个数字，这时候就是统一的权重值。</p>\n"},"preventOverlap":{"description":"<p>是否开启防止节点重叠。</p>\n"}}},"symbol":{"description":"<p>散点的形状。默认为圆形。</p>\n<p>ECharts 提供的标记类型包括 \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code></p>\n<p>可以通过 <code>'path://'</code> 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适（如果是 <code>symbol</code> 的话就是 <code>symbolSize</code>）的大小。路径的格式参见 <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a>。可以从 Adobe Illustrator 等工具编辑导出。</p>\n"},"symbolSize":{"description":"<p>标记的大小，可以设置成诸如 <code>10</code> 这样单一的数字，也可以用数组分开表示宽和高，例如 <code>[20, 10]</code> 表示标记宽为<code>20</code>，高为<code>10</code>。</p>\n<p>如果需要每个数据的图形大小不一样，可以设置为如下格式的回调函数：</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => number|Array\n</code></pre>\n<p>其中第一个参数 <code>value</code> 为 <a href=\"#series-.data\">data</a> 中的数据值。第二个参数<code>params</code> 是其它的数据项参数。</p>\n"},"itemStyle":{"properties":{"color":{"description":"<p>图形的颜色。</p>\n<p>除了颜色字符串外，支持使用数组表示的 RGBA 值，例如：</p>\n<pre><code class=\"lang-js\">// 纯白色\n[1, 1, 1, 1]\n</code></pre>\n<p>使用数组表示的时候，每个通道可以设置大于 1 的值用于表示 HDR 的色值。</p>\n"},"opacity":{"description":"<p>图形的不透明度。</p>\n"},"borderWidth":{"description":"<p>图形描边宽度。</p>\n"},"borderColor":{"description":"<p>图形描边颜色。</p>\n"}}},"lineStyle":{"properties":{"color":{"description":"<p>线条的颜色。</p>\n<p>除了颜色字符串外，支持使用数组表示的 RGBA 值，例如：</p>\n<pre><code class=\"lang-js\">// 纯白色\n[1, 1, 1, 1]\n</code></pre>\n<p>使用数组表示的时候，每个通道可以设置大于 1 的值用于表示 HDR 的色值。</p>\n"},"opacity":{"description":"<p>线条的不透明度。</p>\n"},"width":{"description":"<p>线条的宽度。</p>\n"}}},"data":{"items":{"properties":{"name":{"description":"<p>数据项名称。</p>\n"},"value":{"description":"<p>数据项值</p>\n"},"itemStyle":{"properties":{"color":{"description":"<p>图形的颜色。</p>\n<p>除了颜色字符串外，支持使用数组表示的 RGBA 值，例如：</p>\n<pre><code class=\"lang-js\">// 纯白色\n[1, 1, 1, 1]\n</code></pre>\n<p>使用数组表示的时候，每个通道可以设置大于 1 的值用于表示 HDR 的色值。</p>\n"},"opacity":{"description":"<p>图形的不透明度。</p>\n"},"borderWidth":{"description":"<p>图形描边宽度。</p>\n"},"borderColor":{"description":"<p>图形描边颜色。</p>\n"}}}}}},"nodes":{"description":"<p>同 <a href=\"#series-graphGL.data\">graphGL.data</a></p>\n"},"links":{"items":{"properties":{"source":{"description":"<p>边的源节点名称的字符串，也支持使用数字表示源节点的索引。</p>\n"},"target":{"description":"<p>边的目标节点名称的字符串，也支持使用数字表示源节点的索引。</p>\n"},"value":{"description":"<p>边的数值。</p>\n"},"lineStyle":{"properties":{"color":{"description":"<p>线条的颜色。</p>\n<p>除了颜色字符串外，支持使用数组表示的 RGBA 值，例如：</p>\n<pre><code class=\"lang-js\">// 纯白色\n[1, 1, 1, 1]\n</code></pre>\n<p>使用数组表示的时候，每个通道可以设置大于 1 的值用于表示 HDR 的色值。</p>\n"},"opacity":{"description":"<p>线条的不透明度。</p>\n"},"width":{"description":"<p>线条的宽度。</p>\n"}}}}}},"edges":{"description":"<p>同 <a href=\"#series-graphGL.links\">graphGL.links</a></p>\n"},"zlevel":{"description":"<p>组件所在的层。</p>\n<p><code>zlevel</code>用于 Canvas 分层，不同<code>zlevel</code>值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的<code>zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。</p>\n<p><code>zlevel</code> 大的 Canvas 会放在 <code>zlevel</code> 小的 Canvas 的上面。</p>\n<p><strong>注:</strong> echarts-gl 中组件的层需要跟 echarts 中组件的层分开。同一个 zlevel 不能同时用于 WebGL 和 Canvas 的绘制。</p>\n"}}},{"properties":{"type":{"description":""},"particleDensity":{"description":"<p>粒子的密度，实际的粒子数量是设置数目的平方。粒子密度越大迹线效果越好，但是性能开销也会越大。除了该属性，将 <a href=\"#series-flowGL.particleType\">particleType</a> 也可以得到更加清晰连贯的迹线。</p>\n"},"particleType":{"description":"<p>粒子的类型，默认为点 <code>'point'</code>，可以设置成线 <code>'line'</code>，线类型的粒子会用一条线连接上个运动位置和当前运动位置。会让这个轨迹更加连贯。</p>\n<p>下面是类型分别是<code>'point'</code>和<code>'line'</code>的区别。</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/flowGL-point.jpg\" width=\"100%\" title=\"Point\">\n <img src=\"documents/asset/gl/img/flowGL-line.jpg\" width=\"100%\" title=\"Line\">\n</div>\n"},"particleSize":{"description":"<p>粒子的大小，如果 <a href=\"#series-flowGL.particleType\">particleType</a> 是 <code>'line'</code> 的话则会通过线宽的形式表现。</p>\n"},"particleSpeed":{"description":"<p>粒子的速度，默认为 1。注意在 <a href=\"#series-flowGL.particleType\">particleType</a> 为 <code>'point'</code> 的时候过大的速度会让整个轨迹变得断断续续。</p>\n"},"particleTrail":{"description":"<p>粒子的轨迹长度，数值越大轨迹越长。</p>\n"},"supersampling":{"description":"<p>画面的超采样比率，采用<code>4</code>的超采样可以有效的提高画面的清晰度，减少画面锯齿。但是因为需要处理更多的像素数量，所以也对性能有更高的要求。</p>\n<p>下面分别是没有超采样和超采样值为 4 的区别。</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/flowGL-noss.jpg\" width=\"100%\" title=\"No supersampling\">\n <img src=\"documents/asset/gl/img/flowGL-ss.jpg\" width=\"100%\" title=\"Supersampling=4\">\n</div>\n"},"gridWidth":{"description":"<p>传入的网格数据的网格宽度数量，<code>flowGL</code> 会根据这个值和 <a href=\"#series-flowGL.gridHeight\">gridHeight</a> 创建存储向量场的浮点纹理，用于粒子的轨迹计算。</p>\n"},"gridHeight":{"description":"<p>传入的网格数据的网格高度数量。</p>\n"},"data":{"description":"<p>向量场数据，包含向量的位置和向量的方向（包含大小）。<code>flowGL</code> 对数据的存储顺序和没有强制性要求，你甚至可以传入比较稀疏的向量数据。</p>\n<p>如下示例</p>\n<pre><code class=\"lang-js\">data: [\n // 每个数据项包含四个值，表示位置的 lng, lat 以及相应维度上的速度 sLng, sLat.\n // 如果是直角坐标系上的话则是表示位置的 x, y 以及相应维度上的速度 sx, sy\n [0, 0, 1, 1], [1, 0, 1, 1],\n [0, 1, 1, 1], [1, 1, 1, 1]\n];\n</code></pre>\n<p>默认<code>flowGL</code>会根据规整的网格形数据自动计算 <a href=\"#series-flowGL.gridWidth\">gridWidth</a> 和 <a href=\"#series-flowGL.gridHeight\">gridHeight</a>。但是因为 flowGL 也支持相对稀疏的数据格式，也可以手动指定这两个值。</p>\n"},"itemStyle":{"properties":{"color":{"description":"<p>向量场迹线的颜色。更多的是按照上面图中演示的通过<code>visualMap</code>组件去编码向量的大小。</p>\n"},"opacity":{"description":"<p>向量场迹线的透明度。</p>\n"}}}}}]}}}}} |