release 3.6.2
diff --git a/public/cn/documents/asset/gl/img/geo-size.png b/public/cn/documents/asset/gl/img/geo-size.png
index d6da123..cffd2fe 100644
--- a/public/cn/documents/asset/gl/img/geo-size.png
+++ b/public/cn/documents/asset/gl/img/geo-size.png
Binary files differ
diff --git a/public/cn/documents/asset/gl/img/geo-size.sketch b/public/cn/documents/asset/gl/img/geo-size.sketch
index 277208b..8b5f83c 100644
--- a/public/cn/documents/asset/gl/img/geo-size.sketch
+++ b/public/cn/documents/asset/gl/img/geo-size.sketch
Binary files differ
diff --git a/public/cn/documents/asset/gl/img/roughness.png b/public/cn/documents/asset/gl/img/roughness.png
new file mode 100644
index 0000000..76eb955
--- /dev/null
+++ b/public/cn/documents/asset/gl/img/roughness.png
Binary files differ
diff --git a/public/cn/documents/cn/changelog.html b/public/cn/documents/cn/changelog.html
index 635e1b4..906bf13 100644
--- a/public/cn/documents/cn/changelog.html
+++ b/public/cn/documents/cn/changelog.html
@@ -1,3 +1,36 @@
+<h2 id="3-6-2">3.6.2</h2>
+<div class="time">2017-06-15</div>
+
+<ul>
+<li><p>[+] <a href="http://echarts.baidu.com/option.html#series-custom">自定义系列（custom series）</a> 支持 <a href="https://github.com/ecomfe/echarts/tree/master/extension/bmap">百度地图插件（bmap）</a>。参见 <a href="http://echarts.baidu.com/demo.html#map-polygon">示例 1</a> 和 <a href="http://echarts.baidu.com/demo.html#map-bin">示例 2</a>。</p>
+</li>
+<li><p>[+] <a href="http://echarts.baidu.com/option.html#series-treemap">treemap</a> 支持父节点标签的显示。参见 <a href="http://echarts.baidu.com/demo.html#treemap-show-parent">示例</a>。参见：<a href="https://github.com/ecomfe/echarts/issues/5869">#5869</a>、<a href="https://github.com/ecomfe/echarts/issues/5579">#5579</a>。</p>
+</li>
+<li><p>[+] 支持图形元素上的鼠标 cursor 样式指定：<a href="http://echarts.baidu.com/option.html#series-line.cursor">series-line.cursor</a>、<a href="http://echarts.baidu.com/option.html#series-bar.cursor">series-bar.cursor</a>、<a href="http://echarts.baidu.com/option.html#series-pie.cursor">series-pie.cursor</a>、<a href="http://echarts.baidu.com/option.html#series-scatter.cursor">series-scatter.cursor</a>、<a href="http://echarts.baidu.com/option.html#series-effectScatter.cursor">series-effectScatter.cursor</a>、<a href="http://echarts.baidu.com/option.html#series-graph.cursor">series-graph.cursor</a>、<a href="http://echarts.baidu.com/option.html#series-pictorialBar.cursor">series-pictorialBar.cursor</a>。</p>
+</li>
+<li><p>[+] 支持了 <a href="http://echarts.baidu.com/option.html#series-picotrialBar.symbolBoundingData">series-picotrialBar.symbolBoundingData</a> 可以同时设置正向的值和负向的值。参见 <a href="https://github.com/ecomfe/echarts/issues/5793">#5793</a>。</p>
+</li>
+<li><p>[+] <code>graph</code> 支持通过设置 <a href="http://echarts.baidu.com/option.html#series-graph.data.fixed">fixed</a> 固定力引导布局中的指定节点。参见 <a href="https://github.com/ecomfe/echarts/issues/5966">#5966</a>。</p>
+</li>
+<li><p>[+] <code>treemap</code> 支持了 <a href="http://echarts.baidu.com/option.html#series-treemap.label.normal.formatter">label.formatter</a>。参见 <a href="https://github.com/ecomfe/echarts/issues/5757">#5757</a>。</p>
+</li>
+<li><p>[+] <code>timeline</code> 支持了 <a href="http://echarts.baidu.com/option.html#timeline.label.normal.textStyle.align">label.normal.textStyle.align</a> 和 <a href="http://echarts.baidu.com/option.html#timeline.label.normal.textStyle.basealign">label.normal.textStyle.basealign</a>。参见 <a href="https://github.com/ecomfe/echarts/issues/5960">#5960</a>。</p>
+</li>
+<li><p>[^] 修正了当 <a href="http://echarts.baidu.com/demo.html#scatter-large">large scatter</a> 缩放后，<code>tooltip</code> 不显示的问题。参见 <a href="https://github.com/ecomfe/echarts/issues/5837">#5837</a>。</p>
+</li>
+<li><p>[^] 修正了触发 <a href="http://echarts.baidu.com/api.html#action.tooltip.showTip">showTip</a> action 时 <code>position</code> 参数无效的问题。参见 <a href="https://github.com/ecomfe/echarts/issues/5874">#5874</a>。</p>
+</li>
+<li><p>[^] 修正了因精度导致的有时 <a href="http://echarts.baidu.com/option.html#series-pie">pie</a> 显示出的百分比总值不足 <code>100%</code> 的问题。参见 <a href="https://github.com/ecomfe/echarts/issues/5850">#5850</a>。</p>
+</li>
+<li><p>[^] 修正了当 <code>series.name</code> 相同时，只会显示最后一个系列的 <code>markPoint</code> 或 <code>markLine</code> 的问题。参见 <a href="https://github.com/ecomfe/echarts/issues/5712">#5712</a>。</p>
+</li>
+<li><p>[^] 修正了 <a href="http://echarts.baidu.com/option.html#series-bar.itemStyle.normal.barBorderRadius">barBorderRadius</a> 在水平条形图中不工作的问题。参见 <a href="https://github.com/ecomfe/echarts/issues/5943">#5943</a>。</p>
+</li>
+<li><p>[^] 修正了 <a href="http://echarts.baidu.com/option.html#dataZoom-inside">dataZoom-inside</a> 使用在 Y 轴时缩放点错误的问题。参见 <a href="https://github.com/ecomfe/echarts/issues/5278">#5278</a>。</p>
+</li>
+<li><p>[^] 修正了 <a href="http://echarts.baidu.com/option.html#series-radar">radar</a> 在某些数据中绘制不出的问题。参见 <a href="https://github.com/ecomfe/echarts/issues/5986">#5986</a>。</p>
+</li>
+</ul>
<h2 id="v3-6-1">v3.6.1</h2>
<div class="time">2017-05-26</div>
diff --git a/public/cn/documents/cn/option-gl.json b/public/cn/documents/cn/option-gl.json
index cc74b17..c400d0a 100644
--- a/public/cn/documents/cn/option-gl.json
+++ b/public/cn/documents/cn/option-gl.json
@@ -23,6 +23,13 @@
"descriptionCN": "<p>地球的半径。单位相对于三维空间，跟 <a href=\"#globe.viewControl.distance\">viewControl.distance</a> 相关。</p>\n",
"default": 100
},
+ "globeOuterRadius": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p>地球的外半径。<code>globeRadius</code> 到 <code>globeOuterRadius</code> 之间这篇区域会被用于展示三维柱状图，散点图等。</p>\n",
+ "default": 150
+ },
"environment": {
"type": [
"string"
@@ -73,7 +80,7 @@
"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"
+ "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> 使用可以让展示的画面效果和质感有质的提升。ECharts GL 中使用了<a href=\"https://www.marmoset.co/posts/physically-based-rendering-and-you-can-too/\" target=\"_blank\">基于物理的渲染（PBR)</a> 来表现真实感材质。</p>\n</li>\n</ul>\n<p>下面是不同着色效果的区别</p>\n<p><img width=\"250\" height=\"auto\" src=\"documents/asset/gl/img/globe-shading-color.png\">\n<img width=\"250\" height=\"auto\" src=\"documents/asset/gl/img/globe-shading-lambert.png\">\n<img width=\"250\" height=\"auto\" src=\"documents/asset/gl/img/globe-shading-realistic.png\"></p>\n"
},
"realisticMaterial": {
"type": [
@@ -81,18 +88,128 @@
],
"descriptionCN": "<p>真实感材质相关的配置项，在 <a href=\"#globe.shading\">shading</a> 为<code>'realistic'</code>时有效。</p>\n",
"properties": {
- "roughness": {
+ "detailTexture": {
+ "type": [
+ "string",
+ "HTMLImageElement",
+ "HTMLCanvasElement"
+ ],
+ "descriptionCN": "<p>材质细节的纹理贴图。</p>\n"
+ },
+ "textureTiling": {
"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",
+ "descriptionCN": "<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>detailTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n",
+ "default": 1
+ },
+ "textureOffset": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p>材质细节纹理的位移。</p>\n",
+ "default": 0
+ },
+ "roughness": {
+ "type": [
+ "number",
+ "string",
+ "HTMLImageElement",
+ "HTMLCanvasElement"
+ ],
+ "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<p>当你想要表达更复杂的材质时。你可以直接将 <code>roughness</code> 设置为如下用每个像素存储粗糙度的贴图。</p>\n<p><img width=\"300\" height=\"300\" src=\"documents/asset/gl/img/roughness.png\"></p>\n<p>贴图中颜色越白的地方值越大，也就是越粗糙。你可以从 <a href=\"http://freepbr.com/\" target=\"_blank\">http://freepbr.com/</a> 等资源网站获取不同材质的贴图资源，也可以自己使用工具生成。</p>\n",
"default": 0.5
},
"metalness": {
"type": [
+ "number",
+ "string",
+ "HTMLImageElement",
+ "HTMLCanvasElement"
+ ],
+ "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<p>跟 <a href=\"#globe.realisticMaterial.roughness\">roughness</a> 一样 你可以直接将 <code>metalness</code> 设置为金属度贴图。</p>\n",
+ "default": 0
+ },
+ "roughnessAdjust": {
+ "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",
+ "descriptionCN": "<p>粗糙度调整，在使用粗糙度贴图的时候有用。可以对贴图整体的粗糙度进行调整。默认为 0.5 的时候不调整，0 的时候变成完全光滑，1 的时候变成完全粗糙。</p>\n",
+ "default": 0.5
+ },
+ "metalnessAdjust": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p>金属度调整，在使用金属度贴图的时候有用。可以对贴图整体的金属度进行调整。默认为 0.5 的时候不调整，0 的时候变成非金属，1 的时候变成金属。</p>\n",
+ "default": 0.5
+ },
+ "normalTexture": {
+ "type": [
+ "string",
+ "HTMLImageElement",
+ "HTMLCanvasElement"
+ ],
+ "descriptionCN": "<p>材质细节的法线贴图。</p>\n<p>使用法线贴图可以在较少的顶点下依然表现出物体表面丰富的明暗细节。</p>\n"
+ }
+ }
+ },
+ "lambertMaterial": {
+ "type": [
+ "Object"
+ ],
+ "descriptionCN": "<p>lambert 材质相关的配置项，在 <a href=\"#globe.shading\">shading</a> 为<code>'lambert'</code>时有效。</p>\n",
+ "properties": {
+ "detailTexture": {
+ "type": [
+ "string",
+ "HTMLImageElement",
+ "HTMLCanvasElement"
+ ],
+ "descriptionCN": "<p>材质细节的纹理贴图。</p>\n"
+ },
+ "textureTiling": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>detailTexture</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=\"#globe.shading\">shading</a> 为<code>'color'</code>时有效。</p>\n",
+ "properties": {
+ "detailTexture": {
+ "type": [
+ "string",
+ "HTMLImageElement",
+ "HTMLCanvasElement"
+ ],
+ "descriptionCN": "<p>材质细节的纹理贴图。</p>\n"
+ },
+ "textureTiling": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>detailTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n",
+ "default": 1
+ },
+ "textureOffset": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p>材质细节纹理的位移。</p>\n",
"default": 0
}
}
@@ -730,15 +847,15 @@
"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",
+ "descriptionCN": "<p>三维地理坐标系组件组件在三维场景中的宽度。配合 <a href=\"#geo3D.viewControl.distance\">viewControl.distance</a> 可以得到最合适的展示尺寸。</p>\n<p>下面是三维地理坐标系组件 中<code>boxWidth</code>, <code>boxHeight</code>, <code>boxDepth</code>, <code>regionHeight</code>的示意图。</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/gl/img/geo-size.png\"></p>\n",
"default": 100
},
"boxHeight": {
"type": [
"number"
],
- "descriptionCN": "<p>三维地理坐标系组件组件在三维场景中的高度。</p>\n",
- "default": 3
+ "descriptionCN": "<p>三维地理坐标系组件组件在三维场景中的高度。</p>\n<p>组件高度。这个高度包含三维地图上的柱状图，散点图。</p>\n",
+ "default": 10
},
"boxDepth": {
"type": [
@@ -747,6 +864,13 @@
"descriptionCN": "<p>三维地理坐标系组件组件在三维场景中的深度。</p>\n<p>组件深度默认自动，保证三维组件的显示比例跟输入的 GeoJSON 的比例相同</p>\n",
"default": "auto"
},
+ "regionHeight": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p>三维地图每个区域的高度。这个高度是模型的高度，小于 <a href=\"#geo3D.boxHeight\">boxHeight</a>。<code>boxHeight - regionHeight</code> 这一片区域会被用于三维柱状图，散点图等的展示。</p>\n",
+ "default": 3
+ },
"environment": {
"type": [
"string"
@@ -1272,7 +1396,7 @@
"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"
+ "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> 使用可以让展示的画面效果和质感有质的提升。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": {
"type": [
@@ -1280,21 +1404,7 @@
],
"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": {
+ "detailTexture": {
"type": [
"string",
"HTMLImageElement",
@@ -1306,7 +1416,7 @@
"type": [
"number"
],
- "descriptionCN": "<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>baseTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n",
+ "descriptionCN": "<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>detailTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n",
"default": 1
},
"textureOffset": {
@@ -1315,6 +1425,48 @@
],
"descriptionCN": "<p>材质细节纹理的位移。</p>\n",
"default": 0
+ },
+ "roughness": {
+ "type": [
+ "number",
+ "string",
+ "HTMLImageElement",
+ "HTMLCanvasElement"
+ ],
+ "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<p>当你想要表达更复杂的材质时。你可以直接将 <code>roughness</code> 设置为如下用每个像素存储粗糙度的贴图。</p>\n<p><img width=\"300\" height=\"300\" src=\"documents/asset/gl/img/roughness.png\"></p>\n<p>贴图中颜色越白的地方值越大，也就是越粗糙。你可以从 <a href=\"http://freepbr.com/\" target=\"_blank\">http://freepbr.com/</a> 等资源网站获取不同材质的贴图资源，也可以自己使用工具生成。</p>\n",
+ "default": 0.5
+ },
+ "metalness": {
+ "type": [
+ "number",
+ "string",
+ "HTMLImageElement",
+ "HTMLCanvasElement"
+ ],
+ "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<p>跟 <a href=\"#geo3D.realisticMaterial.roughness\">roughness</a> 一样 你可以直接将 <code>metalness</code> 设置为金属度贴图。</p>\n",
+ "default": 0
+ },
+ "roughnessAdjust": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p>粗糙度调整，在使用粗糙度贴图的时候有用。可以对贴图整体的粗糙度进行调整。默认为 0.5 的时候不调整，0 的时候变成完全光滑，1 的时候变成完全粗糙。</p>\n",
+ "default": 0.5
+ },
+ "metalnessAdjust": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p>金属度调整，在使用金属度贴图的时候有用。可以对贴图整体的金属度进行调整。默认为 0.5 的时候不调整，0 的时候变成非金属，1 的时候变成金属。</p>\n",
+ "default": 0.5
+ },
+ "normalTexture": {
+ "type": [
+ "string",
+ "HTMLImageElement",
+ "HTMLCanvasElement"
+ ],
+ "descriptionCN": "<p>材质细节的法线贴图。</p>\n<p>使用法线贴图可以在较少的顶点下依然表现出物体表面丰富的明暗细节。</p>\n"
}
}
},
@@ -1324,7 +1476,7 @@
],
"descriptionCN": "<p>lambert 材质相关的配置项，在 <a href=\"#geo3D.shading\">shading</a> 为<code>'lambert'</code>时有效。</p>\n",
"properties": {
- "baseTexture": {
+ "detailTexture": {
"type": [
"string",
"HTMLImageElement",
@@ -1336,7 +1488,7 @@
"type": [
"number"
],
- "descriptionCN": "<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>baseTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n",
+ "descriptionCN": "<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>detailTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n",
"default": 1
},
"textureOffset": {
@@ -1354,7 +1506,7 @@
],
"descriptionCN": "<p>color 材质相关的配置项，在 <a href=\"#geo3D.shading\">shading</a> 为<code>'color'</code>时有效。</p>\n",
"properties": {
- "baseTexture": {
+ "detailTexture": {
"type": [
"string",
"HTMLImageElement",
@@ -1366,7 +1518,7 @@
"type": [
"number"
],
- "descriptionCN": "<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>baseTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n",
+ "descriptionCN": "<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>detailTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n",
"default": 1
},
"textureOffset": {
@@ -1908,6 +2060,497 @@
}
}
},
+ "mapbox": {
+ "type": [
+ "Object"
+ ],
+ "descriptionCN": "<p>基于 mapbox-gl-js 的地理组件。支持在 mapbox 的地图上绘制三维的散点图，飞线图，柱状图和地图。你可以利用 Mapbox 强大的地图服务和 ECharts GL 丰富的可视化和渲染效果实现你想要的可视化作品。</p>\n<p>在使用 mapbox 组件之前你需要先引入 mapbox 的官方 sdk。</p>\n<pre><code class=\"lang-html\"><script src='https://api.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.js'></script>\n<link href='https://api.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css' rel='stylesheet' />\n</code></pre>\n<p>然后获取到 mapbox 提供的 token 后设置到 <code>mapbox.accessToken</code> 上。</p>\n<pre><code class=\"lang-js\">mapboxgl.accessToken = '你的 token';\n</code></pre>\n<p>接下来你就可以像使用其它组件一样使用 mapbox 组件了。</p>\n<pre><code class=\"lang-js\">chart.setOption({\n mapbox: {\n style: 'mapbox://styles/mapbox/dark-v9'\n }\n});\n</code></pre>\n<p>可以前往 <a href=\"https://www.mapbox.com/mapbox-gl-js/api/\" target=\"_blank\">https://www.mapbox.com/mapbox-gl-js/api/</a> 了解更详细的关于 mapbox-gl-js sdk 的内容。</p>\n",
+ "properties": {
+ "style": {
+ "type": [
+ "string",
+ "Object"
+ ],
+ "descriptionCN": "<p>Mapbox 地图样式。同 <a href=\"https://www.mapbox.com/mapbox-gl-js/style-spec/\" target=\"_blank\">https://www.mapbox.com/mapbox-gl-js/style-spec/</a></p>\n"
+ },
+ "center": {
+ "type": [
+ "Array"
+ ],
+ "descriptionCN": "<p>Mapbox 地图中心经纬度。经纬度用数组表示，例如：</p>\n<pre><code class=\"lang-js\">mapbox: {\n center: [104.114129, 37.550339],\n zoom: 3\n}\n</code></pre>\n"
+ },
+ "zoom": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p>Mapbox 地图的缩放等级。见 <a href=\"https://www.mapbox.com/mapbox-gl-js/style-spec/#root-zoom\" target=\"_blank\">https://www.mapbox.com/mapbox-gl-js/style-spec/#root-zoom</a></p>\n"
+ },
+ "bearing": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p>Mapbox 地图的旋转角度。见 <a href=\"https://www.mapbox.com/mapbox-gl-js/style-spec/#root-bearing\" target=\"_blank\">https://www.mapbox.com/mapbox-gl-js/style-spec/#root-bearing</a></p>\n",
+ "default": 0
+ },
+ "pitch": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p>视角俯视的倾斜角度。默认为<code>0</code>，也就是正对着地图。最大<code>60</code>。见 <a href=\"https://www.mapbox.com/mapbox-gl-js/style-spec/#root-pitch\" target=\"_blank\">https://www.mapbox.com/mapbox-gl-js/style-spec/#root-pitch</a></p>\n",
+ "default": 0
+ },
+ "altitudeScale": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p>海拔的缩放。</p>\n",
+ "default": 1
+ },
+ "shading": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>mapbox中三维图形的着色效果，echarts-gl 中支持下面三种着色方式</p>\n<ul>\n<li><p><code>'color'</code>\n只显示颜色，不受光照等其它因素的影响。</p>\n</li>\n<li><p><code>'lambert'</code>\n通过经典的 <a href=\"https://en.wikipedia.org/wiki/Lambertian_reflectance\" target=\"_blank\">lambert</a> 着色表现光照带来的明暗。</p>\n</li>\n<li><p><code>'realistic'</code>\n真实感渲染，配合 <a href=\"#globe.light.ambientCubemap\">light.ambientCubemap</a> 和 <a href=\"#globe.postEffect\">postEffect</a> 使用可以让展示的画面效果和质感有质的提升。ECharts GL 中使用了<a href=\"https://www.marmoset.co/posts/physically-based-rendering-and-you-can-too/\" target=\"_blank\">基于物理的渲染（PBR)</a> 来表现真实感材质。</p>\n</li>\n</ul>\n"
+ },
+ "realisticMaterial": {
+ "type": [
+ "Object"
+ ],
+ "descriptionCN": "<p>真实感材质相关的配置项，在 <a href=\"#mapbox.shading\">shading</a> 为<code>'realistic'</code>时有效。</p>\n",
+ "properties": {
+ "detailTexture": {
+ "type": [
+ "string",
+ "HTMLImageElement",
+ "HTMLCanvasElement"
+ ],
+ "descriptionCN": "<p>材质细节的纹理贴图。</p>\n"
+ },
+ "textureTiling": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>detailTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n",
+ "default": 1
+ },
+ "textureOffset": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p>材质细节纹理的位移。</p>\n",
+ "default": 0
+ },
+ "roughness": {
+ "type": [
+ "number",
+ "string",
+ "HTMLImageElement",
+ "HTMLCanvasElement"
+ ],
+ "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<p>当你想要表达更复杂的材质时。你可以直接将 <code>roughness</code> 设置为如下用每个像素存储粗糙度的贴图。</p>\n<p><img width=\"300\" height=\"300\" src=\"documents/asset/gl/img/roughness.png\"></p>\n<p>贴图中颜色越白的地方值越大，也就是越粗糙。你可以从 <a href=\"http://freepbr.com/\" target=\"_blank\">http://freepbr.com/</a> 等资源网站获取不同材质的贴图资源，也可以自己使用工具生成。</p>\n",
+ "default": 0.5
+ },
+ "metalness": {
+ "type": [
+ "number",
+ "string",
+ "HTMLImageElement",
+ "HTMLCanvasElement"
+ ],
+ "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<p>跟 <a href=\"#mapbox.realisticMaterial.roughness\">roughness</a> 一样 你可以直接将 <code>metalness</code> 设置为金属度贴图。</p>\n",
+ "default": 0
+ },
+ "roughnessAdjust": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p>粗糙度调整，在使用粗糙度贴图的时候有用。可以对贴图整体的粗糙度进行调整。默认为 0.5 的时候不调整，0 的时候变成完全光滑，1 的时候变成完全粗糙。</p>\n",
+ "default": 0.5
+ },
+ "metalnessAdjust": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p>金属度调整，在使用金属度贴图的时候有用。可以对贴图整体的金属度进行调整。默认为 0.5 的时候不调整，0 的时候变成非金属，1 的时候变成金属。</p>\n",
+ "default": 0.5
+ },
+ "normalTexture": {
+ "type": [
+ "string",
+ "HTMLImageElement",
+ "HTMLCanvasElement"
+ ],
+ "descriptionCN": "<p>材质细节的法线贴图。</p>\n<p>使用法线贴图可以在较少的顶点下依然表现出物体表面丰富的明暗细节。</p>\n"
+ }
+ }
+ },
+ "lambertMaterial": {
+ "type": [
+ "Object"
+ ],
+ "descriptionCN": "<p>lambert 材质相关的配置项，在 <a href=\"#mapbox.shading\">shading</a> 为<code>'lambert'</code>时有效。</p>\n",
+ "properties": {
+ "detailTexture": {
+ "type": [
+ "string",
+ "HTMLImageElement",
+ "HTMLCanvasElement"
+ ],
+ "descriptionCN": "<p>材质细节的纹理贴图。</p>\n"
+ },
+ "textureTiling": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>detailTexture</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=\"#mapbox.shading\">shading</a> 为<code>'color'</code>时有效。</p>\n",
+ "properties": {
+ "detailTexture": {
+ "type": [
+ "string",
+ "HTMLImageElement",
+ "HTMLCanvasElement"
+ ],
+ "descriptionCN": "<p>材质细节的纹理贴图。</p>\n"
+ },
+ "textureTiling": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>detailTexture</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=\"#mapbox.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=\"#mapbox.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=\"#mapbox.light.ambientCubemap.diffuseIntensity\">diffuseIntensity</a> 和 <a href=\"#mapbox.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=\"#mapbox.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=\"#mapbox.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=\"#mapbox.temporalSuperSampling\">temporalSuperSampling</a>，在画面静止后会持续分帧对一个像素多次抖动采样，从而达到超采样抗锯齿的效果。</p>\n",
+ "properties": {
+ "enable": {
+ "type": [
+ "boolean"
+ ],
+ "descriptionCN": "<p>是否开启 FXAA，默认关闭。</p>\n",
+ "default": false
+ }
+ }
+ }
+ }
+ },
+ "temporalSuperSampling": {
+ "type": [
+ "Object"
+ ],
+ "descriptionCN": "<p>分帧超采样。在开启 <a href=\"#mapbox.postEffect\">postEffect</a> 后，WebGL 默认的 MSAA 会无法使用，所以我们需要自己解决锯齿的问题。</p>\n<p>分帧超采样就是用来解决锯齿的问题，它在画面静止后会持续分帧对一个像素多次抖动采样，从而达到抗锯齿的效果。而且在这个分帧采样的过程中，echarts-gl 也会对 <a href=\"#mapbox.postEffect\">postEffect</a> 中一些需要采样保证效果的特效，例如 <a href=\"#mapbox.postEffect.SSAO\">SSAO</a>, <a href=\"#mapbox.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=\"#mapbox.postEffect\">postEffect</a> 后也会同步开启。</p>\n",
+ "default": "'auto'"
+ }
+ }
+ }
+ }
+ },
"grid3D": {
"type": [
"Object"
@@ -4784,20 +5427,6 @@
"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"
@@ -5165,16 +5794,9 @@
"type": [
"number"
],
- "descriptionCN": "<p>最小柱子高度。</p>\n<p>在柱状图不在笛卡尔坐标系上的时候，需要通过<code>minHeight</code>和<code>maxHeight</code>指明柱状图数据映射的高度范围。</p>\n",
+ "descriptionCN": "<p>最小柱子高度。</p>\n",
"default": 0
},
- "maxHeight": {
- "type": [
- "number"
- ],
- "descriptionCN": "<p>最大柱子高度。</p>\n",
- "default": 100
- },
"itemStyle": {
"type": [
"Object"
@@ -5623,7 +6245,7 @@
"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"
+ "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> 使用可以让展示的画面效果和质感有质的提升。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": {
"type": [
@@ -5631,18 +6253,128 @@
],
"descriptionCN": "<p>真实感材质相关的配置项，在 <a href=\"#series-bar3D.shading\">shading</a> 为<code>'realistic'</code>时有效。</p>\n",
"properties": {
- "roughness": {
+ "detailTexture": {
+ "type": [
+ "string",
+ "HTMLImageElement",
+ "HTMLCanvasElement"
+ ],
+ "descriptionCN": "<p>材质细节的纹理贴图。</p>\n"
+ },
+ "textureTiling": {
"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",
+ "descriptionCN": "<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>detailTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n",
+ "default": 1
+ },
+ "textureOffset": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p>材质细节纹理的位移。</p>\n",
+ "default": 0
+ },
+ "roughness": {
+ "type": [
+ "number",
+ "string",
+ "HTMLImageElement",
+ "HTMLCanvasElement"
+ ],
+ "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<p>当你想要表达更复杂的材质时。你可以直接将 <code>roughness</code> 设置为如下用每个像素存储粗糙度的贴图。</p>\n<p><img width=\"300\" height=\"300\" src=\"documents/asset/gl/img/roughness.png\"></p>\n<p>贴图中颜色越白的地方值越大，也就是越粗糙。你可以从 <a href=\"http://freepbr.com/\" target=\"_blank\">http://freepbr.com/</a> 等资源网站获取不同材质的贴图资源，也可以自己使用工具生成。</p>\n",
"default": 0.5
},
"metalness": {
"type": [
+ "number",
+ "string",
+ "HTMLImageElement",
+ "HTMLCanvasElement"
+ ],
+ "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<p>跟 <a href=\"#series-bar3D.realisticMaterial.roughness\">roughness</a> 一样 你可以直接将 <code>metalness</code> 设置为金属度贴图。</p>\n",
+ "default": 0
+ },
+ "roughnessAdjust": {
+ "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",
+ "descriptionCN": "<p>粗糙度调整，在使用粗糙度贴图的时候有用。可以对贴图整体的粗糙度进行调整。默认为 0.5 的时候不调整，0 的时候变成完全光滑，1 的时候变成完全粗糙。</p>\n",
+ "default": 0.5
+ },
+ "metalnessAdjust": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p>金属度调整，在使用金属度贴图的时候有用。可以对贴图整体的金属度进行调整。默认为 0.5 的时候不调整，0 的时候变成非金属，1 的时候变成金属。</p>\n",
+ "default": 0.5
+ },
+ "normalTexture": {
+ "type": [
+ "string",
+ "HTMLImageElement",
+ "HTMLCanvasElement"
+ ],
+ "descriptionCN": "<p>材质细节的法线贴图。</p>\n<p>使用法线贴图可以在较少的顶点下依然表现出物体表面丰富的明暗细节。</p>\n"
+ }
+ }
+ },
+ "lambertMaterial": {
+ "type": [
+ "Object"
+ ],
+ "descriptionCN": "<p>lambert 材质相关的配置项，在 <a href=\"#series-bar3D.shading\">shading</a> 为<code>'lambert'</code>时有效。</p>\n",
+ "properties": {
+ "detailTexture": {
+ "type": [
+ "string",
+ "HTMLImageElement",
+ "HTMLCanvasElement"
+ ],
+ "descriptionCN": "<p>材质细节的纹理贴图。</p>\n"
+ },
+ "textureTiling": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>detailTexture</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-bar3D.shading\">shading</a> 为<code>'color'</code>时有效。</p>\n",
+ "properties": {
+ "detailTexture": {
+ "type": [
+ "string",
+ "HTMLImageElement",
+ "HTMLCanvasElement"
+ ],
+ "descriptionCN": "<p>材质细节的纹理贴图。</p>\n"
+ },
+ "textureTiling": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>detailTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n",
+ "default": 1
+ },
+ "textureOffset": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p>材质细节纹理的位移。</p>\n",
"default": 0
}
}
@@ -5994,20 +6726,6 @@
}
}
},
- "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"
@@ -6113,15 +6831,15 @@
"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",
+ "descriptionCN": "<p>三维地图组件在三维场景中的宽度。配合 <a href=\"#series-map3D.viewControl.distance\">viewControl.distance</a> 可以得到最合适的展示尺寸。</p>\n<p>下面是三维地图 中<code>boxWidth</code>, <code>boxHeight</code>, <code>boxDepth</code>, <code>regionHeight</code>的示意图。</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/gl/img/geo-size.png\"></p>\n",
"default": 100
},
"boxHeight": {
"type": [
"number"
],
- "descriptionCN": "<p>三维地图组件在三维场景中的高度。</p>\n",
- "default": 3
+ "descriptionCN": "<p>三维地图组件在三维场景中的高度。</p>\n<p>组件高度。这个高度包含三维地图上的柱状图，散点图。</p>\n",
+ "default": 10
},
"boxDepth": {
"type": [
@@ -6130,6 +6848,13 @@
"descriptionCN": "<p>三维地图组件在三维场景中的深度。</p>\n<p>组件深度默认自动，保证三维组件的显示比例跟输入的 GeoJSON 的比例相同</p>\n",
"default": "auto"
},
+ "regionHeight": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p>三维地图每个区域的高度。这个高度是模型的高度，小于 <a href=\"#series-map3D.boxHeight\">boxHeight</a>。<code>boxHeight - regionHeight</code> 这一片区域会被用于三维柱状图，散点图等的展示。</p>\n",
+ "default": 3
+ },
"environment": {
"type": [
"string"
@@ -6661,7 +7386,7 @@
"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"
+ "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> 使用可以让展示的画面效果和质感有质的提升。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": {
"type": [
@@ -6669,21 +7394,7 @@
],
"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": {
+ "detailTexture": {
"type": [
"string",
"HTMLImageElement",
@@ -6695,7 +7406,7 @@
"type": [
"number"
],
- "descriptionCN": "<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>baseTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n",
+ "descriptionCN": "<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>detailTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n",
"default": 1
},
"textureOffset": {
@@ -6704,6 +7415,48 @@
],
"descriptionCN": "<p>材质细节纹理的位移。</p>\n",
"default": 0
+ },
+ "roughness": {
+ "type": [
+ "number",
+ "string",
+ "HTMLImageElement",
+ "HTMLCanvasElement"
+ ],
+ "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<p>当你想要表达更复杂的材质时。你可以直接将 <code>roughness</code> 设置为如下用每个像素存储粗糙度的贴图。</p>\n<p><img width=\"300\" height=\"300\" src=\"documents/asset/gl/img/roughness.png\"></p>\n<p>贴图中颜色越白的地方值越大，也就是越粗糙。你可以从 <a href=\"http://freepbr.com/\" target=\"_blank\">http://freepbr.com/</a> 等资源网站获取不同材质的贴图资源，也可以自己使用工具生成。</p>\n",
+ "default": 0.5
+ },
+ "metalness": {
+ "type": [
+ "number",
+ "string",
+ "HTMLImageElement",
+ "HTMLCanvasElement"
+ ],
+ "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<p>跟 <a href=\"#series-map3D.realisticMaterial.roughness\">roughness</a> 一样 你可以直接将 <code>metalness</code> 设置为金属度贴图。</p>\n",
+ "default": 0
+ },
+ "roughnessAdjust": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p>粗糙度调整，在使用粗糙度贴图的时候有用。可以对贴图整体的粗糙度进行调整。默认为 0.5 的时候不调整，0 的时候变成完全光滑，1 的时候变成完全粗糙。</p>\n",
+ "default": 0.5
+ },
+ "metalnessAdjust": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p>金属度调整，在使用金属度贴图的时候有用。可以对贴图整体的金属度进行调整。默认为 0.5 的时候不调整，0 的时候变成非金属，1 的时候变成金属。</p>\n",
+ "default": 0.5
+ },
+ "normalTexture": {
+ "type": [
+ "string",
+ "HTMLImageElement",
+ "HTMLCanvasElement"
+ ],
+ "descriptionCN": "<p>材质细节的法线贴图。</p>\n<p>使用法线贴图可以在较少的顶点下依然表现出物体表面丰富的明暗细节。</p>\n"
}
}
},
@@ -6713,7 +7466,7 @@
],
"descriptionCN": "<p>lambert 材质相关的配置项，在 <a href=\"#series-map3D.shading\">shading</a> 为<code>'lambert'</code>时有效。</p>\n",
"properties": {
- "baseTexture": {
+ "detailTexture": {
"type": [
"string",
"HTMLImageElement",
@@ -6725,7 +7478,7 @@
"type": [
"number"
],
- "descriptionCN": "<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>baseTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n",
+ "descriptionCN": "<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>detailTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n",
"default": 1
},
"textureOffset": {
@@ -6743,7 +7496,7 @@
],
"descriptionCN": "<p>color 材质相关的配置项，在 <a href=\"#series-map3D.shading\">shading</a> 为<code>'color'</code>时有效。</p>\n",
"properties": {
- "baseTexture": {
+ "detailTexture": {
"type": [
"string",
"HTMLImageElement",
@@ -6755,7 +7508,7 @@
"type": [
"number"
],
- "descriptionCN": "<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>baseTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n",
+ "descriptionCN": "<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>detailTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n",
"default": 1
},
"textureOffset": {
@@ -7596,7 +8349,7 @@
"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"
+ "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> 使用可以让展示的画面效果和质感有质的提升。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": {
"type": [
@@ -7604,21 +8357,7 @@
],
"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": {
+ "detailTexture": {
"type": [
"string",
"HTMLImageElement",
@@ -7630,7 +8369,7 @@
"type": [
"number"
],
- "descriptionCN": "<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>baseTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n",
+ "descriptionCN": "<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>detailTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n",
"default": 1
},
"textureOffset": {
@@ -7639,6 +8378,48 @@
],
"descriptionCN": "<p>材质细节纹理的位移。</p>\n",
"default": 0
+ },
+ "roughness": {
+ "type": [
+ "number",
+ "string",
+ "HTMLImageElement",
+ "HTMLCanvasElement"
+ ],
+ "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<p>当你想要表达更复杂的材质时。你可以直接将 <code>roughness</code> 设置为如下用每个像素存储粗糙度的贴图。</p>\n<p><img width=\"300\" height=\"300\" src=\"documents/asset/gl/img/roughness.png\"></p>\n<p>贴图中颜色越白的地方值越大，也就是越粗糙。你可以从 <a href=\"http://freepbr.com/\" target=\"_blank\">http://freepbr.com/</a> 等资源网站获取不同材质的贴图资源，也可以自己使用工具生成。</p>\n",
+ "default": 0.5
+ },
+ "metalness": {
+ "type": [
+ "number",
+ "string",
+ "HTMLImageElement",
+ "HTMLCanvasElement"
+ ],
+ "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<p>跟 <a href=\"#series-surface.realisticMaterial.roughness\">roughness</a> 一样 你可以直接将 <code>metalness</code> 设置为金属度贴图。</p>\n",
+ "default": 0
+ },
+ "roughnessAdjust": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p>粗糙度调整，在使用粗糙度贴图的时候有用。可以对贴图整体的粗糙度进行调整。默认为 0.5 的时候不调整，0 的时候变成完全光滑，1 的时候变成完全粗糙。</p>\n",
+ "default": 0.5
+ },
+ "metalnessAdjust": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p>金属度调整，在使用金属度贴图的时候有用。可以对贴图整体的金属度进行调整。默认为 0.5 的时候不调整，0 的时候变成非金属，1 的时候变成金属。</p>\n",
+ "default": 0.5
+ },
+ "normalTexture": {
+ "type": [
+ "string",
+ "HTMLImageElement",
+ "HTMLCanvasElement"
+ ],
+ "descriptionCN": "<p>材质细节的法线贴图。</p>\n<p>使用法线贴图可以在较少的顶点下依然表现出物体表面丰富的明暗细节。</p>\n"
}
}
},
@@ -7648,7 +8429,7 @@
],
"descriptionCN": "<p>lambert 材质相关的配置项，在 <a href=\"#series-surface.shading\">shading</a> 为<code>'lambert'</code>时有效。</p>\n",
"properties": {
- "baseTexture": {
+ "detailTexture": {
"type": [
"string",
"HTMLImageElement",
@@ -7660,7 +8441,7 @@
"type": [
"number"
],
- "descriptionCN": "<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>baseTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n",
+ "descriptionCN": "<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>detailTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n",
"default": 1
},
"textureOffset": {
@@ -7678,7 +8459,7 @@
],
"descriptionCN": "<p>color 材质相关的配置项，在 <a href=\"#series-surface.shading\">shading</a> 为<code>'color'</code>时有效。</p>\n",
"properties": {
- "baseTexture": {
+ "detailTexture": {
"type": [
"string",
"HTMLImageElement",
@@ -7690,7 +8471,7 @@
"type": [
"number"
],
- "descriptionCN": "<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>baseTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n",
+ "descriptionCN": "<p>材质细节纹理的平铺。默认为 1，也就是拉伸填满，大于 1 的时候数字表示纹理平铺重复的次数</p>\n<p><strong>注：</strong>使用平铺需要 <code>detailTexture</code> 的高宽是 2 的 n 次方。例如 512x512，如果是 200x200 的纹理无法使用平铺。</p>\n",
"default": 1
},
"textureOffset": {
diff --git a/public/cn/documents/cn/option.json b/public/cn/documents/cn/option.json
index be9a243..ba839e5 100644
--- a/public/cn/documents/cn/option.json
+++ b/public/cn/documents/cn/option.json
@@ -1128,7 +1128,7 @@
"type": [
"Object"
],
- "descriptionCN": "<p>直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放左右两个 x 轴，多于两个 x 轴需要通过配置 <a href=\"#xAxis.offset\">offset</a> 属性防止同个位置多个 x 轴的重叠。</p>\n",
+ "descriptionCN": "<p>直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 <a href=\"#xAxis.offset\">offset</a> 属性防止同个位置多个 x 轴的重叠。</p>\n",
"properties": {
"show": {
"type": [
@@ -2124,7 +2124,7 @@
}
}
},
- "tiggerTooltip": {
+ "triggerTooltip": {
"type": [
"boolean"
],
@@ -3240,7 +3240,7 @@
}
}
},
- "tiggerTooltip": {
+ "triggerTooltip": {
"type": [
"boolean"
],
@@ -4819,7 +4819,7 @@
}
}
},
- "tiggerTooltip": {
+ "triggerTooltip": {
"type": [
"boolean"
],
@@ -5839,7 +5839,7 @@
}
}
},
- "tiggerTooltip": {
+ "triggerTooltip": {
"type": [
"boolean"
],
@@ -8650,7 +8650,7 @@
}
}
},
- "tiggerTooltip": {
+ "triggerTooltip": {
"type": [
"boolean"
],
@@ -13467,7 +13467,7 @@
}
}
},
- "tiggerTooltip": {
+ "triggerTooltip": {
"type": [
"boolean"
],
@@ -14270,20 +14270,20 @@
],
"descriptionCN": "<p>轴的文本标签。有 <code>normal</code> 和 <code>emphasis</code> 两个状态，<code>normal</code> 是文本正常的样式，<code>emphasis</code> 是文本高亮的样式，比如鼠标悬浮或者图例联动高亮的时候会使用 <code>emphasis</code> 作为文本的样式。</p>\n",
"properties": {
- "position": {
- "type": [
- "string",
- "number"
- ],
- "descriptionCN": "<p>可选的配置方式：</p>\n<ul>\n<li><p><code>'auto'</code>：\n 完全自动决定。</p>\n</li>\n<li><p><code>'left'</code>：\n 贴左边界放置。\n 当 <a href=\"#timeline.orient\">timline.orient</a> 为 <code>'vertical'</code> 时有效。</p>\n</li>\n<li><p><code>'right'</code>：当 <a href=\"#timeline.orient\">timline.orient</a> 为 <code>'vertical'</code> 时有效。\n 贴右边界放置。</p>\n</li>\n<li><p><code>'top'</code>：\n 贴上边界放置。\n 当 <a href=\"#timeline.orient\">timline.orient</a> 为 <code>'horizontal'</code> 时有效。</p>\n</li>\n<li><p><code>'bottom'</code>：\n 贴下边界放置。\n 当 <a href=\"#timeline.orient\">timline.orient</a> 为 <code>'horizontal'</code> 时有效。</p>\n</li>\n<li><p><code>number</code>：\n 指定某个数值时，表示 <code>label</code> 和轴的距离。为 <code>0</code> 时则和坐标轴重合，可以为正负值，决定 <code>label</code> 在坐标轴的哪一边。</p>\n</li>\n</ul>\n",
- "default": "'auto'"
- },
"normal": {
"type": [
"Object"
],
"descriptionCN": "",
"properties": {
+ "position": {
+ "type": [
+ "string",
+ "number"
+ ],
+ "descriptionCN": "<p>可选的配置方式：</p>\n<ul>\n<li><p><code>'auto'</code>：\n 完全自动决定。</p>\n</li>\n<li><p><code>'left'</code>：\n 贴左边界放置。\n 当 <a href=\"#timeline.orient\">timline.orient</a> 为 <code>'vertical'</code> 时有效。</p>\n</li>\n<li><p><code>'right'</code>：当 <a href=\"#timeline.orient\">timline.orient</a> 为 <code>'vertical'</code> 时有效。\n 贴右边界放置。</p>\n</li>\n<li><p><code>'top'</code>：\n 贴上边界放置。\n 当 <a href=\"#timeline.orient\">timline.orient</a> 为 <code>'horizontal'</code> 时有效。</p>\n</li>\n<li><p><code>'bottom'</code>：\n 贴下边界放置。\n 当 <a href=\"#timeline.orient\">timline.orient</a> 为 <code>'horizontal'</code> 时有效。</p>\n</li>\n<li><p><code>number</code>：\n 指定某个数值时，表示 <code>label</code> 和轴的距离。为 <code>0</code> 时则和坐标轴重合，可以为正负值，决定 <code>label</code> 在坐标轴的哪一边。</p>\n</li>\n</ul>\n",
+ "default": "'auto'"
+ },
"show": {
"type": [
"boolean"
@@ -14327,6 +14327,18 @@
"descriptionCN": "<p>timeline.lable.normal文字的颜色。</p>\n",
"default": "'#304654'"
},
+ "align": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n"
+ },
+ "baseline": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>文字基线对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n"
+ },
"fontStyle": {
"type": [
"string"
@@ -14408,6 +14420,18 @@
"descriptionCN": "<p>timeline.lable.emphasis文字的颜色。</p>\n",
"default": "'#c23531'"
},
+ "align": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n"
+ },
+ "baseline": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>文字基线对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n"
+ },
"fontStyle": {
"type": [
"string"
@@ -15489,7 +15513,7 @@
"descriptionCN": "<p>水平对齐方式，取值：<code>'left'</code>, <code>'center'</code>, <code>'right'</code>。</p>\n<p>如果为 <code>'left'</code>，表示文本最左端在 <code>x</code> 值上。如果为 <code>'right'</code>，表示文本最右端在 <code>x</code> 值上。</p>\n",
"default": "'left'"
},
- "textVeticalAlign": {
+ "textVerticalAlign": {
"type": [
"string"
],
@@ -26660,7 +26684,7 @@
"boolean",
"string"
],
- "descriptionCN": "<p>是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：</p>\n<ul>\n<li><code>'radius'</code> 面积展现数据的百分比，半径展现数据的大小。</li>\n<li><code>'area'</code> 所有扇区面积相同，仅通过半径展现数据大小。</li>\n</ul>\n",
+ "descriptionCN": "<p>是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：</p>\n<ul>\n<li><code>'radius'</code> 扇区圆心角展现数据的百分比，半径展现数据的大小。</li>\n<li><code>'area'</code> 所有扇区圆心角相同，仅通过半径展现数据大小。</li>\n</ul>\n",
"default": false
},
"avoidLabelOverlap": {
@@ -39816,8 +39840,8 @@
"type": [
"boolean"
],
- "descriptionCN": "<p>是否显示文本标签。</p>\n",
- "default": true
+ "descriptionCN": "<p>是否显示标签。</p>\n",
+ "default": false
},
"position": {
"type": [
@@ -39827,6 +39851,19 @@
"descriptionCN": "<p>标签的位置。</p>\n<p><strong>可选：</strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> 通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。\n 示例：</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n",
"default": "'inside'"
},
+ "offset": {
+ "type": [
+ "Array"
+ ],
+ "descriptionCN": "<p>是否对文字进行偏移。默认不偏移。例如：<code>[30, 40]</code> 表示文字在横向上偏移 <code>30</code>，纵向上偏移 <code>40</code>。</p>\n"
+ },
+ "formatter": {
+ "type": [
+ "string",
+ "Function"
+ ],
+ "descriptionCN": "<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code>\\n</code> 换行。</p>\n<p><strong>字符串模板</strong></p>\n<p>模板变量有 <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<p>。</p>\n"
+ },
"textStyle": {
"type": [
"Object"
@@ -39903,8 +39940,8 @@
"type": [
"boolean"
],
- "descriptionCN": "<p>是否显示文本标签。</p>\n",
- "default": true
+ "descriptionCN": "<p>是否显示标签。</p>\n",
+ "default": false
},
"position": {
"type": [
@@ -39914,6 +39951,234 @@
"descriptionCN": "<p>标签的位置。</p>\n<p><strong>可选：</strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> 通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。\n 示例：</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n",
"default": "'inside'"
},
+ "offset": {
+ "type": [
+ "Array"
+ ],
+ "descriptionCN": "<p>是否对文字进行偏移。默认不偏移。例如：<code>[30, 40]</code> 表示文字在横向上偏移 <code>30</code>，纵向上偏移 <code>40</code>。</p>\n"
+ },
+ "formatter": {
+ "type": [
+ "string",
+ "Function"
+ ],
+ "descriptionCN": "<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code>\\n</code> 换行。</p>\n<p><strong>字符串模板</strong></p>\n<p>模板变量有 <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<p>。</p>\n"
+ },
+ "textStyle": {
+ "type": [
+ "Object"
+ ],
+ "descriptionCN": "",
+ "properties": {
+ "ellipsis": {
+ "type": [
+ "boolean"
+ ],
+ "descriptionCN": "<p>当文字超出矩形边界的时候，是否超出部分替换为省略号。</p>\n",
+ "default": true
+ },
+ "color": {
+ "type": [
+ "Color"
+ ],
+ "descriptionCN": "<p>文字的颜色。</p>\n",
+ "default": "'#fff'"
+ },
+ "fontStyle": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>文字字体的风格</p>\n<p>可选：</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n",
+ "default": "'normal'"
+ },
+ "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"
+ },
+ "fontFamily": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>文字的字体系列</p>\n",
+ "default": "'sans-serif'"
+ },
+ "fontSize": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p>文字的字体大小</p>\n",
+ "default": 12
+ },
+ "align": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>文字水平对齐方式，可选值 <code>'center'</code>、<code>'right</code>、<code>'left'</code></p>\n",
+ "default": "undefined"
+ },
+ "baseline": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>文字竖直对齐方式，可选值 <code>'middle'</code>、<code>'right</code>、<code>'left'</code></p>\n",
+ "default": "undefined"
+ }
+ }
+ }
+ }
+ }
+ }
+ },
+ "upperLabel": {
+ "type": [
+ "Object"
+ ],
+ "descriptionCN": "<p><code>upperLabel</code> 用于显示矩形的父节点的标签。当 <a href=\"#series-treemap.upperLabel.normal.show\">upperLabel.normal.show</a> 为 <code>true</code> 的时候，『显示父节点标签』功能开启。</p>\n<p>同 <a href=\"#series-treemap.label\">series-treemap.label</a> 一样，<code>upperLabel</code> 可以存在于 <a href=\"#series-treemap\">series-treemap</a> 的根节点，或者 <a href=\"#series-treemap.level\">series-treemap.level</a> 中，或者 <a href=\"#series-treemap.data\">series-treemap.data</a> 的每个数据项中。</p>\n<p><a href=\"#series-treemap.label\">series-treemap.label</a> 描述的是，当前节点为叶节点时标签的样式；<code>upperLabel</code> 描述的是，当前节点为非叶节点（即含有子节点）时标签的样式。（此时标签一般会被显示在节点的最上部）</p>\n<p>参见：</p>\n<iframe data-src=\"https://ecomfe.github.io/echarts-examples/public/view.html?c=treemap-show-parent&edit=1&reset=1\" width=\"700\" height=\"500\" ></iframe>\n\n\n\n\n<p><br></p>\n<blockquote>\n<p>注：treemap中 <code>label</code> 属性可能在多处地方存在：</p>\n<ul>\n<li>可以存在于 <a href=\"#series-treemap\">sereis-treemap</a> 根下，表示本系列全局的统一设置。</li>\n</ul>\n<ul>\n<li><p>可以存在于 <a href=\"#series-treemap.levels\">series-treemap.levels</a> 的每个数组元素中，表示树每个层级的统一设置。</p>\n</li>\n<li><p>存在于 <a href=\"#series-treemap.data\">series-treemap.data</a> 的每个节点中，表示每个节点的特定设置。</p>\n</li>\n</ul>\n</blockquote>\n<p><br></p>\n",
+ "properties": {
+ "normal": {
+ "type": [
+ "Object"
+ ],
+ "descriptionCN": "",
+ "properties": {
+ "show": {
+ "type": [
+ "boolean"
+ ],
+ "descriptionCN": "<p>是否显示标签。</p>\n",
+ "default": false
+ },
+ "position": {
+ "type": [
+ "string",
+ "Array"
+ ],
+ "descriptionCN": "<p>标签的位置。</p>\n<p><strong>可选：</strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> 通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。\n 示例：</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n",
+ "default": "'inside'"
+ },
+ "offset": {
+ "type": [
+ "Array"
+ ],
+ "descriptionCN": "<p>是否对文字进行偏移。默认不偏移。例如：<code>[30, 40]</code> 表示文字在横向上偏移 <code>30</code>，纵向上偏移 <code>40</code>。</p>\n"
+ },
+ "formatter": {
+ "type": [
+ "string",
+ "Function"
+ ],
+ "descriptionCN": "<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code>\\n</code> 换行。</p>\n<p><strong>字符串模板</strong></p>\n<p>模板变量有 <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<p>。</p>\n"
+ },
+ "textStyle": {
+ "type": [
+ "Object"
+ ],
+ "descriptionCN": "",
+ "properties": {
+ "ellipsis": {
+ "type": [
+ "boolean"
+ ],
+ "descriptionCN": "<p>当文字超出矩形边界的时候，是否超出部分替换为省略号。</p>\n",
+ "default": true
+ },
+ "color": {
+ "type": [
+ "Color"
+ ],
+ "descriptionCN": "<p>文字的颜色。</p>\n",
+ "default": "'#fff'"
+ },
+ "fontStyle": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>文字字体的风格</p>\n<p>可选：</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n",
+ "default": "'normal'"
+ },
+ "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"
+ },
+ "fontFamily": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>文字的字体系列</p>\n",
+ "default": "'sans-serif'"
+ },
+ "fontSize": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p>文字的字体大小</p>\n",
+ "default": 12
+ },
+ "align": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>文字水平对齐方式，可选值 <code>'center'</code>、<code>'right</code>、<code>'left'</code></p>\n",
+ "default": "undefined"
+ },
+ "baseline": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>文字竖直对齐方式，可选值 <code>'middle'</code>、<code>'right</code>、<code>'left'</code></p>\n",
+ "default": "undefined"
+ }
+ }
+ },
+ "height": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p>父节点标签区的高度。</p>\n",
+ "default": 20
+ }
+ }
+ },
+ "emphasis": {
+ "type": [
+ "Object"
+ ],
+ "descriptionCN": "",
+ "properties": {
+ "show": {
+ "type": [
+ "boolean"
+ ],
+ "descriptionCN": "<p>是否显示标签。</p>\n",
+ "default": false
+ },
+ "position": {
+ "type": [
+ "string",
+ "Array"
+ ],
+ "descriptionCN": "<p>标签的位置。</p>\n<p><strong>可选：</strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> 通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。\n 示例：</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n",
+ "default": "'inside'"
+ },
+ "offset": {
+ "type": [
+ "Array"
+ ],
+ "descriptionCN": "<p>是否对文字进行偏移。默认不偏移。例如：<code>[30, 40]</code> 表示文字在横向上偏移 <code>30</code>，纵向上偏移 <code>40</code>。</p>\n"
+ },
+ "formatter": {
+ "type": [
+ "string",
+ "Function"
+ ],
+ "descriptionCN": "<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code>\\n</code> 换行。</p>\n<p><strong>字符串模板</strong></p>\n<p>模板变量有 <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<p>。</p>\n"
+ },
"textStyle": {
"type": [
"Object"
@@ -40144,8 +40409,8 @@
"type": [
"boolean"
],
- "descriptionCN": "<p>是否显示文本标签。</p>\n",
- "default": true
+ "descriptionCN": "<p>是否显示标签。</p>\n",
+ "default": false
},
"position": {
"type": [
@@ -40155,6 +40420,19 @@
"descriptionCN": "<p>标签的位置。</p>\n<p><strong>可选：</strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> 通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。\n 示例：</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n",
"default": "'inside'"
},
+ "offset": {
+ "type": [
+ "Array"
+ ],
+ "descriptionCN": "<p>是否对文字进行偏移。默认不偏移。例如：<code>[30, 40]</code> 表示文字在横向上偏移 <code>30</code>，纵向上偏移 <code>40</code>。</p>\n"
+ },
+ "formatter": {
+ "type": [
+ "string",
+ "Function"
+ ],
+ "descriptionCN": "<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code>\\n</code> 换行。</p>\n<p><strong>字符串模板</strong></p>\n<p>模板变量有 <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<p>。</p>\n"
+ },
"textStyle": {
"type": [
"Object"
@@ -40231,8 +40509,8 @@
"type": [
"boolean"
],
- "descriptionCN": "<p>是否显示文本标签。</p>\n",
- "default": true
+ "descriptionCN": "<p>是否显示标签。</p>\n",
+ "default": false
},
"position": {
"type": [
@@ -40242,6 +40520,234 @@
"descriptionCN": "<p>标签的位置。</p>\n<p><strong>可选：</strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> 通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。\n 示例：</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n",
"default": "'inside'"
},
+ "offset": {
+ "type": [
+ "Array"
+ ],
+ "descriptionCN": "<p>是否对文字进行偏移。默认不偏移。例如：<code>[30, 40]</code> 表示文字在横向上偏移 <code>30</code>，纵向上偏移 <code>40</code>。</p>\n"
+ },
+ "formatter": {
+ "type": [
+ "string",
+ "Function"
+ ],
+ "descriptionCN": "<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code>\\n</code> 换行。</p>\n<p><strong>字符串模板</strong></p>\n<p>模板变量有 <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<p>。</p>\n"
+ },
+ "textStyle": {
+ "type": [
+ "Object"
+ ],
+ "descriptionCN": "",
+ "properties": {
+ "ellipsis": {
+ "type": [
+ "boolean"
+ ],
+ "descriptionCN": "<p>当文字超出矩形边界的时候，是否超出部分替换为省略号。</p>\n",
+ "default": true
+ },
+ "color": {
+ "type": [
+ "Color"
+ ],
+ "descriptionCN": "<p>文字的颜色。</p>\n",
+ "default": "'#fff'"
+ },
+ "fontStyle": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>文字字体的风格</p>\n<p>可选：</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n",
+ "default": "'normal'"
+ },
+ "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"
+ },
+ "fontFamily": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>文字的字体系列</p>\n",
+ "default": "'sans-serif'"
+ },
+ "fontSize": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p>文字的字体大小</p>\n",
+ "default": 12
+ },
+ "align": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>文字水平对齐方式，可选值 <code>'center'</code>、<code>'right</code>、<code>'left'</code></p>\n",
+ "default": "undefined"
+ },
+ "baseline": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>文字竖直对齐方式，可选值 <code>'middle'</code>、<code>'right</code>、<code>'left'</code></p>\n",
+ "default": "undefined"
+ }
+ }
+ }
+ }
+ }
+ }
+ },
+ "upperLabel": {
+ "type": [
+ "Object"
+ ],
+ "descriptionCN": "<p><code>upperLabel</code> 用于显示矩形的父节点的标签。当 <a href=\"#series-treemap.upperLabel.normal.show\">upperLabel.normal.show</a> 为 <code>true</code> 的时候，『显示父节点标签』功能开启。</p>\n<p>同 <a href=\"#series-treemap.label\">series-treemap.label</a> 一样，<code>upperLabel</code> 可以存在于 <a href=\"#series-treemap\">series-treemap</a> 的根节点，或者 <a href=\"#series-treemap.level\">series-treemap.level</a> 中，或者 <a href=\"#series-treemap.data\">series-treemap.data</a> 的每个数据项中。</p>\n<p><a href=\"#series-treemap.label\">series-treemap.label</a> 描述的是，当前节点为叶节点时标签的样式；<code>upperLabel</code> 描述的是，当前节点为非叶节点（即含有子节点）时标签的样式。（此时标签一般会被显示在节点的最上部）</p>\n<p>参见：</p>\n<iframe data-src=\"https://ecomfe.github.io/echarts-examples/public/view.html?c=treemap-show-parent&edit=1&reset=1\" width=\"700\" height=\"500\" ></iframe>\n\n\n\n\n<p><br></p>\n<blockquote>\n<p>注：treemap中 <code>label</code> 属性可能在多处地方存在：</p>\n<ul>\n<li>可以存在于 <a href=\"#series-treemap\">sereis-treemap</a> 根下，表示本系列全局的统一设置。</li>\n</ul>\n<ul>\n<li><p>可以存在于 <a href=\"#series-treemap.levels\">series-treemap.levels</a> 的每个数组元素中，表示树每个层级的统一设置。</p>\n</li>\n<li><p>存在于 <a href=\"#series-treemap.data\">series-treemap.data</a> 的每个节点中，表示每个节点的特定设置。</p>\n</li>\n</ul>\n</blockquote>\n<p><br></p>\n",
+ "properties": {
+ "normal": {
+ "type": [
+ "Object"
+ ],
+ "descriptionCN": "",
+ "properties": {
+ "show": {
+ "type": [
+ "boolean"
+ ],
+ "descriptionCN": "<p>是否显示标签。</p>\n",
+ "default": false
+ },
+ "position": {
+ "type": [
+ "string",
+ "Array"
+ ],
+ "descriptionCN": "<p>标签的位置。</p>\n<p><strong>可选：</strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> 通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。\n 示例：</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n",
+ "default": "'inside'"
+ },
+ "offset": {
+ "type": [
+ "Array"
+ ],
+ "descriptionCN": "<p>是否对文字进行偏移。默认不偏移。例如：<code>[30, 40]</code> 表示文字在横向上偏移 <code>30</code>，纵向上偏移 <code>40</code>。</p>\n"
+ },
+ "formatter": {
+ "type": [
+ "string",
+ "Function"
+ ],
+ "descriptionCN": "<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code>\\n</code> 换行。</p>\n<p><strong>字符串模板</strong></p>\n<p>模板变量有 <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<p>。</p>\n"
+ },
+ "textStyle": {
+ "type": [
+ "Object"
+ ],
+ "descriptionCN": "",
+ "properties": {
+ "ellipsis": {
+ "type": [
+ "boolean"
+ ],
+ "descriptionCN": "<p>当文字超出矩形边界的时候，是否超出部分替换为省略号。</p>\n",
+ "default": true
+ },
+ "color": {
+ "type": [
+ "Color"
+ ],
+ "descriptionCN": "<p>文字的颜色。</p>\n",
+ "default": "'#fff'"
+ },
+ "fontStyle": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>文字字体的风格</p>\n<p>可选：</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n",
+ "default": "'normal'"
+ },
+ "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"
+ },
+ "fontFamily": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>文字的字体系列</p>\n",
+ "default": "'sans-serif'"
+ },
+ "fontSize": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p>文字的字体大小</p>\n",
+ "default": 12
+ },
+ "align": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>文字水平对齐方式，可选值 <code>'center'</code>、<code>'right</code>、<code>'left'</code></p>\n",
+ "default": "undefined"
+ },
+ "baseline": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>文字竖直对齐方式，可选值 <code>'middle'</code>、<code>'right</code>、<code>'left'</code></p>\n",
+ "default": "undefined"
+ }
+ }
+ },
+ "height": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p>父节点标签区的高度。</p>\n",
+ "default": 20
+ }
+ }
+ },
+ "emphasis": {
+ "type": [
+ "Object"
+ ],
+ "descriptionCN": "",
+ "properties": {
+ "show": {
+ "type": [
+ "boolean"
+ ],
+ "descriptionCN": "<p>是否显示标签。</p>\n",
+ "default": false
+ },
+ "position": {
+ "type": [
+ "string",
+ "Array"
+ ],
+ "descriptionCN": "<p>标签的位置。</p>\n<p><strong>可选：</strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> 通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。\n 示例：</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n",
+ "default": "'inside'"
+ },
+ "offset": {
+ "type": [
+ "Array"
+ ],
+ "descriptionCN": "<p>是否对文字进行偏移。默认不偏移。例如：<code>[30, 40]</code> 表示文字在横向上偏移 <code>30</code>，纵向上偏移 <code>40</code>。</p>\n"
+ },
+ "formatter": {
+ "type": [
+ "string",
+ "Function"
+ ],
+ "descriptionCN": "<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code>\\n</code> 换行。</p>\n<p><strong>字符串模板</strong></p>\n<p>模板变量有 <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<p>。</p>\n"
+ },
"textStyle": {
"type": [
"Object"
@@ -40797,8 +41303,8 @@
"type": [
"boolean"
],
- "descriptionCN": "<p>是否显示文本标签。</p>\n",
- "default": true
+ "descriptionCN": "<p>是否显示标签。</p>\n",
+ "default": false
},
"position": {
"type": [
@@ -40808,6 +41314,19 @@
"descriptionCN": "<p>标签的位置。</p>\n<p><strong>可选：</strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> 通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。\n 示例：</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n",
"default": "'inside'"
},
+ "offset": {
+ "type": [
+ "Array"
+ ],
+ "descriptionCN": "<p>是否对文字进行偏移。默认不偏移。例如：<code>[30, 40]</code> 表示文字在横向上偏移 <code>30</code>，纵向上偏移 <code>40</code>。</p>\n"
+ },
+ "formatter": {
+ "type": [
+ "string",
+ "Function"
+ ],
+ "descriptionCN": "<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code>\\n</code> 换行。</p>\n<p><strong>字符串模板</strong></p>\n<p>模板变量有 <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<p>。</p>\n"
+ },
"textStyle": {
"type": [
"Object"
@@ -40884,8 +41403,8 @@
"type": [
"boolean"
],
- "descriptionCN": "<p>是否显示文本标签。</p>\n",
- "default": true
+ "descriptionCN": "<p>是否显示标签。</p>\n",
+ "default": false
},
"position": {
"type": [
@@ -40895,6 +41414,234 @@
"descriptionCN": "<p>标签的位置。</p>\n<p><strong>可选：</strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> 通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。\n 示例：</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n",
"default": "'inside'"
},
+ "offset": {
+ "type": [
+ "Array"
+ ],
+ "descriptionCN": "<p>是否对文字进行偏移。默认不偏移。例如：<code>[30, 40]</code> 表示文字在横向上偏移 <code>30</code>，纵向上偏移 <code>40</code>。</p>\n"
+ },
+ "formatter": {
+ "type": [
+ "string",
+ "Function"
+ ],
+ "descriptionCN": "<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code>\\n</code> 换行。</p>\n<p><strong>字符串模板</strong></p>\n<p>模板变量有 <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<p>。</p>\n"
+ },
+ "textStyle": {
+ "type": [
+ "Object"
+ ],
+ "descriptionCN": "",
+ "properties": {
+ "ellipsis": {
+ "type": [
+ "boolean"
+ ],
+ "descriptionCN": "<p>当文字超出矩形边界的时候，是否超出部分替换为省略号。</p>\n",
+ "default": true
+ },
+ "color": {
+ "type": [
+ "Color"
+ ],
+ "descriptionCN": "<p>文字的颜色。</p>\n",
+ "default": "'#fff'"
+ },
+ "fontStyle": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>文字字体的风格</p>\n<p>可选：</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n",
+ "default": "'normal'"
+ },
+ "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"
+ },
+ "fontFamily": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>文字的字体系列</p>\n",
+ "default": "'sans-serif'"
+ },
+ "fontSize": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p>文字的字体大小</p>\n",
+ "default": 12
+ },
+ "align": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>文字水平对齐方式，可选值 <code>'center'</code>、<code>'right</code>、<code>'left'</code></p>\n",
+ "default": "undefined"
+ },
+ "baseline": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>文字竖直对齐方式，可选值 <code>'middle'</code>、<code>'right</code>、<code>'left'</code></p>\n",
+ "default": "undefined"
+ }
+ }
+ }
+ }
+ }
+ }
+ },
+ "upperLabel": {
+ "type": [
+ "Object"
+ ],
+ "descriptionCN": "<p><code>upperLabel</code> 用于显示矩形的父节点的标签。当 <a href=\"#series-treemap.upperLabel.normal.show\">upperLabel.normal.show</a> 为 <code>true</code> 的时候，『显示父节点标签』功能开启。</p>\n<p>同 <a href=\"#series-treemap.label\">series-treemap.label</a> 一样，<code>upperLabel</code> 可以存在于 <a href=\"#series-treemap\">series-treemap</a> 的根节点，或者 <a href=\"#series-treemap.level\">series-treemap.level</a> 中，或者 <a href=\"#series-treemap.data\">series-treemap.data</a> 的每个数据项中。</p>\n<p><a href=\"#series-treemap.label\">series-treemap.label</a> 描述的是，当前节点为叶节点时标签的样式；<code>upperLabel</code> 描述的是，当前节点为非叶节点（即含有子节点）时标签的样式。（此时标签一般会被显示在节点的最上部）</p>\n<p>参见：</p>\n<iframe data-src=\"https://ecomfe.github.io/echarts-examples/public/view.html?c=treemap-show-parent&edit=1&reset=1\" width=\"700\" height=\"500\" ></iframe>\n\n\n\n\n<p><br></p>\n<blockquote>\n<p>注：treemap中 <code>label</code> 属性可能在多处地方存在：</p>\n<ul>\n<li>可以存在于 <a href=\"#series-treemap\">sereis-treemap</a> 根下，表示本系列全局的统一设置。</li>\n</ul>\n<ul>\n<li><p>可以存在于 <a href=\"#series-treemap.levels\">series-treemap.levels</a> 的每个数组元素中，表示树每个层级的统一设置。</p>\n</li>\n<li><p>存在于 <a href=\"#series-treemap.data\">series-treemap.data</a> 的每个节点中，表示每个节点的特定设置。</p>\n</li>\n</ul>\n</blockquote>\n<p><br></p>\n",
+ "properties": {
+ "normal": {
+ "type": [
+ "Object"
+ ],
+ "descriptionCN": "",
+ "properties": {
+ "show": {
+ "type": [
+ "boolean"
+ ],
+ "descriptionCN": "<p>是否显示标签。</p>\n",
+ "default": false
+ },
+ "position": {
+ "type": [
+ "string",
+ "Array"
+ ],
+ "descriptionCN": "<p>标签的位置。</p>\n<p><strong>可选：</strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> 通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。\n 示例：</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n",
+ "default": "'inside'"
+ },
+ "offset": {
+ "type": [
+ "Array"
+ ],
+ "descriptionCN": "<p>是否对文字进行偏移。默认不偏移。例如：<code>[30, 40]</code> 表示文字在横向上偏移 <code>30</code>，纵向上偏移 <code>40</code>。</p>\n"
+ },
+ "formatter": {
+ "type": [
+ "string",
+ "Function"
+ ],
+ "descriptionCN": "<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code>\\n</code> 换行。</p>\n<p><strong>字符串模板</strong></p>\n<p>模板变量有 <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<p>。</p>\n"
+ },
+ "textStyle": {
+ "type": [
+ "Object"
+ ],
+ "descriptionCN": "",
+ "properties": {
+ "ellipsis": {
+ "type": [
+ "boolean"
+ ],
+ "descriptionCN": "<p>当文字超出矩形边界的时候，是否超出部分替换为省略号。</p>\n",
+ "default": true
+ },
+ "color": {
+ "type": [
+ "Color"
+ ],
+ "descriptionCN": "<p>文字的颜色。</p>\n",
+ "default": "'#fff'"
+ },
+ "fontStyle": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>文字字体的风格</p>\n<p>可选：</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n",
+ "default": "'normal'"
+ },
+ "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"
+ },
+ "fontFamily": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>文字的字体系列</p>\n",
+ "default": "'sans-serif'"
+ },
+ "fontSize": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p>文字的字体大小</p>\n",
+ "default": 12
+ },
+ "align": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>文字水平对齐方式，可选值 <code>'center'</code>、<code>'right</code>、<code>'left'</code></p>\n",
+ "default": "undefined"
+ },
+ "baseline": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>文字竖直对齐方式，可选值 <code>'middle'</code>、<code>'right</code>、<code>'left'</code></p>\n",
+ "default": "undefined"
+ }
+ }
+ },
+ "height": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p>父节点标签区的高度。</p>\n",
+ "default": 20
+ }
+ }
+ },
+ "emphasis": {
+ "type": [
+ "Object"
+ ],
+ "descriptionCN": "",
+ "properties": {
+ "show": {
+ "type": [
+ "boolean"
+ ],
+ "descriptionCN": "<p>是否显示标签。</p>\n",
+ "default": false
+ },
+ "position": {
+ "type": [
+ "string",
+ "Array"
+ ],
+ "descriptionCN": "<p>标签的位置。</p>\n<p><strong>可选：</strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> 通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。\n 示例：</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n",
+ "default": "'inside'"
+ },
+ "offset": {
+ "type": [
+ "Array"
+ ],
+ "descriptionCN": "<p>是否对文字进行偏移。默认不偏移。例如：<code>[30, 40]</code> 表示文字在横向上偏移 <code>30</code>，纵向上偏移 <code>40</code>。</p>\n"
+ },
+ "formatter": {
+ "type": [
+ "string",
+ "Function"
+ ],
+ "descriptionCN": "<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code>\\n</code> 换行。</p>\n<p><strong>字符串模板</strong></p>\n<p>模板变量有 <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<p>。</p>\n"
+ },
"textStyle": {
"type": [
"Object"
@@ -59720,7 +60467,7 @@
"type": [
"Array"
],
- "descriptionCN": "<p>系列中的数据内容数组。数组项可以为单个数值，如：</p>\n<pre><code class=\"lang-js\">[12, 34, 56, 10, 23]\n</code></pre>\n<p>如果需要在数据中加入其它维度给 <a href=\"#visualMap\">visualMap</a> 组件用来映射到颜色等其它图形属性。每个数据项也可以是数组，如：</p>\n<pre><code class=\"lang-js\">[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]\n</code></pre>\n<p>这时候可以将每项数组中的第二个值指定给 <a href=\"#visualMap\">visualMap</a> 组件。</p>\n<p>更多时候我们需要指定每个数据项的名称，这时候需要每个项为一个对象：</p>\n<pre><code class=\"lang-js\">[{\n // 数据项的名称\n name: '数据1',\n // 数据项值8\n value: 10\n}, {\n name: '数据2',\n value: 20\n}]\n</code></pre>\n<p>需要对个别内容指定进行个性化定义时：</p>\n<pre><code class=\"lang-js\">[{\n name: '数据1',\n value: 10\n}, {\n // 数据项名称\n name: '数据2',\n value : 56,\n //自定义特殊 tooltip，仅对该数据项有效\n tooltip:{},\n //自定义特殊itemStyle，仅对该item有效\n itemStyle:{}\n}]\n</code></pre>\n",
+ "descriptionCN": "<p>关系图的节点数据列表。</p>\n<pre><code class=\"lang-js\">data: [{\n name: '1',\n x: 10,\n y: 10,\n value: 10\n}, {\n name: '2',\n x: 100,\n y: 100,\n value: 20,\n symbolSize: 20,\n itemStyle: {\n normal: {\n color: 'red'\n }\n }\n}]\n</code></pre>\n<p><strong>注意:</strong> 节点的<code>name</code>不能重复。</p>\n",
"items": {
"type": "Object",
"properties": {
@@ -59730,6 +60477,24 @@
],
"descriptionCN": "<p>数据项名称。</p>\n"
},
+ "x": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p>节点的初始 x 值。在不指定的时候需要指明<code>layout</code>属性选择布局方式。</p>\n"
+ },
+ "y": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p>节点的初始 y 值。在不指定的时候需要指明<code>layout</code>属性选择布局方式。</p>\n"
+ },
+ "fixed": {
+ "type": [
+ "boolean"
+ ],
+ "descriptionCN": "<p>节点在力引导布局中是否固定。</p>\n"
+ },
"value": {
"type": [
"number",
@@ -72594,9 +73359,10 @@
},
"symbolBoundingData": {
"type": [
- "number"
+ "number",
+ "Array"
],
- "descriptionCN": "<p>这个属性是『指定图形界限的值』。它指定了一个 data，这个 data 映射在坐标系上的位置，是图形绘制的界限。也就是说，如果设置了 <code>symbolBoundingData</code>，图形的尺寸则由 <code>symbolBoundingData</code> 决定。</p>\n<p>当柱子是水平的，symbolBoundingData 对应到 x 轴上，当柱子是竖直的，symbolBoundingData 对应到 y 轴上。</p>\n<p>规则：</p>\n<ul>\n<li><p>没有使用 <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> 时：</p>\n<p> <code>symbolBoundingData</code> 缺省情况下和『参考柱』的尺寸一样。图形的尺寸由零点和 <code>symbolBoundingData</code> 决定。举例，当柱子是竖直的，柱子对应的 data 为 <code>24</code>，<code>symbolSize</code> 设置为 <code>[30, '50%']</code>，<code>symbolBoundingData</code> 设置为 <code>124</code>，那么最终图形的高度为 <code>124 * 50% = 62</code>。如果 <code>symbolBoundingData</code> 不设置，那么最终图形的高度为 <code>24 * 50% = 12</code>。</p>\n</li>\n<li><p>使用了 <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> 时：</p>\n<p> <code>symbolBoundingData</code> 缺省情况取当前坐标系所显示出的最值。<code>symbolBoundingData</code> 定义了一个 bounding，重复的图形在这个 bounding 中，依据 <a href=\"#series-pictorialBar.symbolMargin\">symbolMargin</a> 和 <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> 和 <a href=\"#series-pictorialBar.symbolSize\">symbolSize</a> 进行排布。这几个变量决定了图形的间隔大小。</p>\n</li>\n</ul>\n<p>在这些场景中，你可能会需要设置 <code>symbolBoundingData</code>：</p>\n<ul>\n<li><p>使用了 <a href=\"#series-pictorialBar.symbolClip\">symbolCilp</a> 时：</p>\n<p> 使用一个系列表达『总值』，另一个系列表达『当前值』的时候，需要两个系列画出的图形一样大。那么就把两个系列的 <code>symbolBoundingData</code> 设为一样大。</p>\n</li>\n</ul>\n<p>例子：</p>\n<iframe data-src=\"https://ecomfe.github.io/echarts-examples/public/view.html?c=doc-example/pictorialBar-clip&reset=1&edit=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n<ul>\n<li><p>使用了 <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> 时：</p>\n<p> 如果需要不同柱子中的图形的间隔保持一致，那么可以把 <code>symbolBoundingData</code> 设为一致的数值。当然，不设置 <code>symbolBoundingData</code> 也是可以的，因为其缺省值就是一个定值（坐标系所显示出的最值）。</p>\n</li>\n</ul>\n<p>例子：</p>\n<iframe data-src=\"https://ecomfe.github.io/echarts-examples/public/view.html?c=doc-example/pictorialBar-repeatLayout&reset=1&edit=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n\n\n\n<p>此属性可以被设置在系列的 <a href=\"#series-pictorialBar.symbolBoundingData\">根部</a>，表示对此系列中所有数据都生效；也可以被设置在 <a href=\"series-pictorialBar.data\" target=\"_blank\">data</a> 中的 <a href=\"#series-pictorialBar.data.symbolBoundingData\">每个数据项中</a>，表示只对此数据项生效。</p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">series: [{\n symbolBoundingData: ... // 对 data 中所有数据项生效。\n data: [23, 56]\n}]\n或者\nseries: [{\n data: [{\n value: 23\n symbolBoundingData: ... // 只对此数据项生效\n }, {\n value: 56\n symbolBoundingData: ... // 只对此数据项生效\n }]\n}]\n</code></pre>\n"
+ "descriptionCN": "<p>这个属性是『指定图形界限的值』。它指定了一个 data，这个 data 映射在坐标系上的位置，是图形绘制的界限。也就是说，如果设置了 <code>symbolBoundingData</code>，图形的尺寸则由 <code>symbolBoundingData</code> 决定。</p>\n<p>当柱子是水平的，symbolBoundingData 对应到 x 轴上，当柱子是竖直的，symbolBoundingData 对应到 y 轴上。</p>\n<p>规则：</p>\n<ul>\n<li><p>没有使用 <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> 时：</p>\n<p> <code>symbolBoundingData</code> 缺省情况下和『参考柱』的尺寸一样。图形的尺寸由零点和 <code>symbolBoundingData</code> 决定。举例，当柱子是竖直的，柱子对应的 data 为 <code>24</code>，<code>symbolSize</code> 设置为 <code>[30, '50%']</code>，<code>symbolBoundingData</code> 设置为 <code>124</code>，那么最终图形的高度为 <code>124 * 50% = 62</code>。如果 <code>symbolBoundingData</code> 不设置，那么最终图形的高度为 <code>24 * 50% = 12</code>。</p>\n</li>\n<li><p>使用了 <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> 时：</p>\n<p> <code>symbolBoundingData</code> 缺省情况取当前坐标系所显示出的最值。<code>symbolBoundingData</code> 定义了一个 bounding，重复的图形在这个 bounding 中，依据 <a href=\"#series-pictorialBar.symbolMargin\">symbolMargin</a> 和 <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> 和 <a href=\"#series-pictorialBar.symbolSize\">symbolSize</a> 进行排布。这几个变量决定了图形的间隔大小。</p>\n</li>\n</ul>\n<p>在这些场景中，你可能会需要设置 <code>symbolBoundingData</code>：</p>\n<ul>\n<li><p>使用了 <a href=\"#series-pictorialBar.symbolClip\">symbolCilp</a> 时：</p>\n<p> 使用一个系列表达『总值』，另一个系列表达『当前值』的时候，需要两个系列画出的图形一样大。那么就把两个系列的 <code>symbolBoundingData</code> 设为一样大。</p>\n</li>\n</ul>\n<p>例子：</p>\n<iframe data-src=\"https://ecomfe.github.io/echarts-examples/public/view.html?c=doc-example/pictorialBar-clip&reset=1&edit=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n<ul>\n<li><p>使用了 <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> 时：</p>\n<p> 如果需要不同柱子中的图形的间隔保持一致，那么可以把 <code>symbolBoundingData</code> 设为一致的数值。当然，不设置 <code>symbolBoundingData</code> 也是可以的，因为其缺省值就是一个定值（坐标系所显示出的最值）。</p>\n</li>\n</ul>\n<p>例子：</p>\n<iframe data-src=\"https://ecomfe.github.io/echarts-examples/public/view.html?c=doc-example/pictorialBar-repeatLayout&reset=1&edit=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n<p><br>\n<code>symbolBoundingData</code> 可以是一个数组，例如 <code>[-40, 60]</code>，表示同时指定了正值的 <code>symbolBoundingData</code> 和负值的 <code>symbolBoundingData</code>。</p>\n<p>参见例子：</p>\n<iframe data-src=\"https://ecomfe.github.io/echarts-examples/public/view.html?c=doc-example/pictorialBar-symbolBoundingDataArray&reset=1&edit=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n\n\n\n<p>此属性可以被设置在系列的 <a href=\"#series-pictorialBar.symbolBoundingData\">根部</a>，表示对此系列中所有数据都生效；也可以被设置在 <a href=\"series-pictorialBar.data\" target=\"_blank\">data</a> 中的 <a href=\"#series-pictorialBar.data.symbolBoundingData\">每个数据项中</a>，表示只对此数据项生效。</p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">series: [{\n symbolBoundingData: ... // 对 data 中所有数据项生效。\n data: [23, 56]\n}]\n或者\nseries: [{\n data: [{\n value: 23\n symbolBoundingData: ... // 只对此数据项生效\n }, {\n value: 56\n symbolBoundingData: ... // 只对此数据项生效\n }]\n}]\n</code></pre>\n"
},
"symbolPatternSize": {
"type": [
@@ -72771,9 +73537,10 @@
},
"symbolBoundingData": {
"type": [
- "number"
+ "number",
+ "Array"
],
- "descriptionCN": "<p>这个属性是『指定图形界限的值』。它指定了一个 data，这个 data 映射在坐标系上的位置，是图形绘制的界限。也就是说，如果设置了 <code>symbolBoundingData</code>，图形的尺寸则由 <code>symbolBoundingData</code> 决定。</p>\n<p>当柱子是水平的，symbolBoundingData 对应到 x 轴上，当柱子是竖直的，symbolBoundingData 对应到 y 轴上。</p>\n<p>规则：</p>\n<ul>\n<li><p>没有使用 <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> 时：</p>\n<p> <code>symbolBoundingData</code> 缺省情况下和『参考柱』的尺寸一样。图形的尺寸由零点和 <code>symbolBoundingData</code> 决定。举例，当柱子是竖直的，柱子对应的 data 为 <code>24</code>，<code>symbolSize</code> 设置为 <code>[30, '50%']</code>，<code>symbolBoundingData</code> 设置为 <code>124</code>，那么最终图形的高度为 <code>124 * 50% = 62</code>。如果 <code>symbolBoundingData</code> 不设置，那么最终图形的高度为 <code>24 * 50% = 12</code>。</p>\n</li>\n<li><p>使用了 <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> 时：</p>\n<p> <code>symbolBoundingData</code> 缺省情况取当前坐标系所显示出的最值。<code>symbolBoundingData</code> 定义了一个 bounding，重复的图形在这个 bounding 中，依据 <a href=\"#series-pictorialBar.symbolMargin\">symbolMargin</a> 和 <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> 和 <a href=\"#series-pictorialBar.symbolSize\">symbolSize</a> 进行排布。这几个变量决定了图形的间隔大小。</p>\n</li>\n</ul>\n<p>在这些场景中，你可能会需要设置 <code>symbolBoundingData</code>：</p>\n<ul>\n<li><p>使用了 <a href=\"#series-pictorialBar.symbolClip\">symbolCilp</a> 时：</p>\n<p> 使用一个系列表达『总值』，另一个系列表达『当前值』的时候，需要两个系列画出的图形一样大。那么就把两个系列的 <code>symbolBoundingData</code> 设为一样大。</p>\n</li>\n</ul>\n<p>例子：</p>\n<iframe data-src=\"doc-example/pictorialBar-clip&reset=1&edit=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n<ul>\n<li><p>使用了 <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> 时：</p>\n<p> 如果需要不同柱子中的图形的间隔保持一致，那么可以把 <code>symbolBoundingData</code> 设为一致的数值。当然，不设置 <code>symbolBoundingData</code> 也是可以的，因为其缺省值就是一个定值（坐标系所显示出的最值）。</p>\n</li>\n</ul>\n<p>例子：</p>\n<iframe data-src=\"doc-example/pictorialBar-repeatLayout&reset=1&edit=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n\n\n\n<p>此属性可以被设置在系列的 <a href=\"#series-pictorialBar.symbolBoundingData\">根部</a>，表示对此系列中所有数据都生效；也可以被设置在 <a href=\"series-pictorialBar.data\" target=\"_blank\">data</a> 中的 <a href=\"#series-pictorialBar.data.symbolBoundingData\">每个数据项中</a>，表示只对此数据项生效。</p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">series: [{\n symbolBoundingData: ... // 对 data 中所有数据项生效。\n data: [23, 56]\n}]\n或者\nseries: [{\n data: [{\n value: 23\n symbolBoundingData: ... // 只对此数据项生效\n }, {\n value: 56\n symbolBoundingData: ... // 只对此数据项生效\n }]\n}]\n</code></pre>\n"
+ "descriptionCN": "<p>这个属性是『指定图形界限的值』。它指定了一个 data，这个 data 映射在坐标系上的位置，是图形绘制的界限。也就是说，如果设置了 <code>symbolBoundingData</code>，图形的尺寸则由 <code>symbolBoundingData</code> 决定。</p>\n<p>当柱子是水平的，symbolBoundingData 对应到 x 轴上，当柱子是竖直的，symbolBoundingData 对应到 y 轴上。</p>\n<p>规则：</p>\n<ul>\n<li><p>没有使用 <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> 时：</p>\n<p> <code>symbolBoundingData</code> 缺省情况下和『参考柱』的尺寸一样。图形的尺寸由零点和 <code>symbolBoundingData</code> 决定。举例，当柱子是竖直的，柱子对应的 data 为 <code>24</code>，<code>symbolSize</code> 设置为 <code>[30, '50%']</code>，<code>symbolBoundingData</code> 设置为 <code>124</code>，那么最终图形的高度为 <code>124 * 50% = 62</code>。如果 <code>symbolBoundingData</code> 不设置，那么最终图形的高度为 <code>24 * 50% = 12</code>。</p>\n</li>\n<li><p>使用了 <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> 时：</p>\n<p> <code>symbolBoundingData</code> 缺省情况取当前坐标系所显示出的最值。<code>symbolBoundingData</code> 定义了一个 bounding，重复的图形在这个 bounding 中，依据 <a href=\"#series-pictorialBar.symbolMargin\">symbolMargin</a> 和 <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> 和 <a href=\"#series-pictorialBar.symbolSize\">symbolSize</a> 进行排布。这几个变量决定了图形的间隔大小。</p>\n</li>\n</ul>\n<p>在这些场景中，你可能会需要设置 <code>symbolBoundingData</code>：</p>\n<ul>\n<li><p>使用了 <a href=\"#series-pictorialBar.symbolClip\">symbolCilp</a> 时：</p>\n<p> 使用一个系列表达『总值』，另一个系列表达『当前值』的时候，需要两个系列画出的图形一样大。那么就把两个系列的 <code>symbolBoundingData</code> 设为一样大。</p>\n</li>\n</ul>\n<p>例子：</p>\n<iframe data-src=\"doc-example/pictorialBar-clip&reset=1&edit=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n<ul>\n<li><p>使用了 <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> 时：</p>\n<p> 如果需要不同柱子中的图形的间隔保持一致，那么可以把 <code>symbolBoundingData</code> 设为一致的数值。当然，不设置 <code>symbolBoundingData</code> 也是可以的，因为其缺省值就是一个定值（坐标系所显示出的最值）。</p>\n</li>\n</ul>\n<p>例子：</p>\n<iframe data-src=\"doc-example/pictorialBar-repeatLayout&reset=1&edit=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n<p><br>\n<code>symbolBoundingData</code> 可以是一个数组，例如 <code>[-40, 60]</code>，表示同时指定了正值的 <code>symbolBoundingData</code> 和负值的 <code>symbolBoundingData</code>。</p>\n<p>参见例子：</p>\n<iframe data-src=\"doc-example/pictorialBar-symbolBoundingDataArray&reset=1&edit=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n\n\n\n<p>此属性可以被设置在系列的 <a href=\"#series-pictorialBar.symbolBoundingData\">根部</a>，表示对此系列中所有数据都生效；也可以被设置在 <a href=\"series-pictorialBar.data\" target=\"_blank\">data</a> 中的 <a href=\"#series-pictorialBar.data.symbolBoundingData\">每个数据项中</a>，表示只对此数据项生效。</p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">series: [{\n symbolBoundingData: ... // 对 data 中所有数据项生效。\n data: [23, 56]\n}]\n或者\nseries: [{\n data: [{\n value: 23\n symbolBoundingData: ... // 只对此数据项生效\n }, {\n value: 56\n symbolBoundingData: ... // 只对此数据项生效\n }]\n}]\n</code></pre>\n"
},
"symbolPatternSize": {
"type": [
diff --git a/public/en/documents/asset/gl/img/geo-size.png b/public/en/documents/asset/gl/img/geo-size.png
index d6da123..cffd2fe 100644
--- a/public/en/documents/asset/gl/img/geo-size.png
+++ b/public/en/documents/asset/gl/img/geo-size.png
Binary files differ
diff --git a/public/en/documents/asset/gl/img/geo-size.sketch b/public/en/documents/asset/gl/img/geo-size.sketch
index 277208b..8b5f83c 100644
--- a/public/en/documents/asset/gl/img/geo-size.sketch
+++ b/public/en/documents/asset/gl/img/geo-size.sketch
Binary files differ
diff --git a/public/en/documents/asset/gl/img/roughness.png b/public/en/documents/asset/gl/img/roughness.png
new file mode 100644
index 0000000..76eb955
--- /dev/null
+++ b/public/en/documents/asset/gl/img/roughness.png
Binary files differ
diff --git a/public/en/documents/en/changelog.html b/public/en/documents/en/changelog.html
index 2dc44f7..f141584 100644
--- a/public/en/documents/en/changelog.html
+++ b/public/en/documents/en/changelog.html
@@ -1,3 +1,36 @@
+<h2 id="3-6-2">3.6.2</h2>
+<div class="time">2017-06-15</div>
+
+<ul>
+<li><p>[+] Supported draw <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom">custom series</a> on <a href="https://github.com/ecomfe/echarts/tree/master/extension/bmap">Baidu Map (bmap)</a>. See <a href="https://ecomfe.github.io/echarts-examples/public/editor.html?c=map-polygon">example 1</a> and <a href="https://ecomfe.github.io/echarts-examples/public/editor.html?c=map-bin">example 2</a>。</p>
+</li>
+<li><p>[+] Supported show parent labels in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-treemap">treemap</a>. See <a href="https://ecomfe.github.io/echarts-examples/public/editor.html?c=treemap-show-parent">example</a>. See <a href="https://github.com/ecomfe/echarts/issues/5869">#5869</a> and <a href="https://github.com/ecomfe/echarts/issues/5579">#5579</a>.</p>
+</li>
+<li><p>[+] Supported specifying mouse cursor style by: <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-line.cursor">series-line.cursor</a>, <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-bar.cursor">series-bar.cursor</a>, <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-pie.cursor">series-pie.cursor</a>, <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-scatter.cursor">series-scatter.cursor</a>, <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-effectScatter.cursor">series-effectScatter.cursor</a>, <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-graph.cursor">series-graph.cursor</a>, <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-pictorialBar.cursor">series-pictorialBar.cursor</a>.</p>
+</li>
+<li><p>[+] Support both negative and positive bounding data specified on <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-picotrialBar.symbolBoundingData">series-picotrialBar.symbolBoundingData</a>. See <a href="https://github.com/ecomfe/echarts/issues/5793">#5793</a>.</p>
+</li>
+<li><p>[+] Supported <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-graph.data.fixed">fixed</a> in <code>graph</code>. See <a href="https://github.com/ecomfe/echarts/issues/5966">#5966</a>.</p>
+</li>
+<li><p>[+] Supported <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-treemap.label.normal.formatter">label.formatter</a>in <code>treemap</code>. See <a href="https://github.com/ecomfe/echarts/issues/5757">#5757</a>.</p>
+</li>
+<li><p>[+] Supported <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#timeline.label.normal.textStyle.align">label.normal.textStyle.align</a> and <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#timeline.label.normal.textStyle.basealign">label.normal.textStyle.basealign</a> in <code>timeline</code>. See <a href="https://github.com/ecomfe/echarts/issues/5960">#5960</a>.</p>
+</li>
+<li><p>[^] Fixed that <code>tooltip</code> did not work when <a href="https://ecomfe.github.io/echarts-examples/public/editor.html?c=scatter-large">large scatter</a> was zoomed. See<a href="https://github.com/ecomfe/echarts/issues/5837">#5837</a>.</p>
+</li>
+<li><p>[^] Fixed that parameter <code>position</code> did not work when trigger <a href="https://ecomfe.github.io/echarts-doc/public/en/api.html#action.tooltip.showTip">showTip</a> action. See <a href="https://github.com/ecomfe/echarts/issues/5874">#5874</a>.</p>
+</li>
+<li><p>[^] Fixed that sometimes the sum of the percent value is less than <code>100%</code> slightly in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-pie">pie</a>, which was caused by precision problem. See <a href="https://github.com/ecomfe/echarts/issues/5850">#5850</a>.</p>
+</li>
+<li><p>[^] Fixed only the last <code>markPoint</code> or <code>markLine</code> was displayed when <code>series.name</code> was the same. See <a href="https://github.com/ecomfe/echarts/issues/5712">#5712</a>.</p>
+</li>
+<li><p>[^] Fixed that <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-bar.itemStyle.normal.barBorderRadius">barBorderRadius</a> did not work in horizontal bar. See <a href="https://github.com/ecomfe/echarts/issues/5943">#5943</a>.</p>
+</li>
+<li><p>[^] Fixed the zoom point error when applying <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#dataZoom-inside">dataZoom-inside</a> on Y axis. See <a href="https://github.com/ecomfe/echarts/issues/5278">#5278</a>.</p>
+</li>
+<li><p>[^] Fixed sometimes <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-radar">radar</a> did not display normally. See <a href="https://github.com/ecomfe/echarts/issues/5986">#5986</a>.</p>
+</li>
+</ul>
<h2 id="v3-6-1">v3.6.1</h2>
<div class="time">2017-05-26</div>
diff --git a/public/en/documents/en/option.json b/public/en/documents/en/option.json
index 7c593c6..80c0fa9 100644
--- a/public/en/documents/en/option.json
+++ b/public/en/documents/en/option.json
@@ -671,7 +671,7 @@
"type": [
"*"
],
- "descriptionCN": "<p>tooltip settings in the coordinate system component.</p>\n<hr>\n<p><strong>General Introduction:</strong></p>\n<p>tooltip can be configured on different places:</p>\n<ul>\n<li><p>Configured on glboal: <a href=\"#tooltip\">tooltip</a></p>\n</li>\n<li><p>Configured in a coordinate system: <a href=\"#grid.tooltip\">grid.tooltip</a>, <a href=\"#polar.tooltip\">polar.tooltip</a>, <a href=\"#single.tooltip\">single.tooltip</a></p>\n</li>\n<li><p>Configured in a series: <a href=\"#series.tooltip\">series.tooltip</a></p>\n</li>\n<li><p>Configured in each item of <code>series.data</code>: <a href=\"#series.data.tooltip\">series.data.tooltip</a></p>\n</li>\n</ul>\n<hr>\n",
+ "descriptionCN": "<p>tooltip settings in the coordinate system component.</p>\n<hr>\n<p><strong>General Introduction:</strong></p>\n<p>tooltip can be configured on different places:</p>\n<ul>\n<li><p>Configured on global: <a href=\"#tooltip\">tooltip</a></p>\n</li>\n<li><p>Configured in a coordinate system: <a href=\"#grid.tooltip\">grid.tooltip</a>, <a href=\"#polar.tooltip\">polar.tooltip</a>, <a href=\"#single.tooltip\">single.tooltip</a></p>\n</li>\n<li><p>Configured in a series: <a href=\"#series.tooltip\">series.tooltip</a></p>\n</li>\n<li><p>Configured in each item of <code>series.data</code>: <a href=\"#series.data.tooltip\">series.data.tooltip</a></p>\n</li>\n</ul>\n<hr>\n",
"properties": {
"show": {
"type": [
@@ -2123,7 +2123,7 @@
}
}
},
- "tiggerTooltip": {
+ "triggerTooltip": {
"type": [
"boolean"
],
@@ -3239,7 +3239,7 @@
}
}
},
- "tiggerTooltip": {
+ "triggerTooltip": {
"type": [
"boolean"
],
@@ -3392,7 +3392,7 @@
"type": [
"*"
],
- "descriptionCN": "<p>tooltip settings in the coordinate system component.</p>\n<hr>\n<p><strong>General Introduction:</strong></p>\n<p>tooltip can be configured on different places:</p>\n<ul>\n<li><p>Configured on glboal: <a href=\"#tooltip\">tooltip</a></p>\n</li>\n<li><p>Configured in a coordinate system: <a href=\"#grid.tooltip\">grid.tooltip</a>, <a href=\"#polar.tooltip\">polar.tooltip</a>, <a href=\"#single.tooltip\">single.tooltip</a></p>\n</li>\n<li><p>Configured in a series: <a href=\"#series.tooltip\">series.tooltip</a></p>\n</li>\n<li><p>Configured in each item of <code>series.data</code>: <a href=\"#series.data.tooltip\">series.data.tooltip</a></p>\n</li>\n</ul>\n<hr>\n",
+ "descriptionCN": "<p>tooltip settings in the coordinate system component.</p>\n<hr>\n<p><strong>General Introduction:</strong></p>\n<p>tooltip can be configured on different places:</p>\n<ul>\n<li><p>Configured on global: <a href=\"#tooltip\">tooltip</a></p>\n</li>\n<li><p>Configured in a coordinate system: <a href=\"#grid.tooltip\">grid.tooltip</a>, <a href=\"#polar.tooltip\">polar.tooltip</a>, <a href=\"#single.tooltip\">single.tooltip</a></p>\n</li>\n<li><p>Configured in a series: <a href=\"#series.tooltip\">series.tooltip</a></p>\n</li>\n<li><p>Configured in each item of <code>series.data</code>: <a href=\"#series.data.tooltip\">series.data.tooltip</a></p>\n</li>\n</ul>\n<hr>\n",
"properties": {
"show": {
"type": [
@@ -4817,7 +4817,7 @@
}
}
},
- "tiggerTooltip": {
+ "triggerTooltip": {
"type": [
"boolean"
],
@@ -5837,7 +5837,7 @@
}
}
},
- "tiggerTooltip": {
+ "triggerTooltip": {
"type": [
"boolean"
],
@@ -7854,7 +7854,7 @@
"type": [
"Object"
],
- "descriptionCN": "<p>Tooltip component.</p>\n<hr>\n<p><strong>General Introduction:</strong></p>\n<p>tooltip can be configured on different places:</p>\n<ul>\n<li><p>Configured on glboal: <a href=\"#tooltip\">tooltip</a></p>\n</li>\n<li><p>Configured in a coordinate system: <a href=\"#grid.tooltip\">grid.tooltip</a>, <a href=\"#polar.tooltip\">polar.tooltip</a>, <a href=\"#single.tooltip\">single.tooltip</a></p>\n</li>\n<li><p>Configured in a series: <a href=\"#series.tooltip\">series.tooltip</a></p>\n</li>\n<li><p>Configured in each item of <code>series.data</code>: <a href=\"#series.data.tooltip\">series.data.tooltip</a></p>\n</li>\n</ul>\n<hr>\n",
+ "descriptionCN": "<p>Tooltip component.</p>\n<hr>\n<p><strong>General Introduction:</strong></p>\n<p>tooltip can be configured on different places:</p>\n<ul>\n<li><p>Configured on global: <a href=\"#tooltip\">tooltip</a></p>\n</li>\n<li><p>Configured in a coordinate system: <a href=\"#grid.tooltip\">grid.tooltip</a>, <a href=\"#polar.tooltip\">polar.tooltip</a>, <a href=\"#single.tooltip\">single.tooltip</a></p>\n</li>\n<li><p>Configured in a series: <a href=\"#series.tooltip\">series.tooltip</a></p>\n</li>\n<li><p>Configured in each item of <code>series.data</code>: <a href=\"#series.data.tooltip\">series.data.tooltip</a></p>\n</li>\n</ul>\n<hr>\n",
"properties": {
"show": {
"type": [
@@ -8638,7 +8638,7 @@
}
}
},
- "tiggerTooltip": {
+ "triggerTooltip": {
"type": [
"boolean"
],
@@ -13455,7 +13455,7 @@
}
}
},
- "tiggerTooltip": {
+ "triggerTooltip": {
"type": [
"boolean"
],
@@ -13559,7 +13559,7 @@
"type": [
"*"
],
- "descriptionCN": "<p>tooltip settings in the coordinate system component.</p>\n<hr>\n<p><strong>General Introduction:</strong></p>\n<p>tooltip can be configured on different places:</p>\n<ul>\n<li><p>Configured on glboal: <a href=\"#tooltip\">tooltip</a></p>\n</li>\n<li><p>Configured in a coordinate system: <a href=\"#grid.tooltip\">grid.tooltip</a>, <a href=\"#polar.tooltip\">polar.tooltip</a>, <a href=\"#single.tooltip\">single.tooltip</a></p>\n</li>\n<li><p>Configured in a series: <a href=\"#series.tooltip\">series.tooltip</a></p>\n</li>\n<li><p>Configured in each item of <code>series.data</code>: <a href=\"#series.data.tooltip\">series.data.tooltip</a></p>\n</li>\n</ul>\n<hr>\n",
+ "descriptionCN": "<p>tooltip settings in the coordinate system component.</p>\n<hr>\n<p><strong>General Introduction:</strong></p>\n<p>tooltip can be configured on different places:</p>\n<ul>\n<li><p>Configured on global: <a href=\"#tooltip\">tooltip</a></p>\n</li>\n<li><p>Configured in a coordinate system: <a href=\"#grid.tooltip\">grid.tooltip</a>, <a href=\"#polar.tooltip\">polar.tooltip</a>, <a href=\"#single.tooltip\">single.tooltip</a></p>\n</li>\n<li><p>Configured in a series: <a href=\"#series.tooltip\">series.tooltip</a></p>\n</li>\n<li><p>Configured in each item of <code>series.data</code>: <a href=\"#series.data.tooltip\">series.data.tooltip</a></p>\n</li>\n</ul>\n<hr>\n",
"properties": {
"show": {
"type": [
@@ -14015,7 +14015,7 @@
"type": [
"Object"
],
- "descriptionCN": "<p><code>timeline</code> component, which provides functions like switching and playing between multiple ECharts <code>options</code>. </p>\n<p>Here is an example: </p>\n<iframe data-src=\"https://ecomfe.github.io/echarts-examples/public/view.html?c=doc-example/mix-timeline-all&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p>Different from other components, <code>timeline</code> component requires multiple options. If the traditional way of ECharts option is called <em>atomic option</em>, then, the option used along with timeline should be call a <em>compound option</em> composed with multiple atomic options. For example:</p>\n<pre><code class=\"lang-javascript\">// In the following example, baseOption is an *atomic option*, so as each item in options array.\n// Each of the atomic option follows configuration introduced in this document.\nmyChart.setOption(\n {\n baseOption: {\n timeline: {\n ...,\n data: ['2002-01-01', '2003-01-01', '2004-01-01']\n },\n title: {\n subtext: ' Data is from National Bureau of Statistics '\n },\n grid: {...},\n xAxis: [...],\n yAxis: [...],\n series: [\n { // other configurations of series 1\n type: 'bar',\n ...\n },\n { // other configurations of series 2\n type: 'line',\n ...\n },\n { // other configurations of series 3\n type: 'pie',\n ...\n }\n ]\n },\n options: [\n { // it is an option corresponding to '2002-01-01'\n title: {\n text: 'the statistics of the year 2002'\n },\n series: [\n {data: []}, // the data of series 1\n {data: []}, // the data of series 2\n {data: []} // the data of series 3\n ]\n },\n { // it is an option corresponding to '2003-01-01'\n title: {\n text: 'the statistics of the year 2003'\n },\n series: [\n {data: []},\n {data: []},\n {data: []}\n ]\n },\n { // it is an option corresponding to '2004-01-01' \n title: {\n text: 'the statistics of the year 2004'\n },\n series: [\n {data: []},\n {data: []},\n {data: []}\n ]\n }\n ]\n }\n);\n</code></pre>\n<p>In the above example, each item in <code>timeline.data</code> corresponds to each <code>option</code> of <code>options</code> array. </p>\n<p><br>\n<strong>Attention and Best Practice: </strong></p>\n<ul>\n<li><p>Shared configuration items are recommended to be set in <code>baseOption</code>. When switching in <code>timeline</code>, <code>option</code> in corresponding <code>options</code> array will be merged with <code>baseOption</code> to form the final <code>option</code>.</p>\n</li>\n<li><p>In <code>options</code> array, if an attribute is configured in one of the options, then, it should also be configured in other options. Otherwise, this attribute will be ignored.</p>\n</li>\n<li><p><code>options</code> in <em>compound option</em> doesn't support merge.</p>\n<p> That is to say, when calling <code>chart.setOption(rawOption)</code> after the first time, if <code>rawOption</code> is a <em>compound option</em> (meaning that it contains an array of <code>options</code>), then the new <code>rawOption.options</code> will replace the old one, instead of merging with it. Of course, <code>rawOption.baseOption</code> will be merged with that of old option normally.</p>\n</li>\n</ul>\n<p><br>\n<strong>Compatibility with ECharts 2: </strong></p>\n<ul>\n<li><p>ECharts3 doesn't support <code>timeline.notMerge</code> parameter any more, which implies <em>notMerge mode</em> is no longer supported. If you need this function, you may manage the option in your own program before passing to <code>setOption(option, true)</code>.</p>\n</li>\n<li><p>Comparing ECharts 3 with ECharts 2, the definition location of timeline attributes are different. The one in ECharts 3 is moved to <code>baseOption</code> and is regarded as a seperate component, which is also compatible with the timeline definition location of ECharts 2. But it is not recommended to do so. </p>\n</li>\n</ul>\n",
+ "descriptionCN": "<p><code>timeline</code> component, which provides functions like switching and playing between multiple ECharts <code>options</code>.</p>\n<p>Here is an example:</p>\n<iframe data-src=\"https://ecomfe.github.io/echarts-examples/public/view.html?c=doc-example/mix-timeline-all&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p>Different from other components, <code>timeline</code> component requires multiple options. If the traditional way of ECharts option is called <em>atomic option</em>, then, the option used along with timeline should be call a <em>compound option</em> composed with multiple atomic options. For example:</p>\n<pre><code class=\"lang-javascript\">// In the following example, baseOption is an *atomic option*, so as each item in options array.\n// Each of the atomic option follows configuration introduced in this document.\nmyChart.setOption(\n {\n baseOption: {\n timeline: {\n ...,\n data: ['2002-01-01', '2003-01-01', '2004-01-01']\n },\n title: {\n subtext: ' Data is from National Bureau of Statistics '\n },\n grid: {...},\n xAxis: [...],\n yAxis: [...],\n series: [\n { // other configurations of series 1\n type: 'bar',\n ...\n },\n { // other configurations of series 2\n type: 'line',\n ...\n },\n { // other configurations of series 3\n type: 'pie',\n ...\n }\n ]\n },\n options: [\n { // it is an option corresponding to '2002-01-01'\n title: {\n text: 'the statistics of the year 2002'\n },\n series: [\n {data: []}, // the data of series 1\n {data: []}, // the data of series 2\n {data: []} // the data of series 3\n ]\n },\n { // it is an option corresponding to '2003-01-01'\n title: {\n text: 'the statistics of the year 2003'\n },\n series: [\n {data: []},\n {data: []},\n {data: []}\n ]\n },\n { // it is an option corresponding to '2004-01-01'\n title: {\n text: 'the statistics of the year 2004'\n },\n series: [\n {data: []},\n {data: []},\n {data: []}\n ]\n }\n ]\n }\n);\n</code></pre>\n<p>In the above example, each item in <code>timeline.data</code> corresponds to each <code>option</code> of <code>options</code> array.</p>\n<p><br>\n<strong>Attention and Best Practice: </strong></p>\n<ul>\n<li><p>Shared configuration items are recommended to be set in <code>baseOption</code>. When switching in <code>timeline</code>, <code>option</code> in corresponding <code>options</code> array will be merged with <code>baseOption</code> to form the final <code>option</code>.</p>\n</li>\n<li><p>In <code>options</code> array, if an attribute is configured in one of the options, then, it should also be configured in other options. Otherwise, this attribute will be ignored.</p>\n</li>\n<li><p><code>options</code> in <em>compound option</em> doesn't support merge.</p>\n<p> That is to say, when calling <code>chart.setOption(rawOption)</code> after the first time, if <code>rawOption</code> is a <em>compound option</em> (meaning that it contains an array of <code>options</code>), then the new <code>rawOption.options</code> will replace the old one, instead of merging with it. Of course, <code>rawOption.baseOption</code> will be merged with that of old option normally.</p>\n</li>\n</ul>\n<p><br>\n<strong>Compatibility with ECharts 2: </strong></p>\n<ul>\n<li><p>ECharts3 doesn't support <code>timeline.notMerge</code> parameter any more, which implies <em>notMerge mode</em> is no longer supported. If you need this function, you may manage the option in your own program before passing to <code>setOption(option, true)</code>.</p>\n</li>\n<li><p>Comparing ECharts 3 with ECharts 2, the definition location of timeline attributes are different. The one in ECharts 3 is moved to <code>baseOption</code> and is regarded as a seperate component, which is also compatible with the timeline definition location of ECharts 2. But it is not recommended to do so.</p>\n</li>\n</ul>\n",
"properties": {
"show": {
"type": [
@@ -14035,14 +14035,14 @@
"type": [
"string"
],
- "descriptionCN": "<p>Type of axis, whose values may be: </p>\n<ul>\n<li><code>'value'</code>\n Numeric axis, which is suitable for continuous data.</li>\n<li><code>'category'</code>\n Category axis, which is suitable for category data.</li>\n<li><code>'time'</code>\n Time axis, which is suitable for continuous time data. Compared with value axis, time axis is equipped with time formatting function and has a different method when calculating axis ticks. For example, for time axis, axis ticks may vary in choosing unit as month, week, date, or hour based on the range of data. </li>\n</ul>\n",
+ "descriptionCN": "<p>Type of axis, whose values may be:</p>\n<ul>\n<li><code>'value'</code>\n Numeric axis, which is suitable for continuous data.</li>\n<li><code>'category'</code>\n Category axis, which is suitable for category data.</li>\n<li><code>'time'</code>\n Time axis, which is suitable for continuous time data. Compared with value axis, time axis is equipped with time formatting function and has a different method when calculating axis ticks. For example, for time axis, axis ticks may vary in choosing unit as month, week, date, or hour based on the range of data.</li>\n</ul>\n",
"default": "'time'"
},
"currentIndex": {
"type": [
"number"
],
- "descriptionCN": "<p>Indicates which is the currently selected item. For instance, if <code>currentIndex</code> is <code>0</code>, it indicates that the currently selected item is <code>timeline.data[0]</code> (namely, using <code>options[0]</code>). </p>\n",
+ "descriptionCN": "<p>Indicates which is the currently selected item. For instance, if <code>currentIndex</code> is <code>0</code>, it indicates that the currently selected item is <code>timeline.data[0]</code> (namely, using <code>options[0]</code>).</p>\n",
"default": 0
},
"autoPlay": {
@@ -14077,14 +14077,14 @@
"type": [
"boolean"
],
- "descriptionCN": "<p>Whether the view updates in real time during dragging the control dot. </p>\n",
+ "descriptionCN": "<p>Whether the view updates in real time during dragging the control dot.</p>\n",
"default": true
},
"controlPosition": {
"type": [
"string"
],
- "descriptionCN": "<p>Position of the play button, whose valid values are <code>'left'</code> and <code>'right'</code>. </p>\n",
+ "descriptionCN": "<p>Position of the play button, whose valid values are <code>'left'</code> and <code>'right'</code>.</p>\n",
"default": "'left'"
},
"zlevel": {
@@ -14257,20 +14257,20 @@
],
"descriptionCN": "<p>Label axis, which has <code>normal</code> and <code>emphasis</code> status. <code>normal</code> refers to the normal style of text, while <code>emphasis</code> is the highlighted style of text. For instance, text style in <code>emphasis</code> would be used when mouse hovers or legend connects.</p>\n",
"properties": {
- "position": {
- "type": [
- "string",
- "number"
- ],
- "descriptionCN": "<p>Configurations:</p>\n<ul>\n<li><p><code>'auto'</code>: \n Automatic layout.</p>\n</li>\n<li><p><code>'left'</code>: \n Put it along the left margin.\n It is valid when <a href=\"#timeline.orient\">timline.orient</a> is set as <code>'horizontal'</code> .</p>\n</li>\n<li><p><code>'right'</code>: \n Put it along the right margin.\n It is valid when <a href=\"#timeline.orient\">timline.orient</a> is set as <code>'horizontal'</code>.</p>\n</li>\n<li><p><code>'top'</code>: \n Put it along the margin of the top.\n It is valid when <a href=\"#timeline.orient\">timline.orient</a> is set as <code>'vertical'</code>.</p>\n</li>\n<li><p><code>'bottom'</code>: \n Put it along the margin of the bottom.\n It is valid when <a href=\"#timeline.orient\">timline.orient</a> is set as <code>'vertical'</code>.</p>\n</li>\n<li><p><code>number</code>: \n When it is assigned to be a a number value, it indicates the distance between <code>label</code> and axis. If it is set to be <code>0</code> , <code>label</code> would be at the same position with axis. Negative value is valid for the other side of the axis. </p>\n</li>\n</ul>\n",
- "default": "'auto'"
- },
"normal": {
"type": [
"Object"
],
"descriptionCN": "",
"properties": {
+ "position": {
+ "type": [
+ "string",
+ "number"
+ ],
+ "descriptionCN": "<p>Configurations:</p>\n<ul>\n<li><p><code>'auto'</code>:\n Automatic layout.</p>\n</li>\n<li><p><code>'left'</code>:\n Put it along the left margin.\n It is valid when <a href=\"#timeline.orient\">timline.orient</a> is set as <code>'horizontal'</code> .</p>\n</li>\n<li><p><code>'right'</code>:\n Put it along the right margin.\n It is valid when <a href=\"#timeline.orient\">timline.orient</a> is set as <code>'horizontal'</code>.</p>\n</li>\n<li><p><code>'top'</code>:\n Put it along the margin of the top.\n It is valid when <a href=\"#timeline.orient\">timline.orient</a> is set as <code>'vertical'</code>.</p>\n</li>\n<li><p><code>'bottom'</code>:\n Put it along the margin of the bottom.\n It is valid when <a href=\"#timeline.orient\">timline.orient</a> is set as <code>'vertical'</code>.</p>\n</li>\n<li><p><code>number</code>:\n When it is assigned to be a a number value, it indicates the distance between <code>label</code> and axis. If it is set to be <code>0</code> , <code>label</code> would be at the same position with axis. Negative value is valid for the other side of the axis.</p>\n</li>\n</ul>\n",
+ "default": "'auto'"
+ },
"show": {
"type": [
"boolean"
@@ -14290,7 +14290,7 @@
"type": [
"prefix"
],
- "descriptionCN": "<p>Rotation angle of <code>label</code>, in which positive values refer to counter clockwise rotation. </p>\n",
+ "descriptionCN": "<p>Rotation angle of <code>label</code>, in which positive values refer to counter clockwise rotation.</p>\n",
"default": 0
},
"formatter": {
@@ -14314,6 +14314,18 @@
"descriptionCN": "<p>timeline.lable.normal text color.</p>\n",
"default": "'#304654'"
},
+ "align": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n"
+ },
+ "baseline": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>Baseline alignment of text, automatic by default.\nOptions are: </p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n"
+ },
"fontStyle": {
"type": [
"string"
@@ -14371,7 +14383,7 @@
"type": [
"prefix"
],
- "descriptionCN": "<p>Rotation angle of <code>label</code>, in which positive values refer to counter clockwise rotation. </p>\n",
+ "descriptionCN": "<p>Rotation angle of <code>label</code>, in which positive values refer to counter clockwise rotation.</p>\n",
"default": 0
},
"formatter": {
@@ -14395,6 +14407,18 @@
"descriptionCN": "<p>timeline.lable.emphasis text color.</p>\n",
"default": "'#c23531'"
},
+ "align": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n"
+ },
+ "baseline": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>Baseline alignment of text, automatic by default.\nOptions are: </p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n"
+ },
"fontStyle": {
"type": [
"string"
@@ -14618,28 +14642,28 @@
"type": [
"number"
],
- "descriptionCN": "<p>The border-width of <code>checkpoint</code> in <code>timeline</code> component. </p>\n",
+ "descriptionCN": "<p>The border-width of <code>checkpoint</code> in <code>timeline</code> component.</p>\n",
"default": 5
},
"borderColor": {
"type": [
"Color"
],
- "descriptionCN": "<p>The border-color of <code>checkpoint</code> in <code>timeline</code> component. </p>\n",
+ "descriptionCN": "<p>The border-color of <code>checkpoint</code> in <code>timeline</code> component.</p>\n",
"default": "'rgba(194,53,49, 0.5)'"
},
"animation": {
"type": [
"boolean"
],
- "descriptionCN": "<p>In <code>timeline</code> component, whether there is animation in <code>checkpoint</code> moving during the process of <code>timeline</code> playing and switching. </p>\n",
+ "descriptionCN": "<p>In <code>timeline</code> component, whether there is animation in <code>checkpoint</code> moving during the process of <code>timeline</code> playing and switching.</p>\n",
"default": true
},
"animationDuration": {
"type": [
"number"
],
- "descriptionCN": "<p>The animation duration of <code>checkpoint</code> in <code>timeline</code> component. </p>\n",
+ "descriptionCN": "<p>The animation duration of <code>checkpoint</code> in <code>timeline</code> component.</p>\n",
"default": 300
},
"animationEasing": {
@@ -14794,7 +14818,7 @@
"type": [
"Array"
],
- "descriptionCN": "<p><code>timeline</code> data. Each item of <code>Array</code> can be a instant value. If you need to set style individually for a data item, the <code>data</code> item should be written as <code>Object</code>. In then <code>Object</code>, the attribute of <code>value</code> is numerical value. Other attributes, such as shown the examples below, could cover the attribute configurations in <code>timeline</code>. </p>\n<p>as follows: </p>\n<pre><code class=\"lang-javascript\">[\n '2002-01-01',\n '2003-01-01',\n '2004-01-01',\n {\n value: '2005-01-01',\n tooltip: { // enables `tooltip` to be displayed as mouse hovering to this item.\n formatter: '{b} xxxx'\n },\n symbol: 'diamond', // the special setting of this item's symbol.\n symbolSize: 16 // the special setting of this item's size.\n },\n '2006-01-01',\n '2007-01-01',\n '2008-01-01',\n '2009-01-01',\n '2010-01-01',\n {\n value: '2011-01-01',\n tooltip: { // enables `tooltip` to be displayed as mouse hovering to this item.\n formatter: function (params) {\n return params.name + 'xxxx';\n }\n },\n symbol: 'diamond',\n symbolSize: 18\n },\n]\n</code></pre>\n"
+ "descriptionCN": "<p><code>timeline</code> data. Each item of <code>Array</code> can be a instant value. If you need to set style individually for a data item, the <code>data</code> item should be written as <code>Object</code>. In then <code>Object</code>, the attribute of <code>value</code> is numerical value. Other attributes, such as shown the examples below, could cover the attribute configurations in <code>timeline</code>.</p>\n<p>as follows:</p>\n<pre><code class=\"lang-javascript\">[\n '2002-01-01',\n '2003-01-01',\n '2004-01-01',\n {\n value: '2005-01-01',\n tooltip: { // enables `tooltip` to be displayed as mouse hovering to this item.\n formatter: '{b} xxxx'\n },\n symbol: 'diamond', // the special setting of this item's symbol.\n symbolSize: 16 // the special setting of this item's size.\n },\n '2006-01-01',\n '2007-01-01',\n '2008-01-01',\n '2009-01-01',\n '2010-01-01',\n {\n value: '2011-01-01',\n tooltip: { // enables `tooltip` to be displayed as mouse hovering to this item.\n formatter: function (params) {\n return params.name + 'xxxx';\n }\n },\n symbol: 'diamond',\n symbolSize: 18\n },\n]\n</code></pre>\n"
}
}
},
@@ -15476,7 +15500,7 @@
"descriptionCN": "<p>Text horizontal alignment. Optional values: <code>'left'</code>, <code>'center'</code>, <code>'right'</code>.</p>\n<p><code>'left'</code> means the left side of the text block is specified by the <a href=\"#graphic.elements-text.style.x\">style.x</a>, while <code>'right'</code> means the right side of the text block is specified by <a href=\"#graphic.elements-text.style.y\">style.y</a>.</p>\n",
"default": "'left'"
},
- "textVeticalAlign": {
+ "textVerticalAlign": {
"type": [
"string"
],
@@ -26701,7 +26725,7 @@
"boolean",
"string"
],
- "descriptionCN": "<p>Whether to show as Nightingale chart, which distinguishs data through radius. There are 2 optional modes:</p>\n<ul>\n<li><code>'radius'</code> Use area to show the percentage of data, radius to show data size.</li>\n<li><code>'area'</code> All the sectors will share the same area, the data size is shown only through radiuses.</li>\n</ul>\n",
+ "descriptionCN": "<p>Whether to show as Nightingale chart, which distinguishs data through radius. There are 2 optional modes:</p>\n<ul>\n<li><code>'radius'</code> Use central angle to show the percentage of data, radius to show data size.</li>\n<li><code>'area'</code> All the sectors will share the same central angle, the data size is shown only through radiuses.</li>\n</ul>\n",
"default": false
},
"avoidLabelOverlap": {
@@ -39834,8 +39858,8 @@
"type": [
"boolean"
],
- "descriptionCN": "<p>Wether to show the text label.</p>\n",
- "default": true
+ "descriptionCN": "<p>Whether to show label.</p>\n",
+ "default": false
},
"position": {
"type": [
@@ -39845,6 +39869,19 @@
"descriptionCN": "<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideLeftTop'</li>\n<li>'insideLeftBottom'</li>\n<li>'insideRightTop'</li>\n<li>'insideRightBottom'</li>\n</ul>\n",
"default": "'inside'"
},
+ "offset": {
+ "type": [
+ "Array"
+ ],
+ "descriptionCN": "<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"
+ },
+ "formatter": {
+ "type": [
+ "string",
+ "Function"
+ ],
+ "descriptionCN": "<p>Data label formatter, which supoports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, representing series name, date name, data value respectively.</p>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {c}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data\n value: number|Array,\n // Color of data\n color: string,\n\n}\n</code></pre>\n"
+ },
"textStyle": {
"type": [
"Object"
@@ -39921,8 +39958,8 @@
"type": [
"boolean"
],
- "descriptionCN": "<p>Wether to show the text label.</p>\n",
- "default": true
+ "descriptionCN": "<p>Whether to show label.</p>\n",
+ "default": false
},
"position": {
"type": [
@@ -39932,6 +39969,234 @@
"descriptionCN": "<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideLeftTop'</li>\n<li>'insideLeftBottom'</li>\n<li>'insideRightTop'</li>\n<li>'insideRightBottom'</li>\n</ul>\n",
"default": "'inside'"
},
+ "offset": {
+ "type": [
+ "Array"
+ ],
+ "descriptionCN": "<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"
+ },
+ "formatter": {
+ "type": [
+ "string",
+ "Function"
+ ],
+ "descriptionCN": "<p>Data label formatter, which supoports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, representing series name, date name, data value respectively.</p>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {c}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data\n value: number|Array,\n // Color of data\n color: string,\n\n}\n</code></pre>\n"
+ },
+ "textStyle": {
+ "type": [
+ "Object"
+ ],
+ "descriptionCN": "",
+ "properties": {
+ "ellipsis": {
+ "type": [
+ "boolean"
+ ],
+ "descriptionCN": "<p>When the text is overflow the rectangle boundary, whether to replace the excess part with apostrophe.</p>\n",
+ "default": true
+ },
+ "color": {
+ "type": [
+ "Color"
+ ],
+ "descriptionCN": "<p> text color.</p>\n",
+ "default": "'#fff'"
+ },
+ "fontStyle": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p> font style</p>\n<p>Options are: </p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n",
+ "default": "'normal'"
+ },
+ "fontWeight": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p> font thick weight</p>\n<p>Options are: </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"
+ },
+ "fontFamily": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p> font family</p>\n",
+ "default": "'sans-serief'"
+ },
+ "fontSize": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p> font size</p>\n",
+ "default": 12
+ },
+ "align": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>Horizontal alignment. Optional values are <code>'center'</code>, <code>'right</code> and <code>'left'</code>.</p>\n",
+ "default": "'center'"
+ },
+ "baseline": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>Vertical alignment, Optional values are <code>'middle'</code>, <code>'right</code> and <code>'left'</code>.</p>\n",
+ "default": "'middle'"
+ }
+ }
+ }
+ }
+ }
+ }
+ },
+ "upperLabel": {
+ "type": [
+ "Object"
+ ],
+ "descriptionCN": "<p><code>upperLabel</code> is used to specify whether show label when the node has children. When <a href=\"#series-treemap.upperLabel.normal.show\">upperLabel.normal.show</a> is set as <code>true</code>, the feature that "show parent label" is enabled.</p>\n<p>The same as <a href=\"#series-treemap.label\">series-treemap.label</a>, the option <code>upperLabel</code> can be placed at the root of <a href=\"#series-treemap\">series-treemap</a> directly, or in <a href=\"#series-treemap.level\">series-treemap.level</a>, or in each item of <a href=\"#series-treemap.data\">series-treemap.data</a>.</p>\n<p>Specifically, <a href=\"#series-treemap.label\">series-treemap.label</a> specifies the style when a node is a leaf, while <code>upperLabel</code> specifies the style when a node has children, in which case the label is displayed in the inner top of the node.</p>\n<p>See:</p>\n<iframe data-src=\"https://ecomfe.github.io/echarts-examples/public/view.html?c=treemap-show-parent&edit=1&reset=1\" width=\"700\" height=\"500\" ></iframe>\n\n\n\n\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code>label</code> attribute could appear in more than one places:</p>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n<ul>\n<li><p>It could appear in each array element of <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</p>\n</li>\n<li><p>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</p>\n</li>\n</ul>\n</blockquote>\n<p><br></p>\n",
+ "properties": {
+ "normal": {
+ "type": [
+ "Object"
+ ],
+ "descriptionCN": "",
+ "properties": {
+ "show": {
+ "type": [
+ "boolean"
+ ],
+ "descriptionCN": "<p>Whether to show label.</p>\n",
+ "default": false
+ },
+ "position": {
+ "type": [
+ "string",
+ "Array"
+ ],
+ "descriptionCN": "<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideLeftTop'</li>\n<li>'insideLeftBottom'</li>\n<li>'insideRightTop'</li>\n<li>'insideRightBottom'</li>\n</ul>\n",
+ "default": "'inside'"
+ },
+ "offset": {
+ "type": [
+ "Array"
+ ],
+ "descriptionCN": "<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"
+ },
+ "formatter": {
+ "type": [
+ "string",
+ "Function"
+ ],
+ "descriptionCN": "<p>Data label formatter, which supoports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, representing series name, date name, data value respectively.</p>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {c}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data\n value: number|Array,\n // Color of data\n color: string,\n\n}\n</code></pre>\n"
+ },
+ "textStyle": {
+ "type": [
+ "Object"
+ ],
+ "descriptionCN": "",
+ "properties": {
+ "ellipsis": {
+ "type": [
+ "boolean"
+ ],
+ "descriptionCN": "<p>When the text is overflow the rectangle boundary, whether to replace the excess part with apostrophe.</p>\n",
+ "default": true
+ },
+ "color": {
+ "type": [
+ "Color"
+ ],
+ "descriptionCN": "<p> text color.</p>\n",
+ "default": "'#fff'"
+ },
+ "fontStyle": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p> font style</p>\n<p>Options are: </p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n",
+ "default": "'normal'"
+ },
+ "fontWeight": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p> font thick weight</p>\n<p>Options are: </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"
+ },
+ "fontFamily": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p> font family</p>\n",
+ "default": "'sans-serief'"
+ },
+ "fontSize": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p> font size</p>\n",
+ "default": 12
+ },
+ "align": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>Horizontal alignment. Optional values are <code>'center'</code>, <code>'right</code> and <code>'left'</code>.</p>\n",
+ "default": "'center'"
+ },
+ "baseline": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>Vertical alignment, Optional values are <code>'middle'</code>, <code>'right</code> and <code>'left'</code>.</p>\n",
+ "default": "'middle'"
+ }
+ }
+ },
+ "height": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p>Height of label area.</p>\n",
+ "default": 20
+ }
+ }
+ },
+ "emphasis": {
+ "type": [
+ "Object"
+ ],
+ "descriptionCN": "",
+ "properties": {
+ "show": {
+ "type": [
+ "boolean"
+ ],
+ "descriptionCN": "<p>Whether to show label.</p>\n",
+ "default": false
+ },
+ "position": {
+ "type": [
+ "string",
+ "Array"
+ ],
+ "descriptionCN": "<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideLeftTop'</li>\n<li>'insideLeftBottom'</li>\n<li>'insideRightTop'</li>\n<li>'insideRightBottom'</li>\n</ul>\n",
+ "default": "'inside'"
+ },
+ "offset": {
+ "type": [
+ "Array"
+ ],
+ "descriptionCN": "<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"
+ },
+ "formatter": {
+ "type": [
+ "string",
+ "Function"
+ ],
+ "descriptionCN": "<p>Data label formatter, which supoports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, representing series name, date name, data value respectively.</p>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {c}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data\n value: number|Array,\n // Color of data\n color: string,\n\n}\n</code></pre>\n"
+ },
"textStyle": {
"type": [
"Object"
@@ -40162,8 +40427,8 @@
"type": [
"boolean"
],
- "descriptionCN": "<p>Wether to show the text label.</p>\n",
- "default": true
+ "descriptionCN": "<p>Whether to show label.</p>\n",
+ "default": false
},
"position": {
"type": [
@@ -40173,6 +40438,19 @@
"descriptionCN": "<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideLeftTop'</li>\n<li>'insideLeftBottom'</li>\n<li>'insideRightTop'</li>\n<li>'insideRightBottom'</li>\n</ul>\n",
"default": "'inside'"
},
+ "offset": {
+ "type": [
+ "Array"
+ ],
+ "descriptionCN": "<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"
+ },
+ "formatter": {
+ "type": [
+ "string",
+ "Function"
+ ],
+ "descriptionCN": "<p>Data label formatter, which supoports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, representing series name, date name, data value respectively.</p>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {c}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data\n value: number|Array,\n // Color of data\n color: string,\n\n}\n</code></pre>\n"
+ },
"textStyle": {
"type": [
"Object"
@@ -40249,8 +40527,8 @@
"type": [
"boolean"
],
- "descriptionCN": "<p>Wether to show the text label.</p>\n",
- "default": true
+ "descriptionCN": "<p>Whether to show label.</p>\n",
+ "default": false
},
"position": {
"type": [
@@ -40260,6 +40538,234 @@
"descriptionCN": "<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideLeftTop'</li>\n<li>'insideLeftBottom'</li>\n<li>'insideRightTop'</li>\n<li>'insideRightBottom'</li>\n</ul>\n",
"default": "'inside'"
},
+ "offset": {
+ "type": [
+ "Array"
+ ],
+ "descriptionCN": "<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"
+ },
+ "formatter": {
+ "type": [
+ "string",
+ "Function"
+ ],
+ "descriptionCN": "<p>Data label formatter, which supoports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, representing series name, date name, data value respectively.</p>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {c}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data\n value: number|Array,\n // Color of data\n color: string,\n\n}\n</code></pre>\n"
+ },
+ "textStyle": {
+ "type": [
+ "Object"
+ ],
+ "descriptionCN": "",
+ "properties": {
+ "ellipsis": {
+ "type": [
+ "boolean"
+ ],
+ "descriptionCN": "<p>When the text is overflow the rectangle boundary, whether to replace the excess part with apostrophe.</p>\n",
+ "default": true
+ },
+ "color": {
+ "type": [
+ "Color"
+ ],
+ "descriptionCN": "<p> text color.</p>\n",
+ "default": "'#fff'"
+ },
+ "fontStyle": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p> font style</p>\n<p>Options are: </p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n",
+ "default": "'normal'"
+ },
+ "fontWeight": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p> font thick weight</p>\n<p>Options are: </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"
+ },
+ "fontFamily": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p> font family</p>\n",
+ "default": "'sans-serief'"
+ },
+ "fontSize": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p> font size</p>\n",
+ "default": 12
+ },
+ "align": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>Horizontal alignment. Optional values are <code>'center'</code>, <code>'right</code> and <code>'left'</code>.</p>\n",
+ "default": "'center'"
+ },
+ "baseline": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>Vertical alignment, Optional values are <code>'middle'</code>, <code>'right</code> and <code>'left'</code>.</p>\n",
+ "default": "'middle'"
+ }
+ }
+ }
+ }
+ }
+ }
+ },
+ "upperLabel": {
+ "type": [
+ "Object"
+ ],
+ "descriptionCN": "<p><code>upperLabel</code> is used to specify whether show label when the node has children. When <a href=\"#series-treemap.upperLabel.normal.show\">upperLabel.normal.show</a> is set as <code>true</code>, the feature that "show parent label" is enabled.</p>\n<p>The same as <a href=\"#series-treemap.label\">series-treemap.label</a>, the option <code>upperLabel</code> can be placed at the root of <a href=\"#series-treemap\">series-treemap</a> directly, or in <a href=\"#series-treemap.level\">series-treemap.level</a>, or in each item of <a href=\"#series-treemap.data\">series-treemap.data</a>.</p>\n<p>Specifically, <a href=\"#series-treemap.label\">series-treemap.label</a> specifies the style when a node is a leaf, while <code>upperLabel</code> specifies the style when a node has children, in which case the label is displayed in the inner top of the node.</p>\n<p>See:</p>\n<iframe data-src=\"https://ecomfe.github.io/echarts-examples/public/view.html?c=treemap-show-parent&edit=1&reset=1\" width=\"700\" height=\"500\" ></iframe>\n\n\n\n\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code>label</code> attribute could appear in more than one places:</p>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n<ul>\n<li><p>It could appear in each array element of <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</p>\n</li>\n<li><p>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</p>\n</li>\n</ul>\n</blockquote>\n<p><br></p>\n",
+ "properties": {
+ "normal": {
+ "type": [
+ "Object"
+ ],
+ "descriptionCN": "",
+ "properties": {
+ "show": {
+ "type": [
+ "boolean"
+ ],
+ "descriptionCN": "<p>Whether to show label.</p>\n",
+ "default": false
+ },
+ "position": {
+ "type": [
+ "string",
+ "Array"
+ ],
+ "descriptionCN": "<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideLeftTop'</li>\n<li>'insideLeftBottom'</li>\n<li>'insideRightTop'</li>\n<li>'insideRightBottom'</li>\n</ul>\n",
+ "default": "'inside'"
+ },
+ "offset": {
+ "type": [
+ "Array"
+ ],
+ "descriptionCN": "<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"
+ },
+ "formatter": {
+ "type": [
+ "string",
+ "Function"
+ ],
+ "descriptionCN": "<p>Data label formatter, which supoports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, representing series name, date name, data value respectively.</p>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {c}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data\n value: number|Array,\n // Color of data\n color: string,\n\n}\n</code></pre>\n"
+ },
+ "textStyle": {
+ "type": [
+ "Object"
+ ],
+ "descriptionCN": "",
+ "properties": {
+ "ellipsis": {
+ "type": [
+ "boolean"
+ ],
+ "descriptionCN": "<p>When the text is overflow the rectangle boundary, whether to replace the excess part with apostrophe.</p>\n",
+ "default": true
+ },
+ "color": {
+ "type": [
+ "Color"
+ ],
+ "descriptionCN": "<p> text color.</p>\n",
+ "default": "'#fff'"
+ },
+ "fontStyle": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p> font style</p>\n<p>Options are: </p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n",
+ "default": "'normal'"
+ },
+ "fontWeight": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p> font thick weight</p>\n<p>Options are: </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"
+ },
+ "fontFamily": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p> font family</p>\n",
+ "default": "'sans-serief'"
+ },
+ "fontSize": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p> font size</p>\n",
+ "default": 12
+ },
+ "align": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>Horizontal alignment. Optional values are <code>'center'</code>, <code>'right</code> and <code>'left'</code>.</p>\n",
+ "default": "'center'"
+ },
+ "baseline": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>Vertical alignment, Optional values are <code>'middle'</code>, <code>'right</code> and <code>'left'</code>.</p>\n",
+ "default": "'middle'"
+ }
+ }
+ },
+ "height": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p>Height of label area.</p>\n",
+ "default": 20
+ }
+ }
+ },
+ "emphasis": {
+ "type": [
+ "Object"
+ ],
+ "descriptionCN": "",
+ "properties": {
+ "show": {
+ "type": [
+ "boolean"
+ ],
+ "descriptionCN": "<p>Whether to show label.</p>\n",
+ "default": false
+ },
+ "position": {
+ "type": [
+ "string",
+ "Array"
+ ],
+ "descriptionCN": "<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideLeftTop'</li>\n<li>'insideLeftBottom'</li>\n<li>'insideRightTop'</li>\n<li>'insideRightBottom'</li>\n</ul>\n",
+ "default": "'inside'"
+ },
+ "offset": {
+ "type": [
+ "Array"
+ ],
+ "descriptionCN": "<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"
+ },
+ "formatter": {
+ "type": [
+ "string",
+ "Function"
+ ],
+ "descriptionCN": "<p>Data label formatter, which supoports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, representing series name, date name, data value respectively.</p>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {c}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data\n value: number|Array,\n // Color of data\n color: string,\n\n}\n</code></pre>\n"
+ },
"textStyle": {
"type": [
"Object"
@@ -40815,8 +41321,8 @@
"type": [
"boolean"
],
- "descriptionCN": "<p>Wether to show the text label.</p>\n",
- "default": true
+ "descriptionCN": "<p>Whether to show label.</p>\n",
+ "default": false
},
"position": {
"type": [
@@ -40826,6 +41332,19 @@
"descriptionCN": "<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideLeftTop'</li>\n<li>'insideLeftBottom'</li>\n<li>'insideRightTop'</li>\n<li>'insideRightBottom'</li>\n</ul>\n",
"default": "'inside'"
},
+ "offset": {
+ "type": [
+ "Array"
+ ],
+ "descriptionCN": "<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"
+ },
+ "formatter": {
+ "type": [
+ "string",
+ "Function"
+ ],
+ "descriptionCN": "<p>Data label formatter, which supoports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, representing series name, date name, data value respectively.</p>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {c}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data\n value: number|Array,\n // Color of data\n color: string,\n\n}\n</code></pre>\n"
+ },
"textStyle": {
"type": [
"Object"
@@ -40902,8 +41421,8 @@
"type": [
"boolean"
],
- "descriptionCN": "<p>Wether to show the text label.</p>\n",
- "default": true
+ "descriptionCN": "<p>Whether to show label.</p>\n",
+ "default": false
},
"position": {
"type": [
@@ -40913,6 +41432,234 @@
"descriptionCN": "<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideLeftTop'</li>\n<li>'insideLeftBottom'</li>\n<li>'insideRightTop'</li>\n<li>'insideRightBottom'</li>\n</ul>\n",
"default": "'inside'"
},
+ "offset": {
+ "type": [
+ "Array"
+ ],
+ "descriptionCN": "<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"
+ },
+ "formatter": {
+ "type": [
+ "string",
+ "Function"
+ ],
+ "descriptionCN": "<p>Data label formatter, which supoports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, representing series name, date name, data value respectively.</p>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {c}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data\n value: number|Array,\n // Color of data\n color: string,\n\n}\n</code></pre>\n"
+ },
+ "textStyle": {
+ "type": [
+ "Object"
+ ],
+ "descriptionCN": "",
+ "properties": {
+ "ellipsis": {
+ "type": [
+ "boolean"
+ ],
+ "descriptionCN": "<p>When the text is overflow the rectangle boundary, whether to replace the excess part with apostrophe.</p>\n",
+ "default": true
+ },
+ "color": {
+ "type": [
+ "Color"
+ ],
+ "descriptionCN": "<p> text color.</p>\n",
+ "default": "'#fff'"
+ },
+ "fontStyle": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p> font style</p>\n<p>Options are: </p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n",
+ "default": "'normal'"
+ },
+ "fontWeight": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p> font thick weight</p>\n<p>Options are: </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"
+ },
+ "fontFamily": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p> font family</p>\n",
+ "default": "'sans-serief'"
+ },
+ "fontSize": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p> font size</p>\n",
+ "default": 12
+ },
+ "align": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>Horizontal alignment. Optional values are <code>'center'</code>, <code>'right</code> and <code>'left'</code>.</p>\n",
+ "default": "'center'"
+ },
+ "baseline": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>Vertical alignment, Optional values are <code>'middle'</code>, <code>'right</code> and <code>'left'</code>.</p>\n",
+ "default": "'middle'"
+ }
+ }
+ }
+ }
+ }
+ }
+ },
+ "upperLabel": {
+ "type": [
+ "Object"
+ ],
+ "descriptionCN": "<p><code>upperLabel</code> is used to specify whether show label when the node has children. When <a href=\"#series-treemap.upperLabel.normal.show\">upperLabel.normal.show</a> is set as <code>true</code>, the feature that "show parent label" is enabled.</p>\n<p>The same as <a href=\"#series-treemap.label\">series-treemap.label</a>, the option <code>upperLabel</code> can be placed at the root of <a href=\"#series-treemap\">series-treemap</a> directly, or in <a href=\"#series-treemap.level\">series-treemap.level</a>, or in each item of <a href=\"#series-treemap.data\">series-treemap.data</a>.</p>\n<p>Specifically, <a href=\"#series-treemap.label\">series-treemap.label</a> specifies the style when a node is a leaf, while <code>upperLabel</code> specifies the style when a node has children, in which case the label is displayed in the inner top of the node.</p>\n<p>See:</p>\n<iframe data-src=\"https://ecomfe.github.io/echarts-examples/public/view.html?c=treemap-show-parent&edit=1&reset=1\" width=\"700\" height=\"500\" ></iframe>\n\n\n\n\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code>label</code> attribute could appear in more than one places:</p>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n<ul>\n<li><p>It could appear in each array element of <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</p>\n</li>\n<li><p>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</p>\n</li>\n</ul>\n</blockquote>\n<p><br></p>\n",
+ "properties": {
+ "normal": {
+ "type": [
+ "Object"
+ ],
+ "descriptionCN": "",
+ "properties": {
+ "show": {
+ "type": [
+ "boolean"
+ ],
+ "descriptionCN": "<p>Whether to show label.</p>\n",
+ "default": false
+ },
+ "position": {
+ "type": [
+ "string",
+ "Array"
+ ],
+ "descriptionCN": "<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideLeftTop'</li>\n<li>'insideLeftBottom'</li>\n<li>'insideRightTop'</li>\n<li>'insideRightBottom'</li>\n</ul>\n",
+ "default": "'inside'"
+ },
+ "offset": {
+ "type": [
+ "Array"
+ ],
+ "descriptionCN": "<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"
+ },
+ "formatter": {
+ "type": [
+ "string",
+ "Function"
+ ],
+ "descriptionCN": "<p>Data label formatter, which supoports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, representing series name, date name, data value respectively.</p>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {c}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data\n value: number|Array,\n // Color of data\n color: string,\n\n}\n</code></pre>\n"
+ },
+ "textStyle": {
+ "type": [
+ "Object"
+ ],
+ "descriptionCN": "",
+ "properties": {
+ "ellipsis": {
+ "type": [
+ "boolean"
+ ],
+ "descriptionCN": "<p>When the text is overflow the rectangle boundary, whether to replace the excess part with apostrophe.</p>\n",
+ "default": true
+ },
+ "color": {
+ "type": [
+ "Color"
+ ],
+ "descriptionCN": "<p> text color.</p>\n",
+ "default": "'#fff'"
+ },
+ "fontStyle": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p> font style</p>\n<p>Options are: </p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n",
+ "default": "'normal'"
+ },
+ "fontWeight": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p> font thick weight</p>\n<p>Options are: </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"
+ },
+ "fontFamily": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p> font family</p>\n",
+ "default": "'sans-serief'"
+ },
+ "fontSize": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p> font size</p>\n",
+ "default": 12
+ },
+ "align": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>Horizontal alignment. Optional values are <code>'center'</code>, <code>'right</code> and <code>'left'</code>.</p>\n",
+ "default": "'center'"
+ },
+ "baseline": {
+ "type": [
+ "string"
+ ],
+ "descriptionCN": "<p>Vertical alignment, Optional values are <code>'middle'</code>, <code>'right</code> and <code>'left'</code>.</p>\n",
+ "default": "'middle'"
+ }
+ }
+ },
+ "height": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p>Height of label area.</p>\n",
+ "default": 20
+ }
+ }
+ },
+ "emphasis": {
+ "type": [
+ "Object"
+ ],
+ "descriptionCN": "",
+ "properties": {
+ "show": {
+ "type": [
+ "boolean"
+ ],
+ "descriptionCN": "<p>Whether to show label.</p>\n",
+ "default": false
+ },
+ "position": {
+ "type": [
+ "string",
+ "Array"
+ ],
+ "descriptionCN": "<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideLeftTop'</li>\n<li>'insideLeftBottom'</li>\n<li>'insideRightTop'</li>\n<li>'insideRightBottom'</li>\n</ul>\n",
+ "default": "'inside'"
+ },
+ "offset": {
+ "type": [
+ "Array"
+ ],
+ "descriptionCN": "<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"
+ },
+ "formatter": {
+ "type": [
+ "string",
+ "Function"
+ ],
+ "descriptionCN": "<p>Data label formatter, which supoports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, representing series name, date name, data value respectively.</p>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {c}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data\n value: number|Array,\n // Color of data\n color: string,\n\n}\n</code></pre>\n"
+ },
"textStyle": {
"type": [
"Object"
@@ -56868,7 +57615,7 @@
"type": [
"Array"
],
- "descriptionCN": "<p>Data array of series, which can be a single data value, like:</p>\n<pre><code class=\"lang-js\">[12, 34, 56, 10, 23]\n</code></pre>\n<p>Or, if need extra dimensions for components like <a href=\"#visualMap\">visualMap</a> to map to graphic attributes like color, it can also be in the form of array. For example:</p>\n<pre><code class=\"lang-js\">[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]\n</code></pre>\n<p>In this case, we can assgin the second value in each arrary item to <a href=\"#visualMap\">visualMap</a> component.</p>\n<p>More likely, we need to assign name to each data item, in which case each item should be an object:</p>\n<pre><code class=\"lang-js\">[{\n // name of date item\n name: 'data1',\n // value of date item is 8\n value: 10\n}, {\n name: 'data2',\n value: 20\n}]\n</code></pre>\n<p>Each data item can be further custerized:</p>\n<pre><code class=\"lang-js\">[{\n name: 'data1',\n value: 10\n}, {\n // name of data item\n name: 'data2',\n value : 56,\n // user-defined label format that only useful for this data item\n label: {},\n // user-defined special itemStyle that only useful for this data item\n itemStyle:{}\n}]\n</code></pre>\n",
+ "descriptionCN": "<p>Nodes list of graph.</p>\n<pre><code class=\"lang-js\">data: [{\n name: '1',\n x: 10,\n y: 10,\n value: 10\n}, {\n name: '2',\n x: 100,\n y: 100,\n value: 20,\n symbolSize: 20,\n itemStyle: {\n normal: {\n color: 'red'\n }\n }\n}]\n</code></pre>\n",
"items": {
"type": "Object",
"properties": {
@@ -56878,6 +57625,24 @@
],
"descriptionCN": "<p>Name of data item.</p>\n"
},
+ "x": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p><code>x</code> value of node position.</p>\n"
+ },
+ "y": {
+ "type": [
+ "number"
+ ],
+ "descriptionCN": "<p><code>y</code> value of node position.</p>\n"
+ },
+ "fixed": {
+ "type": [
+ "boolean"
+ ],
+ "descriptionCN": "<p>If node are fixed when doing force directed layout.</p>\n"
+ },
"value": {
"type": [
"number",
@@ -69420,7 +70185,7 @@
"type": [
"number"
],
- "descriptionCN": "<p>Defines a bounding area availble for the graphic elements. This setting gives a data, which will then be translated to a coordinate on the coordinate system. The coordinate specifies the bounding. Namely, if <code>symbolBoundingData</code> is set, the final size (or layout) of the graphic elements depend on the <code>symbolBoundingData</code>.</p>\n<p>When reference bar is horizontal, <code>symbolBoundingData</code> is coresponding to x axis, while reference bar is vertical, <code>symbolBoundingData</code> is coresponding to y axis.</p>\n<p>Rule:</p>\n<ul>\n<li><p>If <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is not used:</p>\n<p> <code>symbolBoundingData</code> is the same as the size of reference bar by default. The size of the graphic element is detemined by <code>symbolBoundingData</code>. For example, if reference bar is vertical, its data is <code>24</code>, <code>symbolSize</code> is set as <code>[30, '50%']</code>, <code>symbolBoundingData</code> is set as <code>124</code>, the final size of the graphic element will be <code>124 * 50% = 62</code>. If <code>symbolBoundingData</code> is not set, the final size will be <code>24 * 50% = 12</code>.</p>\n</li>\n<li><p>If <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used:</p>\n<p> <code>symbolBoundingData</code> is the extreme value of the coordinate system. <code>symbolBoundingData</code> defines a bounding area, where repeated graphic elements layout according to <a href=\"#series-pictorialBar.symbolMargin\">symbolMargin</a> and <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> and <a href=\"#series-pictorialBar.symbolSize\">symbolSize</a>. Both these settings determine the gap size of the repeated graphic elements.</p>\n</li>\n</ul>\n<p><code>symbolBoundingData</code> is usually used in these cases:</p>\n<ul>\n<li><p>When <a href=\"#series-pictorialBar.symbolClip\">symbolCilp</a> is used:</p>\n<p> And a series is used to display "amont value", while another series is used to display "current value". <code>symbolBoundingData</code> can be used to ensure that the graphic elements of these two series are at the same size.</p>\n</li>\n</ul>\n<p>For example:</p>\n<iframe data-src=\"https://ecomfe.github.io/echarts-examples/public/view.html?c=doc-example/pictorialBar-clip&reset=1&edit=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n<ul>\n<li><p>When <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used:</p>\n<p> <code>symbolBoundingData</code> can be use to ensure the gaps of the elements in different bars are the same. Of cource, you can do not set <code>symbolBoundingData</code>, whose default value is a stable value (extreme value of the coordinate system).</p>\n</li>\n</ul>\n<p>For example:</p>\n<iframe data-src=\"https://ecomfe.github.io/echarts-examples/public/view.html?c=doc-example/pictorialBar-repeatLayout&reset=1&edit=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolBoundingData\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolBoundingData\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n symbolBoundingData: ... // Affect all data items.\n data: [23, 56]\n}]\n// Or\nseries: [{\n data: [{\n value: 23\n symbolBoundingData: ... // Only affect this data item.\n }, {\n value: 56\n symbolBoundingData: ... // Only affect this data item.\n }]\n}]\n</code></pre>\n"
+ "descriptionCN": "<p>Defines a bounding area availble for the graphic elements. This setting gives a data, which will then be translated to a coordinate on the coordinate system. The coordinate specifies the bounding. Namely, if <code>symbolBoundingData</code> is set, the final size (or layout) of the graphic elements depend on the <code>symbolBoundingData</code>.</p>\n<p>When reference bar is horizontal, <code>symbolBoundingData</code> is coresponding to x axis, while reference bar is vertical, <code>symbolBoundingData</code> is coresponding to y axis.</p>\n<p>Rule:</p>\n<ul>\n<li><p>If <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is not used:</p>\n<p> <code>symbolBoundingData</code> is the same as the size of reference bar by default. The size of the graphic element is detemined by <code>symbolBoundingData</code>. For example, if reference bar is vertical, its data is <code>24</code>, <code>symbolSize</code> is set as <code>[30, '50%']</code>, <code>symbolBoundingData</code> is set as <code>124</code>, the final size of the graphic element will be <code>124 * 50% = 62</code>. If <code>symbolBoundingData</code> is not set, the final size will be <code>24 * 50% = 12</code>.</p>\n</li>\n<li><p>If <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used:</p>\n<p> <code>symbolBoundingData</code> is the extreme value of the coordinate system. <code>symbolBoundingData</code> defines a bounding area, where repeated graphic elements layout according to <a href=\"#series-pictorialBar.symbolMargin\">symbolMargin</a> and <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> and <a href=\"#series-pictorialBar.symbolSize\">symbolSize</a>. Both these settings determine the gap size of the repeated graphic elements.</p>\n</li>\n</ul>\n<p><code>symbolBoundingData</code> is usually used in these cases:</p>\n<ul>\n<li><p>When <a href=\"#series-pictorialBar.symbolClip\">symbolCilp</a> is used:</p>\n<p> And a series is used to display "amont value", while another series is used to display "current value". <code>symbolBoundingData</code> can be used to ensure that the graphic elements of these two series are at the same size.</p>\n</li>\n</ul>\n<p>For example:</p>\n<iframe data-src=\"https://ecomfe.github.io/echarts-examples/public/view.html?c=doc-example/pictorialBar-clip&reset=1&edit=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n<ul>\n<li><p>When <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used:</p>\n<p> <code>symbolBoundingData</code> can be use to ensure the gaps of the elements in different bars are the same. Of cource, you can do not set <code>symbolBoundingData</code>, whose default value is a stable value (extreme value of the coordinate system).</p>\n</li>\n</ul>\n<p>For example:</p>\n<iframe data-src=\"https://ecomfe.github.io/echarts-examples/public/view.html?c=doc-example/pictorialBar-repeatLayout&reset=1&edit=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n<p><br>\n<code>symbolBoundingData</code> can also be an array, such as <code>[-40, 60]</code>, which specifies both negative and positive symbolBoundingData.</p>\n<p>Check this example:</p>\n<iframe data-src=\"https://ecomfe.github.io/echarts-examples/public/view.html?c=doc-example/pictorialBar-symbolBoundingDataArray&reset=1&edit=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolBoundingData\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolBoundingData\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n symbolBoundingData: ... // Affect all data items.\n data: [23, 56]\n}]\n// Or\nseries: [{\n data: [{\n value: 23\n symbolBoundingData: ... // Only affect this data item.\n }, {\n value: 56\n symbolBoundingData: ... // Only affect this data item.\n }]\n}]\n</code></pre>\n"
},
"symbolPatternSize": {
"type": [
@@ -69598,7 +70363,7 @@
"type": [
"number"
],
- "descriptionCN": "<p>Defines a bounding area availble for the graphic elements. This setting gives a data, which will then be translated to a coordinate on the coordinate system. The coordinate specifies the bounding. Namely, if <code>symbolBoundingData</code> is set, the final size (or layout) of the graphic elements depend on the <code>symbolBoundingData</code>.</p>\n<p>When reference bar is horizontal, <code>symbolBoundingData</code> is coresponding to x axis, while reference bar is vertical, <code>symbolBoundingData</code> is coresponding to y axis.</p>\n<p>Rule:</p>\n<ul>\n<li><p>If <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is not used:</p>\n<p> <code>symbolBoundingData</code> is the same as the size of reference bar by default. The size of the graphic element is detemined by <code>symbolBoundingData</code>. For example, if reference bar is vertical, its data is <code>24</code>, <code>symbolSize</code> is set as <code>[30, '50%']</code>, <code>symbolBoundingData</code> is set as <code>124</code>, the final size of the graphic element will be <code>124 * 50% = 62</code>. If <code>symbolBoundingData</code> is not set, the final size will be <code>24 * 50% = 12</code>.</p>\n</li>\n<li><p>If <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used:</p>\n<p> <code>symbolBoundingData</code> is the extreme value of the coordinate system. <code>symbolBoundingData</code> defines a bounding area, where repeated graphic elements layout according to <a href=\"#series-pictorialBar.symbolMargin\">symbolMargin</a> and <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> and <a href=\"#series-pictorialBar.symbolSize\">symbolSize</a>. Both these settings determine the gap size of the repeated graphic elements.</p>\n</li>\n</ul>\n<p><code>symbolBoundingData</code> is usually used in these cases:</p>\n<ul>\n<li><p>When <a href=\"#series-pictorialBar.symbolClip\">symbolCilp</a> is used:</p>\n<p> And a series is used to display "amont value", while another series is used to display "current value". <code>symbolBoundingData</code> can be used to ensure that the graphic elements of these two series are at the same size.</p>\n</li>\n</ul>\n<p>For example:</p>\n<iframe data-src=\"https://ecomfe.github.io/echarts-examples/public/view.html?c=doc-example/pictorialBar-clip&reset=1&edit=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n<ul>\n<li><p>When <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used:</p>\n<p> <code>symbolBoundingData</code> can be use to ensure the gaps of the elements in different bars are the same. Of cource, you can do not set <code>symbolBoundingData</code>, whose default value is a stable value (extreme value of the coordinate system).</p>\n</li>\n</ul>\n<p>For example:</p>\n<iframe data-src=\"https://ecomfe.github.io/echarts-examples/public/view.html?c=doc-example/pictorialBar-repeatLayout&reset=1&edit=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolBoundingData\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolBoundingData\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n symbolBoundingData: ... // Affect all data items.\n data: [23, 56]\n}]\n// Or\nseries: [{\n data: [{\n value: 23\n symbolBoundingData: ... // Only affect this data item.\n }, {\n value: 56\n symbolBoundingData: ... // Only affect this data item.\n }]\n}]\n</code></pre>\n"
+ "descriptionCN": "<p>Defines a bounding area availble for the graphic elements. This setting gives a data, which will then be translated to a coordinate on the coordinate system. The coordinate specifies the bounding. Namely, if <code>symbolBoundingData</code> is set, the final size (or layout) of the graphic elements depend on the <code>symbolBoundingData</code>.</p>\n<p>When reference bar is horizontal, <code>symbolBoundingData</code> is coresponding to x axis, while reference bar is vertical, <code>symbolBoundingData</code> is coresponding to y axis.</p>\n<p>Rule:</p>\n<ul>\n<li><p>If <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is not used:</p>\n<p> <code>symbolBoundingData</code> is the same as the size of reference bar by default. The size of the graphic element is detemined by <code>symbolBoundingData</code>. For example, if reference bar is vertical, its data is <code>24</code>, <code>symbolSize</code> is set as <code>[30, '50%']</code>, <code>symbolBoundingData</code> is set as <code>124</code>, the final size of the graphic element will be <code>124 * 50% = 62</code>. If <code>symbolBoundingData</code> is not set, the final size will be <code>24 * 50% = 12</code>.</p>\n</li>\n<li><p>If <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used:</p>\n<p> <code>symbolBoundingData</code> is the extreme value of the coordinate system. <code>symbolBoundingData</code> defines a bounding area, where repeated graphic elements layout according to <a href=\"#series-pictorialBar.symbolMargin\">symbolMargin</a> and <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> and <a href=\"#series-pictorialBar.symbolSize\">symbolSize</a>. Both these settings determine the gap size of the repeated graphic elements.</p>\n</li>\n</ul>\n<p><code>symbolBoundingData</code> is usually used in these cases:</p>\n<ul>\n<li><p>When <a href=\"#series-pictorialBar.symbolClip\">symbolCilp</a> is used:</p>\n<p> And a series is used to display "amont value", while another series is used to display "current value". <code>symbolBoundingData</code> can be used to ensure that the graphic elements of these two series are at the same size.</p>\n</li>\n</ul>\n<p>For example:</p>\n<iframe data-src=\"https://ecomfe.github.io/echarts-examples/public/view.html?c=doc-example/pictorialBar-clip&reset=1&edit=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n<ul>\n<li><p>When <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used:</p>\n<p> <code>symbolBoundingData</code> can be use to ensure the gaps of the elements in different bars are the same. Of cource, you can do not set <code>symbolBoundingData</code>, whose default value is a stable value (extreme value of the coordinate system).</p>\n</li>\n</ul>\n<p>For example:</p>\n<iframe data-src=\"https://ecomfe.github.io/echarts-examples/public/view.html?c=doc-example/pictorialBar-repeatLayout&reset=1&edit=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n<p><br>\n<code>symbolBoundingData</code> can also be an array, such as <code>[-40, 60]</code>, which specifies both negative and positive symbolBoundingData.</p>\n<p>Check this example:</p>\n<iframe data-src=\"https://ecomfe.github.io/echarts-examples/public/view.html?c=doc-example/pictorialBar-symbolBoundingDataArray&reset=1&edit=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolBoundingData\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolBoundingData\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n symbolBoundingData: ... // Affect all data items.\n data: [23, 56]\n}]\n// Or\nseries: [{\n data: [{\n value: 23\n symbolBoundingData: ... // Only affect this data item.\n }, {\n value: 56\n symbolBoundingData: ... // Only affect this data item.\n }]\n}]\n</code></pre>\n"
},
"symbolPatternSize": {
"type": [
