| { |
| "$schema": "http://echarts.baidu.com/doc/json-schem", |
| "option": { |
| "type": "Object", |
| "properties": { |
| "globe": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>地球组件。组件提供了地球的绘制以及相应的坐标系，开发者可以在上面展示三维的散点图，气泡图，柱状图，飞线图。</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示地球组件。</p>\n", |
| "default": true |
| }, |
| "globeRadius": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>地球的半径。单位相对于三维空间，跟 <a href=\"#globe.viewControl.distance\">viewControl.distance</a> 相关。</p>\n", |
| "default": 100 |
| }, |
| "environment": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "'auto'" |
| }, |
| "baseTexture": { |
| "type": [ |
| "string", |
| "HTMLImageElement", |
| "HTMLCanvasElement", |
| "EChartsInstance" |
| ], |
| "descriptionCN": "<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": { |
| "type": [ |
| "string", |
| "HTMLImageElement", |
| "HTMLCanvasElement" |
| ], |
| "descriptionCN": "<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": { |
| "type": [ |
| "string", |
| "HTMLImageElement", |
| "HTMLCanvasElement" |
| ], |
| "descriptionCN": "<p>地球顶点的置换纹理，默认同 <a href=\"#globe.heightTexture\">heightTexture</a>。</p>\n<p>相比于凹凸贴图，顶点的置换是根据纹理直接对顶点做位移。在 <a href=\"#globe.displaymentScale\">displaymentScale</a> 大于 0 时有效。</p>\n" |
| }, |
| "displacementScale": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": 0 |
| }, |
| "displacementQuality": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "'medium'" |
| }, |
| "shading": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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> 使用可以让展示的画面效果和质感有质的提升。</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": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>真实感材质相关的配置项，在 <a href=\"#globe.shading\">shading</a> 为<code>'realistic'</code>时有效。</p>\n", |
| "properties": { |
| "roughness": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": 0.5 |
| }, |
| "metalness": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": 0 |
| } |
| } |
| }, |
| "light": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>光照相关的设置。在 <a href=\"#globe.shading\">shading</a> 为 <code>'color'</code> 的时候无效。</p>\n<p>光照的设置会影响到组件以及组件所在坐标系上的所有图表。</p>\n<p>合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。</p>\n", |
| "properties": { |
| "main": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>场景主光源的设置，在 <a href=\"#globe\">globe</a> 组件中就是太阳光。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>主光源的颜色。</p>\n", |
| "default": "#fff" |
| }, |
| "intensity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>主光源的强度。</p>\n", |
| "default": 1 |
| }, |
| "shadow": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<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", |
| "default": false |
| }, |
| "shadowQuality": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "'medium'" |
| }, |
| "alpha": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": 0 |
| }, |
| "beta": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>主光源绕 y 轴，即左右旋转的角度。</p>\n", |
| "default": 0 |
| }, |
| "time": { |
| "type": [ |
| "Date" |
| ], |
| "descriptionCN": "<p>日照的时间，默认使用当前的系统时间。</p>\n" |
| } |
| } |
| }, |
| "ambient": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>全局的环境光设置。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>环境光的颜色。</p>\n", |
| "default": "#fff" |
| }, |
| "intensity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>环境光的强度。</p>\n", |
| "default": 0.2 |
| } |
| } |
| }, |
| "ambientCubemap": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>ambientCubemap 会使用纹理作为光源的环境光， 会为物体提供漫反射和高光反射。可以通过 <a href=\"#globe.light.ambientCubemap.diffuseIntensity\">diffuseIntensity</a> 和 <a href=\"#globe.light.ambientCubemap.specularIntensity\">specularIntensity</a> 分别设置漫反射强度和高光反射强度。</p>\n", |
| "properties": { |
| "texture": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>漫反射的强度。</p>\n", |
| "default": 0.5 |
| }, |
| "specularIntensity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>高光反射的强度。</p>\n", |
| "default": 0.5 |
| } |
| } |
| } |
| } |
| }, |
| "postEffect": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>后处理特效的相关配置，后处理特效可以为画面添加高光，景深，环境光遮蔽（SSAO），调色等效果。可以让整个画面更富有质感。</p>\n<p>下面分别是关闭和开启 <code>postEffect</code> 的区别。</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/globe-posteffect-disable.png\" width=\"100%\" title=\"Disable\">\n <img src=\"documents/asset/gl/img/globe-posteffect-enable.png\" width=\"100%\" title=\"Enable\">\n</div>\n\n<p>注意在开启 postEffect 的时候默认会开启 <a href=\"#globe.temporalSuperSampling\">temporalSuperSampling</a> 在画面静止后持续对画面增强，包括抗锯齿，景深，SSAO，阴影等。</p>\n", |
| "properties": { |
| "enable": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否开启后处理特效，默认关闭。</p>\n", |
| "default": false |
| }, |
| "bloom": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>高光特效。高光特效用来表现很“亮”的颜色，因为传统的 RGB 只能表现<code>0 - 255</code>范围的颜色，所以对于超出这个范围特别“亮”的颜色，会通过这种高光溢出的特效去表现。如下图</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/globe-posteffect-bloom.png\"></p>\n", |
| "properties": { |
| "enable": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否开启光晕特效。</p>\n", |
| "default": false |
| }, |
| "bloomIntensity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>光晕的强度，默认为 0.1</p>\n", |
| "default": 0.1 |
| } |
| } |
| }, |
| "depthOfField": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>景深效果。景深效果是模拟摄像机的光学成像效果，在对焦的区域相对清晰，原理对焦的区域则会逐渐模糊。</p>\n<p>景深效果可以让观察者几种注意力到对焦的区域，而且让画面的镜头感更强，大景深还能塑造出微距的模型效果。</p>\n<p>下面分别是关闭和开启景深的区别。</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-no-dof.png\" width=\"100%\" title=\"Disable\">\n <img src=\"documents/asset/gl/img/geo-dof.png\" width=\"100%\" title=\"Enable\">\n</div>\n", |
| "properties": { |
| "enable": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否开启景深</p>\n", |
| "default": false |
| }, |
| "focalDistance": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>初始的焦距，用户可以点击区域自动聚焦。</p>\n", |
| "default": 50 |
| }, |
| "focalRange": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>完全聚焦的区域范围，在此范围内的物体时完全清晰的，不会有模糊</p>\n", |
| "default": 20 |
| }, |
| "fstop": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>镜头的<a href=\"https://zh.wikipedia.org/wiki/%E7%84%A6%E6%AF%94\" target=\"_blank\">F值</a>，值越小景深越浅。</p>\n", |
| "default": 2.8 |
| }, |
| "blurRadius": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": 10 |
| } |
| } |
| }, |
| "SSAO": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<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", |
| "properties": { |
| "enable": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否开启环境光遮蔽，默认不开启</p>\n", |
| "default": false |
| }, |
| "quality": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>环境光遮蔽的质量，支持<code>'low'</code>, <code>'medium'</code>, <code>'high'</code>, <code>'ultra'</code></p>\n", |
| "default": "'medium'" |
| }, |
| "radius": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": 2 |
| }, |
| "intensity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>环境光遮蔽的强度。值越大颜色越深。</p>\n", |
| "default": 1 |
| } |
| } |
| }, |
| "colorCorrection": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>颜色纠正和调整。类似 Photoshop 中的 Color Adjustments</p>\n<p>下图同个场景调整为冷色系和暖色系的区别。</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/buildings-cold.jpg\" width=\"100%\" title=\"Cold\">\n <img src=\"documents/asset/gl/img/buildings-warm.jpg\" width=\"100%\" title=\"Warm\">\n</div>\n\n", |
| "properties": { |
| "enable": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否开启颜色纠正</p>\n", |
| "default": true |
| }, |
| "lookupTexture": { |
| "type": [ |
| "string", |
| "HTMLImageElement", |
| "HTMLCanvasElement" |
| ], |
| "descriptionCN": "<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": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>画面的曝光。</p>\n", |
| "default": 0 |
| }, |
| "brightness": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>画面的亮度。</p>\n", |
| "default": 0 |
| }, |
| "contrast": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>画面的对比度。</p>\n", |
| "default": 1 |
| }, |
| "saturation": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>画面的饱和度。</p>\n", |
| "default": 1 |
| } |
| } |
| }, |
| "FXAA": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>在开启 <a href=\"#globe.postEffect\">postEffect</a> 后，WebGL 默认的 MSAA 会无法使用。这时候通过 FXAA 可以廉价方便的解决抗锯齿的问题，FXAA 会对一些场景的边缘部分进行模糊从而解决锯齿的问题，这在一些场景上效果还不错，但是在 echarts-gl 中，需要保证很多文字和线条边缘的锐利清晰，因此 FXAA 并不是那么适用。这时候我们可以通过如下设置更高的<code>devicePixelRatio</code>来使用超采样</p>\n<pre><code class=\"lang-js\">var chart = echarts.init(dom, null, {\n devicePixelRatio: 2\n})\n</code></pre>\n<p>但是这种方法对电脑性能有很高的要求，所以更多时候我们建议使用 echarts-gl 中的 <a href=\"#globe.temporalSuperSampling\">temporalSuperSampling</a>，在画面静止后会持续分帧对一个像素多次抖动采样，从而达到超采样抗锯齿的效果。</p>\n", |
| "properties": { |
| "enable": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否开启 FXAA，默认关闭。</p>\n", |
| "default": false |
| } |
| } |
| } |
| } |
| }, |
| "temporalSuperSampling": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>分帧超采样。在开启 <a href=\"#globe.postEffect\">postEffect</a> 后，WebGL 默认的 MSAA 会无法使用，所以我们需要自己解决锯齿的问题。</p>\n<p>分帧超采样就是用来解决锯齿的问题，它在画面静止后会持续分帧对一个像素多次抖动采样，从而达到抗锯齿的效果。而且在这个分帧采样的过程中，echarts-gl 也会对 <a href=\"#globe.postEffect\">postEffect</a> 中一些需要采样保证效果的特效，例如 <a href=\"#globe.postEffect.SSAO\">SSAO</a>, <a href=\"#globe.postEffect.depthOfField\">景深</a>，以及阴影进行渐进增强。</p>\n<p>下面是未开启和开启<code>temporalSuperSampling</code>的区别。</p>\n<div class=\"twentytwenty-container\" style=\"width: 800px;\">\n <img src=\"documents/asset/gl/img/surface-no-taa.png\" width=\"100%\" title=\"No AA\">\n <img src=\"documents/asset/gl/img/surface-taa.png\" width=\"100%\" title=\"AA\">\n</div>\n", |
| "properties": { |
| "enable": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否开启分帧超采样。默认在开启 <a href=\"#globe.postEffect\">postEffect</a> 后也会同步开启。</p>\n", |
| "default": "'auto'" |
| } |
| } |
| }, |
| "viewControl": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p><code>viewControl</code>用于鼠标的旋转，缩放等视角控制。</p>\n", |
| "properties": { |
| "autoRotate": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否开启视角绕物体的自动旋转查看。</p>\n", |
| "default": false |
| }, |
| "autoRotateDirection": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>物体自传的方向。默认是 <code>'cw'</code> 也就是从上往下看是顺时针方向，也可以取 <code>'ccw'</code>，既从上往下看为逆时针方向。</p>\n", |
| "default": "cw" |
| }, |
| "autoRotateSpeed": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>物体自传的速度。单位为<code>角度 / 秒</code>，默认为<code>10</code> ，也就是<code>36</code>秒转一圈。</p>\n", |
| "default": 10 |
| }, |
| "autoRotateAfterStill": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>在鼠标静止操作后恢复自动旋转的时间间隔。在开启 <a href=\"#globe.viewControl.autoRotate\">autoRotate</a> 后有效。</p>\n", |
| "default": 3 |
| }, |
| "damping": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>鼠标进行旋转，缩放等操作时的迟滞因子，在大于 0 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。</p>\n", |
| "default": 0.8 |
| }, |
| "rotateSensitivity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>旋转操作的灵敏度，值越大越灵敏。默认为``</p>\n<p>设置为<code>0</code>后无法旋转。</p>\n", |
| "default": 1 |
| }, |
| "zoomSensitivity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>缩放操作的灵敏度，值越大越灵敏。默认为``</p>\n<p>设置为<code>0</code>后无法缩放。</p>\n", |
| "default": 1 |
| }, |
| "panSensitivity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>平移操作的灵敏度，值越大越灵敏。默认为``</p>\n<p>设置为<code>0</code>后无法平移。</p>\n", |
| "default": 0 |
| }, |
| "panMouseButton": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "left" |
| }, |
| "rotateMouseButton": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "middle" |
| }, |
| "distance": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>默认视角距离主体的距离，对于 <a href=\"#globe\">globe</a> 来说是距离地球表面的距离，对于 <a href=\"#grid3D\">grid3D</a> 和 <a href=\"#geo3D\">geo3D</a> 等其它组件来说是距离中心原点的距离。</p>\n", |
| "default": 150 |
| }, |
| "minDistance": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>视角通过鼠标控制能拉近到主体的最小距离。</p>\n", |
| "default": 40 |
| }, |
| "maxDistance": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>视角通过鼠标控制能拉远到主体的最小距离。</p>\n", |
| "default": 400 |
| }, |
| "alpha": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": 0 |
| }, |
| "beta": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>视角绕 y 轴，即左右旋转的角度。</p>\n", |
| "default": 0 |
| }, |
| "center": { |
| "type": [ |
| "Array" |
| ], |
| "descriptionCN": "<p>视角中心点，旋转也会围绕这个中心点旋转，默认为<code>[0,0,0]</code>。</p>\n" |
| }, |
| "minAlpha": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。</p>\n", |
| "default": -90 |
| }, |
| "maxAlpha": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。</p>\n", |
| "default": 90 |
| }, |
| "minBeta": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>左右旋转的最小 beta 值。即视角能旋转到达最左的角度。</p>\n", |
| "default": null |
| }, |
| "maxBeta": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>左右旋转的最大 beta 值。即视角能旋转到达最右的角度。</p>\n", |
| "default": null |
| }, |
| "animation": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否开启动画。</p>\n", |
| "default": true |
| }, |
| "animationDurationUpdate": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>过渡动画的时长。</p>\n", |
| "default": 1000 |
| }, |
| "animationEasingUpdate": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>过渡动画的缓动效果。</p>\n", |
| "default": "cubicInOut" |
| }, |
| "targetCoord": { |
| "type": [ |
| "Array" |
| ], |
| "descriptionCN": "<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": { |
| "type": [ |
| "Array" |
| ], |
| "descriptionCN": "<p>地球表面层的配置，你可以使用该配置项加入云层，或者对 <a href=\"#globe.baseTexture\">baseTexture</a> 进行补充绘制出国家的轮廓等等。</p>\n", |
| "items": { |
| "type": "Object", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示该层。</p>\n", |
| "default": true |
| }, |
| "type": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "'overlay'" |
| }, |
| "name": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "'albedo'" |
| }, |
| "intensity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>混合的强度。</p>\n", |
| "default": 1 |
| }, |
| "shading": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "'lambert'" |
| }, |
| "distance": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>覆盖层离地球表面的距离。</p>\n<p>在 <a href=\"#globe.layers.type\">type</a> 为 <code>'overlay'</code> 时有效。</p>\n", |
| "default": null |
| }, |
| "texture": { |
| "type": [ |
| "string", |
| "HTMLImageElement", |
| "HTMLCanvasElement", |
| "EChartsInstance" |
| ], |
| "descriptionCN": "<p>层的纹理，支持图片路径字符串，图片或者 Canvas 的对象。</p>\n<p>也支持直接使用 echarts 的实例作为纹理，此时在地球上的鼠标动作会跟纹理上使用的 echarts 实例有联动。</p>\n" |
| } |
| } |
| } |
| }, |
| "zlevel": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": -10 |
| }, |
| "left": { |
| "type": [ |
| "string", |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": "auto" |
| }, |
| "top": { |
| "type": [ |
| "string", |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": "auto" |
| }, |
| "right": { |
| "type": [ |
| "string", |
| "number" |
| ], |
| "descriptionCN": "<p>组件的视图离容器右侧的距离。</p>\n<p><code>right</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比。</p>\n<p>默认自适应。</p>\n", |
| "default": "auto" |
| }, |
| "bottom": { |
| "type": [ |
| "string", |
| "number" |
| ], |
| "descriptionCN": "<p>组件的视图离容器下侧的距离。</p>\n<p><code>bottom</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比。</p>\n<p>默认自适应。</p>\n", |
| "default": "auto" |
| }, |
| "width": { |
| "type": [ |
| "string", |
| "number" |
| ], |
| "descriptionCN": "<p>组件的视图宽度。</p>\n", |
| "default": "auto" |
| }, |
| "height": { |
| "type": [ |
| "string", |
| "number" |
| ], |
| "descriptionCN": "<p>组件的视图高度。</p>\n", |
| "default": "auto" |
| } |
| } |
| }, |
| "geo3D": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>三维的地理坐标系组件。组件提供了三维 GeoJSON 的绘制以及相应的坐标系，开发者可以在上面展示三维的散点图，气泡图，柱状图，飞线图。</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示三维地理坐标系组件</p>\n", |
| "default": true |
| }, |
| "map": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>三维地理坐标系组件组件在三维场景中的宽度。配合 <a href=\"#geo3D.viewControl.distance\">viewControl.distance</a> 可以得到最合适的展示尺寸。</p>\n<p>下面是三维地理坐标系组件 中<code>boxWidth</code>, <code>boxHeight</code>, <code>boxDepth</code>的示意图。</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/gl/img/geo-size.png\"></p>\n", |
| "default": 100 |
| }, |
| "boxHeight": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>三维地理坐标系组件组件在三维场景中的高度。</p>\n", |
| "default": 3 |
| }, |
| "boxDepth": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>三维地理坐标系组件组件在三维场景中的深度。</p>\n<p>组件深度默认自动，保证三维组件的显示比例跟输入的 GeoJSON 的比例相同</p>\n", |
| "default": "auto" |
| }, |
| "environment": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "'auto'" |
| }, |
| "groundPlane": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>地面可以让整个组件有个“摆放”的地方，从而使整个场景看起来更真实，更有模型感。</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示地面。</p>\n", |
| "default": false |
| }, |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>地面颜色。</p>\n", |
| "default": "'#aaa'" |
| } |
| } |
| }, |
| "instancing": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<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<p>注意，开启<code>instancing</code>后场景不再具备选择，hover等交互的功能。</p>\n", |
| "default": false |
| }, |
| "label": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>标签的相关设置。</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示标签。</p>\n", |
| "default": false |
| }, |
| "distance": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离。</p>\n" |
| }, |
| "formatter": { |
| "type": [ |
| "Function", |
| "string" |
| ], |
| "descriptionCN": "<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<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值\n value: number|Array,\n // 数据图形的颜色\n color: string,\n\n}\n</code></pre>\n" |
| }, |
| "textStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>标签的字体样式。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的颜色。</p>\n", |
| "default": "\"#fff\"" |
| }, |
| "borderWidth": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的描边宽度。</p>\n", |
| "default": 0 |
| }, |
| "borderColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的描边颜色。</p>\n", |
| "default": "#fff" |
| }, |
| "fontFamily": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的字体系列。</p>\n", |
| "default": "'sans-serif'" |
| }, |
| "fontSize": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的字体大小。</p>\n", |
| "default": 12 |
| }, |
| "fontWeight": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "normal" |
| } |
| } |
| } |
| } |
| }, |
| "itemStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。</p>\n", |
| "properties": { |
| "areaColor": { |
| "type": [ |
| "string", |
| "Function" |
| ], |
| "descriptionCN": "<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", |
| "default": "自适应" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>图形的不透明度。</p>\n", |
| "default": 1 |
| }, |
| "borderWidth": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>图形描边的宽度。加上描边后可以更清晰的区分每个区域。如下图：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/geo-border.png\"></p>\n", |
| "default": 0 |
| }, |
| "borderColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>图形描边的颜色。</p>\n", |
| "default": "#333" |
| } |
| } |
| }, |
| "emphasis": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>鼠标 hover 高亮时图形和标签的样式</p>\n", |
| "properties": { |
| "label": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示标签。</p>\n", |
| "default": false |
| }, |
| "distance": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离。</p>\n", |
| "default": 2 |
| }, |
| "formatter": { |
| "type": [ |
| "Function", |
| "string" |
| ], |
| "descriptionCN": "<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<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值\n value: number|Array,\n // 数据图形的颜色\n color: string,\n\n}\n</code></pre>\n" |
| }, |
| "textStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>标签的字体样式。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的颜色。</p>\n", |
| "default": "#000" |
| }, |
| "borderWidth": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的描边宽度。</p>\n", |
| "default": 1 |
| }, |
| "borderColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的描边颜色。</p>\n", |
| "default": "#fff" |
| }, |
| "fontFamily": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的字体系列。</p>\n", |
| "default": "'sans-serif'" |
| }, |
| "fontSize": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的字体大小。</p>\n", |
| "default": 20 |
| }, |
| "fontWeight": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "normal" |
| } |
| } |
| } |
| } |
| }, |
| "itemStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "自适应" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>图形的不透明度。</p>\n", |
| "default": 1 |
| } |
| } |
| } |
| } |
| }, |
| "regions": { |
| "type": [ |
| "Array" |
| ], |
| "descriptionCN": "<p>地图区域的设置，</p>\n", |
| "items": { |
| "type": "Object", |
| "properties": { |
| "name": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>所对应的地图区域的名称，例如 <code>'广东'</code>，<code>'浙江'</code>。</p>\n" |
| }, |
| "regionHeight": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>区域的高度，可以设置不同的高度用来表达数据的大小。当 GeoJSON 为建筑的数据时，也可以通过这个值表示简直的高度。如下图</p>\n<p><img width=\"700\" height=\"auto\" src=\"documents/asset/gl/img/city-region-height.jpg\"></p>\n" |
| }, |
| "itemStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>单个区域的样式设置。</p>\n", |
| "properties": { |
| "areaColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "自适应" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>图形的不透明度。</p>\n", |
| "default": 1 |
| }, |
| "borderWidth": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>图形描边的宽度。加上描边后可以更清晰的区分每个区域。如下图：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/geo-border.png\"></p>\n", |
| "default": 0 |
| }, |
| "borderColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>图形描边的颜色。</p>\n", |
| "default": "#333" |
| } |
| } |
| }, |
| "label": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>单个区域的标签设置。</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示标签。</p>\n", |
| "default": false |
| }, |
| "distance": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离。</p>\n", |
| "default": 2 |
| }, |
| "formatter": { |
| "type": [ |
| "Function", |
| "string" |
| ], |
| "descriptionCN": "<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<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值\n value: number|Array,\n // 数据图形的颜色\n color: string,\n\n}\n</code></pre>\n" |
| }, |
| "textStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>标签的字体样式。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的颜色。</p>\n", |
| "default": "#000" |
| }, |
| "borderWidth": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的描边宽度。</p>\n", |
| "default": 1 |
| }, |
| "borderColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的描边颜色。</p>\n", |
| "default": "#fff" |
| }, |
| "fontFamily": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的字体系列。</p>\n", |
| "default": "'sans-serif'" |
| }, |
| "fontSize": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的字体大小。</p>\n", |
| "default": 20 |
| }, |
| "fontWeight": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "normal" |
| } |
| } |
| } |
| } |
| }, |
| "emphasis": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>单个区域标签和样式的高亮设置。</p>\n", |
| "properties": { |
| "itemStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "", |
| "properties": { |
| "areaColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "自适应" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>图形的不透明度。</p>\n", |
| "default": 1 |
| }, |
| "borderWidth": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>图形描边的宽度。加上描边后可以更清晰的区分每个区域。如下图：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/geo-border.png\"></p>\n", |
| "default": 0 |
| }, |
| "borderColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>图形描边的颜色。</p>\n", |
| "default": "#333" |
| } |
| } |
| }, |
| "label": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示标签。</p>\n", |
| "default": false |
| }, |
| "distance": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离。</p>\n", |
| "default": 2 |
| }, |
| "formatter": { |
| "type": [ |
| "Function", |
| "string" |
| ], |
| "descriptionCN": "<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<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值\n value: number|Array,\n // 数据图形的颜色\n color: string,\n\n}\n</code></pre>\n" |
| }, |
| "textStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>标签的字体样式。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的颜色。</p>\n", |
| "default": "#000" |
| }, |
| "borderWidth": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的描边宽度。</p>\n", |
| "default": 1 |
| }, |
| "borderColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的描边颜色。</p>\n", |
| "default": "#fff" |
| }, |
| "fontFamily": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的字体系列。</p>\n", |
| "default": "'sans-serif'" |
| }, |
| "fontSize": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的字体大小。</p>\n", |
| "default": 20 |
| }, |
| "fontWeight": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "normal" |
| } |
| } |
| } |
| } |
| } |
| } |
| } |
| } |
| } |
| }, |
| "shading": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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> 使用可以让展示的画面效果和质感有质的提升。</p>\n</li>\n</ul>\n" |
| }, |
| "realisticMaterial": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>真实感材质相关的配置项，在 <a href=\"#geo3D.shading\">shading</a> 为<code>'realistic'</code>时有效。</p>\n", |
| "properties": { |
| "roughness": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": 0.5 |
| }, |
| "metalness": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": 0 |
| }, |
| "baseTexture": { |
| "type": [ |
| "string", |
| "HTMLImageElement", |
| "HTMLCanvasElement" |
| ], |
| "descriptionCN": "<p>材质细节的纹理贴图。</p>\n" |
| }, |
| "textureTiling": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>baseTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n", |
| "default": 1 |
| }, |
| "textureOffset": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>材质细节纹理的位移。</p>\n", |
| "default": 0 |
| } |
| } |
| }, |
| "lambertMaterial": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>lambert 材质相关的配置项，在 <a href=\"#geo3D.shading\">shading</a> 为<code>'lambert'</code>时有效。</p>\n", |
| "properties": { |
| "baseTexture": { |
| "type": [ |
| "string", |
| "HTMLImageElement", |
| "HTMLCanvasElement" |
| ], |
| "descriptionCN": "<p>材质细节的纹理贴图。</p>\n" |
| }, |
| "textureTiling": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>baseTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n", |
| "default": 1 |
| }, |
| "textureOffset": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>材质细节纹理的位移。</p>\n", |
| "default": 0 |
| } |
| } |
| }, |
| "colorMaterial": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>color 材质相关的配置项，在 <a href=\"#geo3D.shading\">shading</a> 为<code>'color'</code>时有效。</p>\n", |
| "properties": { |
| "baseTexture": { |
| "type": [ |
| "string", |
| "HTMLImageElement", |
| "HTMLCanvasElement" |
| ], |
| "descriptionCN": "<p>材质细节的纹理贴图。</p>\n" |
| }, |
| "textureTiling": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>baseTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n", |
| "default": 1 |
| }, |
| "textureOffset": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>材质细节纹理的位移。</p>\n", |
| "default": 0 |
| } |
| } |
| }, |
| "light": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>光照相关的设置。在 <a href=\"#geo3D.shading\">shading</a> 为 <code>'color'</code> 的时候无效。</p>\n<p>光照的设置会影响到组件以及组件所在坐标系上的所有图表。</p>\n<p>合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。</p>\n", |
| "properties": { |
| "main": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>场景主光源的设置，在 <a href=\"#globe\">globe</a> 组件中就是太阳光。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>主光源的颜色。</p>\n", |
| "default": "#fff" |
| }, |
| "intensity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>主光源的强度。</p>\n", |
| "default": 1 |
| }, |
| "shadow": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<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", |
| "default": false |
| }, |
| "shadowQuality": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "'medium'" |
| }, |
| "alpha": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": 40 |
| }, |
| "beta": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>主光源绕 y 轴，即左右旋转的角度。</p>\n", |
| "default": 40 |
| } |
| } |
| }, |
| "ambient": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>全局的环境光设置。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>环境光的颜色。</p>\n", |
| "default": "#fff" |
| }, |
| "intensity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>环境光的强度。</p>\n", |
| "default": 0.2 |
| } |
| } |
| }, |
| "ambientCubemap": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>ambientCubemap 会使用纹理作为光源的环境光， 会为物体提供漫反射和高光反射。可以通过 <a href=\"#geo3D.light.ambientCubemap.diffuseIntensity\">diffuseIntensity</a> 和 <a href=\"#geo3D.light.ambientCubemap.specularIntensity\">specularIntensity</a> 分别设置漫反射强度和高光反射强度。</p>\n", |
| "properties": { |
| "texture": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>漫反射的强度。</p>\n", |
| "default": 0.5 |
| }, |
| "specularIntensity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>高光反射的强度。</p>\n", |
| "default": 0.5 |
| } |
| } |
| } |
| } |
| }, |
| "postEffect": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>后处理特效的相关配置，后处理特效可以为画面添加高光，景深，环境光遮蔽（SSAO），调色等效果。可以让整个画面更富有质感。</p>\n<p>下面分别是关闭和开启 <code>postEffect</code> 的区别。</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/globe-posteffect-disable.png\" width=\"100%\" title=\"Disable\">\n <img src=\"documents/asset/gl/img/globe-posteffect-enable.png\" width=\"100%\" title=\"Enable\">\n</div>\n\n<p>注意在开启 postEffect 的时候默认会开启 <a href=\"#geo3D.temporalSuperSampling\">temporalSuperSampling</a> 在画面静止后持续对画面增强，包括抗锯齿，景深，SSAO，阴影等。</p>\n", |
| "properties": { |
| "enable": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否开启后处理特效，默认关闭。</p>\n", |
| "default": false |
| }, |
| "bloom": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>高光特效。高光特效用来表现很“亮”的颜色，因为传统的 RGB 只能表现<code>0 - 255</code>范围的颜色，所以对于超出这个范围特别“亮”的颜色，会通过这种高光溢出的特效去表现。如下图</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/globe-posteffect-bloom.png\"></p>\n", |
| "properties": { |
| "enable": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否开启光晕特效。</p>\n", |
| "default": false |
| }, |
| "bloomIntensity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>光晕的强度，默认为 0.1</p>\n", |
| "default": 0.1 |
| } |
| } |
| }, |
| "depthOfField": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>景深效果。景深效果是模拟摄像机的光学成像效果，在对焦的区域相对清晰，原理对焦的区域则会逐渐模糊。</p>\n<p>景深效果可以让观察者几种注意力到对焦的区域，而且让画面的镜头感更强，大景深还能塑造出微距的模型效果。</p>\n<p>下面分别是关闭和开启景深的区别。</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-no-dof.png\" width=\"100%\" title=\"Disable\">\n <img src=\"documents/asset/gl/img/geo-dof.png\" width=\"100%\" title=\"Enable\">\n</div>\n", |
| "properties": { |
| "enable": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否开启景深</p>\n", |
| "default": false |
| }, |
| "focalDistance": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>初始的焦距，用户可以点击区域自动聚焦。</p>\n", |
| "default": 50 |
| }, |
| "focalRange": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>完全聚焦的区域范围，在此范围内的物体时完全清晰的，不会有模糊</p>\n", |
| "default": 20 |
| }, |
| "fstop": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>镜头的<a href=\"https://zh.wikipedia.org/wiki/%E7%84%A6%E6%AF%94\" target=\"_blank\">F值</a>，值越小景深越浅。</p>\n", |
| "default": 2.8 |
| }, |
| "blurRadius": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": 10 |
| } |
| } |
| }, |
| "SSAO": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<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", |
| "properties": { |
| "enable": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否开启环境光遮蔽，默认不开启</p>\n", |
| "default": false |
| }, |
| "quality": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>环境光遮蔽的质量，支持<code>'low'</code>, <code>'medium'</code>, <code>'high'</code>, <code>'ultra'</code></p>\n", |
| "default": "'medium'" |
| }, |
| "radius": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": 2 |
| }, |
| "intensity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>环境光遮蔽的强度。值越大颜色越深。</p>\n", |
| "default": 1 |
| } |
| } |
| }, |
| "colorCorrection": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>颜色纠正和调整。类似 Photoshop 中的 Color Adjustments</p>\n<p>下图同个场景调整为冷色系和暖色系的区别。</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/buildings-cold.jpg\" width=\"100%\" title=\"Cold\">\n <img src=\"documents/asset/gl/img/buildings-warm.jpg\" width=\"100%\" title=\"Warm\">\n</div>\n\n", |
| "properties": { |
| "enable": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否开启颜色纠正</p>\n", |
| "default": true |
| }, |
| "lookupTexture": { |
| "type": [ |
| "string", |
| "HTMLImageElement", |
| "HTMLCanvasElement" |
| ], |
| "descriptionCN": "<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": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>画面的曝光。</p>\n", |
| "default": 0 |
| }, |
| "brightness": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>画面的亮度。</p>\n", |
| "default": 0 |
| }, |
| "contrast": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>画面的对比度。</p>\n", |
| "default": 1 |
| }, |
| "saturation": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>画面的饱和度。</p>\n", |
| "default": 1 |
| } |
| } |
| }, |
| "FXAA": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>在开启 <a href=\"#geo3D.postEffect\">postEffect</a> 后，WebGL 默认的 MSAA 会无法使用。这时候通过 FXAA 可以廉价方便的解决抗锯齿的问题，FXAA 会对一些场景的边缘部分进行模糊从而解决锯齿的问题，这在一些场景上效果还不错，但是在 echarts-gl 中，需要保证很多文字和线条边缘的锐利清晰，因此 FXAA 并不是那么适用。这时候我们可以通过如下设置更高的<code>devicePixelRatio</code>来使用超采样</p>\n<pre><code class=\"lang-js\">var chart = echarts.init(dom, null, {\n devicePixelRatio: 2\n})\n</code></pre>\n<p>但是这种方法对电脑性能有很高的要求，所以更多时候我们建议使用 echarts-gl 中的 <a href=\"#geo3D.temporalSuperSampling\">temporalSuperSampling</a>，在画面静止后会持续分帧对一个像素多次抖动采样，从而达到超采样抗锯齿的效果。</p>\n", |
| "properties": { |
| "enable": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否开启 FXAA，默认关闭。</p>\n", |
| "default": false |
| } |
| } |
| } |
| } |
| }, |
| "temporalSuperSampling": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>分帧超采样。在开启 <a href=\"#geo3D.postEffect\">postEffect</a> 后，WebGL 默认的 MSAA 会无法使用，所以我们需要自己解决锯齿的问题。</p>\n<p>分帧超采样就是用来解决锯齿的问题，它在画面静止后会持续分帧对一个像素多次抖动采样，从而达到抗锯齿的效果。而且在这个分帧采样的过程中，echarts-gl 也会对 <a href=\"#geo3D.postEffect\">postEffect</a> 中一些需要采样保证效果的特效，例如 <a href=\"#geo3D.postEffect.SSAO\">SSAO</a>, <a href=\"#geo3D.postEffect.depthOfField\">景深</a>，以及阴影进行渐进增强。</p>\n<p>下面是未开启和开启<code>temporalSuperSampling</code>的区别。</p>\n<div class=\"twentytwenty-container\" style=\"width: 800px;\">\n <img src=\"documents/asset/gl/img/surface-no-taa.png\" width=\"100%\" title=\"No AA\">\n <img src=\"documents/asset/gl/img/surface-taa.png\" width=\"100%\" title=\"AA\">\n</div>\n", |
| "properties": { |
| "enable": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否开启分帧超采样。默认在开启 <a href=\"#geo3D.postEffect\">postEffect</a> 后也会同步开启。</p>\n", |
| "default": "'auto'" |
| } |
| } |
| }, |
| "viewControl": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p><code>viewControl</code>用于鼠标的旋转，缩放等视角控制。</p>\n", |
| "properties": { |
| "autoRotate": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否开启视角绕物体的自动旋转查看。</p>\n", |
| "default": false |
| }, |
| "autoRotateDirection": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>物体自传的方向。默认是 <code>'cw'</code> 也就是从上往下看是顺时针方向，也可以取 <code>'ccw'</code>，既从上往下看为逆时针方向。</p>\n", |
| "default": "cw" |
| }, |
| "autoRotateSpeed": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>物体自传的速度。单位为<code>角度 / 秒</code>，默认为<code>10</code> ，也就是<code>36</code>秒转一圈。</p>\n", |
| "default": 10 |
| }, |
| "autoRotateAfterStill": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>在鼠标静止操作后恢复自动旋转的时间间隔。在开启 <a href=\"#geo3D.viewControl.autoRotate\">autoRotate</a> 后有效。</p>\n", |
| "default": 3 |
| }, |
| "damping": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>鼠标进行旋转，缩放等操作时的迟滞因子，在大于 0 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。</p>\n", |
| "default": 0.8 |
| }, |
| "rotateSensitivity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>旋转操作的灵敏度，值越大越灵敏。默认为``</p>\n<p>设置为<code>0</code>后无法旋转。</p>\n", |
| "default": 1 |
| }, |
| "zoomSensitivity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>缩放操作的灵敏度，值越大越灵敏。默认为``</p>\n<p>设置为<code>0</code>后无法缩放。</p>\n", |
| "default": 1 |
| }, |
| "panSensitivity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>平移操作的灵敏度，值越大越灵敏。默认为``</p>\n<p>设置为<code>0</code>后无法平移。</p>\n", |
| "default": 1 |
| }, |
| "panMouseButton": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "left" |
| }, |
| "rotateMouseButton": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "middle" |
| }, |
| "distance": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>默认视角距离主体的距离，对于 <a href=\"#globe\">globe</a> 来说是距离地球表面的距离，对于 <a href=\"#grid3D\">grid3D</a> 和 <a href=\"#geo3D\">geo3D</a> 等其它组件来说是距离中心原点的距离。</p>\n", |
| "default": 100 |
| }, |
| "minDistance": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>视角通过鼠标控制能拉近到主体的最小距离。</p>\n", |
| "default": 40 |
| }, |
| "maxDistance": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>视角通过鼠标控制能拉远到主体的最小距离。</p>\n", |
| "default": 400 |
| }, |
| "alpha": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": 40 |
| }, |
| "beta": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>视角绕 y 轴，即左右旋转的角度。</p>\n", |
| "default": 0 |
| }, |
| "center": { |
| "type": [ |
| "Array" |
| ], |
| "descriptionCN": "<p>视角中心点，旋转也会围绕这个中心点旋转，默认为<code>[0,0,0]</code>。</p>\n" |
| }, |
| "minAlpha": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。</p>\n", |
| "default": 5 |
| }, |
| "maxAlpha": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。</p>\n", |
| "default": 90 |
| }, |
| "minBeta": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>左右旋转的最小 beta 值。即视角能旋转到达最左的角度。</p>\n", |
| "default": -80 |
| }, |
| "maxBeta": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>左右旋转的最大 beta 值。即视角能旋转到达最右的角度。</p>\n", |
| "default": 80 |
| }, |
| "animation": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否开启动画。</p>\n", |
| "default": true |
| }, |
| "animationDurationUpdate": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>过渡动画的时长。</p>\n", |
| "default": 1000 |
| }, |
| "animationEasingUpdate": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>过渡动画的缓动效果。</p>\n", |
| "default": "cubicInOut" |
| } |
| } |
| }, |
| "zlevel": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": -10 |
| }, |
| "left": { |
| "type": [ |
| "string", |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": "auto" |
| }, |
| "top": { |
| "type": [ |
| "string", |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": "auto" |
| }, |
| "right": { |
| "type": [ |
| "string", |
| "number" |
| ], |
| "descriptionCN": "<p>组件的视图离容器右侧的距离。</p>\n<p><code>right</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比。</p>\n<p>默认自适应。</p>\n", |
| "default": "auto" |
| }, |
| "bottom": { |
| "type": [ |
| "string", |
| "number" |
| ], |
| "descriptionCN": "<p>组件的视图离容器下侧的距离。</p>\n<p><code>bottom</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比。</p>\n<p>默认自适应。</p>\n", |
| "default": "auto" |
| }, |
| "width": { |
| "type": [ |
| "string", |
| "number" |
| ], |
| "descriptionCN": "<p>组件的视图宽度。</p>\n", |
| "default": "auto" |
| }, |
| "height": { |
| "type": [ |
| "string", |
| "number" |
| ], |
| "descriptionCN": "<p>组件的视图高度。</p>\n", |
| "default": "auto" |
| } |
| } |
| }, |
| "grid3D": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>三维笛卡尔坐标系组件。需要和 <a href=\"#xAxis3D\">xAxis3D</a>，<a href=\"#yAxis3D\">yAxis3D</a>，<a href=\"#zAxis3D\">zAxis3D</a> 三个坐标轴组件一起使用。</p>\n<p>可以在三维笛卡尔坐标系上绘制<a href=\"#series-line3D\">三维折线图</a>，<a href=\"#series-bar3D\">三维柱状图</a>，<a href=\"#series-scatter3D\">三维散点/气泡图</a>，<a href=\"#series-surface\">曲面图</a>。</p>\n<p>你可以设置 <a href=\"#grid3D.postEffect\">postEffect</a>, <a href=\"#grid3D.light\">light</a> 等配置项提升<code>grid3D</code>中三维图表的显示效果。</p>\n<p>下面是 grid3D 中坐标轴配置项的说明。</p>\n<p><img width=\"700\" height=\"auto\" src=\"documents/asset/gl/img/grid3D.png\"></p>\n<hr>\n<blockquote>\n<p><strong>注意：</strong> <a href=\"#xAxis3D\">xAxis3D</a>，<a href=\"#yAxis3D\">yAxis3D</a>，<a href=\"#zAxis3D\">zAxis3D</a> 上单独设置的<code>axisLine</code>, <code>axisTick</code>, <code>axisLabel</code>, <code>splitLine</code>, <code>splitArea</code>, <code>axisPointer</code>会覆盖<code>grid3D</code>下的相应配置项。</p>\n</blockquote>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示三维笛卡尔坐标系。</p>\n" |
| }, |
| "boxWidth": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>三维笛卡尔坐标系组件在三维场景中的宽度。配合 <a href=\"#grid3D.viewControl.distance\">viewControl.distance</a> 可以得到最合适的展示尺寸。</p>\n", |
| "default": 100 |
| }, |
| "boxHeight": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>三维笛卡尔坐标系组件在三维场景中的高度。</p>\n", |
| "default": 100 |
| }, |
| "boxDepth": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>三维笛卡尔坐标系组件在三维场景中的深度。</p>\n", |
| "default": 100 |
| }, |
| "axisLine": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>坐标轴轴线相关设置。</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示坐标轴轴线。</p>\n", |
| "default": true |
| }, |
| "interval": { |
| "type": [ |
| "number", |
| "Function" |
| ], |
| "descriptionCN": "<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", |
| "default": "'auto'" |
| }, |
| "lineStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "'#333'" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的不透明度。</p>\n", |
| "default": 1 |
| }, |
| "width": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的宽度。</p>\n", |
| "default": 2 |
| } |
| } |
| } |
| } |
| }, |
| "axisLabel": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>坐标轴刻度标签的相关设置。</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示刻度标签。</p>\n", |
| "default": true |
| }, |
| "margin": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>刻度标签与轴线之间的距离。</p>\n<p><strong>注意：</strong> 这个距离是三维空间而非屏幕空间的。</p>\n", |
| "default": 8 |
| }, |
| "interval": { |
| "type": [ |
| "number", |
| "Function" |
| ], |
| "descriptionCN": "<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", |
| "default": "'auto'" |
| }, |
| "formatter": { |
| "type": [ |
| "string", |
| "Function" |
| ], |
| "descriptionCN": "", |
| "default": null |
| }, |
| "textStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "", |
| "properties": { |
| "color": { |
| "type": [ |
| "Color", |
| "Function" |
| ], |
| "descriptionCN": "<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": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的描边宽度。</p>\n", |
| "default": 0 |
| }, |
| "borderColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的描边颜色。</p>\n", |
| "default": "#fff" |
| }, |
| "fontFamily": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的字体系列。</p>\n", |
| "default": "'sans-serif'" |
| }, |
| "fontSize": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的字体大小。</p>\n", |
| "default": 12 |
| }, |
| "fontWeight": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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 -->", |
| "default": "normal" |
| } |
| } |
| } |
| } |
| }, |
| "axisTick": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>坐标轴刻度相关设置。</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示坐标轴刻度。</p>\n", |
| "default": true |
| }, |
| "interval": { |
| "type": [ |
| "number", |
| "Function" |
| ], |
| "descriptionCN": "<p>坐标轴刻度标签的显示间隔，在类目轴中有效。默认同 <a href=\"#.axisLabel.interval\">axisLabel.interval</a> 一样。</p>\n<p>默认会自动计算<code>interval</code>以保证较好的展示效果。</p>\n<p>可以设置成 0 强制显示所有标签。</p>\n<p>如果设置为 <code>1</code>，表示『隔一个标签显示一个标签』，如果值为 <code>2</code>，表示隔两个标签显示一个标签，以此类推。</p>\n<p>可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：</p>\n<pre><code class=\"lang-js\">(index:number, value: string) => boolean\n</code></pre>\n<p>第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 <code>false</code>。</p>\n", |
| "default": "'auto'" |
| }, |
| "length": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>坐标轴刻度的长度。</p>\n", |
| "default": 5 |
| }, |
| "lineStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "", |
| "properties": { |
| "color": { |
| "type": [ |
| "Color" |
| ], |
| "descriptionCN": "<p>刻度线的颜色，默认取 <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。</p>\n" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的不透明度。</p>\n", |
| "default": 1 |
| }, |
| "width": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的宽度。</p>\n<!-- Overwrite color -->", |
| "default": 1 |
| } |
| } |
| } |
| } |
| }, |
| "splitLine": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>坐标轴在 <a href=\"#grid3D\">grid3D</a> 的平面上的分隔线。</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示分隔线。默认数值轴显示，类目轴不显示。</p>\n", |
| "default": true |
| }, |
| "interval": { |
| "type": [ |
| "number", |
| "Function" |
| ], |
| "descriptionCN": "<p>坐标轴分隔线的显示间隔，在类目轴中有效。默认同 <a href=\"#.axisLabel.interval\">axisLabel.interval</a> 一样。</p>\n<p>默认会自动计算<code>interval</code>以保证较好的展示效果。</p>\n<p>可以设置成 0 强制显示所有标签。</p>\n<p>如果设置为 <code>1</code>，表示『隔一个标签显示一个标签』，如果值为 <code>2</code>，表示隔两个标签显示一个标签，以此类推。</p>\n<p>可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：</p>\n<pre><code class=\"lang-js\">(index:number, value: string) => boolean\n</code></pre>\n<p>第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 <code>false</code>。</p>\n", |
| "default": "'auto'", |
| "properties": { |
| "color": { |
| "type": [ |
| "Array", |
| "string" |
| ], |
| "descriptionCN": "<p>分隔线颜色，可以设置成单个颜色。</p>\n<p>也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色。</p>\n<p>示例</p>\n<pre><code>splitLine: {\n lineStyle: {\n // 使用深浅的间隔色\n color: ['#aaa', '#ddd']\n }\n}\n</code></pre>", |
| "default": "['#ccc']" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的不透明度。</p>\n", |
| "default": 1 |
| }, |
| "width": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的宽度。</p>\n<!-- overwrite color -->", |
| "default": 1 |
| } |
| } |
| } |
| } |
| }, |
| "splitArea": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>坐标轴在 <a href=\"#grid3D\">grid3D</a> 的平面上的分隔区域。</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示分隔区域。</p>\n", |
| "default": true |
| }, |
| "interval": { |
| "type": [ |
| "number", |
| "Function" |
| ], |
| "descriptionCN": "<p>坐标轴分隔区域的显示间隔，在类目轴中有效。默认同 <a href=\"#.axisLabel.interval\">axisLabel.interval</a> 一样。</p>\n<p>默认会自动计算<code>interval</code>以保证较好的展示效果。</p>\n<p>可以设置成 0 强制显示所有标签。</p>\n<p>如果设置为 <code>1</code>，表示『隔一个标签显示一个标签』，如果值为 <code>2</code>，表示隔两个标签显示一个标签，以此类推。</p>\n<p>可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：</p>\n<pre><code class=\"lang-js\">(index:number, value: string) => boolean\n</code></pre>\n<p>第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 <code>false</code>。</p>\n", |
| "default": "'auto'" |
| }, |
| "areaStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>分隔区域的样式设置。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "Array" |
| ], |
| "descriptionCN": "<p>分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。</p>\n", |
| "default": "['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']" |
| } |
| } |
| } |
| } |
| }, |
| "axisPointer": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>坐标轴指示线。</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示坐标轴指示线。</p>\n", |
| "default": true |
| }, |
| "lineStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "'rgba(0, 0, 0, 0.8)'" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的不透明度。</p>\n", |
| "default": 1 |
| }, |
| "width": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的宽度。</p>\n", |
| "default": 1 |
| } |
| } |
| }, |
| "label": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>指示线标签。</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示指示线标签。默认数值轴显示，类目轴不显示。</p>\n", |
| "default": true |
| }, |
| "formatter": { |
| "type": [ |
| "Function" |
| ], |
| "descriptionCN": "<p>标签格式器，函数第一个参数是当前坐标轴的数值，第二个参数是所有坐标轴的数值数组</p>\n<pre><code class=\"lang-js\">(value: number, valueAll: Array) => string\n</code></pre>\n" |
| }, |
| "margin": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>标签距离坐标轴的距离。同刻度标签一样，这个距离是三维空间而非屏幕像素。</p>\n" |
| }, |
| "textStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的颜色。</p>\n", |
| "default": "\"#fff\"" |
| }, |
| "borderWidth": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的描边宽度。</p>\n", |
| "default": 0 |
| }, |
| "borderColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的描边颜色。</p>\n", |
| "default": "#fff" |
| }, |
| "fontFamily": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的字体系列。</p>\n", |
| "default": "'sans-serif'" |
| }, |
| "fontSize": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的字体大小。</p>\n", |
| "default": 16 |
| }, |
| "fontWeight": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "normal" |
| } |
| } |
| } |
| } |
| } |
| } |
| }, |
| "environment": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "'auto'" |
| }, |
| "light": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>光照相关的设置。在 <a href=\"#grid3D.shading\">shading</a> 为 <code>'color'</code> 的时候无效。</p>\n<p>光照的设置会影响到组件以及组件所在坐标系上的所有图表。</p>\n<p>合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。</p>\n", |
| "properties": { |
| "main": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>场景主光源的设置，在 <a href=\"#globe\">globe</a> 组件中就是太阳光。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>主光源的颜色。</p>\n", |
| "default": "#fff" |
| }, |
| "intensity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>主光源的强度。</p>\n", |
| "default": 1 |
| }, |
| "shadow": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<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", |
| "default": false |
| }, |
| "shadowQuality": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "'medium'" |
| }, |
| "alpha": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": 30 |
| }, |
| "beta": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>主光源绕 y 轴，即左右旋转的角度。</p>\n", |
| "default": 30 |
| } |
| } |
| }, |
| "ambient": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>全局的环境光设置。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>环境光的颜色。</p>\n", |
| "default": "#fff" |
| }, |
| "intensity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>环境光的强度。</p>\n", |
| "default": 0.2 |
| } |
| } |
| }, |
| "ambientCubemap": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>ambientCubemap 会使用纹理作为光源的环境光， 会为物体提供漫反射和高光反射。可以通过 <a href=\"#grid3D.light.ambientCubemap.diffuseIntensity\">diffuseIntensity</a> 和 <a href=\"#grid3D.light.ambientCubemap.specularIntensity\">specularIntensity</a> 分别设置漫反射强度和高光反射强度。</p>\n", |
| "properties": { |
| "texture": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>漫反射的强度。</p>\n", |
| "default": 0.5 |
| }, |
| "specularIntensity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>高光反射的强度。</p>\n", |
| "default": 0.5 |
| } |
| } |
| } |
| } |
| }, |
| "postEffect": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>后处理特效的相关配置，后处理特效可以为画面添加高光，景深，环境光遮蔽（SSAO），调色等效果。可以让整个画面更富有质感。</p>\n<p>下面分别是关闭和开启 <code>postEffect</code> 的区别。</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/globe-posteffect-disable.png\" width=\"100%\" title=\"Disable\">\n <img src=\"documents/asset/gl/img/globe-posteffect-enable.png\" width=\"100%\" title=\"Enable\">\n</div>\n\n<p>注意在开启 postEffect 的时候默认会开启 <a href=\"#grid3D.temporalSuperSampling\">temporalSuperSampling</a> 在画面静止后持续对画面增强，包括抗锯齿，景深，SSAO，阴影等。</p>\n", |
| "properties": { |
| "enable": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否开启后处理特效，默认关闭。</p>\n", |
| "default": false |
| }, |
| "bloom": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>高光特效。高光特效用来表现很“亮”的颜色，因为传统的 RGB 只能表现<code>0 - 255</code>范围的颜色，所以对于超出这个范围特别“亮”的颜色，会通过这种高光溢出的特效去表现。如下图</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/globe-posteffect-bloom.png\"></p>\n", |
| "properties": { |
| "enable": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否开启光晕特效。</p>\n", |
| "default": false |
| }, |
| "bloomIntensity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>光晕的强度，默认为 0.1</p>\n", |
| "default": 0.1 |
| } |
| } |
| }, |
| "depthOfField": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>景深效果。景深效果是模拟摄像机的光学成像效果，在对焦的区域相对清晰，原理对焦的区域则会逐渐模糊。</p>\n<p>景深效果可以让观察者几种注意力到对焦的区域，而且让画面的镜头感更强，大景深还能塑造出微距的模型效果。</p>\n<p>下面分别是关闭和开启景深的区别。</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-no-dof.png\" width=\"100%\" title=\"Disable\">\n <img src=\"documents/asset/gl/img/geo-dof.png\" width=\"100%\" title=\"Enable\">\n</div>\n", |
| "properties": { |
| "enable": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否开启景深</p>\n", |
| "default": false |
| }, |
| "focalDistance": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>初始的焦距，用户可以点击区域自动聚焦。</p>\n", |
| "default": 50 |
| }, |
| "focalRange": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>完全聚焦的区域范围，在此范围内的物体时完全清晰的，不会有模糊</p>\n", |
| "default": 20 |
| }, |
| "fstop": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>镜头的<a href=\"https://zh.wikipedia.org/wiki/%E7%84%A6%E6%AF%94\" target=\"_blank\">F值</a>，值越小景深越浅。</p>\n", |
| "default": 2.8 |
| }, |
| "blurRadius": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": 10 |
| } |
| } |
| }, |
| "SSAO": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<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", |
| "properties": { |
| "enable": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否开启环境光遮蔽，默认不开启</p>\n", |
| "default": false |
| }, |
| "quality": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>环境光遮蔽的质量，支持<code>'low'</code>, <code>'medium'</code>, <code>'high'</code>, <code>'ultra'</code></p>\n", |
| "default": "'medium'" |
| }, |
| "radius": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": 2 |
| }, |
| "intensity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>环境光遮蔽的强度。值越大颜色越深。</p>\n", |
| "default": 1 |
| } |
| } |
| }, |
| "colorCorrection": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>颜色纠正和调整。类似 Photoshop 中的 Color Adjustments</p>\n<p>下图同个场景调整为冷色系和暖色系的区别。</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/buildings-cold.jpg\" width=\"100%\" title=\"Cold\">\n <img src=\"documents/asset/gl/img/buildings-warm.jpg\" width=\"100%\" title=\"Warm\">\n</div>\n\n", |
| "properties": { |
| "enable": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否开启颜色纠正</p>\n", |
| "default": true |
| }, |
| "lookupTexture": { |
| "type": [ |
| "string", |
| "HTMLImageElement", |
| "HTMLCanvasElement" |
| ], |
| "descriptionCN": "<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": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>画面的曝光。</p>\n", |
| "default": 0 |
| }, |
| "brightness": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>画面的亮度。</p>\n", |
| "default": 0 |
| }, |
| "contrast": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>画面的对比度。</p>\n", |
| "default": 1 |
| }, |
| "saturation": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>画面的饱和度。</p>\n", |
| "default": 1 |
| } |
| } |
| }, |
| "FXAA": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>在开启 <a href=\"#grid3D.postEffect\">postEffect</a> 后，WebGL 默认的 MSAA 会无法使用。这时候通过 FXAA 可以廉价方便的解决抗锯齿的问题，FXAA 会对一些场景的边缘部分进行模糊从而解决锯齿的问题，这在一些场景上效果还不错，但是在 echarts-gl 中，需要保证很多文字和线条边缘的锐利清晰，因此 FXAA 并不是那么适用。这时候我们可以通过如下设置更高的<code>devicePixelRatio</code>来使用超采样</p>\n<pre><code class=\"lang-js\">var chart = echarts.init(dom, null, {\n devicePixelRatio: 2\n})\n</code></pre>\n<p>但是这种方法对电脑性能有很高的要求，所以更多时候我们建议使用 echarts-gl 中的 <a href=\"#grid3D.temporalSuperSampling\">temporalSuperSampling</a>，在画面静止后会持续分帧对一个像素多次抖动采样，从而达到超采样抗锯齿的效果。</p>\n", |
| "properties": { |
| "enable": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否开启 FXAA，默认关闭。</p>\n", |
| "default": false |
| } |
| } |
| } |
| } |
| }, |
| "temporalSuperSampling": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>分帧超采样。在开启 <a href=\"#grid3D.postEffect\">postEffect</a> 后，WebGL 默认的 MSAA 会无法使用，所以我们需要自己解决锯齿的问题。</p>\n<p>分帧超采样就是用来解决锯齿的问题，它在画面静止后会持续分帧对一个像素多次抖动采样，从而达到抗锯齿的效果。而且在这个分帧采样的过程中，echarts-gl 也会对 <a href=\"#grid3D.postEffect\">postEffect</a> 中一些需要采样保证效果的特效，例如 <a href=\"#grid3D.postEffect.SSAO\">SSAO</a>, <a href=\"#grid3D.postEffect.depthOfField\">景深</a>，以及阴影进行渐进增强。</p>\n<p>下面是未开启和开启<code>temporalSuperSampling</code>的区别。</p>\n<div class=\"twentytwenty-container\" style=\"width: 800px;\">\n <img src=\"documents/asset/gl/img/surface-no-taa.png\" width=\"100%\" title=\"No AA\">\n <img src=\"documents/asset/gl/img/surface-taa.png\" width=\"100%\" title=\"AA\">\n</div>\n", |
| "properties": { |
| "enable": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否开启分帧超采样。默认在开启 <a href=\"#grid3D.postEffect\">postEffect</a> 后也会同步开启。</p>\n", |
| "default": "'auto'" |
| } |
| } |
| }, |
| "viewControl": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p><code>viewControl</code>用于鼠标的旋转，缩放等视角控制。</p>\n", |
| "properties": { |
| "autoRotate": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否开启视角绕物体的自动旋转查看。</p>\n", |
| "default": false |
| }, |
| "autoRotateDirection": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>物体自传的方向。默认是 <code>'cw'</code> 也就是从上往下看是顺时针方向，也可以取 <code>'ccw'</code>，既从上往下看为逆时针方向。</p>\n", |
| "default": "cw" |
| }, |
| "autoRotateSpeed": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>物体自传的速度。单位为<code>角度 / 秒</code>，默认为<code>10</code> ，也就是<code>36</code>秒转一圈。</p>\n", |
| "default": 10 |
| }, |
| "autoRotateAfterStill": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>在鼠标静止操作后恢复自动旋转的时间间隔。在开启 <a href=\"#grid3D.viewControl.autoRotate\">autoRotate</a> 后有效。</p>\n", |
| "default": 3 |
| }, |
| "damping": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>鼠标进行旋转，缩放等操作时的迟滞因子，在大于 0 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。</p>\n", |
| "default": 0.8 |
| }, |
| "rotateSensitivity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>旋转操作的灵敏度，值越大越灵敏。默认为``</p>\n<p>设置为<code>0</code>后无法旋转。</p>\n", |
| "default": 1 |
| }, |
| "zoomSensitivity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>缩放操作的灵敏度，值越大越灵敏。默认为``</p>\n<p>设置为<code>0</code>后无法缩放。</p>\n", |
| "default": 1 |
| }, |
| "panSensitivity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>平移操作的灵敏度，值越大越灵敏。默认为``</p>\n<p>设置为<code>0</code>后无法平移。</p>\n", |
| "default": 1 |
| }, |
| "panMouseButton": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "left" |
| }, |
| "rotateMouseButton": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "middle" |
| }, |
| "distance": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>默认视角距离主体的距离，对于 <a href=\"#globe\">globe</a> 来说是距离地球表面的距离，对于 <a href=\"#grid3D\">grid3D</a> 和 <a href=\"#geo3D\">geo3D</a> 等其它组件来说是距离中心原点的距离。</p>\n", |
| "default": 200 |
| }, |
| "minDistance": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>视角通过鼠标控制能拉近到主体的最小距离。</p>\n", |
| "default": 40 |
| }, |
| "maxDistance": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>视角通过鼠标控制能拉远到主体的最小距离。</p>\n", |
| "default": 400 |
| }, |
| "alpha": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": 20 |
| }, |
| "beta": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>视角绕 y 轴，即左右旋转的角度。</p>\n", |
| "default": 40 |
| }, |
| "center": { |
| "type": [ |
| "Array" |
| ], |
| "descriptionCN": "<p>视角中心点，旋转也会围绕这个中心点旋转，默认为<code>[0,0,0]</code>。</p>\n" |
| }, |
| "minAlpha": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。</p>\n", |
| "default": -90 |
| }, |
| "maxAlpha": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。</p>\n", |
| "default": 90 |
| }, |
| "minBeta": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>左右旋转的最小 beta 值。即视角能旋转到达最左的角度。</p>\n", |
| "default": null |
| }, |
| "maxBeta": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>左右旋转的最大 beta 值。即视角能旋转到达最右的角度。</p>\n", |
| "default": null |
| }, |
| "animation": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否开启动画。</p>\n", |
| "default": true |
| }, |
| "animationDurationUpdate": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>过渡动画的时长。</p>\n", |
| "default": 1000 |
| }, |
| "animationEasingUpdate": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>过渡动画的缓动效果。</p>\n", |
| "default": "cubicInOut" |
| } |
| } |
| }, |
| "zlevel": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": -10 |
| }, |
| "left": { |
| "type": [ |
| "string", |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": "auto" |
| }, |
| "top": { |
| "type": [ |
| "string", |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": "auto" |
| }, |
| "right": { |
| "type": [ |
| "string", |
| "number" |
| ], |
| "descriptionCN": "<p>组件的视图离容器右侧的距离。</p>\n<p><code>right</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比。</p>\n<p>默认自适应。</p>\n", |
| "default": "auto" |
| }, |
| "bottom": { |
| "type": [ |
| "string", |
| "number" |
| ], |
| "descriptionCN": "<p>组件的视图离容器下侧的距离。</p>\n<p><code>bottom</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比。</p>\n<p>默认自适应。</p>\n", |
| "default": "auto" |
| }, |
| "width": { |
| "type": [ |
| "string", |
| "number" |
| ], |
| "descriptionCN": "<p>组件的视图宽度。</p>\n", |
| "default": "auto" |
| }, |
| "height": { |
| "type": [ |
| "string", |
| "number" |
| ], |
| "descriptionCN": "<p>组件的视图高度。</p>\n", |
| "default": "auto" |
| } |
| } |
| }, |
| "xAxis3D": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>三维笛卡尔坐标系中的 x 轴。可以通过 <a href=\"#xAxis3D.grid3DIndex\">grid3DIndex</a> 索引所在的<a href=\"#grid3D\">三维笛卡尔坐标系</a>。</p>\n<p>在<code>xAxis3D</code>下设置的 <a href=\"#xAxis3D.axisLine\">axisLine</a>, <a href=\"#xAxis3D.axisTick\">axisTick</a>, <a href=\"#xAxis3D.axisLabel\">axisLabel</a>, <a href=\"#xAxis3D.splitLine\">splitLine</a>, <a href=\"#xAxis3D.splitArea\">splitArea</a>, <a href=\"#xAxis3D.axisPointer\">axisPointer</a> 会覆盖 <a href=\"#grid3D\">grid3D</a> 下的相应配置项。</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示 x 轴。</p>\n" |
| }, |
| "name": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>坐标轴名称。</p>\n", |
| "default": "'X'" |
| }, |
| "grid3DIndex": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>坐标轴使用的 <a href=\"#grid3D\">grid3D</a> 组件的索引。默认使用第一个 <a href=\"#grid3D\">grid3D</a> 组件。</p>\n", |
| "default": 0 |
| }, |
| "nameTextStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>坐标轴名称的显示样式。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "Color" |
| ], |
| "descriptionCN": "<p>坐标轴名称的颜色，默认取 <a href=\"#xAxis3D.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。</p>\n" |
| }, |
| "borderWidth": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的描边宽度。</p>\n", |
| "default": 0 |
| }, |
| "borderColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的描边颜色。</p>\n", |
| "default": "#fff" |
| }, |
| "fontFamily": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的字体系列。</p>\n", |
| "default": "'sans-serif'" |
| }, |
| "fontSize": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的字体大小。</p>\n", |
| "default": 16 |
| }, |
| "fontWeight": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "normal" |
| } |
| } |
| }, |
| "nameGap": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>坐标轴名称与轴线之间的距离，注意是三维空间的距离而非屏幕像素值。</p>\n", |
| "default": 20 |
| }, |
| "type": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "value" |
| }, |
| "min": { |
| "type": [ |
| "number", |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": null |
| }, |
| "max": { |
| "type": [ |
| "number", |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": null |
| }, |
| "scale": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<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", |
| "default": false |
| }, |
| "splitNumber": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。</p>\n<p>在类目轴中无效。</p>\n", |
| "default": 5 |
| }, |
| "minInterval": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": 0 |
| }, |
| "interval": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>对数轴的底数，只在对数轴中（<a href=\"#xAxis3D.type\">type</a>: 'log'）有效。</p>\n", |
| "default": 10 |
| }, |
| "data": { |
| "type": [ |
| "Array" |
| ], |
| "descriptionCN": "<p>类目数据，在类目轴（<a href=\"#xAxis3D.type\">type</a>: 'category'）中有效。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">// 所有类目名称列表\ndata: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']\n// 每一项也可以是具体的配置项，此时取配置项中的 `value` 为类目名\ndata: [{\n value: '周一',\n // 突出周一\n textStyle: {\n fontSize: 20,\n color: 'red'\n }\n}, '周二', '周三', '周四', '周五', '周六', '周日']\n</code></pre>\n", |
| "items": { |
| "type": "Object", |
| "properties": { |
| "value": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>单个类目名称。</p>\n" |
| }, |
| "textStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>类目标签的文字样式。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的颜色。</p>\n", |
| "default": "\"#fff\"" |
| }, |
| "borderWidth": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的描边宽度。</p>\n", |
| "default": 0 |
| }, |
| "borderColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的描边颜色。</p>\n", |
| "default": "#fff" |
| }, |
| "fontFamily": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的字体系列。</p>\n", |
| "default": "'sans-serif'" |
| }, |
| "fontSize": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的字体大小。</p>\n", |
| "default": 12 |
| }, |
| "fontWeight": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "normal" |
| } |
| } |
| } |
| } |
| } |
| }, |
| "axisLine": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>坐标轴轴线相关设置。</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示坐标轴轴线。</p>\n", |
| "default": true |
| }, |
| "interval": { |
| "type": [ |
| "number", |
| "Function" |
| ], |
| "descriptionCN": "<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", |
| "default": "'auto'" |
| }, |
| "lineStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "'#333'" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的不透明度。</p>\n", |
| "default": 1 |
| }, |
| "width": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的宽度。</p>\n", |
| "default": 2 |
| } |
| } |
| } |
| } |
| }, |
| "axisLabel": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>坐标轴刻度标签的相关设置。</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示刻度标签。</p>\n", |
| "default": true |
| }, |
| "margin": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>刻度标签与轴线之间的距离。</p>\n<p><strong>注意：</strong> 这个距离是三维空间而非屏幕空间的。</p>\n", |
| "default": 8 |
| }, |
| "interval": { |
| "type": [ |
| "number", |
| "Function" |
| ], |
| "descriptionCN": "<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", |
| "default": "'auto'" |
| }, |
| "formatter": { |
| "type": [ |
| "string", |
| "Function" |
| ], |
| "descriptionCN": "", |
| "default": null |
| }, |
| "textStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "", |
| "properties": { |
| "color": { |
| "type": [ |
| "Color", |
| "Function" |
| ], |
| "descriptionCN": "<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": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的描边宽度。</p>\n", |
| "default": 0 |
| }, |
| "borderColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的描边颜色。</p>\n", |
| "default": "#fff" |
| }, |
| "fontFamily": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的字体系列。</p>\n", |
| "default": "'sans-serif'" |
| }, |
| "fontSize": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的字体大小。</p>\n", |
| "default": 12 |
| }, |
| "fontWeight": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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 -->", |
| "default": "normal" |
| } |
| } |
| } |
| } |
| }, |
| "axisTick": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>坐标轴刻度相关设置。</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示坐标轴刻度。</p>\n", |
| "default": true |
| }, |
| "interval": { |
| "type": [ |
| "number", |
| "Function" |
| ], |
| "descriptionCN": "<p>坐标轴刻度标签的显示间隔，在类目轴中有效。默认同 <a href=\"#.axisLabel.interval\">axisLabel.interval</a> 一样。</p>\n<p>默认会自动计算<code>interval</code>以保证较好的展示效果。</p>\n<p>可以设置成 0 强制显示所有标签。</p>\n<p>如果设置为 <code>1</code>，表示『隔一个标签显示一个标签』，如果值为 <code>2</code>，表示隔两个标签显示一个标签，以此类推。</p>\n<p>可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：</p>\n<pre><code class=\"lang-js\">(index:number, value: string) => boolean\n</code></pre>\n<p>第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 <code>false</code>。</p>\n", |
| "default": "'auto'" |
| }, |
| "length": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>坐标轴刻度的长度。</p>\n", |
| "default": 5 |
| }, |
| "lineStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "", |
| "properties": { |
| "color": { |
| "type": [ |
| "Color" |
| ], |
| "descriptionCN": "<p>刻度线的颜色，默认取 <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。</p>\n" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的不透明度。</p>\n", |
| "default": 1 |
| }, |
| "width": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的宽度。</p>\n<!-- Overwrite color -->", |
| "default": 1 |
| } |
| } |
| } |
| } |
| }, |
| "splitLine": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>坐标轴在 <a href=\"#grid3D\">grid3D</a> 的平面上的分隔线。</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示分隔线。默认数值轴显示，类目轴不显示。</p>\n", |
| "default": true |
| }, |
| "interval": { |
| "type": [ |
| "number", |
| "Function" |
| ], |
| "descriptionCN": "<p>坐标轴分隔线的显示间隔，在类目轴中有效。默认同 <a href=\"#.axisLabel.interval\">axisLabel.interval</a> 一样。</p>\n<p>默认会自动计算<code>interval</code>以保证较好的展示效果。</p>\n<p>可以设置成 0 强制显示所有标签。</p>\n<p>如果设置为 <code>1</code>，表示『隔一个标签显示一个标签』，如果值为 <code>2</code>，表示隔两个标签显示一个标签，以此类推。</p>\n<p>可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：</p>\n<pre><code class=\"lang-js\">(index:number, value: string) => boolean\n</code></pre>\n<p>第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 <code>false</code>。</p>\n", |
| "default": "'auto'", |
| "properties": { |
| "color": { |
| "type": [ |
| "Array", |
| "string" |
| ], |
| "descriptionCN": "<p>分隔线颜色，可以设置成单个颜色。</p>\n<p>也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色。</p>\n<p>示例</p>\n<pre><code>splitLine: {\n lineStyle: {\n // 使用深浅的间隔色\n color: ['#aaa', '#ddd']\n }\n}\n</code></pre>", |
| "default": "['#ccc']" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的不透明度。</p>\n", |
| "default": 1 |
| }, |
| "width": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的宽度。</p>\n<!-- overwrite color -->", |
| "default": 1 |
| } |
| } |
| } |
| } |
| }, |
| "splitArea": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>坐标轴在 <a href=\"#grid3D\">grid3D</a> 的平面上的分隔区域。</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示分隔区域。</p>\n", |
| "default": true |
| }, |
| "interval": { |
| "type": [ |
| "number", |
| "Function" |
| ], |
| "descriptionCN": "<p>坐标轴分隔区域的显示间隔，在类目轴中有效。默认同 <a href=\"#.axisLabel.interval\">axisLabel.interval</a> 一样。</p>\n<p>默认会自动计算<code>interval</code>以保证较好的展示效果。</p>\n<p>可以设置成 0 强制显示所有标签。</p>\n<p>如果设置为 <code>1</code>，表示『隔一个标签显示一个标签』，如果值为 <code>2</code>，表示隔两个标签显示一个标签，以此类推。</p>\n<p>可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：</p>\n<pre><code class=\"lang-js\">(index:number, value: string) => boolean\n</code></pre>\n<p>第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 <code>false</code>。</p>\n", |
| "default": "'auto'" |
| }, |
| "areaStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>分隔区域的样式设置。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "Array" |
| ], |
| "descriptionCN": "<p>分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。</p>\n", |
| "default": "['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']" |
| } |
| } |
| } |
| } |
| }, |
| "axisPointer": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>坐标轴指示线。</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示坐标轴指示线。</p>\n", |
| "default": true |
| }, |
| "lineStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "'rgba(0, 0, 0, 0.8)'" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的不透明度。</p>\n", |
| "default": 1 |
| }, |
| "width": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的宽度。</p>\n", |
| "default": 1 |
| } |
| } |
| }, |
| "label": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>指示线标签。</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示指示线标签。默认数值轴显示，类目轴不显示。</p>\n", |
| "default": true |
| }, |
| "formatter": { |
| "type": [ |
| "Function" |
| ], |
| "descriptionCN": "<p>标签格式器，函数第一个参数是当前坐标轴的数值，第二个参数是所有坐标轴的数值数组</p>\n<pre><code class=\"lang-js\">(value: number, valueAll: Array) => string\n</code></pre>\n" |
| }, |
| "margin": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>标签距离坐标轴的距离。同刻度标签一样，这个距离是三维空间而非屏幕像素。</p>\n" |
| }, |
| "textStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的颜色。</p>\n", |
| "default": "\"#fff\"" |
| }, |
| "borderWidth": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的描边宽度。</p>\n", |
| "default": 0 |
| }, |
| "borderColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的描边颜色。</p>\n", |
| "default": "#fff" |
| }, |
| "fontFamily": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的字体系列。</p>\n", |
| "default": "'sans-serif'" |
| }, |
| "fontSize": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的字体大小。</p>\n", |
| "default": 16 |
| }, |
| "fontWeight": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "normal" |
| } |
| } |
| } |
| } |
| } |
| } |
| } |
| } |
| }, |
| "yAxis3D": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>三维笛卡尔坐标系中的 x 轴。可以通过 <a href=\"#yAxis3D.grid3DIndex\">grid3DIndex</a> 索引所在的<a href=\"#grid3D\">三维笛卡尔坐标系</a>。</p>\n<p>在<code>yAxis3D</code>下设置的 <a href=\"#yAxis3D.axisLine\">axisLine</a>, <a href=\"#yAxis3D.axisTick\">axisTick</a>, <a href=\"#yAxis3D.axisLabel\">axisLabel</a>, <a href=\"#yAxis3D.splitLine\">splitLine</a>, <a href=\"#yAxis3D.splitArea\">splitArea</a>, <a href=\"#yAxis3D.axisPointer\">axisPointer</a> 会覆盖 <a href=\"#grid3D\">grid3D</a> 下的相应配置项。</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示 y 轴。</p>\n" |
| }, |
| "name": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>坐标轴名称。</p>\n", |
| "default": "'Y'" |
| }, |
| "grid3DIndex": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>坐标轴使用的 <a href=\"#grid3D\">grid3D</a> 组件的索引。默认使用第一个 <a href=\"#grid3D\">grid3D</a> 组件。</p>\n", |
| "default": 0 |
| }, |
| "nameTextStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>坐标轴名称的显示样式。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "Color" |
| ], |
| "descriptionCN": "<p>坐标轴名称的颜色，默认取 <a href=\"#yAxis3D.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。</p>\n" |
| }, |
| "borderWidth": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的描边宽度。</p>\n", |
| "default": 0 |
| }, |
| "borderColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的描边颜色。</p>\n", |
| "default": "#fff" |
| }, |
| "fontFamily": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的字体系列。</p>\n", |
| "default": "'sans-serif'" |
| }, |
| "fontSize": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的字体大小。</p>\n", |
| "default": 16 |
| }, |
| "fontWeight": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "normal" |
| } |
| } |
| }, |
| "nameGap": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>坐标轴名称与轴线之间的距离，注意是三维空间的距离而非屏幕像素值。</p>\n", |
| "default": 20 |
| }, |
| "type": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "value" |
| }, |
| "min": { |
| "type": [ |
| "number", |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": null |
| }, |
| "max": { |
| "type": [ |
| "number", |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": null |
| }, |
| "scale": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<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", |
| "default": false |
| }, |
| "splitNumber": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。</p>\n<p>在类目轴中无效。</p>\n", |
| "default": 5 |
| }, |
| "minInterval": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": 0 |
| }, |
| "interval": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>对数轴的底数，只在对数轴中（<a href=\"#yAxis3D.type\">type</a>: 'log'）有效。</p>\n", |
| "default": 10 |
| }, |
| "data": { |
| "type": [ |
| "Array" |
| ], |
| "descriptionCN": "<p>类目数据，在类目轴（<a href=\"#yAxis3D.type\">type</a>: 'category'）中有效。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">// 所有类目名称列表\ndata: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']\n// 每一项也可以是具体的配置项，此时取配置项中的 `value` 为类目名\ndata: [{\n value: '周一',\n // 突出周一\n textStyle: {\n fontSize: 20,\n color: 'red'\n }\n}, '周二', '周三', '周四', '周五', '周六', '周日']\n</code></pre>\n", |
| "items": { |
| "type": "Object", |
| "properties": { |
| "value": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>单个类目名称。</p>\n" |
| }, |
| "textStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>类目标签的文字样式。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的颜色。</p>\n", |
| "default": "\"#fff\"" |
| }, |
| "borderWidth": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的描边宽度。</p>\n", |
| "default": 0 |
| }, |
| "borderColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的描边颜色。</p>\n", |
| "default": "#fff" |
| }, |
| "fontFamily": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的字体系列。</p>\n", |
| "default": "'sans-serif'" |
| }, |
| "fontSize": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的字体大小。</p>\n", |
| "default": 12 |
| }, |
| "fontWeight": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "normal" |
| } |
| } |
| } |
| } |
| } |
| }, |
| "axisLine": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>坐标轴轴线相关设置。</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示坐标轴轴线。</p>\n", |
| "default": true |
| }, |
| "interval": { |
| "type": [ |
| "number", |
| "Function" |
| ], |
| "descriptionCN": "<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", |
| "default": "'auto'" |
| }, |
| "lineStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "'#333'" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的不透明度。</p>\n", |
| "default": 1 |
| }, |
| "width": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的宽度。</p>\n", |
| "default": 2 |
| } |
| } |
| } |
| } |
| }, |
| "axisLabel": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>坐标轴刻度标签的相关设置。</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示刻度标签。</p>\n", |
| "default": true |
| }, |
| "margin": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>刻度标签与轴线之间的距离。</p>\n<p><strong>注意：</strong> 这个距离是三维空间而非屏幕空间的。</p>\n", |
| "default": 8 |
| }, |
| "interval": { |
| "type": [ |
| "number", |
| "Function" |
| ], |
| "descriptionCN": "<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", |
| "default": "'auto'" |
| }, |
| "formatter": { |
| "type": [ |
| "string", |
| "Function" |
| ], |
| "descriptionCN": "", |
| "default": null |
| }, |
| "textStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "", |
| "properties": { |
| "color": { |
| "type": [ |
| "Color", |
| "Function" |
| ], |
| "descriptionCN": "<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": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的描边宽度。</p>\n", |
| "default": 0 |
| }, |
| "borderColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的描边颜色。</p>\n", |
| "default": "#fff" |
| }, |
| "fontFamily": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的字体系列。</p>\n", |
| "default": "'sans-serif'" |
| }, |
| "fontSize": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的字体大小。</p>\n", |
| "default": 12 |
| }, |
| "fontWeight": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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 -->", |
| "default": "normal" |
| } |
| } |
| } |
| } |
| }, |
| "axisTick": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>坐标轴刻度相关设置。</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示坐标轴刻度。</p>\n", |
| "default": true |
| }, |
| "interval": { |
| "type": [ |
| "number", |
| "Function" |
| ], |
| "descriptionCN": "<p>坐标轴刻度标签的显示间隔，在类目轴中有效。默认同 <a href=\"#.axisLabel.interval\">axisLabel.interval</a> 一样。</p>\n<p>默认会自动计算<code>interval</code>以保证较好的展示效果。</p>\n<p>可以设置成 0 强制显示所有标签。</p>\n<p>如果设置为 <code>1</code>，表示『隔一个标签显示一个标签』，如果值为 <code>2</code>，表示隔两个标签显示一个标签，以此类推。</p>\n<p>可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：</p>\n<pre><code class=\"lang-js\">(index:number, value: string) => boolean\n</code></pre>\n<p>第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 <code>false</code>。</p>\n", |
| "default": "'auto'" |
| }, |
| "length": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>坐标轴刻度的长度。</p>\n", |
| "default": 5 |
| }, |
| "lineStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "", |
| "properties": { |
| "color": { |
| "type": [ |
| "Color" |
| ], |
| "descriptionCN": "<p>刻度线的颜色，默认取 <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。</p>\n" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的不透明度。</p>\n", |
| "default": 1 |
| }, |
| "width": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的宽度。</p>\n<!-- Overwrite color -->", |
| "default": 1 |
| } |
| } |
| } |
| } |
| }, |
| "splitLine": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>坐标轴在 <a href=\"#grid3D\">grid3D</a> 的平面上的分隔线。</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示分隔线。默认数值轴显示，类目轴不显示。</p>\n", |
| "default": true |
| }, |
| "interval": { |
| "type": [ |
| "number", |
| "Function" |
| ], |
| "descriptionCN": "<p>坐标轴分隔线的显示间隔，在类目轴中有效。默认同 <a href=\"#.axisLabel.interval\">axisLabel.interval</a> 一样。</p>\n<p>默认会自动计算<code>interval</code>以保证较好的展示效果。</p>\n<p>可以设置成 0 强制显示所有标签。</p>\n<p>如果设置为 <code>1</code>，表示『隔一个标签显示一个标签』，如果值为 <code>2</code>，表示隔两个标签显示一个标签，以此类推。</p>\n<p>可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：</p>\n<pre><code class=\"lang-js\">(index:number, value: string) => boolean\n</code></pre>\n<p>第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 <code>false</code>。</p>\n", |
| "default": "'auto'", |
| "properties": { |
| "color": { |
| "type": [ |
| "Array", |
| "string" |
| ], |
| "descriptionCN": "<p>分隔线颜色，可以设置成单个颜色。</p>\n<p>也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色。</p>\n<p>示例</p>\n<pre><code>splitLine: {\n lineStyle: {\n // 使用深浅的间隔色\n color: ['#aaa', '#ddd']\n }\n}\n</code></pre>", |
| "default": "['#ccc']" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的不透明度。</p>\n", |
| "default": 1 |
| }, |
| "width": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的宽度。</p>\n<!-- overwrite color -->", |
| "default": 1 |
| } |
| } |
| } |
| } |
| }, |
| "splitArea": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>坐标轴在 <a href=\"#grid3D\">grid3D</a> 的平面上的分隔区域。</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示分隔区域。</p>\n", |
| "default": true |
| }, |
| "interval": { |
| "type": [ |
| "number", |
| "Function" |
| ], |
| "descriptionCN": "<p>坐标轴分隔区域的显示间隔，在类目轴中有效。默认同 <a href=\"#.axisLabel.interval\">axisLabel.interval</a> 一样。</p>\n<p>默认会自动计算<code>interval</code>以保证较好的展示效果。</p>\n<p>可以设置成 0 强制显示所有标签。</p>\n<p>如果设置为 <code>1</code>，表示『隔一个标签显示一个标签』，如果值为 <code>2</code>，表示隔两个标签显示一个标签，以此类推。</p>\n<p>可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：</p>\n<pre><code class=\"lang-js\">(index:number, value: string) => boolean\n</code></pre>\n<p>第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 <code>false</code>。</p>\n", |
| "default": "'auto'" |
| }, |
| "areaStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>分隔区域的样式设置。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "Array" |
| ], |
| "descriptionCN": "<p>分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。</p>\n", |
| "default": "['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']" |
| } |
| } |
| } |
| } |
| }, |
| "axisPointer": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>坐标轴指示线。</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示坐标轴指示线。</p>\n", |
| "default": true |
| }, |
| "lineStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "'rgba(0, 0, 0, 0.8)'" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的不透明度。</p>\n", |
| "default": 1 |
| }, |
| "width": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的宽度。</p>\n", |
| "default": 1 |
| } |
| } |
| }, |
| "label": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>指示线标签。</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示指示线标签。默认数值轴显示，类目轴不显示。</p>\n", |
| "default": true |
| }, |
| "formatter": { |
| "type": [ |
| "Function" |
| ], |
| "descriptionCN": "<p>标签格式器，函数第一个参数是当前坐标轴的数值，第二个参数是所有坐标轴的数值数组</p>\n<pre><code class=\"lang-js\">(value: number, valueAll: Array) => string\n</code></pre>\n" |
| }, |
| "margin": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>标签距离坐标轴的距离。同刻度标签一样，这个距离是三维空间而非屏幕像素。</p>\n" |
| }, |
| "textStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的颜色。</p>\n", |
| "default": "\"#fff\"" |
| }, |
| "borderWidth": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的描边宽度。</p>\n", |
| "default": 0 |
| }, |
| "borderColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的描边颜色。</p>\n", |
| "default": "#fff" |
| }, |
| "fontFamily": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的字体系列。</p>\n", |
| "default": "'sans-serif'" |
| }, |
| "fontSize": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的字体大小。</p>\n", |
| "default": 16 |
| }, |
| "fontWeight": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "normal" |
| } |
| } |
| } |
| } |
| } |
| } |
| } |
| } |
| }, |
| "zAxis3D": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>三维笛卡尔坐标系中的 x 轴。可以通过 <a href=\"#zAxis3D.grid3DIndex\">grid3DIndex</a> 索引所在的<a href=\"#grid3D\">三维笛卡尔坐标系</a>。</p>\n<p>在<code>zAxis3D</code>下设置的 <a href=\"#zAxis3D.axisLine\">axisLine</a>, <a href=\"#zAxis3D.axisTick\">axisTick</a>, <a href=\"#zAxis3D.axisLabel\">axisLabel</a>, <a href=\"#zAxis3D.splitLine\">splitLine</a>, <a href=\"#zAxis3D.splitArea\">splitArea</a>, <a href=\"#zAxis3D.axisPointer\">axisPointer</a> 会覆盖 <a href=\"#grid3D\">grid3D</a> 下的相应配置项。</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示 z 轴。</p>\n" |
| }, |
| "name": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>坐标轴名称。</p>\n", |
| "default": "'Z'" |
| }, |
| "grid3DIndex": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>坐标轴使用的 <a href=\"#grid3D\">grid3D</a> 组件的索引。默认使用第一个 <a href=\"#grid3D\">grid3D</a> 组件。</p>\n", |
| "default": 0 |
| }, |
| "nameTextStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>坐标轴名称的显示样式。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "Color" |
| ], |
| "descriptionCN": "<p>坐标轴名称的颜色，默认取 <a href=\"#zAxis3D.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。</p>\n" |
| }, |
| "borderWidth": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的描边宽度。</p>\n", |
| "default": 0 |
| }, |
| "borderColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的描边颜色。</p>\n", |
| "default": "#fff" |
| }, |
| "fontFamily": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的字体系列。</p>\n", |
| "default": "'sans-serif'" |
| }, |
| "fontSize": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的字体大小。</p>\n", |
| "default": 16 |
| }, |
| "fontWeight": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "normal" |
| } |
| } |
| }, |
| "nameGap": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>坐标轴名称与轴线之间的距离，注意是三维空间的距离而非屏幕像素值。</p>\n", |
| "default": 20 |
| }, |
| "type": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "value" |
| }, |
| "min": { |
| "type": [ |
| "number", |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": null |
| }, |
| "max": { |
| "type": [ |
| "number", |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": null |
| }, |
| "scale": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<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", |
| "default": false |
| }, |
| "splitNumber": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。</p>\n<p>在类目轴中无效。</p>\n", |
| "default": 5 |
| }, |
| "minInterval": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": 0 |
| }, |
| "interval": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>对数轴的底数，只在对数轴中（<a href=\"#zAxis3D.type\">type</a>: 'log'）有效。</p>\n", |
| "default": 10 |
| }, |
| "data": { |
| "type": [ |
| "Array" |
| ], |
| "descriptionCN": "<p>类目数据，在类目轴（<a href=\"#zAxis3D.type\">type</a>: 'category'）中有效。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">// 所有类目名称列表\ndata: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']\n// 每一项也可以是具体的配置项，此时取配置项中的 `value` 为类目名\ndata: [{\n value: '周一',\n // 突出周一\n textStyle: {\n fontSize: 20,\n color: 'red'\n }\n}, '周二', '周三', '周四', '周五', '周六', '周日']\n</code></pre>\n", |
| "items": { |
| "type": "Object", |
| "properties": { |
| "value": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>单个类目名称。</p>\n" |
| }, |
| "textStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>类目标签的文字样式。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的颜色。</p>\n", |
| "default": "\"#fff\"" |
| }, |
| "borderWidth": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的描边宽度。</p>\n", |
| "default": 0 |
| }, |
| "borderColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的描边颜色。</p>\n", |
| "default": "#fff" |
| }, |
| "fontFamily": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的字体系列。</p>\n", |
| "default": "'sans-serif'" |
| }, |
| "fontSize": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的字体大小。</p>\n", |
| "default": 12 |
| }, |
| "fontWeight": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "normal" |
| } |
| } |
| } |
| } |
| } |
| }, |
| "axisLine": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>坐标轴轴线相关设置。</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示坐标轴轴线。</p>\n", |
| "default": true |
| }, |
| "interval": { |
| "type": [ |
| "number", |
| "Function" |
| ], |
| "descriptionCN": "<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", |
| "default": "'auto'" |
| }, |
| "lineStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "'#333'" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的不透明度。</p>\n", |
| "default": 1 |
| }, |
| "width": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的宽度。</p>\n", |
| "default": 2 |
| } |
| } |
| } |
| } |
| }, |
| "axisLabel": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>坐标轴刻度标签的相关设置。</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示刻度标签。</p>\n", |
| "default": true |
| }, |
| "margin": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>刻度标签与轴线之间的距离。</p>\n<p><strong>注意：</strong> 这个距离是三维空间而非屏幕空间的。</p>\n", |
| "default": 8 |
| }, |
| "interval": { |
| "type": [ |
| "number", |
| "Function" |
| ], |
| "descriptionCN": "<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", |
| "default": "'auto'" |
| }, |
| "formatter": { |
| "type": [ |
| "string", |
| "Function" |
| ], |
| "descriptionCN": "", |
| "default": null |
| }, |
| "textStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "", |
| "properties": { |
| "color": { |
| "type": [ |
| "Color", |
| "Function" |
| ], |
| "descriptionCN": "<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": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的描边宽度。</p>\n", |
| "default": 0 |
| }, |
| "borderColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的描边颜色。</p>\n", |
| "default": "#fff" |
| }, |
| "fontFamily": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的字体系列。</p>\n", |
| "default": "'sans-serif'" |
| }, |
| "fontSize": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的字体大小。</p>\n", |
| "default": 12 |
| }, |
| "fontWeight": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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 -->", |
| "default": "normal" |
| } |
| } |
| } |
| } |
| }, |
| "axisTick": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>坐标轴刻度相关设置。</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示坐标轴刻度。</p>\n", |
| "default": true |
| }, |
| "interval": { |
| "type": [ |
| "number", |
| "Function" |
| ], |
| "descriptionCN": "<p>坐标轴刻度标签的显示间隔，在类目轴中有效。默认同 <a href=\"#.axisLabel.interval\">axisLabel.interval</a> 一样。</p>\n<p>默认会自动计算<code>interval</code>以保证较好的展示效果。</p>\n<p>可以设置成 0 强制显示所有标签。</p>\n<p>如果设置为 <code>1</code>，表示『隔一个标签显示一个标签』，如果值为 <code>2</code>，表示隔两个标签显示一个标签，以此类推。</p>\n<p>可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：</p>\n<pre><code class=\"lang-js\">(index:number, value: string) => boolean\n</code></pre>\n<p>第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 <code>false</code>。</p>\n", |
| "default": "'auto'" |
| }, |
| "length": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>坐标轴刻度的长度。</p>\n", |
| "default": 5 |
| }, |
| "lineStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "", |
| "properties": { |
| "color": { |
| "type": [ |
| "Color" |
| ], |
| "descriptionCN": "<p>刻度线的颜色，默认取 <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。</p>\n" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的不透明度。</p>\n", |
| "default": 1 |
| }, |
| "width": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的宽度。</p>\n<!-- Overwrite color -->", |
| "default": 1 |
| } |
| } |
| } |
| } |
| }, |
| "splitLine": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>坐标轴在 <a href=\"#grid3D\">grid3D</a> 的平面上的分隔线。</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示分隔线。默认数值轴显示，类目轴不显示。</p>\n", |
| "default": true |
| }, |
| "interval": { |
| "type": [ |
| "number", |
| "Function" |
| ], |
| "descriptionCN": "<p>坐标轴分隔线的显示间隔，在类目轴中有效。默认同 <a href=\"#.axisLabel.interval\">axisLabel.interval</a> 一样。</p>\n<p>默认会自动计算<code>interval</code>以保证较好的展示效果。</p>\n<p>可以设置成 0 强制显示所有标签。</p>\n<p>如果设置为 <code>1</code>，表示『隔一个标签显示一个标签』，如果值为 <code>2</code>，表示隔两个标签显示一个标签，以此类推。</p>\n<p>可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：</p>\n<pre><code class=\"lang-js\">(index:number, value: string) => boolean\n</code></pre>\n<p>第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 <code>false</code>。</p>\n", |
| "default": "'auto'", |
| "properties": { |
| "color": { |
| "type": [ |
| "Array", |
| "string" |
| ], |
| "descriptionCN": "<p>分隔线颜色，可以设置成单个颜色。</p>\n<p>也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色。</p>\n<p>示例</p>\n<pre><code>splitLine: {\n lineStyle: {\n // 使用深浅的间隔色\n color: ['#aaa', '#ddd']\n }\n}\n</code></pre>", |
| "default": "['#ccc']" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的不透明度。</p>\n", |
| "default": 1 |
| }, |
| "width": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的宽度。</p>\n<!-- overwrite color -->", |
| "default": 1 |
| } |
| } |
| } |
| } |
| }, |
| "splitArea": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>坐标轴在 <a href=\"#grid3D\">grid3D</a> 的平面上的分隔区域。</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示分隔区域。</p>\n", |
| "default": true |
| }, |
| "interval": { |
| "type": [ |
| "number", |
| "Function" |
| ], |
| "descriptionCN": "<p>坐标轴分隔区域的显示间隔，在类目轴中有效。默认同 <a href=\"#.axisLabel.interval\">axisLabel.interval</a> 一样。</p>\n<p>默认会自动计算<code>interval</code>以保证较好的展示效果。</p>\n<p>可以设置成 0 强制显示所有标签。</p>\n<p>如果设置为 <code>1</code>，表示『隔一个标签显示一个标签』，如果值为 <code>2</code>，表示隔两个标签显示一个标签，以此类推。</p>\n<p>可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：</p>\n<pre><code class=\"lang-js\">(index:number, value: string) => boolean\n</code></pre>\n<p>第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 <code>false</code>。</p>\n", |
| "default": "'auto'" |
| }, |
| "areaStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>分隔区域的样式设置。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "Array" |
| ], |
| "descriptionCN": "<p>分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。</p>\n", |
| "default": "['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']" |
| } |
| } |
| } |
| } |
| }, |
| "axisPointer": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>坐标轴指示线。</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示坐标轴指示线。</p>\n", |
| "default": true |
| }, |
| "lineStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "'rgba(0, 0, 0, 0.8)'" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的不透明度。</p>\n", |
| "default": 1 |
| }, |
| "width": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的宽度。</p>\n", |
| "default": 1 |
| } |
| } |
| }, |
| "label": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>指示线标签。</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示指示线标签。默认数值轴显示，类目轴不显示。</p>\n", |
| "default": true |
| }, |
| "formatter": { |
| "type": [ |
| "Function" |
| ], |
| "descriptionCN": "<p>标签格式器，函数第一个参数是当前坐标轴的数值，第二个参数是所有坐标轴的数值数组</p>\n<pre><code class=\"lang-js\">(value: number, valueAll: Array) => string\n</code></pre>\n" |
| }, |
| "margin": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>标签距离坐标轴的距离。同刻度标签一样，这个距离是三维空间而非屏幕像素。</p>\n" |
| }, |
| "textStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的颜色。</p>\n", |
| "default": "\"#fff\"" |
| }, |
| "borderWidth": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的描边宽度。</p>\n", |
| "default": 0 |
| }, |
| "borderColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的描边颜色。</p>\n", |
| "default": "#fff" |
| }, |
| "fontFamily": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的字体系列。</p>\n", |
| "default": "'sans-serif'" |
| }, |
| "fontSize": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的字体大小。</p>\n", |
| "default": 16 |
| }, |
| "fontWeight": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "normal" |
| } |
| } |
| } |
| } |
| } |
| } |
| } |
| } |
| }, |
| "series": { |
| "type": "Array", |
| "items": { |
| "anyOf": [ |
| { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>三维散点/气泡图。可以用于<a href=\"#grid3D\">三维直角坐标系 grid3D</a>，<a href=\"#geo3D\">三维地理坐标系 geo3D</a>，<a href=\"#globe\">地球 globe</a>，通过大小，颜色等属性展示数据。</p>\n<p>下图示一个三维的 simplex noise 用气泡图绘制出来的例子。</p>\n<p><img width=\"500\" height=\"auto\" src=\"documents/asset/gl/img/scatter3D.png\"></p>\n", |
| "properties": { |
| "type": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "", |
| "default": "'scatter3D'" |
| }, |
| "name": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>使用的 <a href=\"#grid3D\">grid3D</a> 组件的索引。默认使用第一个 <a href=\"#grid3D\">grid3D</a> 组件。</p>\n", |
| "default": 0 |
| }, |
| "geo3DIndex": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>坐标轴使用的 <a href=\"#geo3D\">geo3D</a> 组件的索引。默认使用第一个 <a href=\"#geo3D\">geo3D</a> 组件。</p>\n", |
| "default": 0 |
| }, |
| "globeIndex": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>坐标轴使用的 <a href=\"#globe\">globe</a> 组件的索引。默认使用第一个 <a href=\"#globe\">globe</a> 组件。</p>\n", |
| "default": 0 |
| }, |
| "symbol": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "'circle'" |
| }, |
| "symbolSize": { |
| "type": [ |
| "number", |
| "Array", |
| "Function" |
| ], |
| "descriptionCN": "<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", |
| "default": 10 |
| }, |
| "distanceToGlobe": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>距离地球表面的距离，在 <a href=\"#series-scatter3D.coordinateSystem\">coordinateSystem</a> 为<code>'globe'</code>时有效。</p>\n", |
| "default": 1.5 |
| }, |
| "distanceToGeo3D": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>距离 geo3D 的距离，在 <a href=\"#series-scatter3D.coordinateSystem\">coordinateSystem</a> 为<code>'globe'</code>时有效。</p>\n", |
| "default": 1.5 |
| }, |
| "itemStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>散点图颜色描边等样式。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "自适应" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>图形的不透明度。</p>\n", |
| "default": 0.8 |
| }, |
| "borderWidth": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>图形描边宽度。</p>\n", |
| "default": 0 |
| }, |
| "borderColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>图形描边颜色。</p>\n", |
| "default": "'#fff'" |
| } |
| } |
| }, |
| "label": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>标签样式</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示标签。</p>\n", |
| "default": false |
| }, |
| "distance": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离。</p>\n", |
| "default": 5 |
| }, |
| "position": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "right" |
| }, |
| "formatter": { |
| "type": [ |
| "Function", |
| "string" |
| ], |
| "descriptionCN": "<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<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值\n value: number|Array,\n // 数据图形的颜色\n color: string,\n\n}\n</code></pre>\n" |
| }, |
| "textStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>标签的字体样式。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的颜色。</p>\n", |
| "default": "#000" |
| }, |
| "borderWidth": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的描边宽度。</p>\n", |
| "default": 1 |
| }, |
| "borderColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的描边颜色。</p>\n", |
| "default": "#fff" |
| }, |
| "fontFamily": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的字体系列。</p>\n", |
| "default": "'sans-serif'" |
| }, |
| "fontSize": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的字体大小。</p>\n", |
| "default": 14 |
| }, |
| "fontWeight": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "normal" |
| } |
| } |
| } |
| } |
| }, |
| "emphasis": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>图形和标签高亮的样式。</p>\n", |
| "properties": { |
| "itemStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "自适应" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>图形的不透明度。</p>\n", |
| "default": 0.8 |
| }, |
| "borderWidth": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>图形描边宽度。</p>\n", |
| "default": 0 |
| }, |
| "borderColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>图形描边颜色。</p>\n", |
| "default": "'#fff'" |
| } |
| } |
| }, |
| "label": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示标签。</p>\n", |
| "default": false |
| }, |
| "distance": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离。</p>\n", |
| "default": 5 |
| }, |
| "position": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "right" |
| }, |
| "formatter": { |
| "type": [ |
| "Function", |
| "string" |
| ], |
| "descriptionCN": "<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<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值\n value: number|Array,\n // 数据图形的颜色\n color: string,\n\n}\n</code></pre>\n" |
| }, |
| "textStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>标签的字体样式。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的颜色。</p>\n", |
| "default": "#000" |
| }, |
| "borderWidth": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的描边宽度。</p>\n", |
| "default": 1 |
| }, |
| "borderColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的描边颜色。</p>\n", |
| "default": "#fff" |
| }, |
| "fontFamily": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的字体系列。</p>\n", |
| "default": "'sans-serif'" |
| }, |
| "fontSize": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的字体大小。</p>\n", |
| "default": 14 |
| }, |
| "fontWeight": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "normal" |
| } |
| } |
| } |
| } |
| } |
| } |
| }, |
| "data": { |
| "type": [ |
| "Array" |
| ], |
| "descriptionCN": "<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": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>混合模式，目前支持<code>'source-over'</code>，<code>'lighter'</code>，默认使用的<code>'source-over'</code>是通过 alpha 混合，而<code>'lighter'</code>是叠加模式，该模式可以让数据集中的区域因为叠加而产生高亮的效果。</p>\n", |
| "default": "'source-over'" |
| }, |
| "zlevel": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": -10 |
| }, |
| "silent": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。</p>\n", |
| "default": false |
| }, |
| "animation": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否开启动画。</p>\n", |
| "default": true |
| }, |
| "animationDurationUpdate": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>过渡动画的时长。</p>\n", |
| "default": 500 |
| }, |
| "animationEasingUpdate": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>过渡动画的缓动效果。</p>\n", |
| "default": "cubicOut" |
| } |
| } |
| }, |
| { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>三维柱状图。可以用于<a href=\"#grid3D\">三维直角坐标系 grid3D</a>，<a href=\"#geo3D\">三维地理坐标系 geo3D</a>，<a href=\"#globe\">地球 globe</a>，通过高度，颜色等属性展示数据。</p>\n<p>下图就是在 <a href=\"#geo3D\">geo3D</a> 上通过三维柱状图展示世界的人口密度数据。</p>\n<p><img width=\"700\" height=\"auto\" src=\"documents/asset/gl/img/geo-bar3D.jpg\"></p>\n", |
| "properties": { |
| "type": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "", |
| "default": "'bar3D'" |
| }, |
| "name": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "cartesian3D" |
| }, |
| "grid3DIndex": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>使用的 <a href=\"#grid3D\">grid3D</a> 组件的索引。默认使用第一个 <a href=\"#grid3D\">grid3D</a> 组件。</p>\n", |
| "default": 0 |
| }, |
| "geo3DIndex": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>坐标轴使用的 <a href=\"#geo3D\">geo3D</a> 组件的索引。默认使用第一个 <a href=\"#geo3D\">geo3D</a> 组件。</p>\n", |
| "default": 0 |
| }, |
| "globeIndex": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>坐标轴使用的 <a href=\"#globe\">globe</a> 组件的索引。默认使用第一个 <a href=\"#globe\">globe</a> 组件。</p>\n", |
| "default": 0 |
| }, |
| "bevelSize": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>柱子的倒角尺寸，默认为 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", |
| "default": 0 |
| }, |
| "bevelSmoothness": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>柱子倒角的光滑/圆润度，数值越大越光滑/圆润。</p>\n", |
| "default": 2 |
| }, |
| "minHeight": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>最小柱子高度。</p>\n<p>在柱状图不在笛卡尔坐标系上的时候，需要通过<code>minHeight</code>和<code>maxHeight</code>指明柱状图数据映射的高度范围。</p>\n", |
| "default": 0 |
| }, |
| "maxHeight": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>最大柱子高度。</p>\n", |
| "default": 100 |
| }, |
| "itemStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>柱子的样式，包括颜色和不透明度。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "string", |
| "Function" |
| ], |
| "descriptionCN": "<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", |
| "default": "自适应" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>图形的不透明度。</p>\n", |
| "default": 1 |
| } |
| } |
| }, |
| "label": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>柱子的标签配置。</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示标签。</p>\n", |
| "default": false |
| }, |
| "distance": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离。</p>\n", |
| "default": 2 |
| }, |
| "formatter": { |
| "type": [ |
| "Function", |
| "string" |
| ], |
| "descriptionCN": "<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<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值\n value: number|Array,\n // 数据图形的颜色\n color: string,\n\n}\n</code></pre>\n" |
| }, |
| "textStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>标签的字体样式。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的颜色。</p>\n", |
| "default": "\"#fff\"" |
| }, |
| "borderWidth": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的描边宽度。</p>\n", |
| "default": 1 |
| }, |
| "borderColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的描边颜色。</p>\n", |
| "default": "#fff" |
| }, |
| "fontFamily": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的字体系列。</p>\n", |
| "default": "'sans-serif'" |
| }, |
| "fontSize": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的字体大小。</p>\n", |
| "default": 20 |
| }, |
| "fontWeight": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "normal" |
| } |
| } |
| } |
| } |
| }, |
| "emphasis": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>柱子高亮状态的标签和样式配置。</p>\n", |
| "properties": { |
| "itemStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "自适应" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>图形的不透明度。</p>\n", |
| "default": 1 |
| } |
| } |
| }, |
| "label": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示标签。</p>\n", |
| "default": true |
| }, |
| "distance": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离。</p>\n", |
| "default": 2 |
| }, |
| "formatter": { |
| "type": [ |
| "Function", |
| "string" |
| ], |
| "descriptionCN": "<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<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值\n value: number|Array,\n // 数据图形的颜色\n color: string,\n\n}\n</code></pre>\n" |
| }, |
| "textStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>标签的字体样式。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的颜色。</p>\n", |
| "default": "\"#fff\"" |
| }, |
| "borderWidth": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的描边宽度。</p>\n", |
| "default": 1 |
| }, |
| "borderColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的描边颜色。</p>\n", |
| "default": "#fff" |
| }, |
| "fontFamily": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的字体系列。</p>\n", |
| "default": "'sans-serif'" |
| }, |
| "fontSize": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的字体大小。</p>\n", |
| "default": 20 |
| }, |
| "fontWeight": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "normal" |
| } |
| } |
| } |
| } |
| } |
| } |
| }, |
| "data": { |
| "type": [ |
| "Array" |
| ], |
| "descriptionCN": "<p>三维柱状图数据数组。数组每一项为一个数据。通常这个数据是用数组存储数据的每个属性/维度。例如下面：</p>\n<pre><code class=\"lang-js\">data: [\n [[12, 14, 10], [34, 50, 15], [56, 30, 20], [10, 15, 12], [23, 10, 14]]\n]\n</code></pre>\n<p>对于数组中的每一项：</p>\n<ol>\n<li>在 <a href=\"#grid3D\">grid3D</a> 中，每一项的前三个值分别是<code>x</code>, <code>y</code>, <code>z</code>。</li>\n<li>在 <a href=\"#geo3D\">geo3D</a> 以及 <a href=\"globe\" target=\"_blank\">globe</a> 中，每一项的前两个值分别是经纬度 <code>lng</code>, <code>lat</code>，第三个值表示数值大小，例如人口的大小。这个值会被映射到 <a href=\"#series-bar3D.minHeight\">minHeight</a> ~ <a href=\"#series-bar3D.maxHeight\">maxHeight</a> 的范围。</li>\n</ol>\n<p>除了默认给坐标系使用的三个值，每一项还可以加入任意多个值，用于给 <a href=\"#visualMap\">visualMap</a> 组件映射到颜色等其它图形属性。</p>\n<p>有些时候我们需要指定每个数据项的名称，这时候需要每个项为一个对象：</p>\n<pre><code class=\"lang-js\">[{\n // 数据项的名称\n name: '数据1',\n // 数据项值\n value: [12, 14, 10]\n}, {\n name: '数据2',\n value: [34, 50, 15]\n}]\n</code></pre>\n<p>需要对个别内容指定进行个性化定义时：</p>\n<pre><code class=\"lang-js\">[{\n name: '数据1',\n value: [12, 14, 10]\n}, {\n // 数据项名称\n name: '数据2',\n value : [34, 50, 15],\n //自定义特殊itemStyle，仅对该item有效\n itemStyle:{}\n}]\n</code></pre>\n", |
| "items": { |
| "type": "Object", |
| "properties": { |
| "name": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>数据项名称。</p>\n" |
| }, |
| "value": { |
| "type": [ |
| "Array" |
| ], |
| "descriptionCN": "<p>数据项值。</p>\n" |
| }, |
| "itemStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>单个数据项的样式设置。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "自适应" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>图形的不透明度。</p>\n", |
| "default": 1 |
| } |
| } |
| }, |
| "label": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>单个数据项的标签设置。</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示标签。</p>\n", |
| "default": false |
| }, |
| "distance": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离。</p>\n", |
| "default": 2 |
| }, |
| "formatter": { |
| "type": [ |
| "Function", |
| "string" |
| ], |
| "descriptionCN": "<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<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值\n value: number|Array,\n // 数据图形的颜色\n color: string,\n\n}\n</code></pre>\n" |
| }, |
| "textStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>标签的字体样式。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的颜色。</p>\n", |
| "default": "\"#fff\"" |
| }, |
| "borderWidth": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的描边宽度。</p>\n", |
| "default": 1 |
| }, |
| "borderColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的描边颜色。</p>\n", |
| "default": "#fff" |
| }, |
| "fontFamily": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的字体系列。</p>\n", |
| "default": "'sans-serif'" |
| }, |
| "fontSize": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的字体大小。</p>\n", |
| "default": 20 |
| }, |
| "fontWeight": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "normal" |
| } |
| } |
| } |
| } |
| }, |
| "emphasis": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>单个数据项高亮状态的标签和样式配置。</p>\n", |
| "properties": { |
| "itemStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "自适应" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>图形的不透明度。</p>\n", |
| "default": 1 |
| } |
| } |
| }, |
| "label": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示标签。</p>\n", |
| "default": true |
| }, |
| "distance": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离。</p>\n", |
| "default": 2 |
| }, |
| "formatter": { |
| "type": [ |
| "Function", |
| "string" |
| ], |
| "descriptionCN": "<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<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值\n value: number|Array,\n // 数据图形的颜色\n color: string,\n\n}\n</code></pre>\n" |
| }, |
| "textStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>标签的字体样式。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的颜色。</p>\n", |
| "default": "\"#fff\"" |
| }, |
| "borderWidth": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的描边宽度。</p>\n", |
| "default": 1 |
| }, |
| "borderColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的描边颜色。</p>\n", |
| "default": "#fff" |
| }, |
| "fontFamily": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的字体系列。</p>\n", |
| "default": "'sans-serif'" |
| }, |
| "fontSize": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的字体大小。</p>\n", |
| "default": 20 |
| }, |
| "fontWeight": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "normal" |
| } |
| } |
| } |
| } |
| } |
| } |
| } |
| } |
| } |
| }, |
| "shading": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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> 使用可以让展示的画面效果和质感有质的提升。</p>\n</li>\n</ul>\n" |
| }, |
| "realisticMaterial": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>真实感材质相关的配置项，在 <a href=\"#series-bar3D.shading\">shading</a> 为<code>'realistic'</code>时有效。</p>\n", |
| "properties": { |
| "roughness": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": 0.5 |
| }, |
| "metalness": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": 0 |
| } |
| } |
| }, |
| "zlevel": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": -10 |
| }, |
| "silent": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。</p>\n", |
| "default": false |
| }, |
| "animation": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否开启动画。</p>\n", |
| "default": true |
| }, |
| "animationDurationUpdate": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>过渡动画的时长。</p>\n", |
| "default": 500 |
| }, |
| "animationEasingUpdate": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>过渡动画的缓动效果。</p>\n", |
| "default": "cubicOut" |
| } |
| } |
| }, |
| { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>三维折线图。可以用于<a href=\"#grid3D\">三维直角坐标系 grid3D</a>。</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/gl/img/line3D.png\"></p>\n", |
| "properties": { |
| "type": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "", |
| "default": "'line3D'" |
| }, |
| "name": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "cartesian3D" |
| }, |
| "grid3DIndex": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>使用的 <a href=\"#grid3D\">grid3D</a> 组件的索引。默认使用第一个 <a href=\"#grid3D\">grid3D</a> 组件。</p>\n", |
| "default": 0 |
| }, |
| "lineStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>线条样式。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "自适应" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的不透明度。</p>\n", |
| "default": 1 |
| }, |
| "width": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的宽度。</p>\n", |
| "default": 2 |
| }, |
| "lineStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "自适应" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的不透明度。</p>\n", |
| "default": 1 |
| }, |
| "width": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的宽度。</p>\n", |
| "default": 2 |
| } |
| } |
| } |
| } |
| }, |
| "data": { |
| "type": [ |
| "Array" |
| ], |
| "descriptionCN": "<p>数据数组。数组每一项为一个数据。通常这个数据是用数组存储数据的每个属性/维度。例如下面：</p>\n<pre><code class=\"lang-js\">data: [\n [[12, 14, 10], [34, 50, 15], [56, 30, 20], [10, 15, 12], [23, 10, 14]]\n]\n</code></pre>\n<p>数组中的每一项的前三个值分别是<code>x</code>, <code>y</code>, <code>z</code>。除了这三个值也可以添加其它值给 <a href=\"#visualMap\">visualMap</a> 组件映射到颜色等其它图形属性。</p>\n<p>有些时候我们需要指定每个数据项的名称，这时候需要每个项为一个对象：</p>\n<pre><code class=\"lang-js\">[{\n // 数据项的名称\n name: '数据1',\n // 数据项值\n value: [12, 14, 10]\n}, {\n name: '数据2',\n value: [34, 50, 15]\n}]\n</code></pre>\n<p>需要对个别内容指定进行个性化定义时：</p>\n<pre><code class=\"lang-js\">[{\n name: '数据1',\n value: [12, 14, 10]\n}, {\n // 数据项名称\n name: '数据2',\n value : [34, 50, 15],\n //自定义特殊itemStyle，仅对该item有效\n itemStyle:{}\n}]\n</code></pre>\n", |
| "items": { |
| "type": "Object", |
| "properties": { |
| "name": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>数据项名称。</p>\n" |
| }, |
| "value": { |
| "type": [ |
| "Array" |
| ], |
| "descriptionCN": "<p>数据项值。</p>\n" |
| }, |
| "lineStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>单个数据项的样式设置。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "自适应" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的不透明度。</p>\n", |
| "default": 1 |
| }, |
| "width": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的宽度。</p>\n", |
| "default": 1 |
| } |
| } |
| } |
| } |
| } |
| }, |
| "zlevel": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": -10 |
| }, |
| "silent": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。</p>\n", |
| "default": false |
| }, |
| "animation": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否开启动画。</p>\n", |
| "default": true |
| }, |
| "animationDurationUpdate": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>过渡动画的时长。</p>\n", |
| "default": 500 |
| }, |
| "animationEasingUpdate": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>过渡动画的缓动效果。</p>\n", |
| "default": "cubicOut" |
| } |
| } |
| }, |
| { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>三维的飞线图。跟二维的<a href=\"http://echarts.baidu.com/option.html#series-line\" target=\"_blank\">飞线图</a>一样用于表现起点终点的线数据。更多用在地理可视化上。</p>\n<p>下图是使用 <a href=\"#series-lines3D\">lines3D</a> 在 <a href=\"#globe\">globe</a> 上可视化飞机航班的一个例子。</p>\n<p><img width=\"700\" height=\"auto\" src=\"documents/asset/gl/img/globe-airline.png\"></p>\n", |
| "properties": { |
| "type": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "", |
| "default": "'lines3D'" |
| }, |
| "name": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>坐标轴使用的 <a href=\"#geo3D\">geo3D</a> 组件的索引。默认使用第一个 <a href=\"#geo3D\">geo3D</a> 组件。</p>\n", |
| "default": 0 |
| }, |
| "globeIndex": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>坐标轴使用的 <a href=\"#globe\">globe</a> 组件的索引。默认使用第一个 <a href=\"#globe\">globe</a> 组件。</p>\n", |
| "default": 0 |
| }, |
| "polyline": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<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", |
| "default": false |
| }, |
| "effect": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>飞线的尾迹特效。</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示尾迹特效，默认不显示。</p>\n", |
| "default": false |
| }, |
| "period": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>尾迹特效的周期。</p>\n", |
| "default": 4 |
| }, |
| "constantSpeed": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>轨迹特效的移动动画是否是固定速度，单位按三维空间的尺寸，设置为非 null 的值后会忽略 <a href=\"#series-lines3D.effect.period\">period</a> 配置项。</p>\n", |
| "default": null |
| }, |
| "trailWidth": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>尾迹的宽度。</p>\n", |
| "default": 4 |
| }, |
| "trailLength": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>尾迹的长度，范围从 0 到 1，为线条长度的百分比。</p>\n", |
| "default": 0.1 |
| }, |
| "trailColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>尾迹的颜色，默认跟线条颜色相同。</p>\n" |
| }, |
| "trailOpacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>尾迹的不透明度，默认跟线条不透明度相同。</p>\n" |
| } |
| } |
| }, |
| "lineStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>飞线的线条样式。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "自适应" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的不透明度。</p>\n", |
| "default": 0.5 |
| }, |
| "width": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的宽度。</p>\n", |
| "default": 1 |
| } |
| } |
| }, |
| "distanceToGlobe": { |
| "type": [ |
| "number", |
| "Array" |
| ], |
| "descriptionCN": "<p>线的点距离 <a href=\"#globe\">globe</a> 表面的距离，可以使用数组表示距离范围，这个时候会从 <a href=\"#series-lines3D.data.coords\">coords</a> 每一项的第三个值映射。</p>\n" |
| }, |
| "distanceToGeo3D": { |
| "type": [ |
| "number", |
| "Array" |
| ], |
| "descriptionCN": "<p>线的点距离 <a href=\"#geo3D\">geo3D</a> 表面的距离，可以使用数组表示距离范围，这个时候会从 <a href=\"#series-lines3D.data.coords\">coords</a> 每一项的第三个值映射。</p>\n" |
| }, |
| "data": { |
| "type": [ |
| "Array" |
| ], |
| "descriptionCN": "<p>三维飞线图的数据数组，通常数据的每一项可以是一个包含起点和终点的坐标集。在 <a href=\"#series-lines3D.polyline\">polyline</a> 设置为 <code>true</code> 时支持多于两个的坐标。\n如下：</p>\n<pre><code class=\"lang-js\">data: [\n [\n [120, 66, 1], // 起点的经纬度和海拔坐标\n [122, 67, 2] // 终点的经纬度和海拔坐标\n ]\n]\n</code></pre>\n<p>有些时候需要配置数据项的名字或者单独的样式。需要把经纬度坐标写到 coords 属性下。如下：</p>\n<pre><code class=\"lang-js\">data: [\n {\n coords: [ [120, 66], [122, 67] ],\n // 数据值\n value: 10,\n // 数据名\n name: 'foo',\n // 线条样式\n lineStyle: {}\n }\n]\n</code></pre>\n", |
| "items": { |
| "type": "Object", |
| "properties": { |
| "coords": { |
| "type": [ |
| "Array" |
| ], |
| "descriptionCN": "<p>一个包含两个到多个经纬度坐标的数组。在 <a href=\"#series-lines3D.polyline\">polyline</a> 设置为 <code>true</code> 时支持多于两个的坐标。</p>\n" |
| }, |
| "value": { |
| "type": [ |
| "Array", |
| "number" |
| ], |
| "descriptionCN": "<p>数据值。</p>\n" |
| }, |
| "lineStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>单个数据（单条线）的样式设置。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "自适应" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的不透明度。</p>\n", |
| "default": 1 |
| }, |
| "width": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的宽度。</p>\n", |
| "default": 1 |
| } |
| } |
| } |
| } |
| } |
| }, |
| "blendMode": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>混合模式，目前支持<code>'source-over'</code>，<code>'lighter'</code>，默认使用的<code>'source-over'</code>是通过 alpha 混合，而<code>'lighter'</code>是叠加模式，该模式可以让数据集中的区域因为叠加而产生高亮的效果。</p>\n", |
| "default": "'source-over'" |
| }, |
| "zlevel": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": -10 |
| }, |
| "silent": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。</p>\n", |
| "default": false |
| } |
| } |
| }, |
| { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p><strong>三维地图</strong></p>\n<p>三维地图主要用于地理区域数据的可视化，配合 <a href=\"http://echarts.baidu.com/option.html#visualMap\" target=\"_blank\">visualMap</a> 组件用于展示不同区域的人口分布密度等数据。</p>\n<p>相比于二维的地图，三维地图还能每个区域设置不同的高度，这个高度能够用来展示数据，也能够用来显示建筑数据中建筑的高度。</p>\n", |
| "properties": { |
| "type": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "", |
| "default": "'map3D'" |
| }, |
| "name": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>三维地图组件在三维场景中的宽度。配合 <a href=\"#series-map3D.viewControl.distance\">viewControl.distance</a> 可以得到最合适的展示尺寸。</p>\n<p>下面是三维地图 中<code>boxWidth</code>, <code>boxHeight</code>, <code>boxDepth</code>的示意图。</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/gl/img/geo-size.png\"></p>\n", |
| "default": 100 |
| }, |
| "boxHeight": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>三维地图组件在三维场景中的高度。</p>\n", |
| "default": 3 |
| }, |
| "boxDepth": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>三维地图组件在三维场景中的深度。</p>\n<p>组件深度默认自动，保证三维组件的显示比例跟输入的 GeoJSON 的比例相同</p>\n", |
| "default": "auto" |
| }, |
| "environment": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "'auto'" |
| }, |
| "groundPlane": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>地面可以让整个组件有个“摆放”的地方，从而使整个场景看起来更真实，更有模型感。</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示地面。</p>\n", |
| "default": false |
| }, |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>地面颜色。</p>\n", |
| "default": "'#aaa'" |
| } |
| } |
| }, |
| "instancing": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<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<p>注意，开启<code>instancing</code>后场景不再具备选择，hover等交互的功能。</p>\n", |
| "default": false |
| }, |
| "label": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>标签的相关设置。</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示标签。</p>\n", |
| "default": false |
| }, |
| "distance": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离。</p>\n" |
| }, |
| "formatter": { |
| "type": [ |
| "Function", |
| "string" |
| ], |
| "descriptionCN": "<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<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值\n value: number|Array,\n // 数据图形的颜色\n color: string,\n\n}\n</code></pre>\n" |
| }, |
| "textStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>标签的字体样式。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的颜色。</p>\n", |
| "default": "\"#fff\"" |
| }, |
| "borderWidth": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的描边宽度。</p>\n", |
| "default": 0 |
| }, |
| "borderColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的描边颜色。</p>\n", |
| "default": "#fff" |
| }, |
| "fontFamily": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的字体系列。</p>\n", |
| "default": "'sans-serif'" |
| }, |
| "fontSize": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的字体大小。</p>\n", |
| "default": 12 |
| }, |
| "fontWeight": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "normal" |
| } |
| } |
| } |
| } |
| }, |
| "itemStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>三维地图 中三维图形的视觉属性，包括颜色，透明度，描边等。</p>\n", |
| "properties": { |
| "areaColor": { |
| "type": [ |
| "string", |
| "Function" |
| ], |
| "descriptionCN": "<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", |
| "default": "自适应" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>图形的不透明度。</p>\n", |
| "default": 1 |
| }, |
| "borderWidth": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>图形描边的宽度。加上描边后可以更清晰的区分每个区域。如下图：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/geo-border.png\"></p>\n", |
| "default": 0 |
| }, |
| "borderColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>图形描边的颜色。</p>\n", |
| "default": "#333" |
| } |
| } |
| }, |
| "emphasis": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>鼠标 hover 高亮时图形和标签的样式</p>\n", |
| "properties": { |
| "label": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示标签。</p>\n", |
| "default": false |
| }, |
| "distance": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离。</p>\n", |
| "default": 2 |
| }, |
| "formatter": { |
| "type": [ |
| "Function", |
| "string" |
| ], |
| "descriptionCN": "<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<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值\n value: number|Array,\n // 数据图形的颜色\n color: string,\n\n}\n</code></pre>\n" |
| }, |
| "textStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>标签的字体样式。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的颜色。</p>\n", |
| "default": "#000" |
| }, |
| "borderWidth": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的描边宽度。</p>\n", |
| "default": 1 |
| }, |
| "borderColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的描边颜色。</p>\n", |
| "default": "#fff" |
| }, |
| "fontFamily": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的字体系列。</p>\n", |
| "default": "'sans-serif'" |
| }, |
| "fontSize": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的字体大小。</p>\n", |
| "default": 20 |
| }, |
| "fontWeight": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "normal" |
| } |
| } |
| } |
| } |
| }, |
| "itemStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "自适应" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>图形的不透明度。</p>\n", |
| "default": 1 |
| } |
| } |
| } |
| } |
| }, |
| "data": { |
| "type": [ |
| "Array" |
| ], |
| "descriptionCN": "<p>地图区域的设置，</p>\n", |
| "items": { |
| "type": "Object", |
| "properties": { |
| "name": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>所对应的地图区域的名称，例如 <code>'广东'</code>，<code>'浙江'</code>。</p>\n" |
| }, |
| "value": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>该区域的数据值。</p>\n" |
| }, |
| "regionHeight": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>区域的高度，可以设置不同的高度用来表达数据的大小。当 GeoJSON 为建筑的数据时，也可以通过这个值表示简直的高度。如下图</p>\n<p><img width=\"700\" height=\"auto\" src=\"documents/asset/gl/img/city-region-height.jpg\"></p>\n" |
| }, |
| "itemStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>单个区域的样式设置。</p>\n", |
| "properties": { |
| "areaColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "自适应" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>图形的不透明度。</p>\n", |
| "default": 1 |
| }, |
| "borderWidth": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>图形描边的宽度。加上描边后可以更清晰的区分每个区域。如下图：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/geo-border.png\"></p>\n", |
| "default": 0 |
| }, |
| "borderColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>图形描边的颜色。</p>\n", |
| "default": "#333" |
| } |
| } |
| }, |
| "label": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>单个区域的标签设置。</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示标签。</p>\n", |
| "default": false |
| }, |
| "distance": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离。</p>\n", |
| "default": 2 |
| }, |
| "formatter": { |
| "type": [ |
| "Function", |
| "string" |
| ], |
| "descriptionCN": "<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<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值\n value: number|Array,\n // 数据图形的颜色\n color: string,\n\n}\n</code></pre>\n" |
| }, |
| "textStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>标签的字体样式。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的颜色。</p>\n", |
| "default": "#000" |
| }, |
| "borderWidth": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的描边宽度。</p>\n", |
| "default": 1 |
| }, |
| "borderColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的描边颜色。</p>\n", |
| "default": "#fff" |
| }, |
| "fontFamily": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的字体系列。</p>\n", |
| "default": "'sans-serif'" |
| }, |
| "fontSize": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的字体大小。</p>\n", |
| "default": 20 |
| }, |
| "fontWeight": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "normal" |
| } |
| } |
| } |
| } |
| }, |
| "emphasis": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>单个区域标签和样式的高亮设置。</p>\n", |
| "properties": { |
| "itemStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "", |
| "properties": { |
| "areaColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "自适应" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>图形的不透明度。</p>\n", |
| "default": 1 |
| }, |
| "borderWidth": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>图形描边的宽度。加上描边后可以更清晰的区分每个区域。如下图：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/geo-border.png\"></p>\n", |
| "default": 0 |
| }, |
| "borderColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>图形描边的颜色。</p>\n", |
| "default": "#333" |
| } |
| } |
| }, |
| "label": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示标签。</p>\n", |
| "default": false |
| }, |
| "distance": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离。</p>\n", |
| "default": 2 |
| }, |
| "formatter": { |
| "type": [ |
| "Function", |
| "string" |
| ], |
| "descriptionCN": "<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<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值\n value: number|Array,\n // 数据图形的颜色\n color: string,\n\n}\n</code></pre>\n" |
| }, |
| "textStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>标签的字体样式。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的颜色。</p>\n", |
| "default": "#000" |
| }, |
| "borderWidth": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的描边宽度。</p>\n", |
| "default": 1 |
| }, |
| "borderColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的描边颜色。</p>\n", |
| "default": "#fff" |
| }, |
| "fontFamily": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>文字的字体系列。</p>\n", |
| "default": "'sans-serif'" |
| }, |
| "fontSize": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>文字的字体大小。</p>\n", |
| "default": 20 |
| }, |
| "fontWeight": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "normal" |
| } |
| } |
| } |
| } |
| } |
| } |
| } |
| } |
| } |
| }, |
| "shading": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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> 使用可以让展示的画面效果和质感有质的提升。</p>\n</li>\n</ul>\n" |
| }, |
| "realisticMaterial": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>真实感材质相关的配置项，在 <a href=\"#series-map3D.shading\">shading</a> 为<code>'realistic'</code>时有效。</p>\n", |
| "properties": { |
| "roughness": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": 0.5 |
| }, |
| "metalness": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": 0 |
| }, |
| "baseTexture": { |
| "type": [ |
| "string", |
| "HTMLImageElement", |
| "HTMLCanvasElement" |
| ], |
| "descriptionCN": "<p>材质细节的纹理贴图。</p>\n" |
| }, |
| "textureTiling": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>baseTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n", |
| "default": 1 |
| }, |
| "textureOffset": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>材质细节纹理的位移。</p>\n", |
| "default": 0 |
| } |
| } |
| }, |
| "lambertMaterial": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>lambert 材质相关的配置项，在 <a href=\"#series-map3D.shading\">shading</a> 为<code>'lambert'</code>时有效。</p>\n", |
| "properties": { |
| "baseTexture": { |
| "type": [ |
| "string", |
| "HTMLImageElement", |
| "HTMLCanvasElement" |
| ], |
| "descriptionCN": "<p>材质细节的纹理贴图。</p>\n" |
| }, |
| "textureTiling": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>baseTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n", |
| "default": 1 |
| }, |
| "textureOffset": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>材质细节纹理的位移。</p>\n", |
| "default": 0 |
| } |
| } |
| }, |
| "colorMaterial": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>color 材质相关的配置项，在 <a href=\"#series-map3D.shading\">shading</a> 为<code>'color'</code>时有效。</p>\n", |
| "properties": { |
| "baseTexture": { |
| "type": [ |
| "string", |
| "HTMLImageElement", |
| "HTMLCanvasElement" |
| ], |
| "descriptionCN": "<p>材质细节的纹理贴图。</p>\n" |
| }, |
| "textureTiling": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>baseTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n", |
| "default": 1 |
| }, |
| "textureOffset": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>材质细节纹理的位移。</p>\n", |
| "default": 0 |
| } |
| } |
| }, |
| "light": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>光照相关的设置。在 <a href=\"#series-map3D.shading\">shading</a> 为 <code>'color'</code> 的时候无效。</p>\n<p>光照的设置会影响到组件以及组件所在坐标系上的所有图表。</p>\n<p>合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。</p>\n", |
| "properties": { |
| "main": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>场景主光源的设置，在 <a href=\"#globe\">globe</a> 组件中就是太阳光。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>主光源的颜色。</p>\n", |
| "default": "#fff" |
| }, |
| "intensity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>主光源的强度。</p>\n", |
| "default": 1 |
| }, |
| "shadow": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<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", |
| "default": false |
| }, |
| "shadowQuality": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "'medium'" |
| }, |
| "alpha": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": 40 |
| }, |
| "beta": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>主光源绕 y 轴，即左右旋转的角度。</p>\n", |
| "default": 40 |
| } |
| } |
| }, |
| "ambient": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>全局的环境光设置。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>环境光的颜色。</p>\n", |
| "default": "#fff" |
| }, |
| "intensity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>环境光的强度。</p>\n", |
| "default": 0.2 |
| } |
| } |
| }, |
| "ambientCubemap": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>ambientCubemap 会使用纹理作为光源的环境光， 会为物体提供漫反射和高光反射。可以通过 <a href=\"#series-map3D.light.ambientCubemap.diffuseIntensity\">diffuseIntensity</a> 和 <a href=\"#series-map3D.light.ambientCubemap.specularIntensity\">specularIntensity</a> 分别设置漫反射强度和高光反射强度。</p>\n", |
| "properties": { |
| "texture": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>漫反射的强度。</p>\n", |
| "default": 0.5 |
| }, |
| "specularIntensity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>高光反射的强度。</p>\n", |
| "default": 0.5 |
| } |
| } |
| } |
| } |
| }, |
| "postEffect": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>后处理特效的相关配置，后处理特效可以为画面添加高光，景深，环境光遮蔽（SSAO），调色等效果。可以让整个画面更富有质感。</p>\n<p>下面分别是关闭和开启 <code>postEffect</code> 的区别。</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/globe-posteffect-disable.png\" width=\"100%\" title=\"Disable\">\n <img src=\"documents/asset/gl/img/globe-posteffect-enable.png\" width=\"100%\" title=\"Enable\">\n</div>\n\n<p>注意在开启 postEffect 的时候默认会开启 <a href=\"#series-map3D.temporalSuperSampling\">temporalSuperSampling</a> 在画面静止后持续对画面增强，包括抗锯齿，景深，SSAO，阴影等。</p>\n", |
| "properties": { |
| "enable": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否开启后处理特效，默认关闭。</p>\n", |
| "default": false |
| }, |
| "bloom": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>高光特效。高光特效用来表现很“亮”的颜色，因为传统的 RGB 只能表现<code>0 - 255</code>范围的颜色，所以对于超出这个范围特别“亮”的颜色，会通过这种高光溢出的特效去表现。如下图</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/globe-posteffect-bloom.png\"></p>\n", |
| "properties": { |
| "enable": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否开启光晕特效。</p>\n", |
| "default": false |
| }, |
| "bloomIntensity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>光晕的强度，默认为 0.1</p>\n", |
| "default": 0.1 |
| } |
| } |
| }, |
| "depthOfField": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>景深效果。景深效果是模拟摄像机的光学成像效果，在对焦的区域相对清晰，原理对焦的区域则会逐渐模糊。</p>\n<p>景深效果可以让观察者几种注意力到对焦的区域，而且让画面的镜头感更强，大景深还能塑造出微距的模型效果。</p>\n<p>下面分别是关闭和开启景深的区别。</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-no-dof.png\" width=\"100%\" title=\"Disable\">\n <img src=\"documents/asset/gl/img/geo-dof.png\" width=\"100%\" title=\"Enable\">\n</div>\n", |
| "properties": { |
| "enable": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否开启景深</p>\n", |
| "default": false |
| }, |
| "focalDistance": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>初始的焦距，用户可以点击区域自动聚焦。</p>\n", |
| "default": 50 |
| }, |
| "focalRange": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>完全聚焦的区域范围，在此范围内的物体时完全清晰的，不会有模糊</p>\n", |
| "default": 20 |
| }, |
| "fstop": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>镜头的<a href=\"https://zh.wikipedia.org/wiki/%E7%84%A6%E6%AF%94\" target=\"_blank\">F值</a>，值越小景深越浅。</p>\n", |
| "default": 2.8 |
| }, |
| "blurRadius": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": 10 |
| } |
| } |
| }, |
| "SSAO": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<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", |
| "properties": { |
| "enable": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否开启环境光遮蔽，默认不开启</p>\n", |
| "default": false |
| }, |
| "quality": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>环境光遮蔽的质量，支持<code>'low'</code>, <code>'medium'</code>, <code>'high'</code>, <code>'ultra'</code></p>\n", |
| "default": "'medium'" |
| }, |
| "radius": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": 2 |
| }, |
| "intensity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>环境光遮蔽的强度。值越大颜色越深。</p>\n", |
| "default": 1 |
| } |
| } |
| }, |
| "colorCorrection": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>颜色纠正和调整。类似 Photoshop 中的 Color Adjustments</p>\n<p>下图同个场景调整为冷色系和暖色系的区别。</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/buildings-cold.jpg\" width=\"100%\" title=\"Cold\">\n <img src=\"documents/asset/gl/img/buildings-warm.jpg\" width=\"100%\" title=\"Warm\">\n</div>\n\n", |
| "properties": { |
| "enable": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否开启颜色纠正</p>\n", |
| "default": true |
| }, |
| "lookupTexture": { |
| "type": [ |
| "string", |
| "HTMLImageElement", |
| "HTMLCanvasElement" |
| ], |
| "descriptionCN": "<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": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>画面的曝光。</p>\n", |
| "default": 0 |
| }, |
| "brightness": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>画面的亮度。</p>\n", |
| "default": 0 |
| }, |
| "contrast": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>画面的对比度。</p>\n", |
| "default": 1 |
| }, |
| "saturation": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>画面的饱和度。</p>\n", |
| "default": 1 |
| } |
| } |
| }, |
| "FXAA": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>在开启 <a href=\"#series-map3D.postEffect\">postEffect</a> 后，WebGL 默认的 MSAA 会无法使用。这时候通过 FXAA 可以廉价方便的解决抗锯齿的问题，FXAA 会对一些场景的边缘部分进行模糊从而解决锯齿的问题，这在一些场景上效果还不错，但是在 echarts-gl 中，需要保证很多文字和线条边缘的锐利清晰，因此 FXAA 并不是那么适用。这时候我们可以通过如下设置更高的<code>devicePixelRatio</code>来使用超采样</p>\n<pre><code class=\"lang-js\">var chart = echarts.init(dom, null, {\n devicePixelRatio: 2\n})\n</code></pre>\n<p>但是这种方法对电脑性能有很高的要求，所以更多时候我们建议使用 echarts-gl 中的 <a href=\"#series-map3D.temporalSuperSampling\">temporalSuperSampling</a>，在画面静止后会持续分帧对一个像素多次抖动采样，从而达到超采样抗锯齿的效果。</p>\n", |
| "properties": { |
| "enable": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否开启 FXAA，默认关闭。</p>\n", |
| "default": false |
| } |
| } |
| } |
| } |
| }, |
| "temporalSuperSampling": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>分帧超采样。在开启 <a href=\"#series-map3D.postEffect\">postEffect</a> 后，WebGL 默认的 MSAA 会无法使用，所以我们需要自己解决锯齿的问题。</p>\n<p>分帧超采样就是用来解决锯齿的问题，它在画面静止后会持续分帧对一个像素多次抖动采样，从而达到抗锯齿的效果。而且在这个分帧采样的过程中，echarts-gl 也会对 <a href=\"#series-map3D.postEffect\">postEffect</a> 中一些需要采样保证效果的特效，例如 <a href=\"#series-map3D.postEffect.SSAO\">SSAO</a>, <a href=\"#series-map3D.postEffect.depthOfField\">景深</a>，以及阴影进行渐进增强。</p>\n<p>下面是未开启和开启<code>temporalSuperSampling</code>的区别。</p>\n<div class=\"twentytwenty-container\" style=\"width: 800px;\">\n <img src=\"documents/asset/gl/img/surface-no-taa.png\" width=\"100%\" title=\"No AA\">\n <img src=\"documents/asset/gl/img/surface-taa.png\" width=\"100%\" title=\"AA\">\n</div>\n", |
| "properties": { |
| "enable": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否开启分帧超采样。默认在开启 <a href=\"#series-map3D.postEffect\">postEffect</a> 后也会同步开启。</p>\n", |
| "default": "'auto'" |
| } |
| } |
| }, |
| "viewControl": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p><code>viewControl</code>用于鼠标的旋转，缩放等视角控制。</p>\n", |
| "properties": { |
| "autoRotate": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否开启视角绕物体的自动旋转查看。</p>\n", |
| "default": false |
| }, |
| "autoRotateDirection": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>物体自传的方向。默认是 <code>'cw'</code> 也就是从上往下看是顺时针方向，也可以取 <code>'ccw'</code>，既从上往下看为逆时针方向。</p>\n", |
| "default": "cw" |
| }, |
| "autoRotateSpeed": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>物体自传的速度。单位为<code>角度 / 秒</code>，默认为<code>10</code> ，也就是<code>36</code>秒转一圈。</p>\n", |
| "default": 10 |
| }, |
| "autoRotateAfterStill": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>在鼠标静止操作后恢复自动旋转的时间间隔。在开启 <a href=\"#series-map3D.viewControl.autoRotate\">autoRotate</a> 后有效。</p>\n", |
| "default": 3 |
| }, |
| "damping": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>鼠标进行旋转，缩放等操作时的迟滞因子，在大于 0 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。</p>\n", |
| "default": 0.8 |
| }, |
| "rotateSensitivity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>旋转操作的灵敏度，值越大越灵敏。默认为``</p>\n<p>设置为<code>0</code>后无法旋转。</p>\n", |
| "default": 1 |
| }, |
| "zoomSensitivity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>缩放操作的灵敏度，值越大越灵敏。默认为``</p>\n<p>设置为<code>0</code>后无法缩放。</p>\n", |
| "default": 1 |
| }, |
| "panSensitivity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>平移操作的灵敏度，值越大越灵敏。默认为``</p>\n<p>设置为<code>0</code>后无法平移。</p>\n", |
| "default": 1 |
| }, |
| "panMouseButton": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "left" |
| }, |
| "rotateMouseButton": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "middle" |
| }, |
| "distance": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>默认视角距离主体的距离，对于 <a href=\"#globe\">globe</a> 来说是距离地球表面的距离，对于 <a href=\"#grid3D\">grid3D</a> 和 <a href=\"#geo3D\">geo3D</a> 等其它组件来说是距离中心原点的距离。</p>\n", |
| "default": 100 |
| }, |
| "minDistance": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>视角通过鼠标控制能拉近到主体的最小距离。</p>\n", |
| "default": 40 |
| }, |
| "maxDistance": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>视角通过鼠标控制能拉远到主体的最小距离。</p>\n", |
| "default": 400 |
| }, |
| "alpha": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": 40 |
| }, |
| "beta": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>视角绕 y 轴，即左右旋转的角度。</p>\n", |
| "default": 0 |
| }, |
| "center": { |
| "type": [ |
| "Array" |
| ], |
| "descriptionCN": "<p>视角中心点，旋转也会围绕这个中心点旋转，默认为<code>[0,0,0]</code>。</p>\n" |
| }, |
| "minAlpha": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。</p>\n", |
| "default": 5 |
| }, |
| "maxAlpha": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。</p>\n", |
| "default": 90 |
| }, |
| "minBeta": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>左右旋转的最小 beta 值。即视角能旋转到达最左的角度。</p>\n", |
| "default": -80 |
| }, |
| "maxBeta": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>左右旋转的最大 beta 值。即视角能旋转到达最右的角度。</p>\n", |
| "default": 80 |
| }, |
| "animation": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否开启动画。</p>\n", |
| "default": true |
| }, |
| "animationDurationUpdate": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>过渡动画的时长。</p>\n", |
| "default": 1000 |
| }, |
| "animationEasingUpdate": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>过渡动画的缓动效果。</p>\n", |
| "default": "cubicInOut" |
| } |
| } |
| }, |
| "zlevel": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": -10 |
| }, |
| "left": { |
| "type": [ |
| "string", |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": "auto" |
| }, |
| "top": { |
| "type": [ |
| "string", |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": "auto" |
| }, |
| "right": { |
| "type": [ |
| "string", |
| "number" |
| ], |
| "descriptionCN": "<p>组件的视图离容器右侧的距离。</p>\n<p><code>right</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比。</p>\n<p>默认自适应。</p>\n", |
| "default": "auto" |
| }, |
| "bottom": { |
| "type": [ |
| "string", |
| "number" |
| ], |
| "descriptionCN": "<p>组件的视图离容器下侧的距离。</p>\n<p><code>bottom</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比。</p>\n<p>默认自适应。</p>\n", |
| "default": "auto" |
| }, |
| "width": { |
| "type": [ |
| "string", |
| "number" |
| ], |
| "descriptionCN": "<p>组件的视图宽度。</p>\n", |
| "default": "auto" |
| }, |
| "height": { |
| "type": [ |
| "string", |
| "number" |
| ], |
| "descriptionCN": "<p>组件的视图高度。</p>\n", |
| "default": "auto" |
| } |
| } |
| }, |
| { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>曲面图。支持通过 <a href=\"#series-surface.parametric\">parametric</a> 绘制<a href=\"https://en.wikipedia.org/wiki/Parametric_surface\" target=\"_blank\">参数曲面</a>。</p>\n<p>下图就是一个配置成金属材质的类似一个金属零件的参数曲面。</p>\n<p><img width=\"500\" height=\"auto\" src=\"documents/asset/gl/img/parametric-surface.png\"></p>\n", |
| "properties": { |
| "type": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "", |
| "default": "'surface'" |
| }, |
| "name": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "cartesian3D" |
| }, |
| "grid3DIndex": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>使用的 <a href=\"#grid3D\">grid3D</a> 组件的索引。默认使用第一个 <a href=\"#grid3D\">grid3D</a> 组件。</p>\n", |
| "default": 0 |
| }, |
| "parametric": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否为参数曲面。</p>\n", |
| "default": false |
| }, |
| "wireframe": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>曲面图的网格线。</p>\n", |
| "properties": { |
| "show": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否显示网格线。默认显示。</p>\n", |
| "default": true |
| }, |
| "lineStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>网格线的样式。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "#222" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的不透明度。</p>\n", |
| "default": 1 |
| }, |
| "width": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的宽度。</p>\n", |
| "default": 1 |
| } |
| } |
| } |
| } |
| }, |
| "equation": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>曲面的函数表达式。如果需要展示的是函数曲面，可以不设置 <a href=\"#series-surface.data\">data</a>，通过 <a href=\"#series-surface.equation\">equation</a> 去声明函数表达式。例如通过下面这个函数可以模拟波纹效果。</p>\n<pre><code class=\"lang-js\">equation: {\n x: {\n step: 0.1,\n min: -3,\n max: 3,\n },\n y: {\n step: 0.1,\n min: -3,\n max: 3,\n },\n z: function (x, y) {\n return Math.sin(x * x + y * y) * x / 3.14\n }\n}\n</code></pre>\n", |
| "properties": { |
| "x": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>自变量 x。</p>\n", |
| "properties": { |
| "step": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>x 的步长。</p>\n" |
| }, |
| "min": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>x 的最小值。</p>\n" |
| }, |
| "max": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>x 的最大值。</p>\n" |
| } |
| } |
| }, |
| "y": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>自变量 y。</p>\n", |
| "properties": { |
| "step": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>y 的步长。</p>\n" |
| }, |
| "min": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>y 的最小值。</p>\n" |
| }, |
| "max": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>y 的最大值。</p>\n" |
| } |
| } |
| }, |
| "z": { |
| "type": [ |
| "Function" |
| ], |
| "descriptionCN": "<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": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>曲面的<a href=\"https://zh.wikipedia.org/wiki/%E5%8F%83%E6%95%B8%E6%96%B9%E7%A8%8B\" target=\"_blank\">参数方程</a>。在不设置 <a href=\"#series-surface.data\">data</a>，可以通过 <a href=\"#series-surface.equation\">parametricEquation</a> 去声明参数参数方程。在 <a href=\"#series-surface\">parametric</a> 为<code>true</code>时有效。</p>\n<p>参数方程是 <a href=\"#series-surface.parametricEquation.x\">x</a>, <a href=\"#series-surface.parametricEquation.y\">y</a>, <a href=\"#series-surface.parametricEquation.z\">z</a> 关于参数 <a href=\"#series-surface.parametricEquation.u\">u</a>，<a href=\"#series-surface.parametricEquation.v\">v</a> 的方程。\n下面的参数方程就是绘制前面图中类似一个金属零件的参数曲面的。</p>\n<pre><code class=\"lang-js\">var aa = 0.4;\nvar r = 1 - aa * aa;\nvar w = sqrt(r);\n...\nparametricEquation: {\n u: {\n min: -13.2,\n max: 13.2,\n step: 0.5\n },\n v: {\n min: -37.4,\n max: 37.4,\n step: 0.5\n },\n x: function (u, v) {\n var denom = aa * (pow(w * cosh(aa * u), 2) + aa * pow(sin(w * v), 2))\n return -u + (2 * r * cosh(aa * u) * sinh(aa * u) / denom);\n },\n y: function (u, v) {\n var denom = aa * (pow(w * cosh(aa * u), 2) + aa * pow(sin(w * v), 2))\n return 2 * w * cosh(aa * u) * (-(w * cos(v) * cos(w * v)) - (sin(v) * sin(w * v))) / denom;\n },\n z: function (u, v) {\n var denom = aa * (pow(w * cosh(aa * u), 2) + aa * pow(sin(w * v), 2))\n return 2 * w * cosh(aa * u) * (-(w * sin(v) * cos(w * v)) + (cos(v) * sin(w * v))) / denom\n }\n}\n</code></pre>\n", |
| "properties": { |
| "u": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>自变量 u。</p>\n", |
| "properties": { |
| "step": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>u 的步长。</p>\n" |
| }, |
| "min": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>u 的最小值。</p>\n" |
| }, |
| "max": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>u 的最大值。</p>\n" |
| } |
| } |
| }, |
| "v": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>自变量 v。</p>\n", |
| "properties": { |
| "step": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>v 的步长。</p>\n" |
| }, |
| "min": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>v 的最小值。</p>\n" |
| }, |
| "max": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>v 的最大值。</p>\n" |
| } |
| } |
| }, |
| "x": { |
| "type": [ |
| "Function" |
| ], |
| "descriptionCN": "<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": { |
| "type": [ |
| "Function" |
| ], |
| "descriptionCN": "<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": { |
| "type": [ |
| "Function" |
| ], |
| "descriptionCN": "<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": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>曲面的颜色和不透明度等样式。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "自适应" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>图形的不透明度。</p>\n", |
| "default": 1 |
| } |
| } |
| }, |
| "data": { |
| "type": [ |
| "Array" |
| ], |
| "descriptionCN": "<p>曲面图的数据数组。</p>\n<p>数据是线性存储的数组，包含<code>X 顶点数</code>x<code>Y 顶点数</code>个数据。一个 5 x 5 的曲面共有 25 个顶点，数据在数组中的索引如下</p>\n<p><img width=\"400\" height=\"auto\" src=\"documents/asset/gl/img/surface-index.png\"></p>\n<p>上图使用的数据：</p>\n<pre><code class=\"lang-js\">data: [\n [-1,-1,0],[-0.5,-1,0],[0,-1,0],[0.5,-1,0],[1,-1,0],\n [-1,-0.5,0],[-0.5,-0.5,1],[0,-0.5,0],[0.5,-0.5,-1],[1,-0.5,0],\n [-1,0,0],[-0.5,0,0],[0,0,0],[0.5,0,0],[1,0,0],\n [-1,0.5,0],[-0.5,0.5,-1],[0,0.5,0],[0.5,0.5,1],[1,0.5,0],\n [-1,1,0],[-0.5,1,0],[0,1,0],[0.5,1,0],[1,1,0]\n]\n</code></pre>\n<p>每一项分别为 <code>x</code>, <code>y</code>, <code>z</code>。</p>\n<p>对于参数方程来说，每一项需要存储五个数据，分别是 <code>x</code>, <code>y</code>, <code>z</code> 和参数 <code>u</code>, <code>v</code>。而数据的索引按照<code>u</code>, <code>v</code> 的顺序。例如下面的数据：</p>\n<pre><code class=\"lang-js\">data: [\n // v 为 0，u 从 -3.14 到 3.13\n [0,0,1,-3.14,0],[0,0,1,-1.57,0],[0,0,1,0,0],[0,0,1,1.57,0],[0,0,1,3.14,0],\n // v 为 1.57，u 从 -3.14 到 3.13\n [0,-1,0,-3.14,1.57],[-1,0,0,-1.57,1.57],[0,1,0,0,1.57],[1,0,0,1.57,1.57],[0,-1,0,3.14,1.57],\n // v 为 3.14，u 从 -3.14 到 3.13\n [0,0,-1,-3.14,3.14],[0,0,-1,-1.57,3.14],[0,0,-1,0,3.14],[0,0,-1,1.57,3.14],[0,0,-1,3.14,3.14]]\n]\n</code></pre>\n<p>有些时候我们需要指定每个数据项的名称，这时候需要每个项为一个对象：</p>\n<pre><code class=\"lang-js\">[{\n // 数据项的名称\n name: '数据1',\n // 数据项值\n value: [12, 14, 10]\n}, {\n name: '数据2',\n value: [34, 50, 15]\n}]\n</code></pre>\n<p>需要对个别内容指定进行个性化定义时：</p>\n<pre><code class=\"lang-js\">[{\n name: '数据1',\n value: [12, 14, 10]\n}, {\n // 数据项名称\n name: '数据2',\n value : [34, 50, 15],\n //自定义特殊itemStyle，仅对该item有效\n itemStyle:{}\n}]\n</code></pre>\n", |
| "items": { |
| "type": "Object", |
| "properties": { |
| "name": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>数据项名称。</p>\n" |
| }, |
| "value": { |
| "type": [ |
| "Array" |
| ], |
| "descriptionCN": "<p>数据项值。</p>\n" |
| }, |
| "itemStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>单个数据项的样式设置。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "自适应" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>图形的不透明度。</p>\n", |
| "default": 1 |
| } |
| } |
| } |
| } |
| } |
| }, |
| "shading": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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> 使用可以让展示的画面效果和质感有质的提升。</p>\n</li>\n</ul>\n" |
| }, |
| "realisticMaterial": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>真实感材质相关的配置项，在 <a href=\"#series-surface.shading\">shading</a> 为<code>'realistic'</code>时有效。</p>\n", |
| "properties": { |
| "roughness": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": 0.5 |
| }, |
| "metalness": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": 0 |
| }, |
| "baseTexture": { |
| "type": [ |
| "string", |
| "HTMLImageElement", |
| "HTMLCanvasElement" |
| ], |
| "descriptionCN": "<p>材质细节的纹理贴图。</p>\n" |
| }, |
| "textureTiling": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>baseTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n", |
| "default": 1 |
| }, |
| "textureOffset": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>材质细节纹理的位移。</p>\n", |
| "default": 0 |
| } |
| } |
| }, |
| "lambertMaterial": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>lambert 材质相关的配置项，在 <a href=\"#series-surface.shading\">shading</a> 为<code>'lambert'</code>时有效。</p>\n", |
| "properties": { |
| "baseTexture": { |
| "type": [ |
| "string", |
| "HTMLImageElement", |
| "HTMLCanvasElement" |
| ], |
| "descriptionCN": "<p>材质细节的纹理贴图。</p>\n" |
| }, |
| "textureTiling": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>baseTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n", |
| "default": 1 |
| }, |
| "textureOffset": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>材质细节纹理的位移。</p>\n", |
| "default": 0 |
| } |
| } |
| }, |
| "colorMaterial": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>color 材质相关的配置项，在 <a href=\"#series-surface.shading\">shading</a> 为<code>'color'</code>时有效。</p>\n", |
| "properties": { |
| "baseTexture": { |
| "type": [ |
| "string", |
| "HTMLImageElement", |
| "HTMLCanvasElement" |
| ], |
| "descriptionCN": "<p>材质细节的纹理贴图。</p>\n" |
| }, |
| "textureTiling": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>baseTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n", |
| "default": 1 |
| }, |
| "textureOffset": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>材质细节纹理的位移。</p>\n", |
| "default": 0 |
| } |
| } |
| }, |
| "zlevel": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": -10 |
| }, |
| "silent": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。</p>\n", |
| "default": false |
| }, |
| "animation": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否开启动画。</p>\n", |
| "default": true |
| }, |
| "animationDurationUpdate": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>过渡动画的时长。</p>\n", |
| "default": 500 |
| }, |
| "animationEasingUpdate": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>过渡动画的缓动效果。</p>\n", |
| "default": "cubicOut" |
| } |
| } |
| }, |
| { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>使用 WebGL 绘制的二维散点/气泡图。</p>\n<p>使用方式同 <a href=\"http://echarts.baidu.com/option.html#series-scatter\" target=\"_blank\">scatter</a>。</p>\n", |
| "properties": { |
| "type": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "", |
| "default": "'scatterGL'" |
| }, |
| "name": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>使用的坐标系。</p>\n<p>同 <a href=\"http://echarts.baidu.com/option.html#series-scatter.coordinateSystem\" target=\"_blank\">scatter.coordinateSystem</a></p>\n", |
| "default": "'cartesian2d'" |
| }, |
| "symbol": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "'circle'" |
| }, |
| "symbolSize": { |
| "type": [ |
| "number", |
| "Array", |
| "Function" |
| ], |
| "descriptionCN": "<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", |
| "default": 10 |
| }, |
| "itemStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>散点图的样式设置。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "自适应" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>图形的不透明度。</p>\n", |
| "default": 0.8 |
| }, |
| "borderWidth": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>图形描边宽度。</p>\n", |
| "default": 0 |
| }, |
| "borderColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>图形描边颜色。</p>\n", |
| "default": "'#fff'" |
| } |
| } |
| }, |
| "data": { |
| "type": [ |
| "Array" |
| ], |
| "descriptionCN": "<p>散点图的数据集。</p>\n<p>数据格式同 <a href=\"http://echarts.baidu.com/option.html#series-scatter.data\" target=\"_blank\">scatter.data</a></p>\n", |
| "items": { |
| "type": "Object", |
| "properties": { |
| "name": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>数据项名称。</p>\n" |
| }, |
| "value": { |
| "type": [ |
| "number", |
| "Array" |
| ], |
| "descriptionCN": "<p>数据项值</p>\n" |
| }, |
| "itemStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>单个数据图形的样式。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "自适应" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>图形的不透明度。</p>\n", |
| "default": 0.8 |
| }, |
| "borderWidth": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>图形描边宽度。</p>\n", |
| "default": 0 |
| }, |
| "borderColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>图形描边颜色。</p>\n", |
| "default": "'#fff'" |
| } |
| } |
| } |
| } |
| } |
| }, |
| "blendMode": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>混合模式，目前支持<code>'source-over'</code>，<code>'lighter'</code>，默认使用的<code>'source-over'</code>是通过 alpha 混合，而<code>'lighter'</code>是叠加模式，该模式可以让数据集中的区域因为叠加而产生高亮的效果。</p>\n", |
| "default": "'source-over'" |
| }, |
| "zlevel": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": 10 |
| } |
| } |
| }, |
| { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>使用 WebGL 绘制的关系图，支持大规模的网络/关系数据的布局和绘制。</p>\n", |
| "properties": { |
| "type": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "", |
| "default": "'graphGL'" |
| }, |
| "name": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>布局的算法，支持使用 gephi 的 <a href=\"https://github.com/gephi/gephi/wiki/Force-Atlas-2\" target=\"_blank\">forceAtlas2</a> 算法布局。</p>\n", |
| "default": "'forceAtlas2'" |
| }, |
| "forceAtlas2": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p><a href=\"https://github.com/gephi/gephi/wiki/Force-Atlas-2\" target=\"_blank\">forceAtlas2</a> 布局算法。</p>\n<p>该算法对大规模的网络数据有着高效的布局效率和稳定的布局结果。</p>\n<p>支持通过 <a href=\"#series-graphGL.forceAtlas2.GPU\">forceAtlas2.GPU</a> 配置为 GPU 还是 CPU 布局。</p>\n<p>CPU 实现的优势是兼容性好，而 GPU 实现在高端显卡中有着数十倍甚至上百倍的性能优势。</p>\n<p>下面是在 GTX1070 和 i7 4GHz 的电脑中对一个 2w 个节点，近 5w 条边的关系图一次布局的迭代的性能对比。</p>\n<p><img width=\"400\" height=\"auto\" src=\"documents/asset/gl/img/gpu-layout-perf.png\"></p>\n", |
| "properties": { |
| "GPU": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否启用 GPU 布局。</p>\n", |
| "default": true |
| }, |
| "steps": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>一次更新的迭代次数。因为力引导算法通常会把每次迭代的结果都绘制出来，但是因为绘制时间往往会大于布局的时间，会导致布局的效率降低，这时候我们可以设置更大的<code>steps</code>参数，保证布局和绘制的时间均衡，加快布局的速度。</p>\n", |
| "default": 1 |
| }, |
| "stopThreshold": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>停止布局的阈值，当布局的全局速度因子小于这个阈值时停止布局。设为 0 则永远不停止。</p>\n", |
| "default": 1 |
| }, |
| "barnesHutOptimize": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<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": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>是否根据节点边的数量来计算节点的斥力因子，建议开启。</p>\n", |
| "default": true |
| }, |
| "linLogMode": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否是<code>lin-log</code>模式。<code>lin-log</code> 模式会让聚类的节点更加紧凑。</p>\n", |
| "default": false |
| }, |
| "gravity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>节点受到的向心力。这个力会让节点像中心靠拢。</p>\n", |
| "default": 1 |
| }, |
| "gravityCenter": { |
| "type": [ |
| "Array" |
| ], |
| "descriptionCN": "<p>向心力中心的位置。默认去初始位置的中间点。</p>\n" |
| }, |
| "scaling": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>布局的缩放因子，值越大则节点间的斥力越大。</p>\n" |
| }, |
| "edgeWeightInfluence": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>边权重的影响因子。值越大，则边权重对于引力的影响也越大。</p>\n<p>注：这个因子是指数级的，因此在边权重为<code>0</code>和<code>1</code>的时候无效。</p>\n", |
| "default": 1 |
| }, |
| "edgeWeight": { |
| "type": [ |
| "Array", |
| "number" |
| ], |
| "descriptionCN": "<p>边的权重分布。映射自 <a href=\"#series-graphGL.links.value\">links.value</a>。</p>\n<p>支持设置为单个数字，这时候就是统一的权重值。</p>\n", |
| "default": "[1, 4]" |
| }, |
| "nodeWeight": { |
| "type": [ |
| "Array", |
| "number" |
| ], |
| "descriptionCN": "<p>节点的权重分布。映射自 <a href=\"#series-graphGL.nodes.value\">nodes.value</a>。</p>\n<p>支持设置为单个数字，这时候就是统一的权重值。</p>\n", |
| "default": "[1, 4]" |
| }, |
| "preventOverlap": { |
| "type": [ |
| "boolean" |
| ], |
| "descriptionCN": "<p>是否开启防止节点重叠。</p>\n", |
| "default": false |
| } |
| } |
| }, |
| "symbol": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "'circle'" |
| }, |
| "symbolSize": { |
| "type": [ |
| "number", |
| "Array", |
| "Function" |
| ], |
| "descriptionCN": "<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", |
| "default": 5 |
| }, |
| "itemStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>节点的样式设置。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "自适应" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>图形的不透明度。</p>\n", |
| "default": 1 |
| }, |
| "borderWidth": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>图形描边宽度。</p>\n", |
| "default": 0 |
| }, |
| "borderColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>图形描边颜色。</p>\n", |
| "default": "'#fff'" |
| } |
| } |
| }, |
| "lineStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>关系边的样式设置。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "#aaa" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的不透明度。</p>\n", |
| "default": 1 |
| }, |
| "width": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的宽度。</p>\n", |
| "default": 1 |
| } |
| } |
| }, |
| "data": { |
| "type": [ |
| "Array" |
| ], |
| "descriptionCN": "<p>节点的数据集。</p>\n<p>数据格式同 <a href=\"http://echarts.baidu.com/option.html#series-graph.data\" target=\"_blank\">graph.data</a></p>\n", |
| "items": { |
| "type": "Object", |
| "properties": { |
| "name": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>数据项名称。</p>\n" |
| }, |
| "value": { |
| "type": [ |
| "number", |
| "Array" |
| ], |
| "descriptionCN": "<p>数据项值</p>\n" |
| }, |
| "itemStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>单个节点的样式。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "自适应" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>图形的不透明度。</p>\n", |
| "default": 1 |
| }, |
| "borderWidth": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>图形描边宽度。</p>\n", |
| "default": 0 |
| }, |
| "borderColor": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>图形描边颜色。</p>\n", |
| "default": "'#fff'" |
| } |
| } |
| } |
| } |
| } |
| }, |
| "nodes": { |
| "type": [ |
| "Array" |
| ], |
| "descriptionCN": "<p>同 <a href=\"#series-graphGL.data\">graphGL.data</a></p>\n" |
| }, |
| "links": { |
| "type": [ |
| "Array" |
| ], |
| "descriptionCN": "<p>节点间的关系数据。\n数据格式同 <a href=\"http://echarts.baidu.com/option.html#series-graph.links\" target=\"_blank\">graph.links</a></p>\n", |
| "items": { |
| "type": "Object", |
| "properties": { |
| "source": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>边的源节点名称的字符串，也支持使用数字表示源节点的索引。</p>\n" |
| }, |
| "target": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<p>边的目标节点名称的字符串，也支持使用数字表示源节点的索引。</p>\n" |
| }, |
| "value": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>边的数值。</p>\n" |
| }, |
| "lineStyle": { |
| "type": [ |
| "Object" |
| ], |
| "descriptionCN": "<p>单条边的样式。</p>\n", |
| "properties": { |
| "color": { |
| "type": [ |
| "string" |
| ], |
| "descriptionCN": "<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", |
| "default": "#aaa" |
| }, |
| "opacity": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的不透明度。</p>\n", |
| "default": 1 |
| }, |
| "width": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<p>线条的宽度。</p>\n", |
| "default": 1 |
| } |
| } |
| } |
| } |
| } |
| }, |
| "edges": { |
| "type": [ |
| "Array" |
| ], |
| "descriptionCN": "<p>同 <a href=\"#series-graphGL.links\">graphGL.links</a></p>\n" |
| }, |
| "zlevel": { |
| "type": [ |
| "number" |
| ], |
| "descriptionCN": "<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", |
| "default": 10 |
| } |
| } |
| } |
| ] |
| }, |
| "descriptionCN": "<p>系列列表。每个系列通过 <code>type</code> 决定自己的图表类型。</p>\n<p>echarts-gl 加入了丰富的三维可视化类型，包括 <a href=\"#series.bar3D\">三维柱状图 bar3D</a>，<a href=\"#series.scatter3D\">三维散点图 scatter3D</a>，<a href=\"#series.lines3D\">三维飞线 lines3D</a>，<a href=\"#series.surface\">曲面图 surface</a>，大部分可视化类型都能在多种坐标系组件中使用。而且与 echarts 原先的图例，tooltip 等交互组件有良好的集成。</p>\n<p>同时对原先二维的图表也有功能上的增强，对于大量数据的散点图和关系图，你可以使用 echarts-gl 中提供的 <a href=\"#series.scatterGL\">scatterGL</a>，<a href=\"#series.graphGL\">graphGL</a> 加速绘制和运算。</p>\n" |
| } |
| } |
| } |
| } |
