next/zh/documents/option-gl-parts/option-gl.series-surface.js - echarts-website - Git at Google

 window.__EC_DOC_option_gl_series_surface = {
   "name": {
     "desc": "<p>系列名称，用于 <a href=\"https://echarts.apache.org/zh/option.html#tooltip\" target=\"_blank\">tooltip</a> 的显示，<a href=\"https://echarts.apache.org/zh/option.html#legend\" target=\"_blank\">legend</a> 的图例筛选，在 <code class=\"codespan\">setOption</code> 更新数据和配置项时用于指定对应的系列。</p>\n"
   },
   "coordinateSystem": {
     "desc": "<p>该系列使用的坐标系，可选：</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;cartesian3D&#39;</code></p>\n<p>  使用三维笛卡尔坐标系，通过 <a href=\"#series-.grid3DIndex\">grid3DIndex</a> 指定相应的三维笛卡尔坐标系组件。</p>\n</li>\n</ul>\n"
   },
   "grid3DIndex": {
     "desc": "<p>使用的 <a href=\"#grid3D\">grid3D</a> 组件的索引。默认使用第一个 <a href=\"#grid3D\">grid3D</a> 组件。</p>\n"
   },
   "parametric": {
     "desc": "<p>是否为参数曲面。</p>\n"
   },
   "wireframe": {
     "desc": "<p>曲面图的网格线。</p>\n"
   },
   "wireframe.show": {
     "desc": "<p>是否显示网格线。默认显示。</p>\n"
   },
   "wireframe.lineStyle": {
     "desc": "<p>网格线的样式。</p>\n"
   },
   "wireframe.lineStyle.color": {
     "desc": "<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"
   },
   "wireframe.lineStyle.opacity": {
     "desc": "<p>线条的不透明度。</p>\n"
   },
   "wireframe.lineStyle.width": {
     "desc": "<p>线条的宽度。</p>\n"
   },
   "equation": {
     "desc": "<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"
   },
   "equation.x": {
     "desc": "<p>自变量 x。</p>\n"
   },
   "equation.x.step": {
     "desc": "<p>x 的步长。</p>\n"
   },
   "equation.x.min": {
     "desc": "<p>x 的最小值。</p>\n"
   },
   "equation.x.max": {
     "desc": "<p>x 的最大值。</p>\n"
   },
   "equation.y": {
     "desc": "<p>自变量 y。</p>\n"
   },
   "equation.y.step": {
     "desc": "<p>y 的步长。</p>\n"
   },
   "equation.y.min": {
     "desc": "<p>y 的最小值。</p>\n"
   },
   "equation.y.max": {
     "desc": "<p>y 的最大值。</p>\n"
   },
   "equation.z": {
     "desc": "<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) =&gt; number\n</code></pre>\n"
   },
   "parametricEquation": {
     "desc": "<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 class=\"codespan\">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> 的方程。</p>\n<p>下面的参数方程就是绘制前面图中类似一个金属零件的参数曲面的：</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"
   },
   "parametricEquation.u": {
     "desc": "<p>自变量 u。</p>\n"
   },
   "parametricEquation.u.step": {
     "desc": "<p>u 的步长。</p>\n"
   },
   "parametricEquation.u.min": {
     "desc": "<p>u 的最小值。</p>\n"
   },
   "parametricEquation.u.max": {
     "desc": "<p>u 的最大值。</p>\n"
   },
   "parametricEquation.v": {
     "desc": "<p>自变量 v。</p>\n"
   },
   "parametricEquation.v.step": {
     "desc": "<p>v 的步长。</p>\n"
   },
   "parametricEquation.v.min": {
     "desc": "<p>v 的最小值。</p>\n"
   },
   "parametricEquation.v.max": {
     "desc": "<p>v 的最大值。</p>\n"
   },
   "parametricEquation.x": {
     "desc": "<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) =&gt; number\n</code></pre>\n"
   },
   "parametricEquation.y": {
     "desc": "<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) =&gt; number\n</code></pre>\n"
   },
   "parametricEquation.z": {
     "desc": "<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) =&gt; number\n</code></pre>\n"
   },
   "itemStyle": {
     "desc": "<p>曲面的颜色、不透明度等样式。</p>\n"
   },
   "itemStyle.color": {
     "desc": "<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"
   },
   "itemStyle.opacity": {
     "desc": "<p>图形的不透明度。</p>\n"
   },
   "data": {
     "desc": "<p>曲面图的数据数组。</p>\n<p>数据是线性存储的数组，包含<code class=\"codespan\">X 顶点数</code>x<code class=\"codespan\">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 class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">z</code>。</p>\n<p>对于参数方程来说，每一项需要存储五个数据，分别是 <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">z</code> 和参数 <code class=\"codespan\">u</code>, <code class=\"codespan\">v</code>。而数据的索引按照<code class=\"codespan\">u</code>, <code class=\"codespan\">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: &#39;数据1&#39;,\n    // 数据项值\n    value: [12, 14, 10]\n}, {\n    name: &#39;数据2&#39;,\n    value: [34, 50, 15]\n}]\n</code></pre>\n<p>需要对个别内容指定进行个性化定义时：</p>\n<pre><code class=\"lang-js\">[{\n    name: &#39;数据1&#39;,\n    value: [12, 14, 10]\n}, {\n    // 数据项名称\n    name: &#39;数据2&#39;,\n    value : [34, 50, 15],\n    //自定义特殊itemStyle，仅对该item有效\n    itemStyle:{}\n}]\n</code></pre>\n"
   },
   "data.name": {
     "desc": "<p>数据项名称。</p>\n"
   },
   "data.value": {
     "desc": "<p>数据项值。</p>\n"
   },
   "data.itemStyle": {
     "desc": "<p>单个数据项的样式设置。</p>\n"
   },
   "data.itemStyle.color": {
     "desc": "<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"
   },
   "data.itemStyle.opacity": {
     "desc": "<p>图形的不透明度。</p>\n"
   },
   "shading": {
     "desc": "<p>曲面图中三维图形的着色效果。echarts-gl 中支持下面三种着色方式：</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;color&#39;</code>\n只显示颜色，不受光照等其它因素的影响。</p>\n</li>\n<li><p><code class=\"codespan\">&#39;lambert&#39;</code>\n通过经典的 <a href=\"https://en.wikipedia.org/wiki/Lambertian_reflectance\" target=\"_blank\">lambert</a> 着色表现光照带来的明暗。</p>\n</li>\n<li><p><code class=\"codespan\">&#39;realistic&#39;</code>\n真实感渲染，配合 <a href=\"#globe.light.ambientCubemap\">light.ambientCubemap</a> 和 <a href=\"#globe.postEffect\">postEffect</a> 使用可以让展示的画面效果和质感有质的提升。ECharts GL 中使用了<a href=\"https://www.marmoset.co/posts/physically-based-rendering-and-you-can-too/\" target=\"_blank\">基于物理的渲染（PBR）</a> 来表现真实感材质。</p>\n</li>\n</ul>\n"
   },
   "realisticMaterial": {
     "desc": "<p>真实感材质相关的配置项，在 <a href=\"#series-surface.shading\">shading</a> 为<code class=\"codespan\">&#39;realistic&#39;</code>时有效。</p>\n"
   },
   "realisticMaterial.detailTexture": {
     "desc": "<p>材质细节的纹理贴图。</p>\n"
   },
   "realisticMaterial.textureTiling": {
     "desc": "<p>材质细节纹理的平铺。默认为<code class=\"codespan\">1</code>，也就是拉伸填满。大于 <code class=\"codespan\">1</code> 的时候，数字表示纹理平铺重复的次数。</p>\n<p><strong>注：</strong> 使用平铺需要 <code class=\"codespan\">detailTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n"
   },
   "realisticMaterial.textureOffset": {
     "desc": "<p>材质细节纹理的位移。</p>\n"
   },
   "realisticMaterial.roughness": {
     "desc": "<p><code class=\"codespan\">roughness</code>属性用于表示材质的粗糙度，<code class=\"codespan\">0</code>为完全光滑，<code class=\"codespan\">1</code>完全粗糙，中间的值则是介于这两者之间。</p>\n<p>下图是 <a href=\"#globe\">globe</a> 中<code class=\"codespan\">roughness</code>分别是<code class=\"codespan\">0.2</code>（光滑）与<code class=\"codespan\">0.8</code>（粗糙）的效果。</p>\n<p><img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-gloss.png\">\n<img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-rough.png\"></p>\n<p>当你想要表达更复杂的材质时。你可以直接将 <code class=\"codespan\">roughness</code> 设置为如下用每个像素存储粗糙度的贴图。</p>\n<p><img width=\"300\" height=\"300\" src=\"documents/asset/gl/img/roughness.png\"></p>\n<p>贴图中颜色越白的地方值越大，就越粗糙。你可以从 <a href=\"http://freepbr.com/\" target=\"_blank\">http://freepbr.com/</a> 等资源网站获取不同材质的贴图资源，也可以使用其他工具自己生成。</p>\n"
   },
   "realisticMaterial.metalness": {
     "desc": "<p><code class=\"codespan\">metalness</code>属性用于表示材质是金属还是非金属，<code class=\"codespan\">0</code>为非金属，<code class=\"codespan\">1</code>为金属，中间的值则是介于这两者之间。通常设成<code class=\"codespan\">0</code>和<code class=\"codespan\">1</code>就能满足大部分场景了。</p>\n<p>下图是 <a href=\"#globe\">globe</a> 中<code class=\"codespan\">metalness</code>分别设成<code class=\"codespan\">1</code>与<code class=\"codespan\">0</code>的效果区别。</p>\n<p><img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-metal.png\">\n<img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-non-metal.png\"></p>\n<p>跟 <a href=\"#series-surface.realisticMaterial.roughness\">roughness</a> 一样 你可以直接将 <code class=\"codespan\">metalness</code> 设置为金属度贴图。</p>\n"
   },
   "realisticMaterial.roughnessAdjust": {
     "desc": "<p>粗糙度调整，在使用粗糙度贴图的时候有用。可以对贴图整体的粗糙度进行调整。默认为 <code class=\"codespan\">0.5</code>，<code class=\"codespan\">0</code>的时候为完全光滑，<code class=\"codespan\">1</code>的时候为完全粗糙。</p>\n"
   },
   "realisticMaterial.metalnessAdjust": {
     "desc": "<p>金属度调整，在使用金属度贴图的时候有用。可以对贴图整体的金属度进行调整。默认为 <code class=\"codespan\">0.5</code>，<code class=\"codespan\">0</code>的时候为非金属，<code class=\"codespan\">1</code>的时候为金属。</p>\n"
   },
   "realisticMaterial.normalTexture": {
     "desc": "<p>材质细节的法线贴图。</p>\n<p>使用法线贴图可以在较少的顶点下依然表现出物体表面丰富的明暗细节。</p>\n"
   },
   "lambertMaterial": {
     "desc": "<p>lambert 材质相关的配置项，在 <a href=\"#series-surface.shading\">shading</a> 为<code class=\"codespan\">&#39;lambert&#39;</code>时有效。</p>\n"
   },
   "lambertMaterial.detailTexture": {
     "desc": "<p>材质细节的纹理贴图。</p>\n"
   },
   "lambertMaterial.textureTiling": {
     "desc": "<p>材质细节纹理的平铺。默认为<code class=\"codespan\">1</code>，也就是拉伸填满。大于 <code class=\"codespan\">1</code> 的时候，数字表示纹理平铺重复的次数。</p>\n<p><strong>注：</strong> 使用平铺需要 <code class=\"codespan\">detailTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n"
   },
   "lambertMaterial.textureOffset": {
     "desc": "<p>材质细节纹理的位移。</p>\n"
   },
   "colorMaterial": {
     "desc": "<p>color 材质相关的配置项，在 <a href=\"#series-surface.shading\">shading</a> 为<code class=\"codespan\">&#39;color&#39;</code>时有效。</p>\n"
   },
   "colorMaterial.detailTexture": {
     "desc": "<p>材质细节的纹理贴图。</p>\n"
   },
   "colorMaterial.textureTiling": {
     "desc": "<p>材质细节纹理的平铺。默认为<code class=\"codespan\">1</code>，也就是拉伸填满。大于 <code class=\"codespan\">1</code> 的时候，数字表示纹理平铺重复的次数。</p>\n<p><strong>注：</strong> 使用平铺需要 <code class=\"codespan\">detailTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n"
   },
   "colorMaterial.textureOffset": {
     "desc": "<p>材质细节纹理的位移。</p>\n"
   },
   "zlevel": {
     "desc": "<p>组件所在的层。</p>\n<p><code class=\"codespan\">zlevel</code>用于 Canvas 分层，不同<code class=\"codespan\">zlevel</code>值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的<code class=\"codespan\">zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。</p>\n<p><code class=\"codespan\">zlevel</code> 大的 Canvas 会放在 <code class=\"codespan\">zlevel</code> 小的 Canvas 的上面。</p>\n<p><strong>注:</strong> echarts-gl 中组件的层需要跟 echarts 中组件的层分开。同一个 <code class=\"codespan\">zlevel</code> 不能同时用于 WebGL 和 Canvas 的绘制。</p>\n"
   },
   "silent": {
     "desc": "<p>图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。</p>\n"
   },
   "animation": {
     "desc": "<p>是否开启动画。</p>\n"
   },
   "animationDurationUpdate": {
     "desc": "<p>过渡动画的时长。</p>\n"
   },
   "animationEasingUpdate": {
     "desc": "<p>过渡动画的缓动效果。</p>\n"
   }
 }
	window.__EC_DOC_option_gl_series_surface = {
	"name": {
	"desc": "<p>系列名称，用于 <a href=\"https://echarts.apache.org/zh/option.html#tooltip\" target=\"_blank\">tooltip</a> 的显示，<a href=\"https://echarts.apache.org/zh/option.html#legend\" target=\"_blank\">legend</a> 的图例筛选，在 <code class=\"codespan\">setOption</code> 更新数据和配置项时用于指定对应的系列。</p>\n"
	},
	"coordinateSystem": {
	"desc": "<p>该系列使用的坐标系，可选：</p>\n<ul>\n<li><p><code class=\"codespan\">'cartesian3D'</code></p>\n<p> 使用三维笛卡尔坐标系，通过 <a href=\"#series-.grid3DIndex\">grid3DIndex</a> 指定相应的三维笛卡尔坐标系组件。</p>\n</li>\n</ul>\n"
	},
	"grid3DIndex": {
	"desc": "<p>使用的 <a href=\"#grid3D\">grid3D</a> 组件的索引。默认使用第一个 <a href=\"#grid3D\">grid3D</a> 组件。</p>\n"
	},
	"parametric": {
	"desc": "<p>是否为参数曲面。</p>\n"
	},
	"wireframe": {
	"desc": "<p>曲面图的网格线。</p>\n"
	},
	"wireframe.show": {
	"desc": "<p>是否显示网格线。默认显示。</p>\n"
	},
	"wireframe.lineStyle": {
	"desc": "<p>网格线的样式。</p>\n"
	},
	"wireframe.lineStyle.color": {
	"desc": "<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"
	},
	"wireframe.lineStyle.opacity": {
	"desc": "<p>线条的不透明度。</p>\n"
	},
	"wireframe.lineStyle.width": {
	"desc": "<p>线条的宽度。</p>\n"
	},
	"equation": {
	"desc": "<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"
	},
	"equation.x": {
	"desc": "<p>自变量 x。</p>\n"
	},
	"equation.x.step": {
	"desc": "<p>x 的步长。</p>\n"
	},
	"equation.x.min": {
	"desc": "<p>x 的最小值。</p>\n"
	},
	"equation.x.max": {
	"desc": "<p>x 的最大值。</p>\n"
	},
	"equation.y": {
	"desc": "<p>自变量 y。</p>\n"
	},
	"equation.y.step": {
	"desc": "<p>y 的步长。</p>\n"
	},
	"equation.y.min": {
	"desc": "<p>y 的最小值。</p>\n"
	},
	"equation.y.max": {
	"desc": "<p>y 的最大值。</p>\n"
	},
	"equation.z": {
	"desc": "<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": {
	"desc": "<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 class=\"codespan\">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> 的方程。</p>\n<p>下面的参数方程就是绘制前面图中类似一个金属零件的参数曲面的：</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"
	},
	"parametricEquation.u": {
	"desc": "<p>自变量 u。</p>\n"
	},
	"parametricEquation.u.step": {
	"desc": "<p>u 的步长。</p>\n"
	},
	"parametricEquation.u.min": {
	"desc": "<p>u 的最小值。</p>\n"
	},
	"parametricEquation.u.max": {
	"desc": "<p>u 的最大值。</p>\n"
	},
	"parametricEquation.v": {
	"desc": "<p>自变量 v。</p>\n"
	},
	"parametricEquation.v.step": {
	"desc": "<p>v 的步长。</p>\n"
	},
	"parametricEquation.v.min": {
	"desc": "<p>v 的最小值。</p>\n"
	},
	"parametricEquation.v.max": {
	"desc": "<p>v 的最大值。</p>\n"
	},
	"parametricEquation.x": {
	"desc": "<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"
	},
	"parametricEquation.y": {
	"desc": "<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"
	},
	"parametricEquation.z": {
	"desc": "<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": {
	"desc": "<p>曲面的颜色、不透明度等样式。</p>\n"
	},
	"itemStyle.color": {
	"desc": "<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"
	},
	"itemStyle.opacity": {
	"desc": "<p>图形的不透明度。</p>\n"
	},
	"data": {
	"desc": "<p>曲面图的数据数组。</p>\n<p>数据是线性存储的数组，包含<code class=\"codespan\">X 顶点数</code>x<code class=\"codespan\">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 class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">z</code>。</p>\n<p>对于参数方程来说，每一项需要存储五个数据，分别是 <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">z</code> 和参数 <code class=\"codespan\">u</code>, <code class=\"codespan\">v</code>。而数据的索引按照<code class=\"codespan\">u</code>, <code class=\"codespan\">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"
	},
	"data.name": {
	"desc": "<p>数据项名称。</p>\n"
	},
	"data.value": {
	"desc": "<p>数据项值。</p>\n"
	},
	"data.itemStyle": {
	"desc": "<p>单个数据项的样式设置。</p>\n"
	},
	"data.itemStyle.color": {
	"desc": "<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"
	},
	"data.itemStyle.opacity": {
	"desc": "<p>图形的不透明度。</p>\n"
	},
	"shading": {
	"desc": "<p>曲面图中三维图形的着色效果。echarts-gl 中支持下面三种着色方式：</p>\n<ul>\n<li><p><code class=\"codespan\">'color'</code>\n只显示颜色，不受光照等其它因素的影响。</p>\n</li>\n<li><p><code class=\"codespan\">'lambert'</code>\n通过经典的 <a href=\"https://en.wikipedia.org/wiki/Lambertian_reflectance\" target=\"_blank\">lambert</a> 着色表现光照带来的明暗。</p>\n</li>\n<li><p><code class=\"codespan\">'realistic'</code>\n真实感渲染，配合 <a href=\"#globe.light.ambientCubemap\">light.ambientCubemap</a> 和 <a href=\"#globe.postEffect\">postEffect</a> 使用可以让展示的画面效果和质感有质的提升。ECharts GL 中使用了<a href=\"https://www.marmoset.co/posts/physically-based-rendering-and-you-can-too/\" target=\"_blank\">基于物理的渲染（PBR）</a> 来表现真实感材质。</p>\n</li>\n</ul>\n"
	},
	"realisticMaterial": {
	"desc": "<p>真实感材质相关的配置项，在 <a href=\"#series-surface.shading\">shading</a> 为<code class=\"codespan\">'realistic'</code>时有效。</p>\n"
	},
	"realisticMaterial.detailTexture": {
	"desc": "<p>材质细节的纹理贴图。</p>\n"
	},
	"realisticMaterial.textureTiling": {
	"desc": "<p>材质细节纹理的平铺。默认为<code class=\"codespan\">1</code>，也就是拉伸填满。大于 <code class=\"codespan\">1</code> 的时候，数字表示纹理平铺重复的次数。</p>\n<p><strong>注：</strong> 使用平铺需要 <code class=\"codespan\">detailTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n"
	},
	"realisticMaterial.textureOffset": {
	"desc": "<p>材质细节纹理的位移。</p>\n"
	},
	"realisticMaterial.roughness": {
	"desc": "<p><code class=\"codespan\">roughness</code>属性用于表示材质的粗糙度，<code class=\"codespan\">0</code>为完全光滑，<code class=\"codespan\">1</code>完全粗糙，中间的值则是介于这两者之间。</p>\n<p>下图是 <a href=\"#globe\">globe</a> 中<code class=\"codespan\">roughness</code>分别是<code class=\"codespan\">0.2</code>（光滑）与<code class=\"codespan\">0.8</code>（粗糙）的效果。</p>\n<p><img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-gloss.png\">\n<img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-rough.png\"></p>\n<p>当你想要表达更复杂的材质时。你可以直接将 <code class=\"codespan\">roughness</code> 设置为如下用每个像素存储粗糙度的贴图。</p>\n<p><img width=\"300\" height=\"300\" src=\"documents/asset/gl/img/roughness.png\"></p>\n<p>贴图中颜色越白的地方值越大，就越粗糙。你可以从 <a href=\"http://freepbr.com/\" target=\"_blank\">http://freepbr.com/</a> 等资源网站获取不同材质的贴图资源，也可以使用其他工具自己生成。</p>\n"
	},
	"realisticMaterial.metalness": {
	"desc": "<p><code class=\"codespan\">metalness</code>属性用于表示材质是金属还是非金属，<code class=\"codespan\">0</code>为非金属，<code class=\"codespan\">1</code>为金属，中间的值则是介于这两者之间。通常设成<code class=\"codespan\">0</code>和<code class=\"codespan\">1</code>就能满足大部分场景了。</p>\n<p>下图是 <a href=\"#globe\">globe</a> 中<code class=\"codespan\">metalness</code>分别设成<code class=\"codespan\">1</code>与<code class=\"codespan\">0</code>的效果区别。</p>\n<p><img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-metal.png\">\n<img width=\"auto\" height=\"280\" src=\"documents/asset/gl/img/globe-non-metal.png\"></p>\n<p>跟 <a href=\"#series-surface.realisticMaterial.roughness\">roughness</a> 一样你可以直接将 <code class=\"codespan\">metalness</code> 设置为金属度贴图。</p>\n"
	},
	"realisticMaterial.roughnessAdjust": {
	"desc": "<p>粗糙度调整，在使用粗糙度贴图的时候有用。可以对贴图整体的粗糙度进行调整。默认为 <code class=\"codespan\">0.5</code>，<code class=\"codespan\">0</code>的时候为完全光滑，<code class=\"codespan\">1</code>的时候为完全粗糙。</p>\n"
	},
	"realisticMaterial.metalnessAdjust": {
	"desc": "<p>金属度调整，在使用金属度贴图的时候有用。可以对贴图整体的金属度进行调整。默认为 <code class=\"codespan\">0.5</code>，<code class=\"codespan\">0</code>的时候为非金属，<code class=\"codespan\">1</code>的时候为金属。</p>\n"
	},
	"realisticMaterial.normalTexture": {
	"desc": "<p>材质细节的法线贴图。</p>\n<p>使用法线贴图可以在较少的顶点下依然表现出物体表面丰富的明暗细节。</p>\n"
	},
	"lambertMaterial": {
	"desc": "<p>lambert 材质相关的配置项，在 <a href=\"#series-surface.shading\">shading</a> 为<code class=\"codespan\">'lambert'</code>时有效。</p>\n"
	},
	"lambertMaterial.detailTexture": {
	"desc": "<p>材质细节的纹理贴图。</p>\n"
	},
	"lambertMaterial.textureTiling": {
	"desc": "<p>材质细节纹理的平铺。默认为<code class=\"codespan\">1</code>，也就是拉伸填满。大于 <code class=\"codespan\">1</code> 的时候，数字表示纹理平铺重复的次数。</p>\n<p><strong>注：</strong> 使用平铺需要 <code class=\"codespan\">detailTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n"
	},
	"lambertMaterial.textureOffset": {
	"desc": "<p>材质细节纹理的位移。</p>\n"
	},
	"colorMaterial": {
	"desc": "<p>color 材质相关的配置项，在 <a href=\"#series-surface.shading\">shading</a> 为<code class=\"codespan\">'color'</code>时有效。</p>\n"
	},
	"colorMaterial.detailTexture": {
	"desc": "<p>材质细节的纹理贴图。</p>\n"
	},
	"colorMaterial.textureTiling": {
	"desc": "<p>材质细节纹理的平铺。默认为<code class=\"codespan\">1</code>，也就是拉伸填满。大于 <code class=\"codespan\">1</code> 的时候，数字表示纹理平铺重复的次数。</p>\n<p><strong>注：</strong> 使用平铺需要 <code class=\"codespan\">detailTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n"
	},
	"colorMaterial.textureOffset": {
	"desc": "<p>材质细节纹理的位移。</p>\n"
	},
	"zlevel": {
	"desc": "<p>组件所在的层。</p>\n<p><code class=\"codespan\">zlevel</code>用于 Canvas 分层，不同<code class=\"codespan\">zlevel</code>值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的<code class=\"codespan\">zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。</p>\n<p><code class=\"codespan\">zlevel</code> 大的 Canvas 会放在 <code class=\"codespan\">zlevel</code> 小的 Canvas 的上面。</p>\n<p><strong>注:</strong> echarts-gl 中组件的层需要跟 echarts 中组件的层分开。同一个 <code class=\"codespan\">zlevel</code> 不能同时用于 WebGL 和 Canvas 的绘制。</p>\n"
	},
	"silent": {
	"desc": "<p>图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。</p>\n"
	},
	"animation": {
	"desc": "<p>是否开启动画。</p>\n"
	},
	"animationDurationUpdate": {
	"desc": "<p>过渡动画的时长。</p>\n"
	},
	"animationEasingUpdate": {
	"desc": "<p>过渡动画的缓动效果。</p>\n"
	}
	}