You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by gi...@apache.org on 2022/08/03 06:47:51 UTC
[echarts-website] branch asf-site updated: Deploying to asf-site from @ apache/echarts-website@495b120efd9b58d42b397f69c0de27b5b4def958 🚀
This is an automated email from the ASF dual-hosted git repository.
github-bot pushed a commit to branch asf-site
in repository https://gitbox.apache.org/repos/asf/echarts-website.git
The following commit(s) were added to refs/heads/asf-site by this push:
new 24453fdc Deploying to asf-site from @ apache/echarts-website@495b120efd9b58d42b397f69c0de27b5b4def958 🚀
24453fdc is described below
commit 24453fdcad179d5c1da3373d5340c0d7f46dd7f5
Author: plainheart <pl...@users.noreply.github.com>
AuthorDate: Wed Aug 3 06:47:32 2022 +0000
Deploying to asf-site from @ apache/echarts-website@495b120efd9b58d42b397f69c0de27b5b4def958 🚀
---
en/api.html | 6 +-
en/builder/echarts.html | 2 +-
en/css/doc-bundle.css | 9 +
en/documents/api-parts/api.action.js | 102 +-
en/documents/api-parts/api.action.json | 102 +-
en/documents/api-parts/api.echarts.js | 54 +-
en/documents/api-parts/api.echarts.json | 54 +-
en/documents/api-parts/api.echartsInstance.js | 69 +-
en/documents/api-parts/api.echartsInstance.json | 69 +-
en/documents/api-parts/api.events.js | 93 +-
en/documents/api-parts/api.events.json | 93 +-
en/documents/api-parts/api.js | 15 +-
en/documents/api-parts/api.json | 15 +-
en/documents/api.json | 2 +-
en/documents/option-gl-parts/option-gl.geo3D.js | 513 +-
en/documents/option-gl-parts/option-gl.geo3D.json | 513 +-
en/documents/option-gl-parts/option-gl.globe.js | 351 +-
en/documents/option-gl-parts/option-gl.globe.json | 351 +-
en/documents/option-gl-parts/option-gl.grid3D.js | 399 +-
en/documents/option-gl-parts/option-gl.grid3D.json | 399 +-
en/documents/option-gl-parts/option-gl.js | 57 +-
en/documents/option-gl-parts/option-gl.json | 57 +-
en/documents/option-gl-parts/option-gl.mapbox3D.js | 204 +-
.../option-gl-parts/option-gl.mapbox3D.json | 204 +-
.../option-gl-parts/option-gl.series-bar3D.js | 273 +-
.../option-gl-parts/option-gl.series-bar3D.json | 273 +-
.../option-gl-parts/option-gl.series-flowGL.js | 39 +-
.../option-gl-parts/option-gl.series-flowGL.json | 39 +-
.../option-gl-parts/option-gl.series-graphGL.js | 141 +-
.../option-gl-parts/option-gl.series-graphGL.json | 141 +-
.../option-gl-parts/option-gl.series-line3D.js | 69 +-
.../option-gl-parts/option-gl.series-line3D.json | 69 +-
.../option-gl-parts/option-gl.series-lines3D.js | 84 +-
.../option-gl-parts/option-gl.series-lines3D.json | 84 +-
.../option-gl-parts/option-gl.series-map3D.js | 516 +-
.../option-gl-parts/option-gl.series-map3D.json | 516 +-
.../option-gl-parts/option-gl.series-polygons3D.js | 36 +-
.../option-gl.series-polygons3D.json | 36 +-
.../option-gl-parts/option-gl.series-scatter3D.js | 144 +-
.../option-gl.series-scatter3D.json | 144 +-
.../option-gl-parts/option-gl.series-scatterGL.js | 66 +-
.../option-gl.series-scatterGL.json | 66 +-
.../option-gl-parts/option-gl.series-surface.js | 195 +-
.../option-gl-parts/option-gl.series-surface.json | 195 +-
en/documents/option-gl-parts/option-gl.xAxis3D.js | 234 +-
.../option-gl-parts/option-gl.xAxis3D.json | 234 +-
en/documents/option-gl-parts/option-gl.yAxis3D.js | 234 +-
.../option-gl-parts/option-gl.yAxis3D.json | 234 +-
en/documents/option-gl-parts/option-gl.zAxis3D.js | 234 +-
.../option-gl-parts/option-gl.zAxis3D.json | 234 +-
en/documents/option-gl.json | 2 +-
en/documents/option-parts/option.angleAxis.js | 2227 +-
en/documents/option-parts/option.angleAxis.json | 2227 +-
en/documents/option-parts/option.aria.js | 129 +-
en/documents/option-parts/option.aria.json | 129 +-
en/documents/option-parts/option.axisPointer.js | 490 +-
en/documents/option-parts/option.axisPointer.json | 490 +-
en/documents/option-parts/option.brush.js | 54 +-
en/documents/option-parts/option.brush.json | 54 +-
en/documents/option-parts/option.calendar.js | 1760 +-
en/documents/option-parts/option.calendar.json | 1760 +-
.../option-parts/option.dataZoom-inside.js | 137 +-
.../option-parts/option.dataZoom-inside.json | 137 +-
.../option-parts/option.dataZoom-slider.js | 1228 +-
.../option-parts/option.dataZoom-slider.json | 1228 +-
en/documents/option-parts/option.dataset.js | 51 +-
en/documents/option-parts/option.dataset.json | 51 +-
en/documents/option-parts/option.geo.js | 5381 +---
en/documents/option-parts/option.geo.json | 5381 +---
en/documents/option-parts/option.graphic.js | 2779 +-
en/documents/option-parts/option.graphic.json | 2779 +-
en/documents/option-parts/option.grid.js | 852 +-
en/documents/option-parts/option.grid.json | 852 +-
en/documents/option-parts/option.js | 602 +-
en/documents/option-parts/option.json | 602 +-
en/documents/option-parts/option.legend.js | 2378 +-
en/documents/option-parts/option.legend.json | 2378 +-
en/documents/option-parts/option.media.js | 12 +-
en/documents/option-parts/option.media.json | 12 +-
en/documents/option-parts/option.parallel.js | 2027 +-
en/documents/option-parts/option.parallel.json | 2027 +-
en/documents/option-parts/option.parallelAxis.js | 1988 +-
en/documents/option-parts/option.parallelAxis.json | 1988 +-
en/documents/option-parts/option.polar.js | 757 +-
en/documents/option-parts/option.polar.json | 757 +-
en/documents/option-parts/option.radar.js | 1451 +-
en/documents/option-parts/option.radar.json | 1451 +-
en/documents/option-parts/option.radiusAxis.js | 2709 +-
en/documents/option-parts/option.radiusAxis.json | 2709 +-
en/documents/option-parts/option.series-bar.js | 20285 +-------------
en/documents/option-parts/option.series-bar.json | 20285 +-------------
en/documents/option-parts/option.series-boxplot.js | 15561 +----------
.../option-parts/option.series-boxplot.json | 15561 +----------
.../option-parts/option.series-candlestick.js | 15290 +----------
.../option-parts/option.series-candlestick.json | 15290 +----------
en/documents/option-parts/option.series-custom.js | 4111 +--
.../option-parts/option.series-custom.json | 4111 +--
.../option-parts/option.series-effectScatter.js | 20558 +-------------
.../option-parts/option.series-effectScatter.json | 20558 +-------------
en/documents/option-parts/option.series-funnel.js | 20071 +-------------
.../option-parts/option.series-funnel.json | 20071 +-------------
en/documents/option-parts/option.series-gauge.js | 17799 +-----------
en/documents/option-parts/option.series-gauge.json | 17799 +-----------
en/documents/option-parts/option.series-graph.js | 26938 +------------------
en/documents/option-parts/option.series-graph.json | 26938 +------------------
en/documents/option-parts/option.series-heatmap.js | 17971 +------------
.../option-parts/option.series-heatmap.json | 17971 +------------
en/documents/option-parts/option.series-line.js | 22814 +---------------
en/documents/option-parts/option.series-line.json | 22814 +---------------
en/documents/option-parts/option.series-lines.js | 18762 +------------
en/documents/option-parts/option.series-lines.json | 18762 +------------
en/documents/option-parts/option.series-map.js | 18750 +------------
en/documents/option-parts/option.series-map.json | 18750 +------------
.../option-parts/option.series-parallel.js | 552 +-
.../option-parts/option.series-parallel.json | 552 +-
.../option-parts/option.series-pictorialBar.js | 20746 +-------------
.../option-parts/option.series-pictorialBar.json | 20746 +-------------
en/documents/option-parts/option.series-pie.js | 20339 +-------------
en/documents/option-parts/option.series-pie.json | 20339 +-------------
en/documents/option-parts/option.series-radar.js | 6686 +----
en/documents/option-parts/option.series-radar.json | 6686 +----
en/documents/option-parts/option.series-sankey.js | 8668 +-----
.../option-parts/option.series-sankey.json | 8668 +-----
en/documents/option-parts/option.series-scatter.js | 20549 +-------------
.../option-parts/option.series-scatter.json | 20549 +-------------
.../option-parts/option.series-sunburst.js | 9104 +------
.../option-parts/option.series-sunburst.json | 9104 +------
.../option-parts/option.series-themeRiver.js | 3180 +--
.../option-parts/option.series-themeRiver.json | 3180 +--
en/documents/option-parts/option.series-tree.js | 8594 +-----
en/documents/option-parts/option.series-tree.json | 8594 +-----
en/documents/option-parts/option.series-treemap.js | 15416 +----------
.../option-parts/option.series-treemap.json | 15416 +----------
en/documents/option-parts/option.singleAxis.js | 3481 +--
en/documents/option-parts/option.singleAxis.json | 3481 +--
en/documents/option-parts/option.stateAnimation.js | 9 +-
.../option-parts/option.stateAnimation.json | 9 +-
en/documents/option-parts/option.textStyle.js | 142 +-
en/documents/option-parts/option.textStyle.json | 142 +-
en/documents/option-parts/option.timeline.js | 2464 +-
en/documents/option-parts/option.timeline.json | 2464 +-
en/documents/option-parts/option.title.js | 891 +-
en/documents/option-parts/option.title.json | 891 +-
en/documents/option-parts/option.toolbox.js | 1918 +-
en/documents/option-parts/option.toolbox.json | 1918 +-
en/documents/option-parts/option.tooltip.js | 820 +-
en/documents/option-parts/option.tooltip.json | 820 +-
.../option-parts/option.visualMap-continuous.js | 549 +-
.../option-parts/option.visualMap-continuous.json | 549 +-
.../option-parts/option.visualMap-piecewise.js | 344 +-
.../option-parts/option.visualMap-piecewise.json | 344 +-
en/documents/option-parts/option.xAxis.js | 2744 +-
en/documents/option-parts/option.xAxis.json | 2744 +-
en/documents/option-parts/option.yAxis.js | 2744 +-
en/documents/option-parts/option.yAxis.json | 2744 +-
en/documents/option.json | 2 +-
en/documents/tutorial-parts/tutorial.js | 69 +-
en/documents/tutorial-parts/tutorial.json | 69 +-
en/documents/tutorial.json | 2 +-
en/index.html | 2 +-
en/js/doc-bundle.js | 4 +-
en/option-gl.html | 6 +-
en/option.html | 6 +-
en/spreadsheet.html | 4 +-
en/tutorial.html | 6 +-
examples/en/editor.html | 4 +-
examples/en/index.html | 4 +-
examples/en/view.html | 4 +-
examples/js/example-bundle.js | 2 +-
examples/zh/editor.html | 4 +-
examples/zh/index.html | 4 +-
examples/zh/view.html | 4 +-
handbook/200.html | 4 +-
handbook/_nuxt/{91a8bc9.js => f9e5184.js} | 2 +-
...6c9959861378a1a8.js => 1084d1f055daea01ec59.js} | 2 +-
handbook/en/basics/download/index.html | 4 +-
handbook/en/basics/help/index.html | 4 +-
handbook/en/basics/import/index.html | 4 +-
handbook/en/basics/release-note/5-2-0/index.html | 4 +-
handbook/en/basics/release-note/5-3-0/index.html | 4 +-
.../en/basics/release-note/v5-feature/index.html | 4 +-
.../release-note/v5-upgrade-guide/index.html | 4 +-
handbook/en/best-practices/aria/index.html | 4 +-
.../en/best-practices/canvas-vs-svg/index.html | 4 +-
handbook/en/concepts/axis/index.html | 4 +-
handbook/en/concepts/chart-size/index.html | 4 +-
handbook/en/concepts/data-transform/index.html | 4 +-
handbook/en/concepts/dataset/index.html | 4 +-
handbook/en/concepts/event/index.html | 4 +-
handbook/en/concepts/legend/index.html | 4 +-
handbook/en/concepts/style/index.html | 4 +-
handbook/en/concepts/visual-map/index.html | 4 +-
handbook/en/get-started/index.html | 4 +-
handbook/en/how-to/animation/transition/index.html | 4 +-
.../en/how-to/chart-types/bar/bar-race/index.html | 4 +-
.../en/how-to/chart-types/bar/basic-bar/index.html | 4 +-
.../how-to/chart-types/bar/stacked-bar/index.html | 4 +-
.../en/how-to/chart-types/bar/waterfall/index.html | 4 +-
.../how-to/chart-types/line/area-line/index.html | 4 +-
.../how-to/chart-types/line/basic-line/index.html | 4 +-
.../how-to/chart-types/line/smooth-line/index.html | 4 +-
.../chart-types/line/stacked-line/index.html | 4 +-
.../how-to/chart-types/line/step-line/index.html | 4 +-
.../en/how-to/chart-types/pie/basic-pie/index.html | 4 +-
.../en/how-to/chart-types/pie/doughnut/index.html | 4 +-
handbook/en/how-to/chart-types/pie/rose/index.html | 4 +-
.../chart-types/scatter/basic-scatter/index.html | 4 +-
.../en/how-to/cross-platform/server/index.html | 4 +-
handbook/en/how-to/data/dynamic-data/index.html | 4 +-
handbook/en/how-to/interaction/drag/index.html | 4 +-
handbook/en/how-to/label/rich-text/index.html | 4 +-
handbook/en/index.html | 4 +-
handbook/en/meta/edit-guide/index.html | 4 +-
handbook/index.html | 4 +-
handbook/zh/basics/download/index.html | 4 +-
handbook/zh/basics/help/index.html | 4 +-
handbook/zh/basics/import/index.html | 4 +-
handbook/zh/basics/release-note/5-2-0/index.html | 4 +-
handbook/zh/basics/release-note/5-3-0/index.html | 4 +-
.../zh/basics/release-note/v5-feature/index.html | 4 +-
.../release-note/v5-upgrade-guide/index.html | 4 +-
handbook/zh/best-practices/aria/index.html | 4 +-
.../zh/best-practices/canvas-vs-svg/index.html | 4 +-
handbook/zh/concepts/axis/index.html | 4 +-
handbook/zh/concepts/chart-size/index.html | 4 +-
handbook/zh/concepts/data-transform/index.html | 4 +-
handbook/zh/concepts/dataset/index.html | 4 +-
handbook/zh/concepts/event/index.html | 4 +-
handbook/zh/concepts/legend/index.html | 4 +-
handbook/zh/concepts/style/index.html | 4 +-
handbook/zh/concepts/visual-map/index.html | 4 +-
handbook/zh/get-started/index.html | 4 +-
handbook/zh/how-to/animation/transition/index.html | 4 +-
.../zh/how-to/chart-types/bar/bar-race/index.html | 4 +-
.../zh/how-to/chart-types/bar/basic-bar/index.html | 4 +-
.../how-to/chart-types/bar/stacked-bar/index.html | 4 +-
.../zh/how-to/chart-types/bar/waterfall/index.html | 4 +-
.../how-to/chart-types/line/area-line/index.html | 4 +-
.../how-to/chart-types/line/basic-line/index.html | 4 +-
.../how-to/chart-types/line/smooth-line/index.html | 4 +-
.../chart-types/line/stacked-line/index.html | 4 +-
.../how-to/chart-types/line/step-line/index.html | 4 +-
.../zh/how-to/chart-types/pie/basic-pie/index.html | 4 +-
.../zh/how-to/chart-types/pie/doughnut/index.html | 4 +-
handbook/zh/how-to/chart-types/pie/rose/index.html | 4 +-
.../chart-types/scatter/basic-scatter/index.html | 4 +-
.../zh/how-to/cross-platform/baidu-app/index.html | 4 +-
.../zh/how-to/cross-platform/server/index.html | 4 +-
.../zh/how-to/cross-platform/wechat-app/index.html | 4 +-
handbook/zh/how-to/data/dynamic-data/index.html | 4 +-
handbook/zh/how-to/interaction/drag/index.html | 4 +-
handbook/zh/how-to/label/rich-text/index.html | 4 +-
handbook/zh/index.html | 4 +-
handbook/zh/meta/edit-guide/index.html | 4 +-
layouts/doc.html | 6 +-
layouts/example-simple.html | 4 +-
layouts/example.html | 4 +-
zh/api.html | 6 +-
zh/builder/echarts.html | 2 +-
zh/css/doc-bundle.css | 9 +
zh/css/only_for_cdn_ready_check.css | 2 +-
zh/documents/api-parts/api.action.js | 102 +-
zh/documents/api-parts/api.action.json | 102 +-
zh/documents/api-parts/api.echarts.js | 54 +-
zh/documents/api-parts/api.echarts.json | 54 +-
zh/documents/api-parts/api.echartsInstance.js | 69 +-
zh/documents/api-parts/api.echartsInstance.json | 69 +-
zh/documents/api-parts/api.events.js | 93 +-
zh/documents/api-parts/api.events.json | 93 +-
zh/documents/api-parts/api.js | 15 +-
zh/documents/api-parts/api.json | 15 +-
zh/documents/api.json | 2 +-
zh/documents/option-gl-parts/option-gl.geo3D.js | 513 +-
zh/documents/option-gl-parts/option-gl.geo3D.json | 513 +-
zh/documents/option-gl-parts/option-gl.globe.js | 351 +-
zh/documents/option-gl-parts/option-gl.globe.json | 351 +-
zh/documents/option-gl-parts/option-gl.grid3D.js | 399 +-
zh/documents/option-gl-parts/option-gl.grid3D.json | 399 +-
zh/documents/option-gl-parts/option-gl.js | 57 +-
zh/documents/option-gl-parts/option-gl.json | 57 +-
zh/documents/option-gl-parts/option-gl.mapbox3D.js | 204 +-
.../option-gl-parts/option-gl.mapbox3D.json | 204 +-
.../option-gl-parts/option-gl.series-bar3D.js | 273 +-
.../option-gl-parts/option-gl.series-bar3D.json | 273 +-
.../option-gl-parts/option-gl.series-flowGL.js | 39 +-
.../option-gl-parts/option-gl.series-flowGL.json | 39 +-
.../option-gl-parts/option-gl.series-graphGL.js | 141 +-
.../option-gl-parts/option-gl.series-graphGL.json | 141 +-
.../option-gl-parts/option-gl.series-line3D.js | 69 +-
.../option-gl-parts/option-gl.series-line3D.json | 69 +-
.../option-gl-parts/option-gl.series-lines3D.js | 84 +-
.../option-gl-parts/option-gl.series-lines3D.json | 84 +-
.../option-gl-parts/option-gl.series-map3D.js | 516 +-
.../option-gl-parts/option-gl.series-map3D.json | 516 +-
.../option-gl-parts/option-gl.series-polygons3D.js | 36 +-
.../option-gl.series-polygons3D.json | 36 +-
.../option-gl-parts/option-gl.series-scatter3D.js | 144 +-
.../option-gl.series-scatter3D.json | 144 +-
.../option-gl-parts/option-gl.series-scatterGL.js | 66 +-
.../option-gl.series-scatterGL.json | 66 +-
.../option-gl-parts/option-gl.series-surface.js | 195 +-
.../option-gl-parts/option-gl.series-surface.json | 195 +-
zh/documents/option-gl-parts/option-gl.xAxis3D.js | 234 +-
.../option-gl-parts/option-gl.xAxis3D.json | 234 +-
zh/documents/option-gl-parts/option-gl.yAxis3D.js | 234 +-
.../option-gl-parts/option-gl.yAxis3D.json | 234 +-
zh/documents/option-gl-parts/option-gl.zAxis3D.js | 234 +-
.../option-gl-parts/option-gl.zAxis3D.json | 234 +-
zh/documents/option-gl.json | 2 +-
zh/documents/option-parts/option.angleAxis.js | 2227 +-
zh/documents/option-parts/option.angleAxis.json | 2227 +-
zh/documents/option-parts/option.aria.js | 129 +-
zh/documents/option-parts/option.aria.json | 129 +-
zh/documents/option-parts/option.axisPointer.js | 490 +-
zh/documents/option-parts/option.axisPointer.json | 490 +-
zh/documents/option-parts/option.brush.js | 54 +-
zh/documents/option-parts/option.brush.json | 54 +-
zh/documents/option-parts/option.calendar.js | 1760 +-
zh/documents/option-parts/option.calendar.json | 1760 +-
.../option-parts/option.dataZoom-inside.js | 137 +-
.../option-parts/option.dataZoom-inside.json | 137 +-
.../option-parts/option.dataZoom-slider.js | 1228 +-
.../option-parts/option.dataZoom-slider.json | 1228 +-
zh/documents/option-parts/option.dataset.js | 51 +-
zh/documents/option-parts/option.dataset.json | 51 +-
zh/documents/option-parts/option.geo.js | 5381 +---
zh/documents/option-parts/option.geo.json | 5381 +---
zh/documents/option-parts/option.graphic.js | 2779 +-
zh/documents/option-parts/option.graphic.json | 2779 +-
zh/documents/option-parts/option.grid.js | 852 +-
zh/documents/option-parts/option.grid.json | 852 +-
zh/documents/option-parts/option.js | 602 +-
zh/documents/option-parts/option.json | 602 +-
zh/documents/option-parts/option.legend.js | 2378 +-
zh/documents/option-parts/option.legend.json | 2378 +-
zh/documents/option-parts/option.media.js | 18 +-
zh/documents/option-parts/option.media.json | 18 +-
zh/documents/option-parts/option.parallel.js | 2027 +-
zh/documents/option-parts/option.parallel.json | 2027 +-
zh/documents/option-parts/option.parallelAxis.js | 1988 +-
zh/documents/option-parts/option.parallelAxis.json | 1988 +-
zh/documents/option-parts/option.polar.js | 757 +-
zh/documents/option-parts/option.polar.json | 757 +-
zh/documents/option-parts/option.radar.js | 1451 +-
zh/documents/option-parts/option.radar.json | 1451 +-
zh/documents/option-parts/option.radiusAxis.js | 2709 +-
zh/documents/option-parts/option.radiusAxis.json | 2709 +-
zh/documents/option-parts/option.series-bar.js | 20285 +-------------
zh/documents/option-parts/option.series-bar.json | 20285 +-------------
zh/documents/option-parts/option.series-boxplot.js | 15561 +----------
.../option-parts/option.series-boxplot.json | 15561 +----------
.../option-parts/option.series-candlestick.js | 15290 +----------
.../option-parts/option.series-candlestick.json | 15290 +----------
zh/documents/option-parts/option.series-custom.js | 4111 +--
.../option-parts/option.series-custom.json | 4111 +--
.../option-parts/option.series-effectScatter.js | 20558 +-------------
.../option-parts/option.series-effectScatter.json | 20558 +-------------
zh/documents/option-parts/option.series-funnel.js | 20071 +-------------
.../option-parts/option.series-funnel.json | 20071 +-------------
zh/documents/option-parts/option.series-gauge.js | 17799 +-----------
zh/documents/option-parts/option.series-gauge.json | 17799 +-----------
zh/documents/option-parts/option.series-graph.js | 26938 +------------------
zh/documents/option-parts/option.series-graph.json | 26938 +------------------
zh/documents/option-parts/option.series-heatmap.js | 17971 +------------
.../option-parts/option.series-heatmap.json | 17971 +------------
zh/documents/option-parts/option.series-line.js | 22814 +---------------
zh/documents/option-parts/option.series-line.json | 22814 +---------------
zh/documents/option-parts/option.series-lines.js | 18762 +------------
zh/documents/option-parts/option.series-lines.json | 18762 +------------
zh/documents/option-parts/option.series-map.js | 18750 +------------
zh/documents/option-parts/option.series-map.json | 18750 +------------
.../option-parts/option.series-parallel.js | 552 +-
.../option-parts/option.series-parallel.json | 552 +-
.../option-parts/option.series-pictorialBar.js | 20746 +-------------
.../option-parts/option.series-pictorialBar.json | 20746 +-------------
zh/documents/option-parts/option.series-pie.js | 20339 +-------------
zh/documents/option-parts/option.series-pie.json | 20339 +-------------
zh/documents/option-parts/option.series-radar.js | 6686 +----
zh/documents/option-parts/option.series-radar.json | 6686 +----
zh/documents/option-parts/option.series-sankey.js | 8668 +-----
.../option-parts/option.series-sankey.json | 8668 +-----
zh/documents/option-parts/option.series-scatter.js | 20549 +-------------
.../option-parts/option.series-scatter.json | 20549 +-------------
.../option-parts/option.series-sunburst.js | 9104 +------
.../option-parts/option.series-sunburst.json | 9104 +------
.../option-parts/option.series-themeRiver.js | 3180 +--
.../option-parts/option.series-themeRiver.json | 3180 +--
zh/documents/option-parts/option.series-tree.js | 8594 +-----
zh/documents/option-parts/option.series-tree.json | 8594 +-----
zh/documents/option-parts/option.series-treemap.js | 15416 +----------
.../option-parts/option.series-treemap.json | 15416 +----------
zh/documents/option-parts/option.singleAxis.js | 3481 +--
zh/documents/option-parts/option.singleAxis.json | 3481 +--
zh/documents/option-parts/option.stateAnimation.js | 9 +-
.../option-parts/option.stateAnimation.json | 9 +-
zh/documents/option-parts/option.textStyle.js | 142 +-
zh/documents/option-parts/option.textStyle.json | 142 +-
zh/documents/option-parts/option.timeline.js | 2464 +-
zh/documents/option-parts/option.timeline.json | 2464 +-
zh/documents/option-parts/option.title.js | 891 +-
zh/documents/option-parts/option.title.json | 891 +-
zh/documents/option-parts/option.toolbox.js | 1918 +-
zh/documents/option-parts/option.toolbox.json | 1918 +-
zh/documents/option-parts/option.tooltip.js | 820 +-
zh/documents/option-parts/option.tooltip.json | 820 +-
.../option-parts/option.visualMap-continuous.js | 549 +-
.../option-parts/option.visualMap-continuous.json | 549 +-
.../option-parts/option.visualMap-piecewise.js | 344 +-
.../option-parts/option.visualMap-piecewise.json | 344 +-
zh/documents/option-parts/option.xAxis.js | 2744 +-
zh/documents/option-parts/option.xAxis.json | 2744 +-
zh/documents/option-parts/option.yAxis.js | 2744 +-
zh/documents/option-parts/option.yAxis.json | 2744 +-
zh/documents/option.json | 2 +-
zh/documents/tutorial-parts/tutorial.js | 81 +-
zh/documents/tutorial-parts/tutorial.json | 81 +-
zh/documents/tutorial.json | 2 +-
zh/index.html | 2 +-
zh/js/doc-bundle.js | 4 +-
zh/option-gl.html | 6 +-
zh/option.html | 6 +-
zh/spreadsheet.html | 6 +-
zh/tutorial.html | 6 +-
423 files changed, 550 insertions(+), 1520172 deletions(-)
diff --git a/en/api.html b/en/api.html
index 25f57eef..28f2ea8a 100644
--- a/en/api.html
+++ b/en/api.html
@@ -9,8 +9,8 @@
</script><title>Documentation - Apache ECharts</title><style>html, body {
/* position: sticky should not have overflow parents.*/
overflow-x: hidden;
-}</style><link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/en/css/doc-bundle.css?_v_=db1d3d2e4e"><script type="text/javascript" src="https://fastly.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/en/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
+}</style><link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/en/css/doc-bundle.css?_v_=85152c98c2"><script type="text/javascript" src="https://fastly.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/en/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
</script><script type="text/javascript">window.globalArgsExtra = {
baseUrl: 'documents/api-parts',
@@ -19,7 +19,7 @@ window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
};
if (window.EC_WWW_CDN_PAY_ROOT) {
window.globalArgsExtra.cdnRoot = window.EC_WWW_CDN_PAY_ROOT + '/en/' + window.globalArgsExtra.baseUrl
-}</script><script type="text/javascript">window.globalArgsExtra.version = '89ed9d24a1';
+}</script><script type="text/javascript">window.globalArgsExtra.version = '49446579b9';
echartsDoc.init('#ec-doc-main', window.globalArgsExtra);</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
diff --git a/en/builder/echarts.html b/en/builder/echarts.html
index 9acd9126..e041b565 100644
--- a/en/builder/echarts.html
+++ b/en/builder/echarts.html
@@ -54,7 +54,7 @@
'rollup': 'lib/rollup.browser',
'transformDev': 'lib/transform-dev-bundle'
},
- urlArgs: 'v=1659429750245'
+ urlArgs: 'v=1659509165350'
});
require(['build']);
diff --git a/en/css/doc-bundle.css b/en/css/doc-bundle.css
index 2dab2cac..e66c8850 100644
--- a/en/css/doc-bundle.css
+++ b/en/css/doc-bundle.css
@@ -1047,6 +1047,15 @@ span.CodeMirror-selectedtext { background: none; }
#example-panel .example-code .codemirror-main .CodeMirror .CodeMirror-cursor {
display: none;
}
+#example-panel .example-code .btn-to-editor {
+ position: absolute;
+ right: 5px;
+ top: 8px;
+ z-index: 10;
+}
+#example-panel .example-code .btn-to-editor:not(:hover) {
+ color: #fff;
+}
#example-panel .toolbar {
position: absolute;
top: 15px;
diff --git a/en/documents/api-parts/api.action.js b/en/documents/api-parts/api.action.js
index cc85c996..01ba2d8f 100644
--- a/en/documents/api-parts/api.action.js
+++ b/en/documents/api-parts/api.action.js
@@ -1,101 +1 @@
-window.__EC_DOC_api_action = {
- "highlight": {
- "desc": "<p>Highlights specified data graphics.</p>\n<pre><code class=\"lang-ts\">// If highlight series:\ndispatchAction({\n type: 'highlight',\n\n // Find by index or id or name.\n // Can be an array to find multiple components.\n seriesIndex?: number | number[],\n seriesId?: string | string[],\n seriesName?: string | string[],\n\n // data index; could assign by name attribute when not defined\n dataIndex?: number | number[],\n // optional; data [...]
- },
- "downplay": {
- "desc": "<p>Downplay specified data graphics.</p>\n<pre><code class=\"lang-ts\">// If downplay series:\ndispatchAction({\n type: 'downplay',\n\n // Find by index or id or name.\n // Can be an array to find multiple components.\n seriesIndex?: number | number[],\n seriesId?: string | string[],\n seriesName?: string | string[],\n\n // data index; could assign by name attribute when not defined\n dataIndex?: number | number[],\n // optional; data name [...]
- },
- "select": {
- "desc": "<p>Select specified data. Selected data will apply the style of <a href=\"option.html#series-bar.select\" target=\"_blank\">select</a>.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n type: 'select',\n\n // Find by index or id or name.\n // Can be an array to find multiple components.\n seriesIndex?: number | number[],\n seriesId?: string | string[],\n seriesName?: string | string[],\n\n // data index; could assign by name attribute when no [...]
- },
- "unselect": {
- "desc": "<p>Unselect specified data.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n type: 'unselect',\n\n // Find by index or id or name.\n // Can be an array to find multiple components.\n seriesIndex?: number | number[],\n seriesId?: string | string[],\n seriesName?: string | string[],\n\n // data index; could assign by name attribute when not defined\n dataIndex?: number | number[],\n // optional; data name; ignored when dataIndex is defin [...]
- },
- "toggleSelected": {
- "desc": "<p>Toggle selected status of specified data.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n type: 'toggleSelected',\n\n // Find by index or id or name.\n // Can be an array to find multiple components.\n seriesIndex?: number | number[],\n seriesId?: string | string[],\n seriesName?: string | string[],\n\n // data index; could assign by name attribute when not defined\n dataIndex?: number | number[],\n // optional; data name; ignored [...]
- },
- "legend": {
- "desc": "<p>Actions related to <a href=\"option.html#legend\" target=\"_blank\">legend component</a>, <a href=\"option.html#legend\" target=\"_blank\">legend component</a> should be imported before use.</p>\n"
- },
- "legend.legendSelect": {
- "desc": "<p>Selects legend.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n type: 'legendSelect',\n // legend name\n name: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendselected\">legendselected</a></p>\n"
- },
- "legend.legendUnSelect": {
- "desc": "<p>Unselects the legend.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n type: 'legendUnSelect',\n // legend name\n name: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendunselected\">legendunselected</a></p>\n"
- },
- "legend.legendToggleSelect": {
- "desc": "<p>Toggles legend selecting state.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n type: 'legendToggleSelect',\n // legend name\n name: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendselectchanged\">legendselectchanged</a></p>\n"
- },
- "legend.legendAllSelect": {
- "desc": "<p>Selects all legends.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n type: 'legendAllSelect'\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendselectall\">legendselectall</a></p>\n"
- },
- "legend.legendInverseSelect": {
- "desc": "<p>Inverses all legends.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n type: 'legendInverseSelect'\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendinverseselect\">legendinverseselect</a></p>\n"
- },
- "legend.legendScroll": {
- "desc": "<p>Control the scrolling of legend. It works when <a href=\"option.html#legend.type\" target=\"_blank\">legend.type</a> is <code class=\"codespan\">'scroll'</code>.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n type: 'legendScroll',\n scrollDataIndex: number,\n legendId: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendscroll\">legendscroll</a></p>\n"
- },
- "tooltip": {
- "desc": "<p>Actions related to <a href=\"option.html#tooltip\" target=\"_blank\">tooltip component</a>, <a href=\"option.html#tooltip\" target=\"_blank\">tooltip component</a> should be imported before use.</p>\n"
- },
- "tooltip.showTip": {
- "desc": "<p>Shows tooltip.</p>\n<p>There are several usages as followed.</p>\n<p>1 Display tooltip at certain position relative to container. If it cannot be displayed at the specified location, then it is invalid.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n type: 'showTip',\n // x coordinate on screen\n x: number,\n // y coordinate on screen\n y: number,\n // Position of tooltip. Only works in this action.\n // Use tooltip.position in option by [...]
- },
- "tooltip.hideTip": {
- "desc": "<p>Hides tooltip.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n type: 'hideTip'\n})\n</code></pre>\n"
- },
- "dataZoom": {
- "desc": "<p>Actions related to <a href=\"option.html#dataZoom\" target=\"_blank\">data region zoom component</a>, <a href=\"option.html#dataZoom\" target=\"_blank\">data region zoom component</a> should be imported before use.</p>\n"
- },
- "dataZoom.dataZoom": {
- "desc": "<p>Zoom data region.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n type: 'dataZoom',\n // optional; index of dataZoom component; useful for are multiple dataZoom components; 0 by default\n dataZoomIndex: number,\n // percentage of starting position; 0 - 100\n start: number,\n // percentage of ending position; 0 - 100\n end: number,\n // data value at starting location\n startValue: number,\n // data value at ending location\n e [...]
- },
- "dataZoom.takeGlobalCursor": {
- "desc": "<p>Activate or inactivate <code class=\"codespan\">dataZoom</code> buttom in <code class=\"codespan\">toolbox</code>.</p>\n<pre><code class=\"lang-ts\">myChart.dispatchAction({\n type: 'takeGlobalCursor',\n key: 'dataZoomSelect',\n // Activate or inactivate.\n dataZoomSelectActive: true\n});\n</code></pre>\n"
- },
- "visualMap": {
- "desc": "<p>Actions related to <a href=\"option.html#visualMap\" target=\"_blank\">visual mapping component</a>, <a href=\"option.html#visualMap\" target=\"_blank\">visual mapping component</a> should be imported before use.</p>\n"
- },
- "visualMap.selectDataRange": {
- "desc": "<p>Selects data range of visual mapping.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n type: 'selectDataRange',\n // optional; index of visualMap component; useful for are multiple visualMap components; 0 by default\n visualMapIndex: number,\n // continuous visualMap is different from discrete one\n // continuous visualMap is an array representing range of data values.\n // discrete visualMap is an object, whose key is category or piece index [...]
- },
- "timeline": {
- "desc": "<p>Actions related to <a href=\"option.html#timeline\" target=\"_blank\">timeline component</a>, <a href=\"option.html#timeline\" target=\"_blank\">timeline component</a> should be imported before use.</p>\n"
- },
- "timeline.timelineChange": {
- "desc": "<p>Sets the current time point.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n type: 'timelineChange',\n // index of time point\n currentIndex: number\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.timelinechanged\">timelinechanged</a></p>\n"
- },
- "timeline.timelinePlayChange": {
- "desc": "<p>Toggles playing status of timeline.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n type: 'timelinePlayChange',\n // laying status; true for auto-play\n playState: boolean\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.timelineplaychanged\">timelineplaychanged</a></p>\n"
- },
- "toolbox": {
- "desc": "<p>Actions related to <a href=\"option.html#toolbox\" target=\"_blank\">toolbox component</a>, <a href=\"option.html#toolbox\" target=\"_blank\">toolbox component</a> should be imported before use.</p>\n"
- },
- "toolbox.restore": {
- "desc": "<p>Resets option.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n type: 'restore'\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.restore\">restore</a></p>\n"
- },
- "geo": {
- "desc": "<p>Actions related to <a href=\"option.html#geo\" target=\"_blank\">geo</a> component, <a href=\"option.html#geo\" target=\"_blank\">geo</a> should be imported before use.</p>\n"
- },
- "geo.geoSelect": {
- "desc": "<p>Selects the specified geo region.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n type: 'geoSelect',\n\n // Find geo by index or id or name.\n // Can be an array to find multiple components.\n geoIndex?: number | number[],\n geoId?: string | string[],\n geoName?: string | string[],\n\n // region in geo component.\n // Can be an array to specify multiple names.\n name?: string | string[],\n})\n</code></pre>\n<p><strong>EVENT:</strong [...]
- },
- "geo.geoUnSelect": {
- "desc": "<p>Cancels selecting specified geo region.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n type: 'geoUnSelect',\n\n // Find geo by index or id or name.\n // Can be an array to find multiple components.\n geoIndex?: number | number[],\n geoId?: string | string[],\n geoName?: string | string[],\n\n // region in geo component.\n // Can be an array to specify multiple names.\n name?: string | string[],\n})\n</code></pre>\n<p><strong>EVENT: [...]
- },
- "geo.geoToggleSelect": {
- "desc": "<p>Toggles selecting status of specified geo region.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n type: 'geoToggleSelect',\n\n // Find geo by index or id or name.\n // Can be an array to find multiple components.\n geoIndex?: number | number[],\n geoId?: string | string[],\n geoName?: string | string[],\n\n // region in geo component.\n // Can be an array to specify multiple names.\n name?: string | string[],\n})\n</code></pre>\n<p> [...]
- },
- "brush": {
- "desc": "<p><a href=\"option.html#brush\" target=\"_blank\">brush</a> related actions.</p>\n"
- },
- "brush.brush": {
- "desc": "<p>This action is dispatched when the "brush" behavior is performing.\nIt sets select-boxes (areas) in this chart. For example:</p>\n<pre><code class=\"lang-javascript\">myChart.dispatchAction({\n type: 'brush',\n areas: [ // "areas" means select-boxes. Multi-boxes can be specified.\n // If "areas" is empty, all of the select-boxes will be deleted.\n { // The first area.\n\n // Indicate that this area [...]
- },
- "brush.brushEnd": {
- "desc": "<blockquote>\n<p>Since <code class=\"codespan\">v4.5.0</code></p>\n</blockquote>\n<p>This action is dispatched when the "brush" behavior finished.\nThe parameters are the same as <a href=\"#action.brush.brush\">action brush</a>.</p>\n"
- },
- "brush.takeGlobalCursor": {
- "desc": "<p>The switch of the brush. This action can make the mouse enabled/disabled to brush.\nIn fact, the brush buttons in <a href=\"option.html#toolbox.feature.brush\" target=\"_blank\">toolbox</a> just use this aciton.</p>\n<p>This event corresponding to this action is <a href=\"#events.globalCursorTaken\">globalCursorTaken</a>.</p>\n<pre><code class=\"lang-ts\">api.dispatchAction({\n type: 'takeGlobalCursor',\n // If intending to enable brush, must set. Otherwise, [...]
- }
-}
\ No newline at end of file
+window.__EC_DOC_api_action = {"highlight":{"desc":"<p>Highlights specified data graphics.</p>\n<pre><code class=\"lang-ts\">// If highlight series:\ndispatchAction({\n type: 'highlight',\n\n // Find by index or id or name.\n // Can be an array to find multiple components.\n seriesIndex?: number | number[],\n seriesId?: string | string[],\n seriesName?: string | string[],\n\n // data index; could assign by name attribute when not defined\n dataIndex?: numb [...]
\ No newline at end of file
diff --git a/en/documents/api-parts/api.action.json b/en/documents/api-parts/api.action.json
index ee3c627f..81d99474 100644
--- a/en/documents/api-parts/api.action.json
+++ b/en/documents/api-parts/api.action.json
@@ -1,101 +1 @@
-{
- "highlight": {
- "desc": "<p>Highlights specified data graphics.</p>\n<pre><code class=\"lang-ts\">// If highlight series:\ndispatchAction({\n type: 'highlight',\n\n // Find by index or id or name.\n // Can be an array to find multiple components.\n seriesIndex?: number | number[],\n seriesId?: string | string[],\n seriesName?: string | string[],\n\n // data index; could assign by name attribute when not defined\n dataIndex?: number | number[],\n // optional; data [...]
- },
- "downplay": {
- "desc": "<p>Downplay specified data graphics.</p>\n<pre><code class=\"lang-ts\">// If downplay series:\ndispatchAction({\n type: 'downplay',\n\n // Find by index or id or name.\n // Can be an array to find multiple components.\n seriesIndex?: number | number[],\n seriesId?: string | string[],\n seriesName?: string | string[],\n\n // data index; could assign by name attribute when not defined\n dataIndex?: number | number[],\n // optional; data name [...]
- },
- "select": {
- "desc": "<p>Select specified data. Selected data will apply the style of <a href=\"option.html#series-bar.select\" target=\"_blank\">select</a>.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n type: 'select',\n\n // Find by index or id or name.\n // Can be an array to find multiple components.\n seriesIndex?: number | number[],\n seriesId?: string | string[],\n seriesName?: string | string[],\n\n // data index; could assign by name attribute when no [...]
- },
- "unselect": {
- "desc": "<p>Unselect specified data.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n type: 'unselect',\n\n // Find by index or id or name.\n // Can be an array to find multiple components.\n seriesIndex?: number | number[],\n seriesId?: string | string[],\n seriesName?: string | string[],\n\n // data index; could assign by name attribute when not defined\n dataIndex?: number | number[],\n // optional; data name; ignored when dataIndex is defin [...]
- },
- "toggleSelected": {
- "desc": "<p>Toggle selected status of specified data.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n type: 'toggleSelected',\n\n // Find by index or id or name.\n // Can be an array to find multiple components.\n seriesIndex?: number | number[],\n seriesId?: string | string[],\n seriesName?: string | string[],\n\n // data index; could assign by name attribute when not defined\n dataIndex?: number | number[],\n // optional; data name; ignored [...]
- },
- "legend": {
- "desc": "<p>Actions related to <a href=\"option.html#legend\" target=\"_blank\">legend component</a>, <a href=\"option.html#legend\" target=\"_blank\">legend component</a> should be imported before use.</p>\n"
- },
- "legend.legendSelect": {
- "desc": "<p>Selects legend.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n type: 'legendSelect',\n // legend name\n name: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendselected\">legendselected</a></p>\n"
- },
- "legend.legendUnSelect": {
- "desc": "<p>Unselects the legend.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n type: 'legendUnSelect',\n // legend name\n name: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendunselected\">legendunselected</a></p>\n"
- },
- "legend.legendToggleSelect": {
- "desc": "<p>Toggles legend selecting state.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n type: 'legendToggleSelect',\n // legend name\n name: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendselectchanged\">legendselectchanged</a></p>\n"
- },
- "legend.legendAllSelect": {
- "desc": "<p>Selects all legends.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n type: 'legendAllSelect'\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendselectall\">legendselectall</a></p>\n"
- },
- "legend.legendInverseSelect": {
- "desc": "<p>Inverses all legends.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n type: 'legendInverseSelect'\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendinverseselect\">legendinverseselect</a></p>\n"
- },
- "legend.legendScroll": {
- "desc": "<p>Control the scrolling of legend. It works when <a href=\"option.html#legend.type\" target=\"_blank\">legend.type</a> is <code class=\"codespan\">'scroll'</code>.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n type: 'legendScroll',\n scrollDataIndex: number,\n legendId: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendscroll\">legendscroll</a></p>\n"
- },
- "tooltip": {
- "desc": "<p>Actions related to <a href=\"option.html#tooltip\" target=\"_blank\">tooltip component</a>, <a href=\"option.html#tooltip\" target=\"_blank\">tooltip component</a> should be imported before use.</p>\n"
- },
- "tooltip.showTip": {
- "desc": "<p>Shows tooltip.</p>\n<p>There are several usages as followed.</p>\n<p>1 Display tooltip at certain position relative to container. If it cannot be displayed at the specified location, then it is invalid.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n type: 'showTip',\n // x coordinate on screen\n x: number,\n // y coordinate on screen\n y: number,\n // Position of tooltip. Only works in this action.\n // Use tooltip.position in option by [...]
- },
- "tooltip.hideTip": {
- "desc": "<p>Hides tooltip.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n type: 'hideTip'\n})\n</code></pre>\n"
- },
- "dataZoom": {
- "desc": "<p>Actions related to <a href=\"option.html#dataZoom\" target=\"_blank\">data region zoom component</a>, <a href=\"option.html#dataZoom\" target=\"_blank\">data region zoom component</a> should be imported before use.</p>\n"
- },
- "dataZoom.dataZoom": {
- "desc": "<p>Zoom data region.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n type: 'dataZoom',\n // optional; index of dataZoom component; useful for are multiple dataZoom components; 0 by default\n dataZoomIndex: number,\n // percentage of starting position; 0 - 100\n start: number,\n // percentage of ending position; 0 - 100\n end: number,\n // data value at starting location\n startValue: number,\n // data value at ending location\n e [...]
- },
- "dataZoom.takeGlobalCursor": {
- "desc": "<p>Activate or inactivate <code class=\"codespan\">dataZoom</code> buttom in <code class=\"codespan\">toolbox</code>.</p>\n<pre><code class=\"lang-ts\">myChart.dispatchAction({\n type: 'takeGlobalCursor',\n key: 'dataZoomSelect',\n // Activate or inactivate.\n dataZoomSelectActive: true\n});\n</code></pre>\n"
- },
- "visualMap": {
- "desc": "<p>Actions related to <a href=\"option.html#visualMap\" target=\"_blank\">visual mapping component</a>, <a href=\"option.html#visualMap\" target=\"_blank\">visual mapping component</a> should be imported before use.</p>\n"
- },
- "visualMap.selectDataRange": {
- "desc": "<p>Selects data range of visual mapping.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n type: 'selectDataRange',\n // optional; index of visualMap component; useful for are multiple visualMap components; 0 by default\n visualMapIndex: number,\n // continuous visualMap is different from discrete one\n // continuous visualMap is an array representing range of data values.\n // discrete visualMap is an object, whose key is category or piece index [...]
- },
- "timeline": {
- "desc": "<p>Actions related to <a href=\"option.html#timeline\" target=\"_blank\">timeline component</a>, <a href=\"option.html#timeline\" target=\"_blank\">timeline component</a> should be imported before use.</p>\n"
- },
- "timeline.timelineChange": {
- "desc": "<p>Sets the current time point.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n type: 'timelineChange',\n // index of time point\n currentIndex: number\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.timelinechanged\">timelinechanged</a></p>\n"
- },
- "timeline.timelinePlayChange": {
- "desc": "<p>Toggles playing status of timeline.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n type: 'timelinePlayChange',\n // laying status; true for auto-play\n playState: boolean\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.timelineplaychanged\">timelineplaychanged</a></p>\n"
- },
- "toolbox": {
- "desc": "<p>Actions related to <a href=\"option.html#toolbox\" target=\"_blank\">toolbox component</a>, <a href=\"option.html#toolbox\" target=\"_blank\">toolbox component</a> should be imported before use.</p>\n"
- },
- "toolbox.restore": {
- "desc": "<p>Resets option.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n type: 'restore'\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.restore\">restore</a></p>\n"
- },
- "geo": {
- "desc": "<p>Actions related to <a href=\"option.html#geo\" target=\"_blank\">geo</a> component, <a href=\"option.html#geo\" target=\"_blank\">geo</a> should be imported before use.</p>\n"
- },
- "geo.geoSelect": {
- "desc": "<p>Selects the specified geo region.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n type: 'geoSelect',\n\n // Find geo by index or id or name.\n // Can be an array to find multiple components.\n geoIndex?: number | number[],\n geoId?: string | string[],\n geoName?: string | string[],\n\n // region in geo component.\n // Can be an array to specify multiple names.\n name?: string | string[],\n})\n</code></pre>\n<p><strong>EVENT:</strong [...]
- },
- "geo.geoUnSelect": {
- "desc": "<p>Cancels selecting specified geo region.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n type: 'geoUnSelect',\n\n // Find geo by index or id or name.\n // Can be an array to find multiple components.\n geoIndex?: number | number[],\n geoId?: string | string[],\n geoName?: string | string[],\n\n // region in geo component.\n // Can be an array to specify multiple names.\n name?: string | string[],\n})\n</code></pre>\n<p><strong>EVENT: [...]
- },
- "geo.geoToggleSelect": {
- "desc": "<p>Toggles selecting status of specified geo region.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n type: 'geoToggleSelect',\n\n // Find geo by index or id or name.\n // Can be an array to find multiple components.\n geoIndex?: number | number[],\n geoId?: string | string[],\n geoName?: string | string[],\n\n // region in geo component.\n // Can be an array to specify multiple names.\n name?: string | string[],\n})\n</code></pre>\n<p> [...]
- },
- "brush": {
- "desc": "<p><a href=\"option.html#brush\" target=\"_blank\">brush</a> related actions.</p>\n"
- },
- "brush.brush": {
- "desc": "<p>This action is dispatched when the "brush" behavior is performing.\nIt sets select-boxes (areas) in this chart. For example:</p>\n<pre><code class=\"lang-javascript\">myChart.dispatchAction({\n type: 'brush',\n areas: [ // "areas" means select-boxes. Multi-boxes can be specified.\n // If "areas" is empty, all of the select-boxes will be deleted.\n { // The first area.\n\n // Indicate that this area [...]
- },
- "brush.brushEnd": {
- "desc": "<blockquote>\n<p>Since <code class=\"codespan\">v4.5.0</code></p>\n</blockquote>\n<p>This action is dispatched when the "brush" behavior finished.\nThe parameters are the same as <a href=\"#action.brush.brush\">action brush</a>.</p>\n"
- },
- "brush.takeGlobalCursor": {
- "desc": "<p>The switch of the brush. This action can make the mouse enabled/disabled to brush.\nIn fact, the brush buttons in <a href=\"option.html#toolbox.feature.brush\" target=\"_blank\">toolbox</a> just use this aciton.</p>\n<p>This event corresponding to this action is <a href=\"#events.globalCursorTaken\">globalCursorTaken</a>.</p>\n<pre><code class=\"lang-ts\">api.dispatchAction({\n type: 'takeGlobalCursor',\n // If intending to enable brush, must set. Otherwise, [...]
- }
-}
\ No newline at end of file
+{"highlight":{"desc":"<p>Highlights specified data graphics.</p>\n<pre><code class=\"lang-ts\">// If highlight series:\ndispatchAction({\n type: 'highlight',\n\n // Find by index or id or name.\n // Can be an array to find multiple components.\n seriesIndex?: number | number[],\n seriesId?: string | string[],\n seriesName?: string | string[],\n\n // data index; could assign by name attribute when not defined\n dataIndex?: number | number[],\n // option [...]
\ No newline at end of file
diff --git a/en/documents/api-parts/api.echarts.js b/en/documents/api-parts/api.echarts.js
index f9f0f556..26a961c2 100644
--- a/en/documents/api-parts/api.echarts.js
+++ b/en/documents/api-parts/api.echarts.js
@@ -1,53 +1 @@
-window.__EC_DOC_api_echarts = {
- "init": {
- "desc": "<pre><code class=\"lang-ts\">(dom: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: {\n devicePixelRatio?: number,\n renderer?: string,\n useDirtyRect?: boolean, // Since `5.0.0`\n ssr?: boolean, // Since `5.3.0`\n width?: number|string,\n height?: number|string,\n locale?: string // Since `5.0.0`\n}) => ECharts\n</code></pre>\n<p>Creates an ECharts instance, and returns an <a href=\"#echartsInstance\">echartsInstance</ [...]
- },
- "connect": {
- "desc": "<pre><code class=\"lang-ts\">(group:string|Array)\n</code></pre>\n<p>Connects interaction of multiple chart series.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><code class=\"codespan\">group</code>\n Group id, or array of chart instance.</li>\n</ul>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-ts\">// set group id of each instance respectively.\nchart1.group = 'group1';\nchart2.group = 'group1';\necharts.connect('group1');\n [...]
- },
- "disconnect": {
- "desc": "<pre><code class=\"lang-ts\">(group:string)\n</code></pre>\n<p>Disconnects interaction of multiple chart series. To have one single instance to be removed, you can set <code class=\"codespan\">group</code> of chart instance to be null.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code class=\"codespan\">group</code></p>\n<p> group id.</p>\n</li>\n</ul>\n"
- },
- "dispose": {
- "desc": "<pre><code class=\"lang-ts\">(target: ECharts|HTMLDivElement|HTMLCanvasElement)\n</code></pre>\n<p>Destroys chart instance, after which the instance cannot be used any more.</p>\n"
- },
- "getInstanceByDom": {
- "desc": "<pre><code class=\"lang-ts\">(target: HTMLDivElement|HTMLCanvasElement) => ECharts\n</code></pre>\n<p>Returns chart instance of dom container.</p>\n"
- },
- "use": {
- "desc": "<blockquote>\n<p>Since <code class=\"codespan\">5.0.1</code></p>\n</blockquote>\n<p>Use components. Used with the new tree-shaking API.</p>\n<p>NOTE: <code class=\"codespan\">echarts.use</code> must be used before <code class=\"codespan\">eharts.init</code></p>\n<pre><code class=\"lang-ts\">// Import the echarts core module, which provides the necessary interfaces for using echarts.\nimport * as echarts from 'echarts/core';\n// Import bar charts, all with Chart suffi [...]
- },
- "registerMap": {
- "desc": "<pre><code class=\"lang-ts\">(\n mapName: string,\n opt: {\n geoJSON: Object | string;\n specialAreas?: Object;\n }\n)\n| (\n mapName: string,\n opt: {\n svg: Object | string;\n }\n)\n| (\n mapName: string,\n geoJSON: Object | string,\n specialAreas?: Object\n)\n</code></pre>\n<p>Registers available maps. This can only be used after including <a href=\"option.html#geo\" target=\"_blank\">geo</a> component or chart series of <a [...]
- },
- "getMap": {
- "desc": "<pre><code class=\"lang-ts\">(mapName: string)\n</code></pre>\n<p>Get a registered map in the following format:</p>\n<pre><code class=\"lang-ts\">{\n // geoJSON data of the map\n geoJSON: Object,\n // special area, see registerMap() for more information\n specialAreas: Object\n}\n</code></pre>\n<p>Note:</p>\n<ul>\n<li><code class=\"codespan\">geoJSON</code> can also be <code class=\"codespan\">geoJson</code>, they have the same reference.</li>\n<li>SVG registered [...]
- },
- "registerTheme": {
- "desc": "<pre><code class=\"lang-ts\">(themeName: string, theme: Object)\n</code></pre>\n<p>Registers a theme, should be specified when <a href=\"#echarts.init\">initialize the chart instance</a>.</p>\n"
- },
- "registerLocale": {
- "desc": "<blockquote>\n<p>Since <code class=\"codespan\">5.0.0</code></p>\n</blockquote>\n<pre><code class=\"lang-ts\">(locale: string, localeCfg: Object)\n</code></pre>\n<p>Registers a locale, should be specified when <a href=\"#echarts.init\">initialize the chart instance</a>. See the format in <a href=\"https://github.com/apache/echarts/blob/release/src/i18n/langEN.ts\" target=\"_blank\">src/i18n/langEN.ts</a></p>\n"
- },
- "setPlatformAPI": {
- "desc": "<blockquote>\n<p>Since <code class=\"codespan\">5.3.0</code></p>\n</blockquote>\n<pre><code class=\"lang-ts\">(platformAPI?: {\n createCanvas(): HTMLCanvasElement\n measureText(text: string, font?: string): { width: number }\n loadImage(\n src: string,\n onload: () => void,\n onerror: () => void\n ): HTMLImageElement\n}) => void\n</code></pre>\n<p>Sets the platform-related API, which may need to be provided when non-browser platforms [...]
- },
- "graphic": {
- "desc": "<p>Util methods about graphics.</p>\n"
- },
- "graphic.extendShape": {
- "desc": "<p>Create a new shape class.</p>\n<pre><code class=\"lang-ts\">(\n opts: Object\n) => zrender.graphic.Path\n</code></pre>\n<p>The details of the parameter <code class=\"codespan\">opts</code> can be checked in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderpath\" target=\"_blank\">zrender.graphic.Path</a></p>\n"
- },
- "graphic.registerShape": {
- "desc": "<p>Register a user defined shape.</p>\n<pre><code class=\"lang-ts\">(\n name: string,\n ShapeClass: zrender.graphic.Path\n)\n</code></pre>\n<p>The <code class=\"codespan\">ShapeClass</code> should be generated by <a href=\"#echarts.graphic.extendShape\">echarts.graphic.extendShape</a>.\nThen the shape class can be fetched by <a href=\"#echarts.graphic.getShapeClass\">echarts.graphic.getShapeClass</a>\n<code class=\"codespan\">registerShape</code> will overwrite the reg [...]
- },
- "graphic.getShapeClass": {
- "desc": "<p>Get the <a href=\"#echarts.graphic.registerShape\">registered</a> shape class.</p>\n<pre><code class=\"lang-ts\">(\n name: String\n) => zrender.graphic.Path\n</code></pre>\n<p>Some built-in shapes are registered by default:\n<code class=\"codespan\">'circle'</code>, <code class=\"codespan\">'sector'</code>, <code class=\"codespan\">'ring'</code>, <code class=\"codespan\">'polygon'</code>, <code class=\"codespan\">'polyline'</c [...]
- },
- "graphic.clipPointsByRect": {
- "desc": "<p>Clip the given points by the given rectangular.</p>\n<pre><code class=\"lang-ts\">(\n // The points to be clipped, like [[23, 44], [12, 15], ...].\n points: Array.<Array.<number>>,\n // The rectangular that is used to clip points.\n rect: {\n x: number,\n y: number,\n width: number,\n height: number\n }\n) => Array.<Array.<number>> // The result Points.\n</code></pre>\n"
- },
- "graphic.clipRectByRect": {
- "desc": "<p>Clip the first input rectangular by the second input rectangular.</p>\n<pre><code class=\"lang-ts\">(\n // The rectangular to be clipped.\n targetRect: {\n x: number,\n y: number,\n width: number,\n height: number\n },\n // The rectangular that is used to clip the first rectangular.\n rect: {\n x: number,\n y: number,\n width: number,\n height: number\n }\n) => { // The result rectangular.\n [...]
- }
-}
\ No newline at end of file
+window.__EC_DOC_api_echarts = {"init":{"desc":"<pre><code class=\"lang-ts\">(dom: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: {\n devicePixelRatio?: number,\n renderer?: string,\n useDirtyRect?: boolean, // Since `5.0.0`\n ssr?: boolean, // Since `5.3.0`\n width?: number|string,\n height?: number|string,\n locale?: string // Since `5.0.0`\n}) => ECharts\n</code></pre>\n<p>Creates an ECharts instance, and returns an <a href=\"#e [...]
\ No newline at end of file
diff --git a/en/documents/api-parts/api.echarts.json b/en/documents/api-parts/api.echarts.json
index c66e54e3..b11320cf 100644
--- a/en/documents/api-parts/api.echarts.json
+++ b/en/documents/api-parts/api.echarts.json
@@ -1,53 +1 @@
-{
- "init": {
- "desc": "<pre><code class=\"lang-ts\">(dom: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: {\n devicePixelRatio?: number,\n renderer?: string,\n useDirtyRect?: boolean, // Since `5.0.0`\n ssr?: boolean, // Since `5.3.0`\n width?: number|string,\n height?: number|string,\n locale?: string // Since `5.0.0`\n}) => ECharts\n</code></pre>\n<p>Creates an ECharts instance, and returns an <a href=\"#echartsInstance\">echartsInstance</ [...]
- },
- "connect": {
- "desc": "<pre><code class=\"lang-ts\">(group:string|Array)\n</code></pre>\n<p>Connects interaction of multiple chart series.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><code class=\"codespan\">group</code>\n Group id, or array of chart instance.</li>\n</ul>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-ts\">// set group id of each instance respectively.\nchart1.group = 'group1';\nchart2.group = 'group1';\necharts.connect('group1');\n [...]
- },
- "disconnect": {
- "desc": "<pre><code class=\"lang-ts\">(group:string)\n</code></pre>\n<p>Disconnects interaction of multiple chart series. To have one single instance to be removed, you can set <code class=\"codespan\">group</code> of chart instance to be null.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code class=\"codespan\">group</code></p>\n<p> group id.</p>\n</li>\n</ul>\n"
- },
- "dispose": {
- "desc": "<pre><code class=\"lang-ts\">(target: ECharts|HTMLDivElement|HTMLCanvasElement)\n</code></pre>\n<p>Destroys chart instance, after which the instance cannot be used any more.</p>\n"
- },
- "getInstanceByDom": {
- "desc": "<pre><code class=\"lang-ts\">(target: HTMLDivElement|HTMLCanvasElement) => ECharts\n</code></pre>\n<p>Returns chart instance of dom container.</p>\n"
- },
- "use": {
- "desc": "<blockquote>\n<p>Since <code class=\"codespan\">5.0.1</code></p>\n</blockquote>\n<p>Use components. Used with the new tree-shaking API.</p>\n<p>NOTE: <code class=\"codespan\">echarts.use</code> must be used before <code class=\"codespan\">eharts.init</code></p>\n<pre><code class=\"lang-ts\">// Import the echarts core module, which provides the necessary interfaces for using echarts.\nimport * as echarts from 'echarts/core';\n// Import bar charts, all with Chart suffi [...]
- },
- "registerMap": {
- "desc": "<pre><code class=\"lang-ts\">(\n mapName: string,\n opt: {\n geoJSON: Object | string;\n specialAreas?: Object;\n }\n)\n| (\n mapName: string,\n opt: {\n svg: Object | string;\n }\n)\n| (\n mapName: string,\n geoJSON: Object | string,\n specialAreas?: Object\n)\n</code></pre>\n<p>Registers available maps. This can only be used after including <a href=\"option.html#geo\" target=\"_blank\">geo</a> component or chart series of <a [...]
- },
- "getMap": {
- "desc": "<pre><code class=\"lang-ts\">(mapName: string)\n</code></pre>\n<p>Get a registered map in the following format:</p>\n<pre><code class=\"lang-ts\">{\n // geoJSON data of the map\n geoJSON: Object,\n // special area, see registerMap() for more information\n specialAreas: Object\n}\n</code></pre>\n<p>Note:</p>\n<ul>\n<li><code class=\"codespan\">geoJSON</code> can also be <code class=\"codespan\">geoJson</code>, they have the same reference.</li>\n<li>SVG registered [...]
- },
- "registerTheme": {
- "desc": "<pre><code class=\"lang-ts\">(themeName: string, theme: Object)\n</code></pre>\n<p>Registers a theme, should be specified when <a href=\"#echarts.init\">initialize the chart instance</a>.</p>\n"
- },
- "registerLocale": {
- "desc": "<blockquote>\n<p>Since <code class=\"codespan\">5.0.0</code></p>\n</blockquote>\n<pre><code class=\"lang-ts\">(locale: string, localeCfg: Object)\n</code></pre>\n<p>Registers a locale, should be specified when <a href=\"#echarts.init\">initialize the chart instance</a>. See the format in <a href=\"https://github.com/apache/echarts/blob/release/src/i18n/langEN.ts\" target=\"_blank\">src/i18n/langEN.ts</a></p>\n"
- },
- "setPlatformAPI": {
- "desc": "<blockquote>\n<p>Since <code class=\"codespan\">5.3.0</code></p>\n</blockquote>\n<pre><code class=\"lang-ts\">(platformAPI?: {\n createCanvas(): HTMLCanvasElement\n measureText(text: string, font?: string): { width: number }\n loadImage(\n src: string,\n onload: () => void,\n onerror: () => void\n ): HTMLImageElement\n}) => void\n</code></pre>\n<p>Sets the platform-related API, which may need to be provided when non-browser platforms [...]
- },
- "graphic": {
- "desc": "<p>Util methods about graphics.</p>\n"
- },
- "graphic.extendShape": {
- "desc": "<p>Create a new shape class.</p>\n<pre><code class=\"lang-ts\">(\n opts: Object\n) => zrender.graphic.Path\n</code></pre>\n<p>The details of the parameter <code class=\"codespan\">opts</code> can be checked in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderpath\" target=\"_blank\">zrender.graphic.Path</a></p>\n"
- },
- "graphic.registerShape": {
- "desc": "<p>Register a user defined shape.</p>\n<pre><code class=\"lang-ts\">(\n name: string,\n ShapeClass: zrender.graphic.Path\n)\n</code></pre>\n<p>The <code class=\"codespan\">ShapeClass</code> should be generated by <a href=\"#echarts.graphic.extendShape\">echarts.graphic.extendShape</a>.\nThen the shape class can be fetched by <a href=\"#echarts.graphic.getShapeClass\">echarts.graphic.getShapeClass</a>\n<code class=\"codespan\">registerShape</code> will overwrite the reg [...]
- },
- "graphic.getShapeClass": {
- "desc": "<p>Get the <a href=\"#echarts.graphic.registerShape\">registered</a> shape class.</p>\n<pre><code class=\"lang-ts\">(\n name: String\n) => zrender.graphic.Path\n</code></pre>\n<p>Some built-in shapes are registered by default:\n<code class=\"codespan\">'circle'</code>, <code class=\"codespan\">'sector'</code>, <code class=\"codespan\">'ring'</code>, <code class=\"codespan\">'polygon'</code>, <code class=\"codespan\">'polyline'</c [...]
- },
- "graphic.clipPointsByRect": {
- "desc": "<p>Clip the given points by the given rectangular.</p>\n<pre><code class=\"lang-ts\">(\n // The points to be clipped, like [[23, 44], [12, 15], ...].\n points: Array.<Array.<number>>,\n // The rectangular that is used to clip points.\n rect: {\n x: number,\n y: number,\n width: number,\n height: number\n }\n) => Array.<Array.<number>> // The result Points.\n</code></pre>\n"
- },
- "graphic.clipRectByRect": {
- "desc": "<p>Clip the first input rectangular by the second input rectangular.</p>\n<pre><code class=\"lang-ts\">(\n // The rectangular to be clipped.\n targetRect: {\n x: number,\n y: number,\n width: number,\n height: number\n },\n // The rectangular that is used to clip the first rectangular.\n rect: {\n x: number,\n y: number,\n width: number,\n height: number\n }\n) => { // The result rectangular.\n [...]
- }
-}
\ No newline at end of file
+{"init":{"desc":"<pre><code class=\"lang-ts\">(dom: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: {\n devicePixelRatio?: number,\n renderer?: string,\n useDirtyRect?: boolean, // Since `5.0.0`\n ssr?: boolean, // Since `5.3.0`\n width?: number|string,\n height?: number|string,\n locale?: string // Since `5.0.0`\n}) => ECharts\n</code></pre>\n<p>Creates an ECharts instance, and returns an <a href=\"#echartsInstance\">echartsInstan [...]
\ No newline at end of file
diff --git a/en/documents/api-parts/api.echartsInstance.js b/en/documents/api-parts/api.echartsInstance.js
index a251261f..b0accd5c 100644
--- a/en/documents/api-parts/api.echartsInstance.js
+++ b/en/documents/api-parts/api.echartsInstance.js
@@ -1,68 +1 @@
-window.__EC_DOC_api_echartsInstance = {
- "group": {
- "desc": "<p>Group name to be used in chart <a href=\"#echarts.connect\">connection</a>.</p>\n"
- },
- "setOption": {
- "desc": "<pre><code class=\"lang-ts\">(option: Object, notMerge?: boolean, lazyUpdate?: boolean)\nor\n(option: Object, opts?: {\n notMerge?: boolean;\n replaceMerge?: string | string[];\n lazyUpdate?: boolean;\n})\n</code></pre>\n<p>Configuration item, data, universal interface, all parameters and data can all be modified through <code class=\"codespan\">setOption</code>. ECharts will merge new parameters and data, and then refresh chart. If <a href=\"option.html#animation\" [...]
- },
- "getWidth": {
- "desc": "<pre><code class=\"lang-ts\">() => number\n</code></pre>\n<p>Gets width of ECharts instance container.</p>\n"
- },
- "getHeight": {
- "desc": "<pre><code class=\"lang-ts\">() => number\n</code></pre>\n<p>Gets height of ECharts instance container.</p>\n"
- },
- "getDom": {
- "desc": "<pre><code class=\"lang-ts\">() => HTMLCanvasElement|HTMLDivElement\n</code></pre>\n<p>Gets DOM element of ECharts instance container.</p>\n"
- },
- "getOption": {
- "desc": "<pre><code class=\"lang-ts\">() => Object\n</code></pre>\n<p>Gets <code class=\"codespan\">option</code> object maintained in current instance, which contains configuration item and data merged from previous <code class=\"codespan\">setOption</code> operations by users, along with user interaction states. For example, switching of legend, zooming area of data zoom, and so on. Therefore, a new instance that is exactly the same can be recovered from this option.</p>\n<p><st [...]
- },
- "resize": {
- "desc": "<pre><code class=\"lang-ts\">(opts?: {\n width?: number|string,\n height?: number|string,\n silent?: boolean,\n animation?: {\n duration?: number\n easing?: string\n }\n}) => ECharts\n</code></pre>\n<p>Resizes chart, which should be called manually when container size changes.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code class=\"codespan\">opts</code></p>\n<p> Optional. Which may contain:</p>\n<ul>\n<li><p><code class=\"codespa [...]
- },
- "renderToSVGString": {
- "desc": "<blockquote>\n<p>Since <code class=\"codespan\">5.3.0</code></p>\n</blockquote>\n<pre><code class=\"lang-ts\">(opts?: {\n useViewBox?: boolean\n}) => string\n</code></pre>\n<p>Render to a SVG string. Available when setting <code class=\"codespan\">renderer: 'svg'</code> to use SVG rendering mode.</p>\n<p>Must use this method to render if server-side rendering is enabled with the <code class=\"codespan\">ssr</code> parameter in <code class=\"codespan\">echarts.i [...]
- },
- "dispatchAction": {
- "desc": "<pre><code class=\"lang-ts\">(payload: Object)\n</code></pre>\n<p>Triggers chart action, like chart switch <code class=\"codespan\">legendToggleSelect</code>,zoom data area <code class=\"codespan\">dataZoom</code>, show tooltip <code class=\"codespan\">showTip</code> and so on. See <a href=\"#action\">action</a> and <a href=\"#events\">events</a> for more information.</p>\n<p><code class=\"codespan\">payload</code> parameter can trigger multiple actions through <code class=\ [...]
- },
- "on": {
- "desc": "<pre><code class=\"lang-ts\">(\n eventName: string,\n handler: Function,\n context?: Object\n)\n(\n eventName: string,\n query: string|Object,\n handler: Function,\n context?: Object\n)\n</code></pre>\n<p>Binds event-handling function.</p>\n<p>There are two kinds of events in ECharts, one of which is mouse events, which will be triggered when the mouse clicks certain element in the chart, the other kind will be triggered after <a href=\"#echartsInstance. [...]
- },
- "off": {
- "desc": "<pre><code class=\"lang-ts\">(eventName: string, handler?: Function)\n</code></pre>\n<p>Unbind event-handler function.</p>\n<p><strong>parameter: </strong></p>\n<ul>\n<li><p><code class=\"codespan\">eventName</code></p>\n<p> Event name.</p>\n</li>\n<li><p><code class=\"codespan\">handler</code></p>\n<p> Optional. The function to be unbound could be passed. Otherwise, all event functions of this type will be unbound.</p>\n</li>\n</ul>\n"
- },
- "convertToPixel": {
- "desc": "<pre><code class=\"lang-ts\">(\n // finder is used to indicate in which coordinate system conversion is performed.\n // Generally, index or id or name can be used to specify coordinate system.\n finder: {\n seriesIndex?: number,\n seriesId?: string,\n seriesName?: string,\n geoIndex?: number,\n geoId?: string,\n geoName?: string,\n xAxisIndex?: number,\n xAxisId?: string,\n xAxisName?: string,\n y [...]
- },
- "convertFromPixel": {
- "desc": "<pre><code class=\"lang-ts\">(\n // finder is used to indicate in which coordinate system conversion is performed.\n // Generally, index or id or name can be used to specify coordinate system.\n finder: {\n seriesIndex?: number,\n seriesId?: string,\n seriesName?: string,\n geoIndex?: number,\n geoId?: string,\n geoName?: string,\n xAxisIndex?: number,\n xAxisId?: string,\n xAxisName?: string,\n y [...]
- },
- "containPixel": {
- "desc": "<pre><code class=\"lang-ts\">(\n // finder is used to specify coordinate systems or series on which the judgement performed.\n // Generally, index or id or name can be used to specify coordinate system.\n finder: {\n seriesIndex?: number,\n seriesId?: string,\n seriesName?: string,\n geoIndex?: number,\n geoId?: string,\n geoName?: string,\n xAxisIndex?: number,\n xAxisId?: string,\n xAxisName?: string,\ [...]
- },
- "showLoading": {
- "desc": "<pre><code class=\"lang-ts\">(type?: string, opts?: Object)\n</code></pre>\n<p>Shows loading animation. You can call this interface manually before data is loaded, and call <a href=\"#echartsInstance.hideLoading\">hideLoading</a> to hide loading animation after data is loaded.</p>\n<p><strong>parameter: </strong></p>\n<ul>\n<li><p><code class=\"codespan\">type</code></p>\n<p> Optional; type of loading animation; only <code class=\"codespan\">'default'</code> is supp [...]
- },
- "hideLoading": {
- "desc": "<p>Hides animation loading effect.</p>\n"
- },
- "getDataURL": {
- "desc": "<pre><code class=\"lang-ts\">(opts: {\n // Exporting format, can be png, jpg, svg.\n // NOTE: png, jpg is only available for canvas renderer. svg is only available for svg renderer.\n type?: string,\n // Resolution ratio of exporting image, 1 by default.\n pixelRatio?: number,\n // Background color of exporting image, use backgroundColor in option by default.\n backgroundColor?: string,\n // Excluded components list. e.g. ['toolbox']\n excl [...]
- },
- "getConnectedDataURL": {
- "desc": "<pre><code class=\"lang-ts\">(opts: {\n // Exporting format, can be either png, or jpeg\n type?: string,\n // Resolution ratio of exporting image, 1 by default.\n pixelRatio?: number,\n // Background color of exporting image, use backgroundColor in option by default.\n backgroundColor?: string,\n // Excluded components list. e.g. ['toolbox']\n excludeComponents?: Array.<string>\n}) => string\n</code></pre>\n<p>Exports connected chart [...]
- },
- "appendData": {
- "desc": "<pre><code class=\"lang-ts\">(opts: {\n // Specify which series the data will be appended to.\n seriesIndex?: string,\n // The data to be appended.\n data?: Array|TypedArray\n}) => string\n</code></pre>\n<p>The method is used in rendering millions of data (e.g. rendering geo data). In these scenarios, the entire size of data is probably up to 10 or 100 MB, even using binary format. So chunked load data and rendering is required. When using <code class=\"codesp [...]
- },
- "clear": {
- "desc": "<p>Clears current instance; removes all components and series in current instance.</p>\n"
- },
- "isDisposed": {
- "desc": "<pre><code class=\"lang-ts\">() => boolean\n</code></pre>\n<p>Returns whether current instance has been disposed.</p>\n"
- },
- "dispose": {
- "desc": "<p>Disposes instance. Once disposed, the instance can not be used again.</p>\n"
- }
-}
\ No newline at end of file
+window.__EC_DOC_api_echartsInstance = {"group":{"desc":"<p>Group name to be used in chart <a href=\"#echarts.connect\">connection</a>.</p>\n"},"setOption":{"desc":"<pre><code class=\"lang-ts\">(option: Object, notMerge?: boolean, lazyUpdate?: boolean)\nor\n(option: Object, opts?: {\n notMerge?: boolean;\n replaceMerge?: string | string[];\n lazyUpdate?: boolean;\n})\n</code></pre>\n<p>Configuration item, data, universal interface, all parameters and data can all be modified thro [...]
\ No newline at end of file
diff --git a/en/documents/api-parts/api.echartsInstance.json b/en/documents/api-parts/api.echartsInstance.json
index 744c1430..532d2e8e 100644
--- a/en/documents/api-parts/api.echartsInstance.json
+++ b/en/documents/api-parts/api.echartsInstance.json
@@ -1,68 +1 @@
-{
- "group": {
- "desc": "<p>Group name to be used in chart <a href=\"#echarts.connect\">connection</a>.</p>\n"
- },
- "setOption": {
- "desc": "<pre><code class=\"lang-ts\">(option: Object, notMerge?: boolean, lazyUpdate?: boolean)\nor\n(option: Object, opts?: {\n notMerge?: boolean;\n replaceMerge?: string | string[];\n lazyUpdate?: boolean;\n})\n</code></pre>\n<p>Configuration item, data, universal interface, all parameters and data can all be modified through <code class=\"codespan\">setOption</code>. ECharts will merge new parameters and data, and then refresh chart. If <a href=\"option.html#animation\" [...]
- },
- "getWidth": {
- "desc": "<pre><code class=\"lang-ts\">() => number\n</code></pre>\n<p>Gets width of ECharts instance container.</p>\n"
- },
- "getHeight": {
- "desc": "<pre><code class=\"lang-ts\">() => number\n</code></pre>\n<p>Gets height of ECharts instance container.</p>\n"
- },
- "getDom": {
- "desc": "<pre><code class=\"lang-ts\">() => HTMLCanvasElement|HTMLDivElement\n</code></pre>\n<p>Gets DOM element of ECharts instance container.</p>\n"
- },
- "getOption": {
- "desc": "<pre><code class=\"lang-ts\">() => Object\n</code></pre>\n<p>Gets <code class=\"codespan\">option</code> object maintained in current instance, which contains configuration item and data merged from previous <code class=\"codespan\">setOption</code> operations by users, along with user interaction states. For example, switching of legend, zooming area of data zoom, and so on. Therefore, a new instance that is exactly the same can be recovered from this option.</p>\n<p><st [...]
- },
- "resize": {
- "desc": "<pre><code class=\"lang-ts\">(opts?: {\n width?: number|string,\n height?: number|string,\n silent?: boolean,\n animation?: {\n duration?: number\n easing?: string\n }\n}) => ECharts\n</code></pre>\n<p>Resizes chart, which should be called manually when container size changes.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code class=\"codespan\">opts</code></p>\n<p> Optional. Which may contain:</p>\n<ul>\n<li><p><code class=\"codespa [...]
- },
- "renderToSVGString": {
- "desc": "<blockquote>\n<p>Since <code class=\"codespan\">5.3.0</code></p>\n</blockquote>\n<pre><code class=\"lang-ts\">(opts?: {\n useViewBox?: boolean\n}) => string\n</code></pre>\n<p>Render to a SVG string. Available when setting <code class=\"codespan\">renderer: 'svg'</code> to use SVG rendering mode.</p>\n<p>Must use this method to render if server-side rendering is enabled with the <code class=\"codespan\">ssr</code> parameter in <code class=\"codespan\">echarts.i [...]
- },
- "dispatchAction": {
- "desc": "<pre><code class=\"lang-ts\">(payload: Object)\n</code></pre>\n<p>Triggers chart action, like chart switch <code class=\"codespan\">legendToggleSelect</code>,zoom data area <code class=\"codespan\">dataZoom</code>, show tooltip <code class=\"codespan\">showTip</code> and so on. See <a href=\"#action\">action</a> and <a href=\"#events\">events</a> for more information.</p>\n<p><code class=\"codespan\">payload</code> parameter can trigger multiple actions through <code class=\ [...]
- },
- "on": {
- "desc": "<pre><code class=\"lang-ts\">(\n eventName: string,\n handler: Function,\n context?: Object\n)\n(\n eventName: string,\n query: string|Object,\n handler: Function,\n context?: Object\n)\n</code></pre>\n<p>Binds event-handling function.</p>\n<p>There are two kinds of events in ECharts, one of which is mouse events, which will be triggered when the mouse clicks certain element in the chart, the other kind will be triggered after <a href=\"#echartsInstance. [...]
- },
- "off": {
- "desc": "<pre><code class=\"lang-ts\">(eventName: string, handler?: Function)\n</code></pre>\n<p>Unbind event-handler function.</p>\n<p><strong>parameter: </strong></p>\n<ul>\n<li><p><code class=\"codespan\">eventName</code></p>\n<p> Event name.</p>\n</li>\n<li><p><code class=\"codespan\">handler</code></p>\n<p> Optional. The function to be unbound could be passed. Otherwise, all event functions of this type will be unbound.</p>\n</li>\n</ul>\n"
- },
- "convertToPixel": {
- "desc": "<pre><code class=\"lang-ts\">(\n // finder is used to indicate in which coordinate system conversion is performed.\n // Generally, index or id or name can be used to specify coordinate system.\n finder: {\n seriesIndex?: number,\n seriesId?: string,\n seriesName?: string,\n geoIndex?: number,\n geoId?: string,\n geoName?: string,\n xAxisIndex?: number,\n xAxisId?: string,\n xAxisName?: string,\n y [...]
- },
- "convertFromPixel": {
- "desc": "<pre><code class=\"lang-ts\">(\n // finder is used to indicate in which coordinate system conversion is performed.\n // Generally, index or id or name can be used to specify coordinate system.\n finder: {\n seriesIndex?: number,\n seriesId?: string,\n seriesName?: string,\n geoIndex?: number,\n geoId?: string,\n geoName?: string,\n xAxisIndex?: number,\n xAxisId?: string,\n xAxisName?: string,\n y [...]
- },
- "containPixel": {
- "desc": "<pre><code class=\"lang-ts\">(\n // finder is used to specify coordinate systems or series on which the judgement performed.\n // Generally, index or id or name can be used to specify coordinate system.\n finder: {\n seriesIndex?: number,\n seriesId?: string,\n seriesName?: string,\n geoIndex?: number,\n geoId?: string,\n geoName?: string,\n xAxisIndex?: number,\n xAxisId?: string,\n xAxisName?: string,\ [...]
- },
- "showLoading": {
- "desc": "<pre><code class=\"lang-ts\">(type?: string, opts?: Object)\n</code></pre>\n<p>Shows loading animation. You can call this interface manually before data is loaded, and call <a href=\"#echartsInstance.hideLoading\">hideLoading</a> to hide loading animation after data is loaded.</p>\n<p><strong>parameter: </strong></p>\n<ul>\n<li><p><code class=\"codespan\">type</code></p>\n<p> Optional; type of loading animation; only <code class=\"codespan\">'default'</code> is supp [...]
- },
- "hideLoading": {
- "desc": "<p>Hides animation loading effect.</p>\n"
- },
- "getDataURL": {
- "desc": "<pre><code class=\"lang-ts\">(opts: {\n // Exporting format, can be png, jpg, svg.\n // NOTE: png, jpg is only available for canvas renderer. svg is only available for svg renderer.\n type?: string,\n // Resolution ratio of exporting image, 1 by default.\n pixelRatio?: number,\n // Background color of exporting image, use backgroundColor in option by default.\n backgroundColor?: string,\n // Excluded components list. e.g. ['toolbox']\n excl [...]
- },
- "getConnectedDataURL": {
- "desc": "<pre><code class=\"lang-ts\">(opts: {\n // Exporting format, can be either png, or jpeg\n type?: string,\n // Resolution ratio of exporting image, 1 by default.\n pixelRatio?: number,\n // Background color of exporting image, use backgroundColor in option by default.\n backgroundColor?: string,\n // Excluded components list. e.g. ['toolbox']\n excludeComponents?: Array.<string>\n}) => string\n</code></pre>\n<p>Exports connected chart [...]
- },
- "appendData": {
- "desc": "<pre><code class=\"lang-ts\">(opts: {\n // Specify which series the data will be appended to.\n seriesIndex?: string,\n // The data to be appended.\n data?: Array|TypedArray\n}) => string\n</code></pre>\n<p>The method is used in rendering millions of data (e.g. rendering geo data). In these scenarios, the entire size of data is probably up to 10 or 100 MB, even using binary format. So chunked load data and rendering is required. When using <code class=\"codesp [...]
- },
- "clear": {
- "desc": "<p>Clears current instance; removes all components and series in current instance.</p>\n"
- },
- "isDisposed": {
- "desc": "<pre><code class=\"lang-ts\">() => boolean\n</code></pre>\n<p>Returns whether current instance has been disposed.</p>\n"
- },
- "dispose": {
- "desc": "<p>Disposes instance. Once disposed, the instance can not be used again.</p>\n"
- }
-}
\ No newline at end of file
+{"group":{"desc":"<p>Group name to be used in chart <a href=\"#echarts.connect\">connection</a>.</p>\n"},"setOption":{"desc":"<pre><code class=\"lang-ts\">(option: Object, notMerge?: boolean, lazyUpdate?: boolean)\nor\n(option: Object, opts?: {\n notMerge?: boolean;\n replaceMerge?: string | string[];\n lazyUpdate?: boolean;\n})\n</code></pre>\n<p>Configuration item, data, universal interface, all parameters and data can all be modified through <code class=\"codespan\">setOption [...]
\ No newline at end of file
diff --git a/en/documents/api-parts/api.events.js b/en/documents/api-parts/api.events.js
index a189c735..e070385d 100644
--- a/en/documents/api-parts/api.events.js
+++ b/en/documents/api-parts/api.events.js
@@ -1,92 +1 @@
-window.__EC_DOC_api_events = {
- "Mouse events": {
- "desc": "<p>Event parameters of mouse events are attributes of event object. The following shows basic parameters for chart click events. Other charts, like pie charts, may have additional parameters like <code class=\"codespan\">percent</code>. Please refer to callback <code class=\"codespan\">params</code> of each chart's label formatter.</p>\n<pre><code class=\"lang-ts\">{\n // type of the component to which the clicked glyph belongs\n // i.e., 'series', 'mar [...]
- },
- "highlight": {
- "desc": "<p><strong>ACTION:</strong> <a href=\"#action.highlight\">highlight</a></p>\n<p>Event of data highlight.</p>\n"
- },
- "downplay": {
- "desc": "<p><strong>ACTION:</strong> <a href=\"#action.downplay\">downplay</a></p>\n<p>Event of data downplay.</p>\n"
- },
- "selectchanged": {
- "desc": "<p><strong>ACTION:</strong> <a href=\"#action.toggleSelected\">toggleSelected</a>, <a href=\"#action.select\">select</a>, <a href=\"#action.unselect\">unselect</a></p>\n<p>Event emitted when data selection is changed.</p>\n<pre><code class=\"lang-ts\">{\n type: 'selectchanged',\n fromAction: 'select' | 'toggleSelected' | 'unselect',\n // Grouped by series.\n selected: ({\n dataIndex: number[], seriesIndex: number\n })[]\n [...]
- },
- "legendselectchanged": {
- "desc": "<p><strong>ACTION:</strong> <a href=\"#action.legend.legendToggleSelect\">legendToggleSelect</a>\nEvent emitted after legend selecting state changes.</p>\n<p><strong>Attention: </strong> This event will be emitted when users toggle legend button in legend component.</p>\n<pre><code class=\"lang-ts\">{\n type: 'legendselectchanged',\n // change legend name\n name: string\n // table of all legend selecting states\n selected: {\n [name: string]: bo [...]
- },
- "legendselected": {
- "desc": "<p><strong>ACTION:</strong> <a href=\"#action.legend.legendSelect\">legendSelect</a>\nEvent emitted after legend is selected.</p>\n<pre><code class=\"lang-ts\">{\n type: 'legendselected',\n // name of selected legend\n name: string\n // table of all legend selecting states\n selected: {\n [name: string]: boolean\n }\n}\n</code></pre>\n<p><strong>Attention: </strong> In ECharts 2.x, event related to user switching lengend is now changed from [...]
- },
- "legendunselected": {
- "desc": "<p><strong>ACTION:</strong> <a href=\"#action.legend.legendUnSelect\">legendUnSelect</a>\nEvent emitted after unselecting legend.</p>\n<pre><code class=\"lang-ts\">{\n type: 'legendunselected',\n // name of unselected legend\n name: string\n // table of all legend selecting states\n selected: {\n [name: string]: boolean\n }\n}\n</code></pre>\n"
- },
- "legendselectall": {
- "desc": "<p><strong>ACTION:</strong> <a href=\"#action.legend.legendAllSelect\">legendAllSelect</a>\nEvent emitted after all legends are selected.</p>\n<pre><code class=\"lang-ts\">{\n type: 'legendselectall',\n // table of all legend selecting states\n selected: {\n [name: string]: boolean\n }\n}\n</code></pre>\n"
- },
- "legendinverseselect": {
- "desc": "<p><strong>ACTION:</strong> <a href=\"#action.legend.legendInverseSelect\">legendInverseSelect</a>\nEvent emitted after inversing all legends.</p>\n<pre><code class=\"lang-ts\">{\n type: 'legendinverseselect',\n // table of all legend selecting states\n selected: {\n [name: string]: boolean\n }\n}\n</code></pre>\n"
- },
- "legendscroll": {
- "desc": "<p><strong>ACTION:</strong> <a href=\"#action.legend.legendScroll\">legendscroll</a>\nEvent when trigger legend scroll.</p>\n<pre><code class=\"lang-ts\">{\n type: 'legendscroll',\n scrollDataIndex: number\n legendId: string\n}\n</code></pre>\n"
- },
- "datazoom": {
- "desc": "<p><strong>ACTION:</strong> <a href=\"#action.dataZoom.dataZoom\">dataZoom</a></p>\n<p>Event emitted after zooming data area.</p>\n<pre><code class=\"lang-ts\">{\n type: 'datazoom',\n // percentage of zoom start position, 0 - 100\n start: number\n // percentage of zoom finish position, 0 - 100\n end: number\n // data value of zoom start position; only exists in zoom event of triggered by toolbar\n startValue?: number\n // data value of zoom fi [...]
- },
- "datarangeselected": {
- "desc": "<p><strong>ACTION:</strong> <a href=\"#action.dataRange.selectDataRange\">selectDataRange</a>\nEvent emitted after range is changed in visualMap.</p>\n<pre><code class=\"lang-ts\">{\n type: 'datarangeselected',\n // continuous visualMap is different from discrete one\n // continuous visualMap is an array representing range of data values.\n // discrete visualMap is an object, whose key is category or piece index; value is `true` or `false`\n selected: [...]
- },
- "graphroam": {
- "desc": "<p>Event emitted after <a href=\"option.html#series-graph\" target=\"_blank\">series-graph</a> is roamed.</p>\n<pre><code class=\"lang-ts\">{\n type: 'graphroam',\n seriesId: string,\n zoom: number, // zoom ratio of roaming once\n originX: number,\n originY: number\n}\n</code></pre>\n"
- },
- "georoam": {
- "desc": "<p>Event emitted after <a href=\"option.html#geo\" target=\"_blank\">geo</a> is roamed.</p>\n<pre><code class=\"lang-ts\">{\n type: 'georoam',\n componentType: 'geo' | 'series',\n seriesId: string,\n zoom: number, // zoom ratio of roaming once\n originX: number,\n originY: number\n}\n</code></pre>\n"
- },
- "treeroam": {
- "desc": "<p>Event emitted after <a href=\"option.html#series-tree\" target=\"_blank\">series-tree</a> is roamed.</p>\n<p><code class=\"codespan\">treeroam</code> events include two types. One is triggered by panning and the parameters are:</p>\n<pre><code class=\"lang-ts\">{\n type: 'treeroam',\n seriesId: string,\n dx: number,\n dy: number\n}\n</code></pre>\n<p>The other type is triggered by zooming and the parameters are:</p>\n<pre><code class=\"lang-ts\">{\n [...]
- },
- "timelinechanged": {
- "desc": "<p><strong>ACTION:</strong> <a href=\"#action.timeline.timelineChange\">timelineChange</a>\nEvent emitted after time point in timeline is changed.</p>\n<pre><code class=\"lang-ts\">{\n type: 'timelinechanged',\n // index of time point\n currentIndex: number\n}\n</code></pre>\n"
- },
- "timelineplaychanged": {
- "desc": "<p><strong>ACTION:</strong> <a href=\"#action.timeline.timelinePlayChange\">timelinePlayChange</a>\nSwitching event of play state in timeline.</p>\n<pre><code class=\"lang-ts\">{\n type: 'timelineplaychanged',\n // play state, true for auto play\n playState: boolean\n}\n</code></pre>\n"
- },
- "restore": {
- "desc": "<p><strong>ACTION:</strong> <a href=\"#action.toolbox.restore\">restore</a>\nResets option event.</p>\n<pre><code class=\"lang-ts\">{\n type: 'restore'\n}\n</code></pre>\n"
- },
- "dataviewchanged": {
- "desc": "<p>Changing event of <a href=\"option.html#toolbox.feature.dataView\" target=\"_blank\">data view tool in toolbox</a>.</p>\n<pre><code class=\"lang-ts\">{\n type: 'dataviewchanged'\n}\n</code></pre>\n"
- },
- "magictypechanged": {
- "desc": "<p>Switching event of <a href=\"option.html#toolbox.feature.magicType\" target=\"_blank\">magic type tool in toolbox</a>.</p>\n<pre><code class=\"lang-ts\">{\n type: 'magictypechanged',\n // click to change current type; same as type attribute in echarts 2.x\n currentType: string\n}\n</code></pre>\n"
- },
- "geoselectchanged": {
- "desc": "<p><strong>ACTION:</strong> <a href=\"#action.geo.geoToggleSelect\">geoToggleSelect</a></p>\n<p>Event emitted after selecting state changes.</p>\n<p>It will be triggered when user clicks to select.</p>\n<pre><code class=\"lang-ts\">{\n type: 'geoselectchanged',\n // series ID, can be passed in option\n seriesId: string\n // data name\n name: name,\n // list for each geo component.\n // allSelected is supported since v5.1.0\n allSelected: ({\n [...]
- },
- "geoselected": {
- "desc": "<p><strong>ACTION:</strong> <a href=\"#action.geo.geoSelect\">geoSelect</a></p>\n<p>Event after selecting.</p>\n<p>Use <code class=\"codespan\">dispatchAction</code> can trigger this event, but user clicking this event won't trigger this (User clicking event please use <a href=\"#events.geoselectchanged\">geoselectchanged</a>).</p>\n<pre><code class=\"lang-ts\">{\n type: 'geoselected',\n // series ID, can incoming in option\n seriesId: string\n // dat [...]
- },
- "geounselected": {
- "desc": "<p><strong>ACTION:</strong> <a href=\"#action.geo.geoUnSelect\">geoUnSelect</a></p>\n<p> cancels selected event.</p>\n<p>Use <code class=\"codespan\">dispatchAction</code> will trigger this event, but user clicking won't trigger it. (For user clicking event, please refer to <a href=\"#events.geoselectchanged\">geoselectchanged</a>).</p>\n<pre><code class=\"lang-ts\">{\n type: 'geounselected',\n // series ID, can incoming in option\n seriesId: string\n [...]
- },
- "axisareaselected": {
- "desc": "<p>Selecting event of range of <a href=\"option.html#parallelAxis\" target=\"_blank\">parallel axis</a>.</p>\n<p>When selecting axis range, the following method can be used to get data indices of currently highlighted lines, which is the list of indices in <code class=\"codespan\">data</code> of <code class=\"codespan\">series</code>.</p>\n<pre><code class=\"lang-javascript\">chart.on('axisareaselected', function () {\n var series1 = chart.getModel().getSeries()[0 [...]
- },
- "brush": {
- "desc": "<p>Event triggered after action <a href=\"#action.brush.brush\">brush</a> dispatched.</p>\n"
- },
- "brushEnd": {
- "desc": "<blockquote>\n<p>Since <code class=\"codespan\">v4.5.0</code></p>\n</blockquote>\n<p>Event triggered after action <a href=\"#action.brush.brushEnd\">brushEnd</a> dispatched.</p>\n"
- },
- "brushselected": {
- "desc": "<p>Notice what are selected.</p>\n<p>See <a href=\"option.html#brush\" target=\"_blank\">brush component</a>.</p>\n<p>This event will be triggered when <code class=\"codespan\">dispatchAction</code> called, or use do brush behavior.\nBut this event will not be triggered in <code class=\"codespan\">setOption</code>.</p>\n<p>Properties in this event.</p>\n<pre><code class=\"lang-javascript\">{\n type: 'brushselected',\n batch: [\n {\n // Id of t [...]
- },
- "globalcursortaken": {
- "desc": "<p>See <a href=\"#action.brush.takeGlobalCursor\">takeGlobalCursor</a>.</p>\n"
- },
- "rendered": {
- "desc": "<p>Trigger when a frame rendered. Notice that the <code class=\"codespan\">rendered</code> event does not indicate that the animation finished (see <a href=\"option.html#animation\" target=\"_blank\">animation</a> and relevant options) or progressive rendering finished (see <a href=\"option.html#series-scatter.progressive\" target=\"_blank\">progressive</a> and relevant options).</p>\n<p>For example:</p>\n<pre><code class=\"lang-ts\">var snapshotImage = new Image();\ndocumen [...]
- },
- "finished": {
- "desc": "<p>Triggered when render finished, that is, when animation finished (see <a href=\"option.html#animation\" target=\"_blank\">animation</a> and relevant options) and progressive rendering finished (see <a href=\"option.html#series-scatter.progressive\" target=\"_blank\">progressive</a> and relevant options).</p>\n<pre><code class=\"lang-ts\">var snapshotImage = new Image();\ndocument.body.append(snapshotImage);\nchart.on('finished', function () {\n snapshotImage.sr [...]
- }
-}
\ No newline at end of file
+window.__EC_DOC_api_events = {"Mouse events":{"desc":"<p>Event parameters of mouse events are attributes of event object. The following shows basic parameters for chart click events. Other charts, like pie charts, may have additional parameters like <code class=\"codespan\">percent</code>. Please refer to callback <code class=\"codespan\">params</code> of each chart's label formatter.</p>\n<pre><code class=\"lang-ts\">{\n // type of the component to which the clicked glyph belongs [...]
\ No newline at end of file
diff --git a/en/documents/api-parts/api.events.json b/en/documents/api-parts/api.events.json
index e6233228..e451c30c 100644
--- a/en/documents/api-parts/api.events.json
+++ b/en/documents/api-parts/api.events.json
@@ -1,92 +1 @@
-{
- "Mouse events": {
- "desc": "<p>Event parameters of mouse events are attributes of event object. The following shows basic parameters for chart click events. Other charts, like pie charts, may have additional parameters like <code class=\"codespan\">percent</code>. Please refer to callback <code class=\"codespan\">params</code> of each chart's label formatter.</p>\n<pre><code class=\"lang-ts\">{\n // type of the component to which the clicked glyph belongs\n // i.e., 'series', 'mar [...]
- },
- "highlight": {
- "desc": "<p><strong>ACTION:</strong> <a href=\"#action.highlight\">highlight</a></p>\n<p>Event of data highlight.</p>\n"
- },
- "downplay": {
- "desc": "<p><strong>ACTION:</strong> <a href=\"#action.downplay\">downplay</a></p>\n<p>Event of data downplay.</p>\n"
- },
- "selectchanged": {
- "desc": "<p><strong>ACTION:</strong> <a href=\"#action.toggleSelected\">toggleSelected</a>, <a href=\"#action.select\">select</a>, <a href=\"#action.unselect\">unselect</a></p>\n<p>Event emitted when data selection is changed.</p>\n<pre><code class=\"lang-ts\">{\n type: 'selectchanged',\n fromAction: 'select' | 'toggleSelected' | 'unselect',\n // Grouped by series.\n selected: ({\n dataIndex: number[], seriesIndex: number\n })[]\n [...]
- },
- "legendselectchanged": {
- "desc": "<p><strong>ACTION:</strong> <a href=\"#action.legend.legendToggleSelect\">legendToggleSelect</a>\nEvent emitted after legend selecting state changes.</p>\n<p><strong>Attention: </strong> This event will be emitted when users toggle legend button in legend component.</p>\n<pre><code class=\"lang-ts\">{\n type: 'legendselectchanged',\n // change legend name\n name: string\n // table of all legend selecting states\n selected: {\n [name: string]: bo [...]
- },
- "legendselected": {
- "desc": "<p><strong>ACTION:</strong> <a href=\"#action.legend.legendSelect\">legendSelect</a>\nEvent emitted after legend is selected.</p>\n<pre><code class=\"lang-ts\">{\n type: 'legendselected',\n // name of selected legend\n name: string\n // table of all legend selecting states\n selected: {\n [name: string]: boolean\n }\n}\n</code></pre>\n<p><strong>Attention: </strong> In ECharts 2.x, event related to user switching lengend is now changed from [...]
- },
- "legendunselected": {
- "desc": "<p><strong>ACTION:</strong> <a href=\"#action.legend.legendUnSelect\">legendUnSelect</a>\nEvent emitted after unselecting legend.</p>\n<pre><code class=\"lang-ts\">{\n type: 'legendunselected',\n // name of unselected legend\n name: string\n // table of all legend selecting states\n selected: {\n [name: string]: boolean\n }\n}\n</code></pre>\n"
- },
- "legendselectall": {
- "desc": "<p><strong>ACTION:</strong> <a href=\"#action.legend.legendAllSelect\">legendAllSelect</a>\nEvent emitted after all legends are selected.</p>\n<pre><code class=\"lang-ts\">{\n type: 'legendselectall',\n // table of all legend selecting states\n selected: {\n [name: string]: boolean\n }\n}\n</code></pre>\n"
- },
- "legendinverseselect": {
- "desc": "<p><strong>ACTION:</strong> <a href=\"#action.legend.legendInverseSelect\">legendInverseSelect</a>\nEvent emitted after inversing all legends.</p>\n<pre><code class=\"lang-ts\">{\n type: 'legendinverseselect',\n // table of all legend selecting states\n selected: {\n [name: string]: boolean\n }\n}\n</code></pre>\n"
- },
- "legendscroll": {
- "desc": "<p><strong>ACTION:</strong> <a href=\"#action.legend.legendScroll\">legendscroll</a>\nEvent when trigger legend scroll.</p>\n<pre><code class=\"lang-ts\">{\n type: 'legendscroll',\n scrollDataIndex: number\n legendId: string\n}\n</code></pre>\n"
- },
- "datazoom": {
- "desc": "<p><strong>ACTION:</strong> <a href=\"#action.dataZoom.dataZoom\">dataZoom</a></p>\n<p>Event emitted after zooming data area.</p>\n<pre><code class=\"lang-ts\">{\n type: 'datazoom',\n // percentage of zoom start position, 0 - 100\n start: number\n // percentage of zoom finish position, 0 - 100\n end: number\n // data value of zoom start position; only exists in zoom event of triggered by toolbar\n startValue?: number\n // data value of zoom fi [...]
- },
- "datarangeselected": {
- "desc": "<p><strong>ACTION:</strong> <a href=\"#action.dataRange.selectDataRange\">selectDataRange</a>\nEvent emitted after range is changed in visualMap.</p>\n<pre><code class=\"lang-ts\">{\n type: 'datarangeselected',\n // continuous visualMap is different from discrete one\n // continuous visualMap is an array representing range of data values.\n // discrete visualMap is an object, whose key is category or piece index; value is `true` or `false`\n selected: [...]
- },
- "graphroam": {
- "desc": "<p>Event emitted after <a href=\"option.html#series-graph\" target=\"_blank\">series-graph</a> is roamed.</p>\n<pre><code class=\"lang-ts\">{\n type: 'graphroam',\n seriesId: string,\n zoom: number, // zoom ratio of roaming once\n originX: number,\n originY: number\n}\n</code></pre>\n"
- },
- "georoam": {
- "desc": "<p>Event emitted after <a href=\"option.html#geo\" target=\"_blank\">geo</a> is roamed.</p>\n<pre><code class=\"lang-ts\">{\n type: 'georoam',\n componentType: 'geo' | 'series',\n seriesId: string,\n zoom: number, // zoom ratio of roaming once\n originX: number,\n originY: number\n}\n</code></pre>\n"
- },
- "treeroam": {
- "desc": "<p>Event emitted after <a href=\"option.html#series-tree\" target=\"_blank\">series-tree</a> is roamed.</p>\n<p><code class=\"codespan\">treeroam</code> events include two types. One is triggered by panning and the parameters are:</p>\n<pre><code class=\"lang-ts\">{\n type: 'treeroam',\n seriesId: string,\n dx: number,\n dy: number\n}\n</code></pre>\n<p>The other type is triggered by zooming and the parameters are:</p>\n<pre><code class=\"lang-ts\">{\n [...]
- },
- "timelinechanged": {
- "desc": "<p><strong>ACTION:</strong> <a href=\"#action.timeline.timelineChange\">timelineChange</a>\nEvent emitted after time point in timeline is changed.</p>\n<pre><code class=\"lang-ts\">{\n type: 'timelinechanged',\n // index of time point\n currentIndex: number\n}\n</code></pre>\n"
- },
- "timelineplaychanged": {
- "desc": "<p><strong>ACTION:</strong> <a href=\"#action.timeline.timelinePlayChange\">timelinePlayChange</a>\nSwitching event of play state in timeline.</p>\n<pre><code class=\"lang-ts\">{\n type: 'timelineplaychanged',\n // play state, true for auto play\n playState: boolean\n}\n</code></pre>\n"
- },
- "restore": {
- "desc": "<p><strong>ACTION:</strong> <a href=\"#action.toolbox.restore\">restore</a>\nResets option event.</p>\n<pre><code class=\"lang-ts\">{\n type: 'restore'\n}\n</code></pre>\n"
- },
- "dataviewchanged": {
- "desc": "<p>Changing event of <a href=\"option.html#toolbox.feature.dataView\" target=\"_blank\">data view tool in toolbox</a>.</p>\n<pre><code class=\"lang-ts\">{\n type: 'dataviewchanged'\n}\n</code></pre>\n"
- },
- "magictypechanged": {
- "desc": "<p>Switching event of <a href=\"option.html#toolbox.feature.magicType\" target=\"_blank\">magic type tool in toolbox</a>.</p>\n<pre><code class=\"lang-ts\">{\n type: 'magictypechanged',\n // click to change current type; same as type attribute in echarts 2.x\n currentType: string\n}\n</code></pre>\n"
- },
- "geoselectchanged": {
- "desc": "<p><strong>ACTION:</strong> <a href=\"#action.geo.geoToggleSelect\">geoToggleSelect</a></p>\n<p>Event emitted after selecting state changes.</p>\n<p>It will be triggered when user clicks to select.</p>\n<pre><code class=\"lang-ts\">{\n type: 'geoselectchanged',\n // series ID, can be passed in option\n seriesId: string\n // data name\n name: name,\n // list for each geo component.\n // allSelected is supported since v5.1.0\n allSelected: ({\n [...]
- },
- "geoselected": {
- "desc": "<p><strong>ACTION:</strong> <a href=\"#action.geo.geoSelect\">geoSelect</a></p>\n<p>Event after selecting.</p>\n<p>Use <code class=\"codespan\">dispatchAction</code> can trigger this event, but user clicking this event won't trigger this (User clicking event please use <a href=\"#events.geoselectchanged\">geoselectchanged</a>).</p>\n<pre><code class=\"lang-ts\">{\n type: 'geoselected',\n // series ID, can incoming in option\n seriesId: string\n // dat [...]
- },
- "geounselected": {
- "desc": "<p><strong>ACTION:</strong> <a href=\"#action.geo.geoUnSelect\">geoUnSelect</a></p>\n<p> cancels selected event.</p>\n<p>Use <code class=\"codespan\">dispatchAction</code> will trigger this event, but user clicking won't trigger it. (For user clicking event, please refer to <a href=\"#events.geoselectchanged\">geoselectchanged</a>).</p>\n<pre><code class=\"lang-ts\">{\n type: 'geounselected',\n // series ID, can incoming in option\n seriesId: string\n [...]
- },
- "axisareaselected": {
- "desc": "<p>Selecting event of range of <a href=\"option.html#parallelAxis\" target=\"_blank\">parallel axis</a>.</p>\n<p>When selecting axis range, the following method can be used to get data indices of currently highlighted lines, which is the list of indices in <code class=\"codespan\">data</code> of <code class=\"codespan\">series</code>.</p>\n<pre><code class=\"lang-javascript\">chart.on('axisareaselected', function () {\n var series1 = chart.getModel().getSeries()[0 [...]
- },
- "brush": {
- "desc": "<p>Event triggered after action <a href=\"#action.brush.brush\">brush</a> dispatched.</p>\n"
- },
- "brushEnd": {
- "desc": "<blockquote>\n<p>Since <code class=\"codespan\">v4.5.0</code></p>\n</blockquote>\n<p>Event triggered after action <a href=\"#action.brush.brushEnd\">brushEnd</a> dispatched.</p>\n"
- },
- "brushselected": {
- "desc": "<p>Notice what are selected.</p>\n<p>See <a href=\"option.html#brush\" target=\"_blank\">brush component</a>.</p>\n<p>This event will be triggered when <code class=\"codespan\">dispatchAction</code> called, or use do brush behavior.\nBut this event will not be triggered in <code class=\"codespan\">setOption</code>.</p>\n<p>Properties in this event.</p>\n<pre><code class=\"lang-javascript\">{\n type: 'brushselected',\n batch: [\n {\n // Id of t [...]
- },
- "globalcursortaken": {
- "desc": "<p>See <a href=\"#action.brush.takeGlobalCursor\">takeGlobalCursor</a>.</p>\n"
- },
- "rendered": {
- "desc": "<p>Trigger when a frame rendered. Notice that the <code class=\"codespan\">rendered</code> event does not indicate that the animation finished (see <a href=\"option.html#animation\" target=\"_blank\">animation</a> and relevant options) or progressive rendering finished (see <a href=\"option.html#series-scatter.progressive\" target=\"_blank\">progressive</a> and relevant options).</p>\n<p>For example:</p>\n<pre><code class=\"lang-ts\">var snapshotImage = new Image();\ndocumen [...]
- },
- "finished": {
- "desc": "<p>Triggered when render finished, that is, when animation finished (see <a href=\"option.html#animation\" target=\"_blank\">animation</a> and relevant options) and progressive rendering finished (see <a href=\"option.html#series-scatter.progressive\" target=\"_blank\">progressive</a> and relevant options).</p>\n<pre><code class=\"lang-ts\">var snapshotImage = new Image();\ndocument.body.append(snapshotImage);\nchart.on('finished', function () {\n snapshotImage.sr [...]
- }
-}
\ No newline at end of file
+{"Mouse events":{"desc":"<p>Event parameters of mouse events are attributes of event object. The following shows basic parameters for chart click events. Other charts, like pie charts, may have additional parameters like <code class=\"codespan\">percent</code>. Please refer to callback <code class=\"codespan\">params</code> of each chart's label formatter.</p>\n<pre><code class=\"lang-ts\">{\n // type of the component to which the clicked glyph belongs\n // i.e., 'series [...]
\ No newline at end of file
diff --git a/en/documents/api-parts/api.js b/en/documents/api-parts/api.js
index 47d47c4c..c2b4c3e6 100644
--- a/en/documents/api-parts/api.js
+++ b/en/documents/api-parts/api.js
@@ -1,14 +1 @@
-window.__EC_DOC_api = {
- "echarts": {
- "desc": "<p>Global echarts object, which can be accessed after including <code class=\"codespan\">echarts.js</code> in script tag or through <code class=\"codespan\">require('echarts')</code> in AMD environment.</p>\n"
- },
- "echartsInstance": {
- "desc": "<p>Instance created through <a href=\"#echarts.init\">echarts.init</a>.</p>\n"
- },
- "action": {
- "desc": "<p>Chart actions supported by ECharts are triggered through <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a>.</p>\n<p><strong>Attention: </strong> The <code class=\"codespan\">?:</code> note in the code shows that this attribute is optional. <em>EVENT:</em> stands for the event that triggers action.</p>\n"
- },
- "events": {
- "desc": "<p>Event-handling functions are mainly added through <a href=\"#echartsInstance.on\">on</a> in ECharts. This document describes all event list in ECharts.</p>\n<p>Event in ECharts can be divided in two kinds. One is mouse event, which is triggered when mouse clicks on certain component, the other is triggered after dispatches <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a>.</p>\n<p><strong>For example:</strong></p>\n<pre><code class=\"lang-ts\">myChart.on(' [...]
- }
-}
\ No newline at end of file
+window.__EC_DOC_api = {"echarts":{"desc":"<p>Global echarts object, which can be accessed after including <code class=\"codespan\">echarts.js</code> in script tag or through <code class=\"codespan\">require('echarts')</code> in AMD environment.</p>\n"},"echartsInstance":{"desc":"<p>Instance created through <a href=\"#echarts.init\">echarts.init</a>.</p>\n"},"action":{"desc":"<p>Chart actions supported by ECharts are triggered through <a href=\"#echartsInstance.dispatchAction\">di [...]
\ No newline at end of file
diff --git a/en/documents/api-parts/api.json b/en/documents/api-parts/api.json
index a116c9d0..28aa7a7e 100644
--- a/en/documents/api-parts/api.json
+++ b/en/documents/api-parts/api.json
@@ -1,14 +1 @@
-{
- "echarts": {
- "desc": "<p>Global echarts object, which can be accessed after including <code class=\"codespan\">echarts.js</code> in script tag or through <code class=\"codespan\">require('echarts')</code> in AMD environment.</p>\n"
- },
- "echartsInstance": {
- "desc": "<p>Instance created through <a href=\"#echarts.init\">echarts.init</a>.</p>\n"
- },
- "action": {
- "desc": "<p>Chart actions supported by ECharts are triggered through <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a>.</p>\n<p><strong>Attention: </strong> The <code class=\"codespan\">?:</code> note in the code shows that this attribute is optional. <em>EVENT:</em> stands for the event that triggers action.</p>\n"
- },
- "events": {
- "desc": "<p>Event-handling functions are mainly added through <a href=\"#echartsInstance.on\">on</a> in ECharts. This document describes all event list in ECharts.</p>\n<p>Event in ECharts can be divided in two kinds. One is mouse event, which is triggered when mouse clicks on certain component, the other is triggered after dispatches <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a>.</p>\n<p><strong>For example:</strong></p>\n<pre><code class=\"lang-ts\">myChart.on(' [...]
- }
-}
\ No newline at end of file
+{"echarts":{"desc":"<p>Global echarts object, which can be accessed after including <code class=\"codespan\">echarts.js</code> in script tag or through <code class=\"codespan\">require('echarts')</code> in AMD environment.</p>\n"},"echartsInstance":{"desc":"<p>Instance created through <a href=\"#echarts.init\">echarts.init</a>.</p>\n"},"action":{"desc":"<p>Chart actions supported by ECharts are triggered through <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a>.</p>\ [...]
\ No newline at end of file
diff --git a/en/documents/api.json b/en/documents/api.json
index 3102727c..a02b669c 100644
--- a/en/documents/api.json
+++ b/en/documents/api.json
@@ -1 +1 @@
-{"$schema":"https://echarts.apache.org/doc/json-schem","option":{"type":"Object","properties":{"echarts":{"type":["Object"],"description":"<p>Global echarts object, which can be accessed after including <code class=\"codespan\">echarts.js</code> in script tag or through <code class=\"codespan\">require('echarts')</code> in AMD environment.</p>\n","properties":{"init":{"type":["Function"],"description":"<pre><code class=\"lang-ts\">(dom: HTMLDivElement|HTMLCanvasElement, theme?: O [...]
\ No newline at end of file
+{"$schema":"https://echarts.apache.org/doc/json-schema","option":{"type":"Object","properties":{"echarts":{"type":["Object"],"description":"<p>Global echarts object, which can be accessed after including <code class=\"codespan\">echarts.js</code> in script tag or through <code class=\"codespan\">require('echarts')</code> in AMD environment.</p>\n","properties":{"init":{"type":["Function"],"description":"<pre><code class=\"lang-ts\">(dom: HTMLDivElement|HTMLCanvasElement, theme?: [...]
\ No newline at end of file
diff --git a/en/documents/option-gl-parts/option-gl.geo3D.js b/en/documents/option-gl-parts/option-gl.geo3D.js
index ed78643f..7252a34a 100644
--- a/en/documents/option-gl-parts/option-gl.geo3D.js
+++ b/en/documents/option-gl-parts/option-gl.geo3D.js
@@ -1,512 +1 @@
-window.__EC_DOC_option_gl_geo3D = {
- "show": {
- "desc": "<p>Whether to display 3D geographic coordinate system components.</p>\n"
- },
- "map": {
- "desc": "<p>The map type. The map type used in ECharts-gl is the same as the <a href=\"https://echarts.apache.org/en/option.html#geo.map\" target=\"_blank\">geo</a> component.</p>\n<p>EChart provides map data in two formats. One is the JS file that can be imported directly through the script tag. After it is introduced, the map name and data will be automatically registered. Another is the JSON file that needs to be registered manually after loaded asynchronously by AJAX.</p>\n<p>Her [...]
- },
- "boxWidth": {
- "desc": "<p>A 3D geographic coordinate system component width in a 3D scene. With <a href=\"#geo3D.viewControl.distance\">viewControl.distance</a> you can get the most appropriate display size.</p>\n<p>The following image is a schematic diagram of <code class=\"codespan\">boxWidth</code>, <code class=\"codespan\">boxHeight</code>, <code class=\"codespan\">boxDepth</code>, <code class=\"codespan\">regionHeight</code> in A 3D geographic coordinate system component.</p>\n<p><img width=\ [...]
- },
- "boxHeight": {
- "desc": "<p>A 3D geographic coordinate system component height in a 3D scene.</p>\n<p>Component height. This height contains the height of the bar and scatter on a 3D map.</p>\n"
- },
- "boxDepth": {
- "desc": "<p>A 3D geographic coordinate system component depth in a 3D scene.</p>\n<p>The component depth defaults to automatic, ensuring that the scale of the 3D component is the same as the ratio of the input GeoJSON.</p>\n"
- },
- "regionHeight": {
- "desc": "<p>The height of each area of the 3D map. This height is the height of the model, less than <a href=\"#geo3D.boxHeight\">boxHeight</a>. <code class=\"codespan\">boxHeight - regionHeight</code> will be used for the display of 3D bar, 3D scatter, and etc.</p>\n"
- },
- "environment": {
- "desc": "<p>Environment map. Support for solid colors, gradual colors, URL of panoramic texture. The default is <code class=\"codespan\">'auto'</code>, which is used as the environment texture when <a href=\"#geo3D.light.ambientCubemap.texture\">light.ambientCubemap.texture</a> is configured. Otherwise, the environment texture is not displayed.</p>\n<p>Example:</p>\n<pre><code class=\"lang-ts\">// Configure as a panoramic texture\nenvironment: 'asset/starfield.jpg'\n/ [...]
- },
- "groundPlane": {
- "desc": "<p>The ground allows the entire assembly to be “placed” to make the entire scene look more realistic.</p>\n<p> <code class=\"codespan\">groundPlane</code> supports setting up separate <code class=\"codespan\">realisticMaterial</code>, <code class=\"codespan\">colorMaterial</code>, <code class=\"codespan\">lambertMaterial</code> and other materials. If not set, the material parameters of the component are taken by default.</p>\n"
- },
- "groundPlane.show": {
- "desc": "<p>Whether to display the ground.</p>\n"
- },
- "groundPlane.color": {
- "desc": "<p>The color of the ground.</p>\n"
- },
- "instancing": {
- "desc": "<p><code class=\"codespan\">instancing</code> will merge all the <a href=\"http://geojson.org/geojson-spec.html#geometry-objects\" target=\"_blank\">geometry</a> in GeoJSON into one. When GeoJSON has a lot of (thousands) <a href=\"http://geojson.org/geojson-spec.html#geometry-objects\" target=\"_blank\">geometry</a>, it can effectively improve drawing efficiency.</p>\n"
- },
- "label": {
- "desc": "<p>The setting of the label.</p>\n"
- },
- "label.show": {
- "desc": "<p>Whether to show the label.</p>\n"
- },
- "label.distance": {
- "desc": "<p>Distance to the host graphic element.</p>\n<p>The distance from the label to the graphic. In a 3D Scatter, this distance is the pixel value of the screen space. In other figures, this distance is the relative 3D distance.</p>\n"
- },
- "label.formatter": {
- "desc": "<p>The formatter of the label content, which supports the string template and the callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template:</strong></p>\n<p>The model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item [...]
- },
- "label.textStyle": {
- "desc": "<p>The font style of the label.</p>\n"
- },
- "label.textStyle.color": {
- "desc": "<p>The Color of the text.</p>\n"
- },
- "label.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "label.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "label.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "label.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "label.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "itemStyle": {
- "desc": "<p>Visual properties of 3D graphics in A 3D geographic coordinate system component, including color, transparency, strokes, etc.</p>\n"
- },
- "itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "itemStyle.borderWidth": {
- "desc": "<p>The width of the border. With the border, you can distinguish each area more clearly. As shown below:</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/geo-border.png\"></p>\n"
- },
- "itemStyle.borderColor": {
- "desc": "<p>The color of the border.</p>\n"
- },
- "emphasis": {
- "desc": "<p>Graphic and label styles when mouse hover is highlighted.</p>\n"
- },
- "emphasis.label.show": {
- "desc": "<p>Whether to show the label.</p>\n"
- },
- "emphasis.label.distance": {
- "desc": "<p>Distance to the host graphic element.</p>\n<p>The distance from the label to the graphic. In a 3D Scatter, this distance is the pixel value of the screen space. In other figures, this distance is the relative 3D distance.</p>\n"
- },
- "emphasis.label.formatter": {
- "desc": "<p>The formatter of the label content, which supports the string template and the callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template:</strong></p>\n<p>The model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item [...]
- },
- "emphasis.label.textStyle": {
- "desc": "<p>The font style of the label.</p>\n"
- },
- "emphasis.label.textStyle.color": {
- "desc": "<p>The Color of the text.</p>\n"
- },
- "emphasis.label.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "emphasis.label.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "emphasis.label.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "emphasis.label.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "emphasis.label.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "emphasis.itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "emphasis.itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "regions": {
- "desc": "<p>The setting of the map area.</p>\n"
- },
- "regions.name": {
- "desc": "<p>The name of the corresponding map area, such as <code class=\"codespan\">'Guangdong'</code>, <code class=\"codespan\">'Zhejiang'</code>.</p>\n"
- },
- "regions.regionHeight": {
- "desc": "<p>The height of the area. Different heights can be set to express the size of the data. When GeoJSON is the data of the building, this value can also be used to represent the approximate height. As shown below：</p>\n<p><img width=\"700\" height=\"auto\" src=\"documents/asset/gl/img/city-region-height.jpg\"></p>\n"
- },
- "regions.itemStyle": {
- "desc": "<p>Style settings for a single area.</p>\n"
- },
- "regions.itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "regions.itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "regions.itemStyle.borderWidth": {
- "desc": "<p>The width of the border. With the border, you can distinguish each area more clearly. As shown below:</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/geo-border.png\"></p>\n"
- },
- "regions.itemStyle.borderColor": {
- "desc": "<p>The color of the border.</p>\n"
- },
- "regions.label": {
- "desc": "<p>Label settings for a single area.</p>\n"
- },
- "regions.label.show": {
- "desc": "<p>Whether to show the label.</p>\n"
- },
- "regions.label.distance": {
- "desc": "<p>Distance to the host graphic element.</p>\n<p>The distance from the label to the graphic. In a 3D Scatter, this distance is the pixel value of the screen space. In other figures, this distance is the relative 3D distance.</p>\n"
- },
- "regions.label.formatter": {
- "desc": "<p>The formatter of the label content, which supports the string template and the callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template:</strong></p>\n<p>The model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item [...]
- },
- "regions.label.textStyle": {
- "desc": "<p>The font style of the label.</p>\n"
- },
- "regions.label.textStyle.color": {
- "desc": "<p>The Color of the text.</p>\n"
- },
- "regions.label.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "regions.label.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "regions.label.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "regions.label.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "regions.label.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "regions.emphasis": {
- "desc": "<p>Setting the highlight for labels and styles for a single area.</p>\n"
- },
- "regions.emphasis.itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "regions.emphasis.itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "regions.emphasis.itemStyle.borderWidth": {
- "desc": "<p>The width of the border. With the border, you can distinguish each area more clearly. As shown below:</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/geo-border.png\"></p>\n"
- },
- "regions.emphasis.itemStyle.borderColor": {
- "desc": "<p>The color of the border.</p>\n"
- },
- "regions.emphasis.label.show": {
- "desc": "<p>Whether to show the label.</p>\n"
- },
- "regions.emphasis.label.distance": {
- "desc": "<p>Distance to the host graphic element.</p>\n<p>The distance from the label to the graphic. In a 3D Scatter, this distance is the pixel value of the screen space. In other figures, this distance is the relative 3D distance.</p>\n"
- },
- "regions.emphasis.label.formatter": {
- "desc": "<p>The formatter of the label content, which supports the string template and the callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template:</strong></p>\n<p>The model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item [...]
- },
- "regions.emphasis.label.textStyle": {
- "desc": "<p>The font style of the label.</p>\n"
- },
- "regions.emphasis.label.textStyle.color": {
- "desc": "<p>The Color of the text.</p>\n"
- },
- "regions.emphasis.label.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "regions.emphasis.label.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "regions.emphasis.label.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "regions.emphasis.label.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "regions.emphasis.label.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "shading": {
- "desc": "<p>The coloring effect of 3D graphics in A 3D geographic coordinate system component. The following three coloring methods are supported in echarts-gl:</p>\n<ul>\n<li><p><code class=\"codespan\">'color'</code>\nOnly display colors, not affected by other factors such as lighting.</p>\n</li>\n<li><p><code class=\"codespan\">'lambert'</code>\nThrough the classic [lambert] coloring, can express the light and dark that the light shows.</p>\n</li>\n<li><p><code cla [...]
- },
- "realisticMaterial": {
- "desc": "<p>The configuration item of the realistic material is valid when <a href=\"#geo3D.shading\">shading</a> is <code class=\"codespan\">'realistic'</code>.</p>\n"
- },
- "realisticMaterial.detailTexture": {
- "desc": "<p>The texture map of the material detail.</p>\n"
- },
- "realisticMaterial.textureTiling": {
- "desc": "<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n"
- },
- "realisticMaterial.textureOffset": {
- "desc": "<p>The displacement of the texture detail texture.</p>\n"
- },
- "realisticMaterial.roughness": {
- "desc": "<p>The <code class=\"codespan\">roughness</code> attribute is used to indicate the roughness of the material, <code class=\"codespan\">0</code> is completely smooth, <code class=\"codespan\">1</code> is completely rough, and the middle value is between the two.</p>\n<p>The following images show the effect of <code class=\"codespan\">roughness</code> in <a href=\"#globe\"><code class=\"codespan\">globe</code></a> <code class=\"codespan\">0.2</code> (smooth) and <code class=\" [...]
- },
- "realisticMaterial.metalness": {
- "desc": "<p>The <code class=\"codespan\">metalness</code> attribute is used to indicate whether the material is metal or non-metal, <code class=\"codespan\">0</code> is non-metallic, <code class=\"codespan\">1</code> is metal, and the middle value is between the two. Usually set to <code class=\"codespan\">0</code> and <code class=\"codespan\">1</code> to meet most of the scenes.</p>\n<p>The picture below show the difference between `metal' and '0' in <a href=\"#globe\">g [...]
- },
- "realisticMaterial.roughnessAdjust": {
- "desc": "<p>Roughness adjustment is useful when using roughness map. The overall roughness of the texture can be adjusted. The default is <code class=\"codespan\">0.5</code>, <code class=\"codespan\">0</code> is completely smooth, <code class=\"codespan\">1</code> is completely rough.</p>\n"
- },
- "realisticMaterial.metalnessAdjust": {
- "desc": "<p>Metalness adjustment is useful when using metalness maps. The overall metallicity of the texture can be adjusted. The default is <code class=\"codespan\">0.5</code>, <code class=\"codespan\">0</code> is non-metal, <code class=\"codespan\">1</code> is metal.</p>\n"
- },
- "realisticMaterial.normalTexture": {
- "desc": "<p>Normal map of material details.</p>\n<p>Using normal maps, you can still display rich shades of detail on the surface of the object with fewer vertices.</p>\n"
- },
- "lambertMaterial": {
- "desc": "<p>The configuration item of the lambert material is valid when <a href=\"#geo3D.shading\">shading</a> is <code class=\"codespan\">'lambert'</code>.</p>\n"
- },
- "lambertMaterial.detailTexture": {
- "desc": "<p>The texture map of the material detail.</p>\n"
- },
- "lambertMaterial.textureTiling": {
- "desc": "<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n"
- },
- "lambertMaterial.textureOffset": {
- "desc": "<p>The displacement of the texture detail texture.</p>\n"
- },
- "colorMaterial": {
- "desc": "<p>The color material related configuration item is valid when <a href=\"#geo3D.shading\">shading</a> is <code class=\"codespan\">'color'</code>.</p>\n"
- },
- "colorMaterial.detailTexture": {
- "desc": "<p>The texture map of the material detail.</p>\n"
- },
- "colorMaterial.textureTiling": {
- "desc": "<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n"
- },
- "colorMaterial.textureOffset": {
- "desc": "<p>The displacement of the texture detail texture.</p>\n"
- },
- "light": {
- "desc": "<p>Light related settings. Invalid when <a href=\"#geo3D.shading\">shading</a> is 'color'.</p>\n<p>The lighting settings affect the components and all the charts on the component's coordinate system.</p>\n<p>A reasonable lighting setting can make the brightness and darkness of the whole scene richer and more layered.</p>\n"
- },
- "light.main": {
- "desc": "<p>The setting of the main light source of the scene. In the <a href=\"#globe\">globe</a> component is the sun.</p>\n"
- },
- "light.main.color": {
- "desc": "<p>The color of the main light source.</p>\n"
- },
- "light.main.intensity": {
- "desc": "<p>The intensity of the main light source.</p>\n"
- },
- "light.main.shadow": {
- "desc": "<p>Whether the main light source displays a shadow. The default is off.</p>\n<p>Turning on the shadows can bring more realistic and layered lighting to the scene. But it also increases the operating overhead of the program.</p>\n<p>The following two images show the difference between turning on the shadow and turning off the shadow.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-shadow.png\" width=\"100%\" tit [...]
- },
- "light.main.shadowQuality": {
- "desc": "<p>The quality of the shadow. You can choose <code class=\"codespan\">'low'</code>, <code class=\"codespan\">'medium'</code>, <code class=\"codespan\">'high'</code>, <code class=\"codespan\">'ultra'</code></p>\n<p>The following two images shows the difference between low quality and high quality shadows.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-shadow-low.png\" width=\"100 [...]
- },
- "light.main.alpha": {
- "desc": "<p>The main light source is around the x-axis, which is the angle of up-down rotation. Control the direction of the light with <a href=\"#geo3D.light.main.beta\">beta</a>.</p>\n<p>As the following image show:</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/light-alpha-beta.png\"></p>\n<p>The <a href=\"#globe\">globe</a> component can control the time of sunlight by <a href=\"#globe.light.main.time\">time</a>.</p>\n"
- },
- "light.main.beta": {
- "desc": "<p>The main light source is around the y-axis, which is the angle of the left-right rotation.</p>\n"
- },
- "light.ambient": {
- "desc": "<p>Global ambient light settings.</p>\n"
- },
- "light.ambient.color": {
- "desc": "<p>The color of ambient light.</p>\n"
- },
- "light.ambient.intensity": {
- "desc": "<p>The intensity of ambient light.</p>\n"
- },
- "light.ambientCubemap": {
- "desc": "<p>The ambientCubemap uses texture as the source of ambient light, which provides diffuse and specular for objects. The diffuse and specular can be set separately by <a href=\"#geo3D.light.ambientCubemap.diffuseIntensity\">diffuseIntensity</a> and <a href=\"#geo3D.light.ambientCubemap.specularIntensity\">specularIntensity</a>.</p>\n"
- },
- "light.ambientCubemap.texture": {
- "desc": "<p>The URL of the ambient cubemap supports HDR images in the <code class=\"codespan\">.hdr</code> format. You can obtained the resources for <code class=\"codespan\">.hdr</code> from <a href=\"http://www.hdrlabs.com/sibl/archive.html\" target=\"_blank\">http://www.hdrlabs.com/sibl/archive.html</a> and other websites.</p>\n<p>Example：</p>\n<pre><code class=\"lang-ts\">ambientCubemap: {\n texture: 'pisa.hdr',\n // The exposure value used when analytic hdr\n ex [...]
- },
- "light.ambientCubemap.diffuseIntensity": {
- "desc": "<p>The intensity of diffuse.</p>\n"
- },
- "light.ambientCubemap.specularIntensity": {
- "desc": "<p>The intensity of specular.</p>\n"
- },
- "postEffect": {
- "desc": "<p>Post-processing effects related configuration. It can add effects such as highlights, depth of field, screen space ambient occlusion (SSAO), toning to the picture. And it can make the whole picture more textured.</p>\n<p>The following are the differences between closing <code class=\"codespan\">postEffect</code> and opening <code class=\"codespan\">postEffect</code>.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/i [...]
- },
- "postEffect.enable": {
- "desc": "<p>Whether to enable post-processing effects. Not enabled by default.</p>\n"
- },
- "postEffect.bloom": {
- "desc": "<p>Bloom is used to reproducing the effects that occur in real cameras when taking pictures in a bright environment.\nBecause traditional RGB can only represent colors in the range of '0 - 255', so we need to use the bloom effect simulates fringes of light extending from the borders of bright areas, creating the illusion of a bright light overwhelming the camera. As shown below：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/globe-posteffect-blo [...]
- },
- "postEffect.bloom.enable": {
- "desc": "<p>Whether to enable the bloom effect.</p>\n"
- },
- "postEffect.bloom.bloomIntensity": {
- "desc": "<p>The intensity of the bloom. The default is 0.1.</p>\n"
- },
- "postEffect.depthOfField": {
- "desc": "<p>Depth of Field is a post-processing effect that simulates the focus properties of a camera. The area of focus is clear, and the area away from the focus is gradually blurred.</p>\n<p>The depth of field effect allows the observer to focus on the area of focus and make the picture feel stronger. Large depth of field can also create a macro model effect.</p>\n<p>The following are the differences between turning off and turning on the depth of field effect.</p>\n<div class=\ [...]
- },
- "postEffect.depthOfField.enable": {
- "desc": "<p>Whether to enable the depth of field.</p>\n"
- },
- "postEffect.depthOfField.focalDistance": {
- "desc": "<p>The initial focus distance. The user can click on the area to automatically focus.</p>\n"
- },
- "postEffect.depthOfField.focalRange": {
- "desc": "<p>The size of the in-focus area. The objects in this range are completely clear and there is no blurring.</p>\n"
- },
- "postEffect.depthOfField.fstop": {
- "desc": "<p>[F value] of the lens (<a href=\"https://zh.wikipedia.org/wiki/%E7%84%A6%E6%AF%94)\" target=\"_blank\">https://zh.wikipedia.org/wiki/%E7%84%A6%E6%AF%94)</a>, the smaller the value, the shallower the depth of field.</p>\n"
- },
- "postEffect.depthOfField.blurRadius": {
- "desc": "<p>Blur radius outside the focus.</p>\n<p>The difference blur effect between the different radius.</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\"></img>\n <img src=\"documents/asset/gl/img/geo-dof-large.png\" width=\"100%\" title=\"blurSize: 10\"></img>\n</div>\n"
- },
- "postEffect.screenSpaceAmbientOcclusion": {
- "desc": "<p>The ambient occlusion post-processing effect darkens the corners, holes, crevices, and areas where most light can`t reach. It is a supplement to the traditional shadow map, which makes the whole scene more natural and layered.</p>\n<p>Below is a comparison of the effects of no SSAO and 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\"></img>\n <img src=\ [...]
- },
- "postEffect.SSAO": {
- "desc": "<p>Same as <a href=\"#geo3D.postEffect.screenSpaceAmbientOcclusion\">screenSpaceAmbientOcclusion</a></p>\n"
- },
- "postEffect.SSAO.enable": {
- "desc": "<p>Whether to enable SSAO (screen space ambient occlusion). Not enabled by default.</p>\n"
- },
- "postEffect.SSAO.quality": {
- "desc": "<p>The quality of SSAO (screen space ambient occlusion). Supporting<code class=\"codespan\">'low'</code>, <code class=\"codespan\">'medium'</code>, <code class=\"codespan\">'high'</code>, <code class=\"codespan\">'ultra'</code></p>\n"
- },
- "postEffect.SSAO.radius": {
- "desc": "<p>The radius of the SSAO (screen space ambient occlusion). The larger the radius, the more natural the effect, but you need to set a higher <code class=\"codespan\">'quality'</code>.</p>\n<p>The following example is the difference between a smaller and larger radius:</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\"></img>\n <img src=\"docume [...]
- },
- "postEffect.SSAO.intensity": {
- "desc": "<p>The intensity of SSAO (screen space ambient occlusion). The larger the value, the darker the color.</p>\n"
- },
- "postEffect.colorCorrection": {
- "desc": "<p>Color correction and adjustment. Similar to Color Adjustments in Photoshop.</p>\n<p>The same scene in the figure below is adjusted to the difference between the cool color system and the warm color system.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/buildings-cold.jpg\" width=\"100%\" title=\"Cold\"></img>\n <img src=\"documents/asset/gl/img/buildings-warm.jpg\" width=\"100%\" title=\"Warm\"></img>\n</div>\n\n"
- },
- "postEffect.colorCorrection.enable": {
- "desc": "<p>Whether to enable the color correction.</p>\n"
- },
- "postEffect.colorCorrection.lookupTexture": {
- "desc": "<p>Color correction lookup texture, recommended.</p>\n<p>The color correction lookup texture is a texture image like the one below.</p>\n<p><img width=\"200\" height=\"auto\" src=\"documents/asset/gl/img/lookup.png\"></p>\n<p>This is the basic lookup texture image that you can use directly.\nTo adjust the color of the scene to the effect you want, you can take a screenshot of the scene and adjust the color to the desired effect in image processing software such as Photoshop. [...]
- },
- "postEffect.colorCorrection.exposure": {
- "desc": "<p>The exposure of the image.</p>\n"
- },
- "postEffect.colorCorrection.brightness": {
- "desc": "<p>The brightness of the image.</p>\n"
- },
- "postEffect.colorCorrection.contrast": {
- "desc": "<p>The contrast of the image.</p>\n"
- },
- "postEffect.colorCorrection.saturation": {
- "desc": "<p>The saturation of the image.</p>\n"
- },
- "postEffect.FXAA": {
- "desc": "<p>After opening <a href=\"#geo3D.postEffect\">postEffect</a>, WebGL's default MSAA (Multi Sampling Anti Aliasing) will not work. At this time, FXAA (Fast Approximate Anti-Aliasing) can solve the anti-aliasing problem quickly and easily. FXAA blurs the edge of the scene to solve the problem of aliasing. It works well on some scenes, but in echarts-gl, you need to ensure that the edges of many texts and lines are sharp and clear, so FXAA is not suitable. At this point we [...]
- },
- "postEffect.FXAA.enable": {
- "desc": "<p>Whether to enable FXAA. Not enabled by default.</p>\n"
- },
- "temporalSuperSampling": {
- "desc": "<p>Temporal supersampling. After opening <a href=\"#geo3D.postEffect\">postEffect</a>, WebGL's default MSAA (MultiSampling Anti-Aliasing) will not work, so we need to solve the problem of sampling.</p>\n<p>Temporal supersampling is an anti-aliasing method. After the picture is still, it will continue to sample multiple times and taken at several instances inside the pixel and an average color value is calculated, thus achieving anti-aliasing effect.\nAnd in this process, [...]
- },
- "temporalSuperSampling.enable": {
- "desc": "<p>Whether to enable temporal supersampling. By default, temporal supersampling is also turned on synchronously when <a href=\"#geo3D.postEffect\">postEffect</a> is turned on.</p>\n"
- },
- "viewControl": {
- "desc": "<p><code class=\"codespan\">viewControl</code> is used for mouse rotation, zooming, and other perspective control.</p>\n"
- },
- "viewControl.projection": {
- "desc": "<p>The way of projection, the default is <code class=\"codespan\">'perspective'</code> projection, also supports setting to <code class=\"codespan\">'orthogonal'</code> projection.</p>\n"
- },
- "viewControl.autoRotate": {
- "desc": "<p>Whether to enable the angle of view to automatically rotate around the object.</p>\n"
- },
- "viewControl.autoRotateDirection": {
- "desc": "<p>The direction in which the object auto rotates. The default is <code class=\"codespan\">'cw'</code> means clockwise from top to bottom, and can also use <code class=\"codespan\">'ccw'</code> means counterclockwise from top to bottom.</p>\n"
- },
- "viewControl.autoRotateSpeed": {
- "desc": "<p>The speed at which the object auto rotates. The unit is <code class=\"codespan\">angle/second</code>, the default is <code class=\"codespan\">10</code>, which is a turn of <code class=\"codespan\">36</code> seconds.</p>\n"
- },
- "viewControl.autoRotateAfterStill": {
- "desc": "<p>The time interval for automatic rotation to resume after the mouse is still. Valid after opening <a href=\"#geo3D.viewControl.autoRotate\">autoRotate</a>.</p>\n"
- },
- "viewControl.damping": {
- "desc": "<p>The damping when the mouse is rotated, zoomed, etc.\nWhen it is greater than 0, the angle of view will continue to move (rotate and zoom) due to certain inertia after the mouse is still.</p>\n"
- },
- "viewControl.rotateSensitivity": {
- "desc": "<p>The sensitivity of the rotation operation. The greater the value, the more sensitive. Supports the use of arrays to set the horizontal and vertical rotation sensitivity separately.</p>\n<p>The default is <code class=\"codespan\">1</code>.</p>\n<p>Cannot be rotated after setting to <code class=\"codespan\">0</code>.</p>\n<pre><code class=\"lang-ts\">// can't rotate\nrotateSensitivity: 0\n// can only be rotated horizontally\nrotateSensitivity: [1, 0]\n// can only rotat [...]
- },
- "viewControl.zoomSensitivity": {
- "desc": "<p>The sensitivity of the zoom operation, the larger the value, the more sensitive. The default is <code class=\"codespan\">1</code>.</p>\n<p>Can<code class=\"codespan\">t be scaled after setting to</code>0`.</p>\n"
- },
- "viewControl.panSensitivity": {
- "desc": "<p>The sensitivity of the panning operation, the greater the value, the more sensitive. Supports the use of arrays to set the horizontal and vertical translation sensitivity.</p>\n<p>The default is <code class=\"codespan\">1</code>.</p>\n<p>Cannot pan after setting to <code class=\"codespan\">0</code>.</p>\n"
- },
- "viewControl.panMouseButton": {
- "desc": "<p>The mouse button used for panning operation supports:</p>\n<ul>\n<li><p><code class=\"codespan\">'left'</code> left mouse button (default)</p>\n</li>\n<li><p><code class=\"codespan\">'middle'</code> middle mouse button</p>\n</li>\n<li><p><code class=\"codespan\">'right'</code> right mouse button</p>\n</li>\n</ul>\n<p>Note: If set to the right mouse button, the default context menu will be blocked.</p>\n"
- },
- "viewControl.rotateMouseButton": {
- "desc": "<p>The mouse button used for the rotation operation supports:</p>\n<ul>\n<li><p><code class=\"codespan\">'left'</code> left mouse button</p>\n</li>\n<li><p><code class=\"codespan\">'middle'</code> middle mouse button (default)</p>\n</li>\n<li><p><code class=\"codespan\">'right'</code> right mouse button</p>\n</li>\n</ul>\n<p>Note: If set to the right mouse button, the default context menu will be blocked.</p>\n"
- },
- "viewControl.distance": {
- "desc": "<p>The distance of the default perspective from the subject. For <a href=\"#globe\">globe</a>, the distance from the Earth's surface is the distance from the center origin for other components such as <a href=\"#grid3D\">grid3D</a> and <a href=\"#geo3D\">geo3D</a>. Valid when <a href=\"#geo3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'perspective'</code>.</p>\n"
- },
- "viewControl.minDistance": {
- "desc": "<p>The angle of view is controlled by the mouse to bring the minimum distance to the subject. Valid when <a href=\"#geo3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'perspective'</code>.</p>\n"
- },
- "viewControl.maxDistance": {
- "desc": "<p>The angle of view can be extended to the maximum distance of the subject by mouse control. Valid when <a href=\"#geo3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'perspective'</code>.</p>\n"
- },
- "viewControl.orthographicSize": {
- "desc": "<p>The size of the orthogonal projection. Valid when <a href=\"#geo3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'orthographic'</code>.</p>\n"
- },
- "viewControl.maxOrthographicSize": {
- "desc": "<p>The maximum value of the orthogonal projection scaling. Valid when <a href=\"#geo3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'orthographic'</code>.</p>\n"
- },
- "viewControl.minOrthographicSize": {
- "desc": "<p>The minimum value of the orthogonal projection scaling. Valid when <a href=\"#geo3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'orthographic'</code></p>\n"
- },
- "viewControl.alpha": {
- "desc": "<p>The angle of view is around the x-axis, which is the angle of rotation up and down. With <a href=\"#geo3D.light.main.beta\">beta</a> you can control the direction of the perspective.</p>\n<p>As shown below：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/view-alpha-beta.png\"></p>\n"
- },
- "viewControl.beta": {
- "desc": "<p>The angle of view is around the y-axis, which is the angle of rotation from left to right.</p>\n"
- },
- "viewControl.center": {
- "desc": "<p>At the center of the angle of view, the rotation will also rotate around this center point. The default is <code class=\"codespan\">[0,0,0]</code>.</p>\n"
- },
- "viewControl.minAlpha": {
- "desc": "<p>The minimum alpha value to rotate up and down. That is, the angle of view can be rotated to reach the uppermost angle.</p>\n"
- },
- "viewControl.maxAlpha": {
- "desc": "<p>The maximum alpha value to rotate up and down. That is, the angle of view can be rotated to the lowest angle.</p>\n"
- },
- "viewControl.minBeta": {
- "desc": "<p>The minimum beta value to rotate left and right. That is, the angle of view can be rotated to the leftmost angle.</p>\n"
- },
- "viewControl.maxBeta": {
- "desc": "<p>The maximum beta value to rotate left and right rotation. That is, the angle of view can be rotated to the rightmost angle.</p>\n"
- },
- "viewControl.animation": {
- "desc": "<p>Whether to enable animation.</p>\n"
- },
- "viewControl.animationDurationUpdate": {
- "desc": "<p>The duration time for update the transition animation.</p>\n"
- },
- "viewControl.animationEasingUpdate": {
- "desc": "<p>The easing effect for update transition animation.</p>\n"
- },
- "zlevel": {
- "desc": "<p>The layer in which the component is located.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and [...]
- },
- "left": {
- "desc": "<p>Distance between component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>; and it can also be <code class=\"codespan\">'left'</code>, <code class=\"codespan\">'center'</code>, or <code class=\"codespan\">'right'</code>.</p>\n<p>If [...]
- },
- "top": {
- "desc": "<p>Distance between component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>; and it can also be <code class=\"codespan\">'top'</code>, <code class=\"codespan\">'middle'</code>, or <code class=\"codespan\">'bottom'</code>.</p>\n<p>If t [...]
- },
- "right": {
- "desc": "<p>Distance between component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>.</p>\n<p> Adaptive by default.</p>\n"
- },
- "bottom": {
- "desc": "<p>Distance between component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>.</p>\n<p> Adaptive by default.</p>\n"
- },
- "width": {
- "desc": "<p> The width of the view of the component.</p>\n"
- },
- "height": {
- "desc": "<p> The height of the view of the component.</p>\n"
- }
-}
\ No newline at end of file
+window.__EC_DOC_option_gl_geo3D = {"show":{"desc":"<p>Whether to display 3D geographic coordinate system components.</p>\n"},"map":{"desc":"<p>The map type. The map type used in ECharts-gl is the same as the <a href=\"https://echarts.apache.org/en/option.html#geo.map\" target=\"_blank\">geo</a> component.</p>\n<p>EChart provides map data in two formats. One is the JS file that can be imported directly through the script tag. After it is introduced, the map name and data will be automatic [...]
\ No newline at end of file
diff --git a/en/documents/option-gl-parts/option-gl.geo3D.json b/en/documents/option-gl-parts/option-gl.geo3D.json
index 03bac3ae..08e2bb7f 100644
--- a/en/documents/option-gl-parts/option-gl.geo3D.json
+++ b/en/documents/option-gl-parts/option-gl.geo3D.json
@@ -1,512 +1 @@
-{
- "show": {
- "desc": "<p>Whether to display 3D geographic coordinate system components.</p>\n"
- },
- "map": {
- "desc": "<p>The map type. The map type used in ECharts-gl is the same as the <a href=\"https://echarts.apache.org/en/option.html#geo.map\" target=\"_blank\">geo</a> component.</p>\n<p>EChart provides map data in two formats. One is the JS file that can be imported directly through the script tag. After it is introduced, the map name and data will be automatically registered. Another is the JSON file that needs to be registered manually after loaded asynchronously by AJAX.</p>\n<p>Her [...]
- },
- "boxWidth": {
- "desc": "<p>A 3D geographic coordinate system component width in a 3D scene. With <a href=\"#geo3D.viewControl.distance\">viewControl.distance</a> you can get the most appropriate display size.</p>\n<p>The following image is a schematic diagram of <code class=\"codespan\">boxWidth</code>, <code class=\"codespan\">boxHeight</code>, <code class=\"codespan\">boxDepth</code>, <code class=\"codespan\">regionHeight</code> in A 3D geographic coordinate system component.</p>\n<p><img width=\ [...]
- },
- "boxHeight": {
- "desc": "<p>A 3D geographic coordinate system component height in a 3D scene.</p>\n<p>Component height. This height contains the height of the bar and scatter on a 3D map.</p>\n"
- },
- "boxDepth": {
- "desc": "<p>A 3D geographic coordinate system component depth in a 3D scene.</p>\n<p>The component depth defaults to automatic, ensuring that the scale of the 3D component is the same as the ratio of the input GeoJSON.</p>\n"
- },
- "regionHeight": {
- "desc": "<p>The height of each area of the 3D map. This height is the height of the model, less than <a href=\"#geo3D.boxHeight\">boxHeight</a>. <code class=\"codespan\">boxHeight - regionHeight</code> will be used for the display of 3D bar, 3D scatter, and etc.</p>\n"
- },
- "environment": {
- "desc": "<p>Environment map. Support for solid colors, gradual colors, URL of panoramic texture. The default is <code class=\"codespan\">'auto'</code>, which is used as the environment texture when <a href=\"#geo3D.light.ambientCubemap.texture\">light.ambientCubemap.texture</a> is configured. Otherwise, the environment texture is not displayed.</p>\n<p>Example:</p>\n<pre><code class=\"lang-ts\">// Configure as a panoramic texture\nenvironment: 'asset/starfield.jpg'\n/ [...]
- },
- "groundPlane": {
- "desc": "<p>The ground allows the entire assembly to be “placed” to make the entire scene look more realistic.</p>\n<p> <code class=\"codespan\">groundPlane</code> supports setting up separate <code class=\"codespan\">realisticMaterial</code>, <code class=\"codespan\">colorMaterial</code>, <code class=\"codespan\">lambertMaterial</code> and other materials. If not set, the material parameters of the component are taken by default.</p>\n"
- },
- "groundPlane.show": {
- "desc": "<p>Whether to display the ground.</p>\n"
- },
- "groundPlane.color": {
- "desc": "<p>The color of the ground.</p>\n"
- },
- "instancing": {
- "desc": "<p><code class=\"codespan\">instancing</code> will merge all the <a href=\"http://geojson.org/geojson-spec.html#geometry-objects\" target=\"_blank\">geometry</a> in GeoJSON into one. When GeoJSON has a lot of (thousands) <a href=\"http://geojson.org/geojson-spec.html#geometry-objects\" target=\"_blank\">geometry</a>, it can effectively improve drawing efficiency.</p>\n"
- },
- "label": {
- "desc": "<p>The setting of the label.</p>\n"
- },
- "label.show": {
- "desc": "<p>Whether to show the label.</p>\n"
- },
- "label.distance": {
- "desc": "<p>Distance to the host graphic element.</p>\n<p>The distance from the label to the graphic. In a 3D Scatter, this distance is the pixel value of the screen space. In other figures, this distance is the relative 3D distance.</p>\n"
- },
- "label.formatter": {
- "desc": "<p>The formatter of the label content, which supports the string template and the callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template:</strong></p>\n<p>The model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item [...]
- },
- "label.textStyle": {
- "desc": "<p>The font style of the label.</p>\n"
- },
- "label.textStyle.color": {
- "desc": "<p>The Color of the text.</p>\n"
- },
- "label.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "label.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "label.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "label.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "label.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "itemStyle": {
- "desc": "<p>Visual properties of 3D graphics in A 3D geographic coordinate system component, including color, transparency, strokes, etc.</p>\n"
- },
- "itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "itemStyle.borderWidth": {
- "desc": "<p>The width of the border. With the border, you can distinguish each area more clearly. As shown below:</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/geo-border.png\"></p>\n"
- },
- "itemStyle.borderColor": {
- "desc": "<p>The color of the border.</p>\n"
- },
- "emphasis": {
- "desc": "<p>Graphic and label styles when mouse hover is highlighted.</p>\n"
- },
- "emphasis.label.show": {
- "desc": "<p>Whether to show the label.</p>\n"
- },
- "emphasis.label.distance": {
- "desc": "<p>Distance to the host graphic element.</p>\n<p>The distance from the label to the graphic. In a 3D Scatter, this distance is the pixel value of the screen space. In other figures, this distance is the relative 3D distance.</p>\n"
- },
- "emphasis.label.formatter": {
- "desc": "<p>The formatter of the label content, which supports the string template and the callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template:</strong></p>\n<p>The model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item [...]
- },
- "emphasis.label.textStyle": {
- "desc": "<p>The font style of the label.</p>\n"
- },
- "emphasis.label.textStyle.color": {
- "desc": "<p>The Color of the text.</p>\n"
- },
- "emphasis.label.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "emphasis.label.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "emphasis.label.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "emphasis.label.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "emphasis.label.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "emphasis.itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "emphasis.itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "regions": {
- "desc": "<p>The setting of the map area.</p>\n"
- },
- "regions.name": {
- "desc": "<p>The name of the corresponding map area, such as <code class=\"codespan\">'Guangdong'</code>, <code class=\"codespan\">'Zhejiang'</code>.</p>\n"
- },
- "regions.regionHeight": {
- "desc": "<p>The height of the area. Different heights can be set to express the size of the data. When GeoJSON is the data of the building, this value can also be used to represent the approximate height. As shown below：</p>\n<p><img width=\"700\" height=\"auto\" src=\"documents/asset/gl/img/city-region-height.jpg\"></p>\n"
- },
- "regions.itemStyle": {
- "desc": "<p>Style settings for a single area.</p>\n"
- },
- "regions.itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "regions.itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "regions.itemStyle.borderWidth": {
- "desc": "<p>The width of the border. With the border, you can distinguish each area more clearly. As shown below:</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/geo-border.png\"></p>\n"
- },
- "regions.itemStyle.borderColor": {
- "desc": "<p>The color of the border.</p>\n"
- },
- "regions.label": {
- "desc": "<p>Label settings for a single area.</p>\n"
- },
- "regions.label.show": {
- "desc": "<p>Whether to show the label.</p>\n"
- },
- "regions.label.distance": {
- "desc": "<p>Distance to the host graphic element.</p>\n<p>The distance from the label to the graphic. In a 3D Scatter, this distance is the pixel value of the screen space. In other figures, this distance is the relative 3D distance.</p>\n"
- },
- "regions.label.formatter": {
- "desc": "<p>The formatter of the label content, which supports the string template and the callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template:</strong></p>\n<p>The model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item [...]
- },
- "regions.label.textStyle": {
- "desc": "<p>The font style of the label.</p>\n"
- },
- "regions.label.textStyle.color": {
- "desc": "<p>The Color of the text.</p>\n"
- },
- "regions.label.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "regions.label.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "regions.label.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "regions.label.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "regions.label.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "regions.emphasis": {
- "desc": "<p>Setting the highlight for labels and styles for a single area.</p>\n"
- },
- "regions.emphasis.itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "regions.emphasis.itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "regions.emphasis.itemStyle.borderWidth": {
- "desc": "<p>The width of the border. With the border, you can distinguish each area more clearly. As shown below:</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/geo-border.png\"></p>\n"
- },
- "regions.emphasis.itemStyle.borderColor": {
- "desc": "<p>The color of the border.</p>\n"
- },
- "regions.emphasis.label.show": {
- "desc": "<p>Whether to show the label.</p>\n"
- },
- "regions.emphasis.label.distance": {
- "desc": "<p>Distance to the host graphic element.</p>\n<p>The distance from the label to the graphic. In a 3D Scatter, this distance is the pixel value of the screen space. In other figures, this distance is the relative 3D distance.</p>\n"
- },
- "regions.emphasis.label.formatter": {
- "desc": "<p>The formatter of the label content, which supports the string template and the callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template:</strong></p>\n<p>The model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item [...]
- },
- "regions.emphasis.label.textStyle": {
- "desc": "<p>The font style of the label.</p>\n"
- },
- "regions.emphasis.label.textStyle.color": {
- "desc": "<p>The Color of the text.</p>\n"
- },
- "regions.emphasis.label.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "regions.emphasis.label.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "regions.emphasis.label.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "regions.emphasis.label.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "regions.emphasis.label.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "shading": {
- "desc": "<p>The coloring effect of 3D graphics in A 3D geographic coordinate system component. The following three coloring methods are supported in echarts-gl:</p>\n<ul>\n<li><p><code class=\"codespan\">'color'</code>\nOnly display colors, not affected by other factors such as lighting.</p>\n</li>\n<li><p><code class=\"codespan\">'lambert'</code>\nThrough the classic [lambert] coloring, can express the light and dark that the light shows.</p>\n</li>\n<li><p><code cla [...]
- },
- "realisticMaterial": {
- "desc": "<p>The configuration item of the realistic material is valid when <a href=\"#geo3D.shading\">shading</a> is <code class=\"codespan\">'realistic'</code>.</p>\n"
- },
- "realisticMaterial.detailTexture": {
- "desc": "<p>The texture map of the material detail.</p>\n"
- },
- "realisticMaterial.textureTiling": {
- "desc": "<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n"
- },
- "realisticMaterial.textureOffset": {
- "desc": "<p>The displacement of the texture detail texture.</p>\n"
- },
- "realisticMaterial.roughness": {
- "desc": "<p>The <code class=\"codespan\">roughness</code> attribute is used to indicate the roughness of the material, <code class=\"codespan\">0</code> is completely smooth, <code class=\"codespan\">1</code> is completely rough, and the middle value is between the two.</p>\n<p>The following images show the effect of <code class=\"codespan\">roughness</code> in <a href=\"#globe\"><code class=\"codespan\">globe</code></a> <code class=\"codespan\">0.2</code> (smooth) and <code class=\" [...]
- },
- "realisticMaterial.metalness": {
- "desc": "<p>The <code class=\"codespan\">metalness</code> attribute is used to indicate whether the material is metal or non-metal, <code class=\"codespan\">0</code> is non-metallic, <code class=\"codespan\">1</code> is metal, and the middle value is between the two. Usually set to <code class=\"codespan\">0</code> and <code class=\"codespan\">1</code> to meet most of the scenes.</p>\n<p>The picture below show the difference between `metal' and '0' in <a href=\"#globe\">g [...]
- },
- "realisticMaterial.roughnessAdjust": {
- "desc": "<p>Roughness adjustment is useful when using roughness map. The overall roughness of the texture can be adjusted. The default is <code class=\"codespan\">0.5</code>, <code class=\"codespan\">0</code> is completely smooth, <code class=\"codespan\">1</code> is completely rough.</p>\n"
- },
- "realisticMaterial.metalnessAdjust": {
- "desc": "<p>Metalness adjustment is useful when using metalness maps. The overall metallicity of the texture can be adjusted. The default is <code class=\"codespan\">0.5</code>, <code class=\"codespan\">0</code> is non-metal, <code class=\"codespan\">1</code> is metal.</p>\n"
- },
- "realisticMaterial.normalTexture": {
- "desc": "<p>Normal map of material details.</p>\n<p>Using normal maps, you can still display rich shades of detail on the surface of the object with fewer vertices.</p>\n"
- },
- "lambertMaterial": {
- "desc": "<p>The configuration item of the lambert material is valid when <a href=\"#geo3D.shading\">shading</a> is <code class=\"codespan\">'lambert'</code>.</p>\n"
- },
- "lambertMaterial.detailTexture": {
- "desc": "<p>The texture map of the material detail.</p>\n"
- },
- "lambertMaterial.textureTiling": {
- "desc": "<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n"
- },
- "lambertMaterial.textureOffset": {
- "desc": "<p>The displacement of the texture detail texture.</p>\n"
- },
- "colorMaterial": {
- "desc": "<p>The color material related configuration item is valid when <a href=\"#geo3D.shading\">shading</a> is <code class=\"codespan\">'color'</code>.</p>\n"
- },
- "colorMaterial.detailTexture": {
- "desc": "<p>The texture map of the material detail.</p>\n"
- },
- "colorMaterial.textureTiling": {
- "desc": "<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n"
- },
- "colorMaterial.textureOffset": {
- "desc": "<p>The displacement of the texture detail texture.</p>\n"
- },
- "light": {
- "desc": "<p>Light related settings. Invalid when <a href=\"#geo3D.shading\">shading</a> is 'color'.</p>\n<p>The lighting settings affect the components and all the charts on the component's coordinate system.</p>\n<p>A reasonable lighting setting can make the brightness and darkness of the whole scene richer and more layered.</p>\n"
- },
- "light.main": {
- "desc": "<p>The setting of the main light source of the scene. In the <a href=\"#globe\">globe</a> component is the sun.</p>\n"
- },
- "light.main.color": {
- "desc": "<p>The color of the main light source.</p>\n"
- },
- "light.main.intensity": {
- "desc": "<p>The intensity of the main light source.</p>\n"
- },
- "light.main.shadow": {
- "desc": "<p>Whether the main light source displays a shadow. The default is off.</p>\n<p>Turning on the shadows can bring more realistic and layered lighting to the scene. But it also increases the operating overhead of the program.</p>\n<p>The following two images show the difference between turning on the shadow and turning off the shadow.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-shadow.png\" width=\"100%\" tit [...]
- },
- "light.main.shadowQuality": {
- "desc": "<p>The quality of the shadow. You can choose <code class=\"codespan\">'low'</code>, <code class=\"codespan\">'medium'</code>, <code class=\"codespan\">'high'</code>, <code class=\"codespan\">'ultra'</code></p>\n<p>The following two images shows the difference between low quality and high quality shadows.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-shadow-low.png\" width=\"100 [...]
- },
- "light.main.alpha": {
- "desc": "<p>The main light source is around the x-axis, which is the angle of up-down rotation. Control the direction of the light with <a href=\"#geo3D.light.main.beta\">beta</a>.</p>\n<p>As the following image show:</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/light-alpha-beta.png\"></p>\n<p>The <a href=\"#globe\">globe</a> component can control the time of sunlight by <a href=\"#globe.light.main.time\">time</a>.</p>\n"
- },
- "light.main.beta": {
- "desc": "<p>The main light source is around the y-axis, which is the angle of the left-right rotation.</p>\n"
- },
- "light.ambient": {
- "desc": "<p>Global ambient light settings.</p>\n"
- },
- "light.ambient.color": {
- "desc": "<p>The color of ambient light.</p>\n"
- },
- "light.ambient.intensity": {
- "desc": "<p>The intensity of ambient light.</p>\n"
- },
- "light.ambientCubemap": {
- "desc": "<p>The ambientCubemap uses texture as the source of ambient light, which provides diffuse and specular for objects. The diffuse and specular can be set separately by <a href=\"#geo3D.light.ambientCubemap.diffuseIntensity\">diffuseIntensity</a> and <a href=\"#geo3D.light.ambientCubemap.specularIntensity\">specularIntensity</a>.</p>\n"
- },
- "light.ambientCubemap.texture": {
- "desc": "<p>The URL of the ambient cubemap supports HDR images in the <code class=\"codespan\">.hdr</code> format. You can obtained the resources for <code class=\"codespan\">.hdr</code> from <a href=\"http://www.hdrlabs.com/sibl/archive.html\" target=\"_blank\">http://www.hdrlabs.com/sibl/archive.html</a> and other websites.</p>\n<p>Example：</p>\n<pre><code class=\"lang-ts\">ambientCubemap: {\n texture: 'pisa.hdr',\n // The exposure value used when analytic hdr\n ex [...]
- },
- "light.ambientCubemap.diffuseIntensity": {
- "desc": "<p>The intensity of diffuse.</p>\n"
- },
- "light.ambientCubemap.specularIntensity": {
- "desc": "<p>The intensity of specular.</p>\n"
- },
- "postEffect": {
- "desc": "<p>Post-processing effects related configuration. It can add effects such as highlights, depth of field, screen space ambient occlusion (SSAO), toning to the picture. And it can make the whole picture more textured.</p>\n<p>The following are the differences between closing <code class=\"codespan\">postEffect</code> and opening <code class=\"codespan\">postEffect</code>.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/i [...]
- },
- "postEffect.enable": {
- "desc": "<p>Whether to enable post-processing effects. Not enabled by default.</p>\n"
- },
- "postEffect.bloom": {
- "desc": "<p>Bloom is used to reproducing the effects that occur in real cameras when taking pictures in a bright environment.\nBecause traditional RGB can only represent colors in the range of '0 - 255', so we need to use the bloom effect simulates fringes of light extending from the borders of bright areas, creating the illusion of a bright light overwhelming the camera. As shown below：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/globe-posteffect-blo [...]
- },
- "postEffect.bloom.enable": {
- "desc": "<p>Whether to enable the bloom effect.</p>\n"
- },
- "postEffect.bloom.bloomIntensity": {
- "desc": "<p>The intensity of the bloom. The default is 0.1.</p>\n"
- },
- "postEffect.depthOfField": {
- "desc": "<p>Depth of Field is a post-processing effect that simulates the focus properties of a camera. The area of focus is clear, and the area away from the focus is gradually blurred.</p>\n<p>The depth of field effect allows the observer to focus on the area of focus and make the picture feel stronger. Large depth of field can also create a macro model effect.</p>\n<p>The following are the differences between turning off and turning on the depth of field effect.</p>\n<div class=\ [...]
- },
- "postEffect.depthOfField.enable": {
- "desc": "<p>Whether to enable the depth of field.</p>\n"
- },
- "postEffect.depthOfField.focalDistance": {
- "desc": "<p>The initial focus distance. The user can click on the area to automatically focus.</p>\n"
- },
- "postEffect.depthOfField.focalRange": {
- "desc": "<p>The size of the in-focus area. The objects in this range are completely clear and there is no blurring.</p>\n"
- },
- "postEffect.depthOfField.fstop": {
- "desc": "<p>[F value] of the lens (<a href=\"https://zh.wikipedia.org/wiki/%E7%84%A6%E6%AF%94)\" target=\"_blank\">https://zh.wikipedia.org/wiki/%E7%84%A6%E6%AF%94)</a>, the smaller the value, the shallower the depth of field.</p>\n"
- },
- "postEffect.depthOfField.blurRadius": {
- "desc": "<p>Blur radius outside the focus.</p>\n<p>The difference blur effect between the different radius.</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\"></img>\n <img src=\"documents/asset/gl/img/geo-dof-large.png\" width=\"100%\" title=\"blurSize: 10\"></img>\n</div>\n"
- },
- "postEffect.screenSpaceAmbientOcclusion": {
- "desc": "<p>The ambient occlusion post-processing effect darkens the corners, holes, crevices, and areas where most light can`t reach. It is a supplement to the traditional shadow map, which makes the whole scene more natural and layered.</p>\n<p>Below is a comparison of the effects of no SSAO and 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\"></img>\n <img src=\ [...]
- },
- "postEffect.SSAO": {
- "desc": "<p>Same as <a href=\"#geo3D.postEffect.screenSpaceAmbientOcclusion\">screenSpaceAmbientOcclusion</a></p>\n"
- },
- "postEffect.SSAO.enable": {
- "desc": "<p>Whether to enable SSAO (screen space ambient occlusion). Not enabled by default.</p>\n"
- },
- "postEffect.SSAO.quality": {
- "desc": "<p>The quality of SSAO (screen space ambient occlusion). Supporting<code class=\"codespan\">'low'</code>, <code class=\"codespan\">'medium'</code>, <code class=\"codespan\">'high'</code>, <code class=\"codespan\">'ultra'</code></p>\n"
- },
- "postEffect.SSAO.radius": {
- "desc": "<p>The radius of the SSAO (screen space ambient occlusion). The larger the radius, the more natural the effect, but you need to set a higher <code class=\"codespan\">'quality'</code>.</p>\n<p>The following example is the difference between a smaller and larger radius:</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\"></img>\n <img src=\"docume [...]
- },
- "postEffect.SSAO.intensity": {
- "desc": "<p>The intensity of SSAO (screen space ambient occlusion). The larger the value, the darker the color.</p>\n"
- },
- "postEffect.colorCorrection": {
- "desc": "<p>Color correction and adjustment. Similar to Color Adjustments in Photoshop.</p>\n<p>The same scene in the figure below is adjusted to the difference between the cool color system and the warm color system.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/buildings-cold.jpg\" width=\"100%\" title=\"Cold\"></img>\n <img src=\"documents/asset/gl/img/buildings-warm.jpg\" width=\"100%\" title=\"Warm\"></img>\n</div>\n\n"
- },
- "postEffect.colorCorrection.enable": {
- "desc": "<p>Whether to enable the color correction.</p>\n"
- },
- "postEffect.colorCorrection.lookupTexture": {
- "desc": "<p>Color correction lookup texture, recommended.</p>\n<p>The color correction lookup texture is a texture image like the one below.</p>\n<p><img width=\"200\" height=\"auto\" src=\"documents/asset/gl/img/lookup.png\"></p>\n<p>This is the basic lookup texture image that you can use directly.\nTo adjust the color of the scene to the effect you want, you can take a screenshot of the scene and adjust the color to the desired effect in image processing software such as Photoshop. [...]
- },
- "postEffect.colorCorrection.exposure": {
- "desc": "<p>The exposure of the image.</p>\n"
- },
- "postEffect.colorCorrection.brightness": {
- "desc": "<p>The brightness of the image.</p>\n"
- },
- "postEffect.colorCorrection.contrast": {
- "desc": "<p>The contrast of the image.</p>\n"
- },
- "postEffect.colorCorrection.saturation": {
- "desc": "<p>The saturation of the image.</p>\n"
- },
- "postEffect.FXAA": {
- "desc": "<p>After opening <a href=\"#geo3D.postEffect\">postEffect</a>, WebGL's default MSAA (Multi Sampling Anti Aliasing) will not work. At this time, FXAA (Fast Approximate Anti-Aliasing) can solve the anti-aliasing problem quickly and easily. FXAA blurs the edge of the scene to solve the problem of aliasing. It works well on some scenes, but in echarts-gl, you need to ensure that the edges of many texts and lines are sharp and clear, so FXAA is not suitable. At this point we [...]
- },
- "postEffect.FXAA.enable": {
- "desc": "<p>Whether to enable FXAA. Not enabled by default.</p>\n"
- },
- "temporalSuperSampling": {
- "desc": "<p>Temporal supersampling. After opening <a href=\"#geo3D.postEffect\">postEffect</a>, WebGL's default MSAA (MultiSampling Anti-Aliasing) will not work, so we need to solve the problem of sampling.</p>\n<p>Temporal supersampling is an anti-aliasing method. After the picture is still, it will continue to sample multiple times and taken at several instances inside the pixel and an average color value is calculated, thus achieving anti-aliasing effect.\nAnd in this process, [...]
- },
- "temporalSuperSampling.enable": {
- "desc": "<p>Whether to enable temporal supersampling. By default, temporal supersampling is also turned on synchronously when <a href=\"#geo3D.postEffect\">postEffect</a> is turned on.</p>\n"
- },
- "viewControl": {
- "desc": "<p><code class=\"codespan\">viewControl</code> is used for mouse rotation, zooming, and other perspective control.</p>\n"
- },
- "viewControl.projection": {
- "desc": "<p>The way of projection, the default is <code class=\"codespan\">'perspective'</code> projection, also supports setting to <code class=\"codespan\">'orthogonal'</code> projection.</p>\n"
- },
- "viewControl.autoRotate": {
- "desc": "<p>Whether to enable the angle of view to automatically rotate around the object.</p>\n"
- },
- "viewControl.autoRotateDirection": {
- "desc": "<p>The direction in which the object auto rotates. The default is <code class=\"codespan\">'cw'</code> means clockwise from top to bottom, and can also use <code class=\"codespan\">'ccw'</code> means counterclockwise from top to bottom.</p>\n"
- },
- "viewControl.autoRotateSpeed": {
- "desc": "<p>The speed at which the object auto rotates. The unit is <code class=\"codespan\">angle/second</code>, the default is <code class=\"codespan\">10</code>, which is a turn of <code class=\"codespan\">36</code> seconds.</p>\n"
- },
- "viewControl.autoRotateAfterStill": {
- "desc": "<p>The time interval for automatic rotation to resume after the mouse is still. Valid after opening <a href=\"#geo3D.viewControl.autoRotate\">autoRotate</a>.</p>\n"
- },
- "viewControl.damping": {
- "desc": "<p>The damping when the mouse is rotated, zoomed, etc.\nWhen it is greater than 0, the angle of view will continue to move (rotate and zoom) due to certain inertia after the mouse is still.</p>\n"
- },
- "viewControl.rotateSensitivity": {
- "desc": "<p>The sensitivity of the rotation operation. The greater the value, the more sensitive. Supports the use of arrays to set the horizontal and vertical rotation sensitivity separately.</p>\n<p>The default is <code class=\"codespan\">1</code>.</p>\n<p>Cannot be rotated after setting to <code class=\"codespan\">0</code>.</p>\n<pre><code class=\"lang-ts\">// can't rotate\nrotateSensitivity: 0\n// can only be rotated horizontally\nrotateSensitivity: [1, 0]\n// can only rotat [...]
- },
- "viewControl.zoomSensitivity": {
- "desc": "<p>The sensitivity of the zoom operation, the larger the value, the more sensitive. The default is <code class=\"codespan\">1</code>.</p>\n<p>Can<code class=\"codespan\">t be scaled after setting to</code>0`.</p>\n"
- },
- "viewControl.panSensitivity": {
- "desc": "<p>The sensitivity of the panning operation, the greater the value, the more sensitive. Supports the use of arrays to set the horizontal and vertical translation sensitivity.</p>\n<p>The default is <code class=\"codespan\">1</code>.</p>\n<p>Cannot pan after setting to <code class=\"codespan\">0</code>.</p>\n"
- },
- "viewControl.panMouseButton": {
- "desc": "<p>The mouse button used for panning operation supports:</p>\n<ul>\n<li><p><code class=\"codespan\">'left'</code> left mouse button (default)</p>\n</li>\n<li><p><code class=\"codespan\">'middle'</code> middle mouse button</p>\n</li>\n<li><p><code class=\"codespan\">'right'</code> right mouse button</p>\n</li>\n</ul>\n<p>Note: If set to the right mouse button, the default context menu will be blocked.</p>\n"
- },
- "viewControl.rotateMouseButton": {
- "desc": "<p>The mouse button used for the rotation operation supports:</p>\n<ul>\n<li><p><code class=\"codespan\">'left'</code> left mouse button</p>\n</li>\n<li><p><code class=\"codespan\">'middle'</code> middle mouse button (default)</p>\n</li>\n<li><p><code class=\"codespan\">'right'</code> right mouse button</p>\n</li>\n</ul>\n<p>Note: If set to the right mouse button, the default context menu will be blocked.</p>\n"
- },
- "viewControl.distance": {
- "desc": "<p>The distance of the default perspective from the subject. For <a href=\"#globe\">globe</a>, the distance from the Earth's surface is the distance from the center origin for other components such as <a href=\"#grid3D\">grid3D</a> and <a href=\"#geo3D\">geo3D</a>. Valid when <a href=\"#geo3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'perspective'</code>.</p>\n"
- },
- "viewControl.minDistance": {
- "desc": "<p>The angle of view is controlled by the mouse to bring the minimum distance to the subject. Valid when <a href=\"#geo3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'perspective'</code>.</p>\n"
- },
- "viewControl.maxDistance": {
- "desc": "<p>The angle of view can be extended to the maximum distance of the subject by mouse control. Valid when <a href=\"#geo3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'perspective'</code>.</p>\n"
- },
- "viewControl.orthographicSize": {
- "desc": "<p>The size of the orthogonal projection. Valid when <a href=\"#geo3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'orthographic'</code>.</p>\n"
- },
- "viewControl.maxOrthographicSize": {
- "desc": "<p>The maximum value of the orthogonal projection scaling. Valid when <a href=\"#geo3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'orthographic'</code>.</p>\n"
- },
- "viewControl.minOrthographicSize": {
- "desc": "<p>The minimum value of the orthogonal projection scaling. Valid when <a href=\"#geo3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'orthographic'</code></p>\n"
- },
- "viewControl.alpha": {
- "desc": "<p>The angle of view is around the x-axis, which is the angle of rotation up and down. With <a href=\"#geo3D.light.main.beta\">beta</a> you can control the direction of the perspective.</p>\n<p>As shown below：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/view-alpha-beta.png\"></p>\n"
- },
- "viewControl.beta": {
- "desc": "<p>The angle of view is around the y-axis, which is the angle of rotation from left to right.</p>\n"
- },
- "viewControl.center": {
- "desc": "<p>At the center of the angle of view, the rotation will also rotate around this center point. The default is <code class=\"codespan\">[0,0,0]</code>.</p>\n"
- },
- "viewControl.minAlpha": {
- "desc": "<p>The minimum alpha value to rotate up and down. That is, the angle of view can be rotated to reach the uppermost angle.</p>\n"
- },
- "viewControl.maxAlpha": {
- "desc": "<p>The maximum alpha value to rotate up and down. That is, the angle of view can be rotated to the lowest angle.</p>\n"
- },
- "viewControl.minBeta": {
- "desc": "<p>The minimum beta value to rotate left and right. That is, the angle of view can be rotated to the leftmost angle.</p>\n"
- },
- "viewControl.maxBeta": {
- "desc": "<p>The maximum beta value to rotate left and right rotation. That is, the angle of view can be rotated to the rightmost angle.</p>\n"
- },
- "viewControl.animation": {
- "desc": "<p>Whether to enable animation.</p>\n"
- },
- "viewControl.animationDurationUpdate": {
- "desc": "<p>The duration time for update the transition animation.</p>\n"
- },
- "viewControl.animationEasingUpdate": {
- "desc": "<p>The easing effect for update transition animation.</p>\n"
- },
- "zlevel": {
- "desc": "<p>The layer in which the component is located.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and [...]
- },
- "left": {
- "desc": "<p>Distance between component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>; and it can also be <code class=\"codespan\">'left'</code>, <code class=\"codespan\">'center'</code>, or <code class=\"codespan\">'right'</code>.</p>\n<p>If [...]
- },
- "top": {
- "desc": "<p>Distance between component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>; and it can also be <code class=\"codespan\">'top'</code>, <code class=\"codespan\">'middle'</code>, or <code class=\"codespan\">'bottom'</code>.</p>\n<p>If t [...]
- },
- "right": {
- "desc": "<p>Distance between component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>.</p>\n<p> Adaptive by default.</p>\n"
- },
- "bottom": {
- "desc": "<p>Distance between component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>.</p>\n<p> Adaptive by default.</p>\n"
- },
- "width": {
- "desc": "<p> The width of the view of the component.</p>\n"
- },
- "height": {
- "desc": "<p> The height of the view of the component.</p>\n"
- }
-}
\ No newline at end of file
+{"show":{"desc":"<p>Whether to display 3D geographic coordinate system components.</p>\n"},"map":{"desc":"<p>The map type. The map type used in ECharts-gl is the same as the <a href=\"https://echarts.apache.org/en/option.html#geo.map\" target=\"_blank\">geo</a> component.</p>\n<p>EChart provides map data in two formats. One is the JS file that can be imported directly through the script tag. After it is introduced, the map name and data will be automatically registered. Another is the JS [...]
\ No newline at end of file
diff --git a/en/documents/option-gl-parts/option-gl.globe.js b/en/documents/option-gl-parts/option-gl.globe.js
index 9bf74a4c..a2572451 100644
--- a/en/documents/option-gl-parts/option-gl.globe.js
+++ b/en/documents/option-gl-parts/option-gl.globe.js
@@ -1,350 +1 @@
-window.__EC_DOC_option_gl_globe = {
- "show": {
- "desc": "<p>Whether to show the globe component.</p>\n"
- },
- "zlevel": {
- "desc": "<p>The layer in which the component is located.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and [...]
- },
- "left": {
- "desc": "<p>Distance between component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>; and it can also be <code class=\"codespan\">'left'</code>, <code class=\"codespan\">'center'</code>, or <code class=\"codespan\">'right'</code>.</p>\n<p>If [...]
- },
- "top": {
- "desc": "<p>Distance between component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>; and it can also be <code class=\"codespan\">'top'</code>, <code class=\"codespan\">'middle'</code>, or <code class=\"codespan\">'bottom'</code>.</p>\n<p>If t [...]
- },
- "right": {
- "desc": "<p>Distance between component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>.</p>\n<p> Adaptive by default.</p>\n"
- },
- "bottom": {
- "desc": "<p>Distance between component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>.</p>\n<p> Adaptive by default.</p>\n"
- },
- "width": {
- "desc": "<p> The width of the view of the component.</p>\n"
- },
- "height": {
- "desc": "<p> The height of the view of the component.</p>\n"
- },
- "globeRadius": {
- "desc": "<p>The radius of the globe. The unit is relative to the three-dimensional space, related to <a href=\"#globe.viewControl.distance\">viewControl.distance</a>.</p>\n"
- },
- "globeOuterRadius": {
- "desc": "<p>The outer radius of the globe. This area between <code class=\"codespan\">globeRadius</code> and <code class=\"codespan\">globeOuterRadius</code> will be used to display 3D histograms, scatter plots, etc.</p>\n"
- },
- "environment": {
- "desc": "<p>Environment map. Support for solid colors, gradual colors, URL of panoramic texture. The default is <code class=\"codespan\">'auto'</code>, which is used as the environment texture when <a href=\"#.light.ambientCubemap.texture\">light.ambientCubemap.texture</a> is configured. Otherwise, the environment texture is not displayed.</p>\n<p>Example:</p>\n<pre><code class=\"lang-ts\">// Configure as a panoramic texture\nenvironment: 'asset/starfield.jpg'\n// Con [...]
- },
- "baseTexture": {
- "desc": "<p>The texture of the globe. Support for the string of image paths, images object or Canvas objects.</p>\n<p>It also supports to use an echarts example as a texture directly, in which case mouse actions on Earth will be linked to the echarts instance used on the texture.</p>\n<p>Example:</p>\n<pre><code class=\"lang-ts\">// Use the globe's texture image\nbaseTexture: 'asset/earth.jpg'\n\n// Use the world map example of echarts as a texture.\nvar canvas = document [...]
- },
- "heightTexture": {
- "desc": "<p>The high texture of the globe. High textures can be used to match <a href=\"https://zh.wikipedia.org/wiki/%E5%87%B9%E5%87%B8%E8%B4%B4%E5%9B%BE\" target=\"_blank\">Bump Map</a> to show the light and dark details of the Earth's surface.\nThe following two images show the difference between using <code class=\"codespan\">heightTexture</code> and not using <code class=\"codespan\">heightTexuture</code>.</p>\n<p><img width=\"400\" height=\"auto\" src=\"documents/asset/gl/i [...]
- },
- "displacementTexture": {
- "desc": "<p>The displacement texture of the vertices of the globe, the default is the same as a <a href=\"\" target=\"_blank\">heightTexture</a></p>\n<p>Compared to bump maps, The displacement of the vertex is to directly shift the vertices according to the texture. Valid when <a href=\"#globe.displaymentScale\">displaymentScale</a> is greater than 0.</p>\n"
- },
- "displacementScale": {
- "desc": "<p>The displacement map of the globe's vertex. The default is 0, which means no displacement.\nThe following two images show the effects of setting different <code class=\"codespan\">displacementScale</code>.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/displacement-disable.png\" width=\"100%\" title=\"Scale: 0\"></img>\n <img src=\"documents/asset/gl/img/displacement-enable.png\" width=\"100%\" title=\" [...]
- },
- "displacementQuality": {
- "desc": "<p>The quality of the globe's vertex displacement. Support for <code class=\"codespan\">'low'</code>, <code class=\"codespan\">'medium'</code>, <code class=\"codespan\">'high'</code>, <code class=\"codespan\">'ultra'</code> settings.Higher quality can show more ground height detail.\nThe following two images show the effects of different <code class=\"codespan\">displacementQuality</code>.</p>\n<div class=\"twentytwenty-container\" style= [...]
- },
- "shading": {
- "desc": "<p>The coloring effect of 3D graphics in 地球. The following three coloring methods are supported in echarts-gl:</p>\n<ul>\n<li><p><code class=\"codespan\">'color'</code>\nOnly display colors, not affected by other factors such as lighting.</p>\n</li>\n<li><p><code class=\"codespan\">'lambert'</code>\nThrough the classic [lambert] coloring, can express the light and dark that the light shows.</p>\n</li>\n<li><p><code class=\"codespan\">'realistic'</code [...]
- },
- "realisticMaterial": {
- "desc": "<p>The configuration item of the realistic material is valid when <a href=\"#globe.shading\">shading</a> is <code class=\"codespan\">'realistic'</code>.</p>\n"
- },
- "realisticMaterial.detailTexture": {
- "desc": "<p>The texture map of the material detail.</p>\n"
- },
- "realisticMaterial.textureTiling": {
- "desc": "<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n"
- },
- "realisticMaterial.textureOffset": {
- "desc": "<p>The displacement of the texture detail texture.</p>\n"
- },
- "realisticMaterial.roughness": {
- "desc": "<p>The <code class=\"codespan\">roughness</code> attribute is used to indicate the roughness of the material, <code class=\"codespan\">0</code> is completely smooth, <code class=\"codespan\">1</code> is completely rough, and the middle value is between the two.</p>\n<p>The following images show the effect of <code class=\"codespan\">roughness</code> in <a href=\"#globe\"><code class=\"codespan\">globe</code></a> <code class=\"codespan\">0.2</code> (smooth) and <code class=\" [...]
- },
- "realisticMaterial.metalness": {
- "desc": "<p>The <code class=\"codespan\">metalness</code> attribute is used to indicate whether the material is metal or non-metal, <code class=\"codespan\">0</code> is non-metallic, <code class=\"codespan\">1</code> is metal, and the middle value is between the two. Usually set to <code class=\"codespan\">0</code> and <code class=\"codespan\">1</code> to meet most of the scenes.</p>\n<p>The picture below show the difference between `metal' and '0' in <a href=\"#globe\">g [...]
- },
- "realisticMaterial.roughnessAdjust": {
- "desc": "<p>Roughness adjustment is useful when using roughness map. The overall roughness of the texture can be adjusted. The default is <code class=\"codespan\">0.5</code>, <code class=\"codespan\">0</code> is completely smooth, <code class=\"codespan\">1</code> is completely rough.</p>\n"
- },
- "realisticMaterial.metalnessAdjust": {
- "desc": "<p>Metalness adjustment is useful when using metalness maps. The overall metallicity of the texture can be adjusted. The default is <code class=\"codespan\">0.5</code>, <code class=\"codespan\">0</code> is non-metal, <code class=\"codespan\">1</code> is metal.</p>\n"
- },
- "realisticMaterial.normalTexture": {
- "desc": "<p>Normal map of material details.</p>\n<p>Using normal maps, you can still display rich shades of detail on the surface of the object with fewer vertices.</p>\n"
- },
- "lambertMaterial": {
- "desc": "<p>The configuration item of the lambert material is valid when <a href=\"#globe.shading\">shading</a> is <code class=\"codespan\">'lambert'</code>.</p>\n"
- },
- "lambertMaterial.detailTexture": {
- "desc": "<p>The texture map of the material detail.</p>\n"
- },
- "lambertMaterial.textureTiling": {
- "desc": "<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n"
- },
- "lambertMaterial.textureOffset": {
- "desc": "<p>The displacement of the texture detail texture.</p>\n"
- },
- "colorMaterial": {
- "desc": "<p>The color material related configuration item is valid when <a href=\"#globe.shading\">shading</a> is <code class=\"codespan\">'color'</code>.</p>\n"
- },
- "colorMaterial.detailTexture": {
- "desc": "<p>The texture map of the material detail.</p>\n"
- },
- "colorMaterial.textureTiling": {
- "desc": "<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n"
- },
- "colorMaterial.textureOffset": {
- "desc": "<p>The displacement of the texture detail texture.</p>\n"
- },
- "light": {
- "desc": "<p>Light related settings. Invalid when <a href=\"#globe.shading\">shading</a> is 'color'.</p>\n<p>The lighting settings affect the components and all the charts on the component's coordinate system.</p>\n<p>A reasonable lighting setting can make the brightness and darkness of the whole scene richer and more layered.</p>\n"
- },
- "light.main": {
- "desc": "<p>The setting of the main light source of the scene. In the <a href=\"#globe\">globe</a> component is the sun.</p>\n"
- },
- "light.main.color": {
- "desc": "<p>The color of the main light source.</p>\n"
- },
- "light.main.intensity": {
- "desc": "<p>The intensity of the main light source.</p>\n"
- },
- "light.main.shadow": {
- "desc": "<p>Whether the main light source displays a shadow. The default is off.</p>\n<p>Turning on the shadows can bring more realistic and layered lighting to the scene. But it also increases the operating overhead of the program.</p>\n<p>The following two images show the difference between turning on the shadow and turning off the shadow.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-shadow.png\" width=\"100%\" tit [...]
- },
- "light.main.shadowQuality": {
- "desc": "<p>The quality of the shadow. You can choose <code class=\"codespan\">'low'</code>, <code class=\"codespan\">'medium'</code>, <code class=\"codespan\">'high'</code>, <code class=\"codespan\">'ultra'</code></p>\n<p>The following two images shows the difference between low quality and high quality shadows.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-shadow-low.png\" width=\"100 [...]
- },
- "light.main.alpha": {
- "desc": "<p>The main light source is around the x-axis, which is the angle of up-down rotation. Control the direction of the light with <a href=\"#globe.light.main.beta\">beta</a>.</p>\n<p>As the following image show:</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/light-alpha-beta.png\"></p>\n<p>The <a href=\"#globe\">globe</a> component can control the time of sunlight by <a href=\"#globe.light.main.time\">time</a>.</p>\n"
- },
- "light.main.beta": {
- "desc": "<p>The main light source is around the y-axis, which is the angle of the left-right rotation.</p>\n"
- },
- "light.main.time": {
- "desc": "<p>The time of sunshine. The current system time is used by default.</p>\n"
- },
- "light.ambient": {
- "desc": "<p>Global ambient light settings.</p>\n"
- },
- "light.ambient.color": {
- "desc": "<p>The color of ambient light.</p>\n"
- },
- "light.ambient.intensity": {
- "desc": "<p>The intensity of ambient light.</p>\n"
- },
- "light.ambientCubemap": {
- "desc": "<p>The ambientCubemap uses texture as the source of ambient light, which provides diffuse and specular for objects. The diffuse and specular can be set separately by <a href=\"#globe.light.ambientCubemap.diffuseIntensity\">diffuseIntensity</a> and <a href=\"#globe.light.ambientCubemap.specularIntensity\">specularIntensity</a>.</p>\n"
- },
- "light.ambientCubemap.texture": {
- "desc": "<p>The URL of the ambient cubemap supports HDR images in the <code class=\"codespan\">.hdr</code> format. You can obtained the resources for <code class=\"codespan\">.hdr</code> from <a href=\"http://www.hdrlabs.com/sibl/archive.html\" target=\"_blank\">http://www.hdrlabs.com/sibl/archive.html</a> and other websites.</p>\n<p>Example：</p>\n<pre><code class=\"lang-ts\">ambientCubemap: {\n texture: 'pisa.hdr',\n // The exposure value used when analytic hdr\n ex [...]
- },
- "light.ambientCubemap.diffuseIntensity": {
- "desc": "<p>The intensity of diffuse.</p>\n"
- },
- "light.ambientCubemap.specularIntensity": {
- "desc": "<p>The intensity of specular.</p>\n"
- },
- "postEffect": {
- "desc": "<p>Post-processing effects related configuration. It can add effects such as highlights, depth of field, screen space ambient occlusion (SSAO), toning to the picture. And it can make the whole picture more textured.</p>\n<p>The following are the differences between closing <code class=\"codespan\">postEffect</code> and opening <code class=\"codespan\">postEffect</code>.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/i [...]
- },
- "postEffect.enable": {
- "desc": "<p>Whether to enable post-processing effects. Not enabled by default.</p>\n"
- },
- "postEffect.bloom": {
- "desc": "<p>Bloom is used to reproducing the effects that occur in real cameras when taking pictures in a bright environment.\nBecause traditional RGB can only represent colors in the range of '0 - 255', so we need to use the bloom effect simulates fringes of light extending from the borders of bright areas, creating the illusion of a bright light overwhelming the camera. As shown below：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/globe-posteffect-blo [...]
- },
- "postEffect.bloom.enable": {
- "desc": "<p>Whether to enable the bloom effect.</p>\n"
- },
- "postEffect.bloom.bloomIntensity": {
- "desc": "<p>The intensity of the bloom. The default is 0.1.</p>\n"
- },
- "postEffect.depthOfField": {
- "desc": "<p>Depth of Field is a post-processing effect that simulates the focus properties of a camera. The area of focus is clear, and the area away from the focus is gradually blurred.</p>\n<p>The depth of field effect allows the observer to focus on the area of focus and make the picture feel stronger. Large depth of field can also create a macro model effect.</p>\n<p>The following are the differences between turning off and turning on the depth of field effect.</p>\n<div class=\ [...]
- },
- "postEffect.depthOfField.enable": {
- "desc": "<p>Whether to enable the depth of field.</p>\n"
- },
- "postEffect.depthOfField.focalDistance": {
- "desc": "<p>The initial focus distance. The user can click on the area to automatically focus.</p>\n"
- },
- "postEffect.depthOfField.focalRange": {
- "desc": "<p>The size of the in-focus area. The objects in this range are completely clear and there is no blurring.</p>\n"
- },
- "postEffect.depthOfField.fstop": {
- "desc": "<p>[F value] of the lens (<a href=\"https://zh.wikipedia.org/wiki/%E7%84%A6%E6%AF%94)\" target=\"_blank\">https://zh.wikipedia.org/wiki/%E7%84%A6%E6%AF%94)</a>, the smaller the value, the shallower the depth of field.</p>\n"
- },
- "postEffect.depthOfField.blurRadius": {
- "desc": "<p>Blur radius outside the focus.</p>\n<p>The difference blur effect between the different radius.</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\"></img>\n <img src=\"documents/asset/gl/img/geo-dof-large.png\" width=\"100%\" title=\"blurSize: 10\"></img>\n</div>\n"
- },
- "postEffect.screenSpaceAmbientOcclusion": {
- "desc": "<p>The ambient occlusion post-processing effect darkens the corners, holes, crevices, and areas where most light can`t reach. It is a supplement to the traditional shadow map, which makes the whole scene more natural and layered.</p>\n<p>Below is a comparison of the effects of no SSAO and 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\"></img>\n <img src=\ [...]
- },
- "postEffect.SSAO": {
- "desc": "<p>Same as <a href=\"#globe.postEffect.screenSpaceAmbientOcclusion\">screenSpaceAmbientOcclusion</a></p>\n"
- },
- "postEffect.SSAO.enable": {
- "desc": "<p>Whether to enable SSAO (screen space ambient occlusion). Not enabled by default.</p>\n"
- },
- "postEffect.SSAO.quality": {
- "desc": "<p>The quality of SSAO (screen space ambient occlusion). Supporting<code class=\"codespan\">'low'</code>, <code class=\"codespan\">'medium'</code>, <code class=\"codespan\">'high'</code>, <code class=\"codespan\">'ultra'</code></p>\n"
- },
- "postEffect.SSAO.radius": {
- "desc": "<p>The radius of the SSAO (screen space ambient occlusion). The larger the radius, the more natural the effect, but you need to set a higher <code class=\"codespan\">'quality'</code>.</p>\n<p>The following example is the difference between a smaller and larger radius:</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\"></img>\n <img src=\"docume [...]
- },
- "postEffect.SSAO.intensity": {
- "desc": "<p>The intensity of SSAO (screen space ambient occlusion). The larger the value, the darker the color.</p>\n"
- },
- "postEffect.colorCorrection": {
- "desc": "<p>Color correction and adjustment. Similar to Color Adjustments in Photoshop.</p>\n<p>The same scene in the figure below is adjusted to the difference between the cool color system and the warm color system.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/buildings-cold.jpg\" width=\"100%\" title=\"Cold\"></img>\n <img src=\"documents/asset/gl/img/buildings-warm.jpg\" width=\"100%\" title=\"Warm\"></img>\n</div>\n\n"
- },
- "postEffect.colorCorrection.enable": {
- "desc": "<p>Whether to enable the color correction.</p>\n"
- },
- "postEffect.colorCorrection.lookupTexture": {
- "desc": "<p>Color correction lookup texture, recommended.</p>\n<p>The color correction lookup texture is a texture image like the one below.</p>\n<p><img width=\"200\" height=\"auto\" src=\"documents/asset/gl/img/lookup.png\"></p>\n<p>This is the basic lookup texture image that you can use directly.\nTo adjust the color of the scene to the effect you want, you can take a screenshot of the scene and adjust the color to the desired effect in image processing software such as Photoshop. [...]
- },
- "postEffect.colorCorrection.exposure": {
- "desc": "<p>The exposure of the image.</p>\n"
- },
- "postEffect.colorCorrection.brightness": {
- "desc": "<p>The brightness of the image.</p>\n"
- },
- "postEffect.colorCorrection.contrast": {
- "desc": "<p>The contrast of the image.</p>\n"
- },
- "postEffect.colorCorrection.saturation": {
- "desc": "<p>The saturation of the image.</p>\n"
- },
- "postEffect.FXAA": {
- "desc": "<p>After opening <a href=\"#globe.postEffect\">postEffect</a>, WebGL's default MSAA (Multi Sampling Anti Aliasing) will not work. At this time, FXAA (Fast Approximate Anti-Aliasing) can solve the anti-aliasing problem quickly and easily. FXAA blurs the edge of the scene to solve the problem of aliasing. It works well on some scenes, but in echarts-gl, you need to ensure that the edges of many texts and lines are sharp and clear, so FXAA is not suitable. At this point we [...]
- },
- "postEffect.FXAA.enable": {
- "desc": "<p>Whether to enable FXAA. Not enabled by default.</p>\n"
- },
- "temporalSuperSampling": {
- "desc": "<p>Temporal supersampling. After opening <a href=\"#globe.postEffect\">postEffect</a>, WebGL's default MSAA (MultiSampling Anti-Aliasing) will not work, so we need to solve the problem of sampling.</p>\n<p>Temporal supersampling is an anti-aliasing method. After the picture is still, it will continue to sample multiple times and taken at several instances inside the pixel and an average color value is calculated, thus achieving anti-aliasing effect.\nAnd in this process, [...]
- },
- "temporalSuperSampling.enable": {
- "desc": "<p>Whether to enable temporal supersampling. By default, temporal supersampling is also turned on synchronously when <a href=\"#globe.postEffect\">postEffect</a> is turned on.</p>\n"
- },
- "viewControl": {
- "desc": "<p><code class=\"codespan\">viewControl</code> is used for mouse rotation, zooming, and other perspective control.</p>\n"
- },
- "viewControl.projection": {
- "desc": "<p>The way of projection, the default is <code class=\"codespan\">'perspective'</code> projection, also supports setting to <code class=\"codespan\">'orthogonal'</code> projection.</p>\n"
- },
- "viewControl.autoRotate": {
- "desc": "<p>Whether to enable the angle of view to automatically rotate around the object.</p>\n"
- },
- "viewControl.autoRotateDirection": {
- "desc": "<p>The direction in which the object auto rotates. The default is <code class=\"codespan\">'cw'</code> means clockwise from top to bottom, and can also use <code class=\"codespan\">'ccw'</code> means counterclockwise from top to bottom.</p>\n"
- },
- "viewControl.autoRotateSpeed": {
- "desc": "<p>The speed at which the object auto rotates. The unit is <code class=\"codespan\">angle/second</code>, the default is <code class=\"codespan\">10</code>, which is a turn of <code class=\"codespan\">36</code> seconds.</p>\n"
- },
- "viewControl.autoRotateAfterStill": {
- "desc": "<p>The time interval for automatic rotation to resume after the mouse is still. Valid after opening <a href=\"#globe.viewControl.autoRotate\">autoRotate</a>.</p>\n"
- },
- "viewControl.damping": {
- "desc": "<p>The damping when the mouse is rotated, zoomed, etc.\nWhen it is greater than 0, the angle of view will continue to move (rotate and zoom) due to certain inertia after the mouse is still.</p>\n"
- },
- "viewControl.rotateSensitivity": {
- "desc": "<p>The sensitivity of the rotation operation. The greater the value, the more sensitive. Supports the use of arrays to set the horizontal and vertical rotation sensitivity separately.</p>\n<p>The default is <code class=\"codespan\">1</code>.</p>\n<p>Cannot be rotated after setting to <code class=\"codespan\">0</code>.</p>\n<pre><code class=\"lang-ts\">// can't rotate\nrotateSensitivity: 0\n// can only be rotated horizontally\nrotateSensitivity: [1, 0]\n// can only rotat [...]
- },
- "viewControl.zoomSensitivity": {
- "desc": "<p>The sensitivity of the zoom operation, the larger the value, the more sensitive. The default is <code class=\"codespan\">1</code>.</p>\n<p>Can<code class=\"codespan\">t be scaled after setting to</code>0`.</p>\n"
- },
- "viewControl.panSensitivity": {
- "desc": "<p>The sensitivity of the panning operation, the greater the value, the more sensitive. Supports the use of arrays to set the horizontal and vertical translation sensitivity.</p>\n<p>The default is <code class=\"codespan\">1</code>.</p>\n<p>Cannot pan after setting to <code class=\"codespan\">0</code>.</p>\n"
- },
- "viewControl.panMouseButton": {
- "desc": "<p>The mouse button used for panning operation supports:</p>\n<ul>\n<li><p><code class=\"codespan\">'left'</code> left mouse button (default)</p>\n</li>\n<li><p><code class=\"codespan\">'middle'</code> middle mouse button</p>\n</li>\n<li><p><code class=\"codespan\">'right'</code> right mouse button</p>\n</li>\n</ul>\n<p>Note: If set to the right mouse button, the default context menu will be blocked.</p>\n"
- },
- "viewControl.rotateMouseButton": {
- "desc": "<p>The mouse button used for the rotation operation supports:</p>\n<ul>\n<li><p><code class=\"codespan\">'left'</code> left mouse button</p>\n</li>\n<li><p><code class=\"codespan\">'middle'</code> middle mouse button (default)</p>\n</li>\n<li><p><code class=\"codespan\">'right'</code> right mouse button</p>\n</li>\n</ul>\n<p>Note: If set to the right mouse button, the default context menu will be blocked.</p>\n"
- },
- "viewControl.distance": {
- "desc": "<p>The distance of the default perspective from the subject. For <a href=\"#globe\">globe</a>, the distance from the Earth's surface is the distance from the center origin for other components such as <a href=\"#grid3D\">grid3D</a> and <a href=\"#geo3D\">geo3D</a>. Valid when <a href=\"#globe.viewControl.projection\">projection</a> is <code class=\"codespan\">'perspective'</code>.</p>\n"
- },
- "viewControl.minDistance": {
- "desc": "<p>The angle of view is controlled by the mouse to bring the minimum distance to the subject. Valid when <a href=\"#globe.viewControl.projection\">projection</a> is <code class=\"codespan\">'perspective'</code>.</p>\n"
- },
- "viewControl.maxDistance": {
- "desc": "<p>The angle of view can be extended to the maximum distance of the subject by mouse control. Valid when <a href=\"#globe.viewControl.projection\">projection</a> is <code class=\"codespan\">'perspective'</code>.</p>\n"
- },
- "viewControl.orthographicSize": {
- "desc": "<p>The size of the orthogonal projection. Valid when <a href=\"#globe.viewControl.projection\">projection</a> is <code class=\"codespan\">'orthographic'</code>.</p>\n"
- },
- "viewControl.maxOrthographicSize": {
- "desc": "<p>The maximum value of the orthogonal projection scaling. Valid when <a href=\"#globe.viewControl.projection\">projection</a> is <code class=\"codespan\">'orthographic'</code>.</p>\n"
- },
- "viewControl.minOrthographicSize": {
- "desc": "<p>The minimum value of the orthogonal projection scaling. Valid when <a href=\"#globe.viewControl.projection\">projection</a> is <code class=\"codespan\">'orthographic'</code></p>\n"
- },
- "viewControl.alpha": {
- "desc": "<p>The angle of view is around the x-axis, which is the angle of rotation up and down. With <a href=\"#globe.light.main.beta\">beta</a> you can control the direction of the perspective.</p>\n<p>As shown below：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/view-alpha-beta.png\"></p>\n"
- },
- "viewControl.beta": {
- "desc": "<p>The angle of view is around the y-axis, which is the angle of rotation from left to right.</p>\n"
- },
- "viewControl.center": {
- "desc": "<p>At the center of the angle of view, the rotation will also rotate around this center point. The default is <code class=\"codespan\">[0,0,0]</code>.</p>\n"
- },
- "viewControl.minAlpha": {
- "desc": "<p>The minimum alpha value to rotate up and down. That is, the angle of view can be rotated to reach the uppermost angle.</p>\n"
- },
- "viewControl.maxAlpha": {
- "desc": "<p>The maximum alpha value to rotate up and down. That is, the angle of view can be rotated to the lowest angle.</p>\n"
- },
- "viewControl.minBeta": {
- "desc": "<p>The minimum beta value to rotate left and right. That is, the angle of view can be rotated to the leftmost angle.</p>\n"
- },
- "viewControl.maxBeta": {
- "desc": "<p>The maximum beta value to rotate left and right rotation. That is, the angle of view can be rotated to the rightmost angle.</p>\n"
- },
- "viewControl.animation": {
- "desc": "<p>Whether to enable animation.</p>\n"
- },
- "viewControl.animationDurationUpdate": {
- "desc": "<p>The duration time for update the transition animation.</p>\n"
- },
- "viewControl.animationEasingUpdate": {
- "desc": "<p>The easing effect for update transition animation.</p>\n"
- },
- "viewControl.targetCoord": {
- "desc": "<p>Position the longitudes and latitudes.\nIgnore <a href=\"#globe.viewControl.alpha\">alpha</a> 和 <a href=\"#globe.viewControl.beta\">beta</a> after the setting.</p>\n<pre><code class=\"lang-ts\">viewControl: {\n // locate in BeiJing\n targetCoord: [116.46, 39.92]\n}\n</code></pre>\n"
- },
- "layers": {
- "desc": "<p>Configuration of the Earth's Surface Layer.\nYou can use this configuration item to add clouds, or to supplement <a href=\"#globe. baseTexture\">baseTexture</a> to draw the outline of the country, and so on.</p>\n"
- },
- "layers.show": {
- "desc": "<p>Whether to show this layer.</p>\n"
- },
- "layers.type": {
- "desc": "<p>Layper type, Optional：</p>\n<ul>\n<li><code class=\"codespan\">'overlay'</code></li>\n</ul>\n<p>The overlay on the ground surface can be used to display clouds and the like.</p>\n<ul>\n<li><code class=\"codespan\">'blend'</code></li>\n</ul>\n<p>Mix with <a href=\"#globe.baseTexture\">baseTexture</a>.</p>\n"
- },
- "layers.name": {
- "desc": "<p>The name of the layer. When setting the properties of the layer with setOption, you can use the name to identify the layer that needs to be updated.</p>\n<pre><code class=\"lang-ts\">chart.setOption({\n globe: {\n layer: [{\n // Update the texture of the layer named 'cloud'\n name: 'cloud',\n texture: 'cloud.png'\n }]\n }\n});\n</code></pre>\n"
- },
- "layers.blendTo": {
- "desc": "<p>When <a href=\"#globe.layers.type\">type</a> is <code class=\"codespan\">'blend'</code> is valid .</p>\n<p>Optional：</p>\n<ul>\n<li><p><code class=\"codespan\">albedo</code> is mixed to albedo, affected by lighting.</p>\n</li>\n<li><p><code class=\"codespan\">emission</code> is mixed to self-illuminating, unaffected by light.</p>\n</li>\n</ul>\n"
- },
- "layers.intensity": {
- "desc": "<p>The intensity of the mixture.</p>\n"
- },
- "layers.shading": {
- "desc": "<p>The coloring effect of the overlay is the same as <a href=\"#globe.shading\">globe.shading</a>, which supports <code class=\"codespan\">'color'</code>, <code class=\"codespan\">'lambert'</code>, <code class=\"codespan\">'realistic'</code></p>\n<p>Valid when <a href=\"globe.layers.type\" target=\"_blank\">type</a> is <code class=\"codespan\">'overlay'</code>.</p>\n"
- },
- "layers.distance": {
- "desc": "<p>The distance from the overlay to the surface of the globe.</p>\n<p>Valid when <a href=\"#globe.layers.type\">type</a> is <code class=\"codespan\">'overlay'</code>.</p>\n"
- },
- "layers.texture": {
- "desc": "<p>The texture of the globe. Support for the string of image paths, images object or Canvas objects.</p>\n<p>It also supports to use an echarts example as a texture directly, in which case mouse actions on Earth will be linked to the echarts instance used on the texture.</p>\n"
- }
-}
\ No newline at end of file
+window.__EC_DOC_option_gl_globe = {"show":{"desc":"<p>Whether to show the globe component.</p>\n"},"zlevel":{"desc":"<p>The layer in which the component is located.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separ [...]
\ No newline at end of file
diff --git a/en/documents/option-gl-parts/option-gl.globe.json b/en/documents/option-gl-parts/option-gl.globe.json
index d583cd5e..b5e93d2c 100644
--- a/en/documents/option-gl-parts/option-gl.globe.json
+++ b/en/documents/option-gl-parts/option-gl.globe.json
@@ -1,350 +1 @@
-{
- "show": {
- "desc": "<p>Whether to show the globe component.</p>\n"
- },
- "zlevel": {
- "desc": "<p>The layer in which the component is located.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and [...]
- },
- "left": {
- "desc": "<p>Distance between component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>; and it can also be <code class=\"codespan\">'left'</code>, <code class=\"codespan\">'center'</code>, or <code class=\"codespan\">'right'</code>.</p>\n<p>If [...]
- },
- "top": {
- "desc": "<p>Distance between component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>; and it can also be <code class=\"codespan\">'top'</code>, <code class=\"codespan\">'middle'</code>, or <code class=\"codespan\">'bottom'</code>.</p>\n<p>If t [...]
- },
- "right": {
- "desc": "<p>Distance between component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>.</p>\n<p> Adaptive by default.</p>\n"
- },
- "bottom": {
- "desc": "<p>Distance between component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>.</p>\n<p> Adaptive by default.</p>\n"
- },
- "width": {
- "desc": "<p> The width of the view of the component.</p>\n"
- },
- "height": {
- "desc": "<p> The height of the view of the component.</p>\n"
- },
- "globeRadius": {
- "desc": "<p>The radius of the globe. The unit is relative to the three-dimensional space, related to <a href=\"#globe.viewControl.distance\">viewControl.distance</a>.</p>\n"
- },
- "globeOuterRadius": {
- "desc": "<p>The outer radius of the globe. This area between <code class=\"codespan\">globeRadius</code> and <code class=\"codespan\">globeOuterRadius</code> will be used to display 3D histograms, scatter plots, etc.</p>\n"
- },
- "environment": {
- "desc": "<p>Environment map. Support for solid colors, gradual colors, URL of panoramic texture. The default is <code class=\"codespan\">'auto'</code>, which is used as the environment texture when <a href=\"#.light.ambientCubemap.texture\">light.ambientCubemap.texture</a> is configured. Otherwise, the environment texture is not displayed.</p>\n<p>Example:</p>\n<pre><code class=\"lang-ts\">// Configure as a panoramic texture\nenvironment: 'asset/starfield.jpg'\n// Con [...]
- },
- "baseTexture": {
- "desc": "<p>The texture of the globe. Support for the string of image paths, images object or Canvas objects.</p>\n<p>It also supports to use an echarts example as a texture directly, in which case mouse actions on Earth will be linked to the echarts instance used on the texture.</p>\n<p>Example:</p>\n<pre><code class=\"lang-ts\">// Use the globe's texture image\nbaseTexture: 'asset/earth.jpg'\n\n// Use the world map example of echarts as a texture.\nvar canvas = document [...]
- },
- "heightTexture": {
- "desc": "<p>The high texture of the globe. High textures can be used to match <a href=\"https://zh.wikipedia.org/wiki/%E5%87%B9%E5%87%B8%E8%B4%B4%E5%9B%BE\" target=\"_blank\">Bump Map</a> to show the light and dark details of the Earth's surface.\nThe following two images show the difference between using <code class=\"codespan\">heightTexture</code> and not using <code class=\"codespan\">heightTexuture</code>.</p>\n<p><img width=\"400\" height=\"auto\" src=\"documents/asset/gl/i [...]
- },
- "displacementTexture": {
- "desc": "<p>The displacement texture of the vertices of the globe, the default is the same as a <a href=\"\" target=\"_blank\">heightTexture</a></p>\n<p>Compared to bump maps, The displacement of the vertex is to directly shift the vertices according to the texture. Valid when <a href=\"#globe.displaymentScale\">displaymentScale</a> is greater than 0.</p>\n"
- },
- "displacementScale": {
- "desc": "<p>The displacement map of the globe's vertex. The default is 0, which means no displacement.\nThe following two images show the effects of setting different <code class=\"codespan\">displacementScale</code>.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/displacement-disable.png\" width=\"100%\" title=\"Scale: 0\"></img>\n <img src=\"documents/asset/gl/img/displacement-enable.png\" width=\"100%\" title=\" [...]
- },
- "displacementQuality": {
- "desc": "<p>The quality of the globe's vertex displacement. Support for <code class=\"codespan\">'low'</code>, <code class=\"codespan\">'medium'</code>, <code class=\"codespan\">'high'</code>, <code class=\"codespan\">'ultra'</code> settings.Higher quality can show more ground height detail.\nThe following two images show the effects of different <code class=\"codespan\">displacementQuality</code>.</p>\n<div class=\"twentytwenty-container\" style= [...]
- },
- "shading": {
- "desc": "<p>The coloring effect of 3D graphics in 地球. The following three coloring methods are supported in echarts-gl:</p>\n<ul>\n<li><p><code class=\"codespan\">'color'</code>\nOnly display colors, not affected by other factors such as lighting.</p>\n</li>\n<li><p><code class=\"codespan\">'lambert'</code>\nThrough the classic [lambert] coloring, can express the light and dark that the light shows.</p>\n</li>\n<li><p><code class=\"codespan\">'realistic'</code [...]
- },
- "realisticMaterial": {
- "desc": "<p>The configuration item of the realistic material is valid when <a href=\"#globe.shading\">shading</a> is <code class=\"codespan\">'realistic'</code>.</p>\n"
- },
- "realisticMaterial.detailTexture": {
- "desc": "<p>The texture map of the material detail.</p>\n"
- },
- "realisticMaterial.textureTiling": {
- "desc": "<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n"
- },
- "realisticMaterial.textureOffset": {
- "desc": "<p>The displacement of the texture detail texture.</p>\n"
- },
- "realisticMaterial.roughness": {
- "desc": "<p>The <code class=\"codespan\">roughness</code> attribute is used to indicate the roughness of the material, <code class=\"codespan\">0</code> is completely smooth, <code class=\"codespan\">1</code> is completely rough, and the middle value is between the two.</p>\n<p>The following images show the effect of <code class=\"codespan\">roughness</code> in <a href=\"#globe\"><code class=\"codespan\">globe</code></a> <code class=\"codespan\">0.2</code> (smooth) and <code class=\" [...]
- },
- "realisticMaterial.metalness": {
- "desc": "<p>The <code class=\"codespan\">metalness</code> attribute is used to indicate whether the material is metal or non-metal, <code class=\"codespan\">0</code> is non-metallic, <code class=\"codespan\">1</code> is metal, and the middle value is between the two. Usually set to <code class=\"codespan\">0</code> and <code class=\"codespan\">1</code> to meet most of the scenes.</p>\n<p>The picture below show the difference between `metal' and '0' in <a href=\"#globe\">g [...]
- },
- "realisticMaterial.roughnessAdjust": {
- "desc": "<p>Roughness adjustment is useful when using roughness map. The overall roughness of the texture can be adjusted. The default is <code class=\"codespan\">0.5</code>, <code class=\"codespan\">0</code> is completely smooth, <code class=\"codespan\">1</code> is completely rough.</p>\n"
- },
- "realisticMaterial.metalnessAdjust": {
- "desc": "<p>Metalness adjustment is useful when using metalness maps. The overall metallicity of the texture can be adjusted. The default is <code class=\"codespan\">0.5</code>, <code class=\"codespan\">0</code> is non-metal, <code class=\"codespan\">1</code> is metal.</p>\n"
- },
- "realisticMaterial.normalTexture": {
- "desc": "<p>Normal map of material details.</p>\n<p>Using normal maps, you can still display rich shades of detail on the surface of the object with fewer vertices.</p>\n"
- },
- "lambertMaterial": {
- "desc": "<p>The configuration item of the lambert material is valid when <a href=\"#globe.shading\">shading</a> is <code class=\"codespan\">'lambert'</code>.</p>\n"
- },
- "lambertMaterial.detailTexture": {
- "desc": "<p>The texture map of the material detail.</p>\n"
- },
- "lambertMaterial.textureTiling": {
- "desc": "<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n"
- },
- "lambertMaterial.textureOffset": {
- "desc": "<p>The displacement of the texture detail texture.</p>\n"
- },
- "colorMaterial": {
- "desc": "<p>The color material related configuration item is valid when <a href=\"#globe.shading\">shading</a> is <code class=\"codespan\">'color'</code>.</p>\n"
- },
- "colorMaterial.detailTexture": {
- "desc": "<p>The texture map of the material detail.</p>\n"
- },
- "colorMaterial.textureTiling": {
- "desc": "<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n"
- },
- "colorMaterial.textureOffset": {
- "desc": "<p>The displacement of the texture detail texture.</p>\n"
- },
- "light": {
- "desc": "<p>Light related settings. Invalid when <a href=\"#globe.shading\">shading</a> is 'color'.</p>\n<p>The lighting settings affect the components and all the charts on the component's coordinate system.</p>\n<p>A reasonable lighting setting can make the brightness and darkness of the whole scene richer and more layered.</p>\n"
- },
- "light.main": {
- "desc": "<p>The setting of the main light source of the scene. In the <a href=\"#globe\">globe</a> component is the sun.</p>\n"
- },
- "light.main.color": {
- "desc": "<p>The color of the main light source.</p>\n"
- },
- "light.main.intensity": {
- "desc": "<p>The intensity of the main light source.</p>\n"
- },
- "light.main.shadow": {
- "desc": "<p>Whether the main light source displays a shadow. The default is off.</p>\n<p>Turning on the shadows can bring more realistic and layered lighting to the scene. But it also increases the operating overhead of the program.</p>\n<p>The following two images show the difference between turning on the shadow and turning off the shadow.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-shadow.png\" width=\"100%\" tit [...]
- },
- "light.main.shadowQuality": {
- "desc": "<p>The quality of the shadow. You can choose <code class=\"codespan\">'low'</code>, <code class=\"codespan\">'medium'</code>, <code class=\"codespan\">'high'</code>, <code class=\"codespan\">'ultra'</code></p>\n<p>The following two images shows the difference between low quality and high quality shadows.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-shadow-low.png\" width=\"100 [...]
- },
- "light.main.alpha": {
- "desc": "<p>The main light source is around the x-axis, which is the angle of up-down rotation. Control the direction of the light with <a href=\"#globe.light.main.beta\">beta</a>.</p>\n<p>As the following image show:</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/light-alpha-beta.png\"></p>\n<p>The <a href=\"#globe\">globe</a> component can control the time of sunlight by <a href=\"#globe.light.main.time\">time</a>.</p>\n"
- },
- "light.main.beta": {
- "desc": "<p>The main light source is around the y-axis, which is the angle of the left-right rotation.</p>\n"
- },
- "light.main.time": {
- "desc": "<p>The time of sunshine. The current system time is used by default.</p>\n"
- },
- "light.ambient": {
- "desc": "<p>Global ambient light settings.</p>\n"
- },
- "light.ambient.color": {
- "desc": "<p>The color of ambient light.</p>\n"
- },
- "light.ambient.intensity": {
- "desc": "<p>The intensity of ambient light.</p>\n"
- },
- "light.ambientCubemap": {
- "desc": "<p>The ambientCubemap uses texture as the source of ambient light, which provides diffuse and specular for objects. The diffuse and specular can be set separately by <a href=\"#globe.light.ambientCubemap.diffuseIntensity\">diffuseIntensity</a> and <a href=\"#globe.light.ambientCubemap.specularIntensity\">specularIntensity</a>.</p>\n"
- },
- "light.ambientCubemap.texture": {
- "desc": "<p>The URL of the ambient cubemap supports HDR images in the <code class=\"codespan\">.hdr</code> format. You can obtained the resources for <code class=\"codespan\">.hdr</code> from <a href=\"http://www.hdrlabs.com/sibl/archive.html\" target=\"_blank\">http://www.hdrlabs.com/sibl/archive.html</a> and other websites.</p>\n<p>Example：</p>\n<pre><code class=\"lang-ts\">ambientCubemap: {\n texture: 'pisa.hdr',\n // The exposure value used when analytic hdr\n ex [...]
- },
- "light.ambientCubemap.diffuseIntensity": {
- "desc": "<p>The intensity of diffuse.</p>\n"
- },
- "light.ambientCubemap.specularIntensity": {
- "desc": "<p>The intensity of specular.</p>\n"
- },
- "postEffect": {
- "desc": "<p>Post-processing effects related configuration. It can add effects such as highlights, depth of field, screen space ambient occlusion (SSAO), toning to the picture. And it can make the whole picture more textured.</p>\n<p>The following are the differences between closing <code class=\"codespan\">postEffect</code> and opening <code class=\"codespan\">postEffect</code>.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/i [...]
- },
- "postEffect.enable": {
- "desc": "<p>Whether to enable post-processing effects. Not enabled by default.</p>\n"
- },
- "postEffect.bloom": {
- "desc": "<p>Bloom is used to reproducing the effects that occur in real cameras when taking pictures in a bright environment.\nBecause traditional RGB can only represent colors in the range of '0 - 255', so we need to use the bloom effect simulates fringes of light extending from the borders of bright areas, creating the illusion of a bright light overwhelming the camera. As shown below：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/globe-posteffect-blo [...]
- },
- "postEffect.bloom.enable": {
- "desc": "<p>Whether to enable the bloom effect.</p>\n"
- },
- "postEffect.bloom.bloomIntensity": {
- "desc": "<p>The intensity of the bloom. The default is 0.1.</p>\n"
- },
- "postEffect.depthOfField": {
- "desc": "<p>Depth of Field is a post-processing effect that simulates the focus properties of a camera. The area of focus is clear, and the area away from the focus is gradually blurred.</p>\n<p>The depth of field effect allows the observer to focus on the area of focus and make the picture feel stronger. Large depth of field can also create a macro model effect.</p>\n<p>The following are the differences between turning off and turning on the depth of field effect.</p>\n<div class=\ [...]
- },
- "postEffect.depthOfField.enable": {
- "desc": "<p>Whether to enable the depth of field.</p>\n"
- },
- "postEffect.depthOfField.focalDistance": {
- "desc": "<p>The initial focus distance. The user can click on the area to automatically focus.</p>\n"
- },
- "postEffect.depthOfField.focalRange": {
- "desc": "<p>The size of the in-focus area. The objects in this range are completely clear and there is no blurring.</p>\n"
- },
- "postEffect.depthOfField.fstop": {
- "desc": "<p>[F value] of the lens (<a href=\"https://zh.wikipedia.org/wiki/%E7%84%A6%E6%AF%94)\" target=\"_blank\">https://zh.wikipedia.org/wiki/%E7%84%A6%E6%AF%94)</a>, the smaller the value, the shallower the depth of field.</p>\n"
- },
- "postEffect.depthOfField.blurRadius": {
- "desc": "<p>Blur radius outside the focus.</p>\n<p>The difference blur effect between the different radius.</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\"></img>\n <img src=\"documents/asset/gl/img/geo-dof-large.png\" width=\"100%\" title=\"blurSize: 10\"></img>\n</div>\n"
- },
- "postEffect.screenSpaceAmbientOcclusion": {
- "desc": "<p>The ambient occlusion post-processing effect darkens the corners, holes, crevices, and areas where most light can`t reach. It is a supplement to the traditional shadow map, which makes the whole scene more natural and layered.</p>\n<p>Below is a comparison of the effects of no SSAO and 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\"></img>\n <img src=\ [...]
- },
- "postEffect.SSAO": {
- "desc": "<p>Same as <a href=\"#globe.postEffect.screenSpaceAmbientOcclusion\">screenSpaceAmbientOcclusion</a></p>\n"
- },
- "postEffect.SSAO.enable": {
- "desc": "<p>Whether to enable SSAO (screen space ambient occlusion). Not enabled by default.</p>\n"
- },
- "postEffect.SSAO.quality": {
- "desc": "<p>The quality of SSAO (screen space ambient occlusion). Supporting<code class=\"codespan\">'low'</code>, <code class=\"codespan\">'medium'</code>, <code class=\"codespan\">'high'</code>, <code class=\"codespan\">'ultra'</code></p>\n"
- },
- "postEffect.SSAO.radius": {
- "desc": "<p>The radius of the SSAO (screen space ambient occlusion). The larger the radius, the more natural the effect, but you need to set a higher <code class=\"codespan\">'quality'</code>.</p>\n<p>The following example is the difference between a smaller and larger radius:</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\"></img>\n <img src=\"docume [...]
- },
- "postEffect.SSAO.intensity": {
- "desc": "<p>The intensity of SSAO (screen space ambient occlusion). The larger the value, the darker the color.</p>\n"
- },
- "postEffect.colorCorrection": {
- "desc": "<p>Color correction and adjustment. Similar to Color Adjustments in Photoshop.</p>\n<p>The same scene in the figure below is adjusted to the difference between the cool color system and the warm color system.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/buildings-cold.jpg\" width=\"100%\" title=\"Cold\"></img>\n <img src=\"documents/asset/gl/img/buildings-warm.jpg\" width=\"100%\" title=\"Warm\"></img>\n</div>\n\n"
- },
- "postEffect.colorCorrection.enable": {
- "desc": "<p>Whether to enable the color correction.</p>\n"
- },
- "postEffect.colorCorrection.lookupTexture": {
- "desc": "<p>Color correction lookup texture, recommended.</p>\n<p>The color correction lookup texture is a texture image like the one below.</p>\n<p><img width=\"200\" height=\"auto\" src=\"documents/asset/gl/img/lookup.png\"></p>\n<p>This is the basic lookup texture image that you can use directly.\nTo adjust the color of the scene to the effect you want, you can take a screenshot of the scene and adjust the color to the desired effect in image processing software such as Photoshop. [...]
- },
- "postEffect.colorCorrection.exposure": {
- "desc": "<p>The exposure of the image.</p>\n"
- },
- "postEffect.colorCorrection.brightness": {
- "desc": "<p>The brightness of the image.</p>\n"
- },
- "postEffect.colorCorrection.contrast": {
- "desc": "<p>The contrast of the image.</p>\n"
- },
- "postEffect.colorCorrection.saturation": {
- "desc": "<p>The saturation of the image.</p>\n"
- },
- "postEffect.FXAA": {
- "desc": "<p>After opening <a href=\"#globe.postEffect\">postEffect</a>, WebGL's default MSAA (Multi Sampling Anti Aliasing) will not work. At this time, FXAA (Fast Approximate Anti-Aliasing) can solve the anti-aliasing problem quickly and easily. FXAA blurs the edge of the scene to solve the problem of aliasing. It works well on some scenes, but in echarts-gl, you need to ensure that the edges of many texts and lines are sharp and clear, so FXAA is not suitable. At this point we [...]
- },
- "postEffect.FXAA.enable": {
- "desc": "<p>Whether to enable FXAA. Not enabled by default.</p>\n"
- },
- "temporalSuperSampling": {
- "desc": "<p>Temporal supersampling. After opening <a href=\"#globe.postEffect\">postEffect</a>, WebGL's default MSAA (MultiSampling Anti-Aliasing) will not work, so we need to solve the problem of sampling.</p>\n<p>Temporal supersampling is an anti-aliasing method. After the picture is still, it will continue to sample multiple times and taken at several instances inside the pixel and an average color value is calculated, thus achieving anti-aliasing effect.\nAnd in this process, [...]
- },
- "temporalSuperSampling.enable": {
- "desc": "<p>Whether to enable temporal supersampling. By default, temporal supersampling is also turned on synchronously when <a href=\"#globe.postEffect\">postEffect</a> is turned on.</p>\n"
- },
- "viewControl": {
- "desc": "<p><code class=\"codespan\">viewControl</code> is used for mouse rotation, zooming, and other perspective control.</p>\n"
- },
- "viewControl.projection": {
- "desc": "<p>The way of projection, the default is <code class=\"codespan\">'perspective'</code> projection, also supports setting to <code class=\"codespan\">'orthogonal'</code> projection.</p>\n"
- },
- "viewControl.autoRotate": {
- "desc": "<p>Whether to enable the angle of view to automatically rotate around the object.</p>\n"
- },
- "viewControl.autoRotateDirection": {
- "desc": "<p>The direction in which the object auto rotates. The default is <code class=\"codespan\">'cw'</code> means clockwise from top to bottom, and can also use <code class=\"codespan\">'ccw'</code> means counterclockwise from top to bottom.</p>\n"
- },
- "viewControl.autoRotateSpeed": {
- "desc": "<p>The speed at which the object auto rotates. The unit is <code class=\"codespan\">angle/second</code>, the default is <code class=\"codespan\">10</code>, which is a turn of <code class=\"codespan\">36</code> seconds.</p>\n"
- },
- "viewControl.autoRotateAfterStill": {
- "desc": "<p>The time interval for automatic rotation to resume after the mouse is still. Valid after opening <a href=\"#globe.viewControl.autoRotate\">autoRotate</a>.</p>\n"
- },
- "viewControl.damping": {
- "desc": "<p>The damping when the mouse is rotated, zoomed, etc.\nWhen it is greater than 0, the angle of view will continue to move (rotate and zoom) due to certain inertia after the mouse is still.</p>\n"
- },
- "viewControl.rotateSensitivity": {
- "desc": "<p>The sensitivity of the rotation operation. The greater the value, the more sensitive. Supports the use of arrays to set the horizontal and vertical rotation sensitivity separately.</p>\n<p>The default is <code class=\"codespan\">1</code>.</p>\n<p>Cannot be rotated after setting to <code class=\"codespan\">0</code>.</p>\n<pre><code class=\"lang-ts\">// can't rotate\nrotateSensitivity: 0\n// can only be rotated horizontally\nrotateSensitivity: [1, 0]\n// can only rotat [...]
- },
- "viewControl.zoomSensitivity": {
- "desc": "<p>The sensitivity of the zoom operation, the larger the value, the more sensitive. The default is <code class=\"codespan\">1</code>.</p>\n<p>Can<code class=\"codespan\">t be scaled after setting to</code>0`.</p>\n"
- },
- "viewControl.panSensitivity": {
- "desc": "<p>The sensitivity of the panning operation, the greater the value, the more sensitive. Supports the use of arrays to set the horizontal and vertical translation sensitivity.</p>\n<p>The default is <code class=\"codespan\">1</code>.</p>\n<p>Cannot pan after setting to <code class=\"codespan\">0</code>.</p>\n"
- },
- "viewControl.panMouseButton": {
- "desc": "<p>The mouse button used for panning operation supports:</p>\n<ul>\n<li><p><code class=\"codespan\">'left'</code> left mouse button (default)</p>\n</li>\n<li><p><code class=\"codespan\">'middle'</code> middle mouse button</p>\n</li>\n<li><p><code class=\"codespan\">'right'</code> right mouse button</p>\n</li>\n</ul>\n<p>Note: If set to the right mouse button, the default context menu will be blocked.</p>\n"
- },
- "viewControl.rotateMouseButton": {
- "desc": "<p>The mouse button used for the rotation operation supports:</p>\n<ul>\n<li><p><code class=\"codespan\">'left'</code> left mouse button</p>\n</li>\n<li><p><code class=\"codespan\">'middle'</code> middle mouse button (default)</p>\n</li>\n<li><p><code class=\"codespan\">'right'</code> right mouse button</p>\n</li>\n</ul>\n<p>Note: If set to the right mouse button, the default context menu will be blocked.</p>\n"
- },
- "viewControl.distance": {
- "desc": "<p>The distance of the default perspective from the subject. For <a href=\"#globe\">globe</a>, the distance from the Earth's surface is the distance from the center origin for other components such as <a href=\"#grid3D\">grid3D</a> and <a href=\"#geo3D\">geo3D</a>. Valid when <a href=\"#globe.viewControl.projection\">projection</a> is <code class=\"codespan\">'perspective'</code>.</p>\n"
- },
- "viewControl.minDistance": {
- "desc": "<p>The angle of view is controlled by the mouse to bring the minimum distance to the subject. Valid when <a href=\"#globe.viewControl.projection\">projection</a> is <code class=\"codespan\">'perspective'</code>.</p>\n"
- },
- "viewControl.maxDistance": {
- "desc": "<p>The angle of view can be extended to the maximum distance of the subject by mouse control. Valid when <a href=\"#globe.viewControl.projection\">projection</a> is <code class=\"codespan\">'perspective'</code>.</p>\n"
- },
- "viewControl.orthographicSize": {
- "desc": "<p>The size of the orthogonal projection. Valid when <a href=\"#globe.viewControl.projection\">projection</a> is <code class=\"codespan\">'orthographic'</code>.</p>\n"
- },
- "viewControl.maxOrthographicSize": {
- "desc": "<p>The maximum value of the orthogonal projection scaling. Valid when <a href=\"#globe.viewControl.projection\">projection</a> is <code class=\"codespan\">'orthographic'</code>.</p>\n"
- },
- "viewControl.minOrthographicSize": {
- "desc": "<p>The minimum value of the orthogonal projection scaling. Valid when <a href=\"#globe.viewControl.projection\">projection</a> is <code class=\"codespan\">'orthographic'</code></p>\n"
- },
- "viewControl.alpha": {
- "desc": "<p>The angle of view is around the x-axis, which is the angle of rotation up and down. With <a href=\"#globe.light.main.beta\">beta</a> you can control the direction of the perspective.</p>\n<p>As shown below：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/view-alpha-beta.png\"></p>\n"
- },
- "viewControl.beta": {
- "desc": "<p>The angle of view is around the y-axis, which is the angle of rotation from left to right.</p>\n"
- },
- "viewControl.center": {
- "desc": "<p>At the center of the angle of view, the rotation will also rotate around this center point. The default is <code class=\"codespan\">[0,0,0]</code>.</p>\n"
- },
- "viewControl.minAlpha": {
- "desc": "<p>The minimum alpha value to rotate up and down. That is, the angle of view can be rotated to reach the uppermost angle.</p>\n"
- },
- "viewControl.maxAlpha": {
- "desc": "<p>The maximum alpha value to rotate up and down. That is, the angle of view can be rotated to the lowest angle.</p>\n"
- },
- "viewControl.minBeta": {
- "desc": "<p>The minimum beta value to rotate left and right. That is, the angle of view can be rotated to the leftmost angle.</p>\n"
- },
- "viewControl.maxBeta": {
- "desc": "<p>The maximum beta value to rotate left and right rotation. That is, the angle of view can be rotated to the rightmost angle.</p>\n"
- },
- "viewControl.animation": {
- "desc": "<p>Whether to enable animation.</p>\n"
- },
- "viewControl.animationDurationUpdate": {
- "desc": "<p>The duration time for update the transition animation.</p>\n"
- },
- "viewControl.animationEasingUpdate": {
- "desc": "<p>The easing effect for update transition animation.</p>\n"
- },
- "viewControl.targetCoord": {
- "desc": "<p>Position the longitudes and latitudes.\nIgnore <a href=\"#globe.viewControl.alpha\">alpha</a> 和 <a href=\"#globe.viewControl.beta\">beta</a> after the setting.</p>\n<pre><code class=\"lang-ts\">viewControl: {\n // locate in BeiJing\n targetCoord: [116.46, 39.92]\n}\n</code></pre>\n"
- },
- "layers": {
- "desc": "<p>Configuration of the Earth's Surface Layer.\nYou can use this configuration item to add clouds, or to supplement <a href=\"#globe. baseTexture\">baseTexture</a> to draw the outline of the country, and so on.</p>\n"
- },
- "layers.show": {
- "desc": "<p>Whether to show this layer.</p>\n"
- },
- "layers.type": {
- "desc": "<p>Layper type, Optional：</p>\n<ul>\n<li><code class=\"codespan\">'overlay'</code></li>\n</ul>\n<p>The overlay on the ground surface can be used to display clouds and the like.</p>\n<ul>\n<li><code class=\"codespan\">'blend'</code></li>\n</ul>\n<p>Mix with <a href=\"#globe.baseTexture\">baseTexture</a>.</p>\n"
- },
- "layers.name": {
- "desc": "<p>The name of the layer. When setting the properties of the layer with setOption, you can use the name to identify the layer that needs to be updated.</p>\n<pre><code class=\"lang-ts\">chart.setOption({\n globe: {\n layer: [{\n // Update the texture of the layer named 'cloud'\n name: 'cloud',\n texture: 'cloud.png'\n }]\n }\n});\n</code></pre>\n"
- },
- "layers.blendTo": {
- "desc": "<p>When <a href=\"#globe.layers.type\">type</a> is <code class=\"codespan\">'blend'</code> is valid .</p>\n<p>Optional：</p>\n<ul>\n<li><p><code class=\"codespan\">albedo</code> is mixed to albedo, affected by lighting.</p>\n</li>\n<li><p><code class=\"codespan\">emission</code> is mixed to self-illuminating, unaffected by light.</p>\n</li>\n</ul>\n"
- },
- "layers.intensity": {
- "desc": "<p>The intensity of the mixture.</p>\n"
- },
- "layers.shading": {
- "desc": "<p>The coloring effect of the overlay is the same as <a href=\"#globe.shading\">globe.shading</a>, which supports <code class=\"codespan\">'color'</code>, <code class=\"codespan\">'lambert'</code>, <code class=\"codespan\">'realistic'</code></p>\n<p>Valid when <a href=\"globe.layers.type\" target=\"_blank\">type</a> is <code class=\"codespan\">'overlay'</code>.</p>\n"
- },
- "layers.distance": {
- "desc": "<p>The distance from the overlay to the surface of the globe.</p>\n<p>Valid when <a href=\"#globe.layers.type\">type</a> is <code class=\"codespan\">'overlay'</code>.</p>\n"
- },
- "layers.texture": {
- "desc": "<p>The texture of the globe. Support for the string of image paths, images object or Canvas objects.</p>\n<p>It also supports to use an echarts example as a texture directly, in which case mouse actions on Earth will be linked to the echarts instance used on the texture.</p>\n"
- }
-}
\ No newline at end of file
+{"show":{"desc":"<p>Whether to show the globe component.</p>\n"},"zlevel":{"desc":"<p>The layer in which the component is located.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zleve [...]
\ No newline at end of file
diff --git a/en/documents/option-gl-parts/option-gl.grid3D.js b/en/documents/option-gl-parts/option-gl.grid3D.js
index ea25c7c1..d08ddba6 100644
--- a/en/documents/option-gl-parts/option-gl.grid3D.js
+++ b/en/documents/option-gl-parts/option-gl.grid3D.js
@@ -1,398 +1 @@
-window.__EC_DOC_option_gl_grid3D = {
- "show": {
- "desc": "<p>Whether to display a 3D cartesian coordinate system component.</p>\n"
- },
- "boxWidth": {
- "desc": "<p>3D cartesian coordinate system width in a 3D scene. With <a href=\"#grid3D.viewControl.distance\">viewControl.distance</a> you can get the most appropriate display size.</p>\n"
- },
- "boxHeight": {
- "desc": "<p>3D cartesian coordinate system height in a 3D scene.</p>\n"
- },
- "boxDepth": {
- "desc": "<p>3D cartesian coordinate system depth in a 3D scene.</p>\n"
- },
- "axisLine": {
- "desc": "<p>Settings related to axis line.</p>\n"
- },
- "axisLine.show": {
- "desc": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n"
- },
- "axisLine.interval": {
- "desc": "<p>axis scale label is valid in the category axis. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The [...]
- },
- "axisLine.lineStyle.color": {
- "desc": "<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "axisLine.lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "axisLine.lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "axisLabel": {
- "desc": "<p>Settings related to axis label.</p>\n"
- },
- "axisLabel.show": {
- "desc": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis label from appearing.</p>\n"
- },
- "axisLabel.margin": {
- "desc": "<p>The margin between the axis label and the axis line.</p>\n<p><strong>Note：</strong> This distance is three-dimensional space, not screen space.</p>\n"
- },
- "axisLabel.interval": {
- "desc": "<p>axis scale label is valid in the category axis. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The [...]
- },
- "axisLabel.textStyle.color": {
- "desc": "<p>Color of axis label is set to be <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class=\"lang-ts\">(val: string) => Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class=\"lang-ts\">textStyle: {\n color: function (value, index) {\n return value >= 0 ? 'green' : &# [...]
- },
- "axisLabel.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "axisLabel.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "axisLabel.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "axisLabel.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "axisLabel.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "axisTick": {
- "desc": "<p>Settings related to axis tick.</p>\n"
- },
- "axisTick.show": {
- "desc": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis tick from showing.</p>\n"
- },
- "axisTick.interval": {
- "desc": "<p>axis scale label is valid in the category axis. Defaults to the same as <a href=\"#.axisLabel.interval\">axisLabel.interval</a>. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, [...]
- },
- "axisTick.length": {
- "desc": "<p>The length of the axis tick.</p>\n"
- },
- "axisTick.lineStyle.color": {
- "desc": "<p>Color of axis label is set to be <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"
- },
- "axisTick.lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "axisTick.lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "splitLine": {
- "desc": "<p>Settings related to axis line.</p>\n"
- },
- "splitLine.show": {
- "desc": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n"
- },
- "splitLine.interval": {
- "desc": "<p>axis scale label is valid in the category axis. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The [...]
- },
- "splitLine.lineStyle.color": {
- "desc": "<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "splitLine.lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "splitLine.lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "splitArea": {
- "desc": "<p>Split area of axis in <a href=\"#grid\">grid</a> area.</p>\n"
- },
- "splitArea.show": {
- "desc": "<p>Set this to be <code class=\"codespan\">true</code> to show the splitArea.</p>\n"
- },
- "splitArea.interval": {
- "desc": "<p>Axis splitArea is valid in the category axis. Defaults to the same as <a href=\"#.axisLabel.interval\">axisLabel.interval</a>. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, i [...]
- },
- "splitArea.areaStyle": {
- "desc": "<p>Split area style.</p>\n"
- },
- "splitArea.areaStyle.color": {
- "desc": "<p>Color of the split area.\nThe split area color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.</p>\n"
- },
- "axisPointer": {
- "desc": "<p>Configurations for axis pointer.</p>\n"
- },
- "axisPointer.show": {
- "desc": "<p>Whether to display the axisPointer. Set this to be <code class=\"codespan\">true</code> to show the splitArea.</p>\n"
- },
- "axisPointer.lineStyle.color": {
- "desc": "<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "axisPointer.lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "axisPointer.lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "axisPointer.label": {
- "desc": "<p>The label of axisPointer.</p>\n"
- },
- "axisPointer.label.show": {
- "desc": "<p>Whether to display the label of axisPointer. Value axes are displayed by default, while category axes are not.</p>\n"
- },
- "axisPointer.label.formatter": {
- "desc": "<p>The formatter of the label. . The first parameter to the function is the value of the current axis. The second parameter to the function is an array of values for all axes.</p>\n<pre><code class=\"lang-ts\">(value: number, valueAll: Array) => string\n</code></pre>\n"
- },
- "axisPointer.label.margin": {
- "desc": "<p>Distance between label and axis.\nLike the scale label, this distance is a 3D space rather than a screen pixel.</p>\n"
- },
- "axisPointer.label.textStyle.color": {
- "desc": "<p>The Color of the text.</p>\n"
- },
- "axisPointer.label.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "axisPointer.label.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "axisPointer.label.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "axisPointer.label.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "axisPointer.label.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "environment": {
- "desc": "<p>Environment map. Support for solid colors, gradual colors, URL of panoramic texture. The default is <code class=\"codespan\">'auto'</code>, which is used as the environment texture when <a href=\"#grid3D.light.ambientCubemap.texture\">light.ambientCubemap.texture</a> is configured. Otherwise, the environment texture is not displayed.</p>\n<p>Example:</p>\n<pre><code class=\"lang-ts\">// Configure as a panoramic texture\nenvironment: 'asset/starfield.jpg'\n [...]
- },
- "light": {
- "desc": "<p>Light related settings. Invalid when <a href=\"#grid3D.shading\">shading</a> is 'color'.</p>\n<p>The lighting settings affect the components and all the charts on the component's coordinate system.</p>\n<p>A reasonable lighting setting can make the brightness and darkness of the whole scene richer and more layered.</p>\n"
- },
- "light.main": {
- "desc": "<p>The setting of the main light source of the scene. In the <a href=\"#globe\">globe</a> component is the sun.</p>\n"
- },
- "light.main.color": {
- "desc": "<p>The color of the main light source.</p>\n"
- },
- "light.main.intensity": {
- "desc": "<p>The intensity of the main light source.</p>\n"
- },
- "light.main.shadow": {
- "desc": "<p>Whether the main light source displays a shadow. The default is off.</p>\n<p>Turning on the shadows can bring more realistic and layered lighting to the scene. But it also increases the operating overhead of the program.</p>\n<p>The following two images show the difference between turning on the shadow and turning off the shadow.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-shadow.png\" width=\"100%\" tit [...]
- },
- "light.main.shadowQuality": {
- "desc": "<p>The quality of the shadow. You can choose <code class=\"codespan\">'low'</code>, <code class=\"codespan\">'medium'</code>, <code class=\"codespan\">'high'</code>, <code class=\"codespan\">'ultra'</code></p>\n<p>The following two images shows the difference between low quality and high quality shadows.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-shadow-low.png\" width=\"100 [...]
- },
- "light.main.alpha": {
- "desc": "<p>The main light source is around the x-axis, which is the angle of up-down rotation. Control the direction of the light with <a href=\"#grid3D.light.main.beta\">beta</a>.</p>\n<p>As the following image show:</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/light-alpha-beta.png\"></p>\n<p>The <a href=\"#globe\">globe</a> component can control the time of sunlight by <a href=\"#globe.light.main.time\">time</a>.</p>\n"
- },
- "light.main.beta": {
- "desc": "<p>The main light source is around the y-axis, which is the angle of the left-right rotation.</p>\n"
- },
- "light.ambient": {
- "desc": "<p>Global ambient light settings.</p>\n"
- },
- "light.ambient.color": {
- "desc": "<p>The color of ambient light.</p>\n"
- },
- "light.ambient.intensity": {
- "desc": "<p>The intensity of ambient light.</p>\n"
- },
- "light.ambientCubemap": {
- "desc": "<p>The ambientCubemap uses texture as the source of ambient light, which provides diffuse and specular for objects. The diffuse and specular can be set separately by <a href=\"#grid3D.light.ambientCubemap.diffuseIntensity\">diffuseIntensity</a> and <a href=\"#grid3D.light.ambientCubemap.specularIntensity\">specularIntensity</a>.</p>\n"
- },
- "light.ambientCubemap.texture": {
- "desc": "<p>The URL of the ambient cubemap supports HDR images in the <code class=\"codespan\">.hdr</code> format. You can obtained the resources for <code class=\"codespan\">.hdr</code> from <a href=\"http://www.hdrlabs.com/sibl/archive.html\" target=\"_blank\">http://www.hdrlabs.com/sibl/archive.html</a> and other websites.</p>\n<p>Example：</p>\n<pre><code class=\"lang-ts\">ambientCubemap: {\n texture: 'pisa.hdr',\n // The exposure value used when analytic hdr\n ex [...]
- },
- "light.ambientCubemap.diffuseIntensity": {
- "desc": "<p>The intensity of diffuse.</p>\n"
- },
- "light.ambientCubemap.specularIntensity": {
- "desc": "<p>The intensity of specular.</p>\n"
- },
- "postEffect": {
- "desc": "<p>Post-processing effects related configuration. It can add effects such as highlights, depth of field, screen space ambient occlusion (SSAO), toning to the picture. And it can make the whole picture more textured.</p>\n<p>The following are the differences between closing <code class=\"codespan\">postEffect</code> and opening <code class=\"codespan\">postEffect</code>.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/i [...]
- },
- "postEffect.enable": {
- "desc": "<p>Whether to enable post-processing effects. Not enabled by default.</p>\n"
- },
- "postEffect.bloom": {
- "desc": "<p>Bloom is used to reproducing the effects that occur in real cameras when taking pictures in a bright environment.\nBecause traditional RGB can only represent colors in the range of '0 - 255', so we need to use the bloom effect simulates fringes of light extending from the borders of bright areas, creating the illusion of a bright light overwhelming the camera. As shown below：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/globe-posteffect-blo [...]
- },
- "postEffect.bloom.enable": {
- "desc": "<p>Whether to enable the bloom effect.</p>\n"
- },
- "postEffect.bloom.bloomIntensity": {
- "desc": "<p>The intensity of the bloom. The default is 0.1.</p>\n"
- },
- "postEffect.depthOfField": {
- "desc": "<p>Depth of Field is a post-processing effect that simulates the focus properties of a camera. The area of focus is clear, and the area away from the focus is gradually blurred.</p>\n<p>The depth of field effect allows the observer to focus on the area of focus and make the picture feel stronger. Large depth of field can also create a macro model effect.</p>\n<p>The following are the differences between turning off and turning on the depth of field effect.</p>\n<div class=\ [...]
- },
- "postEffect.depthOfField.enable": {
- "desc": "<p>Whether to enable the depth of field.</p>\n"
- },
- "postEffect.depthOfField.focalDistance": {
- "desc": "<p>The initial focus distance. The user can click on the area to automatically focus.</p>\n"
- },
- "postEffect.depthOfField.focalRange": {
- "desc": "<p>The size of the in-focus area. The objects in this range are completely clear and there is no blurring.</p>\n"
- },
- "postEffect.depthOfField.fstop": {
- "desc": "<p>[F value] of the lens (<a href=\"https://zh.wikipedia.org/wiki/%E7%84%A6%E6%AF%94)\" target=\"_blank\">https://zh.wikipedia.org/wiki/%E7%84%A6%E6%AF%94)</a>, the smaller the value, the shallower the depth of field.</p>\n"
- },
- "postEffect.depthOfField.blurRadius": {
- "desc": "<p>Blur radius outside the focus.</p>\n<p>The difference blur effect between the different radius.</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\"></img>\n <img src=\"documents/asset/gl/img/geo-dof-large.png\" width=\"100%\" title=\"blurSize: 10\"></img>\n</div>\n"
- },
- "postEffect.screenSpaceAmbientOcclusion": {
- "desc": "<p>The ambient occlusion post-processing effect darkens the corners, holes, crevices, and areas where most light can`t reach. It is a supplement to the traditional shadow map, which makes the whole scene more natural and layered.</p>\n<p>Below is a comparison of the effects of no SSAO and 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\"></img>\n <img src=\ [...]
- },
- "postEffect.SSAO": {
- "desc": "<p>Same as <a href=\"#grid3D.postEffect.screenSpaceAmbientOcclusion\">screenSpaceAmbientOcclusion</a></p>\n"
- },
- "postEffect.SSAO.enable": {
- "desc": "<p>Whether to enable SSAO (screen space ambient occlusion). Not enabled by default.</p>\n"
- },
- "postEffect.SSAO.quality": {
- "desc": "<p>The quality of SSAO (screen space ambient occlusion). Supporting<code class=\"codespan\">'low'</code>, <code class=\"codespan\">'medium'</code>, <code class=\"codespan\">'high'</code>, <code class=\"codespan\">'ultra'</code></p>\n"
- },
- "postEffect.SSAO.radius": {
- "desc": "<p>The radius of the SSAO (screen space ambient occlusion). The larger the radius, the more natural the effect, but you need to set a higher <code class=\"codespan\">'quality'</code>.</p>\n<p>The following example is the difference between a smaller and larger radius:</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\"></img>\n <img src=\"docume [...]
- },
- "postEffect.SSAO.intensity": {
- "desc": "<p>The intensity of SSAO (screen space ambient occlusion). The larger the value, the darker the color.</p>\n"
- },
- "postEffect.colorCorrection": {
- "desc": "<p>Color correction and adjustment. Similar to Color Adjustments in Photoshop.</p>\n<p>The same scene in the figure below is adjusted to the difference between the cool color system and the warm color system.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/buildings-cold.jpg\" width=\"100%\" title=\"Cold\"></img>\n <img src=\"documents/asset/gl/img/buildings-warm.jpg\" width=\"100%\" title=\"Warm\"></img>\n</div>\n\n"
- },
- "postEffect.colorCorrection.enable": {
- "desc": "<p>Whether to enable the color correction.</p>\n"
- },
- "postEffect.colorCorrection.lookupTexture": {
- "desc": "<p>Color correction lookup texture, recommended.</p>\n<p>The color correction lookup texture is a texture image like the one below.</p>\n<p><img width=\"200\" height=\"auto\" src=\"documents/asset/gl/img/lookup.png\"></p>\n<p>This is the basic lookup texture image that you can use directly.\nTo adjust the color of the scene to the effect you want, you can take a screenshot of the scene and adjust the color to the desired effect in image processing software such as Photoshop. [...]
- },
- "postEffect.colorCorrection.exposure": {
- "desc": "<p>The exposure of the image.</p>\n"
- },
- "postEffect.colorCorrection.brightness": {
- "desc": "<p>The brightness of the image.</p>\n"
- },
- "postEffect.colorCorrection.contrast": {
- "desc": "<p>The contrast of the image.</p>\n"
- },
- "postEffect.colorCorrection.saturation": {
- "desc": "<p>The saturation of the image.</p>\n"
- },
- "postEffect.FXAA": {
- "desc": "<p>After opening <a href=\"#grid3D.postEffect\">postEffect</a>, WebGL's default MSAA (Multi Sampling Anti Aliasing) will not work. At this time, FXAA (Fast Approximate Anti-Aliasing) can solve the anti-aliasing problem quickly and easily. FXAA blurs the edge of the scene to solve the problem of aliasing. It works well on some scenes, but in echarts-gl, you need to ensure that the edges of many texts and lines are sharp and clear, so FXAA is not suitable. At this point we [...]
- },
- "postEffect.FXAA.enable": {
- "desc": "<p>Whether to enable FXAA. Not enabled by default.</p>\n"
- },
- "temporalSuperSampling": {
- "desc": "<p>Temporal supersampling. After opening <a href=\"#grid3D.postEffect\">postEffect</a>, WebGL's default MSAA (MultiSampling Anti-Aliasing) will not work, so we need to solve the problem of sampling.</p>\n<p>Temporal supersampling is an anti-aliasing method. After the picture is still, it will continue to sample multiple times and taken at several instances inside the pixel and an average color value is calculated, thus achieving anti-aliasing effect.\nAnd in this process [...]
- },
- "temporalSuperSampling.enable": {
- "desc": "<p>Whether to enable temporal supersampling. By default, temporal supersampling is also turned on synchronously when <a href=\"#grid3D.postEffect\">postEffect</a> is turned on.</p>\n"
- },
- "viewControl": {
- "desc": "<p><code class=\"codespan\">viewControl</code> is used for mouse rotation, zooming, and other perspective control.</p>\n"
- },
- "viewControl.projection": {
- "desc": "<p>The way of projection, the default is <code class=\"codespan\">'perspective'</code> projection, also supports setting to <code class=\"codespan\">'orthogonal'</code> projection.</p>\n"
- },
- "viewControl.autoRotate": {
- "desc": "<p>Whether to enable the angle of view to automatically rotate around the object.</p>\n"
- },
- "viewControl.autoRotateDirection": {
- "desc": "<p>The direction in which the object auto rotates. The default is <code class=\"codespan\">'cw'</code> means clockwise from top to bottom, and can also use <code class=\"codespan\">'ccw'</code> means counterclockwise from top to bottom.</p>\n"
- },
- "viewControl.autoRotateSpeed": {
- "desc": "<p>The speed at which the object auto rotates. The unit is <code class=\"codespan\">angle/second</code>, the default is <code class=\"codespan\">10</code>, which is a turn of <code class=\"codespan\">36</code> seconds.</p>\n"
- },
- "viewControl.autoRotateAfterStill": {
- "desc": "<p>The time interval for automatic rotation to resume after the mouse is still. Valid after opening <a href=\"#grid3D.viewControl.autoRotate\">autoRotate</a>.</p>\n"
- },
- "viewControl.damping": {
- "desc": "<p>The damping when the mouse is rotated, zoomed, etc.\nWhen it is greater than 0, the angle of view will continue to move (rotate and zoom) due to certain inertia after the mouse is still.</p>\n"
- },
- "viewControl.rotateSensitivity": {
- "desc": "<p>The sensitivity of the rotation operation. The greater the value, the more sensitive. Supports the use of arrays to set the horizontal and vertical rotation sensitivity separately.</p>\n<p>The default is <code class=\"codespan\">1</code>.</p>\n<p>Cannot be rotated after setting to <code class=\"codespan\">0</code>.</p>\n<pre><code class=\"lang-ts\">// can't rotate\nrotateSensitivity: 0\n// can only be rotated horizontally\nrotateSensitivity: [1, 0]\n// can only rotat [...]
- },
- "viewControl.zoomSensitivity": {
- "desc": "<p>The sensitivity of the zoom operation, the larger the value, the more sensitive. The default is <code class=\"codespan\">1</code>.</p>\n<p>Can<code class=\"codespan\">t be scaled after setting to</code>0`.</p>\n"
- },
- "viewControl.panSensitivity": {
- "desc": "<p>The sensitivity of the panning operation, the greater the value, the more sensitive. Supports the use of arrays to set the horizontal and vertical translation sensitivity.</p>\n<p>The default is <code class=\"codespan\">1</code>.</p>\n<p>Cannot pan after setting to <code class=\"codespan\">0</code>.</p>\n"
- },
- "viewControl.panMouseButton": {
- "desc": "<p>The mouse button used for panning operation supports:</p>\n<ul>\n<li><p><code class=\"codespan\">'left'</code> left mouse button (default)</p>\n</li>\n<li><p><code class=\"codespan\">'middle'</code> middle mouse button</p>\n</li>\n<li><p><code class=\"codespan\">'right'</code> right mouse button</p>\n</li>\n</ul>\n<p>Note: If set to the right mouse button, the default context menu will be blocked.</p>\n"
- },
- "viewControl.rotateMouseButton": {
- "desc": "<p>The mouse button used for the rotation operation supports:</p>\n<ul>\n<li><p><code class=\"codespan\">'left'</code> left mouse button</p>\n</li>\n<li><p><code class=\"codespan\">'middle'</code> middle mouse button (default)</p>\n</li>\n<li><p><code class=\"codespan\">'right'</code> right mouse button</p>\n</li>\n</ul>\n<p>Note: If set to the right mouse button, the default context menu will be blocked.</p>\n"
- },
- "viewControl.distance": {
- "desc": "<p>The distance of the default perspective from the subject. For <a href=\"#globe\">globe</a>, the distance from the Earth's surface is the distance from the center origin for other components such as <a href=\"#grid3D\">grid3D</a> and <a href=\"#geo3D\">geo3D</a>. Valid when <a href=\"#grid3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'perspective'</code>.</p>\n"
- },
- "viewControl.minDistance": {
- "desc": "<p>The angle of view is controlled by the mouse to bring the minimum distance to the subject. Valid when <a href=\"#grid3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'perspective'</code>.</p>\n"
- },
- "viewControl.maxDistance": {
- "desc": "<p>The angle of view can be extended to the maximum distance of the subject by mouse control. Valid when <a href=\"#grid3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'perspective'</code>.</p>\n"
- },
- "viewControl.orthographicSize": {
- "desc": "<p>The size of the orthogonal projection. Valid when <a href=\"#grid3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'orthographic'</code>.</p>\n"
- },
- "viewControl.maxOrthographicSize": {
- "desc": "<p>The maximum value of the orthogonal projection scaling. Valid when <a href=\"#grid3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'orthographic'</code>.</p>\n"
- },
- "viewControl.minOrthographicSize": {
- "desc": "<p>The minimum value of the orthogonal projection scaling. Valid when <a href=\"#grid3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'orthographic'</code></p>\n"
- },
- "viewControl.alpha": {
- "desc": "<p>The angle of view is around the x-axis, which is the angle of rotation up and down. With <a href=\"#grid3D.light.main.beta\">beta</a> you can control the direction of the perspective.</p>\n<p>As shown below：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/view-alpha-beta.png\"></p>\n"
- },
- "viewControl.beta": {
- "desc": "<p>The angle of view is around the y-axis, which is the angle of rotation from left to right.</p>\n"
- },
- "viewControl.center": {
- "desc": "<p>At the center of the angle of view, the rotation will also rotate around this center point. The default is <code class=\"codespan\">[0,0,0]</code>.</p>\n"
- },
- "viewControl.minAlpha": {
- "desc": "<p>The minimum alpha value to rotate up and down. That is, the angle of view can be rotated to reach the uppermost angle.</p>\n"
- },
- "viewControl.maxAlpha": {
- "desc": "<p>The maximum alpha value to rotate up and down. That is, the angle of view can be rotated to the lowest angle.</p>\n"
- },
- "viewControl.minBeta": {
- "desc": "<p>The minimum beta value to rotate left and right. That is, the angle of view can be rotated to the leftmost angle.</p>\n"
- },
- "viewControl.maxBeta": {
- "desc": "<p>The maximum beta value to rotate left and right rotation. That is, the angle of view can be rotated to the rightmost angle.</p>\n"
- },
- "viewControl.animation": {
- "desc": "<p>Whether to enable animation.</p>\n"
- },
- "viewControl.animationDurationUpdate": {
- "desc": "<p>The duration time for update the transition animation.</p>\n"
- },
- "viewControl.animationEasingUpdate": {
- "desc": "<p>The easing effect for update transition animation.</p>\n"
- },
- "zlevel": {
- "desc": "<p>The layer in which the component is located.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and [...]
- },
- "left": {
- "desc": "<p>Distance between component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>; and it can also be <code class=\"codespan\">'left'</code>, <code class=\"codespan\">'center'</code>, or <code class=\"codespan\">'right'</code>.</p>\n<p>If [...]
- },
- "top": {
- "desc": "<p>Distance between component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>; and it can also be <code class=\"codespan\">'top'</code>, <code class=\"codespan\">'middle'</code>, or <code class=\"codespan\">'bottom'</code>.</p>\n<p>If t [...]
- },
- "right": {
- "desc": "<p>Distance between component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>.</p>\n<p> Adaptive by default.</p>\n"
- },
- "bottom": {
- "desc": "<p>Distance between component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>.</p>\n<p> Adaptive by default.</p>\n"
- },
- "width": {
- "desc": "<p> The width of the view of the component.</p>\n"
- },
- "height": {
- "desc": "<p> The height of the view of the component.</p>\n"
- }
-}
\ No newline at end of file
+window.__EC_DOC_option_gl_grid3D = {"show":{"desc":"<p>Whether to display a 3D cartesian coordinate system component.</p>\n"},"boxWidth":{"desc":"<p>3D cartesian coordinate system width in a 3D scene. With <a href=\"#grid3D.viewControl.distance\">viewControl.distance</a> you can get the most appropriate display size.</p>\n"},"boxHeight":{"desc":"<p>3D cartesian coordinate system height in a 3D scene.</p>\n"},"boxDepth":{"desc":"<p>3D cartesian coordinate system depth in a 3D scene.</p>\n [...]
\ No newline at end of file
diff --git a/en/documents/option-gl-parts/option-gl.grid3D.json b/en/documents/option-gl-parts/option-gl.grid3D.json
index 562eaac9..4b1b2456 100644
--- a/en/documents/option-gl-parts/option-gl.grid3D.json
+++ b/en/documents/option-gl-parts/option-gl.grid3D.json
@@ -1,398 +1 @@
-{
- "show": {
- "desc": "<p>Whether to display a 3D cartesian coordinate system component.</p>\n"
- },
- "boxWidth": {
- "desc": "<p>3D cartesian coordinate system width in a 3D scene. With <a href=\"#grid3D.viewControl.distance\">viewControl.distance</a> you can get the most appropriate display size.</p>\n"
- },
- "boxHeight": {
- "desc": "<p>3D cartesian coordinate system height in a 3D scene.</p>\n"
- },
- "boxDepth": {
- "desc": "<p>3D cartesian coordinate system depth in a 3D scene.</p>\n"
- },
- "axisLine": {
- "desc": "<p>Settings related to axis line.</p>\n"
- },
- "axisLine.show": {
- "desc": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n"
- },
- "axisLine.interval": {
- "desc": "<p>axis scale label is valid in the category axis. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The [...]
- },
- "axisLine.lineStyle.color": {
- "desc": "<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "axisLine.lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "axisLine.lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "axisLabel": {
- "desc": "<p>Settings related to axis label.</p>\n"
- },
- "axisLabel.show": {
- "desc": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis label from appearing.</p>\n"
- },
- "axisLabel.margin": {
- "desc": "<p>The margin between the axis label and the axis line.</p>\n<p><strong>Note：</strong> This distance is three-dimensional space, not screen space.</p>\n"
- },
- "axisLabel.interval": {
- "desc": "<p>axis scale label is valid in the category axis. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The [...]
- },
- "axisLabel.textStyle.color": {
- "desc": "<p>Color of axis label is set to be <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class=\"lang-ts\">(val: string) => Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class=\"lang-ts\">textStyle: {\n color: function (value, index) {\n return value >= 0 ? 'green' : &# [...]
- },
- "axisLabel.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "axisLabel.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "axisLabel.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "axisLabel.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "axisLabel.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "axisTick": {
- "desc": "<p>Settings related to axis tick.</p>\n"
- },
- "axisTick.show": {
- "desc": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis tick from showing.</p>\n"
- },
- "axisTick.interval": {
- "desc": "<p>axis scale label is valid in the category axis. Defaults to the same as <a href=\"#.axisLabel.interval\">axisLabel.interval</a>. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, [...]
- },
- "axisTick.length": {
- "desc": "<p>The length of the axis tick.</p>\n"
- },
- "axisTick.lineStyle.color": {
- "desc": "<p>Color of axis label is set to be <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"
- },
- "axisTick.lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "axisTick.lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "splitLine": {
- "desc": "<p>Settings related to axis line.</p>\n"
- },
- "splitLine.show": {
- "desc": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n"
- },
- "splitLine.interval": {
- "desc": "<p>axis scale label is valid in the category axis. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The [...]
- },
- "splitLine.lineStyle.color": {
- "desc": "<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "splitLine.lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "splitLine.lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "splitArea": {
- "desc": "<p>Split area of axis in <a href=\"#grid\">grid</a> area.</p>\n"
- },
- "splitArea.show": {
- "desc": "<p>Set this to be <code class=\"codespan\">true</code> to show the splitArea.</p>\n"
- },
- "splitArea.interval": {
- "desc": "<p>Axis splitArea is valid in the category axis. Defaults to the same as <a href=\"#.axisLabel.interval\">axisLabel.interval</a>. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, i [...]
- },
- "splitArea.areaStyle": {
- "desc": "<p>Split area style.</p>\n"
- },
- "splitArea.areaStyle.color": {
- "desc": "<p>Color of the split area.\nThe split area color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.</p>\n"
- },
- "axisPointer": {
- "desc": "<p>Configurations for axis pointer.</p>\n"
- },
- "axisPointer.show": {
- "desc": "<p>Whether to display the axisPointer. Set this to be <code class=\"codespan\">true</code> to show the splitArea.</p>\n"
- },
- "axisPointer.lineStyle.color": {
- "desc": "<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "axisPointer.lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "axisPointer.lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "axisPointer.label": {
- "desc": "<p>The label of axisPointer.</p>\n"
- },
- "axisPointer.label.show": {
- "desc": "<p>Whether to display the label of axisPointer. Value axes are displayed by default, while category axes are not.</p>\n"
- },
- "axisPointer.label.formatter": {
- "desc": "<p>The formatter of the label. . The first parameter to the function is the value of the current axis. The second parameter to the function is an array of values for all axes.</p>\n<pre><code class=\"lang-ts\">(value: number, valueAll: Array) => string\n</code></pre>\n"
- },
- "axisPointer.label.margin": {
- "desc": "<p>Distance between label and axis.\nLike the scale label, this distance is a 3D space rather than a screen pixel.</p>\n"
- },
- "axisPointer.label.textStyle.color": {
- "desc": "<p>The Color of the text.</p>\n"
- },
- "axisPointer.label.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "axisPointer.label.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "axisPointer.label.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "axisPointer.label.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "axisPointer.label.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "environment": {
- "desc": "<p>Environment map. Support for solid colors, gradual colors, URL of panoramic texture. The default is <code class=\"codespan\">'auto'</code>, which is used as the environment texture when <a href=\"#grid3D.light.ambientCubemap.texture\">light.ambientCubemap.texture</a> is configured. Otherwise, the environment texture is not displayed.</p>\n<p>Example:</p>\n<pre><code class=\"lang-ts\">// Configure as a panoramic texture\nenvironment: 'asset/starfield.jpg'\n [...]
- },
- "light": {
- "desc": "<p>Light related settings. Invalid when <a href=\"#grid3D.shading\">shading</a> is 'color'.</p>\n<p>The lighting settings affect the components and all the charts on the component's coordinate system.</p>\n<p>A reasonable lighting setting can make the brightness and darkness of the whole scene richer and more layered.</p>\n"
- },
- "light.main": {
- "desc": "<p>The setting of the main light source of the scene. In the <a href=\"#globe\">globe</a> component is the sun.</p>\n"
- },
- "light.main.color": {
- "desc": "<p>The color of the main light source.</p>\n"
- },
- "light.main.intensity": {
- "desc": "<p>The intensity of the main light source.</p>\n"
- },
- "light.main.shadow": {
- "desc": "<p>Whether the main light source displays a shadow. The default is off.</p>\n<p>Turning on the shadows can bring more realistic and layered lighting to the scene. But it also increases the operating overhead of the program.</p>\n<p>The following two images show the difference between turning on the shadow and turning off the shadow.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-shadow.png\" width=\"100%\" tit [...]
- },
- "light.main.shadowQuality": {
- "desc": "<p>The quality of the shadow. You can choose <code class=\"codespan\">'low'</code>, <code class=\"codespan\">'medium'</code>, <code class=\"codespan\">'high'</code>, <code class=\"codespan\">'ultra'</code></p>\n<p>The following two images shows the difference between low quality and high quality shadows.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-shadow-low.png\" width=\"100 [...]
- },
- "light.main.alpha": {
- "desc": "<p>The main light source is around the x-axis, which is the angle of up-down rotation. Control the direction of the light with <a href=\"#grid3D.light.main.beta\">beta</a>.</p>\n<p>As the following image show:</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/light-alpha-beta.png\"></p>\n<p>The <a href=\"#globe\">globe</a> component can control the time of sunlight by <a href=\"#globe.light.main.time\">time</a>.</p>\n"
- },
- "light.main.beta": {
- "desc": "<p>The main light source is around the y-axis, which is the angle of the left-right rotation.</p>\n"
- },
- "light.ambient": {
- "desc": "<p>Global ambient light settings.</p>\n"
- },
- "light.ambient.color": {
- "desc": "<p>The color of ambient light.</p>\n"
- },
- "light.ambient.intensity": {
- "desc": "<p>The intensity of ambient light.</p>\n"
- },
- "light.ambientCubemap": {
- "desc": "<p>The ambientCubemap uses texture as the source of ambient light, which provides diffuse and specular for objects. The diffuse and specular can be set separately by <a href=\"#grid3D.light.ambientCubemap.diffuseIntensity\">diffuseIntensity</a> and <a href=\"#grid3D.light.ambientCubemap.specularIntensity\">specularIntensity</a>.</p>\n"
- },
- "light.ambientCubemap.texture": {
- "desc": "<p>The URL of the ambient cubemap supports HDR images in the <code class=\"codespan\">.hdr</code> format. You can obtained the resources for <code class=\"codespan\">.hdr</code> from <a href=\"http://www.hdrlabs.com/sibl/archive.html\" target=\"_blank\">http://www.hdrlabs.com/sibl/archive.html</a> and other websites.</p>\n<p>Example：</p>\n<pre><code class=\"lang-ts\">ambientCubemap: {\n texture: 'pisa.hdr',\n // The exposure value used when analytic hdr\n ex [...]
- },
- "light.ambientCubemap.diffuseIntensity": {
- "desc": "<p>The intensity of diffuse.</p>\n"
- },
- "light.ambientCubemap.specularIntensity": {
- "desc": "<p>The intensity of specular.</p>\n"
- },
- "postEffect": {
- "desc": "<p>Post-processing effects related configuration. It can add effects such as highlights, depth of field, screen space ambient occlusion (SSAO), toning to the picture. And it can make the whole picture more textured.</p>\n<p>The following are the differences between closing <code class=\"codespan\">postEffect</code> and opening <code class=\"codespan\">postEffect</code>.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/i [...]
- },
- "postEffect.enable": {
- "desc": "<p>Whether to enable post-processing effects. Not enabled by default.</p>\n"
- },
- "postEffect.bloom": {
- "desc": "<p>Bloom is used to reproducing the effects that occur in real cameras when taking pictures in a bright environment.\nBecause traditional RGB can only represent colors in the range of '0 - 255', so we need to use the bloom effect simulates fringes of light extending from the borders of bright areas, creating the illusion of a bright light overwhelming the camera. As shown below：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/globe-posteffect-blo [...]
- },
- "postEffect.bloom.enable": {
- "desc": "<p>Whether to enable the bloom effect.</p>\n"
- },
- "postEffect.bloom.bloomIntensity": {
- "desc": "<p>The intensity of the bloom. The default is 0.1.</p>\n"
- },
- "postEffect.depthOfField": {
- "desc": "<p>Depth of Field is a post-processing effect that simulates the focus properties of a camera. The area of focus is clear, and the area away from the focus is gradually blurred.</p>\n<p>The depth of field effect allows the observer to focus on the area of focus and make the picture feel stronger. Large depth of field can also create a macro model effect.</p>\n<p>The following are the differences between turning off and turning on the depth of field effect.</p>\n<div class=\ [...]
- },
- "postEffect.depthOfField.enable": {
- "desc": "<p>Whether to enable the depth of field.</p>\n"
- },
- "postEffect.depthOfField.focalDistance": {
- "desc": "<p>The initial focus distance. The user can click on the area to automatically focus.</p>\n"
- },
- "postEffect.depthOfField.focalRange": {
- "desc": "<p>The size of the in-focus area. The objects in this range are completely clear and there is no blurring.</p>\n"
- },
- "postEffect.depthOfField.fstop": {
- "desc": "<p>[F value] of the lens (<a href=\"https://zh.wikipedia.org/wiki/%E7%84%A6%E6%AF%94)\" target=\"_blank\">https://zh.wikipedia.org/wiki/%E7%84%A6%E6%AF%94)</a>, the smaller the value, the shallower the depth of field.</p>\n"
- },
- "postEffect.depthOfField.blurRadius": {
- "desc": "<p>Blur radius outside the focus.</p>\n<p>The difference blur effect between the different radius.</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\"></img>\n <img src=\"documents/asset/gl/img/geo-dof-large.png\" width=\"100%\" title=\"blurSize: 10\"></img>\n</div>\n"
- },
- "postEffect.screenSpaceAmbientOcclusion": {
- "desc": "<p>The ambient occlusion post-processing effect darkens the corners, holes, crevices, and areas where most light can`t reach. It is a supplement to the traditional shadow map, which makes the whole scene more natural and layered.</p>\n<p>Below is a comparison of the effects of no SSAO and 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\"></img>\n <img src=\ [...]
- },
- "postEffect.SSAO": {
- "desc": "<p>Same as <a href=\"#grid3D.postEffect.screenSpaceAmbientOcclusion\">screenSpaceAmbientOcclusion</a></p>\n"
- },
- "postEffect.SSAO.enable": {
- "desc": "<p>Whether to enable SSAO (screen space ambient occlusion). Not enabled by default.</p>\n"
- },
- "postEffect.SSAO.quality": {
- "desc": "<p>The quality of SSAO (screen space ambient occlusion). Supporting<code class=\"codespan\">'low'</code>, <code class=\"codespan\">'medium'</code>, <code class=\"codespan\">'high'</code>, <code class=\"codespan\">'ultra'</code></p>\n"
- },
- "postEffect.SSAO.radius": {
- "desc": "<p>The radius of the SSAO (screen space ambient occlusion). The larger the radius, the more natural the effect, but you need to set a higher <code class=\"codespan\">'quality'</code>.</p>\n<p>The following example is the difference between a smaller and larger radius:</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\"></img>\n <img src=\"docume [...]
- },
- "postEffect.SSAO.intensity": {
- "desc": "<p>The intensity of SSAO (screen space ambient occlusion). The larger the value, the darker the color.</p>\n"
- },
- "postEffect.colorCorrection": {
- "desc": "<p>Color correction and adjustment. Similar to Color Adjustments in Photoshop.</p>\n<p>The same scene in the figure below is adjusted to the difference between the cool color system and the warm color system.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/buildings-cold.jpg\" width=\"100%\" title=\"Cold\"></img>\n <img src=\"documents/asset/gl/img/buildings-warm.jpg\" width=\"100%\" title=\"Warm\"></img>\n</div>\n\n"
- },
- "postEffect.colorCorrection.enable": {
- "desc": "<p>Whether to enable the color correction.</p>\n"
- },
- "postEffect.colorCorrection.lookupTexture": {
- "desc": "<p>Color correction lookup texture, recommended.</p>\n<p>The color correction lookup texture is a texture image like the one below.</p>\n<p><img width=\"200\" height=\"auto\" src=\"documents/asset/gl/img/lookup.png\"></p>\n<p>This is the basic lookup texture image that you can use directly.\nTo adjust the color of the scene to the effect you want, you can take a screenshot of the scene and adjust the color to the desired effect in image processing software such as Photoshop. [...]
- },
- "postEffect.colorCorrection.exposure": {
- "desc": "<p>The exposure of the image.</p>\n"
- },
- "postEffect.colorCorrection.brightness": {
- "desc": "<p>The brightness of the image.</p>\n"
- },
- "postEffect.colorCorrection.contrast": {
- "desc": "<p>The contrast of the image.</p>\n"
- },
- "postEffect.colorCorrection.saturation": {
- "desc": "<p>The saturation of the image.</p>\n"
- },
- "postEffect.FXAA": {
- "desc": "<p>After opening <a href=\"#grid3D.postEffect\">postEffect</a>, WebGL's default MSAA (Multi Sampling Anti Aliasing) will not work. At this time, FXAA (Fast Approximate Anti-Aliasing) can solve the anti-aliasing problem quickly and easily. FXAA blurs the edge of the scene to solve the problem of aliasing. It works well on some scenes, but in echarts-gl, you need to ensure that the edges of many texts and lines are sharp and clear, so FXAA is not suitable. At this point we [...]
- },
- "postEffect.FXAA.enable": {
- "desc": "<p>Whether to enable FXAA. Not enabled by default.</p>\n"
- },
- "temporalSuperSampling": {
- "desc": "<p>Temporal supersampling. After opening <a href=\"#grid3D.postEffect\">postEffect</a>, WebGL's default MSAA (MultiSampling Anti-Aliasing) will not work, so we need to solve the problem of sampling.</p>\n<p>Temporal supersampling is an anti-aliasing method. After the picture is still, it will continue to sample multiple times and taken at several instances inside the pixel and an average color value is calculated, thus achieving anti-aliasing effect.\nAnd in this process [...]
- },
- "temporalSuperSampling.enable": {
- "desc": "<p>Whether to enable temporal supersampling. By default, temporal supersampling is also turned on synchronously when <a href=\"#grid3D.postEffect\">postEffect</a> is turned on.</p>\n"
- },
- "viewControl": {
- "desc": "<p><code class=\"codespan\">viewControl</code> is used for mouse rotation, zooming, and other perspective control.</p>\n"
- },
- "viewControl.projection": {
- "desc": "<p>The way of projection, the default is <code class=\"codespan\">'perspective'</code> projection, also supports setting to <code class=\"codespan\">'orthogonal'</code> projection.</p>\n"
- },
- "viewControl.autoRotate": {
- "desc": "<p>Whether to enable the angle of view to automatically rotate around the object.</p>\n"
- },
- "viewControl.autoRotateDirection": {
- "desc": "<p>The direction in which the object auto rotates. The default is <code class=\"codespan\">'cw'</code> means clockwise from top to bottom, and can also use <code class=\"codespan\">'ccw'</code> means counterclockwise from top to bottom.</p>\n"
- },
- "viewControl.autoRotateSpeed": {
- "desc": "<p>The speed at which the object auto rotates. The unit is <code class=\"codespan\">angle/second</code>, the default is <code class=\"codespan\">10</code>, which is a turn of <code class=\"codespan\">36</code> seconds.</p>\n"
- },
- "viewControl.autoRotateAfterStill": {
- "desc": "<p>The time interval for automatic rotation to resume after the mouse is still. Valid after opening <a href=\"#grid3D.viewControl.autoRotate\">autoRotate</a>.</p>\n"
- },
- "viewControl.damping": {
- "desc": "<p>The damping when the mouse is rotated, zoomed, etc.\nWhen it is greater than 0, the angle of view will continue to move (rotate and zoom) due to certain inertia after the mouse is still.</p>\n"
- },
- "viewControl.rotateSensitivity": {
- "desc": "<p>The sensitivity of the rotation operation. The greater the value, the more sensitive. Supports the use of arrays to set the horizontal and vertical rotation sensitivity separately.</p>\n<p>The default is <code class=\"codespan\">1</code>.</p>\n<p>Cannot be rotated after setting to <code class=\"codespan\">0</code>.</p>\n<pre><code class=\"lang-ts\">// can't rotate\nrotateSensitivity: 0\n// can only be rotated horizontally\nrotateSensitivity: [1, 0]\n// can only rotat [...]
- },
- "viewControl.zoomSensitivity": {
- "desc": "<p>The sensitivity of the zoom operation, the larger the value, the more sensitive. The default is <code class=\"codespan\">1</code>.</p>\n<p>Can<code class=\"codespan\">t be scaled after setting to</code>0`.</p>\n"
- },
- "viewControl.panSensitivity": {
- "desc": "<p>The sensitivity of the panning operation, the greater the value, the more sensitive. Supports the use of arrays to set the horizontal and vertical translation sensitivity.</p>\n<p>The default is <code class=\"codespan\">1</code>.</p>\n<p>Cannot pan after setting to <code class=\"codespan\">0</code>.</p>\n"
- },
- "viewControl.panMouseButton": {
- "desc": "<p>The mouse button used for panning operation supports:</p>\n<ul>\n<li><p><code class=\"codespan\">'left'</code> left mouse button (default)</p>\n</li>\n<li><p><code class=\"codespan\">'middle'</code> middle mouse button</p>\n</li>\n<li><p><code class=\"codespan\">'right'</code> right mouse button</p>\n</li>\n</ul>\n<p>Note: If set to the right mouse button, the default context menu will be blocked.</p>\n"
- },
- "viewControl.rotateMouseButton": {
- "desc": "<p>The mouse button used for the rotation operation supports:</p>\n<ul>\n<li><p><code class=\"codespan\">'left'</code> left mouse button</p>\n</li>\n<li><p><code class=\"codespan\">'middle'</code> middle mouse button (default)</p>\n</li>\n<li><p><code class=\"codespan\">'right'</code> right mouse button</p>\n</li>\n</ul>\n<p>Note: If set to the right mouse button, the default context menu will be blocked.</p>\n"
- },
- "viewControl.distance": {
- "desc": "<p>The distance of the default perspective from the subject. For <a href=\"#globe\">globe</a>, the distance from the Earth's surface is the distance from the center origin for other components such as <a href=\"#grid3D\">grid3D</a> and <a href=\"#geo3D\">geo3D</a>. Valid when <a href=\"#grid3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'perspective'</code>.</p>\n"
- },
- "viewControl.minDistance": {
- "desc": "<p>The angle of view is controlled by the mouse to bring the minimum distance to the subject. Valid when <a href=\"#grid3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'perspective'</code>.</p>\n"
- },
- "viewControl.maxDistance": {
- "desc": "<p>The angle of view can be extended to the maximum distance of the subject by mouse control. Valid when <a href=\"#grid3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'perspective'</code>.</p>\n"
- },
- "viewControl.orthographicSize": {
- "desc": "<p>The size of the orthogonal projection. Valid when <a href=\"#grid3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'orthographic'</code>.</p>\n"
- },
- "viewControl.maxOrthographicSize": {
- "desc": "<p>The maximum value of the orthogonal projection scaling. Valid when <a href=\"#grid3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'orthographic'</code>.</p>\n"
- },
- "viewControl.minOrthographicSize": {
- "desc": "<p>The minimum value of the orthogonal projection scaling. Valid when <a href=\"#grid3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'orthographic'</code></p>\n"
- },
- "viewControl.alpha": {
- "desc": "<p>The angle of view is around the x-axis, which is the angle of rotation up and down. With <a href=\"#grid3D.light.main.beta\">beta</a> you can control the direction of the perspective.</p>\n<p>As shown below：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/view-alpha-beta.png\"></p>\n"
- },
- "viewControl.beta": {
- "desc": "<p>The angle of view is around the y-axis, which is the angle of rotation from left to right.</p>\n"
- },
- "viewControl.center": {
- "desc": "<p>At the center of the angle of view, the rotation will also rotate around this center point. The default is <code class=\"codespan\">[0,0,0]</code>.</p>\n"
- },
- "viewControl.minAlpha": {
- "desc": "<p>The minimum alpha value to rotate up and down. That is, the angle of view can be rotated to reach the uppermost angle.</p>\n"
- },
- "viewControl.maxAlpha": {
- "desc": "<p>The maximum alpha value to rotate up and down. That is, the angle of view can be rotated to the lowest angle.</p>\n"
- },
- "viewControl.minBeta": {
- "desc": "<p>The minimum beta value to rotate left and right. That is, the angle of view can be rotated to the leftmost angle.</p>\n"
- },
- "viewControl.maxBeta": {
- "desc": "<p>The maximum beta value to rotate left and right rotation. That is, the angle of view can be rotated to the rightmost angle.</p>\n"
- },
- "viewControl.animation": {
- "desc": "<p>Whether to enable animation.</p>\n"
- },
- "viewControl.animationDurationUpdate": {
- "desc": "<p>The duration time for update the transition animation.</p>\n"
- },
- "viewControl.animationEasingUpdate": {
- "desc": "<p>The easing effect for update transition animation.</p>\n"
- },
- "zlevel": {
- "desc": "<p>The layer in which the component is located.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and [...]
- },
- "left": {
- "desc": "<p>Distance between component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>; and it can also be <code class=\"codespan\">'left'</code>, <code class=\"codespan\">'center'</code>, or <code class=\"codespan\">'right'</code>.</p>\n<p>If [...]
- },
- "top": {
- "desc": "<p>Distance between component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>; and it can also be <code class=\"codespan\">'top'</code>, <code class=\"codespan\">'middle'</code>, or <code class=\"codespan\">'bottom'</code>.</p>\n<p>If t [...]
- },
- "right": {
- "desc": "<p>Distance between component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>.</p>\n<p> Adaptive by default.</p>\n"
- },
- "bottom": {
- "desc": "<p>Distance between component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>.</p>\n<p> Adaptive by default.</p>\n"
- },
- "width": {
- "desc": "<p> The width of the view of the component.</p>\n"
- },
- "height": {
- "desc": "<p> The height of the view of the component.</p>\n"
- }
-}
\ No newline at end of file
+{"show":{"desc":"<p>Whether to display a 3D cartesian coordinate system component.</p>\n"},"boxWidth":{"desc":"<p>3D cartesian coordinate system width in a 3D scene. With <a href=\"#grid3D.viewControl.distance\">viewControl.distance</a> you can get the most appropriate display size.</p>\n"},"boxHeight":{"desc":"<p>3D cartesian coordinate system height in a 3D scene.</p>\n"},"boxDepth":{"desc":"<p>3D cartesian coordinate system depth in a 3D scene.</p>\n"},"axisLine":{"desc":"<p>Settings [...]
\ No newline at end of file
diff --git a/en/documents/option-gl-parts/option-gl.js b/en/documents/option-gl-parts/option-gl.js
index 73ad11b1..e52b6e2a 100644
--- a/en/documents/option-gl-parts/option-gl.js
+++ b/en/documents/option-gl-parts/option-gl.js
@@ -1,56 +1 @@
-window.__EC_DOC_option_gl = {
- "globe": {
- "desc": "<p>Globe component. The component provides the drawing of the Earth and the coordinate system. The developer can display 3D Scatter, 3D Bubble, 3D Bar, 3D Lines on it.</p>\n"
- },
- "geo3D": {
- "desc": "<p>A 3D geographic coordinate system component. The component can draw a 3D GeoJSON and coordinate system. Developers can display 3D Scatter, 3D Bubble, 3D Bar, 3D Lines on it.</p>\n"
- },
- "mapbox3D": {
- "desc": "<p>A geographic component based on mapbox-gl-js. Support for drawing <a href=\"#series-scatter3D\">3D Scatter</a>, <a href=\"#series-lines3D\">3D Lines</a>, <a href=\"#series-bar3D\">3D Bar</a>, <a href=\"#series-map3D\">3D map</a> on mapbox maps. You can take advantage of Mapbox's powerful map service and ECharts GL's rich visualization and rendering effects to achieve the visualization you want.</p>\n<p>You need to introduce the official sdk of mapbox before using [...]
- },
- "grid3D": {
- "desc": "<p>3D cartesian coordinate system component. It requires <a href=\"#xAxis3D\">xAxis3D</a>, <a href=\"#yAxis3D\">yAxis3D</a>and <a href=\"#zAxis3D\">zAxis3D</a> axis components to be used together.</p>\n<p>You can draw <a href=\"#series-line3D\">3D Lines</a>, <a href=\"#series-bar3D\">3D Bar</a>, <a href=\"#series-scatter3D\">3D Scatter</a>, <a href=\"#series-surface\">surface</a> on the 3D Cartesian coordinate system.</p>\n<p>You can set the <a href=\"#grid3D.postEffect\">po [...]
- },
- "xAxis3D": {
- "desc": "<p>The X-axis in a 3D cartesian coordinate system.\nYou can use <a href=\"#xAxis3D.grid3DIndex\">grid3DIndex</a> to index <a href=\"#grid3D\">3D cartesian coordinate system</a>.</p>\n<p>The <a href=\"#xAxis3D.axisLine\">axisLine</a>, <a href=\"#xAxis3D.axisTick\">axisTick</a>, <a href=\"#xAxis3D.axisLabel\">axisLabel</a>, <a href=\"#xAxis3D.splitLine\">splitLine</a>, <a href=\"#xAxis3D.splitArea\">splitArea</a>, <a href=\"#xAxis3D.axisPointer\">axisPointer</a> set separately [...]
- },
- "yAxis3D": {
- "desc": "<p>The Y-axis in a 3D cartesian coordinate system.\nYou can use <a href=\"#yAxis3D.grid3DIndex\">grid3DIndex</a> to index <a href=\"#grid3D\">3D cartesian coordinate system</a>.</p>\n<p>The <a href=\"#yAxis3D.axisLine\">axisLine</a>, <a href=\"#yAxis3D.axisTick\">axisTick</a>, <a href=\"#yAxis3D.axisLabel\">axisLabel</a>, <a href=\"#yAxis3D.splitLine\">splitLine</a>, <a href=\"#yAxis3D.splitArea\">splitArea</a>, <a href=\"#yAxis3D.axisPointer\">axisPointer</a> set separately [...]
- },
- "zAxis3D": {
- "desc": "<p>The Z-axis in a 3D cartesian coordinate system.\nYou can use <a href=\"#zAxis3D.grid3DIndex\">grid3DIndex</a> to index <a href=\"#grid3D\">3D cartesian coordinate system</a>.</p>\n<p>The <a href=\"#zAxis3D.axisLine\">axisLine</a>, <a href=\"#zAxis3D.axisTick\">axisTick</a>, <a href=\"#zAxis3D.axisLabel\">axisLabel</a>, <a href=\"#zAxis3D.splitLine\">splitLine</a>, <a href=\"#zAxis3D.splitArea\">splitArea</a>, <a href=\"#zAxis3D.axisPointer\">axisPointer</a> set separately [...]
- },
- "series": {
- "desc": "<p>Series list. Each series decides its diagram type through <code class=\"codespan\">type</code>.</p>\n<p>ECharts-gl adds a rich 3D visualization type.\nIncluding [3D bar] (~series.bar3D), [3D scatter] (~series.scatter3D), [3D lines] (~series.lines3D), [surface] (~series. Surface),\nMost visualization types can be used in a variety of coordinate system components, and are well integrated with the original echarts legend, tooltip, and other interactive components.</p>\n<p>At [...]
- },
- "series-scatter3D": {
- "desc": "<p>3D scatter chart. It can be used to display data in <a href=\"#grid3D\">grid3D</a>, <a href=\"#geo3D\"> geo3D</a>, <a href=\"#globe\">globe</a> using attributes such as size、color and so on.</p>\n<p>This example is a 3D simplex noise drawn with a bubble chart.</p>\n<p><img width=\"500\" height=\"auto\" src=\"documents/asset/gl/img/scatter3D.png\"></p>\n"
- },
- "series-bar3D": {
- "desc": "<p>3D bar. It can be used to display data in <a href=\"#grid3D\">grid3D</a>, <a href=\"#geo3D\"> geo3D</a>, <a href=\"#globe\">globe</a> using attributes such as size 、color and so on.</p>\n<p>The figure below shows the population density data of the world through a 3D bar chart on [geo3D] (~geo3D).</p>\n<p><img width=\"700\" height=\"auto\" src=\"documents/asset/gl/img/geo-bar3D.jpg\"></p>\n"
- },
- "series-line3D": {
- "desc": "<p>3D Line. Can be used for [grid3D] (~grid3D)</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/gl/img/line3D.png\"></p>\n"
- },
- "series-lines3D": {
- "desc": "<p>3D lines. Like the 2D [lines] (<a href=\"https://echarts.apache.org/zh/option.html#series-line)\" target=\"_blank\">https://echarts.apache.org/zh/option.html#series-line)</a>, it is used to represent the line data from the start point to the end point. More is used in geographic visualization.</p>\n<p>Below is an example of a visual airplane flight using <a href=\"#series-lines3D\">lines3D</a> on <a href=\"#globe\">globe</a>.</p>\n<p><img width=\"700\" height=\"auto\" src [...]
- },
- "series-map3D": {
- "desc": "<p><strong>3D map</strong></p>\n<p>3D maps are mainly used for visualizing geographic area data. With the [visualMap] (<a href=\"https://echarts.apache.org/en/option.html#visualMap\" target=\"_blank\">https://echarts.apache.org/en/option.html#visualMap</a>) component, it can be used to display data such as population distribution density in different regions.</p>\n<p>Compared to 2D maps, 3D maps can set different heights for each area. This height can be used to display data [...]
- },
- "series-surface": {
- "desc": "<p>Surface. Support to drawn the [Parameter surface] (<a href=\"https://en.wikipedia.org/wiki/Parametric_surface\" target=\"_blank\">https://en.wikipedia.org/wiki/Parametric_surface</a>) by <a href=\"#series-surface.parametric\">parametric</a>.</p>\n<p>The figure below is a parametric surface similar to a metal part configured as a metal material.</p>\n<p><img width=\"500\" height=\"auto\" src=\"documents/asset/gl/img/parametric-surface.png\"></p>\n"
- },
- "series-polygons3D": {
- "desc": "<p><code class=\"codespan\">polygons3D</code> is used to visualize polygon data with high information on the map, which is often used for drawing of buildings.\nThe picture below shows the nearly 50w number of New York buildings drawn with <code class=\"codespan\">polygons3D</code>.</p>\n<p><img width=\"900\" height=\"auto\" src=\"documents/asset/gl/img/polygons3D-ny.jpg\"></p>\n"
- },
- "series-scatterGL": {
- "desc": "<p>A 2D scatter/bubble plot drawn using WebGL.</p>\n<p>It is used in the same way as <a href=\"https://echarts.apache.org/en/option.html#series-scatter\" target=\"_blank\">scatter</a>.</p>\n"
- },
- "series-graphGL": {
- "desc": "<p>Uses WebGL to drawn the relational chart, support the layout and rendering of large-scale network/relational data.</p>\n"
- },
- "series-flowGL": {
- "desc": "<p>The <code class=\"codespan\">flowGL</code> component visualizes the traces of the vector field through the particle effects implemented by WebGL.</p>\n<p>The figure below shows the effect of the global wind field visualized by <code class=\"codespan\">flowGL</code>.</p>\n<p><img width=\"700\" height=\"auto\" src=\"documents/asset/gl/img/flowGL-wind.jpg\"></p>\n"
- }
-}
\ No newline at end of file
+window.__EC_DOC_option_gl = {"globe":{"desc":"<p>Globe component. The component provides the drawing of the Earth and the coordinate system. The developer can display 3D Scatter, 3D Bubble, 3D Bar, 3D Lines on it.</p>\n"},"geo3D":{"desc":"<p>A 3D geographic coordinate system component. The component can draw a 3D GeoJSON and coordinate system. Developers can display 3D Scatter, 3D Bubble, 3D Bar, 3D Lines on it.</p>\n"},"mapbox3D":{"desc":"<p>A geographic component based on mapbox-gl-js. [...]
\ No newline at end of file
diff --git a/en/documents/option-gl-parts/option-gl.json b/en/documents/option-gl-parts/option-gl.json
index 5f5ede3c..c35ccc7a 100644
--- a/en/documents/option-gl-parts/option-gl.json
+++ b/en/documents/option-gl-parts/option-gl.json
@@ -1,56 +1 @@
-{
- "globe": {
- "desc": "<p>Globe component. The component provides the drawing of the Earth and the coordinate system. The developer can display 3D Scatter, 3D Bubble, 3D Bar, 3D Lines on it.</p>\n"
- },
- "geo3D": {
- "desc": "<p>A 3D geographic coordinate system component. The component can draw a 3D GeoJSON and coordinate system. Developers can display 3D Scatter, 3D Bubble, 3D Bar, 3D Lines on it.</p>\n"
- },
- "mapbox3D": {
- "desc": "<p>A geographic component based on mapbox-gl-js. Support for drawing <a href=\"#series-scatter3D\">3D Scatter</a>, <a href=\"#series-lines3D\">3D Lines</a>, <a href=\"#series-bar3D\">3D Bar</a>, <a href=\"#series-map3D\">3D map</a> on mapbox maps. You can take advantage of Mapbox's powerful map service and ECharts GL's rich visualization and rendering effects to achieve the visualization you want.</p>\n<p>You need to introduce the official sdk of mapbox before using [...]
- },
- "grid3D": {
- "desc": "<p>3D cartesian coordinate system component. It requires <a href=\"#xAxis3D\">xAxis3D</a>, <a href=\"#yAxis3D\">yAxis3D</a>and <a href=\"#zAxis3D\">zAxis3D</a> axis components to be used together.</p>\n<p>You can draw <a href=\"#series-line3D\">3D Lines</a>, <a href=\"#series-bar3D\">3D Bar</a>, <a href=\"#series-scatter3D\">3D Scatter</a>, <a href=\"#series-surface\">surface</a> on the 3D Cartesian coordinate system.</p>\n<p>You can set the <a href=\"#grid3D.postEffect\">po [...]
- },
- "xAxis3D": {
- "desc": "<p>The X-axis in a 3D cartesian coordinate system.\nYou can use <a href=\"#xAxis3D.grid3DIndex\">grid3DIndex</a> to index <a href=\"#grid3D\">3D cartesian coordinate system</a>.</p>\n<p>The <a href=\"#xAxis3D.axisLine\">axisLine</a>, <a href=\"#xAxis3D.axisTick\">axisTick</a>, <a href=\"#xAxis3D.axisLabel\">axisLabel</a>, <a href=\"#xAxis3D.splitLine\">splitLine</a>, <a href=\"#xAxis3D.splitArea\">splitArea</a>, <a href=\"#xAxis3D.axisPointer\">axisPointer</a> set separately [...]
- },
- "yAxis3D": {
- "desc": "<p>The Y-axis in a 3D cartesian coordinate system.\nYou can use <a href=\"#yAxis3D.grid3DIndex\">grid3DIndex</a> to index <a href=\"#grid3D\">3D cartesian coordinate system</a>.</p>\n<p>The <a href=\"#yAxis3D.axisLine\">axisLine</a>, <a href=\"#yAxis3D.axisTick\">axisTick</a>, <a href=\"#yAxis3D.axisLabel\">axisLabel</a>, <a href=\"#yAxis3D.splitLine\">splitLine</a>, <a href=\"#yAxis3D.splitArea\">splitArea</a>, <a href=\"#yAxis3D.axisPointer\">axisPointer</a> set separately [...]
- },
- "zAxis3D": {
- "desc": "<p>The Z-axis in a 3D cartesian coordinate system.\nYou can use <a href=\"#zAxis3D.grid3DIndex\">grid3DIndex</a> to index <a href=\"#grid3D\">3D cartesian coordinate system</a>.</p>\n<p>The <a href=\"#zAxis3D.axisLine\">axisLine</a>, <a href=\"#zAxis3D.axisTick\">axisTick</a>, <a href=\"#zAxis3D.axisLabel\">axisLabel</a>, <a href=\"#zAxis3D.splitLine\">splitLine</a>, <a href=\"#zAxis3D.splitArea\">splitArea</a>, <a href=\"#zAxis3D.axisPointer\">axisPointer</a> set separately [...]
- },
- "series": {
- "desc": "<p>Series list. Each series decides its diagram type through <code class=\"codespan\">type</code>.</p>\n<p>ECharts-gl adds a rich 3D visualization type.\nIncluding [3D bar] (~series.bar3D), [3D scatter] (~series.scatter3D), [3D lines] (~series.lines3D), [surface] (~series. Surface),\nMost visualization types can be used in a variety of coordinate system components, and are well integrated with the original echarts legend, tooltip, and other interactive components.</p>\n<p>At [...]
- },
- "series-scatter3D": {
- "desc": "<p>3D scatter chart. It can be used to display data in <a href=\"#grid3D\">grid3D</a>, <a href=\"#geo3D\"> geo3D</a>, <a href=\"#globe\">globe</a> using attributes such as size、color and so on.</p>\n<p>This example is a 3D simplex noise drawn with a bubble chart.</p>\n<p><img width=\"500\" height=\"auto\" src=\"documents/asset/gl/img/scatter3D.png\"></p>\n"
- },
- "series-bar3D": {
- "desc": "<p>3D bar. It can be used to display data in <a href=\"#grid3D\">grid3D</a>, <a href=\"#geo3D\"> geo3D</a>, <a href=\"#globe\">globe</a> using attributes such as size 、color and so on.</p>\n<p>The figure below shows the population density data of the world through a 3D bar chart on [geo3D] (~geo3D).</p>\n<p><img width=\"700\" height=\"auto\" src=\"documents/asset/gl/img/geo-bar3D.jpg\"></p>\n"
- },
- "series-line3D": {
- "desc": "<p>3D Line. Can be used for [grid3D] (~grid3D)</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/gl/img/line3D.png\"></p>\n"
- },
- "series-lines3D": {
- "desc": "<p>3D lines. Like the 2D [lines] (<a href=\"https://echarts.apache.org/zh/option.html#series-line)\" target=\"_blank\">https://echarts.apache.org/zh/option.html#series-line)</a>, it is used to represent the line data from the start point to the end point. More is used in geographic visualization.</p>\n<p>Below is an example of a visual airplane flight using <a href=\"#series-lines3D\">lines3D</a> on <a href=\"#globe\">globe</a>.</p>\n<p><img width=\"700\" height=\"auto\" src [...]
- },
- "series-map3D": {
- "desc": "<p><strong>3D map</strong></p>\n<p>3D maps are mainly used for visualizing geographic area data. With the [visualMap] (<a href=\"https://echarts.apache.org/en/option.html#visualMap\" target=\"_blank\">https://echarts.apache.org/en/option.html#visualMap</a>) component, it can be used to display data such as population distribution density in different regions.</p>\n<p>Compared to 2D maps, 3D maps can set different heights for each area. This height can be used to display data [...]
- },
- "series-surface": {
- "desc": "<p>Surface. Support to drawn the [Parameter surface] (<a href=\"https://en.wikipedia.org/wiki/Parametric_surface\" target=\"_blank\">https://en.wikipedia.org/wiki/Parametric_surface</a>) by <a href=\"#series-surface.parametric\">parametric</a>.</p>\n<p>The figure below is a parametric surface similar to a metal part configured as a metal material.</p>\n<p><img width=\"500\" height=\"auto\" src=\"documents/asset/gl/img/parametric-surface.png\"></p>\n"
- },
- "series-polygons3D": {
- "desc": "<p><code class=\"codespan\">polygons3D</code> is used to visualize polygon data with high information on the map, which is often used for drawing of buildings.\nThe picture below shows the nearly 50w number of New York buildings drawn with <code class=\"codespan\">polygons3D</code>.</p>\n<p><img width=\"900\" height=\"auto\" src=\"documents/asset/gl/img/polygons3D-ny.jpg\"></p>\n"
- },
- "series-scatterGL": {
- "desc": "<p>A 2D scatter/bubble plot drawn using WebGL.</p>\n<p>It is used in the same way as <a href=\"https://echarts.apache.org/en/option.html#series-scatter\" target=\"_blank\">scatter</a>.</p>\n"
- },
- "series-graphGL": {
- "desc": "<p>Uses WebGL to drawn the relational chart, support the layout and rendering of large-scale network/relational data.</p>\n"
- },
- "series-flowGL": {
- "desc": "<p>The <code class=\"codespan\">flowGL</code> component visualizes the traces of the vector field through the particle effects implemented by WebGL.</p>\n<p>The figure below shows the effect of the global wind field visualized by <code class=\"codespan\">flowGL</code>.</p>\n<p><img width=\"700\" height=\"auto\" src=\"documents/asset/gl/img/flowGL-wind.jpg\"></p>\n"
- }
-}
\ No newline at end of file
+{"globe":{"desc":"<p>Globe component. The component provides the drawing of the Earth and the coordinate system. The developer can display 3D Scatter, 3D Bubble, 3D Bar, 3D Lines on it.</p>\n"},"geo3D":{"desc":"<p>A 3D geographic coordinate system component. The component can draw a 3D GeoJSON and coordinate system. Developers can display 3D Scatter, 3D Bubble, 3D Bar, 3D Lines on it.</p>\n"},"mapbox3D":{"desc":"<p>A geographic component based on mapbox-gl-js. Support for drawing <a href [...]
\ No newline at end of file
diff --git a/en/documents/option-gl-parts/option-gl.mapbox3D.js b/en/documents/option-gl-parts/option-gl.mapbox3D.js
index 559be16c..b14d8a75 100644
--- a/en/documents/option-gl-parts/option-gl.mapbox3D.js
+++ b/en/documents/option-gl-parts/option-gl.mapbox3D.js
@@ -1,203 +1 @@
-window.__EC_DOC_option_gl_mapbox3D = {
- "style": {
- "desc": "<p>Sets the style of the Mapbox map. Same as <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": {
- "desc": "<p>Sets the longitude and latitude of the center of the map. Longitude and latitude are represented by arrays, for example:</p>\n<pre><code class=\"lang-ts\">mapbox3D: {\n center: [104.114129, 37.550339],\n zoom: 3\n}\n</code></pre>\n"
- },
- "zoom": {
- "desc": "<p>Sets the zoom level of the map. See <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": {
- "desc": "<p>Sets the bearing angle of the map. See <a href=\"https://www.mapbox.com/mapbox-gl-js/style-spec/#root-bearing\" target=\"_blank\">https://www.mapbox.com/mapbox-gl-js/style-spec/#root-bearing</a></p>\n"
- },
- "pitch": {
- "desc": "<p>Sets the pitch angle of the map. The default is <code class=\"codespan\">0</code> means perpendicular to the surface of the map. The greater value is <code class=\"codespan\">60</code>. See <a href=\"https://www.mapbox.com/mapbox-gl-js/style-spec/#root-pitch\" target=\"_blank\">https://www.mapbox.com/mapbox-gl-js/style-spec/#root-pitch</a></p>\n"
- },
- "altitudeScale": {
- "desc": "<p>The zoom of the altitude Scale.</p>\n"
- },
- "shading": {
- "desc": "<p>The coloring effect of 3D graphics in mapbox3D. The following three coloring methods are supported in echarts-gl:</p>\n<ul>\n<li><p><code class=\"codespan\">'color'</code>\nOnly display colors, not affected by other factors such as lighting.</p>\n</li>\n<li><p><code class=\"codespan\">'lambert'</code>\nThrough the classic [lambert] coloring, can express the light and dark that the light shows.</p>\n</li>\n<li><p><code class=\"codespan\">'realistic' [...]
- },
- "realisticMaterial": {
- "desc": "<p>The configuration item of the realistic material is valid when <a href=\"#mapbox3D.shading\">shading</a> is <code class=\"codespan\">'realistic'</code>.</p>\n"
- },
- "realisticMaterial.detailTexture": {
- "desc": "<p>The texture map of the material detail.</p>\n"
- },
- "realisticMaterial.textureTiling": {
- "desc": "<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n"
- },
- "realisticMaterial.textureOffset": {
- "desc": "<p>The displacement of the texture detail texture.</p>\n"
- },
- "realisticMaterial.roughness": {
- "desc": "<p>The <code class=\"codespan\">roughness</code> attribute is used to indicate the roughness of the material, <code class=\"codespan\">0</code> is completely smooth, <code class=\"codespan\">1</code> is completely rough, and the middle value is between the two.</p>\n<p>The following images show the effect of <code class=\"codespan\">roughness</code> in <a href=\"#globe\"><code class=\"codespan\">globe</code></a> <code class=\"codespan\">0.2</code> (smooth) and <code class=\" [...]
- },
- "realisticMaterial.metalness": {
- "desc": "<p>The <code class=\"codespan\">metalness</code> attribute is used to indicate whether the material is metal or non-metal, <code class=\"codespan\">0</code> is non-metallic, <code class=\"codespan\">1</code> is metal, and the middle value is between the two. Usually set to <code class=\"codespan\">0</code> and <code class=\"codespan\">1</code> to meet most of the scenes.</p>\n<p>The picture below show the difference between `metal' and '0' in <a href=\"#globe\">g [...]
- },
- "realisticMaterial.roughnessAdjust": {
- "desc": "<p>Roughness adjustment is useful when using roughness map. The overall roughness of the texture can be adjusted. The default is <code class=\"codespan\">0.5</code>, <code class=\"codespan\">0</code> is completely smooth, <code class=\"codespan\">1</code> is completely rough.</p>\n"
- },
- "realisticMaterial.metalnessAdjust": {
- "desc": "<p>Metalness adjustment is useful when using metalness maps. The overall metallicity of the texture can be adjusted. The default is <code class=\"codespan\">0.5</code>, <code class=\"codespan\">0</code> is non-metal, <code class=\"codespan\">1</code> is metal.</p>\n"
- },
- "realisticMaterial.normalTexture": {
- "desc": "<p>Normal map of material details.</p>\n<p>Using normal maps, you can still display rich shades of detail on the surface of the object with fewer vertices.</p>\n"
- },
- "lambertMaterial": {
- "desc": "<p>The configuration item of the lambert material is valid when <a href=\"#mapbox3D.shading\">shading</a> is <code class=\"codespan\">'lambert'</code>.</p>\n"
- },
- "lambertMaterial.detailTexture": {
- "desc": "<p>The texture map of the material detail.</p>\n"
- },
- "lambertMaterial.textureTiling": {
- "desc": "<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n"
- },
- "lambertMaterial.textureOffset": {
- "desc": "<p>The displacement of the texture detail texture.</p>\n"
- },
- "colorMaterial": {
- "desc": "<p>The color material related configuration item is valid when <a href=\"#mapbox3D.shading\">shading</a> is <code class=\"codespan\">'color'</code>.</p>\n"
- },
- "colorMaterial.detailTexture": {
- "desc": "<p>The texture map of the material detail.</p>\n"
- },
- "colorMaterial.textureTiling": {
- "desc": "<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n"
- },
- "colorMaterial.textureOffset": {
- "desc": "<p>The displacement of the texture detail texture.</p>\n"
- },
- "light": {
- "desc": "<p>Light related settings. Invalid when <a href=\"#mapbox3D.shading\">shading</a> is 'color'.</p>\n<p>The lighting settings affect the components and all the charts on the component's coordinate system.</p>\n<p>A reasonable lighting setting can make the brightness and darkness of the whole scene richer and more layered.</p>\n"
- },
- "light.main": {
- "desc": "<p>The setting of the main light source of the scene. In the <a href=\"#globe\">globe</a> component is the sun.</p>\n"
- },
- "light.main.color": {
- "desc": "<p>The color of the main light source.</p>\n"
- },
- "light.main.intensity": {
- "desc": "<p>The intensity of the main light source.</p>\n"
- },
- "light.main.shadow": {
- "desc": "<p>Whether the main light source displays a shadow. The default is off.</p>\n<p>Turning on the shadows can bring more realistic and layered lighting to the scene. But it also increases the operating overhead of the program.</p>\n<p>The following two images show the difference between turning on the shadow and turning off the shadow.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-shadow.png\" width=\"100%\" tit [...]
- },
- "light.main.shadowQuality": {
- "desc": "<p>The quality of the shadow. You can choose <code class=\"codespan\">'low'</code>, <code class=\"codespan\">'medium'</code>, <code class=\"codespan\">'high'</code>, <code class=\"codespan\">'ultra'</code></p>\n<p>The following two images shows the difference between low quality and high quality shadows.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-shadow-low.png\" width=\"100 [...]
- },
- "light.main.alpha": {
- "desc": "<p>The main light source is around the x-axis, which is the angle of up-down rotation. Control the direction of the light with <a href=\"#mapbox3D.light.main.beta\">beta</a>.</p>\n<p>As the following image show:</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/light-alpha-beta.png\"></p>\n<p>The <a href=\"#globe\">globe</a> component can control the time of sunlight by <a href=\"#globe.light.main.time\">time</a>.</p>\n"
- },
- "light.main.beta": {
- "desc": "<p>The main light source is around the y-axis, which is the angle of the left-right rotation.</p>\n"
- },
- "light.ambient": {
- "desc": "<p>Global ambient light settings.</p>\n"
- },
- "light.ambient.color": {
- "desc": "<p>The color of ambient light.</p>\n"
- },
- "light.ambient.intensity": {
- "desc": "<p>The intensity of ambient light.</p>\n"
- },
- "light.ambientCubemap": {
- "desc": "<p>The ambientCubemap uses texture as the source of ambient light, which provides diffuse and specular for objects. The diffuse and specular can be set separately by <a href=\"#mapbox3D.light.ambientCubemap.diffuseIntensity\">diffuseIntensity</a> and <a href=\"#mapbox3D.light.ambientCubemap.specularIntensity\">specularIntensity</a>.</p>\n"
- },
- "light.ambientCubemap.texture": {
- "desc": "<p>The URL of the ambient cubemap supports HDR images in the <code class=\"codespan\">.hdr</code> format. You can obtained the resources for <code class=\"codespan\">.hdr</code> from <a href=\"http://www.hdrlabs.com/sibl/archive.html\" target=\"_blank\">http://www.hdrlabs.com/sibl/archive.html</a> and other websites.</p>\n<p>Example：</p>\n<pre><code class=\"lang-ts\">ambientCubemap: {\n texture: 'pisa.hdr',\n // The exposure value used when analytic hdr\n ex [...]
- },
- "light.ambientCubemap.diffuseIntensity": {
- "desc": "<p>The intensity of diffuse.</p>\n"
- },
- "light.ambientCubemap.specularIntensity": {
- "desc": "<p>The intensity of specular.</p>\n"
- },
- "postEffect": {
- "desc": "<p>Post-processing effects related configuration. It can add effects such as highlights, depth of field, screen space ambient occlusion (SSAO), toning to the picture. And it can make the whole picture more textured.</p>\n<p>The following are the differences between closing <code class=\"codespan\">postEffect</code> and opening <code class=\"codespan\">postEffect</code>.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/i [...]
- },
- "postEffect.enable": {
- "desc": "<p>Whether to enable post-processing effects. Not enabled by default.</p>\n"
- },
- "postEffect.bloom": {
- "desc": "<p>Bloom is used to reproducing the effects that occur in real cameras when taking pictures in a bright environment.\nBecause traditional RGB can only represent colors in the range of '0 - 255', so we need to use the bloom effect simulates fringes of light extending from the borders of bright areas, creating the illusion of a bright light overwhelming the camera. As shown below：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/globe-posteffect-blo [...]
- },
- "postEffect.bloom.enable": {
- "desc": "<p>Whether to enable the bloom effect.</p>\n"
- },
- "postEffect.bloom.bloomIntensity": {
- "desc": "<p>The intensity of the bloom. The default is 0.1.</p>\n"
- },
- "postEffect.depthOfField": {
- "desc": "<p>Depth of Field is a post-processing effect that simulates the focus properties of a camera. The area of focus is clear, and the area away from the focus is gradually blurred.</p>\n<p>The depth of field effect allows the observer to focus on the area of focus and make the picture feel stronger. Large depth of field can also create a macro model effect.</p>\n<p>The following are the differences between turning off and turning on the depth of field effect.</p>\n<div class=\ [...]
- },
- "postEffect.depthOfField.enable": {
- "desc": "<p>Whether to enable the depth of field.</p>\n"
- },
- "postEffect.depthOfField.focalDistance": {
- "desc": "<p>The initial focus distance. The user can click on the area to automatically focus.</p>\n"
- },
- "postEffect.depthOfField.focalRange": {
- "desc": "<p>The size of the in-focus area. The objects in this range are completely clear and there is no blurring.</p>\n"
- },
- "postEffect.depthOfField.fstop": {
- "desc": "<p>[F value] of the lens (<a href=\"https://zh.wikipedia.org/wiki/%E7%84%A6%E6%AF%94)\" target=\"_blank\">https://zh.wikipedia.org/wiki/%E7%84%A6%E6%AF%94)</a>, the smaller the value, the shallower the depth of field.</p>\n"
- },
- "postEffect.depthOfField.blurRadius": {
- "desc": "<p>Blur radius outside the focus.</p>\n<p>The difference blur effect between the different radius.</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\"></img>\n <img src=\"documents/asset/gl/img/geo-dof-large.png\" width=\"100%\" title=\"blurSize: 10\"></img>\n</div>\n"
- },
- "postEffect.screenSpaceAmbientOcclusion": {
- "desc": "<p>The ambient occlusion post-processing effect darkens the corners, holes, crevices, and areas where most light can`t reach. It is a supplement to the traditional shadow map, which makes the whole scene more natural and layered.</p>\n<p>Below is a comparison of the effects of no SSAO and 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\"></img>\n <img src=\ [...]
- },
- "postEffect.SSAO": {
- "desc": "<p>Same as <a href=\"#mapbox3D.postEffect.screenSpaceAmbientOcclusion\">screenSpaceAmbientOcclusion</a></p>\n"
- },
- "postEffect.SSAO.enable": {
- "desc": "<p>Whether to enable SSAO (screen space ambient occlusion). Not enabled by default.</p>\n"
- },
- "postEffect.SSAO.quality": {
- "desc": "<p>The quality of SSAO (screen space ambient occlusion). Supporting<code class=\"codespan\">'low'</code>, <code class=\"codespan\">'medium'</code>, <code class=\"codespan\">'high'</code>, <code class=\"codespan\">'ultra'</code></p>\n"
- },
- "postEffect.SSAO.radius": {
- "desc": "<p>The radius of the SSAO (screen space ambient occlusion). The larger the radius, the more natural the effect, but you need to set a higher <code class=\"codespan\">'quality'</code>.</p>\n<p>The following example is the difference between a smaller and larger radius:</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\"></img>\n <img src=\"docume [...]
- },
- "postEffect.SSAO.intensity": {
- "desc": "<p>The intensity of SSAO (screen space ambient occlusion). The larger the value, the darker the color.</p>\n"
- },
- "postEffect.colorCorrection": {
- "desc": "<p>Color correction and adjustment. Similar to Color Adjustments in Photoshop.</p>\n<p>The same scene in the figure below is adjusted to the difference between the cool color system and the warm color system.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/buildings-cold.jpg\" width=\"100%\" title=\"Cold\"></img>\n <img src=\"documents/asset/gl/img/buildings-warm.jpg\" width=\"100%\" title=\"Warm\"></img>\n</div>\n\n"
- },
- "postEffect.colorCorrection.enable": {
- "desc": "<p>Whether to enable the color correction.</p>\n"
- },
- "postEffect.colorCorrection.lookupTexture": {
- "desc": "<p>Color correction lookup texture, recommended.</p>\n<p>The color correction lookup texture is a texture image like the one below.</p>\n<p><img width=\"200\" height=\"auto\" src=\"documents/asset/gl/img/lookup.png\"></p>\n<p>This is the basic lookup texture image that you can use directly.\nTo adjust the color of the scene to the effect you want, you can take a screenshot of the scene and adjust the color to the desired effect in image processing software such as Photoshop. [...]
- },
- "postEffect.colorCorrection.exposure": {
- "desc": "<p>The exposure of the image.</p>\n"
- },
- "postEffect.colorCorrection.brightness": {
- "desc": "<p>The brightness of the image.</p>\n"
- },
- "postEffect.colorCorrection.contrast": {
- "desc": "<p>The contrast of the image.</p>\n"
- },
- "postEffect.colorCorrection.saturation": {
- "desc": "<p>The saturation of the image.</p>\n"
- },
- "postEffect.FXAA": {
- "desc": "<p>After opening <a href=\"#mapbox3D.postEffect\">postEffect</a>, WebGL's default MSAA (Multi Sampling Anti Aliasing) will not work. At this time, FXAA (Fast Approximate Anti-Aliasing) can solve the anti-aliasing problem quickly and easily. FXAA blurs the edge of the scene to solve the problem of aliasing. It works well on some scenes, but in echarts-gl, you need to ensure that the edges of many texts and lines are sharp and clear, so FXAA is not suitable. At this point [...]
- },
- "postEffect.FXAA.enable": {
- "desc": "<p>Whether to enable FXAA. Not enabled by default.</p>\n"
- },
- "temporalSuperSampling": {
- "desc": "<p>Temporal supersampling. After opening <a href=\"#mapbox3D.postEffect\">postEffect</a>, WebGL's default MSAA (MultiSampling Anti-Aliasing) will not work, so we need to solve the problem of sampling.</p>\n<p>Temporal supersampling is an anti-aliasing method. After the picture is still, it will continue to sample multiple times and taken at several instances inside the pixel and an average color value is calculated, thus achieving anti-aliasing effect.\nAnd in this proce [...]
- },
- "temporalSuperSampling.enable": {
- "desc": "<p>Whether to enable temporal supersampling. By default, temporal supersampling is also turned on synchronously when <a href=\"#mapbox3D.postEffect\">postEffect</a> is turned on.</p>\n"
- }
-}
\ No newline at end of file
+window.__EC_DOC_option_gl_mapbox3D = {"style":{"desc":"<p>Sets the style of the Mapbox map. Same as <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":{"desc":"<p>Sets the longitude and latitude of the center of the map. Longitude and latitude are represented by arrays, for example:</p>\n<pre><code class=\"lang-ts\">mapbox3D: {\n center: [104.114129, 37.550339],\n zoom: 3\n}\n</code></p [...]
\ No newline at end of file
diff --git a/en/documents/option-gl-parts/option-gl.mapbox3D.json b/en/documents/option-gl-parts/option-gl.mapbox3D.json
index ad1f500e..d283be82 100644
--- a/en/documents/option-gl-parts/option-gl.mapbox3D.json
+++ b/en/documents/option-gl-parts/option-gl.mapbox3D.json
@@ -1,203 +1 @@
-{
- "style": {
- "desc": "<p>Sets the style of the Mapbox map. Same as <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": {
- "desc": "<p>Sets the longitude and latitude of the center of the map. Longitude and latitude are represented by arrays, for example:</p>\n<pre><code class=\"lang-ts\">mapbox3D: {\n center: [104.114129, 37.550339],\n zoom: 3\n}\n</code></pre>\n"
- },
- "zoom": {
- "desc": "<p>Sets the zoom level of the map. See <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": {
- "desc": "<p>Sets the bearing angle of the map. See <a href=\"https://www.mapbox.com/mapbox-gl-js/style-spec/#root-bearing\" target=\"_blank\">https://www.mapbox.com/mapbox-gl-js/style-spec/#root-bearing</a></p>\n"
- },
- "pitch": {
- "desc": "<p>Sets the pitch angle of the map. The default is <code class=\"codespan\">0</code> means perpendicular to the surface of the map. The greater value is <code class=\"codespan\">60</code>. See <a href=\"https://www.mapbox.com/mapbox-gl-js/style-spec/#root-pitch\" target=\"_blank\">https://www.mapbox.com/mapbox-gl-js/style-spec/#root-pitch</a></p>\n"
- },
- "altitudeScale": {
- "desc": "<p>The zoom of the altitude Scale.</p>\n"
- },
- "shading": {
- "desc": "<p>The coloring effect of 3D graphics in mapbox3D. The following three coloring methods are supported in echarts-gl:</p>\n<ul>\n<li><p><code class=\"codespan\">'color'</code>\nOnly display colors, not affected by other factors such as lighting.</p>\n</li>\n<li><p><code class=\"codespan\">'lambert'</code>\nThrough the classic [lambert] coloring, can express the light and dark that the light shows.</p>\n</li>\n<li><p><code class=\"codespan\">'realistic' [...]
- },
- "realisticMaterial": {
- "desc": "<p>The configuration item of the realistic material is valid when <a href=\"#mapbox3D.shading\">shading</a> is <code class=\"codespan\">'realistic'</code>.</p>\n"
- },
- "realisticMaterial.detailTexture": {
- "desc": "<p>The texture map of the material detail.</p>\n"
- },
- "realisticMaterial.textureTiling": {
- "desc": "<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n"
- },
- "realisticMaterial.textureOffset": {
- "desc": "<p>The displacement of the texture detail texture.</p>\n"
- },
- "realisticMaterial.roughness": {
- "desc": "<p>The <code class=\"codespan\">roughness</code> attribute is used to indicate the roughness of the material, <code class=\"codespan\">0</code> is completely smooth, <code class=\"codespan\">1</code> is completely rough, and the middle value is between the two.</p>\n<p>The following images show the effect of <code class=\"codespan\">roughness</code> in <a href=\"#globe\"><code class=\"codespan\">globe</code></a> <code class=\"codespan\">0.2</code> (smooth) and <code class=\" [...]
- },
- "realisticMaterial.metalness": {
- "desc": "<p>The <code class=\"codespan\">metalness</code> attribute is used to indicate whether the material is metal or non-metal, <code class=\"codespan\">0</code> is non-metallic, <code class=\"codespan\">1</code> is metal, and the middle value is between the two. Usually set to <code class=\"codespan\">0</code> and <code class=\"codespan\">1</code> to meet most of the scenes.</p>\n<p>The picture below show the difference between `metal' and '0' in <a href=\"#globe\">g [...]
- },
- "realisticMaterial.roughnessAdjust": {
- "desc": "<p>Roughness adjustment is useful when using roughness map. The overall roughness of the texture can be adjusted. The default is <code class=\"codespan\">0.5</code>, <code class=\"codespan\">0</code> is completely smooth, <code class=\"codespan\">1</code> is completely rough.</p>\n"
- },
- "realisticMaterial.metalnessAdjust": {
- "desc": "<p>Metalness adjustment is useful when using metalness maps. The overall metallicity of the texture can be adjusted. The default is <code class=\"codespan\">0.5</code>, <code class=\"codespan\">0</code> is non-metal, <code class=\"codespan\">1</code> is metal.</p>\n"
- },
- "realisticMaterial.normalTexture": {
- "desc": "<p>Normal map of material details.</p>\n<p>Using normal maps, you can still display rich shades of detail on the surface of the object with fewer vertices.</p>\n"
- },
- "lambertMaterial": {
- "desc": "<p>The configuration item of the lambert material is valid when <a href=\"#mapbox3D.shading\">shading</a> is <code class=\"codespan\">'lambert'</code>.</p>\n"
- },
- "lambertMaterial.detailTexture": {
- "desc": "<p>The texture map of the material detail.</p>\n"
- },
- "lambertMaterial.textureTiling": {
- "desc": "<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n"
- },
- "lambertMaterial.textureOffset": {
- "desc": "<p>The displacement of the texture detail texture.</p>\n"
- },
- "colorMaterial": {
- "desc": "<p>The color material related configuration item is valid when <a href=\"#mapbox3D.shading\">shading</a> is <code class=\"codespan\">'color'</code>.</p>\n"
- },
- "colorMaterial.detailTexture": {
- "desc": "<p>The texture map of the material detail.</p>\n"
- },
- "colorMaterial.textureTiling": {
- "desc": "<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n"
- },
- "colorMaterial.textureOffset": {
- "desc": "<p>The displacement of the texture detail texture.</p>\n"
- },
- "light": {
- "desc": "<p>Light related settings. Invalid when <a href=\"#mapbox3D.shading\">shading</a> is 'color'.</p>\n<p>The lighting settings affect the components and all the charts on the component's coordinate system.</p>\n<p>A reasonable lighting setting can make the brightness and darkness of the whole scene richer and more layered.</p>\n"
- },
- "light.main": {
- "desc": "<p>The setting of the main light source of the scene. In the <a href=\"#globe\">globe</a> component is the sun.</p>\n"
- },
- "light.main.color": {
- "desc": "<p>The color of the main light source.</p>\n"
- },
- "light.main.intensity": {
- "desc": "<p>The intensity of the main light source.</p>\n"
- },
- "light.main.shadow": {
- "desc": "<p>Whether the main light source displays a shadow. The default is off.</p>\n<p>Turning on the shadows can bring more realistic and layered lighting to the scene. But it also increases the operating overhead of the program.</p>\n<p>The following two images show the difference between turning on the shadow and turning off the shadow.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-shadow.png\" width=\"100%\" tit [...]
- },
- "light.main.shadowQuality": {
- "desc": "<p>The quality of the shadow. You can choose <code class=\"codespan\">'low'</code>, <code class=\"codespan\">'medium'</code>, <code class=\"codespan\">'high'</code>, <code class=\"codespan\">'ultra'</code></p>\n<p>The following two images shows the difference between low quality and high quality shadows.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-shadow-low.png\" width=\"100 [...]
- },
- "light.main.alpha": {
- "desc": "<p>The main light source is around the x-axis, which is the angle of up-down rotation. Control the direction of the light with <a href=\"#mapbox3D.light.main.beta\">beta</a>.</p>\n<p>As the following image show:</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/light-alpha-beta.png\"></p>\n<p>The <a href=\"#globe\">globe</a> component can control the time of sunlight by <a href=\"#globe.light.main.time\">time</a>.</p>\n"
- },
- "light.main.beta": {
- "desc": "<p>The main light source is around the y-axis, which is the angle of the left-right rotation.</p>\n"
- },
- "light.ambient": {
- "desc": "<p>Global ambient light settings.</p>\n"
- },
- "light.ambient.color": {
- "desc": "<p>The color of ambient light.</p>\n"
- },
- "light.ambient.intensity": {
- "desc": "<p>The intensity of ambient light.</p>\n"
- },
- "light.ambientCubemap": {
- "desc": "<p>The ambientCubemap uses texture as the source of ambient light, which provides diffuse and specular for objects. The diffuse and specular can be set separately by <a href=\"#mapbox3D.light.ambientCubemap.diffuseIntensity\">diffuseIntensity</a> and <a href=\"#mapbox3D.light.ambientCubemap.specularIntensity\">specularIntensity</a>.</p>\n"
- },
- "light.ambientCubemap.texture": {
- "desc": "<p>The URL of the ambient cubemap supports HDR images in the <code class=\"codespan\">.hdr</code> format. You can obtained the resources for <code class=\"codespan\">.hdr</code> from <a href=\"http://www.hdrlabs.com/sibl/archive.html\" target=\"_blank\">http://www.hdrlabs.com/sibl/archive.html</a> and other websites.</p>\n<p>Example：</p>\n<pre><code class=\"lang-ts\">ambientCubemap: {\n texture: 'pisa.hdr',\n // The exposure value used when analytic hdr\n ex [...]
- },
- "light.ambientCubemap.diffuseIntensity": {
- "desc": "<p>The intensity of diffuse.</p>\n"
- },
- "light.ambientCubemap.specularIntensity": {
- "desc": "<p>The intensity of specular.</p>\n"
- },
- "postEffect": {
- "desc": "<p>Post-processing effects related configuration. It can add effects such as highlights, depth of field, screen space ambient occlusion (SSAO), toning to the picture. And it can make the whole picture more textured.</p>\n<p>The following are the differences between closing <code class=\"codespan\">postEffect</code> and opening <code class=\"codespan\">postEffect</code>.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/i [...]
- },
- "postEffect.enable": {
- "desc": "<p>Whether to enable post-processing effects. Not enabled by default.</p>\n"
- },
- "postEffect.bloom": {
- "desc": "<p>Bloom is used to reproducing the effects that occur in real cameras when taking pictures in a bright environment.\nBecause traditional RGB can only represent colors in the range of '0 - 255', so we need to use the bloom effect simulates fringes of light extending from the borders of bright areas, creating the illusion of a bright light overwhelming the camera. As shown below：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/globe-posteffect-blo [...]
- },
- "postEffect.bloom.enable": {
- "desc": "<p>Whether to enable the bloom effect.</p>\n"
- },
- "postEffect.bloom.bloomIntensity": {
- "desc": "<p>The intensity of the bloom. The default is 0.1.</p>\n"
- },
- "postEffect.depthOfField": {
- "desc": "<p>Depth of Field is a post-processing effect that simulates the focus properties of a camera. The area of focus is clear, and the area away from the focus is gradually blurred.</p>\n<p>The depth of field effect allows the observer to focus on the area of focus and make the picture feel stronger. Large depth of field can also create a macro model effect.</p>\n<p>The following are the differences between turning off and turning on the depth of field effect.</p>\n<div class=\ [...]
- },
- "postEffect.depthOfField.enable": {
- "desc": "<p>Whether to enable the depth of field.</p>\n"
- },
- "postEffect.depthOfField.focalDistance": {
- "desc": "<p>The initial focus distance. The user can click on the area to automatically focus.</p>\n"
- },
- "postEffect.depthOfField.focalRange": {
- "desc": "<p>The size of the in-focus area. The objects in this range are completely clear and there is no blurring.</p>\n"
- },
- "postEffect.depthOfField.fstop": {
- "desc": "<p>[F value] of the lens (<a href=\"https://zh.wikipedia.org/wiki/%E7%84%A6%E6%AF%94)\" target=\"_blank\">https://zh.wikipedia.org/wiki/%E7%84%A6%E6%AF%94)</a>, the smaller the value, the shallower the depth of field.</p>\n"
- },
- "postEffect.depthOfField.blurRadius": {
- "desc": "<p>Blur radius outside the focus.</p>\n<p>The difference blur effect between the different radius.</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\"></img>\n <img src=\"documents/asset/gl/img/geo-dof-large.png\" width=\"100%\" title=\"blurSize: 10\"></img>\n</div>\n"
- },
- "postEffect.screenSpaceAmbientOcclusion": {
- "desc": "<p>The ambient occlusion post-processing effect darkens the corners, holes, crevices, and areas where most light can`t reach. It is a supplement to the traditional shadow map, which makes the whole scene more natural and layered.</p>\n<p>Below is a comparison of the effects of no SSAO and 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\"></img>\n <img src=\ [...]
- },
- "postEffect.SSAO": {
- "desc": "<p>Same as <a href=\"#mapbox3D.postEffect.screenSpaceAmbientOcclusion\">screenSpaceAmbientOcclusion</a></p>\n"
- },
- "postEffect.SSAO.enable": {
- "desc": "<p>Whether to enable SSAO (screen space ambient occlusion). Not enabled by default.</p>\n"
- },
- "postEffect.SSAO.quality": {
- "desc": "<p>The quality of SSAO (screen space ambient occlusion). Supporting<code class=\"codespan\">'low'</code>, <code class=\"codespan\">'medium'</code>, <code class=\"codespan\">'high'</code>, <code class=\"codespan\">'ultra'</code></p>\n"
- },
- "postEffect.SSAO.radius": {
- "desc": "<p>The radius of the SSAO (screen space ambient occlusion). The larger the radius, the more natural the effect, but you need to set a higher <code class=\"codespan\">'quality'</code>.</p>\n<p>The following example is the difference between a smaller and larger radius:</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\"></img>\n <img src=\"docume [...]
- },
- "postEffect.SSAO.intensity": {
- "desc": "<p>The intensity of SSAO (screen space ambient occlusion). The larger the value, the darker the color.</p>\n"
- },
- "postEffect.colorCorrection": {
- "desc": "<p>Color correction and adjustment. Similar to Color Adjustments in Photoshop.</p>\n<p>The same scene in the figure below is adjusted to the difference between the cool color system and the warm color system.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/buildings-cold.jpg\" width=\"100%\" title=\"Cold\"></img>\n <img src=\"documents/asset/gl/img/buildings-warm.jpg\" width=\"100%\" title=\"Warm\"></img>\n</div>\n\n"
- },
- "postEffect.colorCorrection.enable": {
- "desc": "<p>Whether to enable the color correction.</p>\n"
- },
- "postEffect.colorCorrection.lookupTexture": {
- "desc": "<p>Color correction lookup texture, recommended.</p>\n<p>The color correction lookup texture is a texture image like the one below.</p>\n<p><img width=\"200\" height=\"auto\" src=\"documents/asset/gl/img/lookup.png\"></p>\n<p>This is the basic lookup texture image that you can use directly.\nTo adjust the color of the scene to the effect you want, you can take a screenshot of the scene and adjust the color to the desired effect in image processing software such as Photoshop. [...]
- },
- "postEffect.colorCorrection.exposure": {
- "desc": "<p>The exposure of the image.</p>\n"
- },
- "postEffect.colorCorrection.brightness": {
- "desc": "<p>The brightness of the image.</p>\n"
- },
- "postEffect.colorCorrection.contrast": {
- "desc": "<p>The contrast of the image.</p>\n"
- },
- "postEffect.colorCorrection.saturation": {
- "desc": "<p>The saturation of the image.</p>\n"
- },
- "postEffect.FXAA": {
- "desc": "<p>After opening <a href=\"#mapbox3D.postEffect\">postEffect</a>, WebGL's default MSAA (Multi Sampling Anti Aliasing) will not work. At this time, FXAA (Fast Approximate Anti-Aliasing) can solve the anti-aliasing problem quickly and easily. FXAA blurs the edge of the scene to solve the problem of aliasing. It works well on some scenes, but in echarts-gl, you need to ensure that the edges of many texts and lines are sharp and clear, so FXAA is not suitable. At this point [...]
- },
- "postEffect.FXAA.enable": {
- "desc": "<p>Whether to enable FXAA. Not enabled by default.</p>\n"
- },
- "temporalSuperSampling": {
- "desc": "<p>Temporal supersampling. After opening <a href=\"#mapbox3D.postEffect\">postEffect</a>, WebGL's default MSAA (MultiSampling Anti-Aliasing) will not work, so we need to solve the problem of sampling.</p>\n<p>Temporal supersampling is an anti-aliasing method. After the picture is still, it will continue to sample multiple times and taken at several instances inside the pixel and an average color value is calculated, thus achieving anti-aliasing effect.\nAnd in this proce [...]
- },
- "temporalSuperSampling.enable": {
- "desc": "<p>Whether to enable temporal supersampling. By default, temporal supersampling is also turned on synchronously when <a href=\"#mapbox3D.postEffect\">postEffect</a> is turned on.</p>\n"
- }
-}
\ No newline at end of file
+{"style":{"desc":"<p>Sets the style of the Mapbox map. Same as <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":{"desc":"<p>Sets the longitude and latitude of the center of the map. Longitude and latitude are represented by arrays, for example:</p>\n<pre><code class=\"lang-ts\">mapbox3D: {\n center: [104.114129, 37.550339],\n zoom: 3\n}\n</code></pre>\n"},"zoom":{"desc":"<p>Sets the z [...]
\ No newline at end of file
diff --git a/en/documents/option-gl-parts/option-gl.series-bar3D.js b/en/documents/option-gl-parts/option-gl.series-bar3D.js
index cd9cc706..99891135 100644
--- a/en/documents/option-gl-parts/option-gl.series-bar3D.js
+++ b/en/documents/option-gl-parts/option-gl.series-bar3D.js
@@ -1,272 +1 @@
-window.__EC_DOC_option_gl_series_bar3D = {
- "name": {
- "desc": "<p>Series name used for displaying in <a href=\"https://echarts.apache.org/zh/option.html#tooltip\" target=\"_blank\">tooltip</a> and filtering with <a href=\"https://echarts.apache.org/zh/option.html#legend\" target=\"_blank\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"
- },
- "coordinateSystem": {
- "desc": "<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class=\"codespan\">'cartesian3D'</code></p>\n<p> Use a 3D rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n<ul>\n<li><code class=\"codespan\">'geo3D'</code>\n Use 3D geographic coordinate, with <a href= [...]
- },
- "grid3DIndex": {
- "desc": "<p>Use the index of the <a href=\"#grid3D\">grid3D</a> component. The first <a href=\"#grid3D\">grid3D</a> component is used by default.</p>\n"
- },
- "geo3DIndex": {
- "desc": "<p>The index of the <a href=\"#geo3D\">geo3D</a> component used by the axis.The first <a href=\"#grid3D\">grid3D</a> component is used by default.</p>\n"
- },
- "globeIndex": {
- "desc": "<p>The index of the <a href=\"#globe\">globe</a> component used by the axis.The first <a href=\"#globe\">globe</a> component is used by default.</p>\n"
- },
- "bevelSize": {
- "desc": "<p>The size of the bevel.\nSupport for setting values from 0 to 1. The default is 0, which means there is no bevel.</p>\n<p>Below are the differences between beveling and no beveling.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/bar3D-no-bevel.png\" width=\"100%\" title=\"bevelSize: 0\"></img>\n <img src=\"documents/asset/gl/img/bar3D-bevel.png\" width=\"100%\" title=\"bevelSize: 0.3\"></img>\n</div>\n"
- },
- "bevelSmoothness": {
- "desc": "<p>The smoothness of the bevel, the larger the value, the smoother.</p>\n"
- },
- "stack": {
- "desc": "<p>Stacking of bar chart. On the same category axis, the series with the same <code class=\"codespan\">stack</code> name would be put on top of each other. Note that the data items that need to be stack in different series must have the same index in the array.</p>\n<p>See also <a href=\"#series-bar3D.stackStrategy\">stackStrategy</a> on how to customize how values are stacked.</p>\n<p>Notice: <code class=\"codespan\">stack</code> only supports stacking on <code class=\"code [...]
- },
- "stackStrategy": {
- "desc": "<blockquote>\n<p>Since ECharts <code class=\"codespan\">v5.3.3</code></p>\n</blockquote>\n<p>How to stack values if the <a href=\"#series-bar3D.stack\">stack</a> property has been set. Options:</p>\n<ul>\n<li><code class=\"codespan\">'samesign'</code>: only stack values if the value to be stacked has the same sign as the currently cumulated stacked value.</li>\n<li><code class=\"codespan\">'all'</code>: stack all values, irrespective of the signs of the curre [...]
- },
- "minHeight": {
- "desc": "<p>The minimum width of the bar.</p>\n"
- },
- "itemStyle": {
- "desc": "<p>The style of the bar, including color and opacity.</p>\n"
- },
- "itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "label": {
- "desc": "<p>Configure the label of the bar.</p>\n"
- },
- "label.show": {
- "desc": "<p>Whether to show the label.</p>\n"
- },
- "label.distance": {
- "desc": "<p>Distance to the host graphic element.</p>\n<p>The distance from the label to the graphic. In a 3D Scatter, this distance is the pixel value of the screen space. In other figures, this distance is the relative 3D distance.</p>\n"
- },
- "label.formatter": {
- "desc": "<p>The formatter of the label content, which supports the string template and the callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template:</strong></p>\n<p>The model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item [...]
- },
- "label.textStyle": {
- "desc": "<p>The font style of the label.</p>\n"
- },
- "label.textStyle.color": {
- "desc": "<p>The Color of the text.</p>\n"
- },
- "label.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "label.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "label.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "label.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "label.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "emphasis": {
- "desc": "<p>Configure labels and styles for bar highlighting.</p>\n"
- },
- "emphasis.itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "emphasis.itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "emphasis.label.show": {
- "desc": "<p>Whether to show the label.</p>\n"
- },
- "emphasis.label.distance": {
- "desc": "<p>Distance to the host graphic element.</p>\n<p>The distance from the label to the graphic. In a 3D Scatter, this distance is the pixel value of the screen space. In other figures, this distance is the relative 3D distance.</p>\n"
- },
- "emphasis.label.formatter": {
- "desc": "<p>The formatter of the label content, which supports the string template and the callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template:</strong></p>\n<p>The model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item [...]
- },
- "emphasis.label.textStyle": {
- "desc": "<p>The font style of the label.</p>\n"
- },
- "emphasis.label.textStyle.color": {
- "desc": "<p>The Color of the text.</p>\n"
- },
- "emphasis.label.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "emphasis.label.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "emphasis.label.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "emphasis.label.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "emphasis.label.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "data": {
- "desc": "<p>A data array of 3D bar. Each item of the array is a piece of data. Usually this data is an array to store each attribute/dimension of the data. For example below:</p>\n<pre><code class=\"lang-ts\">data: [\n [[12, 14, 10], [34, 50, 15], [56, 30, 20], [10, 15, 12], [23, 10, 14]]\n]\n</code></pre>\n<p>For each item in the array:</p>\n<ol>\n<li>In [grid3D] (~grid3D), the first three values of each item are <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code [...]
- },
- "data.name": {
- "desc": "<p>The name of data item.</p>\n"
- },
- "data.value": {
- "desc": "<p>Data value.</p>\n"
- },
- "data.itemStyle": {
- "desc": "<p>The style setting of a single data item.</p>\n"
- },
- "data.itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "data.itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "data.label": {
- "desc": "<p>The label setting of a single data item.</p>\n"
- },
- "data.label.show": {
- "desc": "<p>Whether to show the label.</p>\n"
- },
- "data.label.distance": {
- "desc": "<p>Distance to the host graphic element.</p>\n<p>The distance from the label to the graphic. In a 3D Scatter, this distance is the pixel value of the screen space. In other figures, this distance is the relative 3D distance.</p>\n"
- },
- "data.label.formatter": {
- "desc": "<p>The formatter of the label content, which supports the string template and the callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template:</strong></p>\n<p>The model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item [...]
- },
- "data.label.textStyle": {
- "desc": "<p>The font style of the label.</p>\n"
- },
- "data.label.textStyle.color": {
- "desc": "<p>The Color of the text.</p>\n"
- },
- "data.label.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "data.label.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "data.label.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "data.label.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "data.label.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "data.emphasis": {
- "desc": "<p>Configure labels and styles for a sigle data item highlighting.</p>\n"
- },
- "data.emphasis.itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "data.emphasis.itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "data.emphasis.label.show": {
- "desc": "<p>Whether to show the label.</p>\n"
- },
- "data.emphasis.label.distance": {
- "desc": "<p>Distance to the host graphic element.</p>\n<p>The distance from the label to the graphic. In a 3D Scatter, this distance is the pixel value of the screen space. In other figures, this distance is the relative 3D distance.</p>\n"
- },
- "data.emphasis.label.formatter": {
- "desc": "<p>The formatter of the label content, which supports the string template and the callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template:</strong></p>\n<p>The model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item [...]
- },
- "data.emphasis.label.textStyle": {
- "desc": "<p>The font style of the label.</p>\n"
- },
- "data.emphasis.label.textStyle.color": {
- "desc": "<p>The Color of the text.</p>\n"
- },
- "data.emphasis.label.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "data.emphasis.label.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "data.emphasis.label.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "data.emphasis.label.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "data.emphasis.label.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "shading": {
- "desc": "<p>The coloring effect of 3D graphics in 3D Bar. The following three coloring methods are supported in echarts-gl:</p>\n<ul>\n<li><p><code class=\"codespan\">'color'</code>\nOnly display colors, not affected by other factors such as lighting.</p>\n</li>\n<li><p><code class=\"codespan\">'lambert'</code>\nThrough the classic [lambert] coloring, can express the light and dark that the light shows.</p>\n</li>\n<li><p><code class=\"codespan\">'realistic'</ [...]
- },
- "realisticMaterial": {
- "desc": "<p>The configuration item of the realistic material is valid when <a href=\"#series-bar3D.shading\">shading</a> is <code class=\"codespan\">'realistic'</code>.</p>\n"
- },
- "realisticMaterial.detailTexture": {
- "desc": "<p>The texture map of the material detail.</p>\n"
- },
- "realisticMaterial.textureTiling": {
- "desc": "<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n"
- },
- "realisticMaterial.textureOffset": {
- "desc": "<p>The displacement of the texture detail texture.</p>\n"
- },
- "realisticMaterial.roughness": {
- "desc": "<p>The <code class=\"codespan\">roughness</code> attribute is used to indicate the roughness of the material, <code class=\"codespan\">0</code> is completely smooth, <code class=\"codespan\">1</code> is completely rough, and the middle value is between the two.</p>\n<p>The following images show the effect of <code class=\"codespan\">roughness</code> in <a href=\"#globe\"><code class=\"codespan\">globe</code></a> <code class=\"codespan\">0.2</code> (smooth) and <code class=\" [...]
- },
- "realisticMaterial.metalness": {
- "desc": "<p>The <code class=\"codespan\">metalness</code> attribute is used to indicate whether the material is metal or non-metal, <code class=\"codespan\">0</code> is non-metallic, <code class=\"codespan\">1</code> is metal, and the middle value is between the two. Usually set to <code class=\"codespan\">0</code> and <code class=\"codespan\">1</code> to meet most of the scenes.</p>\n<p>The picture below show the difference between `metal' and '0' in <a href=\"#globe\">g [...]
- },
- "realisticMaterial.roughnessAdjust": {
- "desc": "<p>Roughness adjustment is useful when using roughness map. The overall roughness of the texture can be adjusted. The default is <code class=\"codespan\">0.5</code>, <code class=\"codespan\">0</code> is completely smooth, <code class=\"codespan\">1</code> is completely rough.</p>\n"
- },
- "realisticMaterial.metalnessAdjust": {
- "desc": "<p>Metalness adjustment is useful when using metalness maps. The overall metallicity of the texture can be adjusted. The default is <code class=\"codespan\">0.5</code>, <code class=\"codespan\">0</code> is non-metal, <code class=\"codespan\">1</code> is metal.</p>\n"
- },
- "realisticMaterial.normalTexture": {
- "desc": "<p>Normal map of material details.</p>\n<p>Using normal maps, you can still display rich shades of detail on the surface of the object with fewer vertices.</p>\n"
- },
- "lambertMaterial": {
- "desc": "<p>The configuration item of the lambert material is valid when <a href=\"#series-bar3D.shading\">shading</a> is <code class=\"codespan\">'lambert'</code>.</p>\n"
- },
- "lambertMaterial.detailTexture": {
- "desc": "<p>The texture map of the material detail.</p>\n"
- },
- "lambertMaterial.textureTiling": {
- "desc": "<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n"
- },
- "lambertMaterial.textureOffset": {
- "desc": "<p>The displacement of the texture detail texture.</p>\n"
- },
- "colorMaterial": {
- "desc": "<p>The color material related configuration item is valid when <a href=\"#series-bar3D.shading\">shading</a> is <code class=\"codespan\">'color'</code>.</p>\n"
- },
- "colorMaterial.detailTexture": {
- "desc": "<p>The texture map of the material detail.</p>\n"
- },
- "colorMaterial.textureTiling": {
- "desc": "<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n"
- },
- "colorMaterial.textureOffset": {
- "desc": "<p>The displacement of the texture detail texture.</p>\n"
- },
- "zlevel": {
- "desc": "<p>The layer in which the component is located.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and [...]
- },
- "silent": {
- "desc": "<p>Whether the graph doesn`t respond and triggers a mouse event. The default is false, which is to respond to and trigger mouse events.</p>\n"
- },
- "animation": {
- "desc": "<p>Whether to enable animation.</p>\n"
- },
- "animationDurationUpdate": {
- "desc": "<p>The duration time for update the transition animation.</p>\n"
- },
- "animationEasingUpdate": {
- "desc": "<p>The easing effect for update transition animation.</p>\n"
- }
-}
\ No newline at end of file
+window.__EC_DOC_option_gl_series_bar3D = {"name":{"desc":"<p>Series name used for displaying in <a href=\"https://echarts.apache.org/zh/option.html#tooltip\" target=\"_blank\">tooltip</a> and filtering with <a href=\"https://echarts.apache.org/zh/option.html#legend\" target=\"_blank\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"coordinateSystem":{"desc":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p> [...]
\ No newline at end of file
diff --git a/en/documents/option-gl-parts/option-gl.series-bar3D.json b/en/documents/option-gl-parts/option-gl.series-bar3D.json
index 99f81e02..aa9121d4 100644
--- a/en/documents/option-gl-parts/option-gl.series-bar3D.json
+++ b/en/documents/option-gl-parts/option-gl.series-bar3D.json
@@ -1,272 +1 @@
-{
- "name": {
- "desc": "<p>Series name used for displaying in <a href=\"https://echarts.apache.org/zh/option.html#tooltip\" target=\"_blank\">tooltip</a> and filtering with <a href=\"https://echarts.apache.org/zh/option.html#legend\" target=\"_blank\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"
- },
- "coordinateSystem": {
- "desc": "<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class=\"codespan\">'cartesian3D'</code></p>\n<p> Use a 3D rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n<ul>\n<li><code class=\"codespan\">'geo3D'</code>\n Use 3D geographic coordinate, with <a href= [...]
- },
- "grid3DIndex": {
- "desc": "<p>Use the index of the <a href=\"#grid3D\">grid3D</a> component. The first <a href=\"#grid3D\">grid3D</a> component is used by default.</p>\n"
- },
- "geo3DIndex": {
- "desc": "<p>The index of the <a href=\"#geo3D\">geo3D</a> component used by the axis.The first <a href=\"#grid3D\">grid3D</a> component is used by default.</p>\n"
- },
- "globeIndex": {
- "desc": "<p>The index of the <a href=\"#globe\">globe</a> component used by the axis.The first <a href=\"#globe\">globe</a> component is used by default.</p>\n"
- },
- "bevelSize": {
- "desc": "<p>The size of the bevel.\nSupport for setting values from 0 to 1. The default is 0, which means there is no bevel.</p>\n<p>Below are the differences between beveling and no beveling.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/bar3D-no-bevel.png\" width=\"100%\" title=\"bevelSize: 0\"></img>\n <img src=\"documents/asset/gl/img/bar3D-bevel.png\" width=\"100%\" title=\"bevelSize: 0.3\"></img>\n</div>\n"
- },
- "bevelSmoothness": {
- "desc": "<p>The smoothness of the bevel, the larger the value, the smoother.</p>\n"
- },
- "stack": {
- "desc": "<p>Stacking of bar chart. On the same category axis, the series with the same <code class=\"codespan\">stack</code> name would be put on top of each other. Note that the data items that need to be stack in different series must have the same index in the array.</p>\n<p>See also <a href=\"#series-bar3D.stackStrategy\">stackStrategy</a> on how to customize how values are stacked.</p>\n<p>Notice: <code class=\"codespan\">stack</code> only supports stacking on <code class=\"code [...]
- },
- "stackStrategy": {
- "desc": "<blockquote>\n<p>Since ECharts <code class=\"codespan\">v5.3.3</code></p>\n</blockquote>\n<p>How to stack values if the <a href=\"#series-bar3D.stack\">stack</a> property has been set. Options:</p>\n<ul>\n<li><code class=\"codespan\">'samesign'</code>: only stack values if the value to be stacked has the same sign as the currently cumulated stacked value.</li>\n<li><code class=\"codespan\">'all'</code>: stack all values, irrespective of the signs of the curre [...]
- },
- "minHeight": {
- "desc": "<p>The minimum width of the bar.</p>\n"
- },
- "itemStyle": {
- "desc": "<p>The style of the bar, including color and opacity.</p>\n"
- },
- "itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "label": {
- "desc": "<p>Configure the label of the bar.</p>\n"
- },
- "label.show": {
- "desc": "<p>Whether to show the label.</p>\n"
- },
- "label.distance": {
- "desc": "<p>Distance to the host graphic element.</p>\n<p>The distance from the label to the graphic. In a 3D Scatter, this distance is the pixel value of the screen space. In other figures, this distance is the relative 3D distance.</p>\n"
- },
- "label.formatter": {
- "desc": "<p>The formatter of the label content, which supports the string template and the callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template:</strong></p>\n<p>The model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item [...]
- },
- "label.textStyle": {
- "desc": "<p>The font style of the label.</p>\n"
- },
- "label.textStyle.color": {
- "desc": "<p>The Color of the text.</p>\n"
- },
- "label.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "label.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "label.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "label.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "label.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "emphasis": {
- "desc": "<p>Configure labels and styles for bar highlighting.</p>\n"
- },
- "emphasis.itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "emphasis.itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "emphasis.label.show": {
- "desc": "<p>Whether to show the label.</p>\n"
- },
- "emphasis.label.distance": {
- "desc": "<p>Distance to the host graphic element.</p>\n<p>The distance from the label to the graphic. In a 3D Scatter, this distance is the pixel value of the screen space. In other figures, this distance is the relative 3D distance.</p>\n"
- },
- "emphasis.label.formatter": {
- "desc": "<p>The formatter of the label content, which supports the string template and the callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template:</strong></p>\n<p>The model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item [...]
- },
- "emphasis.label.textStyle": {
- "desc": "<p>The font style of the label.</p>\n"
- },
- "emphasis.label.textStyle.color": {
- "desc": "<p>The Color of the text.</p>\n"
- },
- "emphasis.label.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "emphasis.label.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "emphasis.label.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "emphasis.label.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "emphasis.label.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "data": {
- "desc": "<p>A data array of 3D bar. Each item of the array is a piece of data. Usually this data is an array to store each attribute/dimension of the data. For example below:</p>\n<pre><code class=\"lang-ts\">data: [\n [[12, 14, 10], [34, 50, 15], [56, 30, 20], [10, 15, 12], [23, 10, 14]]\n]\n</code></pre>\n<p>For each item in the array:</p>\n<ol>\n<li>In [grid3D] (~grid3D), the first three values of each item are <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code [...]
- },
- "data.name": {
- "desc": "<p>The name of data item.</p>\n"
- },
- "data.value": {
- "desc": "<p>Data value.</p>\n"
- },
- "data.itemStyle": {
- "desc": "<p>The style setting of a single data item.</p>\n"
- },
- "data.itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "data.itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "data.label": {
- "desc": "<p>The label setting of a single data item.</p>\n"
- },
- "data.label.show": {
- "desc": "<p>Whether to show the label.</p>\n"
- },
- "data.label.distance": {
- "desc": "<p>Distance to the host graphic element.</p>\n<p>The distance from the label to the graphic. In a 3D Scatter, this distance is the pixel value of the screen space. In other figures, this distance is the relative 3D distance.</p>\n"
- },
- "data.label.formatter": {
- "desc": "<p>The formatter of the label content, which supports the string template and the callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template:</strong></p>\n<p>The model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item [...]
- },
- "data.label.textStyle": {
- "desc": "<p>The font style of the label.</p>\n"
- },
- "data.label.textStyle.color": {
- "desc": "<p>The Color of the text.</p>\n"
- },
- "data.label.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "data.label.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "data.label.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "data.label.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "data.label.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "data.emphasis": {
- "desc": "<p>Configure labels and styles for a sigle data item highlighting.</p>\n"
- },
- "data.emphasis.itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "data.emphasis.itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "data.emphasis.label.show": {
- "desc": "<p>Whether to show the label.</p>\n"
- },
- "data.emphasis.label.distance": {
- "desc": "<p>Distance to the host graphic element.</p>\n<p>The distance from the label to the graphic. In a 3D Scatter, this distance is the pixel value of the screen space. In other figures, this distance is the relative 3D distance.</p>\n"
- },
- "data.emphasis.label.formatter": {
- "desc": "<p>The formatter of the label content, which supports the string template and the callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template:</strong></p>\n<p>The model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item [...]
- },
- "data.emphasis.label.textStyle": {
- "desc": "<p>The font style of the label.</p>\n"
- },
- "data.emphasis.label.textStyle.color": {
- "desc": "<p>The Color of the text.</p>\n"
- },
- "data.emphasis.label.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "data.emphasis.label.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "data.emphasis.label.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "data.emphasis.label.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "data.emphasis.label.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "shading": {
- "desc": "<p>The coloring effect of 3D graphics in 3D Bar. The following three coloring methods are supported in echarts-gl:</p>\n<ul>\n<li><p><code class=\"codespan\">'color'</code>\nOnly display colors, not affected by other factors such as lighting.</p>\n</li>\n<li><p><code class=\"codespan\">'lambert'</code>\nThrough the classic [lambert] coloring, can express the light and dark that the light shows.</p>\n</li>\n<li><p><code class=\"codespan\">'realistic'</ [...]
- },
- "realisticMaterial": {
- "desc": "<p>The configuration item of the realistic material is valid when <a href=\"#series-bar3D.shading\">shading</a> is <code class=\"codespan\">'realistic'</code>.</p>\n"
- },
- "realisticMaterial.detailTexture": {
- "desc": "<p>The texture map of the material detail.</p>\n"
- },
- "realisticMaterial.textureTiling": {
- "desc": "<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n"
- },
- "realisticMaterial.textureOffset": {
- "desc": "<p>The displacement of the texture detail texture.</p>\n"
- },
- "realisticMaterial.roughness": {
- "desc": "<p>The <code class=\"codespan\">roughness</code> attribute is used to indicate the roughness of the material, <code class=\"codespan\">0</code> is completely smooth, <code class=\"codespan\">1</code> is completely rough, and the middle value is between the two.</p>\n<p>The following images show the effect of <code class=\"codespan\">roughness</code> in <a href=\"#globe\"><code class=\"codespan\">globe</code></a> <code class=\"codespan\">0.2</code> (smooth) and <code class=\" [...]
- },
- "realisticMaterial.metalness": {
- "desc": "<p>The <code class=\"codespan\">metalness</code> attribute is used to indicate whether the material is metal or non-metal, <code class=\"codespan\">0</code> is non-metallic, <code class=\"codespan\">1</code> is metal, and the middle value is between the two. Usually set to <code class=\"codespan\">0</code> and <code class=\"codespan\">1</code> to meet most of the scenes.</p>\n<p>The picture below show the difference between `metal' and '0' in <a href=\"#globe\">g [...]
- },
- "realisticMaterial.roughnessAdjust": {
- "desc": "<p>Roughness adjustment is useful when using roughness map. The overall roughness of the texture can be adjusted. The default is <code class=\"codespan\">0.5</code>, <code class=\"codespan\">0</code> is completely smooth, <code class=\"codespan\">1</code> is completely rough.</p>\n"
- },
- "realisticMaterial.metalnessAdjust": {
- "desc": "<p>Metalness adjustment is useful when using metalness maps. The overall metallicity of the texture can be adjusted. The default is <code class=\"codespan\">0.5</code>, <code class=\"codespan\">0</code> is non-metal, <code class=\"codespan\">1</code> is metal.</p>\n"
- },
- "realisticMaterial.normalTexture": {
- "desc": "<p>Normal map of material details.</p>\n<p>Using normal maps, you can still display rich shades of detail on the surface of the object with fewer vertices.</p>\n"
- },
- "lambertMaterial": {
- "desc": "<p>The configuration item of the lambert material is valid when <a href=\"#series-bar3D.shading\">shading</a> is <code class=\"codespan\">'lambert'</code>.</p>\n"
- },
- "lambertMaterial.detailTexture": {
- "desc": "<p>The texture map of the material detail.</p>\n"
- },
- "lambertMaterial.textureTiling": {
- "desc": "<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n"
- },
- "lambertMaterial.textureOffset": {
- "desc": "<p>The displacement of the texture detail texture.</p>\n"
- },
- "colorMaterial": {
- "desc": "<p>The color material related configuration item is valid when <a href=\"#series-bar3D.shading\">shading</a> is <code class=\"codespan\">'color'</code>.</p>\n"
- },
- "colorMaterial.detailTexture": {
- "desc": "<p>The texture map of the material detail.</p>\n"
- },
- "colorMaterial.textureTiling": {
- "desc": "<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n"
- },
- "colorMaterial.textureOffset": {
- "desc": "<p>The displacement of the texture detail texture.</p>\n"
- },
- "zlevel": {
- "desc": "<p>The layer in which the component is located.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and [...]
- },
- "silent": {
- "desc": "<p>Whether the graph doesn`t respond and triggers a mouse event. The default is false, which is to respond to and trigger mouse events.</p>\n"
- },
- "animation": {
- "desc": "<p>Whether to enable animation.</p>\n"
- },
- "animationDurationUpdate": {
- "desc": "<p>The duration time for update the transition animation.</p>\n"
- },
- "animationEasingUpdate": {
- "desc": "<p>The easing effect for update transition animation.</p>\n"
- }
-}
\ No newline at end of file
+{"name":{"desc":"<p>Series name used for displaying in <a href=\"https://echarts.apache.org/zh/option.html#tooltip\" target=\"_blank\">tooltip</a> and filtering with <a href=\"https://echarts.apache.org/zh/option.html#legend\" target=\"_blank\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"coordinateSystem":{"desc":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class=\"codespan\">'cartesian3D [...]
\ No newline at end of file
diff --git a/en/documents/option-gl-parts/option-gl.series-flowGL.js b/en/documents/option-gl-parts/option-gl.series-flowGL.js
index 7e63a3b8..e7d08e79 100644
--- a/en/documents/option-gl-parts/option-gl.series-flowGL.js
+++ b/en/documents/option-gl-parts/option-gl.series-flowGL.js
@@ -1,38 +1 @@
-window.__EC_DOC_option_gl_series_flowGL = {
- "particleDensity": {
- "desc": "<p>The density of the particles. The actual number of particles is the square of the set number. The higher the particle density, the better the trace effect, but the greater the performance overhead. In addition to this property, you can get a clearer and more consistent trace using <a href=\"#series-flowGL.particleType\">particleType</a>.</p>\n"
- },
- "particleType": {
- "desc": "<p>The type of particle. The default is <code class=\"codespan\">'point'</code>, which can be set to <code class=\"codespan\">'line'</code>. Line-type particles connect the position of the last motion to the position of the current motion with a line, which makes the trajectory more consistent.</p>\n<p>The following are the differences between the types of <code class=\"codespan\"></code>point'<code class=\"codespan\">and</code>'line'`.</p>\n<div [...]
- },
- "particleSize": {
- "desc": "<p>The size of the particle. If <a href=\"#series-flowGL.particleType\">particleType</a> is <code class=\"codespan\">'line'</code>, will be expressed as a line width.</p>\n"
- },
- "particleSpeed": {
- "desc": "<p>The speed of the particle, the default is 1. Note that when <a href=\"#series-flowGL.particleType\">particleType</a> is <code class=\"codespan\">'point'</code>, the excessive speed will make the entire track become intermittent.</p>\n"
- },
- "particleTrail": {
- "desc": "<p>The length of the track of the particle. The larger the value, the longer the track.</p>\n"
- },
- "supersampling": {
- "desc": "<p>The oversampling ratio of the picture, using the '4' supersampling can effectively improve the sharpness of the picture and reduce the picture sawtooth. However, because there is a need to process more pixels, there is a higher performance requirement.</p>\n<p>The following are the differences between no oversampling and a supersampling value of 4.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/flowGL-n [...]
- },
- "gridWidth": {
- "desc": "<p>The number of grid widths of the incoming grid data. <code class=\"codespan\">flowGL</code> will create a floating-point texture of the stored vector field based on this value and <a href=\"#series-flowGL.gridHeight\">gridHeight</a> for the particle's trajectory calculation.</p>\n"
- },
- "gridHeight": {
- "desc": "<p>The number of grid heights of incoming grid data.</p>\n"
- },
- "data": {
- "desc": "<p>The data of the vector field, including the position of the vector and the direction of the vector (including the size). <code class=\"codespan\">flowGL</code> has no mandatory requirements for the order in which data is stored. You can even pass in sparse vector data.</p>\n<p>Example:</p>\n<pre><code class=\"lang-ts\">data: [\n // Each data item contains four values representing the lng, lat of the position and the speed sLng, sLat on the corresponding dimension.\n [...]
- },
- "itemStyle": {
- "desc": "<p>The style of the vector field trace.</p>\n"
- },
- "itemStyle.color": {
- "desc": "<p>The color of the vector field trace. More is to encode the size of the vector through the <code class=\"codespan\">visualMap</code> component as demonstrated in the figure above.</p>\n"
- },
- "itemStyle.opacity": {
- "desc": "<p>Transparency of vector field traces.</p>\n"
- }
-}
\ No newline at end of file
+window.__EC_DOC_option_gl_series_flowGL = {"particleDensity":{"desc":"<p>The density of the particles. The actual number of particles is the square of the set number. The higher the particle density, the better the trace effect, but the greater the performance overhead. In addition to this property, you can get a clearer and more consistent trace using <a href=\"#series-flowGL.particleType\">particleType</a>.</p>\n"},"particleType":{"desc":"<p>The type of particle. The default is <code c [...]
\ No newline at end of file
diff --git a/en/documents/option-gl-parts/option-gl.series-flowGL.json b/en/documents/option-gl-parts/option-gl.series-flowGL.json
index a2c90aa7..006aaac0 100644
--- a/en/documents/option-gl-parts/option-gl.series-flowGL.json
+++ b/en/documents/option-gl-parts/option-gl.series-flowGL.json
@@ -1,38 +1 @@
-{
- "particleDensity": {
- "desc": "<p>The density of the particles. The actual number of particles is the square of the set number. The higher the particle density, the better the trace effect, but the greater the performance overhead. In addition to this property, you can get a clearer and more consistent trace using <a href=\"#series-flowGL.particleType\">particleType</a>.</p>\n"
- },
- "particleType": {
- "desc": "<p>The type of particle. The default is <code class=\"codespan\">'point'</code>, which can be set to <code class=\"codespan\">'line'</code>. Line-type particles connect the position of the last motion to the position of the current motion with a line, which makes the trajectory more consistent.</p>\n<p>The following are the differences between the types of <code class=\"codespan\"></code>point'<code class=\"codespan\">and</code>'line'`.</p>\n<div [...]
- },
- "particleSize": {
- "desc": "<p>The size of the particle. If <a href=\"#series-flowGL.particleType\">particleType</a> is <code class=\"codespan\">'line'</code>, will be expressed as a line width.</p>\n"
- },
- "particleSpeed": {
- "desc": "<p>The speed of the particle, the default is 1. Note that when <a href=\"#series-flowGL.particleType\">particleType</a> is <code class=\"codespan\">'point'</code>, the excessive speed will make the entire track become intermittent.</p>\n"
- },
- "particleTrail": {
- "desc": "<p>The length of the track of the particle. The larger the value, the longer the track.</p>\n"
- },
- "supersampling": {
- "desc": "<p>The oversampling ratio of the picture, using the '4' supersampling can effectively improve the sharpness of the picture and reduce the picture sawtooth. However, because there is a need to process more pixels, there is a higher performance requirement.</p>\n<p>The following are the differences between no oversampling and a supersampling value of 4.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/flowGL-n [...]
- },
- "gridWidth": {
- "desc": "<p>The number of grid widths of the incoming grid data. <code class=\"codespan\">flowGL</code> will create a floating-point texture of the stored vector field based on this value and <a href=\"#series-flowGL.gridHeight\">gridHeight</a> for the particle's trajectory calculation.</p>\n"
- },
- "gridHeight": {
- "desc": "<p>The number of grid heights of incoming grid data.</p>\n"
- },
- "data": {
- "desc": "<p>The data of the vector field, including the position of the vector and the direction of the vector (including the size). <code class=\"codespan\">flowGL</code> has no mandatory requirements for the order in which data is stored. You can even pass in sparse vector data.</p>\n<p>Example:</p>\n<pre><code class=\"lang-ts\">data: [\n // Each data item contains four values representing the lng, lat of the position and the speed sLng, sLat on the corresponding dimension.\n [...]
- },
- "itemStyle": {
- "desc": "<p>The style of the vector field trace.</p>\n"
- },
- "itemStyle.color": {
- "desc": "<p>The color of the vector field trace. More is to encode the size of the vector through the <code class=\"codespan\">visualMap</code> component as demonstrated in the figure above.</p>\n"
- },
- "itemStyle.opacity": {
- "desc": "<p>Transparency of vector field traces.</p>\n"
- }
-}
\ No newline at end of file
+{"particleDensity":{"desc":"<p>The density of the particles. The actual number of particles is the square of the set number. The higher the particle density, the better the trace effect, but the greater the performance overhead. In addition to this property, you can get a clearer and more consistent trace using <a href=\"#series-flowGL.particleType\">particleType</a>.</p>\n"},"particleType":{"desc":"<p>The type of particle. The default is <code class=\"codespan\">'point'</code>, [...]
\ No newline at end of file
diff --git a/en/documents/option-gl-parts/option-gl.series-graphGL.js b/en/documents/option-gl-parts/option-gl.series-graphGL.js
index 27ca6807..98aae7e1 100644
--- a/en/documents/option-gl-parts/option-gl.series-graphGL.js
+++ b/en/documents/option-gl-parts/option-gl.series-graphGL.js
@@ -1,140 +1 @@
-window.__EC_DOC_option_gl_series_graphGL = {
- "name": {
- "desc": "<p>Series name used for displaying in <a href=\"https://echarts.apache.org/zh/option.html#tooltip\" target=\"_blank\">tooltip</a> and filtering with <a href=\"https://echarts.apache.org/zh/option.html#legend\" target=\"_blank\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"
- },
- "layout": {
- "desc": "<p>The continuous graph layout algorithm supports the <a href=\"https://github.com/gephi/gephi/wiki/Force-Atlas-2\" target=\"_blank\">forceAtlas2</a> algorithm layout using gephi.</p>\n"
- },
- "forceAtlas2": {
- "desc": "<p><a href=\"https://github.com/gephi/gephi/wiki/Force-Atlas-2\" target=\"_blank\">forceAtlas2</a> a continuous graph layout algorithm.</p>\n<p>The algorithm has efficient layout efficiency and stable layout results for large-scale network data.</p>\n<p>Support for configuring GPU or CPU layout via <a href=\"#series-graphGL.forceAtlas2.GPU\">forceAtlas2.GPU</a>.</p>\n<p>The advantage of the CPU is that it is compatible, and the GPU implementation has dozens or even hundreds [...]
- },
- "forceAtlas2.GPU": {
- "desc": "<p>Whether to enable GPU layout.</p>\n"
- },
- "forceAtlas2.steps": {
- "desc": "<p>The number of iterations of an update. Because the force-guided algorithm usually draws the results of each iteration, but because the drawing time tends to be greater than the layout time, the layout efficiency will be reduced. At this time, we can set a larger <code class=\"codespan\">steps</code> parameter to ensure the layout and Draw time equalization and speed up the layout.</p>\n"
- },
- "forceAtlas2.stopThreshold": {
- "desc": "<p>Stops the threshold of the layout and stops the layout when the global velocity factor of the layout is less than this threshold. Set to 0 to never stop.</p>\n"
- },
- "forceAtlas2.barnesHutOptimize": {
- "desc": "<p>Whether to enable [Barnes Hut] (<a href=\"https://en.wikipedia.org/wiki/Barnes%E2%80%93Hut_simulation\" target=\"_blank\">https://en.wikipedia.org/wiki/Barnes%E2%80%93Hut_simulation</a>) optimization, valid when <a href=\"#series-graphGL.forceAtlas2.GPU\">forceAtlas2.GPU</a> is false.</p>\n<p>The default is on when the number of nodes > 1000.</p>\n"
- },
- "forceAtlas2.repulsionByDegree": {
- "desc": "<p>Whether to calculate the repulsion factor of the node according to the degree of nodes, it is recommended to turn it on.</p>\n"
- },
- "forceAtlas2.linLogMode": {
- "desc": "<p>Whether it is the <code class=\"codespan\">lin-log</code> mode. The <code class=\"codespan\">lin-log</code> mode makes the nodes of the cluster more compact.</p>\n"
- },
- "forceAtlas2.gravity": {
- "desc": "<p>The gravity that the node is subjected to. This force will make the nodes close to the center.</p>\n"
- },
- "forceAtlas2.gravityCenter": {
- "desc": "<p>The position of the gravity center. By default, is the middle point of the initial position.</p>\n"
- },
- "forceAtlas2.scaling": {
- "desc": "<p>The scaling factor of the layout. The larger the value, the greater the repulsive force between the nodes.</p>\n"
- },
- "forceAtlas2.edgeWeightInfluence": {
- "desc": "<p>The influence factor of the edge weight. The larger the value, the greater the effect of edge weight on gravity.</p>\n<p>Note: This factor is exponential, so it is invalid when the edge weights are <code class=\"codespan\">0</code> and <code class=\"codespan\">1</code>.</p>\n"
- },
- "forceAtlas2.edgeWeight": {
- "desc": "<p>The weight distribution of the edges. Mapped from <a href=\"#series-graphGL.links.value\">links.value</a>.</p>\n<p>Support is set to a single number, which is the uniform weight value.</p>\n"
- },
- "forceAtlas2.nodeWeight": {
- "desc": "<p>The weight distribution of the nodes. Mapped from <a href=\"#series-graphGL.nodes.value\">nodes.value</a>.</p>\n<p>Support is set to a single number, which is the uniform weight value.</p>\n"
- },
- "forceAtlas2.preventOverlap": {
- "desc": "<p>Whether to prevent the nodes from overlapping.</p>\n"
- },
- "symbol": {
- "desc": "<p>The shape of the scatter. The default is a circle.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">'circle'</code>, <code class=\"codespan\">'rect'</code>, <code class=\"codespan\">'roundRect'</code>, <code class=\"codespan\">'triangle'</code>, <code class=\"codespan\">'diamond'</code>, <code class=\"codespan\">'pin'</code>, <code class=\"codespan\">'arrow'</code>, <code class=\"codespan\"> [...]
- },
- "symbolSize": {
- "desc": "<p> symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-ts\">(value: Array|number, params: Object) [...]
- },
- "itemStyle": {
- "desc": "<p>The style settings for the node.</p>\n"
- },
- "itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "itemStyle.borderWidth": {
- "desc": "<p>Sets the width of the border.</p>\n"
- },
- "itemStyle.borderColor": {
- "desc": "<p>Sets the color of the border.</p>\n"
- },
- "lineStyle": {
- "desc": "<p>The style setting of the relationship line.</p>\n"
- },
- "lineStyle.color": {
- "desc": "<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "data": {
- "desc": "<p>The data set of the node.</p>\n<p>The data format is the same as <a href=\"https://echarts.apache.org/en/option.html#series-graph.data\" target=\"_blank\">graph.data</a></p>\n"
- },
- "data.name": {
- "desc": "<p>The name of the data item.</p>\n"
- },
- "data.value": {
- "desc": "<p>Data item value.</p>\n"
- },
- "data.itemStyle": {
- "desc": "<p>The style of a single node.</p>\n"
- },
- "data.itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "data.itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "data.itemStyle.borderWidth": {
- "desc": "<p>Sets the width of the border.</p>\n"
- },
- "data.itemStyle.borderColor": {
- "desc": "<p>Sets the color of the border.</p>\n"
- },
- "nodes": {
- "desc": "<p>Same as <a href=\"#series-graphGL.data\">graphGL.data</a>.</p>\n"
- },
- "links": {
- "desc": "<p>Relational data between nodes.\nThe data format is the same as <a href=\"https://echarts.apache.org/en/option.html#series-graph.links\" target=\"_blank\">graph.links</a></p>\n"
- },
- "links.source": {
- "desc": "<p>A string of source node names for edges also supports the use of numbers to represent the index of the source node.</p>\n"
- },
- "links.target": {
- "desc": "<p>A string of the target node name for the edge, which also supports the use of numbers to represent the index of the source node.</p>\n"
- },
- "links.value": {
- "desc": "<p>The value of the edge.</p>\n"
- },
- "links.lineStyle": {
- "desc": "<p>The style of a single edge.</p>\n"
- },
- "links.lineStyle.color": {
- "desc": "<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "links.lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "links.lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "edges": {
- "desc": "<p>Same as <a href=\"#series-graphGL.links\">graphGL.links</a></p>\n"
- },
- "zlevel": {
- "desc": "<p>The layer in which the component is located.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and [...]
- }
-}
\ No newline at end of file
+window.__EC_DOC_option_gl_series_graphGL = {"name":{"desc":"<p>Series name used for displaying in <a href=\"https://echarts.apache.org/zh/option.html#tooltip\" target=\"_blank\">tooltip</a> and filtering with <a href=\"https://echarts.apache.org/zh/option.html#legend\" target=\"_blank\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"layout":{"desc":"<p>The continuous graph layout algorithm supports the <a href=\"https://github.com/ [...]
\ No newline at end of file
diff --git a/en/documents/option-gl-parts/option-gl.series-graphGL.json b/en/documents/option-gl-parts/option-gl.series-graphGL.json
index 8d002dc5..c0be830c 100644
--- a/en/documents/option-gl-parts/option-gl.series-graphGL.json
+++ b/en/documents/option-gl-parts/option-gl.series-graphGL.json
@@ -1,140 +1 @@
-{
- "name": {
- "desc": "<p>Series name used for displaying in <a href=\"https://echarts.apache.org/zh/option.html#tooltip\" target=\"_blank\">tooltip</a> and filtering with <a href=\"https://echarts.apache.org/zh/option.html#legend\" target=\"_blank\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"
- },
- "layout": {
- "desc": "<p>The continuous graph layout algorithm supports the <a href=\"https://github.com/gephi/gephi/wiki/Force-Atlas-2\" target=\"_blank\">forceAtlas2</a> algorithm layout using gephi.</p>\n"
- },
- "forceAtlas2": {
- "desc": "<p><a href=\"https://github.com/gephi/gephi/wiki/Force-Atlas-2\" target=\"_blank\">forceAtlas2</a> a continuous graph layout algorithm.</p>\n<p>The algorithm has efficient layout efficiency and stable layout results for large-scale network data.</p>\n<p>Support for configuring GPU or CPU layout via <a href=\"#series-graphGL.forceAtlas2.GPU\">forceAtlas2.GPU</a>.</p>\n<p>The advantage of the CPU is that it is compatible, and the GPU implementation has dozens or even hundreds [...]
- },
- "forceAtlas2.GPU": {
- "desc": "<p>Whether to enable GPU layout.</p>\n"
- },
- "forceAtlas2.steps": {
- "desc": "<p>The number of iterations of an update. Because the force-guided algorithm usually draws the results of each iteration, but because the drawing time tends to be greater than the layout time, the layout efficiency will be reduced. At this time, we can set a larger <code class=\"codespan\">steps</code> parameter to ensure the layout and Draw time equalization and speed up the layout.</p>\n"
- },
- "forceAtlas2.stopThreshold": {
- "desc": "<p>Stops the threshold of the layout and stops the layout when the global velocity factor of the layout is less than this threshold. Set to 0 to never stop.</p>\n"
- },
- "forceAtlas2.barnesHutOptimize": {
- "desc": "<p>Whether to enable [Barnes Hut] (<a href=\"https://en.wikipedia.org/wiki/Barnes%E2%80%93Hut_simulation\" target=\"_blank\">https://en.wikipedia.org/wiki/Barnes%E2%80%93Hut_simulation</a>) optimization, valid when <a href=\"#series-graphGL.forceAtlas2.GPU\">forceAtlas2.GPU</a> is false.</p>\n<p>The default is on when the number of nodes > 1000.</p>\n"
- },
- "forceAtlas2.repulsionByDegree": {
- "desc": "<p>Whether to calculate the repulsion factor of the node according to the degree of nodes, it is recommended to turn it on.</p>\n"
- },
- "forceAtlas2.linLogMode": {
- "desc": "<p>Whether it is the <code class=\"codespan\">lin-log</code> mode. The <code class=\"codespan\">lin-log</code> mode makes the nodes of the cluster more compact.</p>\n"
- },
- "forceAtlas2.gravity": {
- "desc": "<p>The gravity that the node is subjected to. This force will make the nodes close to the center.</p>\n"
- },
- "forceAtlas2.gravityCenter": {
- "desc": "<p>The position of the gravity center. By default, is the middle point of the initial position.</p>\n"
- },
- "forceAtlas2.scaling": {
- "desc": "<p>The scaling factor of the layout. The larger the value, the greater the repulsive force between the nodes.</p>\n"
- },
- "forceAtlas2.edgeWeightInfluence": {
- "desc": "<p>The influence factor of the edge weight. The larger the value, the greater the effect of edge weight on gravity.</p>\n<p>Note: This factor is exponential, so it is invalid when the edge weights are <code class=\"codespan\">0</code> and <code class=\"codespan\">1</code>.</p>\n"
- },
- "forceAtlas2.edgeWeight": {
- "desc": "<p>The weight distribution of the edges. Mapped from <a href=\"#series-graphGL.links.value\">links.value</a>.</p>\n<p>Support is set to a single number, which is the uniform weight value.</p>\n"
- },
- "forceAtlas2.nodeWeight": {
- "desc": "<p>The weight distribution of the nodes. Mapped from <a href=\"#series-graphGL.nodes.value\">nodes.value</a>.</p>\n<p>Support is set to a single number, which is the uniform weight value.</p>\n"
- },
- "forceAtlas2.preventOverlap": {
- "desc": "<p>Whether to prevent the nodes from overlapping.</p>\n"
- },
- "symbol": {
- "desc": "<p>The shape of the scatter. The default is a circle.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">'circle'</code>, <code class=\"codespan\">'rect'</code>, <code class=\"codespan\">'roundRect'</code>, <code class=\"codespan\">'triangle'</code>, <code class=\"codespan\">'diamond'</code>, <code class=\"codespan\">'pin'</code>, <code class=\"codespan\">'arrow'</code>, <code class=\"codespan\"> [...]
- },
- "symbolSize": {
- "desc": "<p> symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-ts\">(value: Array|number, params: Object) [...]
- },
- "itemStyle": {
- "desc": "<p>The style settings for the node.</p>\n"
- },
- "itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "itemStyle.borderWidth": {
- "desc": "<p>Sets the width of the border.</p>\n"
- },
- "itemStyle.borderColor": {
- "desc": "<p>Sets the color of the border.</p>\n"
- },
- "lineStyle": {
- "desc": "<p>The style setting of the relationship line.</p>\n"
- },
- "lineStyle.color": {
- "desc": "<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "data": {
- "desc": "<p>The data set of the node.</p>\n<p>The data format is the same as <a href=\"https://echarts.apache.org/en/option.html#series-graph.data\" target=\"_blank\">graph.data</a></p>\n"
- },
- "data.name": {
- "desc": "<p>The name of the data item.</p>\n"
- },
- "data.value": {
- "desc": "<p>Data item value.</p>\n"
- },
- "data.itemStyle": {
- "desc": "<p>The style of a single node.</p>\n"
- },
- "data.itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "data.itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "data.itemStyle.borderWidth": {
- "desc": "<p>Sets the width of the border.</p>\n"
- },
- "data.itemStyle.borderColor": {
- "desc": "<p>Sets the color of the border.</p>\n"
- },
- "nodes": {
- "desc": "<p>Same as <a href=\"#series-graphGL.data\">graphGL.data</a>.</p>\n"
- },
- "links": {
- "desc": "<p>Relational data between nodes.\nThe data format is the same as <a href=\"https://echarts.apache.org/en/option.html#series-graph.links\" target=\"_blank\">graph.links</a></p>\n"
- },
- "links.source": {
- "desc": "<p>A string of source node names for edges also supports the use of numbers to represent the index of the source node.</p>\n"
- },
- "links.target": {
- "desc": "<p>A string of the target node name for the edge, which also supports the use of numbers to represent the index of the source node.</p>\n"
- },
- "links.value": {
- "desc": "<p>The value of the edge.</p>\n"
- },
- "links.lineStyle": {
- "desc": "<p>The style of a single edge.</p>\n"
- },
- "links.lineStyle.color": {
- "desc": "<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "links.lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "links.lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "edges": {
- "desc": "<p>Same as <a href=\"#series-graphGL.links\">graphGL.links</a></p>\n"
- },
- "zlevel": {
- "desc": "<p>The layer in which the component is located.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and [...]
- }
-}
\ No newline at end of file
+{"name":{"desc":"<p>Series name used for displaying in <a href=\"https://echarts.apache.org/zh/option.html#tooltip\" target=\"_blank\">tooltip</a> and filtering with <a href=\"https://echarts.apache.org/zh/option.html#legend\" target=\"_blank\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"layout":{"desc":"<p>The continuous graph layout algorithm supports the <a href=\"https://github.com/gephi/gephi/wiki/Force-Atlas-2\" target=\"_ [...]
\ No newline at end of file
diff --git a/en/documents/option-gl-parts/option-gl.series-line3D.js b/en/documents/option-gl-parts/option-gl.series-line3D.js
index e902b3d8..b63fba8b 100644
--- a/en/documents/option-gl-parts/option-gl.series-line3D.js
+++ b/en/documents/option-gl-parts/option-gl.series-line3D.js
@@ -1,68 +1 @@
-window.__EC_DOC_option_gl_series_line3D = {
- "name": {
- "desc": "<p>Series name used for displaying in <a href=\"https://echarts.apache.org/zh/option.html#tooltip\" target=\"_blank\">tooltip</a> and filtering with <a href=\"https://echarts.apache.org/zh/option.html#legend\" target=\"_blank\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"
- },
- "coordinateSystem": {
- "desc": "<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class=\"codespan\">'cartesian3D'</code></p>\n<p> Use a 3D rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n"
- },
- "grid3DIndex": {
- "desc": "<p>Use the index of the <a href=\"#grid3D\">grid3D</a> component. The first <a href=\"#grid3D\">grid3D</a> component is used by default.</p>\n"
- },
- "lineStyle": {
- "desc": "<p>The style of the lines.</p>\n"
- },
- "lineStyle.color": {
- "desc": "<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "lineStyle.lineStyle.color": {
- "desc": "<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "lineStyle.lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "lineStyle.lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "data": {
- "desc": "<p>A data array. Each item of the array is a piece of data. Usually this data is an array to store each attribute/dimension of the data. For example below:</p>\n<pre><code class=\"lang-ts\">data: [\n [[12, 14, 10], [34, 50, 15], [56, 30, 20], [10, 15, 12], [23, 10, 14]]\n]\n</code></pre>\n<p>The first three values of each item in the array are <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">z</code>. In addition to these thre [...]
- },
- "data.name": {
- "desc": "<p>The name of data item.</p>\n"
- },
- "data.value": {
- "desc": "<p>Data value.</p>\n"
- },
- "data.itemStyle": {
- "desc": "<p>The style setting of a single data item.</p>\n"
- },
- "data.itemStyle.color": {
- "desc": "<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "data.itemStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "data.itemStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "zlevel": {
- "desc": "<p>The layer in which the component is located.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and [...]
- },
- "silent": {
- "desc": "<p>Whether the graph doesn`t respond and triggers a mouse event. The default is false, which is to respond to and trigger mouse events.</p>\n"
- },
- "animation": {
- "desc": "<p>Whether to enable animation.</p>\n"
- },
- "animationDurationUpdate": {
- "desc": "<p>The duration time for update the transition animation.</p>\n"
- },
- "animationEasingUpdate": {
- "desc": "<p>The easing effect for update transition animation.</p>\n"
- }
-}
\ No newline at end of file
+window.__EC_DOC_option_gl_series_line3D = {"name":{"desc":"<p>Series name used for displaying in <a href=\"https://echarts.apache.org/zh/option.html#tooltip\" target=\"_blank\">tooltip</a> and filtering with <a href=\"https://echarts.apache.org/zh/option.html#legend\" target=\"_blank\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"coordinateSystem":{"desc":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p [...]
\ No newline at end of file
diff --git a/en/documents/option-gl-parts/option-gl.series-line3D.json b/en/documents/option-gl-parts/option-gl.series-line3D.json
index bbcef777..9e4a46eb 100644
--- a/en/documents/option-gl-parts/option-gl.series-line3D.json
+++ b/en/documents/option-gl-parts/option-gl.series-line3D.json
@@ -1,68 +1 @@
-{
- "name": {
- "desc": "<p>Series name used for displaying in <a href=\"https://echarts.apache.org/zh/option.html#tooltip\" target=\"_blank\">tooltip</a> and filtering with <a href=\"https://echarts.apache.org/zh/option.html#legend\" target=\"_blank\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"
- },
- "coordinateSystem": {
- "desc": "<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class=\"codespan\">'cartesian3D'</code></p>\n<p> Use a 3D rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n"
- },
- "grid3DIndex": {
- "desc": "<p>Use the index of the <a href=\"#grid3D\">grid3D</a> component. The first <a href=\"#grid3D\">grid3D</a> component is used by default.</p>\n"
- },
- "lineStyle": {
- "desc": "<p>The style of the lines.</p>\n"
- },
- "lineStyle.color": {
- "desc": "<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "lineStyle.lineStyle.color": {
- "desc": "<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "lineStyle.lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "lineStyle.lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "data": {
- "desc": "<p>A data array. Each item of the array is a piece of data. Usually this data is an array to store each attribute/dimension of the data. For example below:</p>\n<pre><code class=\"lang-ts\">data: [\n [[12, 14, 10], [34, 50, 15], [56, 30, 20], [10, 15, 12], [23, 10, 14]]\n]\n</code></pre>\n<p>The first three values of each item in the array are <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">z</code>. In addition to these thre [...]
- },
- "data.name": {
- "desc": "<p>The name of data item.</p>\n"
- },
- "data.value": {
- "desc": "<p>Data value.</p>\n"
- },
- "data.itemStyle": {
- "desc": "<p>The style setting of a single data item.</p>\n"
- },
- "data.itemStyle.color": {
- "desc": "<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "data.itemStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "data.itemStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "zlevel": {
- "desc": "<p>The layer in which the component is located.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and [...]
- },
- "silent": {
- "desc": "<p>Whether the graph doesn`t respond and triggers a mouse event. The default is false, which is to respond to and trigger mouse events.</p>\n"
- },
- "animation": {
- "desc": "<p>Whether to enable animation.</p>\n"
- },
- "animationDurationUpdate": {
- "desc": "<p>The duration time for update the transition animation.</p>\n"
- },
- "animationEasingUpdate": {
- "desc": "<p>The easing effect for update transition animation.</p>\n"
- }
-}
\ No newline at end of file
+{"name":{"desc":"<p>Series name used for displaying in <a href=\"https://echarts.apache.org/zh/option.html#tooltip\" target=\"_blank\">tooltip</a> and filtering with <a href=\"https://echarts.apache.org/zh/option.html#legend\" target=\"_blank\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"coordinateSystem":{"desc":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class=\"codespan\">'cartesian3D [...]
\ No newline at end of file
diff --git a/en/documents/option-gl-parts/option-gl.series-lines3D.js b/en/documents/option-gl-parts/option-gl.series-lines3D.js
index b11d8ee2..622aa6fd 100644
--- a/en/documents/option-gl-parts/option-gl.series-lines3D.js
+++ b/en/documents/option-gl-parts/option-gl.series-lines3D.js
@@ -1,83 +1 @@
-window.__EC_DOC_option_gl_series_lines3D = {
- "name": {
- "desc": "<p>Series name used for displaying in <a href=\"https://echarts.apache.org/zh/option.html#tooltip\" target=\"_blank\">tooltip</a> and filtering with <a href=\"https://echarts.apache.org/zh/option.html#legend\" target=\"_blank\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"
- },
- "coordinateSystem": {
- "desc": "<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><code class=\"codespan\">'geo3D'</code>\n Use 3D geographic coordinate, with <a href=\"#series-.geoIndex\">geoIndex</a> to assign the corresponding 3D geographic coordinate components.</li>\n</ul>\n<ul>\n<li><p><code class=\"codespan\">'globe'</code></p>\n<p> Use 3D globe coordinate, with <a href=\"#series-.globeIndex\">globeIndex</a> to assign the corresponding 3D globe coordinate comp [...]
- },
- "geo3DIndex": {
- "desc": "<p>The index of the <a href=\"#geo3D\">geo3D</a> component used by the axis.The first <a href=\"#grid3D\">grid3D</a> component is used by default.</p>\n"
- },
- "globeIndex": {
- "desc": "<p>The index of the <a href=\"#globe\">globe</a> component used by the axis.The first <a href=\"#globe\">globe</a> component is used by default.</p>\n"
- },
- "polyline": {
- "desc": "<p>If draw as a polyline.</p>\n<p>Default to be <code class=\"codespan\">false</code>. Can only draw a two end straight line.</p>\n<p>If it is set true, <a href=\"#series-lines.data.coords\">data.coords</a> can have more than two coords to draw a polyline. It is useful when visualizing GPS track data.</p>\n"
- },
- "effect": {
- "desc": "<p>The setting about the special effects of lines.</p>\n"
- },
- "effect.show": {
- "desc": "<p>Whether to show special effect. It is not displayed by default.</p>\n"
- },
- "effect.period": {
- "desc": "<p>The duration of the special effect, which unit is second.</p>\n"
- },
- "effect.constantSpeed": {
- "desc": "<p>Whether the moving animation of the trail of special effect has a constant speed, which unit is dimensioned in 3D space. The <a href=\"#series-lines.effect.period\">period</a> will be ignored when it is set to a non-null value.</p>\n"
- },
- "effect.trailWidth": {
- "desc": "<p>The width of the trail of special effects.</p>\n"
- },
- "effect.trailLength": {
- "desc": "<p>The length of trail of special effect. The values from 0 to 1 could be set. Is the percentage of the length of the line.</p>\n"
- },
- "effect.trailColor": {
- "desc": "<p>The color of the trail, which default is the same as the line color.</p>\n"
- },
- "effect.trailOpacity": {
- "desc": "<p>The opacity of the trail, which default is the same as line opacity.</p>\n"
- },
- "lineStyle": {
- "desc": "<p>The line style of the lines.</p>\n"
- },
- "lineStyle.color": {
- "desc": "<p>The color of the line. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "data": {
- "desc": "<p>A data array of 3D lines.\nUsually, each item of data can be a set of coordinates containing the start point and end point.</p>\n<p>More than two coordinates can be supported when <a href=\"#series-lines3D.polyline\">polyline</a> is set to <code class=\"codespan\">true</code>.\nas follows:</p>\n<pre><code class=\"lang-ts\">data: [\n [\n [120, 66, 1], // latitude, longitude and altitude coordinates of the start point\n [122, 67, 2] // latitude, longitude [...]
- },
- "data.coords": {
- "desc": "<p>An array of two or more latitude and longitude coordinates. When <a href=\"#series-lines3D.polyline\">polyline</a> is set to <code class=\"codespan\">true</code>, support more than two coordinates.</p>\n"
- },
- "data.value": {
- "desc": "<p>The value of data.</p>\n"
- },
- "data.lineStyle": {
- "desc": "<p>Style setting for single data (single line).</p>\n"
- },
- "data.lineStyle.color": {
- "desc": "<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "data.lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "data.lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "blendMode": {
- "desc": "<p>Sets the type of compositing operation to apply when drawing a new shape. </p>\n<p>Currently supporting <code class=\"codespan\">'source-over'</code>, <code class=\"codespan\">'lighter'</code>. The default is <code class=\"codespan\">'source-over'</code> mode is blended by alpha. The <code class=\"codespan\">'lighter'</code> is overlap mode. In this mode, the area where the number of graphics is concentrated can be highlighted by the overla [...]
- },
- "zlevel": {
- "desc": "<p>The layer in which the component is located.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and [...]
- },
- "silent": {
- "desc": "<p>Whether the graph doesn`t respond and triggers a mouse event. The default is false, which is to respond to and trigger mouse events.</p>\n"
- }
-}
\ No newline at end of file
+window.__EC_DOC_option_gl_series_lines3D = {"name":{"desc":"<p>Series name used for displaying in <a href=\"https://echarts.apache.org/zh/option.html#tooltip\" target=\"_blank\">tooltip</a> and filtering with <a href=\"https://echarts.apache.org/zh/option.html#legend\" target=\"_blank\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"coordinateSystem":{"desc":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li>< [...]
\ No newline at end of file
diff --git a/en/documents/option-gl-parts/option-gl.series-lines3D.json b/en/documents/option-gl-parts/option-gl.series-lines3D.json
index 914eeeb4..710cf12d 100644
--- a/en/documents/option-gl-parts/option-gl.series-lines3D.json
+++ b/en/documents/option-gl-parts/option-gl.series-lines3D.json
@@ -1,83 +1 @@
-{
- "name": {
- "desc": "<p>Series name used for displaying in <a href=\"https://echarts.apache.org/zh/option.html#tooltip\" target=\"_blank\">tooltip</a> and filtering with <a href=\"https://echarts.apache.org/zh/option.html#legend\" target=\"_blank\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"
- },
- "coordinateSystem": {
- "desc": "<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><code class=\"codespan\">'geo3D'</code>\n Use 3D geographic coordinate, with <a href=\"#series-.geoIndex\">geoIndex</a> to assign the corresponding 3D geographic coordinate components.</li>\n</ul>\n<ul>\n<li><p><code class=\"codespan\">'globe'</code></p>\n<p> Use 3D globe coordinate, with <a href=\"#series-.globeIndex\">globeIndex</a> to assign the corresponding 3D globe coordinate comp [...]
- },
- "geo3DIndex": {
- "desc": "<p>The index of the <a href=\"#geo3D\">geo3D</a> component used by the axis.The first <a href=\"#grid3D\">grid3D</a> component is used by default.</p>\n"
- },
- "globeIndex": {
- "desc": "<p>The index of the <a href=\"#globe\">globe</a> component used by the axis.The first <a href=\"#globe\">globe</a> component is used by default.</p>\n"
- },
- "polyline": {
- "desc": "<p>If draw as a polyline.</p>\n<p>Default to be <code class=\"codespan\">false</code>. Can only draw a two end straight line.</p>\n<p>If it is set true, <a href=\"#series-lines.data.coords\">data.coords</a> can have more than two coords to draw a polyline. It is useful when visualizing GPS track data.</p>\n"
- },
- "effect": {
- "desc": "<p>The setting about the special effects of lines.</p>\n"
- },
- "effect.show": {
- "desc": "<p>Whether to show special effect. It is not displayed by default.</p>\n"
- },
- "effect.period": {
- "desc": "<p>The duration of the special effect, which unit is second.</p>\n"
- },
- "effect.constantSpeed": {
- "desc": "<p>Whether the moving animation of the trail of special effect has a constant speed, which unit is dimensioned in 3D space. The <a href=\"#series-lines.effect.period\">period</a> will be ignored when it is set to a non-null value.</p>\n"
- },
- "effect.trailWidth": {
- "desc": "<p>The width of the trail of special effects.</p>\n"
- },
- "effect.trailLength": {
- "desc": "<p>The length of trail of special effect. The values from 0 to 1 could be set. Is the percentage of the length of the line.</p>\n"
- },
- "effect.trailColor": {
- "desc": "<p>The color of the trail, which default is the same as the line color.</p>\n"
- },
- "effect.trailOpacity": {
- "desc": "<p>The opacity of the trail, which default is the same as line opacity.</p>\n"
- },
- "lineStyle": {
- "desc": "<p>The line style of the lines.</p>\n"
- },
- "lineStyle.color": {
- "desc": "<p>The color of the line. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "data": {
- "desc": "<p>A data array of 3D lines.\nUsually, each item of data can be a set of coordinates containing the start point and end point.</p>\n<p>More than two coordinates can be supported when <a href=\"#series-lines3D.polyline\">polyline</a> is set to <code class=\"codespan\">true</code>.\nas follows:</p>\n<pre><code class=\"lang-ts\">data: [\n [\n [120, 66, 1], // latitude, longitude and altitude coordinates of the start point\n [122, 67, 2] // latitude, longitude [...]
- },
- "data.coords": {
- "desc": "<p>An array of two or more latitude and longitude coordinates. When <a href=\"#series-lines3D.polyline\">polyline</a> is set to <code class=\"codespan\">true</code>, support more than two coordinates.</p>\n"
- },
- "data.value": {
- "desc": "<p>The value of data.</p>\n"
- },
- "data.lineStyle": {
- "desc": "<p>Style setting for single data (single line).</p>\n"
- },
- "data.lineStyle.color": {
- "desc": "<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "data.lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "data.lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "blendMode": {
- "desc": "<p>Sets the type of compositing operation to apply when drawing a new shape. </p>\n<p>Currently supporting <code class=\"codespan\">'source-over'</code>, <code class=\"codespan\">'lighter'</code>. The default is <code class=\"codespan\">'source-over'</code> mode is blended by alpha. The <code class=\"codespan\">'lighter'</code> is overlap mode. In this mode, the area where the number of graphics is concentrated can be highlighted by the overla [...]
- },
- "zlevel": {
- "desc": "<p>The layer in which the component is located.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and [...]
- },
- "silent": {
- "desc": "<p>Whether the graph doesn`t respond and triggers a mouse event. The default is false, which is to respond to and trigger mouse events.</p>\n"
- }
-}
\ No newline at end of file
+{"name":{"desc":"<p>Series name used for displaying in <a href=\"https://echarts.apache.org/zh/option.html#tooltip\" target=\"_blank\">tooltip</a> and filtering with <a href=\"https://echarts.apache.org/zh/option.html#legend\" target=\"_blank\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"coordinateSystem":{"desc":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><code class=\"codespan\">'geo3D'</co [...]
\ No newline at end of file
diff --git a/en/documents/option-gl-parts/option-gl.series-map3D.js b/en/documents/option-gl-parts/option-gl.series-map3D.js
index 4bab5584..1b33e291 100644
--- a/en/documents/option-gl-parts/option-gl.series-map3D.js
+++ b/en/documents/option-gl-parts/option-gl.series-map3D.js
@@ -1,515 +1 @@
-window.__EC_DOC_option_gl_series_map3D = {
- "name": {
- "desc": "<p>Series name used for displaying in <a href=\"https://echarts.apache.org/zh/option.html#tooltip\" target=\"_blank\">tooltip</a> and filtering with <a href=\"https://echarts.apache.org/zh/option.html#legend\" target=\"_blank\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"
- },
- "map": {
- "desc": "<p>The map type. The map type used in ECharts-gl is the same as the <a href=\"https://echarts.apache.org/en/option.html#geo.map\" target=\"_blank\">geo</a> component.</p>\n<p>EChart provides map data in two formats. One is the JS file that can be imported directly through the script tag. After it is introduced, the map name and data will be automatically registered. Another is the JSON file that needs to be registered manually after loaded asynchronously by AJAX.</p>\n<p>Her [...]
- },
- "boxWidth": {
- "desc": "<p>三维地图 width in a 3D scene. With <a href=\"#series-map3D.viewControl.distance\">viewControl.distance</a> you can get the most appropriate display size.</p>\n<p>The following image is a schematic diagram of <code class=\"codespan\">boxWidth</code>, <code class=\"codespan\">boxHeight</code>, <code class=\"codespan\">boxDepth</code>, <code class=\"codespan\">regionHeight</code> in 三维地图.</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/gl/img/geo-size.png\"></p>\n"
- },
- "boxHeight": {
- "desc": "<p>三维地图 height in a 3D scene.</p>\n<p>Component height. This height contains the height of the bar and scatter on a 3D map.</p>\n"
- },
- "boxDepth": {
- "desc": "<p>三维地图 depth in a 3D scene.</p>\n<p>The component depth defaults to automatic, ensuring that the scale of the 3D component is the same as the ratio of the input GeoJSON.</p>\n"
- },
- "regionHeight": {
- "desc": "<p>The height of each area of the 3D map. This height is the height of the model, less than <a href=\"#series-map3D.boxHeight\">boxHeight</a>. <code class=\"codespan\">boxHeight - regionHeight</code> will be used for the display of 3D bar, 3D scatter, and etc.</p>\n"
- },
- "environment": {
- "desc": "<p>Environment map. Support for solid colors, gradual colors, URL of panoramic texture. The default is <code class=\"codespan\">'auto'</code>, which is used as the environment texture when <a href=\"#series-map3D.light.ambientCubemap.texture\">light.ambientCubemap.texture</a> is configured. Otherwise, the environment texture is not displayed.</p>\n<p>Example:</p>\n<pre><code class=\"lang-ts\">// Configure as a panoramic texture\nenvironment: 'asset/starfield.jpg& [...]
- },
- "groundPlane": {
- "desc": "<p>The ground allows the entire assembly to be “placed” to make the entire scene look more realistic.</p>\n<p> <code class=\"codespan\">groundPlane</code> supports setting up separate <code class=\"codespan\">realisticMaterial</code>, <code class=\"codespan\">colorMaterial</code>, <code class=\"codespan\">lambertMaterial</code> and other materials. If not set, the material parameters of the component are taken by default.</p>\n"
- },
- "groundPlane.show": {
- "desc": "<p>Whether to display the ground.</p>\n"
- },
- "groundPlane.color": {
- "desc": "<p>The color of the ground.</p>\n"
- },
- "instancing": {
- "desc": "<p><code class=\"codespan\">instancing</code> will merge all the <a href=\"http://geojson.org/geojson-spec.html#geometry-objects\" target=\"_blank\">geometry</a> in GeoJSON into one. When GeoJSON has a lot of (thousands) <a href=\"http://geojson.org/geojson-spec.html#geometry-objects\" target=\"_blank\">geometry</a>, it can effectively improve drawing efficiency.</p>\n"
- },
- "label": {
- "desc": "<p>The setting of the label.</p>\n"
- },
- "label.show": {
- "desc": "<p>Whether to show the label.</p>\n"
- },
- "label.distance": {
- "desc": "<p>Distance to the host graphic element.</p>\n<p>The distance from the label to the graphic. In a 3D Scatter, this distance is the pixel value of the screen space. In other figures, this distance is the relative 3D distance.</p>\n"
- },
- "label.formatter": {
- "desc": "<p>The formatter of the label content, which supports the string template and the callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template:</strong></p>\n<p>The model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item [...]
- },
- "label.textStyle": {
- "desc": "<p>The font style of the label.</p>\n"
- },
- "label.textStyle.color": {
- "desc": "<p>The Color of the text.</p>\n"
- },
- "label.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "label.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "label.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "label.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "label.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "itemStyle": {
- "desc": "<p>Visual properties of 3D graphics in 三维地图, including color, transparency, strokes, etc.</p>\n"
- },
- "itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "itemStyle.borderWidth": {
- "desc": "<p>The width of the border. With the border, you can distinguish each area more clearly. As shown below:</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/geo-border.png\"></p>\n"
- },
- "itemStyle.borderColor": {
- "desc": "<p>The color of the border.</p>\n"
- },
- "emphasis": {
- "desc": "<p>Graphic and label styles when mouse hover is highlighted.</p>\n"
- },
- "emphasis.label.show": {
- "desc": "<p>Whether to show the label.</p>\n"
- },
- "emphasis.label.distance": {
- "desc": "<p>Distance to the host graphic element.</p>\n<p>The distance from the label to the graphic. In a 3D Scatter, this distance is the pixel value of the screen space. In other figures, this distance is the relative 3D distance.</p>\n"
- },
- "emphasis.label.formatter": {
- "desc": "<p>The formatter of the label content, which supports the string template and the callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template:</strong></p>\n<p>The model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item [...]
- },
- "emphasis.label.textStyle": {
- "desc": "<p>The font style of the label.</p>\n"
- },
- "emphasis.label.textStyle.color": {
- "desc": "<p>The Color of the text.</p>\n"
- },
- "emphasis.label.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "emphasis.label.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "emphasis.label.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "emphasis.label.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "emphasis.label.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "emphasis.itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "emphasis.itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "data": {
- "desc": "<p>The setting of the map area.</p>\n"
- },
- "data.name": {
- "desc": "<p>The name of the corresponding map area, such as <code class=\"codespan\">'Guangdong'</code>, <code class=\"codespan\">'Zhejiang'</code>.</p>\n"
- },
- "data.value": {
- "desc": "<p>The data value for this area.</p>\n"
- },
- "data.regionHeight": {
- "desc": "<p>The height of the area. Different heights can be set to express the size of the data. When GeoJSON is the data of the building, this value can also be used to represent the approximate height. As shown below：</p>\n<p><img width=\"700\" height=\"auto\" src=\"documents/asset/gl/img/city-region-height.jpg\"></p>\n"
- },
- "data.itemStyle": {
- "desc": "<p>Style settings for a single area.</p>\n"
- },
- "data.itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "data.itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "data.itemStyle.borderWidth": {
- "desc": "<p>The width of the border. With the border, you can distinguish each area more clearly. As shown below:</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/geo-border.png\"></p>\n"
- },
- "data.itemStyle.borderColor": {
- "desc": "<p>The color of the border.</p>\n"
- },
- "data.label": {
- "desc": "<p>Label settings for a single area.</p>\n"
- },
- "data.label.show": {
- "desc": "<p>Whether to show the label.</p>\n"
- },
- "data.label.distance": {
- "desc": "<p>Distance to the host graphic element.</p>\n<p>The distance from the label to the graphic. In a 3D Scatter, this distance is the pixel value of the screen space. In other figures, this distance is the relative 3D distance.</p>\n"
- },
- "data.label.formatter": {
- "desc": "<p>The formatter of the label content, which supports the string template and the callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template:</strong></p>\n<p>The model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item [...]
- },
- "data.label.textStyle": {
- "desc": "<p>The font style of the label.</p>\n"
- },
- "data.label.textStyle.color": {
- "desc": "<p>The Color of the text.</p>\n"
- },
- "data.label.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "data.label.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "data.label.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "data.label.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "data.label.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "data.emphasis": {
- "desc": "<p>Setting the highlight for labels and styles for a single area.</p>\n"
- },
- "data.emphasis.itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "data.emphasis.itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "data.emphasis.itemStyle.borderWidth": {
- "desc": "<p>The width of the border. With the border, you can distinguish each area more clearly. As shown below:</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/geo-border.png\"></p>\n"
- },
- "data.emphasis.itemStyle.borderColor": {
- "desc": "<p>The color of the border.</p>\n"
- },
- "data.emphasis.label.show": {
- "desc": "<p>Whether to show the label.</p>\n"
- },
- "data.emphasis.label.distance": {
- "desc": "<p>Distance to the host graphic element.</p>\n<p>The distance from the label to the graphic. In a 3D Scatter, this distance is the pixel value of the screen space. In other figures, this distance is the relative 3D distance.</p>\n"
- },
- "data.emphasis.label.formatter": {
- "desc": "<p>The formatter of the label content, which supports the string template and the callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template:</strong></p>\n<p>The model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item [...]
- },
- "data.emphasis.label.textStyle": {
- "desc": "<p>The font style of the label.</p>\n"
- },
- "data.emphasis.label.textStyle.color": {
- "desc": "<p>The Color of the text.</p>\n"
- },
- "data.emphasis.label.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "data.emphasis.label.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "data.emphasis.label.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "data.emphasis.label.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "data.emphasis.label.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "shading": {
- "desc": "<p>The coloring effect of 3D graphics in 三维地图. The following three coloring methods are supported in echarts-gl:</p>\n<ul>\n<li><p><code class=\"codespan\">'color'</code>\nOnly display colors, not affected by other factors such as lighting.</p>\n</li>\n<li><p><code class=\"codespan\">'lambert'</code>\nThrough the classic [lambert] coloring, can express the light and dark that the light shows.</p>\n</li>\n<li><p><code class=\"codespan\">'realistic'</co [...]
- },
- "realisticMaterial": {
- "desc": "<p>The configuration item of the realistic material is valid when <a href=\"#series-map3D.shading\">shading</a> is <code class=\"codespan\">'realistic'</code>.</p>\n"
- },
- "realisticMaterial.detailTexture": {
- "desc": "<p>The texture map of the material detail.</p>\n"
- },
- "realisticMaterial.textureTiling": {
- "desc": "<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n"
- },
- "realisticMaterial.textureOffset": {
- "desc": "<p>The displacement of the texture detail texture.</p>\n"
- },
- "realisticMaterial.roughness": {
- "desc": "<p>The <code class=\"codespan\">roughness</code> attribute is used to indicate the roughness of the material, <code class=\"codespan\">0</code> is completely smooth, <code class=\"codespan\">1</code> is completely rough, and the middle value is between the two.</p>\n<p>The following images show the effect of <code class=\"codespan\">roughness</code> in <a href=\"#globe\"><code class=\"codespan\">globe</code></a> <code class=\"codespan\">0.2</code> (smooth) and <code class=\" [...]
- },
- "realisticMaterial.metalness": {
- "desc": "<p>The <code class=\"codespan\">metalness</code> attribute is used to indicate whether the material is metal or non-metal, <code class=\"codespan\">0</code> is non-metallic, <code class=\"codespan\">1</code> is metal, and the middle value is between the two. Usually set to <code class=\"codespan\">0</code> and <code class=\"codespan\">1</code> to meet most of the scenes.</p>\n<p>The picture below show the difference between `metal' and '0' in <a href=\"#globe\">g [...]
- },
- "realisticMaterial.roughnessAdjust": {
- "desc": "<p>Roughness adjustment is useful when using roughness map. The overall roughness of the texture can be adjusted. The default is <code class=\"codespan\">0.5</code>, <code class=\"codespan\">0</code> is completely smooth, <code class=\"codespan\">1</code> is completely rough.</p>\n"
- },
- "realisticMaterial.metalnessAdjust": {
- "desc": "<p>Metalness adjustment is useful when using metalness maps. The overall metallicity of the texture can be adjusted. The default is <code class=\"codespan\">0.5</code>, <code class=\"codespan\">0</code> is non-metal, <code class=\"codespan\">1</code> is metal.</p>\n"
- },
- "realisticMaterial.normalTexture": {
- "desc": "<p>Normal map of material details.</p>\n<p>Using normal maps, you can still display rich shades of detail on the surface of the object with fewer vertices.</p>\n"
- },
- "lambertMaterial": {
- "desc": "<p>The configuration item of the lambert material is valid when <a href=\"#series-map3D.shading\">shading</a> is <code class=\"codespan\">'lambert'</code>.</p>\n"
- },
- "lambertMaterial.detailTexture": {
- "desc": "<p>The texture map of the material detail.</p>\n"
- },
- "lambertMaterial.textureTiling": {
- "desc": "<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n"
- },
- "lambertMaterial.textureOffset": {
- "desc": "<p>The displacement of the texture detail texture.</p>\n"
- },
- "colorMaterial": {
- "desc": "<p>The color material related configuration item is valid when <a href=\"#series-map3D.shading\">shading</a> is <code class=\"codespan\">'color'</code>.</p>\n"
- },
- "colorMaterial.detailTexture": {
- "desc": "<p>The texture map of the material detail.</p>\n"
- },
- "colorMaterial.textureTiling": {
- "desc": "<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n"
- },
- "colorMaterial.textureOffset": {
- "desc": "<p>The displacement of the texture detail texture.</p>\n"
- },
- "light": {
- "desc": "<p>Light related settings. Invalid when <a href=\"#series-map3D.shading\">shading</a> is 'color'.</p>\n<p>The lighting settings affect the components and all the charts on the component's coordinate system.</p>\n<p>A reasonable lighting setting can make the brightness and darkness of the whole scene richer and more layered.</p>\n"
- },
- "light.main": {
- "desc": "<p>The setting of the main light source of the scene. In the <a href=\"#globe\">globe</a> component is the sun.</p>\n"
- },
- "light.main.color": {
- "desc": "<p>The color of the main light source.</p>\n"
- },
- "light.main.intensity": {
- "desc": "<p>The intensity of the main light source.</p>\n"
- },
- "light.main.shadow": {
- "desc": "<p>Whether the main light source displays a shadow. The default is off.</p>\n<p>Turning on the shadows can bring more realistic and layered lighting to the scene. But it also increases the operating overhead of the program.</p>\n<p>The following two images show the difference between turning on the shadow and turning off the shadow.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-shadow.png\" width=\"100%\" tit [...]
- },
- "light.main.shadowQuality": {
- "desc": "<p>The quality of the shadow. You can choose <code class=\"codespan\">'low'</code>, <code class=\"codespan\">'medium'</code>, <code class=\"codespan\">'high'</code>, <code class=\"codespan\">'ultra'</code></p>\n<p>The following two images shows the difference between low quality and high quality shadows.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-shadow-low.png\" width=\"100 [...]
- },
- "light.main.alpha": {
- "desc": "<p>The main light source is around the x-axis, which is the angle of up-down rotation. Control the direction of the light with <a href=\"#series-map3D.light.main.beta\">beta</a>.</p>\n<p>As the following image show:</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/light-alpha-beta.png\"></p>\n<p>The <a href=\"#globe\">globe</a> component can control the time of sunlight by <a href=\"#globe.light.main.time\">time</a>.</p>\n"
- },
- "light.main.beta": {
- "desc": "<p>The main light source is around the y-axis, which is the angle of the left-right rotation.</p>\n"
- },
- "light.ambient": {
- "desc": "<p>Global ambient light settings.</p>\n"
- },
- "light.ambient.color": {
- "desc": "<p>The color of ambient light.</p>\n"
- },
- "light.ambient.intensity": {
- "desc": "<p>The intensity of ambient light.</p>\n"
- },
- "light.ambientCubemap": {
- "desc": "<p>The ambientCubemap uses texture as the source of ambient light, which provides diffuse and specular for objects. The diffuse and specular can be set separately by <a href=\"#series-map3D.light.ambientCubemap.diffuseIntensity\">diffuseIntensity</a> and <a href=\"#series-map3D.light.ambientCubemap.specularIntensity\">specularIntensity</a>.</p>\n"
- },
- "light.ambientCubemap.texture": {
- "desc": "<p>The URL of the ambient cubemap supports HDR images in the <code class=\"codespan\">.hdr</code> format. You can obtained the resources for <code class=\"codespan\">.hdr</code> from <a href=\"http://www.hdrlabs.com/sibl/archive.html\" target=\"_blank\">http://www.hdrlabs.com/sibl/archive.html</a> and other websites.</p>\n<p>Example：</p>\n<pre><code class=\"lang-ts\">ambientCubemap: {\n texture: 'pisa.hdr',\n // The exposure value used when analytic hdr\n ex [...]
- },
- "light.ambientCubemap.diffuseIntensity": {
- "desc": "<p>The intensity of diffuse.</p>\n"
- },
- "light.ambientCubemap.specularIntensity": {
- "desc": "<p>The intensity of specular.</p>\n"
- },
- "postEffect": {
- "desc": "<p>Post-processing effects related configuration. It can add effects such as highlights, depth of field, screen space ambient occlusion (SSAO), toning to the picture. And it can make the whole picture more textured.</p>\n<p>The following are the differences between closing <code class=\"codespan\">postEffect</code> and opening <code class=\"codespan\">postEffect</code>.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/i [...]
- },
- "postEffect.enable": {
- "desc": "<p>Whether to enable post-processing effects. Not enabled by default.</p>\n"
- },
- "postEffect.bloom": {
- "desc": "<p>Bloom is used to reproducing the effects that occur in real cameras when taking pictures in a bright environment.\nBecause traditional RGB can only represent colors in the range of '0 - 255', so we need to use the bloom effect simulates fringes of light extending from the borders of bright areas, creating the illusion of a bright light overwhelming the camera. As shown below：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/globe-posteffect-blo [...]
- },
- "postEffect.bloom.enable": {
- "desc": "<p>Whether to enable the bloom effect.</p>\n"
- },
- "postEffect.bloom.bloomIntensity": {
- "desc": "<p>The intensity of the bloom. The default is 0.1.</p>\n"
- },
- "postEffect.depthOfField": {
- "desc": "<p>Depth of Field is a post-processing effect that simulates the focus properties of a camera. The area of focus is clear, and the area away from the focus is gradually blurred.</p>\n<p>The depth of field effect allows the observer to focus on the area of focus and make the picture feel stronger. Large depth of field can also create a macro model effect.</p>\n<p>The following are the differences between turning off and turning on the depth of field effect.</p>\n<div class=\ [...]
- },
- "postEffect.depthOfField.enable": {
- "desc": "<p>Whether to enable the depth of field.</p>\n"
- },
- "postEffect.depthOfField.focalDistance": {
- "desc": "<p>The initial focus distance. The user can click on the area to automatically focus.</p>\n"
- },
- "postEffect.depthOfField.focalRange": {
- "desc": "<p>The size of the in-focus area. The objects in this range are completely clear and there is no blurring.</p>\n"
- },
- "postEffect.depthOfField.fstop": {
- "desc": "<p>[F value] of the lens (<a href=\"https://zh.wikipedia.org/wiki/%E7%84%A6%E6%AF%94)\" target=\"_blank\">https://zh.wikipedia.org/wiki/%E7%84%A6%E6%AF%94)</a>, the smaller the value, the shallower the depth of field.</p>\n"
- },
- "postEffect.depthOfField.blurRadius": {
- "desc": "<p>Blur radius outside the focus.</p>\n<p>The difference blur effect between the different radius.</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\"></img>\n <img src=\"documents/asset/gl/img/geo-dof-large.png\" width=\"100%\" title=\"blurSize: 10\"></img>\n</div>\n"
- },
- "postEffect.screenSpaceAmbientOcclusion": {
- "desc": "<p>The ambient occlusion post-processing effect darkens the corners, holes, crevices, and areas where most light can`t reach. It is a supplement to the traditional shadow map, which makes the whole scene more natural and layered.</p>\n<p>Below is a comparison of the effects of no SSAO and 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\"></img>\n <img src=\ [...]
- },
- "postEffect.SSAO": {
- "desc": "<p>Same as <a href=\"#series-map3D.postEffect.screenSpaceAmbientOcclusion\">screenSpaceAmbientOcclusion</a></p>\n"
- },
- "postEffect.SSAO.enable": {
- "desc": "<p>Whether to enable SSAO (screen space ambient occlusion). Not enabled by default.</p>\n"
- },
- "postEffect.SSAO.quality": {
- "desc": "<p>The quality of SSAO (screen space ambient occlusion). Supporting<code class=\"codespan\">'low'</code>, <code class=\"codespan\">'medium'</code>, <code class=\"codespan\">'high'</code>, <code class=\"codespan\">'ultra'</code></p>\n"
- },
- "postEffect.SSAO.radius": {
- "desc": "<p>The radius of the SSAO (screen space ambient occlusion). The larger the radius, the more natural the effect, but you need to set a higher <code class=\"codespan\">'quality'</code>.</p>\n<p>The following example is the difference between a smaller and larger radius:</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\"></img>\n <img src=\"docume [...]
- },
- "postEffect.SSAO.intensity": {
- "desc": "<p>The intensity of SSAO (screen space ambient occlusion). The larger the value, the darker the color.</p>\n"
- },
- "postEffect.colorCorrection": {
- "desc": "<p>Color correction and adjustment. Similar to Color Adjustments in Photoshop.</p>\n<p>The same scene in the figure below is adjusted to the difference between the cool color system and the warm color system.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/buildings-cold.jpg\" width=\"100%\" title=\"Cold\"></img>\n <img src=\"documents/asset/gl/img/buildings-warm.jpg\" width=\"100%\" title=\"Warm\"></img>\n</div>\n\n"
- },
- "postEffect.colorCorrection.enable": {
- "desc": "<p>Whether to enable the color correction.</p>\n"
- },
- "postEffect.colorCorrection.lookupTexture": {
- "desc": "<p>Color correction lookup texture, recommended.</p>\n<p>The color correction lookup texture is a texture image like the one below.</p>\n<p><img width=\"200\" height=\"auto\" src=\"documents/asset/gl/img/lookup.png\"></p>\n<p>This is the basic lookup texture image that you can use directly.\nTo adjust the color of the scene to the effect you want, you can take a screenshot of the scene and adjust the color to the desired effect in image processing software such as Photoshop. [...]
- },
- "postEffect.colorCorrection.exposure": {
- "desc": "<p>The exposure of the image.</p>\n"
- },
- "postEffect.colorCorrection.brightness": {
- "desc": "<p>The brightness of the image.</p>\n"
- },
- "postEffect.colorCorrection.contrast": {
- "desc": "<p>The contrast of the image.</p>\n"
- },
- "postEffect.colorCorrection.saturation": {
- "desc": "<p>The saturation of the image.</p>\n"
- },
- "postEffect.FXAA": {
- "desc": "<p>After opening <a href=\"#series-map3D.postEffect\">postEffect</a>, WebGL's default MSAA (Multi Sampling Anti Aliasing) will not work. At this time, FXAA (Fast Approximate Anti-Aliasing) can solve the anti-aliasing problem quickly and easily. FXAA blurs the edge of the scene to solve the problem of aliasing. It works well on some scenes, but in echarts-gl, you need to ensure that the edges of many texts and lines are sharp and clear, so FXAA is not suitable. At this po [...]
- },
- "postEffect.FXAA.enable": {
- "desc": "<p>Whether to enable FXAA. Not enabled by default.</p>\n"
- },
- "temporalSuperSampling": {
- "desc": "<p>Temporal supersampling. After opening <a href=\"#series-map3D.postEffect\">postEffect</a>, WebGL's default MSAA (MultiSampling Anti-Aliasing) will not work, so we need to solve the problem of sampling.</p>\n<p>Temporal supersampling is an anti-aliasing method. After the picture is still, it will continue to sample multiple times and taken at several instances inside the pixel and an average color value is calculated, thus achieving anti-aliasing effect.\nAnd in this p [...]
- },
- "temporalSuperSampling.enable": {
- "desc": "<p>Whether to enable temporal supersampling. By default, temporal supersampling is also turned on synchronously when <a href=\"#series-map3D.postEffect\">postEffect</a> is turned on.</p>\n"
- },
- "viewControl": {
- "desc": "<p><code class=\"codespan\">viewControl</code> is used for mouse rotation, zooming, and other perspective control.</p>\n"
- },
- "viewControl.projection": {
- "desc": "<p>The way of projection, the default is <code class=\"codespan\">'perspective'</code> projection, also supports setting to <code class=\"codespan\">'orthogonal'</code> projection.</p>\n"
- },
- "viewControl.autoRotate": {
- "desc": "<p>Whether to enable the angle of view to automatically rotate around the object.</p>\n"
- },
- "viewControl.autoRotateDirection": {
- "desc": "<p>The direction in which the object auto rotates. The default is <code class=\"codespan\">'cw'</code> means clockwise from top to bottom, and can also use <code class=\"codespan\">'ccw'</code> means counterclockwise from top to bottom.</p>\n"
- },
- "viewControl.autoRotateSpeed": {
- "desc": "<p>The speed at which the object auto rotates. The unit is <code class=\"codespan\">angle/second</code>, the default is <code class=\"codespan\">10</code>, which is a turn of <code class=\"codespan\">36</code> seconds.</p>\n"
- },
- "viewControl.autoRotateAfterStill": {
- "desc": "<p>The time interval for automatic rotation to resume after the mouse is still. Valid after opening <a href=\"#series-map3D.viewControl.autoRotate\">autoRotate</a>.</p>\n"
- },
- "viewControl.damping": {
- "desc": "<p>The damping when the mouse is rotated, zoomed, etc.\nWhen it is greater than 0, the angle of view will continue to move (rotate and zoom) due to certain inertia after the mouse is still.</p>\n"
- },
- "viewControl.rotateSensitivity": {
- "desc": "<p>The sensitivity of the rotation operation. The greater the value, the more sensitive. Supports the use of arrays to set the horizontal and vertical rotation sensitivity separately.</p>\n<p>The default is <code class=\"codespan\">1</code>.</p>\n<p>Cannot be rotated after setting to <code class=\"codespan\">0</code>.</p>\n<pre><code class=\"lang-ts\">// can't rotate\nrotateSensitivity: 0\n// can only be rotated horizontally\nrotateSensitivity: [1, 0]\n// can only rotat [...]
- },
- "viewControl.zoomSensitivity": {
- "desc": "<p>The sensitivity of the zoom operation, the larger the value, the more sensitive. The default is <code class=\"codespan\">1</code>.</p>\n<p>Can<code class=\"codespan\">t be scaled after setting to</code>0`.</p>\n"
- },
- "viewControl.panSensitivity": {
- "desc": "<p>The sensitivity of the panning operation, the greater the value, the more sensitive. Supports the use of arrays to set the horizontal and vertical translation sensitivity.</p>\n<p>The default is <code class=\"codespan\">1</code>.</p>\n<p>Cannot pan after setting to <code class=\"codespan\">0</code>.</p>\n"
- },
- "viewControl.panMouseButton": {
- "desc": "<p>The mouse button used for panning operation supports:</p>\n<ul>\n<li><p><code class=\"codespan\">'left'</code> left mouse button (default)</p>\n</li>\n<li><p><code class=\"codespan\">'middle'</code> middle mouse button</p>\n</li>\n<li><p><code class=\"codespan\">'right'</code> right mouse button</p>\n</li>\n</ul>\n<p>Note: If set to the right mouse button, the default context menu will be blocked.</p>\n"
- },
- "viewControl.rotateMouseButton": {
- "desc": "<p>The mouse button used for the rotation operation supports:</p>\n<ul>\n<li><p><code class=\"codespan\">'left'</code> left mouse button</p>\n</li>\n<li><p><code class=\"codespan\">'middle'</code> middle mouse button (default)</p>\n</li>\n<li><p><code class=\"codespan\">'right'</code> right mouse button</p>\n</li>\n</ul>\n<p>Note: If set to the right mouse button, the default context menu will be blocked.</p>\n"
- },
- "viewControl.distance": {
- "desc": "<p>The distance of the default perspective from the subject. For <a href=\"#globe\">globe</a>, the distance from the Earth's surface is the distance from the center origin for other components such as <a href=\"#grid3D\">grid3D</a> and <a href=\"#geo3D\">geo3D</a>. Valid when <a href=\"#series-map3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'perspective'</code>.</p>\n"
- },
- "viewControl.minDistance": {
- "desc": "<p>The angle of view is controlled by the mouse to bring the minimum distance to the subject. Valid when <a href=\"#series-map3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'perspective'</code>.</p>\n"
- },
- "viewControl.maxDistance": {
- "desc": "<p>The angle of view can be extended to the maximum distance of the subject by mouse control. Valid when <a href=\"#series-map3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'perspective'</code>.</p>\n"
- },
- "viewControl.orthographicSize": {
- "desc": "<p>The size of the orthogonal projection. Valid when <a href=\"#series-map3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'orthographic'</code>.</p>\n"
- },
- "viewControl.maxOrthographicSize": {
- "desc": "<p>The maximum value of the orthogonal projection scaling. Valid when <a href=\"#series-map3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'orthographic'</code>.</p>\n"
- },
- "viewControl.minOrthographicSize": {
- "desc": "<p>The minimum value of the orthogonal projection scaling. Valid when <a href=\"#series-map3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'orthographic'</code></p>\n"
- },
- "viewControl.alpha": {
- "desc": "<p>The angle of view is around the x-axis, which is the angle of rotation up and down. With <a href=\"#series-map3D.light.main.beta\">beta</a> you can control the direction of the perspective.</p>\n<p>As shown below：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/view-alpha-beta.png\"></p>\n"
- },
- "viewControl.beta": {
- "desc": "<p>The angle of view is around the y-axis, which is the angle of rotation from left to right.</p>\n"
- },
- "viewControl.center": {
- "desc": "<p>At the center of the angle of view, the rotation will also rotate around this center point. The default is <code class=\"codespan\">[0,0,0]</code>.</p>\n"
- },
- "viewControl.minAlpha": {
- "desc": "<p>The minimum alpha value to rotate up and down. That is, the angle of view can be rotated to reach the uppermost angle.</p>\n"
- },
- "viewControl.maxAlpha": {
- "desc": "<p>The maximum alpha value to rotate up and down. That is, the angle of view can be rotated to the lowest angle.</p>\n"
- },
- "viewControl.minBeta": {
- "desc": "<p>The minimum beta value to rotate left and right. That is, the angle of view can be rotated to the leftmost angle.</p>\n"
- },
- "viewControl.maxBeta": {
- "desc": "<p>The maximum beta value to rotate left and right rotation. That is, the angle of view can be rotated to the rightmost angle.</p>\n"
- },
- "viewControl.animation": {
- "desc": "<p>Whether to enable animation.</p>\n"
- },
- "viewControl.animationDurationUpdate": {
- "desc": "<p>The duration time for update the transition animation.</p>\n"
- },
- "viewControl.animationEasingUpdate": {
- "desc": "<p>The easing effect for update transition animation.</p>\n"
- },
- "zlevel": {
- "desc": "<p>The layer in which the component is located.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and [...]
- },
- "left": {
- "desc": "<p>Distance between component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>; and it can also be <code class=\"codespan\">'left'</code>, <code class=\"codespan\">'center'</code>, or <code class=\"codespan\">'right'</code>.</p>\n<p>If [...]
- },
- "top": {
- "desc": "<p>Distance between component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>; and it can also be <code class=\"codespan\">'top'</code>, <code class=\"codespan\">'middle'</code>, or <code class=\"codespan\">'bottom'</code>.</p>\n<p>If t [...]
- },
- "right": {
- "desc": "<p>Distance between component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>.</p>\n<p> Adaptive by default.</p>\n"
- },
- "bottom": {
- "desc": "<p>Distance between component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>.</p>\n<p> Adaptive by default.</p>\n"
- },
- "width": {
- "desc": "<p> The width of the view of the component.</p>\n"
- },
- "height": {
- "desc": "<p> The height of the view of the component.</p>\n"
- }
-}
\ No newline at end of file
+window.__EC_DOC_option_gl_series_map3D = {"name":{"desc":"<p>Series name used for displaying in <a href=\"https://echarts.apache.org/zh/option.html#tooltip\" target=\"_blank\">tooltip</a> and filtering with <a href=\"https://echarts.apache.org/zh/option.html#legend\" target=\"_blank\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"map":{"desc":"<p>The map type. The map type used in ECharts-gl is the same as the <a href=\"https://ec [...]
\ No newline at end of file
diff --git a/en/documents/option-gl-parts/option-gl.series-map3D.json b/en/documents/option-gl-parts/option-gl.series-map3D.json
index ef7606c6..9269adef 100644
--- a/en/documents/option-gl-parts/option-gl.series-map3D.json
+++ b/en/documents/option-gl-parts/option-gl.series-map3D.json
@@ -1,515 +1 @@
-{
- "name": {
- "desc": "<p>Series name used for displaying in <a href=\"https://echarts.apache.org/zh/option.html#tooltip\" target=\"_blank\">tooltip</a> and filtering with <a href=\"https://echarts.apache.org/zh/option.html#legend\" target=\"_blank\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"
- },
- "map": {
- "desc": "<p>The map type. The map type used in ECharts-gl is the same as the <a href=\"https://echarts.apache.org/en/option.html#geo.map\" target=\"_blank\">geo</a> component.</p>\n<p>EChart provides map data in two formats. One is the JS file that can be imported directly through the script tag. After it is introduced, the map name and data will be automatically registered. Another is the JSON file that needs to be registered manually after loaded asynchronously by AJAX.</p>\n<p>Her [...]
- },
- "boxWidth": {
- "desc": "<p>三维地图 width in a 3D scene. With <a href=\"#series-map3D.viewControl.distance\">viewControl.distance</a> you can get the most appropriate display size.</p>\n<p>The following image is a schematic diagram of <code class=\"codespan\">boxWidth</code>, <code class=\"codespan\">boxHeight</code>, <code class=\"codespan\">boxDepth</code>, <code class=\"codespan\">regionHeight</code> in 三维地图.</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/gl/img/geo-size.png\"></p>\n"
- },
- "boxHeight": {
- "desc": "<p>三维地图 height in a 3D scene.</p>\n<p>Component height. This height contains the height of the bar and scatter on a 3D map.</p>\n"
- },
- "boxDepth": {
- "desc": "<p>三维地图 depth in a 3D scene.</p>\n<p>The component depth defaults to automatic, ensuring that the scale of the 3D component is the same as the ratio of the input GeoJSON.</p>\n"
- },
- "regionHeight": {
- "desc": "<p>The height of each area of the 3D map. This height is the height of the model, less than <a href=\"#series-map3D.boxHeight\">boxHeight</a>. <code class=\"codespan\">boxHeight - regionHeight</code> will be used for the display of 3D bar, 3D scatter, and etc.</p>\n"
- },
- "environment": {
- "desc": "<p>Environment map. Support for solid colors, gradual colors, URL of panoramic texture. The default is <code class=\"codespan\">'auto'</code>, which is used as the environment texture when <a href=\"#series-map3D.light.ambientCubemap.texture\">light.ambientCubemap.texture</a> is configured. Otherwise, the environment texture is not displayed.</p>\n<p>Example:</p>\n<pre><code class=\"lang-ts\">// Configure as a panoramic texture\nenvironment: 'asset/starfield.jpg& [...]
- },
- "groundPlane": {
- "desc": "<p>The ground allows the entire assembly to be “placed” to make the entire scene look more realistic.</p>\n<p> <code class=\"codespan\">groundPlane</code> supports setting up separate <code class=\"codespan\">realisticMaterial</code>, <code class=\"codespan\">colorMaterial</code>, <code class=\"codespan\">lambertMaterial</code> and other materials. If not set, the material parameters of the component are taken by default.</p>\n"
- },
- "groundPlane.show": {
- "desc": "<p>Whether to display the ground.</p>\n"
- },
- "groundPlane.color": {
- "desc": "<p>The color of the ground.</p>\n"
- },
- "instancing": {
- "desc": "<p><code class=\"codespan\">instancing</code> will merge all the <a href=\"http://geojson.org/geojson-spec.html#geometry-objects\" target=\"_blank\">geometry</a> in GeoJSON into one. When GeoJSON has a lot of (thousands) <a href=\"http://geojson.org/geojson-spec.html#geometry-objects\" target=\"_blank\">geometry</a>, it can effectively improve drawing efficiency.</p>\n"
- },
- "label": {
- "desc": "<p>The setting of the label.</p>\n"
- },
- "label.show": {
- "desc": "<p>Whether to show the label.</p>\n"
- },
- "label.distance": {
- "desc": "<p>Distance to the host graphic element.</p>\n<p>The distance from the label to the graphic. In a 3D Scatter, this distance is the pixel value of the screen space. In other figures, this distance is the relative 3D distance.</p>\n"
- },
- "label.formatter": {
- "desc": "<p>The formatter of the label content, which supports the string template and the callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template:</strong></p>\n<p>The model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item [...]
- },
- "label.textStyle": {
- "desc": "<p>The font style of the label.</p>\n"
- },
- "label.textStyle.color": {
- "desc": "<p>The Color of the text.</p>\n"
- },
- "label.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "label.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "label.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "label.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "label.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "itemStyle": {
- "desc": "<p>Visual properties of 3D graphics in 三维地图, including color, transparency, strokes, etc.</p>\n"
- },
- "itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "itemStyle.borderWidth": {
- "desc": "<p>The width of the border. With the border, you can distinguish each area more clearly. As shown below:</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/geo-border.png\"></p>\n"
- },
- "itemStyle.borderColor": {
- "desc": "<p>The color of the border.</p>\n"
- },
- "emphasis": {
- "desc": "<p>Graphic and label styles when mouse hover is highlighted.</p>\n"
- },
- "emphasis.label.show": {
- "desc": "<p>Whether to show the label.</p>\n"
- },
- "emphasis.label.distance": {
- "desc": "<p>Distance to the host graphic element.</p>\n<p>The distance from the label to the graphic. In a 3D Scatter, this distance is the pixel value of the screen space. In other figures, this distance is the relative 3D distance.</p>\n"
- },
- "emphasis.label.formatter": {
- "desc": "<p>The formatter of the label content, which supports the string template and the callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template:</strong></p>\n<p>The model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item [...]
- },
- "emphasis.label.textStyle": {
- "desc": "<p>The font style of the label.</p>\n"
- },
- "emphasis.label.textStyle.color": {
- "desc": "<p>The Color of the text.</p>\n"
- },
- "emphasis.label.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "emphasis.label.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "emphasis.label.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "emphasis.label.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "emphasis.label.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "emphasis.itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "emphasis.itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "data": {
- "desc": "<p>The setting of the map area.</p>\n"
- },
- "data.name": {
- "desc": "<p>The name of the corresponding map area, such as <code class=\"codespan\">'Guangdong'</code>, <code class=\"codespan\">'Zhejiang'</code>.</p>\n"
- },
- "data.value": {
- "desc": "<p>The data value for this area.</p>\n"
- },
- "data.regionHeight": {
- "desc": "<p>The height of the area. Different heights can be set to express the size of the data. When GeoJSON is the data of the building, this value can also be used to represent the approximate height. As shown below：</p>\n<p><img width=\"700\" height=\"auto\" src=\"documents/asset/gl/img/city-region-height.jpg\"></p>\n"
- },
- "data.itemStyle": {
- "desc": "<p>Style settings for a single area.</p>\n"
- },
- "data.itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "data.itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "data.itemStyle.borderWidth": {
- "desc": "<p>The width of the border. With the border, you can distinguish each area more clearly. As shown below:</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/geo-border.png\"></p>\n"
- },
- "data.itemStyle.borderColor": {
- "desc": "<p>The color of the border.</p>\n"
- },
- "data.label": {
- "desc": "<p>Label settings for a single area.</p>\n"
- },
- "data.label.show": {
- "desc": "<p>Whether to show the label.</p>\n"
- },
- "data.label.distance": {
- "desc": "<p>Distance to the host graphic element.</p>\n<p>The distance from the label to the graphic. In a 3D Scatter, this distance is the pixel value of the screen space. In other figures, this distance is the relative 3D distance.</p>\n"
- },
- "data.label.formatter": {
- "desc": "<p>The formatter of the label content, which supports the string template and the callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template:</strong></p>\n<p>The model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item [...]
- },
- "data.label.textStyle": {
- "desc": "<p>The font style of the label.</p>\n"
- },
- "data.label.textStyle.color": {
- "desc": "<p>The Color of the text.</p>\n"
- },
- "data.label.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "data.label.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "data.label.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "data.label.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "data.label.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "data.emphasis": {
- "desc": "<p>Setting the highlight for labels and styles for a single area.</p>\n"
- },
- "data.emphasis.itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "data.emphasis.itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "data.emphasis.itemStyle.borderWidth": {
- "desc": "<p>The width of the border. With the border, you can distinguish each area more clearly. As shown below:</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/geo-border.png\"></p>\n"
- },
- "data.emphasis.itemStyle.borderColor": {
- "desc": "<p>The color of the border.</p>\n"
- },
- "data.emphasis.label.show": {
- "desc": "<p>Whether to show the label.</p>\n"
- },
- "data.emphasis.label.distance": {
- "desc": "<p>Distance to the host graphic element.</p>\n<p>The distance from the label to the graphic. In a 3D Scatter, this distance is the pixel value of the screen space. In other figures, this distance is the relative 3D distance.</p>\n"
- },
- "data.emphasis.label.formatter": {
- "desc": "<p>The formatter of the label content, which supports the string template and the callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template:</strong></p>\n<p>The model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item [...]
- },
- "data.emphasis.label.textStyle": {
- "desc": "<p>The font style of the label.</p>\n"
- },
- "data.emphasis.label.textStyle.color": {
- "desc": "<p>The Color of the text.</p>\n"
- },
- "data.emphasis.label.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "data.emphasis.label.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "data.emphasis.label.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "data.emphasis.label.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "data.emphasis.label.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "shading": {
- "desc": "<p>The coloring effect of 3D graphics in 三维地图. The following three coloring methods are supported in echarts-gl:</p>\n<ul>\n<li><p><code class=\"codespan\">'color'</code>\nOnly display colors, not affected by other factors such as lighting.</p>\n</li>\n<li><p><code class=\"codespan\">'lambert'</code>\nThrough the classic [lambert] coloring, can express the light and dark that the light shows.</p>\n</li>\n<li><p><code class=\"codespan\">'realistic'</co [...]
- },
- "realisticMaterial": {
- "desc": "<p>The configuration item of the realistic material is valid when <a href=\"#series-map3D.shading\">shading</a> is <code class=\"codespan\">'realistic'</code>.</p>\n"
- },
- "realisticMaterial.detailTexture": {
- "desc": "<p>The texture map of the material detail.</p>\n"
- },
- "realisticMaterial.textureTiling": {
- "desc": "<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n"
- },
- "realisticMaterial.textureOffset": {
- "desc": "<p>The displacement of the texture detail texture.</p>\n"
- },
- "realisticMaterial.roughness": {
- "desc": "<p>The <code class=\"codespan\">roughness</code> attribute is used to indicate the roughness of the material, <code class=\"codespan\">0</code> is completely smooth, <code class=\"codespan\">1</code> is completely rough, and the middle value is between the two.</p>\n<p>The following images show the effect of <code class=\"codespan\">roughness</code> in <a href=\"#globe\"><code class=\"codespan\">globe</code></a> <code class=\"codespan\">0.2</code> (smooth) and <code class=\" [...]
- },
- "realisticMaterial.metalness": {
- "desc": "<p>The <code class=\"codespan\">metalness</code> attribute is used to indicate whether the material is metal or non-metal, <code class=\"codespan\">0</code> is non-metallic, <code class=\"codespan\">1</code> is metal, and the middle value is between the two. Usually set to <code class=\"codespan\">0</code> and <code class=\"codespan\">1</code> to meet most of the scenes.</p>\n<p>The picture below show the difference between `metal' and '0' in <a href=\"#globe\">g [...]
- },
- "realisticMaterial.roughnessAdjust": {
- "desc": "<p>Roughness adjustment is useful when using roughness map. The overall roughness of the texture can be adjusted. The default is <code class=\"codespan\">0.5</code>, <code class=\"codespan\">0</code> is completely smooth, <code class=\"codespan\">1</code> is completely rough.</p>\n"
- },
- "realisticMaterial.metalnessAdjust": {
- "desc": "<p>Metalness adjustment is useful when using metalness maps. The overall metallicity of the texture can be adjusted. The default is <code class=\"codespan\">0.5</code>, <code class=\"codespan\">0</code> is non-metal, <code class=\"codespan\">1</code> is metal.</p>\n"
- },
- "realisticMaterial.normalTexture": {
- "desc": "<p>Normal map of material details.</p>\n<p>Using normal maps, you can still display rich shades of detail on the surface of the object with fewer vertices.</p>\n"
- },
- "lambertMaterial": {
- "desc": "<p>The configuration item of the lambert material is valid when <a href=\"#series-map3D.shading\">shading</a> is <code class=\"codespan\">'lambert'</code>.</p>\n"
- },
- "lambertMaterial.detailTexture": {
- "desc": "<p>The texture map of the material detail.</p>\n"
- },
- "lambertMaterial.textureTiling": {
- "desc": "<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n"
- },
- "lambertMaterial.textureOffset": {
- "desc": "<p>The displacement of the texture detail texture.</p>\n"
- },
- "colorMaterial": {
- "desc": "<p>The color material related configuration item is valid when <a href=\"#series-map3D.shading\">shading</a> is <code class=\"codespan\">'color'</code>.</p>\n"
- },
- "colorMaterial.detailTexture": {
- "desc": "<p>The texture map of the material detail.</p>\n"
- },
- "colorMaterial.textureTiling": {
- "desc": "<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n"
- },
- "colorMaterial.textureOffset": {
- "desc": "<p>The displacement of the texture detail texture.</p>\n"
- },
- "light": {
- "desc": "<p>Light related settings. Invalid when <a href=\"#series-map3D.shading\">shading</a> is 'color'.</p>\n<p>The lighting settings affect the components and all the charts on the component's coordinate system.</p>\n<p>A reasonable lighting setting can make the brightness and darkness of the whole scene richer and more layered.</p>\n"
- },
- "light.main": {
- "desc": "<p>The setting of the main light source of the scene. In the <a href=\"#globe\">globe</a> component is the sun.</p>\n"
- },
- "light.main.color": {
- "desc": "<p>The color of the main light source.</p>\n"
- },
- "light.main.intensity": {
- "desc": "<p>The intensity of the main light source.</p>\n"
- },
- "light.main.shadow": {
- "desc": "<p>Whether the main light source displays a shadow. The default is off.</p>\n<p>Turning on the shadows can bring more realistic and layered lighting to the scene. But it also increases the operating overhead of the program.</p>\n<p>The following two images show the difference between turning on the shadow and turning off the shadow.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-shadow.png\" width=\"100%\" tit [...]
- },
- "light.main.shadowQuality": {
- "desc": "<p>The quality of the shadow. You can choose <code class=\"codespan\">'low'</code>, <code class=\"codespan\">'medium'</code>, <code class=\"codespan\">'high'</code>, <code class=\"codespan\">'ultra'</code></p>\n<p>The following two images shows the difference between low quality and high quality shadows.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/geo-shadow-low.png\" width=\"100 [...]
- },
- "light.main.alpha": {
- "desc": "<p>The main light source is around the x-axis, which is the angle of up-down rotation. Control the direction of the light with <a href=\"#series-map3D.light.main.beta\">beta</a>.</p>\n<p>As the following image show:</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/light-alpha-beta.png\"></p>\n<p>The <a href=\"#globe\">globe</a> component can control the time of sunlight by <a href=\"#globe.light.main.time\">time</a>.</p>\n"
- },
- "light.main.beta": {
- "desc": "<p>The main light source is around the y-axis, which is the angle of the left-right rotation.</p>\n"
- },
- "light.ambient": {
- "desc": "<p>Global ambient light settings.</p>\n"
- },
- "light.ambient.color": {
- "desc": "<p>The color of ambient light.</p>\n"
- },
- "light.ambient.intensity": {
- "desc": "<p>The intensity of ambient light.</p>\n"
- },
- "light.ambientCubemap": {
- "desc": "<p>The ambientCubemap uses texture as the source of ambient light, which provides diffuse and specular for objects. The diffuse and specular can be set separately by <a href=\"#series-map3D.light.ambientCubemap.diffuseIntensity\">diffuseIntensity</a> and <a href=\"#series-map3D.light.ambientCubemap.specularIntensity\">specularIntensity</a>.</p>\n"
- },
- "light.ambientCubemap.texture": {
- "desc": "<p>The URL of the ambient cubemap supports HDR images in the <code class=\"codespan\">.hdr</code> format. You can obtained the resources for <code class=\"codespan\">.hdr</code> from <a href=\"http://www.hdrlabs.com/sibl/archive.html\" target=\"_blank\">http://www.hdrlabs.com/sibl/archive.html</a> and other websites.</p>\n<p>Example：</p>\n<pre><code class=\"lang-ts\">ambientCubemap: {\n texture: 'pisa.hdr',\n // The exposure value used when analytic hdr\n ex [...]
- },
- "light.ambientCubemap.diffuseIntensity": {
- "desc": "<p>The intensity of diffuse.</p>\n"
- },
- "light.ambientCubemap.specularIntensity": {
- "desc": "<p>The intensity of specular.</p>\n"
- },
- "postEffect": {
- "desc": "<p>Post-processing effects related configuration. It can add effects such as highlights, depth of field, screen space ambient occlusion (SSAO), toning to the picture. And it can make the whole picture more textured.</p>\n<p>The following are the differences between closing <code class=\"codespan\">postEffect</code> and opening <code class=\"codespan\">postEffect</code>.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/i [...]
- },
- "postEffect.enable": {
- "desc": "<p>Whether to enable post-processing effects. Not enabled by default.</p>\n"
- },
- "postEffect.bloom": {
- "desc": "<p>Bloom is used to reproducing the effects that occur in real cameras when taking pictures in a bright environment.\nBecause traditional RGB can only represent colors in the range of '0 - 255', so we need to use the bloom effect simulates fringes of light extending from the borders of bright areas, creating the illusion of a bright light overwhelming the camera. As shown below：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/globe-posteffect-blo [...]
- },
- "postEffect.bloom.enable": {
- "desc": "<p>Whether to enable the bloom effect.</p>\n"
- },
- "postEffect.bloom.bloomIntensity": {
- "desc": "<p>The intensity of the bloom. The default is 0.1.</p>\n"
- },
- "postEffect.depthOfField": {
- "desc": "<p>Depth of Field is a post-processing effect that simulates the focus properties of a camera. The area of focus is clear, and the area away from the focus is gradually blurred.</p>\n<p>The depth of field effect allows the observer to focus on the area of focus and make the picture feel stronger. Large depth of field can also create a macro model effect.</p>\n<p>The following are the differences between turning off and turning on the depth of field effect.</p>\n<div class=\ [...]
- },
- "postEffect.depthOfField.enable": {
- "desc": "<p>Whether to enable the depth of field.</p>\n"
- },
- "postEffect.depthOfField.focalDistance": {
- "desc": "<p>The initial focus distance. The user can click on the area to automatically focus.</p>\n"
- },
- "postEffect.depthOfField.focalRange": {
- "desc": "<p>The size of the in-focus area. The objects in this range are completely clear and there is no blurring.</p>\n"
- },
- "postEffect.depthOfField.fstop": {
- "desc": "<p>[F value] of the lens (<a href=\"https://zh.wikipedia.org/wiki/%E7%84%A6%E6%AF%94)\" target=\"_blank\">https://zh.wikipedia.org/wiki/%E7%84%A6%E6%AF%94)</a>, the smaller the value, the shallower the depth of field.</p>\n"
- },
- "postEffect.depthOfField.blurRadius": {
- "desc": "<p>Blur radius outside the focus.</p>\n<p>The difference blur effect between the different radius.</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\"></img>\n <img src=\"documents/asset/gl/img/geo-dof-large.png\" width=\"100%\" title=\"blurSize: 10\"></img>\n</div>\n"
- },
- "postEffect.screenSpaceAmbientOcclusion": {
- "desc": "<p>The ambient occlusion post-processing effect darkens the corners, holes, crevices, and areas where most light can`t reach. It is a supplement to the traditional shadow map, which makes the whole scene more natural and layered.</p>\n<p>Below is a comparison of the effects of no SSAO and 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\"></img>\n <img src=\ [...]
- },
- "postEffect.SSAO": {
- "desc": "<p>Same as <a href=\"#series-map3D.postEffect.screenSpaceAmbientOcclusion\">screenSpaceAmbientOcclusion</a></p>\n"
- },
- "postEffect.SSAO.enable": {
- "desc": "<p>Whether to enable SSAO (screen space ambient occlusion). Not enabled by default.</p>\n"
- },
- "postEffect.SSAO.quality": {
- "desc": "<p>The quality of SSAO (screen space ambient occlusion). Supporting<code class=\"codespan\">'low'</code>, <code class=\"codespan\">'medium'</code>, <code class=\"codespan\">'high'</code>, <code class=\"codespan\">'ultra'</code></p>\n"
- },
- "postEffect.SSAO.radius": {
- "desc": "<p>The radius of the SSAO (screen space ambient occlusion). The larger the radius, the more natural the effect, but you need to set a higher <code class=\"codespan\">'quality'</code>.</p>\n<p>The following example is the difference between a smaller and larger radius:</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\"></img>\n <img src=\"docume [...]
- },
- "postEffect.SSAO.intensity": {
- "desc": "<p>The intensity of SSAO (screen space ambient occlusion). The larger the value, the darker the color.</p>\n"
- },
- "postEffect.colorCorrection": {
- "desc": "<p>Color correction and adjustment. Similar to Color Adjustments in Photoshop.</p>\n<p>The same scene in the figure below is adjusted to the difference between the cool color system and the warm color system.</p>\n<div class=\"twentytwenty-container\" style=\"width: 700px;\">\n <img src=\"documents/asset/gl/img/buildings-cold.jpg\" width=\"100%\" title=\"Cold\"></img>\n <img src=\"documents/asset/gl/img/buildings-warm.jpg\" width=\"100%\" title=\"Warm\"></img>\n</div>\n\n"
- },
- "postEffect.colorCorrection.enable": {
- "desc": "<p>Whether to enable the color correction.</p>\n"
- },
- "postEffect.colorCorrection.lookupTexture": {
- "desc": "<p>Color correction lookup texture, recommended.</p>\n<p>The color correction lookup texture is a texture image like the one below.</p>\n<p><img width=\"200\" height=\"auto\" src=\"documents/asset/gl/img/lookup.png\"></p>\n<p>This is the basic lookup texture image that you can use directly.\nTo adjust the color of the scene to the effect you want, you can take a screenshot of the scene and adjust the color to the desired effect in image processing software such as Photoshop. [...]
- },
- "postEffect.colorCorrection.exposure": {
- "desc": "<p>The exposure of the image.</p>\n"
- },
- "postEffect.colorCorrection.brightness": {
- "desc": "<p>The brightness of the image.</p>\n"
- },
- "postEffect.colorCorrection.contrast": {
- "desc": "<p>The contrast of the image.</p>\n"
- },
- "postEffect.colorCorrection.saturation": {
- "desc": "<p>The saturation of the image.</p>\n"
- },
- "postEffect.FXAA": {
- "desc": "<p>After opening <a href=\"#series-map3D.postEffect\">postEffect</a>, WebGL's default MSAA (Multi Sampling Anti Aliasing) will not work. At this time, FXAA (Fast Approximate Anti-Aliasing) can solve the anti-aliasing problem quickly and easily. FXAA blurs the edge of the scene to solve the problem of aliasing. It works well on some scenes, but in echarts-gl, you need to ensure that the edges of many texts and lines are sharp and clear, so FXAA is not suitable. At this po [...]
- },
- "postEffect.FXAA.enable": {
- "desc": "<p>Whether to enable FXAA. Not enabled by default.</p>\n"
- },
- "temporalSuperSampling": {
- "desc": "<p>Temporal supersampling. After opening <a href=\"#series-map3D.postEffect\">postEffect</a>, WebGL's default MSAA (MultiSampling Anti-Aliasing) will not work, so we need to solve the problem of sampling.</p>\n<p>Temporal supersampling is an anti-aliasing method. After the picture is still, it will continue to sample multiple times and taken at several instances inside the pixel and an average color value is calculated, thus achieving anti-aliasing effect.\nAnd in this p [...]
- },
- "temporalSuperSampling.enable": {
- "desc": "<p>Whether to enable temporal supersampling. By default, temporal supersampling is also turned on synchronously when <a href=\"#series-map3D.postEffect\">postEffect</a> is turned on.</p>\n"
- },
- "viewControl": {
- "desc": "<p><code class=\"codespan\">viewControl</code> is used for mouse rotation, zooming, and other perspective control.</p>\n"
- },
- "viewControl.projection": {
- "desc": "<p>The way of projection, the default is <code class=\"codespan\">'perspective'</code> projection, also supports setting to <code class=\"codespan\">'orthogonal'</code> projection.</p>\n"
- },
- "viewControl.autoRotate": {
- "desc": "<p>Whether to enable the angle of view to automatically rotate around the object.</p>\n"
- },
- "viewControl.autoRotateDirection": {
- "desc": "<p>The direction in which the object auto rotates. The default is <code class=\"codespan\">'cw'</code> means clockwise from top to bottom, and can also use <code class=\"codespan\">'ccw'</code> means counterclockwise from top to bottom.</p>\n"
- },
- "viewControl.autoRotateSpeed": {
- "desc": "<p>The speed at which the object auto rotates. The unit is <code class=\"codespan\">angle/second</code>, the default is <code class=\"codespan\">10</code>, which is a turn of <code class=\"codespan\">36</code> seconds.</p>\n"
- },
- "viewControl.autoRotateAfterStill": {
- "desc": "<p>The time interval for automatic rotation to resume after the mouse is still. Valid after opening <a href=\"#series-map3D.viewControl.autoRotate\">autoRotate</a>.</p>\n"
- },
- "viewControl.damping": {
- "desc": "<p>The damping when the mouse is rotated, zoomed, etc.\nWhen it is greater than 0, the angle of view will continue to move (rotate and zoom) due to certain inertia after the mouse is still.</p>\n"
- },
- "viewControl.rotateSensitivity": {
- "desc": "<p>The sensitivity of the rotation operation. The greater the value, the more sensitive. Supports the use of arrays to set the horizontal and vertical rotation sensitivity separately.</p>\n<p>The default is <code class=\"codespan\">1</code>.</p>\n<p>Cannot be rotated after setting to <code class=\"codespan\">0</code>.</p>\n<pre><code class=\"lang-ts\">// can't rotate\nrotateSensitivity: 0\n// can only be rotated horizontally\nrotateSensitivity: [1, 0]\n// can only rotat [...]
- },
- "viewControl.zoomSensitivity": {
- "desc": "<p>The sensitivity of the zoom operation, the larger the value, the more sensitive. The default is <code class=\"codespan\">1</code>.</p>\n<p>Can<code class=\"codespan\">t be scaled after setting to</code>0`.</p>\n"
- },
- "viewControl.panSensitivity": {
- "desc": "<p>The sensitivity of the panning operation, the greater the value, the more sensitive. Supports the use of arrays to set the horizontal and vertical translation sensitivity.</p>\n<p>The default is <code class=\"codespan\">1</code>.</p>\n<p>Cannot pan after setting to <code class=\"codespan\">0</code>.</p>\n"
- },
- "viewControl.panMouseButton": {
- "desc": "<p>The mouse button used for panning operation supports:</p>\n<ul>\n<li><p><code class=\"codespan\">'left'</code> left mouse button (default)</p>\n</li>\n<li><p><code class=\"codespan\">'middle'</code> middle mouse button</p>\n</li>\n<li><p><code class=\"codespan\">'right'</code> right mouse button</p>\n</li>\n</ul>\n<p>Note: If set to the right mouse button, the default context menu will be blocked.</p>\n"
- },
- "viewControl.rotateMouseButton": {
- "desc": "<p>The mouse button used for the rotation operation supports:</p>\n<ul>\n<li><p><code class=\"codespan\">'left'</code> left mouse button</p>\n</li>\n<li><p><code class=\"codespan\">'middle'</code> middle mouse button (default)</p>\n</li>\n<li><p><code class=\"codespan\">'right'</code> right mouse button</p>\n</li>\n</ul>\n<p>Note: If set to the right mouse button, the default context menu will be blocked.</p>\n"
- },
- "viewControl.distance": {
- "desc": "<p>The distance of the default perspective from the subject. For <a href=\"#globe\">globe</a>, the distance from the Earth's surface is the distance from the center origin for other components such as <a href=\"#grid3D\">grid3D</a> and <a href=\"#geo3D\">geo3D</a>. Valid when <a href=\"#series-map3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'perspective'</code>.</p>\n"
- },
- "viewControl.minDistance": {
- "desc": "<p>The angle of view is controlled by the mouse to bring the minimum distance to the subject. Valid when <a href=\"#series-map3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'perspective'</code>.</p>\n"
- },
- "viewControl.maxDistance": {
- "desc": "<p>The angle of view can be extended to the maximum distance of the subject by mouse control. Valid when <a href=\"#series-map3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'perspective'</code>.</p>\n"
- },
- "viewControl.orthographicSize": {
- "desc": "<p>The size of the orthogonal projection. Valid when <a href=\"#series-map3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'orthographic'</code>.</p>\n"
- },
- "viewControl.maxOrthographicSize": {
- "desc": "<p>The maximum value of the orthogonal projection scaling. Valid when <a href=\"#series-map3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'orthographic'</code>.</p>\n"
- },
- "viewControl.minOrthographicSize": {
- "desc": "<p>The minimum value of the orthogonal projection scaling. Valid when <a href=\"#series-map3D.viewControl.projection\">projection</a> is <code class=\"codespan\">'orthographic'</code></p>\n"
- },
- "viewControl.alpha": {
- "desc": "<p>The angle of view is around the x-axis, which is the angle of rotation up and down. With <a href=\"#series-map3D.light.main.beta\">beta</a> you can control the direction of the perspective.</p>\n<p>As shown below：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/gl/img/view-alpha-beta.png\"></p>\n"
- },
- "viewControl.beta": {
- "desc": "<p>The angle of view is around the y-axis, which is the angle of rotation from left to right.</p>\n"
- },
- "viewControl.center": {
- "desc": "<p>At the center of the angle of view, the rotation will also rotate around this center point. The default is <code class=\"codespan\">[0,0,0]</code>.</p>\n"
- },
- "viewControl.minAlpha": {
- "desc": "<p>The minimum alpha value to rotate up and down. That is, the angle of view can be rotated to reach the uppermost angle.</p>\n"
- },
- "viewControl.maxAlpha": {
- "desc": "<p>The maximum alpha value to rotate up and down. That is, the angle of view can be rotated to the lowest angle.</p>\n"
- },
- "viewControl.minBeta": {
- "desc": "<p>The minimum beta value to rotate left and right. That is, the angle of view can be rotated to the leftmost angle.</p>\n"
- },
- "viewControl.maxBeta": {
- "desc": "<p>The maximum beta value to rotate left and right rotation. That is, the angle of view can be rotated to the rightmost angle.</p>\n"
- },
- "viewControl.animation": {
- "desc": "<p>Whether to enable animation.</p>\n"
- },
- "viewControl.animationDurationUpdate": {
- "desc": "<p>The duration time for update the transition animation.</p>\n"
- },
- "viewControl.animationEasingUpdate": {
- "desc": "<p>The easing effect for update transition animation.</p>\n"
- },
- "zlevel": {
- "desc": "<p>The layer in which the component is located.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and [...]
- },
- "left": {
- "desc": "<p>Distance between component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>; and it can also be <code class=\"codespan\">'left'</code>, <code class=\"codespan\">'center'</code>, or <code class=\"codespan\">'right'</code>.</p>\n<p>If [...]
- },
- "top": {
- "desc": "<p>Distance between component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>; and it can also be <code class=\"codespan\">'top'</code>, <code class=\"codespan\">'middle'</code>, or <code class=\"codespan\">'bottom'</code>.</p>\n<p>If t [...]
- },
- "right": {
- "desc": "<p>Distance between component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>.</p>\n<p> Adaptive by default.</p>\n"
- },
- "bottom": {
- "desc": "<p>Distance between component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>.</p>\n<p> Adaptive by default.</p>\n"
- },
- "width": {
- "desc": "<p> The width of the view of the component.</p>\n"
- },
- "height": {
- "desc": "<p> The height of the view of the component.</p>\n"
- }
-}
\ No newline at end of file
+{"name":{"desc":"<p>Series name used for displaying in <a href=\"https://echarts.apache.org/zh/option.html#tooltip\" target=\"_blank\">tooltip</a> and filtering with <a href=\"https://echarts.apache.org/zh/option.html#legend\" target=\"_blank\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"map":{"desc":"<p>The map type. The map type used in ECharts-gl is the same as the <a href=\"https://echarts.apache.org/en/option.html#geo.map\" [...]
\ No newline at end of file
diff --git a/en/documents/option-gl-parts/option-gl.series-polygons3D.js b/en/documents/option-gl-parts/option-gl.series-polygons3D.js
index 1aa9f88a..12a66851 100644
--- a/en/documents/option-gl-parts/option-gl.series-polygons3D.js
+++ b/en/documents/option-gl-parts/option-gl.series-polygons3D.js
@@ -1,35 +1 @@
-window.__EC_DOC_option_gl_series_polygons3D = {
- "multiPolygon": {
- "desc": "<p>Whether a data contains multiple polygons.</p>\n"
- },
- "itemStyle": {
- "desc": "<p>Graphic styles, including color, transparency, strokes, and etc.</p>\n"
- },
- "itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "emphasis": {
- "desc": "<p>Mouse hover Highlights the style of graphics and labels.</p>\n"
- },
- "emphasis.itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "emphasis.itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "data": {
- "desc": "<p>A list of data for the polygon.</p>\n<pre><code class=\"lang-ts\">data: [{\n // A square\n coords: [[0, 0], [100, 0], [100, 100], [0, 100]],\n // Height\n height: 3\n}, {\n // A triangle\n coords: [[50, 0], [100, 100], [0, 100]],\n // Height\n height: 5\n}]\n</code></pre>\n"
- },
- "data.coords": {
- "desc": "<p>A list of coordinates of the polygon. If <a href=\"#series-polygons3D.multiPolygon\">multiPolygon</a> is set to true, it is an array containing multiple polygons.</p>\n"
- },
- "progressiveThreshold": {
- "desc": "<p>Enable progressive rendering thresholds, progressive rendering can be loading the screen without blocking.</p>\n"
- },
- "progressive": {
- "desc": "<p>Progressively render the amount of data per render.</p>\n"
- }
-}
\ No newline at end of file
+window.__EC_DOC_option_gl_series_polygons3D = {"multiPolygon":{"desc":"<p>Whether a data contains multiple polygons.</p>\n"},"itemStyle":{"desc":"<p>Graphic styles, including color, transparency, strokes, and etc.</p>\n"},"itemStyle.color":{"desc":"<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"},"itemSt [...]
\ No newline at end of file
diff --git a/en/documents/option-gl-parts/option-gl.series-polygons3D.json b/en/documents/option-gl-parts/option-gl.series-polygons3D.json
index e0d625a1..7047c183 100644
--- a/en/documents/option-gl-parts/option-gl.series-polygons3D.json
+++ b/en/documents/option-gl-parts/option-gl.series-polygons3D.json
@@ -1,35 +1 @@
-{
- "multiPolygon": {
- "desc": "<p>Whether a data contains multiple polygons.</p>\n"
- },
- "itemStyle": {
- "desc": "<p>Graphic styles, including color, transparency, strokes, and etc.</p>\n"
- },
- "itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "emphasis": {
- "desc": "<p>Mouse hover Highlights the style of graphics and labels.</p>\n"
- },
- "emphasis.itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "emphasis.itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "data": {
- "desc": "<p>A list of data for the polygon.</p>\n<pre><code class=\"lang-ts\">data: [{\n // A square\n coords: [[0, 0], [100, 0], [100, 100], [0, 100]],\n // Height\n height: 3\n}, {\n // A triangle\n coords: [[50, 0], [100, 100], [0, 100]],\n // Height\n height: 5\n}]\n</code></pre>\n"
- },
- "data.coords": {
- "desc": "<p>A list of coordinates of the polygon. If <a href=\"#series-polygons3D.multiPolygon\">multiPolygon</a> is set to true, it is an array containing multiple polygons.</p>\n"
- },
- "progressiveThreshold": {
- "desc": "<p>Enable progressive rendering thresholds, progressive rendering can be loading the screen without blocking.</p>\n"
- },
- "progressive": {
- "desc": "<p>Progressively render the amount of data per render.</p>\n"
- }
-}
\ No newline at end of file
+{"multiPolygon":{"desc":"<p>Whether a data contains multiple polygons.</p>\n"},"itemStyle":{"desc":"<p>Graphic styles, including color, transparency, strokes, and etc.</p>\n"},"itemStyle.color":{"desc":"<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"},"itemStyle.opacity":{"desc":"<p>The opacity of the gr [...]
\ No newline at end of file
diff --git a/en/documents/option-gl-parts/option-gl.series-scatter3D.js b/en/documents/option-gl-parts/option-gl.series-scatter3D.js
index 145f2138..de27a459 100644
--- a/en/documents/option-gl-parts/option-gl.series-scatter3D.js
+++ b/en/documents/option-gl-parts/option-gl.series-scatter3D.js
@@ -1,143 +1 @@
-window.__EC_DOC_option_gl_series_scatter3D = {
- "name": {
- "desc": "<p>Series name used for displaying in <a href=\"https://echarts.apache.org/zh/option.html#tooltip\" target=\"_blank\">tooltip</a> and filtering with <a href=\"https://echarts.apache.org/zh/option.html#legend\" target=\"_blank\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"
- },
- "coordinateSystem": {
- "desc": "<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class=\"codespan\">'cartesian3D'</code></p>\n<p> Use a 3D rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n<ul>\n<li><code class=\"codespan\">'geo3D'</code>\n Use 3D geographic coordinate, with <a href= [...]
- },
- "grid3DIndex": {
- "desc": "<p>Use the index of the <a href=\"#grid3D\">grid3D</a> component. The first <a href=\"#grid3D\">grid3D</a> component is used by default.</p>\n"
- },
- "geo3DIndex": {
- "desc": "<p>The index of the <a href=\"#geo3D\">geo3D</a> component used by the axis.The first <a href=\"#grid3D\">grid3D</a> component is used by default.</p>\n"
- },
- "globeIndex": {
- "desc": "<p>The index of the <a href=\"#globe\">globe</a> component used by the axis.The first <a href=\"#globe\">globe</a> component is used by default.</p>\n"
- },
- "symbol": {
- "desc": "<p>The shape of the scatter. The default is a circle.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">'circle'</code>, <code class=\"codespan\">'rect'</code>, <code class=\"codespan\">'roundRect'</code>, <code class=\"codespan\">'triangle'</code>, <code class=\"codespan\">'diamond'</code>, <code class=\"codespan\">'pin'</code>, <code class=\"codespan\">'arrow'</code>, <code class=\"codespan\"> [...]
- },
- "symbolSize": {
- "desc": "<p> symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-ts\">(value: Array|number, params: Object) [...]
- },
- "itemStyle": {
- "desc": "<p>Sets the style of scatter such as colors, strokes, etc.</p>\n"
- },
- "itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "itemStyle.borderWidth": {
- "desc": "<p>Sets the width of the border.</p>\n"
- },
- "itemStyle.borderColor": {
- "desc": "<p>Sets the color of the border.</p>\n"
- },
- "label": {
- "desc": "<p>Sets the style of label.</p>\n"
- },
- "label.show": {
- "desc": "<p>Whether to show the label.</p>\n"
- },
- "label.distance": {
- "desc": "<p>Distance to the host graphic element.</p>\n<p>The distance from the label to the graphic. In a 3D Scatter, this distance is the pixel value of the screen space. In other figures, this distance is the relative 3D distance.</p>\n"
- },
- "label.position": {
- "desc": "<p>The location of the label.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li>'top'</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n</ul>\n"
- },
- "label.formatter": {
- "desc": "<p>The formatter of the label content, which supports the string template and the callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template:</strong></p>\n<p>The model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item [...]
- },
- "label.textStyle": {
- "desc": "<p>The font style of the label.</p>\n"
- },
- "label.textStyle.color": {
- "desc": "<p>The Color of the text.</p>\n"
- },
- "label.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "label.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "label.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "label.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "label.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "emphasis": {
- "desc": "<p>Graphics and labels are highlighted.</p>\n"
- },
- "emphasis.itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "emphasis.itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "emphasis.itemStyle.borderWidth": {
- "desc": "<p>Sets the width of the border.</p>\n"
- },
- "emphasis.itemStyle.borderColor": {
- "desc": "<p>Sets the color of the border.</p>\n"
- },
- "emphasis.label.show": {
- "desc": "<p>Whether to show the label.</p>\n"
- },
- "emphasis.label.distance": {
- "desc": "<p>Distance to the host graphic element.</p>\n<p>The distance from the label to the graphic. In a 3D Scatter, this distance is the pixel value of the screen space. In other figures, this distance is the relative 3D distance.</p>\n"
- },
- "emphasis.label.position": {
- "desc": "<p>The location of the label.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li>'top'</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n</ul>\n"
- },
- "emphasis.label.formatter": {
- "desc": "<p>The formatter of the label content, which supports the string template and the callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template:</strong></p>\n<p>The model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item [...]
- },
- "emphasis.label.textStyle": {
- "desc": "<p>The font style of the label.</p>\n"
- },
- "emphasis.label.textStyle.color": {
- "desc": "<p>The Color of the text.</p>\n"
- },
- "emphasis.label.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "emphasis.label.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "emphasis.label.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "emphasis.label.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "emphasis.label.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "data": {
- "desc": "<p>The data array of scatter3D. Each item in the array is a piece of data. Usually, this data stores each attribute/dimension of the data in an array. As Follows:</p>\n<pre><code class=\"lang-ts\">data: [\n [[12, 14, 10], [34, 50, 15], [56, 30, 20], [10, 15, 12], [23, 10, 14]]\n]\n</code></pre>\n<p>For each item in the array：</p>\n<ol>\n<li>In <a href=\"#grid3D\">grid3D</a> ,the first three values of each item are<code class=\"codespan\">x</code>, <code class=\"codespan\" [...]
- },
- "blendMode": {
- "desc": "<p>Sets the type of compositing operation to apply when drawing a new shape. </p>\n<p>Currently supporting <code class=\"codespan\">'source-over'</code>, <code class=\"codespan\">'lighter'</code>. The default is <code class=\"codespan\">'source-over'</code> mode is blended by alpha. The <code class=\"codespan\">'lighter'</code> is overlap mode. In this mode, the area where the number of graphics is concentrated can be highlighted by the overla [...]
- },
- "zlevel": {
- "desc": "<p>The layer in which the component is located.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and [...]
- },
- "silent": {
- "desc": "<p>Whether the graph doesn`t respond and triggers a mouse event. The default is false, which is to respond to and trigger mouse events.</p>\n"
- },
- "animation": {
- "desc": "<p>Whether to enable animation.</p>\n"
- },
- "animationDurationUpdate": {
- "desc": "<p>The duration time for update the transition animation.</p>\n"
- },
- "animationEasingUpdate": {
- "desc": "<p>The easing effect for update transition animation.</p>\n"
- }
-}
\ No newline at end of file
+window.__EC_DOC_option_gl_series_scatter3D = {"name":{"desc":"<p>Series name used for displaying in <a href=\"https://echarts.apache.org/zh/option.html#tooltip\" target=\"_blank\">tooltip</a> and filtering with <a href=\"https://echarts.apache.org/zh/option.html#legend\" target=\"_blank\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"coordinateSystem":{"desc":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li [...]
\ No newline at end of file
diff --git a/en/documents/option-gl-parts/option-gl.series-scatter3D.json b/en/documents/option-gl-parts/option-gl.series-scatter3D.json
index ffa53847..18f1acd6 100644
--- a/en/documents/option-gl-parts/option-gl.series-scatter3D.json
+++ b/en/documents/option-gl-parts/option-gl.series-scatter3D.json
@@ -1,143 +1 @@
-{
- "name": {
- "desc": "<p>Series name used for displaying in <a href=\"https://echarts.apache.org/zh/option.html#tooltip\" target=\"_blank\">tooltip</a> and filtering with <a href=\"https://echarts.apache.org/zh/option.html#legend\" target=\"_blank\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"
- },
- "coordinateSystem": {
- "desc": "<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class=\"codespan\">'cartesian3D'</code></p>\n<p> Use a 3D rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n<ul>\n<li><code class=\"codespan\">'geo3D'</code>\n Use 3D geographic coordinate, with <a href= [...]
- },
- "grid3DIndex": {
- "desc": "<p>Use the index of the <a href=\"#grid3D\">grid3D</a> component. The first <a href=\"#grid3D\">grid3D</a> component is used by default.</p>\n"
- },
- "geo3DIndex": {
- "desc": "<p>The index of the <a href=\"#geo3D\">geo3D</a> component used by the axis.The first <a href=\"#grid3D\">grid3D</a> component is used by default.</p>\n"
- },
- "globeIndex": {
- "desc": "<p>The index of the <a href=\"#globe\">globe</a> component used by the axis.The first <a href=\"#globe\">globe</a> component is used by default.</p>\n"
- },
- "symbol": {
- "desc": "<p>The shape of the scatter. The default is a circle.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">'circle'</code>, <code class=\"codespan\">'rect'</code>, <code class=\"codespan\">'roundRect'</code>, <code class=\"codespan\">'triangle'</code>, <code class=\"codespan\">'diamond'</code>, <code class=\"codespan\">'pin'</code>, <code class=\"codespan\">'arrow'</code>, <code class=\"codespan\"> [...]
- },
- "symbolSize": {
- "desc": "<p> symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-ts\">(value: Array|number, params: Object) [...]
- },
- "itemStyle": {
- "desc": "<p>Sets the style of scatter such as colors, strokes, etc.</p>\n"
- },
- "itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "itemStyle.borderWidth": {
- "desc": "<p>Sets the width of the border.</p>\n"
- },
- "itemStyle.borderColor": {
- "desc": "<p>Sets the color of the border.</p>\n"
- },
- "label": {
- "desc": "<p>Sets the style of label.</p>\n"
- },
- "label.show": {
- "desc": "<p>Whether to show the label.</p>\n"
- },
- "label.distance": {
- "desc": "<p>Distance to the host graphic element.</p>\n<p>The distance from the label to the graphic. In a 3D Scatter, this distance is the pixel value of the screen space. In other figures, this distance is the relative 3D distance.</p>\n"
- },
- "label.position": {
- "desc": "<p>The location of the label.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li>'top'</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n</ul>\n"
- },
- "label.formatter": {
- "desc": "<p>The formatter of the label content, which supports the string template and the callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template:</strong></p>\n<p>The model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item [...]
- },
- "label.textStyle": {
- "desc": "<p>The font style of the label.</p>\n"
- },
- "label.textStyle.color": {
- "desc": "<p>The Color of the text.</p>\n"
- },
- "label.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "label.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "label.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "label.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "label.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "emphasis": {
- "desc": "<p>Graphics and labels are highlighted.</p>\n"
- },
- "emphasis.itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "emphasis.itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "emphasis.itemStyle.borderWidth": {
- "desc": "<p>Sets the width of the border.</p>\n"
- },
- "emphasis.itemStyle.borderColor": {
- "desc": "<p>Sets the color of the border.</p>\n"
- },
- "emphasis.label.show": {
- "desc": "<p>Whether to show the label.</p>\n"
- },
- "emphasis.label.distance": {
- "desc": "<p>Distance to the host graphic element.</p>\n<p>The distance from the label to the graphic. In a 3D Scatter, this distance is the pixel value of the screen space. In other figures, this distance is the relative 3D distance.</p>\n"
- },
- "emphasis.label.position": {
- "desc": "<p>The location of the label.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li>'top'</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n</ul>\n"
- },
- "emphasis.label.formatter": {
- "desc": "<p>The formatter of the label content, which supports the string template and the callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template:</strong></p>\n<p>The model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item [...]
- },
- "emphasis.label.textStyle": {
- "desc": "<p>The font style of the label.</p>\n"
- },
- "emphasis.label.textStyle.color": {
- "desc": "<p>The Color of the text.</p>\n"
- },
- "emphasis.label.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "emphasis.label.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "emphasis.label.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "emphasis.label.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "emphasis.label.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "data": {
- "desc": "<p>The data array of scatter3D. Each item in the array is a piece of data. Usually, this data stores each attribute/dimension of the data in an array. As Follows:</p>\n<pre><code class=\"lang-ts\">data: [\n [[12, 14, 10], [34, 50, 15], [56, 30, 20], [10, 15, 12], [23, 10, 14]]\n]\n</code></pre>\n<p>For each item in the array：</p>\n<ol>\n<li>In <a href=\"#grid3D\">grid3D</a> ,the first three values of each item are<code class=\"codespan\">x</code>, <code class=\"codespan\" [...]
- },
- "blendMode": {
- "desc": "<p>Sets the type of compositing operation to apply when drawing a new shape. </p>\n<p>Currently supporting <code class=\"codespan\">'source-over'</code>, <code class=\"codespan\">'lighter'</code>. The default is <code class=\"codespan\">'source-over'</code> mode is blended by alpha. The <code class=\"codespan\">'lighter'</code> is overlap mode. In this mode, the area where the number of graphics is concentrated can be highlighted by the overla [...]
- },
- "zlevel": {
- "desc": "<p>The layer in which the component is located.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and [...]
- },
- "silent": {
- "desc": "<p>Whether the graph doesn`t respond and triggers a mouse event. The default is false, which is to respond to and trigger mouse events.</p>\n"
- },
- "animation": {
- "desc": "<p>Whether to enable animation.</p>\n"
- },
- "animationDurationUpdate": {
- "desc": "<p>The duration time for update the transition animation.</p>\n"
- },
- "animationEasingUpdate": {
- "desc": "<p>The easing effect for update transition animation.</p>\n"
- }
-}
\ No newline at end of file
+{"name":{"desc":"<p>Series name used for displaying in <a href=\"https://echarts.apache.org/zh/option.html#tooltip\" target=\"_blank\">tooltip</a> and filtering with <a href=\"https://echarts.apache.org/zh/option.html#legend\" target=\"_blank\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"coordinateSystem":{"desc":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class=\"codespan\">'cartesian3D [...]
\ No newline at end of file
diff --git a/en/documents/option-gl-parts/option-gl.series-scatterGL.js b/en/documents/option-gl-parts/option-gl.series-scatterGL.js
index c5e8ca23..bfd9c78e 100644
--- a/en/documents/option-gl-parts/option-gl.series-scatterGL.js
+++ b/en/documents/option-gl-parts/option-gl.series-scatterGL.js
@@ -1,65 +1 @@
-window.__EC_DOC_option_gl_series_scatterGL = {
- "name": {
- "desc": "<p>Series name used for displaying in <a href=\"https://echarts.apache.org/zh/option.html#tooltip\" target=\"_blank\">tooltip</a> and filtering with <a href=\"https://echarts.apache.org/zh/option.html#legend\" target=\"_blank\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"
- },
- "coordinateSystem": {
- "desc": "<p>The coordinate system used.</p>\n<p>Same as <a href=\"https://echarts.apache.org/en/option.html#series-scatter.coordinateSystem\" target=\"_blank\">scatter.coordinateSystem</a></p>\n"
- },
- "symbol": {
- "desc": "<p>The shape of the scatter. The default is a circle.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">'circle'</code>, <code class=\"codespan\">'rect'</code>, <code class=\"codespan\">'roundRect'</code>, <code class=\"codespan\">'triangle'</code>, <code class=\"codespan\">'diamond'</code>, <code class=\"codespan\">'pin'</code>, <code class=\"codespan\">'arrow'</code>, <code class=\"codespan\"> [...]
- },
- "symbolSize": {
- "desc": "<p> symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-ts\">(value: Array|number, params: Object) [...]
- },
- "itemStyle": {
- "desc": "<p>Sets the style of scatter</p>\n"
- },
- "itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "itemStyle.borderWidth": {
- "desc": "<p>Sets the width of the border.</p>\n"
- },
- "itemStyle.borderColor": {
- "desc": "<p>Sets the color of the border.</p>\n"
- },
- "data": {
- "desc": "<p>The data array of scatter.</p>\n<p>The data format is the same as <a href=\"https://echarts.apache.org/en/option.html#series-scatter.data\" target=\"_blank\">scatter.data</a></p>\n"
- },
- "data.name": {
- "desc": "<p>The name of the data item.</p>\n"
- },
- "data.value": {
- "desc": "<p>Data item value</p>\n"
- },
- "data.itemStyle": {
- "desc": "<p>The style of a single data graphic.</p>\n"
- },
- "data.itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "data.itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "data.itemStyle.borderWidth": {
- "desc": "<p>Sets the width of the border.</p>\n"
- },
- "data.itemStyle.borderColor": {
- "desc": "<p>Sets the color of the border.</p>\n"
- },
- "blendMode": {
- "desc": "<p>Sets the type of compositing operation to apply when drawing a new shape. </p>\n<p>Currently supporting <code class=\"codespan\">'source-over'</code>, <code class=\"codespan\">'lighter'</code>. The default is <code class=\"codespan\">'source-over'</code> mode is blended by alpha. The <code class=\"codespan\">'lighter'</code> is overlap mode. In this mode, the area where the number of graphics is concentrated can be highlighted by the overla [...]
- },
- "zlevel": {
- "desc": "<p>The layer in which the component is located.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and [...]
- },
- "progressiveThreshold": {
- "desc": "<p>Enable progressive rendering thresholds, progressive rendering can be loading the screen without blocking.</p>\n"
- },
- "progressive": {
- "desc": "<p>Progressively render the amount of data per render.</p>\n"
- }
-}
\ No newline at end of file
+window.__EC_DOC_option_gl_series_scatterGL = {"name":{"desc":"<p>Series name used for displaying in <a href=\"https://echarts.apache.org/zh/option.html#tooltip\" target=\"_blank\">tooltip</a> and filtering with <a href=\"https://echarts.apache.org/zh/option.html#legend\" target=\"_blank\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"coordinateSystem":{"desc":"<p>The coordinate system used.</p>\n<p>Same as <a href=\"https://echart [...]
\ No newline at end of file
diff --git a/en/documents/option-gl-parts/option-gl.series-scatterGL.json b/en/documents/option-gl-parts/option-gl.series-scatterGL.json
index 00d011d3..b966b0d4 100644
--- a/en/documents/option-gl-parts/option-gl.series-scatterGL.json
+++ b/en/documents/option-gl-parts/option-gl.series-scatterGL.json
@@ -1,65 +1 @@
-{
- "name": {
- "desc": "<p>Series name used for displaying in <a href=\"https://echarts.apache.org/zh/option.html#tooltip\" target=\"_blank\">tooltip</a> and filtering with <a href=\"https://echarts.apache.org/zh/option.html#legend\" target=\"_blank\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"
- },
- "coordinateSystem": {
- "desc": "<p>The coordinate system used.</p>\n<p>Same as <a href=\"https://echarts.apache.org/en/option.html#series-scatter.coordinateSystem\" target=\"_blank\">scatter.coordinateSystem</a></p>\n"
- },
- "symbol": {
- "desc": "<p>The shape of the scatter. The default is a circle.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">'circle'</code>, <code class=\"codespan\">'rect'</code>, <code class=\"codespan\">'roundRect'</code>, <code class=\"codespan\">'triangle'</code>, <code class=\"codespan\">'diamond'</code>, <code class=\"codespan\">'pin'</code>, <code class=\"codespan\">'arrow'</code>, <code class=\"codespan\"> [...]
- },
- "symbolSize": {
- "desc": "<p> symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-ts\">(value: Array|number, params: Object) [...]
- },
- "itemStyle": {
- "desc": "<p>Sets the style of scatter</p>\n"
- },
- "itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "itemStyle.borderWidth": {
- "desc": "<p>Sets the width of the border.</p>\n"
- },
- "itemStyle.borderColor": {
- "desc": "<p>Sets the color of the border.</p>\n"
- },
- "data": {
- "desc": "<p>The data array of scatter.</p>\n<p>The data format is the same as <a href=\"https://echarts.apache.org/en/option.html#series-scatter.data\" target=\"_blank\">scatter.data</a></p>\n"
- },
- "data.name": {
- "desc": "<p>The name of the data item.</p>\n"
- },
- "data.value": {
- "desc": "<p>Data item value</p>\n"
- },
- "data.itemStyle": {
- "desc": "<p>The style of a single data graphic.</p>\n"
- },
- "data.itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "data.itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "data.itemStyle.borderWidth": {
- "desc": "<p>Sets the width of the border.</p>\n"
- },
- "data.itemStyle.borderColor": {
- "desc": "<p>Sets the color of the border.</p>\n"
- },
- "blendMode": {
- "desc": "<p>Sets the type of compositing operation to apply when drawing a new shape. </p>\n<p>Currently supporting <code class=\"codespan\">'source-over'</code>, <code class=\"codespan\">'lighter'</code>. The default is <code class=\"codespan\">'source-over'</code> mode is blended by alpha. The <code class=\"codespan\">'lighter'</code> is overlap mode. In this mode, the area where the number of graphics is concentrated can be highlighted by the overla [...]
- },
- "zlevel": {
- "desc": "<p>The layer in which the component is located.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and [...]
- },
- "progressiveThreshold": {
- "desc": "<p>Enable progressive rendering thresholds, progressive rendering can be loading the screen without blocking.</p>\n"
- },
- "progressive": {
- "desc": "<p>Progressively render the amount of data per render.</p>\n"
- }
-}
\ No newline at end of file
+{"name":{"desc":"<p>Series name used for displaying in <a href=\"https://echarts.apache.org/zh/option.html#tooltip\" target=\"_blank\">tooltip</a> and filtering with <a href=\"https://echarts.apache.org/zh/option.html#legend\" target=\"_blank\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"coordinateSystem":{"desc":"<p>The coordinate system used.</p>\n<p>Same as <a href=\"https://echarts.apache.org/en/option.html#series-scatter.co [...]
\ No newline at end of file
diff --git a/en/documents/option-gl-parts/option-gl.series-surface.js b/en/documents/option-gl-parts/option-gl.series-surface.js
index 144543b3..c5447adb 100644
--- a/en/documents/option-gl-parts/option-gl.series-surface.js
+++ b/en/documents/option-gl-parts/option-gl.series-surface.js
@@ -1,194 +1 @@
-window.__EC_DOC_option_gl_series_surface = {
- "name": {
- "desc": "<p>Series name used for displaying in <a href=\"https://echarts.apache.org/zh/option.html#tooltip\" target=\"_blank\">tooltip</a> and filtering with <a href=\"https://echarts.apache.org/zh/option.html#legend\" target=\"_blank\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"
- },
- "coordinateSystem": {
- "desc": "<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class=\"codespan\">'cartesian3D'</code></p>\n<p> Use a 3D rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n"
- },
- "grid3DIndex": {
- "desc": "<p>Use the index of the <a href=\"#grid3D\">grid3D</a> component. The first <a href=\"#grid3D\">grid3D</a> component is used by default.</p>\n"
- },
- "parametric": {
- "desc": "<p>Whether it is a parametric surface.</p>\n"
- },
- "wireframe": {
- "desc": "<p>The wireframe of the surface.</p>\n"
- },
- "wireframe.show": {
- "desc": "<p>Whether to display wireframe. Default is Display.</p>\n"
- },
- "wireframe.lineStyle": {
- "desc": "<p>The style of the wireframe.</p>\n"
- },
- "wireframe.lineStyle.color": {
- "desc": "<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "wireframe.lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "wireframe.lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "equation": {
- "desc": "<p>The function expression of the surface. If you need to display a function surface, you can set the function expression by <a href=\"#series-surface.equation\">equation</a> without setting <a href=\"#series-surface.data\">data</a>. For example, the ripple effect can be simulated by the following function.</p>\n<pre><code class=\"lang-ts\">equation: {\n x: {\n step: 0.1,\n min: -3,\n max: 3,\n },\n y: {\n step: 0.1,\n min: -3,\n [...]
- },
- "equation.x": {
- "desc": "<p>Independent variable x.</p>\n"
- },
- "equation.x.step": {
- "desc": "<p>The step size of x.</p>\n"
- },
- "equation.x.min": {
- "desc": "<p>The minimum value of x.</p>\n"
- },
- "equation.x.max": {
- "desc": "<p>The maximum value of x.</p>\n"
- },
- "equation.y": {
- "desc": "<p>The independent variable y.</p>\n"
- },
- "equation.y.step": {
- "desc": "<p>The step size of x.</p>\n"
- },
- "equation.y.min": {
- "desc": "<p>The minimum value of y.</p>\n"
- },
- "equation.y.max": {
- "desc": "<p>The maximum value of y.</p>\n"
- },
- "equation.z": {
- "desc": "<p>The dependent variable z.</p>\n<p>z is a function for <a href=\"#series-surface.equation.x\">x</a>, <a href=\"#series-surface.equation.y\">y</a>.</p>\n<pre><code class=\"lang-ts\">(x: number, y: number) => number\n</code></pre>\n"
- },
- "parametricEquation": {
- "desc": "<p>The [parameter equation] of the surface (<a href=\"https://zh.wikipedia.org/wiki/%E5%8F%83%E6%95%B8%E6%96%B9%E7%A8%8B)\" target=\"_blank\">https://zh.wikipedia.org/wiki/%E5%8F%83%E6%95%B8%E6%96%B9%E7%A8%8B)</a>. When <a href=\"#series-surface.data\">data</a> is not set, the parameter parameter equation can be declared by <a href=\"#series-surface.equation\">parametricEquation</a>. Valid when <a href=\"#series-surface\">parametric</a> is <code class=\"codespan\">true</code [...]
- },
- "parametricEquation.u": {
- "desc": "<p>The argument u.</p>\n"
- },
- "parametricEquation.u.step": {
- "desc": "<p>The step size of u.</p>\n"
- },
- "parametricEquation.u.min": {
- "desc": "<p>The minimum value of u.</p>\n"
- },
- "parametricEquation.u.max": {
- "desc": "<p>The maximum value of u.</p>\n"
- },
- "parametricEquation.v": {
- "desc": "<p>Independent variable v.</p>\n"
- },
- "parametricEquation.v.step": {
- "desc": "<p>The step size of v.</p>\n"
- },
- "parametricEquation.v.min": {
- "desc": "<p>The minimum value of v.</p>\n"
- },
- "parametricEquation.v.max": {
- "desc": "<p>The maximum value of v.</p>\n"
- },
- "parametricEquation.x": {
- "desc": "<p>x is a function for <a href=\"#series-surface.equation.u\">u</a>, <a href=\"#series-surface.equation.v\">v</a>.</p>\n<pre><code class=\"lang-ts\">(u: number, v: number) => number\n</code></pre>\n"
- },
- "parametricEquation.y": {
- "desc": "<p>y is a function for <a href=\"#series-surface.equation.u\">u</a>, <a href=\"#series-surface.equation.v\">v</a>.</p>\n<pre><code class=\"lang-ts\">(u: number, v: number) => number\n</code></pre>\n"
- },
- "parametricEquation.z": {
- "desc": "<p>z is a function for <a href=\"#series-surface.equation.u\">u</a>, <a href=\"#series-surface.equation.v\">v</a>.</p>\n<pre><code class=\"lang-ts\">(u: number, v: number) => number\n</code></pre>\n"
- },
- "itemStyle": {
- "desc": "<p>The color, opacity, and other styles of the surface.</p>\n"
- },
- "itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "data": {
- "desc": "<p>The data array of the surface.</p>\n<p>The data is an array of linear stores containing multiply <code class=\"codespan\">X vertices</code> by <code class=\"codespan\">Y vertices</code> data. A 5 x 5 surface has a total of 25 vertices, and the index of the data in the array is as follows</p>\n<p><img width=\"400\" height=\"auto\" src=\"documents/asset/gl/img/surface-index.png\"></p>\n<p>The data used in the above figure:</p>\n<pre><code class=\"lang-ts\">data: [\n [-1, [...]
- },
- "data.name": {
- "desc": "<p>The name of the data item.</p>\n"
- },
- "data.value": {
- "desc": "<p>Data item value.</p>\n"
- },
- "data.itemStyle": {
- "desc": "<p>The style setting for a single data item.</p>\n"
- },
- "data.itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "data.itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "shading": {
- "desc": "<p>The coloring effect of 3D graphics in surface. The following three coloring methods are supported in echarts-gl:</p>\n<ul>\n<li><p><code class=\"codespan\">'color'</code>\nOnly display colors, not affected by other factors such as lighting.</p>\n</li>\n<li><p><code class=\"codespan\">'lambert'</code>\nThrough the classic [lambert] coloring, can express the light and dark that the light shows.</p>\n</li>\n<li><p><code class=\"codespan\">'realistic'< [...]
- },
- "realisticMaterial": {
- "desc": "<p>The configuration item of the realistic material is valid when <a href=\"#series-surface.shading\">shading</a> is <code class=\"codespan\">'realistic'</code>.</p>\n"
- },
- "realisticMaterial.detailTexture": {
- "desc": "<p>The texture map of the material detail.</p>\n"
- },
- "realisticMaterial.textureTiling": {
- "desc": "<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n"
- },
- "realisticMaterial.textureOffset": {
- "desc": "<p>The displacement of the texture detail texture.</p>\n"
- },
- "realisticMaterial.roughness": {
- "desc": "<p>The <code class=\"codespan\">roughness</code> attribute is used to indicate the roughness of the material, <code class=\"codespan\">0</code> is completely smooth, <code class=\"codespan\">1</code> is completely rough, and the middle value is between the two.</p>\n<p>The following images show the effect of <code class=\"codespan\">roughness</code> in <a href=\"#globe\"><code class=\"codespan\">globe</code></a> <code class=\"codespan\">0.2</code> (smooth) and <code class=\" [...]
- },
- "realisticMaterial.metalness": {
- "desc": "<p>The <code class=\"codespan\">metalness</code> attribute is used to indicate whether the material is metal or non-metal, <code class=\"codespan\">0</code> is non-metallic, <code class=\"codespan\">1</code> is metal, and the middle value is between the two. Usually set to <code class=\"codespan\">0</code> and <code class=\"codespan\">1</code> to meet most of the scenes.</p>\n<p>The picture below show the difference between `metal' and '0' in <a href=\"#globe\">g [...]
- },
- "realisticMaterial.roughnessAdjust": {
- "desc": "<p>Roughness adjustment is useful when using roughness map. The overall roughness of the texture can be adjusted. The default is <code class=\"codespan\">0.5</code>, <code class=\"codespan\">0</code> is completely smooth, <code class=\"codespan\">1</code> is completely rough.</p>\n"
- },
- "realisticMaterial.metalnessAdjust": {
- "desc": "<p>Metalness adjustment is useful when using metalness maps. The overall metallicity of the texture can be adjusted. The default is <code class=\"codespan\">0.5</code>, <code class=\"codespan\">0</code> is non-metal, <code class=\"codespan\">1</code> is metal.</p>\n"
- },
- "realisticMaterial.normalTexture": {
- "desc": "<p>Normal map of material details.</p>\n<p>Using normal maps, you can still display rich shades of detail on the surface of the object with fewer vertices.</p>\n"
- },
- "lambertMaterial": {
- "desc": "<p>The configuration item of the lambert material is valid when <a href=\"#series-surface.shading\">shading</a> is <code class=\"codespan\">'lambert'</code>.</p>\n"
- },
- "lambertMaterial.detailTexture": {
- "desc": "<p>The texture map of the material detail.</p>\n"
- },
- "lambertMaterial.textureTiling": {
- "desc": "<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n"
- },
- "lambertMaterial.textureOffset": {
- "desc": "<p>The displacement of the texture detail texture.</p>\n"
- },
- "colorMaterial": {
- "desc": "<p>The color material related configuration item is valid when <a href=\"#series-surface.shading\">shading</a> is <code class=\"codespan\">'color'</code>.</p>\n"
- },
- "colorMaterial.detailTexture": {
- "desc": "<p>The texture map of the material detail.</p>\n"
- },
- "colorMaterial.textureTiling": {
- "desc": "<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n"
- },
- "colorMaterial.textureOffset": {
- "desc": "<p>The displacement of the texture detail texture.</p>\n"
- },
- "zlevel": {
- "desc": "<p>The layer in which the component is located.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and [...]
- },
- "silent": {
- "desc": "<p>Whether the graph doesn`t respond and triggers a mouse event. The default is false, which is to respond to and trigger mouse events.</p>\n"
- },
- "animation": {
- "desc": "<p>Whether to enable animation.</p>\n"
- },
- "animationDurationUpdate": {
- "desc": "<p>The duration time for update the transition animation.</p>\n"
- },
- "animationEasingUpdate": {
- "desc": "<p>The easing effect for update transition animation.</p>\n"
- }
-}
\ No newline at end of file
+window.__EC_DOC_option_gl_series_surface = {"name":{"desc":"<p>Series name used for displaying in <a href=\"https://echarts.apache.org/zh/option.html#tooltip\" target=\"_blank\">tooltip</a> and filtering with <a href=\"https://echarts.apache.org/zh/option.html#legend\" target=\"_blank\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"coordinateSystem":{"desc":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li>< [...]
\ No newline at end of file
diff --git a/en/documents/option-gl-parts/option-gl.series-surface.json b/en/documents/option-gl-parts/option-gl.series-surface.json
index b369a352..fcf0831a 100644
--- a/en/documents/option-gl-parts/option-gl.series-surface.json
+++ b/en/documents/option-gl-parts/option-gl.series-surface.json
@@ -1,194 +1 @@
-{
- "name": {
- "desc": "<p>Series name used for displaying in <a href=\"https://echarts.apache.org/zh/option.html#tooltip\" target=\"_blank\">tooltip</a> and filtering with <a href=\"https://echarts.apache.org/zh/option.html#legend\" target=\"_blank\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"
- },
- "coordinateSystem": {
- "desc": "<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class=\"codespan\">'cartesian3D'</code></p>\n<p> Use a 3D rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n"
- },
- "grid3DIndex": {
- "desc": "<p>Use the index of the <a href=\"#grid3D\">grid3D</a> component. The first <a href=\"#grid3D\">grid3D</a> component is used by default.</p>\n"
- },
- "parametric": {
- "desc": "<p>Whether it is a parametric surface.</p>\n"
- },
- "wireframe": {
- "desc": "<p>The wireframe of the surface.</p>\n"
- },
- "wireframe.show": {
- "desc": "<p>Whether to display wireframe. Default is Display.</p>\n"
- },
- "wireframe.lineStyle": {
- "desc": "<p>The style of the wireframe.</p>\n"
- },
- "wireframe.lineStyle.color": {
- "desc": "<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "wireframe.lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "wireframe.lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "equation": {
- "desc": "<p>The function expression of the surface. If you need to display a function surface, you can set the function expression by <a href=\"#series-surface.equation\">equation</a> without setting <a href=\"#series-surface.data\">data</a>. For example, the ripple effect can be simulated by the following function.</p>\n<pre><code class=\"lang-ts\">equation: {\n x: {\n step: 0.1,\n min: -3,\n max: 3,\n },\n y: {\n step: 0.1,\n min: -3,\n [...]
- },
- "equation.x": {
- "desc": "<p>Independent variable x.</p>\n"
- },
- "equation.x.step": {
- "desc": "<p>The step size of x.</p>\n"
- },
- "equation.x.min": {
- "desc": "<p>The minimum value of x.</p>\n"
- },
- "equation.x.max": {
- "desc": "<p>The maximum value of x.</p>\n"
- },
- "equation.y": {
- "desc": "<p>The independent variable y.</p>\n"
- },
- "equation.y.step": {
- "desc": "<p>The step size of x.</p>\n"
- },
- "equation.y.min": {
- "desc": "<p>The minimum value of y.</p>\n"
- },
- "equation.y.max": {
- "desc": "<p>The maximum value of y.</p>\n"
- },
- "equation.z": {
- "desc": "<p>The dependent variable z.</p>\n<p>z is a function for <a href=\"#series-surface.equation.x\">x</a>, <a href=\"#series-surface.equation.y\">y</a>.</p>\n<pre><code class=\"lang-ts\">(x: number, y: number) => number\n</code></pre>\n"
- },
- "parametricEquation": {
- "desc": "<p>The [parameter equation] of the surface (<a href=\"https://zh.wikipedia.org/wiki/%E5%8F%83%E6%95%B8%E6%96%B9%E7%A8%8B)\" target=\"_blank\">https://zh.wikipedia.org/wiki/%E5%8F%83%E6%95%B8%E6%96%B9%E7%A8%8B)</a>. When <a href=\"#series-surface.data\">data</a> is not set, the parameter parameter equation can be declared by <a href=\"#series-surface.equation\">parametricEquation</a>. Valid when <a href=\"#series-surface\">parametric</a> is <code class=\"codespan\">true</code [...]
- },
- "parametricEquation.u": {
- "desc": "<p>The argument u.</p>\n"
- },
- "parametricEquation.u.step": {
- "desc": "<p>The step size of u.</p>\n"
- },
- "parametricEquation.u.min": {
- "desc": "<p>The minimum value of u.</p>\n"
- },
- "parametricEquation.u.max": {
- "desc": "<p>The maximum value of u.</p>\n"
- },
- "parametricEquation.v": {
- "desc": "<p>Independent variable v.</p>\n"
- },
- "parametricEquation.v.step": {
- "desc": "<p>The step size of v.</p>\n"
- },
- "parametricEquation.v.min": {
- "desc": "<p>The minimum value of v.</p>\n"
- },
- "parametricEquation.v.max": {
- "desc": "<p>The maximum value of v.</p>\n"
- },
- "parametricEquation.x": {
- "desc": "<p>x is a function for <a href=\"#series-surface.equation.u\">u</a>, <a href=\"#series-surface.equation.v\">v</a>.</p>\n<pre><code class=\"lang-ts\">(u: number, v: number) => number\n</code></pre>\n"
- },
- "parametricEquation.y": {
- "desc": "<p>y is a function for <a href=\"#series-surface.equation.u\">u</a>, <a href=\"#series-surface.equation.v\">v</a>.</p>\n<pre><code class=\"lang-ts\">(u: number, v: number) => number\n</code></pre>\n"
- },
- "parametricEquation.z": {
- "desc": "<p>z is a function for <a href=\"#series-surface.equation.u\">u</a>, <a href=\"#series-surface.equation.v\">v</a>.</p>\n<pre><code class=\"lang-ts\">(u: number, v: number) => number\n</code></pre>\n"
- },
- "itemStyle": {
- "desc": "<p>The color, opacity, and other styles of the surface.</p>\n"
- },
- "itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "data": {
- "desc": "<p>The data array of the surface.</p>\n<p>The data is an array of linear stores containing multiply <code class=\"codespan\">X vertices</code> by <code class=\"codespan\">Y vertices</code> data. A 5 x 5 surface has a total of 25 vertices, and the index of the data in the array is as follows</p>\n<p><img width=\"400\" height=\"auto\" src=\"documents/asset/gl/img/surface-index.png\"></p>\n<p>The data used in the above figure:</p>\n<pre><code class=\"lang-ts\">data: [\n [-1, [...]
- },
- "data.name": {
- "desc": "<p>The name of the data item.</p>\n"
- },
- "data.value": {
- "desc": "<p>Data item value.</p>\n"
- },
- "data.itemStyle": {
- "desc": "<p>The style setting for a single data item.</p>\n"
- },
- "data.itemStyle.color": {
- "desc": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "data.itemStyle.opacity": {
- "desc": "<p>The opacity of the graphic.</p>\n"
- },
- "shading": {
- "desc": "<p>The coloring effect of 3D graphics in surface. The following three coloring methods are supported in echarts-gl:</p>\n<ul>\n<li><p><code class=\"codespan\">'color'</code>\nOnly display colors, not affected by other factors such as lighting.</p>\n</li>\n<li><p><code class=\"codespan\">'lambert'</code>\nThrough the classic [lambert] coloring, can express the light and dark that the light shows.</p>\n</li>\n<li><p><code class=\"codespan\">'realistic'< [...]
- },
- "realisticMaterial": {
- "desc": "<p>The configuration item of the realistic material is valid when <a href=\"#series-surface.shading\">shading</a> is <code class=\"codespan\">'realistic'</code>.</p>\n"
- },
- "realisticMaterial.detailTexture": {
- "desc": "<p>The texture map of the material detail.</p>\n"
- },
- "realisticMaterial.textureTiling": {
- "desc": "<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n"
- },
- "realisticMaterial.textureOffset": {
- "desc": "<p>The displacement of the texture detail texture.</p>\n"
- },
- "realisticMaterial.roughness": {
- "desc": "<p>The <code class=\"codespan\">roughness</code> attribute is used to indicate the roughness of the material, <code class=\"codespan\">0</code> is completely smooth, <code class=\"codespan\">1</code> is completely rough, and the middle value is between the two.</p>\n<p>The following images show the effect of <code class=\"codespan\">roughness</code> in <a href=\"#globe\"><code class=\"codespan\">globe</code></a> <code class=\"codespan\">0.2</code> (smooth) and <code class=\" [...]
- },
- "realisticMaterial.metalness": {
- "desc": "<p>The <code class=\"codespan\">metalness</code> attribute is used to indicate whether the material is metal or non-metal, <code class=\"codespan\">0</code> is non-metallic, <code class=\"codespan\">1</code> is metal, and the middle value is between the two. Usually set to <code class=\"codespan\">0</code> and <code class=\"codespan\">1</code> to meet most of the scenes.</p>\n<p>The picture below show the difference between `metal' and '0' in <a href=\"#globe\">g [...]
- },
- "realisticMaterial.roughnessAdjust": {
- "desc": "<p>Roughness adjustment is useful when using roughness map. The overall roughness of the texture can be adjusted. The default is <code class=\"codespan\">0.5</code>, <code class=\"codespan\">0</code> is completely smooth, <code class=\"codespan\">1</code> is completely rough.</p>\n"
- },
- "realisticMaterial.metalnessAdjust": {
- "desc": "<p>Metalness adjustment is useful when using metalness maps. The overall metallicity of the texture can be adjusted. The default is <code class=\"codespan\">0.5</code>, <code class=\"codespan\">0</code> is non-metal, <code class=\"codespan\">1</code> is metal.</p>\n"
- },
- "realisticMaterial.normalTexture": {
- "desc": "<p>Normal map of material details.</p>\n<p>Using normal maps, you can still display rich shades of detail on the surface of the object with fewer vertices.</p>\n"
- },
- "lambertMaterial": {
- "desc": "<p>The configuration item of the lambert material is valid when <a href=\"#series-surface.shading\">shading</a> is <code class=\"codespan\">'lambert'</code>.</p>\n"
- },
- "lambertMaterial.detailTexture": {
- "desc": "<p>The texture map of the material detail.</p>\n"
- },
- "lambertMaterial.textureTiling": {
- "desc": "<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n"
- },
- "lambertMaterial.textureOffset": {
- "desc": "<p>The displacement of the texture detail texture.</p>\n"
- },
- "colorMaterial": {
- "desc": "<p>The color material related configuration item is valid when <a href=\"#series-surface.shading\">shading</a> is <code class=\"codespan\">'color'</code>.</p>\n"
- },
- "colorMaterial.detailTexture": {
- "desc": "<p>The texture map of the material detail.</p>\n"
- },
- "colorMaterial.textureTiling": {
- "desc": "<p>Tiles the texture map of the material detail. The default is <code class=\"codespan\">1</code>, which means that the stretch is filled. When greater than <code class=\"codespan\">1</code>, the number indicates how many times the texture is tiled.</p>\n<p><strong>Note:</strong> The use of tiling requires the <code class=\"codespan\">detail texture</code> height and width to be 2 to the power of n. For example, 512x512, if it is a 200x200 texture, you cannot use tiling.</p>\n"
- },
- "colorMaterial.textureOffset": {
- "desc": "<p>The displacement of the texture detail texture.</p>\n"
- },
- "zlevel": {
- "desc": "<p>The layer in which the component is located.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and [...]
- },
- "silent": {
- "desc": "<p>Whether the graph doesn`t respond and triggers a mouse event. The default is false, which is to respond to and trigger mouse events.</p>\n"
- },
- "animation": {
- "desc": "<p>Whether to enable animation.</p>\n"
- },
- "animationDurationUpdate": {
- "desc": "<p>The duration time for update the transition animation.</p>\n"
- },
- "animationEasingUpdate": {
- "desc": "<p>The easing effect for update transition animation.</p>\n"
- }
-}
\ No newline at end of file
+{"name":{"desc":"<p>Series name used for displaying in <a href=\"https://echarts.apache.org/zh/option.html#tooltip\" target=\"_blank\">tooltip</a> and filtering with <a href=\"https://echarts.apache.org/zh/option.html#legend\" target=\"_blank\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"coordinateSystem":{"desc":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class=\"codespan\">'cartesian3D [...]
\ No newline at end of file
diff --git a/en/documents/option-gl-parts/option-gl.xAxis3D.js b/en/documents/option-gl-parts/option-gl.xAxis3D.js
index 139052bc..57baebc7 100644
--- a/en/documents/option-gl-parts/option-gl.xAxis3D.js
+++ b/en/documents/option-gl-parts/option-gl.xAxis3D.js
@@ -1,233 +1 @@
-window.__EC_DOC_option_gl_xAxis3D = {
- "show": {
- "desc": "<p>Whether to display the x-axis.</p>\n"
- },
- "name": {
- "desc": "<p>The name of the axis.</p>\n"
- },
- "grid3DIndex": {
- "desc": "<p>The index of the <a href=\"#grid3D\">grid3D</a> component used by the axis. The default is to use the first <a href=\"#grid3D\">grid3D</a> component.</p>\n"
- },
- "nameTextStyle": {
- "desc": "<p>Text style of axis name.</p>\n"
- },
- "nameTextStyle.color": {
- "desc": "<p>Color of axis name uses <a href=\"#xAxis3D.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"
- },
- "nameTextStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "nameTextStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "nameTextStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "nameTextStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "nameTextStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "nameGap": {
- "desc": "<p>The gap between the axis name and axis line. Note the distance is in 3D space, not the screen pixel value.</p>\n"
- },
- "type": {
- "desc": "<p>The type of the axis.</p>\n<p>Optional:</p>\n<ul>\n<li><p><code class=\"codespan\">'value'</code>\n The value axis. Suitable for continuous data.</p>\n</li>\n<li><p><code class=\"codespan\">'category'</code>\n The category axis. Suitable for the discrete category data. For this type, the category data must be set through <a href=\"#xAxis3D.data\">data</a>.</p>\n</li>\n<li><p><code class=\"codespan\">'time'</code>\n The timeline. Suitable for the [...]
- },
- "min": {
- "desc": "<p>The minimum value of axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">'dataMin'</code> so that the minimum value on this axis is set to be the minimum label.</p>\n<p>It will be automatically computed to make sure the axis tick is equally distributed when not set.</p>\n<p>In the category axis, it can also be set as the ordinal number. For example, if a category axis has <code class=\"codespan\">data: ['categoryA', 'categoryB', [...]
- },
- "max": {
- "desc": "<p>The maximum value of the axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">'dataMax'</code> so that the minimum value on this axis is set to be the maximum label.</p>\n<p>It will be automatically computed to make sure the axis tick is equally distributed when not set.</p>\n<p>In the category axis, it can also be set as the ordinal number. For example, if a category axis has <code class=\"codespan\">data: ['categoryA', 'categoryB&# [...]
- },
- "scale": {
- "desc": "<p>It is available only in numerical axis, i.e., <a href=\"#xAxis3D.type\">type</a>: 'value'.</p>\n<p>It specifies whether not to contain zero position of axis compulsively. When it is set to be <code class=\"codespan\">true</code>, the axis may not contain zero position, which is useful in the scatter chart for both value axes.</p>\n<p>This configuration item is unavailable when the <a href=\"#xAxis3D.min\">min</a> and <a href=\"#xAxis3D.max\">max</a> are set.</p>\n"
- },
- "splitNumber": {
- "desc": "<p>The number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.</p>\n<p>This is unavailable for the category axis.</p>\n"
- },
- "minInterval": {
- "desc": "<p>Minimum gap between split lines.</p>\n<p>For example, it can be set to be <code class=\"codespan\">1</code> to make sure the axis label is shown as an integer.</p>\n<pre><code class=\"lang-ts\">{\n minInterval: 1\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#xAxis3D.type\">type</a> 'value' or 'time'.</p>\n"
- },
- "interval": {
- "desc": "<p>Compulsively set segmentation interval for axis.</p>\n<p>As <a href=\"#xAxis3D.splitNumber\">splitNumber</a> is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with <a href=\"#xAxis3D.min\">min</a> and <a href=\"#xAxis3D.max\">max</a> to compulsively set tickings. But in most cases, we do not suggest using this, out automatic calculation is enough for most situations.</p>\n<p>This is unavailable for [...]
- },
- "logBase": {
- "desc": "<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#xAxis3D.type\">type</a>: 'log'.</p>\n"
- },
- "data": {
- "desc": "<p>Category data, available in <a href=\"#xAxis3D.type\">type</a>: 'category' axis.</p>\n<p>If <a href=\"#xAxis3D.type\">type</a> is specified as <code class=\"codespan\">'category'</code>, but <code class=\"codespan\">axis.data</code> is not specified, <code class=\"codespan\">axis.data</code> will be auto collected from <a href=\"#series.data\">series.data</a>. It brings convenience, but we should notice that <code class=\"codespan\">axis.data</code> provid [...]
- },
- "data.value": {
- "desc": "<p>Name of a category.</p>\n"
- },
- "data.textStyle": {
- "desc": "<p>Text style of the category.</p>\n"
- },
- "data.textStyle.color": {
- "desc": "<p>The Color of the text.</p>\n"
- },
- "data.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "data.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "data.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "data.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "data.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n<p>The display interval of </p>\n"
- },
- "axisLine": {
- "desc": "<p>Settings related to axis line.</p>\n"
- },
- "axisLine.show": {
- "desc": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n"
- },
- "axisLine.interval": {
- "desc": "<p>axis scale label is valid in the category axis. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The [...]
- },
- "axisLine.lineStyle.color": {
- "desc": "<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "axisLine.lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "axisLine.lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "axisLabel": {
- "desc": "<p>Settings related to axis label.</p>\n"
- },
- "axisLabel.show": {
- "desc": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis label from appearing.</p>\n"
- },
- "axisLabel.margin": {
- "desc": "<p>The margin between the axis label and the axis line.</p>\n<p><strong>Note：</strong> This distance is three-dimensional space, not screen space.</p>\n"
- },
- "axisLabel.interval": {
- "desc": "<p>axis scale label is valid in the category axis. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The [...]
- },
- "axisLabel.textStyle.color": {
- "desc": "<p>Color of axis label is set to be <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class=\"lang-ts\">(val: string) => Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class=\"lang-ts\">textStyle: {\n color: function (value, index) {\n return value >= 0 ? 'green' : &# [...]
- },
- "axisLabel.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "axisLabel.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "axisLabel.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "axisLabel.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "axisLabel.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "axisTick": {
- "desc": "<p>Settings related to axis tick.</p>\n"
- },
- "axisTick.show": {
- "desc": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis tick from showing.</p>\n"
- },
- "axisTick.interval": {
- "desc": "<p>axis scale label is valid in the category axis. Defaults to the same as <a href=\"#.axisLabel.interval\">axisLabel.interval</a>. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, [...]
- },
- "axisTick.length": {
- "desc": "<p>The length of the axis tick.</p>\n"
- },
- "axisTick.lineStyle.color": {
- "desc": "<p>Color of axis label is set to be <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"
- },
- "axisTick.lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "axisTick.lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "splitLine": {
- "desc": "<p>Settings related to axis line.</p>\n"
- },
- "splitLine.show": {
- "desc": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n"
- },
- "splitLine.interval": {
- "desc": "<p>axis scale label is valid in the category axis. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The [...]
- },
- "splitLine.lineStyle.color": {
- "desc": "<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "splitLine.lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "splitLine.lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "splitArea": {
- "desc": "<p>Split area of axis in <a href=\"#grid\">grid</a> area.</p>\n"
- },
- "splitArea.show": {
- "desc": "<p>Set this to be <code class=\"codespan\">true</code> to show the splitArea.</p>\n"
- },
- "splitArea.interval": {
- "desc": "<p>Axis splitArea is valid in the category axis. Defaults to the same as <a href=\"#.axisLabel.interval\">axisLabel.interval</a>. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, i [...]
- },
- "splitArea.areaStyle": {
- "desc": "<p>Split area style.</p>\n"
- },
- "splitArea.areaStyle.color": {
- "desc": "<p>Color of the split area.\nThe split area color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.</p>\n"
- },
- "axisPointer": {
- "desc": "<p>Configurations for axis pointer.</p>\n"
- },
- "axisPointer.show": {
- "desc": "<p>Whether to display the axisPointer. Set this to be <code class=\"codespan\">true</code> to show the splitArea.</p>\n"
- },
- "axisPointer.lineStyle.color": {
- "desc": "<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "axisPointer.lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "axisPointer.lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "axisPointer.label": {
- "desc": "<p>The label of axisPointer.</p>\n"
- },
- "axisPointer.label.show": {
- "desc": "<p>Whether to display the label of axisPointer. Value axes are displayed by default, while category axes are not.</p>\n"
- },
- "axisPointer.label.formatter": {
- "desc": "<p>The formatter of the label. . The first parameter to the function is the value of the current axis. The second parameter to the function is an array of values for all axes.</p>\n<pre><code class=\"lang-ts\">(value: number, valueAll: Array) => string\n</code></pre>\n"
- },
- "axisPointer.label.margin": {
- "desc": "<p>Distance between label and axis.\nLike the scale label, this distance is a 3D space rather than a screen pixel.</p>\n"
- },
- "axisPointer.label.textStyle.color": {
- "desc": "<p>The Color of the text.</p>\n"
- },
- "axisPointer.label.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "axisPointer.label.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "axisPointer.label.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "axisPointer.label.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "axisPointer.label.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- }
-}
\ No newline at end of file
+window.__EC_DOC_option_gl_xAxis3D = {"show":{"desc":"<p>Whether to display the x-axis.</p>\n"},"name":{"desc":"<p>The name of the axis.</p>\n"},"grid3DIndex":{"desc":"<p>The index of the <a href=\"#grid3D\">grid3D</a> component used by the axis. The default is to use the first <a href=\"#grid3D\">grid3D</a> component.</p>\n"},"nameTextStyle":{"desc":"<p>Text style of axis name.</p>\n"},"nameTextStyle.color":{"desc":"<p>Color of axis name uses <a href=\"#xAxis3D.axisLine.lineStyle.color\" [...]
\ No newline at end of file
diff --git a/en/documents/option-gl-parts/option-gl.xAxis3D.json b/en/documents/option-gl-parts/option-gl.xAxis3D.json
index db1b9104..3dcca20a 100644
--- a/en/documents/option-gl-parts/option-gl.xAxis3D.json
+++ b/en/documents/option-gl-parts/option-gl.xAxis3D.json
@@ -1,233 +1 @@
-{
- "show": {
- "desc": "<p>Whether to display the x-axis.</p>\n"
- },
- "name": {
- "desc": "<p>The name of the axis.</p>\n"
- },
- "grid3DIndex": {
- "desc": "<p>The index of the <a href=\"#grid3D\">grid3D</a> component used by the axis. The default is to use the first <a href=\"#grid3D\">grid3D</a> component.</p>\n"
- },
- "nameTextStyle": {
- "desc": "<p>Text style of axis name.</p>\n"
- },
- "nameTextStyle.color": {
- "desc": "<p>Color of axis name uses <a href=\"#xAxis3D.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"
- },
- "nameTextStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "nameTextStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "nameTextStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "nameTextStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "nameTextStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "nameGap": {
- "desc": "<p>The gap between the axis name and axis line. Note the distance is in 3D space, not the screen pixel value.</p>\n"
- },
- "type": {
- "desc": "<p>The type of the axis.</p>\n<p>Optional:</p>\n<ul>\n<li><p><code class=\"codespan\">'value'</code>\n The value axis. Suitable for continuous data.</p>\n</li>\n<li><p><code class=\"codespan\">'category'</code>\n The category axis. Suitable for the discrete category data. For this type, the category data must be set through <a href=\"#xAxis3D.data\">data</a>.</p>\n</li>\n<li><p><code class=\"codespan\">'time'</code>\n The timeline. Suitable for the [...]
- },
- "min": {
- "desc": "<p>The minimum value of axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">'dataMin'</code> so that the minimum value on this axis is set to be the minimum label.</p>\n<p>It will be automatically computed to make sure the axis tick is equally distributed when not set.</p>\n<p>In the category axis, it can also be set as the ordinal number. For example, if a category axis has <code class=\"codespan\">data: ['categoryA', 'categoryB', [...]
- },
- "max": {
- "desc": "<p>The maximum value of the axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">'dataMax'</code> so that the minimum value on this axis is set to be the maximum label.</p>\n<p>It will be automatically computed to make sure the axis tick is equally distributed when not set.</p>\n<p>In the category axis, it can also be set as the ordinal number. For example, if a category axis has <code class=\"codespan\">data: ['categoryA', 'categoryB&# [...]
- },
- "scale": {
- "desc": "<p>It is available only in numerical axis, i.e., <a href=\"#xAxis3D.type\">type</a>: 'value'.</p>\n<p>It specifies whether not to contain zero position of axis compulsively. When it is set to be <code class=\"codespan\">true</code>, the axis may not contain zero position, which is useful in the scatter chart for both value axes.</p>\n<p>This configuration item is unavailable when the <a href=\"#xAxis3D.min\">min</a> and <a href=\"#xAxis3D.max\">max</a> are set.</p>\n"
- },
- "splitNumber": {
- "desc": "<p>The number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.</p>\n<p>This is unavailable for the category axis.</p>\n"
- },
- "minInterval": {
- "desc": "<p>Minimum gap between split lines.</p>\n<p>For example, it can be set to be <code class=\"codespan\">1</code> to make sure the axis label is shown as an integer.</p>\n<pre><code class=\"lang-ts\">{\n minInterval: 1\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#xAxis3D.type\">type</a> 'value' or 'time'.</p>\n"
- },
- "interval": {
- "desc": "<p>Compulsively set segmentation interval for axis.</p>\n<p>As <a href=\"#xAxis3D.splitNumber\">splitNumber</a> is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with <a href=\"#xAxis3D.min\">min</a> and <a href=\"#xAxis3D.max\">max</a> to compulsively set tickings. But in most cases, we do not suggest using this, out automatic calculation is enough for most situations.</p>\n<p>This is unavailable for [...]
- },
- "logBase": {
- "desc": "<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#xAxis3D.type\">type</a>: 'log'.</p>\n"
- },
- "data": {
- "desc": "<p>Category data, available in <a href=\"#xAxis3D.type\">type</a>: 'category' axis.</p>\n<p>If <a href=\"#xAxis3D.type\">type</a> is specified as <code class=\"codespan\">'category'</code>, but <code class=\"codespan\">axis.data</code> is not specified, <code class=\"codespan\">axis.data</code> will be auto collected from <a href=\"#series.data\">series.data</a>. It brings convenience, but we should notice that <code class=\"codespan\">axis.data</code> provid [...]
- },
- "data.value": {
- "desc": "<p>Name of a category.</p>\n"
- },
- "data.textStyle": {
- "desc": "<p>Text style of the category.</p>\n"
- },
- "data.textStyle.color": {
- "desc": "<p>The Color of the text.</p>\n"
- },
- "data.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "data.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "data.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "data.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "data.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n<p>The display interval of </p>\n"
- },
- "axisLine": {
- "desc": "<p>Settings related to axis line.</p>\n"
- },
- "axisLine.show": {
- "desc": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n"
- },
- "axisLine.interval": {
- "desc": "<p>axis scale label is valid in the category axis. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The [...]
- },
- "axisLine.lineStyle.color": {
- "desc": "<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "axisLine.lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "axisLine.lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "axisLabel": {
- "desc": "<p>Settings related to axis label.</p>\n"
- },
- "axisLabel.show": {
- "desc": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis label from appearing.</p>\n"
- },
- "axisLabel.margin": {
- "desc": "<p>The margin between the axis label and the axis line.</p>\n<p><strong>Note：</strong> This distance is three-dimensional space, not screen space.</p>\n"
- },
- "axisLabel.interval": {
- "desc": "<p>axis scale label is valid in the category axis. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The [...]
- },
- "axisLabel.textStyle.color": {
- "desc": "<p>Color of axis label is set to be <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class=\"lang-ts\">(val: string) => Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class=\"lang-ts\">textStyle: {\n color: function (value, index) {\n return value >= 0 ? 'green' : &# [...]
- },
- "axisLabel.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "axisLabel.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "axisLabel.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "axisLabel.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "axisLabel.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "axisTick": {
- "desc": "<p>Settings related to axis tick.</p>\n"
- },
- "axisTick.show": {
- "desc": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis tick from showing.</p>\n"
- },
- "axisTick.interval": {
- "desc": "<p>axis scale label is valid in the category axis. Defaults to the same as <a href=\"#.axisLabel.interval\">axisLabel.interval</a>. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, [...]
- },
- "axisTick.length": {
- "desc": "<p>The length of the axis tick.</p>\n"
- },
- "axisTick.lineStyle.color": {
- "desc": "<p>Color of axis label is set to be <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"
- },
- "axisTick.lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "axisTick.lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "splitLine": {
- "desc": "<p>Settings related to axis line.</p>\n"
- },
- "splitLine.show": {
- "desc": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n"
- },
- "splitLine.interval": {
- "desc": "<p>axis scale label is valid in the category axis. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The [...]
- },
- "splitLine.lineStyle.color": {
- "desc": "<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "splitLine.lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "splitLine.lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "splitArea": {
- "desc": "<p>Split area of axis in <a href=\"#grid\">grid</a> area.</p>\n"
- },
- "splitArea.show": {
- "desc": "<p>Set this to be <code class=\"codespan\">true</code> to show the splitArea.</p>\n"
- },
- "splitArea.interval": {
- "desc": "<p>Axis splitArea is valid in the category axis. Defaults to the same as <a href=\"#.axisLabel.interval\">axisLabel.interval</a>. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, i [...]
- },
- "splitArea.areaStyle": {
- "desc": "<p>Split area style.</p>\n"
- },
- "splitArea.areaStyle.color": {
- "desc": "<p>Color of the split area.\nThe split area color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.</p>\n"
- },
- "axisPointer": {
- "desc": "<p>Configurations for axis pointer.</p>\n"
- },
- "axisPointer.show": {
- "desc": "<p>Whether to display the axisPointer. Set this to be <code class=\"codespan\">true</code> to show the splitArea.</p>\n"
- },
- "axisPointer.lineStyle.color": {
- "desc": "<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "axisPointer.lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "axisPointer.lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "axisPointer.label": {
- "desc": "<p>The label of axisPointer.</p>\n"
- },
- "axisPointer.label.show": {
- "desc": "<p>Whether to display the label of axisPointer. Value axes are displayed by default, while category axes are not.</p>\n"
- },
- "axisPointer.label.formatter": {
- "desc": "<p>The formatter of the label. . The first parameter to the function is the value of the current axis. The second parameter to the function is an array of values for all axes.</p>\n<pre><code class=\"lang-ts\">(value: number, valueAll: Array) => string\n</code></pre>\n"
- },
- "axisPointer.label.margin": {
- "desc": "<p>Distance between label and axis.\nLike the scale label, this distance is a 3D space rather than a screen pixel.</p>\n"
- },
- "axisPointer.label.textStyle.color": {
- "desc": "<p>The Color of the text.</p>\n"
- },
- "axisPointer.label.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "axisPointer.label.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "axisPointer.label.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "axisPointer.label.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "axisPointer.label.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- }
-}
\ No newline at end of file
+{"show":{"desc":"<p>Whether to display the x-axis.</p>\n"},"name":{"desc":"<p>The name of the axis.</p>\n"},"grid3DIndex":{"desc":"<p>The index of the <a href=\"#grid3D\">grid3D</a> component used by the axis. The default is to use the first <a href=\"#grid3D\">grid3D</a> component.</p>\n"},"nameTextStyle":{"desc":"<p>Text style of axis name.</p>\n"},"nameTextStyle.color":{"desc":"<p>Color of axis name uses <a href=\"#xAxis3D.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by def [...]
\ No newline at end of file
diff --git a/en/documents/option-gl-parts/option-gl.yAxis3D.js b/en/documents/option-gl-parts/option-gl.yAxis3D.js
index 93eaaf7b..091b9a7f 100644
--- a/en/documents/option-gl-parts/option-gl.yAxis3D.js
+++ b/en/documents/option-gl-parts/option-gl.yAxis3D.js
@@ -1,233 +1 @@
-window.__EC_DOC_option_gl_yAxis3D = {
- "show": {
- "desc": "<p>Whether to display the y-axis.</p>\n"
- },
- "name": {
- "desc": "<p>The name of the axis.</p>\n"
- },
- "grid3DIndex": {
- "desc": "<p>The index of the <a href=\"#grid3D\">grid3D</a> component used by the axis. The default is to use the first <a href=\"#grid3D\">grid3D</a> component.</p>\n"
- },
- "nameTextStyle": {
- "desc": "<p>Text style of axis name.</p>\n"
- },
- "nameTextStyle.color": {
- "desc": "<p>Color of axis name uses <a href=\"#yAxis3D.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"
- },
- "nameTextStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "nameTextStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "nameTextStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "nameTextStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "nameTextStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "nameGap": {
- "desc": "<p>The gap between the axis name and axis line. Note the distance is in 3D space, not the screen pixel value.</p>\n"
- },
- "type": {
- "desc": "<p>The type of the axis.</p>\n<p>Optional:</p>\n<ul>\n<li><p><code class=\"codespan\">'value'</code>\n The value axis. Suitable for continuous data.</p>\n</li>\n<li><p><code class=\"codespan\">'category'</code>\n The category axis. Suitable for the discrete category data. For this type, the category data must be set through <a href=\"#yAxis3D.data\">data</a>.</p>\n</li>\n<li><p><code class=\"codespan\">'time'</code>\n The timeline. Suitable for the [...]
- },
- "min": {
- "desc": "<p>The minimum value of axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">'dataMin'</code> so that the minimum value on this axis is set to be the minimum label.</p>\n<p>It will be automatically computed to make sure the axis tick is equally distributed when not set.</p>\n<p>In the category axis, it can also be set as the ordinal number. For example, if a category axis has <code class=\"codespan\">data: ['categoryA', 'categoryB', [...]
- },
- "max": {
- "desc": "<p>The maximum value of the axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">'dataMax'</code> so that the minimum value on this axis is set to be the maximum label.</p>\n<p>It will be automatically computed to make sure the axis tick is equally distributed when not set.</p>\n<p>In the category axis, it can also be set as the ordinal number. For example, if a category axis has <code class=\"codespan\">data: ['categoryA', 'categoryB&# [...]
- },
- "scale": {
- "desc": "<p>It is available only in numerical axis, i.e., <a href=\"#yAxis3D.type\">type</a>: 'value'.</p>\n<p>It specifies whether not to contain zero position of axis compulsively. When it is set to be <code class=\"codespan\">true</code>, the axis may not contain zero position, which is useful in the scatter chart for both value axes.</p>\n<p>This configuration item is unavailable when the <a href=\"#yAxis3D.min\">min</a> and <a href=\"#yAxis3D.max\">max</a> are set.</p>\n"
- },
- "splitNumber": {
- "desc": "<p>The number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.</p>\n<p>This is unavailable for the category axis.</p>\n"
- },
- "minInterval": {
- "desc": "<p>Minimum gap between split lines.</p>\n<p>For example, it can be set to be <code class=\"codespan\">1</code> to make sure the axis label is shown as an integer.</p>\n<pre><code class=\"lang-ts\">{\n minInterval: 1\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#yAxis3D.type\">type</a> 'value' or 'time'.</p>\n"
- },
- "interval": {
- "desc": "<p>Compulsively set segmentation interval for axis.</p>\n<p>As <a href=\"#yAxis3D.splitNumber\">splitNumber</a> is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with <a href=\"#yAxis3D.min\">min</a> and <a href=\"#yAxis3D.max\">max</a> to compulsively set tickings. But in most cases, we do not suggest using this, out automatic calculation is enough for most situations.</p>\n<p>This is unavailable for [...]
- },
- "logBase": {
- "desc": "<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#yAxis3D.type\">type</a>: 'log'.</p>\n"
- },
- "data": {
- "desc": "<p>Category data, available in <a href=\"#yAxis3D.type\">type</a>: 'category' axis.</p>\n<p>If <a href=\"#yAxis3D.type\">type</a> is specified as <code class=\"codespan\">'category'</code>, but <code class=\"codespan\">axis.data</code> is not specified, <code class=\"codespan\">axis.data</code> will be auto collected from <a href=\"#series.data\">series.data</a>. It brings convenience, but we should notice that <code class=\"codespan\">axis.data</code> provid [...]
- },
- "data.value": {
- "desc": "<p>Name of a category.</p>\n"
- },
- "data.textStyle": {
- "desc": "<p>Text style of the category.</p>\n"
- },
- "data.textStyle.color": {
- "desc": "<p>The Color of the text.</p>\n"
- },
- "data.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "data.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "data.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "data.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "data.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n<p>The display interval of </p>\n"
- },
- "axisLine": {
- "desc": "<p>Settings related to axis line.</p>\n"
- },
- "axisLine.show": {
- "desc": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n"
- },
- "axisLine.interval": {
- "desc": "<p>axis scale label is valid in the category axis. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The [...]
- },
- "axisLine.lineStyle.color": {
- "desc": "<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "axisLine.lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "axisLine.lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "axisLabel": {
- "desc": "<p>Settings related to axis label.</p>\n"
- },
- "axisLabel.show": {
- "desc": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis label from appearing.</p>\n"
- },
- "axisLabel.margin": {
- "desc": "<p>The margin between the axis label and the axis line.</p>\n<p><strong>Note：</strong> This distance is three-dimensional space, not screen space.</p>\n"
- },
- "axisLabel.interval": {
- "desc": "<p>axis scale label is valid in the category axis. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The [...]
- },
- "axisLabel.textStyle.color": {
- "desc": "<p>Color of axis label is set to be <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class=\"lang-ts\">(val: string) => Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class=\"lang-ts\">textStyle: {\n color: function (value, index) {\n return value >= 0 ? 'green' : &# [...]
- },
- "axisLabel.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "axisLabel.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "axisLabel.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "axisLabel.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "axisLabel.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "axisTick": {
- "desc": "<p>Settings related to axis tick.</p>\n"
- },
- "axisTick.show": {
- "desc": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis tick from showing.</p>\n"
- },
- "axisTick.interval": {
- "desc": "<p>axis scale label is valid in the category axis. Defaults to the same as <a href=\"#.axisLabel.interval\">axisLabel.interval</a>. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, [...]
- },
- "axisTick.length": {
- "desc": "<p>The length of the axis tick.</p>\n"
- },
- "axisTick.lineStyle.color": {
- "desc": "<p>Color of axis label is set to be <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"
- },
- "axisTick.lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "axisTick.lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "splitLine": {
- "desc": "<p>Settings related to axis line.</p>\n"
- },
- "splitLine.show": {
- "desc": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n"
- },
- "splitLine.interval": {
- "desc": "<p>axis scale label is valid in the category axis. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The [...]
- },
- "splitLine.lineStyle.color": {
- "desc": "<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "splitLine.lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "splitLine.lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "splitArea": {
- "desc": "<p>Split area of axis in <a href=\"#grid\">grid</a> area.</p>\n"
- },
- "splitArea.show": {
- "desc": "<p>Set this to be <code class=\"codespan\">true</code> to show the splitArea.</p>\n"
- },
- "splitArea.interval": {
- "desc": "<p>Axis splitArea is valid in the category axis. Defaults to the same as <a href=\"#.axisLabel.interval\">axisLabel.interval</a>. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, i [...]
- },
- "splitArea.areaStyle": {
- "desc": "<p>Split area style.</p>\n"
- },
- "splitArea.areaStyle.color": {
- "desc": "<p>Color of the split area.\nThe split area color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.</p>\n"
- },
- "axisPointer": {
- "desc": "<p>Configurations for axis pointer.</p>\n"
- },
- "axisPointer.show": {
- "desc": "<p>Whether to display the axisPointer. Set this to be <code class=\"codespan\">true</code> to show the splitArea.</p>\n"
- },
- "axisPointer.lineStyle.color": {
- "desc": "<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "axisPointer.lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "axisPointer.lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "axisPointer.label": {
- "desc": "<p>The label of axisPointer.</p>\n"
- },
- "axisPointer.label.show": {
- "desc": "<p>Whether to display the label of axisPointer. Value axes are displayed by default, while category axes are not.</p>\n"
- },
- "axisPointer.label.formatter": {
- "desc": "<p>The formatter of the label. . The first parameter to the function is the value of the current axis. The second parameter to the function is an array of values for all axes.</p>\n<pre><code class=\"lang-ts\">(value: number, valueAll: Array) => string\n</code></pre>\n"
- },
- "axisPointer.label.margin": {
- "desc": "<p>Distance between label and axis.\nLike the scale label, this distance is a 3D space rather than a screen pixel.</p>\n"
- },
- "axisPointer.label.textStyle.color": {
- "desc": "<p>The Color of the text.</p>\n"
- },
- "axisPointer.label.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "axisPointer.label.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "axisPointer.label.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "axisPointer.label.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "axisPointer.label.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- }
-}
\ No newline at end of file
+window.__EC_DOC_option_gl_yAxis3D = {"show":{"desc":"<p>Whether to display the y-axis.</p>\n"},"name":{"desc":"<p>The name of the axis.</p>\n"},"grid3DIndex":{"desc":"<p>The index of the <a href=\"#grid3D\">grid3D</a> component used by the axis. The default is to use the first <a href=\"#grid3D\">grid3D</a> component.</p>\n"},"nameTextStyle":{"desc":"<p>Text style of axis name.</p>\n"},"nameTextStyle.color":{"desc":"<p>Color of axis name uses <a href=\"#yAxis3D.axisLine.lineStyle.color\" [...]
\ No newline at end of file
diff --git a/en/documents/option-gl-parts/option-gl.yAxis3D.json b/en/documents/option-gl-parts/option-gl.yAxis3D.json
index ebe6dc30..b03905d0 100644
--- a/en/documents/option-gl-parts/option-gl.yAxis3D.json
+++ b/en/documents/option-gl-parts/option-gl.yAxis3D.json
@@ -1,233 +1 @@
-{
- "show": {
- "desc": "<p>Whether to display the y-axis.</p>\n"
- },
- "name": {
- "desc": "<p>The name of the axis.</p>\n"
- },
- "grid3DIndex": {
- "desc": "<p>The index of the <a href=\"#grid3D\">grid3D</a> component used by the axis. The default is to use the first <a href=\"#grid3D\">grid3D</a> component.</p>\n"
- },
- "nameTextStyle": {
- "desc": "<p>Text style of axis name.</p>\n"
- },
- "nameTextStyle.color": {
- "desc": "<p>Color of axis name uses <a href=\"#yAxis3D.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"
- },
- "nameTextStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "nameTextStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "nameTextStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "nameTextStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "nameTextStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "nameGap": {
- "desc": "<p>The gap between the axis name and axis line. Note the distance is in 3D space, not the screen pixel value.</p>\n"
- },
- "type": {
- "desc": "<p>The type of the axis.</p>\n<p>Optional:</p>\n<ul>\n<li><p><code class=\"codespan\">'value'</code>\n The value axis. Suitable for continuous data.</p>\n</li>\n<li><p><code class=\"codespan\">'category'</code>\n The category axis. Suitable for the discrete category data. For this type, the category data must be set through <a href=\"#yAxis3D.data\">data</a>.</p>\n</li>\n<li><p><code class=\"codespan\">'time'</code>\n The timeline. Suitable for the [...]
- },
- "min": {
- "desc": "<p>The minimum value of axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">'dataMin'</code> so that the minimum value on this axis is set to be the minimum label.</p>\n<p>It will be automatically computed to make sure the axis tick is equally distributed when not set.</p>\n<p>In the category axis, it can also be set as the ordinal number. For example, if a category axis has <code class=\"codespan\">data: ['categoryA', 'categoryB', [...]
- },
- "max": {
- "desc": "<p>The maximum value of the axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">'dataMax'</code> so that the minimum value on this axis is set to be the maximum label.</p>\n<p>It will be automatically computed to make sure the axis tick is equally distributed when not set.</p>\n<p>In the category axis, it can also be set as the ordinal number. For example, if a category axis has <code class=\"codespan\">data: ['categoryA', 'categoryB&# [...]
- },
- "scale": {
- "desc": "<p>It is available only in numerical axis, i.e., <a href=\"#yAxis3D.type\">type</a>: 'value'.</p>\n<p>It specifies whether not to contain zero position of axis compulsively. When it is set to be <code class=\"codespan\">true</code>, the axis may not contain zero position, which is useful in the scatter chart for both value axes.</p>\n<p>This configuration item is unavailable when the <a href=\"#yAxis3D.min\">min</a> and <a href=\"#yAxis3D.max\">max</a> are set.</p>\n"
- },
- "splitNumber": {
- "desc": "<p>The number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.</p>\n<p>This is unavailable for the category axis.</p>\n"
- },
- "minInterval": {
- "desc": "<p>Minimum gap between split lines.</p>\n<p>For example, it can be set to be <code class=\"codespan\">1</code> to make sure the axis label is shown as an integer.</p>\n<pre><code class=\"lang-ts\">{\n minInterval: 1\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#yAxis3D.type\">type</a> 'value' or 'time'.</p>\n"
- },
- "interval": {
- "desc": "<p>Compulsively set segmentation interval for axis.</p>\n<p>As <a href=\"#yAxis3D.splitNumber\">splitNumber</a> is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with <a href=\"#yAxis3D.min\">min</a> and <a href=\"#yAxis3D.max\">max</a> to compulsively set tickings. But in most cases, we do not suggest using this, out automatic calculation is enough for most situations.</p>\n<p>This is unavailable for [...]
- },
- "logBase": {
- "desc": "<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#yAxis3D.type\">type</a>: 'log'.</p>\n"
- },
- "data": {
- "desc": "<p>Category data, available in <a href=\"#yAxis3D.type\">type</a>: 'category' axis.</p>\n<p>If <a href=\"#yAxis3D.type\">type</a> is specified as <code class=\"codespan\">'category'</code>, but <code class=\"codespan\">axis.data</code> is not specified, <code class=\"codespan\">axis.data</code> will be auto collected from <a href=\"#series.data\">series.data</a>. It brings convenience, but we should notice that <code class=\"codespan\">axis.data</code> provid [...]
- },
- "data.value": {
- "desc": "<p>Name of a category.</p>\n"
- },
- "data.textStyle": {
- "desc": "<p>Text style of the category.</p>\n"
- },
- "data.textStyle.color": {
- "desc": "<p>The Color of the text.</p>\n"
- },
- "data.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "data.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "data.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "data.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "data.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n<p>The display interval of </p>\n"
- },
- "axisLine": {
- "desc": "<p>Settings related to axis line.</p>\n"
- },
- "axisLine.show": {
- "desc": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n"
- },
- "axisLine.interval": {
- "desc": "<p>axis scale label is valid in the category axis. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The [...]
- },
- "axisLine.lineStyle.color": {
- "desc": "<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "axisLine.lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "axisLine.lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "axisLabel": {
- "desc": "<p>Settings related to axis label.</p>\n"
- },
- "axisLabel.show": {
- "desc": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis label from appearing.</p>\n"
- },
- "axisLabel.margin": {
- "desc": "<p>The margin between the axis label and the axis line.</p>\n<p><strong>Note：</strong> This distance is three-dimensional space, not screen space.</p>\n"
- },
- "axisLabel.interval": {
- "desc": "<p>axis scale label is valid in the category axis. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The [...]
- },
- "axisLabel.textStyle.color": {
- "desc": "<p>Color of axis label is set to be <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class=\"lang-ts\">(val: string) => Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class=\"lang-ts\">textStyle: {\n color: function (value, index) {\n return value >= 0 ? 'green' : &# [...]
- },
- "axisLabel.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "axisLabel.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "axisLabel.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "axisLabel.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "axisLabel.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "axisTick": {
- "desc": "<p>Settings related to axis tick.</p>\n"
- },
- "axisTick.show": {
- "desc": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis tick from showing.</p>\n"
- },
- "axisTick.interval": {
- "desc": "<p>axis scale label is valid in the category axis. Defaults to the same as <a href=\"#.axisLabel.interval\">axisLabel.interval</a>. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, [...]
- },
- "axisTick.length": {
- "desc": "<p>The length of the axis tick.</p>\n"
- },
- "axisTick.lineStyle.color": {
- "desc": "<p>Color of axis label is set to be <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"
- },
- "axisTick.lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "axisTick.lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "splitLine": {
- "desc": "<p>Settings related to axis line.</p>\n"
- },
- "splitLine.show": {
- "desc": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n"
- },
- "splitLine.interval": {
- "desc": "<p>axis scale label is valid in the category axis. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The [...]
- },
- "splitLine.lineStyle.color": {
- "desc": "<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "splitLine.lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "splitLine.lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "splitArea": {
- "desc": "<p>Split area of axis in <a href=\"#grid\">grid</a> area.</p>\n"
- },
- "splitArea.show": {
- "desc": "<p>Set this to be <code class=\"codespan\">true</code> to show the splitArea.</p>\n"
- },
- "splitArea.interval": {
- "desc": "<p>Axis splitArea is valid in the category axis. Defaults to the same as <a href=\"#.axisLabel.interval\">axisLabel.interval</a>. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, i [...]
- },
- "splitArea.areaStyle": {
- "desc": "<p>Split area style.</p>\n"
- },
- "splitArea.areaStyle.color": {
- "desc": "<p>Color of the split area.\nThe split area color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.</p>\n"
- },
- "axisPointer": {
- "desc": "<p>Configurations for axis pointer.</p>\n"
- },
- "axisPointer.show": {
- "desc": "<p>Whether to display the axisPointer. Set this to be <code class=\"codespan\">true</code> to show the splitArea.</p>\n"
- },
- "axisPointer.lineStyle.color": {
- "desc": "<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "axisPointer.lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "axisPointer.lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "axisPointer.label": {
- "desc": "<p>The label of axisPointer.</p>\n"
- },
- "axisPointer.label.show": {
- "desc": "<p>Whether to display the label of axisPointer. Value axes are displayed by default, while category axes are not.</p>\n"
- },
- "axisPointer.label.formatter": {
- "desc": "<p>The formatter of the label. . The first parameter to the function is the value of the current axis. The second parameter to the function is an array of values for all axes.</p>\n<pre><code class=\"lang-ts\">(value: number, valueAll: Array) => string\n</code></pre>\n"
- },
- "axisPointer.label.margin": {
- "desc": "<p>Distance between label and axis.\nLike the scale label, this distance is a 3D space rather than a screen pixel.</p>\n"
- },
- "axisPointer.label.textStyle.color": {
- "desc": "<p>The Color of the text.</p>\n"
- },
- "axisPointer.label.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "axisPointer.label.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "axisPointer.label.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "axisPointer.label.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "axisPointer.label.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- }
-}
\ No newline at end of file
+{"show":{"desc":"<p>Whether to display the y-axis.</p>\n"},"name":{"desc":"<p>The name of the axis.</p>\n"},"grid3DIndex":{"desc":"<p>The index of the <a href=\"#grid3D\">grid3D</a> component used by the axis. The default is to use the first <a href=\"#grid3D\">grid3D</a> component.</p>\n"},"nameTextStyle":{"desc":"<p>Text style of axis name.</p>\n"},"nameTextStyle.color":{"desc":"<p>Color of axis name uses <a href=\"#yAxis3D.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by def [...]
\ No newline at end of file
diff --git a/en/documents/option-gl-parts/option-gl.zAxis3D.js b/en/documents/option-gl-parts/option-gl.zAxis3D.js
index 09690c5b..cc3cb010 100644
--- a/en/documents/option-gl-parts/option-gl.zAxis3D.js
+++ b/en/documents/option-gl-parts/option-gl.zAxis3D.js
@@ -1,233 +1 @@
-window.__EC_DOC_option_gl_zAxis3D = {
- "show": {
- "desc": "<p>Whether to display the z-axis.</p>\n"
- },
- "name": {
- "desc": "<p>The name of the axis.</p>\n"
- },
- "grid3DIndex": {
- "desc": "<p>The index of the <a href=\"#grid3D\">grid3D</a> component used by the axis. The default is to use the first <a href=\"#grid3D\">grid3D</a> component.</p>\n"
- },
- "nameTextStyle": {
- "desc": "<p>Text style of axis name.</p>\n"
- },
- "nameTextStyle.color": {
- "desc": "<p>Color of axis name uses <a href=\"#zAxis3D.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"
- },
- "nameTextStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "nameTextStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "nameTextStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "nameTextStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "nameTextStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "nameGap": {
- "desc": "<p>The gap between the axis name and axis line. Note the distance is in 3D space, not the screen pixel value.</p>\n"
- },
- "type": {
- "desc": "<p>The type of the axis.</p>\n<p>Optional:</p>\n<ul>\n<li><p><code class=\"codespan\">'value'</code>\n The value axis. Suitable for continuous data.</p>\n</li>\n<li><p><code class=\"codespan\">'category'</code>\n The category axis. Suitable for the discrete category data. For this type, the category data must be set through <a href=\"#zAxis3D.data\">data</a>.</p>\n</li>\n<li><p><code class=\"codespan\">'time'</code>\n The timeline. Suitable for the [...]
- },
- "min": {
- "desc": "<p>The minimum value of axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">'dataMin'</code> so that the minimum value on this axis is set to be the minimum label.</p>\n<p>It will be automatically computed to make sure the axis tick is equally distributed when not set.</p>\n<p>In the category axis, it can also be set as the ordinal number. For example, if a category axis has <code class=\"codespan\">data: ['categoryA', 'categoryB', [...]
- },
- "max": {
- "desc": "<p>The maximum value of the axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">'dataMax'</code> so that the minimum value on this axis is set to be the maximum label.</p>\n<p>It will be automatically computed to make sure the axis tick is equally distributed when not set.</p>\n<p>In the category axis, it can also be set as the ordinal number. For example, if a category axis has <code class=\"codespan\">data: ['categoryA', 'categoryB&# [...]
- },
- "scale": {
- "desc": "<p>It is available only in numerical axis, i.e., <a href=\"#zAxis3D.type\">type</a>: 'value'.</p>\n<p>It specifies whether not to contain zero position of axis compulsively. When it is set to be <code class=\"codespan\">true</code>, the axis may not contain zero position, which is useful in the scatter chart for both value axes.</p>\n<p>This configuration item is unavailable when the <a href=\"#zAxis3D.min\">min</a> and <a href=\"#zAxis3D.max\">max</a> are set.</p>\n"
- },
- "splitNumber": {
- "desc": "<p>The number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.</p>\n<p>This is unavailable for the category axis.</p>\n"
- },
- "minInterval": {
- "desc": "<p>Minimum gap between split lines.</p>\n<p>For example, it can be set to be <code class=\"codespan\">1</code> to make sure the axis label is shown as an integer.</p>\n<pre><code class=\"lang-ts\">{\n minInterval: 1\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#zAxis3D.type\">type</a> 'value' or 'time'.</p>\n"
- },
- "interval": {
- "desc": "<p>Compulsively set segmentation interval for axis.</p>\n<p>As <a href=\"#zAxis3D.splitNumber\">splitNumber</a> is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with <a href=\"#zAxis3D.min\">min</a> and <a href=\"#zAxis3D.max\">max</a> to compulsively set tickings. But in most cases, we do not suggest using this, out automatic calculation is enough for most situations.</p>\n<p>This is unavailable for [...]
- },
- "logBase": {
- "desc": "<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#zAxis3D.type\">type</a>: 'log'.</p>\n"
- },
- "data": {
- "desc": "<p>Category data, available in <a href=\"#zAxis3D.type\">type</a>: 'category' axis.</p>\n<p>If <a href=\"#zAxis3D.type\">type</a> is specified as <code class=\"codespan\">'category'</code>, but <code class=\"codespan\">axis.data</code> is not specified, <code class=\"codespan\">axis.data</code> will be auto collected from <a href=\"#series.data\">series.data</a>. It brings convenience, but we should notice that <code class=\"codespan\">axis.data</code> provid [...]
- },
- "data.value": {
- "desc": "<p>Name of a category.</p>\n"
- },
- "data.textStyle": {
- "desc": "<p>Text style of the category.</p>\n"
- },
- "data.textStyle.color": {
- "desc": "<p>The Color of the text.</p>\n"
- },
- "data.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "data.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "data.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "data.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "data.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n<p>The display interval of </p>\n"
- },
- "axisLine": {
- "desc": "<p>Settings related to axis line.</p>\n"
- },
- "axisLine.show": {
- "desc": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n"
- },
- "axisLine.interval": {
- "desc": "<p>axis scale label is valid in the category axis. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The [...]
- },
- "axisLine.lineStyle.color": {
- "desc": "<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "axisLine.lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "axisLine.lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "axisLabel": {
- "desc": "<p>Settings related to axis label.</p>\n"
- },
- "axisLabel.show": {
- "desc": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis label from appearing.</p>\n"
- },
- "axisLabel.margin": {
- "desc": "<p>The margin between the axis label and the axis line.</p>\n<p><strong>Note：</strong> This distance is three-dimensional space, not screen space.</p>\n"
- },
- "axisLabel.interval": {
- "desc": "<p>axis scale label is valid in the category axis. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The [...]
- },
- "axisLabel.textStyle.color": {
- "desc": "<p>Color of axis label is set to be <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class=\"lang-ts\">(val: string) => Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class=\"lang-ts\">textStyle: {\n color: function (value, index) {\n return value >= 0 ? 'green' : &# [...]
- },
- "axisLabel.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "axisLabel.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "axisLabel.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "axisLabel.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "axisLabel.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "axisTick": {
- "desc": "<p>Settings related to axis tick.</p>\n"
- },
- "axisTick.show": {
- "desc": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis tick from showing.</p>\n"
- },
- "axisTick.interval": {
- "desc": "<p>axis scale label is valid in the category axis. Defaults to the same as <a href=\"#.axisLabel.interval\">axisLabel.interval</a>. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, [...]
- },
- "axisTick.length": {
- "desc": "<p>The length of the axis tick.</p>\n"
- },
- "axisTick.lineStyle.color": {
- "desc": "<p>Color of axis label is set to be <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"
- },
- "axisTick.lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "axisTick.lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "splitLine": {
- "desc": "<p>Settings related to axis line.</p>\n"
- },
- "splitLine.show": {
- "desc": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n"
- },
- "splitLine.interval": {
- "desc": "<p>axis scale label is valid in the category axis. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The [...]
- },
- "splitLine.lineStyle.color": {
- "desc": "<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "splitLine.lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "splitLine.lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "splitArea": {
- "desc": "<p>Split area of axis in <a href=\"#grid\">grid</a> area.</p>\n"
- },
- "splitArea.show": {
- "desc": "<p>Set this to be <code class=\"codespan\">true</code> to show the splitArea.</p>\n"
- },
- "splitArea.interval": {
- "desc": "<p>Axis splitArea is valid in the category axis. Defaults to the same as <a href=\"#.axisLabel.interval\">axisLabel.interval</a>. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, i [...]
- },
- "splitArea.areaStyle": {
- "desc": "<p>Split area style.</p>\n"
- },
- "splitArea.areaStyle.color": {
- "desc": "<p>Color of the split area.\nThe split area color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.</p>\n"
- },
- "axisPointer": {
- "desc": "<p>Configurations for axis pointer.</p>\n"
- },
- "axisPointer.show": {
- "desc": "<p>Whether to display the axisPointer. Set this to be <code class=\"codespan\">true</code> to show the splitArea.</p>\n"
- },
- "axisPointer.lineStyle.color": {
- "desc": "<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "axisPointer.lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "axisPointer.lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "axisPointer.label": {
- "desc": "<p>The label of axisPointer.</p>\n"
- },
- "axisPointer.label.show": {
- "desc": "<p>Whether to display the label of axisPointer. Value axes are displayed by default, while category axes are not.</p>\n"
- },
- "axisPointer.label.formatter": {
- "desc": "<p>The formatter of the label. . The first parameter to the function is the value of the current axis. The second parameter to the function is an array of values for all axes.</p>\n<pre><code class=\"lang-ts\">(value: number, valueAll: Array) => string\n</code></pre>\n"
- },
- "axisPointer.label.margin": {
- "desc": "<p>Distance between label and axis.\nLike the scale label, this distance is a 3D space rather than a screen pixel.</p>\n"
- },
- "axisPointer.label.textStyle.color": {
- "desc": "<p>The Color of the text.</p>\n"
- },
- "axisPointer.label.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "axisPointer.label.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "axisPointer.label.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "axisPointer.label.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "axisPointer.label.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- }
-}
\ No newline at end of file
+window.__EC_DOC_option_gl_zAxis3D = {"show":{"desc":"<p>Whether to display the z-axis.</p>\n"},"name":{"desc":"<p>The name of the axis.</p>\n"},"grid3DIndex":{"desc":"<p>The index of the <a href=\"#grid3D\">grid3D</a> component used by the axis. The default is to use the first <a href=\"#grid3D\">grid3D</a> component.</p>\n"},"nameTextStyle":{"desc":"<p>Text style of axis name.</p>\n"},"nameTextStyle.color":{"desc":"<p>Color of axis name uses <a href=\"#zAxis3D.axisLine.lineStyle.color\" [...]
\ No newline at end of file
diff --git a/en/documents/option-gl-parts/option-gl.zAxis3D.json b/en/documents/option-gl-parts/option-gl.zAxis3D.json
index 0750e116..8f908e6d 100644
--- a/en/documents/option-gl-parts/option-gl.zAxis3D.json
+++ b/en/documents/option-gl-parts/option-gl.zAxis3D.json
@@ -1,233 +1 @@
-{
- "show": {
- "desc": "<p>Whether to display the z-axis.</p>\n"
- },
- "name": {
- "desc": "<p>The name of the axis.</p>\n"
- },
- "grid3DIndex": {
- "desc": "<p>The index of the <a href=\"#grid3D\">grid3D</a> component used by the axis. The default is to use the first <a href=\"#grid3D\">grid3D</a> component.</p>\n"
- },
- "nameTextStyle": {
- "desc": "<p>Text style of axis name.</p>\n"
- },
- "nameTextStyle.color": {
- "desc": "<p>Color of axis name uses <a href=\"#zAxis3D.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"
- },
- "nameTextStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "nameTextStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "nameTextStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "nameTextStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "nameTextStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "nameGap": {
- "desc": "<p>The gap between the axis name and axis line. Note the distance is in 3D space, not the screen pixel value.</p>\n"
- },
- "type": {
- "desc": "<p>The type of the axis.</p>\n<p>Optional:</p>\n<ul>\n<li><p><code class=\"codespan\">'value'</code>\n The value axis. Suitable for continuous data.</p>\n</li>\n<li><p><code class=\"codespan\">'category'</code>\n The category axis. Suitable for the discrete category data. For this type, the category data must be set through <a href=\"#zAxis3D.data\">data</a>.</p>\n</li>\n<li><p><code class=\"codespan\">'time'</code>\n The timeline. Suitable for the [...]
- },
- "min": {
- "desc": "<p>The minimum value of axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">'dataMin'</code> so that the minimum value on this axis is set to be the minimum label.</p>\n<p>It will be automatically computed to make sure the axis tick is equally distributed when not set.</p>\n<p>In the category axis, it can also be set as the ordinal number. For example, if a category axis has <code class=\"codespan\">data: ['categoryA', 'categoryB', [...]
- },
- "max": {
- "desc": "<p>The maximum value of the axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">'dataMax'</code> so that the minimum value on this axis is set to be the maximum label.</p>\n<p>It will be automatically computed to make sure the axis tick is equally distributed when not set.</p>\n<p>In the category axis, it can also be set as the ordinal number. For example, if a category axis has <code class=\"codespan\">data: ['categoryA', 'categoryB&# [...]
- },
- "scale": {
- "desc": "<p>It is available only in numerical axis, i.e., <a href=\"#zAxis3D.type\">type</a>: 'value'.</p>\n<p>It specifies whether not to contain zero position of axis compulsively. When it is set to be <code class=\"codespan\">true</code>, the axis may not contain zero position, which is useful in the scatter chart for both value axes.</p>\n<p>This configuration item is unavailable when the <a href=\"#zAxis3D.min\">min</a> and <a href=\"#zAxis3D.max\">max</a> are set.</p>\n"
- },
- "splitNumber": {
- "desc": "<p>The number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.</p>\n<p>This is unavailable for the category axis.</p>\n"
- },
- "minInterval": {
- "desc": "<p>Minimum gap between split lines.</p>\n<p>For example, it can be set to be <code class=\"codespan\">1</code> to make sure the axis label is shown as an integer.</p>\n<pre><code class=\"lang-ts\">{\n minInterval: 1\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#zAxis3D.type\">type</a> 'value' or 'time'.</p>\n"
- },
- "interval": {
- "desc": "<p>Compulsively set segmentation interval for axis.</p>\n<p>As <a href=\"#zAxis3D.splitNumber\">splitNumber</a> is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with <a href=\"#zAxis3D.min\">min</a> and <a href=\"#zAxis3D.max\">max</a> to compulsively set tickings. But in most cases, we do not suggest using this, out automatic calculation is enough for most situations.</p>\n<p>This is unavailable for [...]
- },
- "logBase": {
- "desc": "<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#zAxis3D.type\">type</a>: 'log'.</p>\n"
- },
- "data": {
- "desc": "<p>Category data, available in <a href=\"#zAxis3D.type\">type</a>: 'category' axis.</p>\n<p>If <a href=\"#zAxis3D.type\">type</a> is specified as <code class=\"codespan\">'category'</code>, but <code class=\"codespan\">axis.data</code> is not specified, <code class=\"codespan\">axis.data</code> will be auto collected from <a href=\"#series.data\">series.data</a>. It brings convenience, but we should notice that <code class=\"codespan\">axis.data</code> provid [...]
- },
- "data.value": {
- "desc": "<p>Name of a category.</p>\n"
- },
- "data.textStyle": {
- "desc": "<p>Text style of the category.</p>\n"
- },
- "data.textStyle.color": {
- "desc": "<p>The Color of the text.</p>\n"
- },
- "data.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "data.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "data.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "data.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "data.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n<p>The display interval of </p>\n"
- },
- "axisLine": {
- "desc": "<p>Settings related to axis line.</p>\n"
- },
- "axisLine.show": {
- "desc": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n"
- },
- "axisLine.interval": {
- "desc": "<p>axis scale label is valid in the category axis. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The [...]
- },
- "axisLine.lineStyle.color": {
- "desc": "<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "axisLine.lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "axisLine.lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "axisLabel": {
- "desc": "<p>Settings related to axis label.</p>\n"
- },
- "axisLabel.show": {
- "desc": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis label from appearing.</p>\n"
- },
- "axisLabel.margin": {
- "desc": "<p>The margin between the axis label and the axis line.</p>\n<p><strong>Note：</strong> This distance is three-dimensional space, not screen space.</p>\n"
- },
- "axisLabel.interval": {
- "desc": "<p>axis scale label is valid in the category axis. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The [...]
- },
- "axisLabel.textStyle.color": {
- "desc": "<p>Color of axis label is set to be <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class=\"lang-ts\">(val: string) => Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class=\"lang-ts\">textStyle: {\n color: function (value, index) {\n return value >= 0 ? 'green' : &# [...]
- },
- "axisLabel.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "axisLabel.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "axisLabel.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "axisLabel.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "axisLabel.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- },
- "axisTick": {
- "desc": "<p>Settings related to axis tick.</p>\n"
- },
- "axisTick.show": {
- "desc": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis tick from showing.</p>\n"
- },
- "axisTick.interval": {
- "desc": "<p>axis scale label is valid in the category axis. Defaults to the same as <a href=\"#.axisLabel.interval\">axisLabel.interval</a>. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, [...]
- },
- "axisTick.length": {
- "desc": "<p>The length of the axis tick.</p>\n"
- },
- "axisTick.lineStyle.color": {
- "desc": "<p>Color of axis label is set to be <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"
- },
- "axisTick.lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "axisTick.lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "splitLine": {
- "desc": "<p>Settings related to axis line.</p>\n"
- },
- "splitLine.show": {
- "desc": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n"
- },
- "splitLine.interval": {
- "desc": "<p>axis scale label is valid in the category axis. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, it means "displays a label between two labels", and so on.</p>\n<p>The [...]
- },
- "splitLine.lineStyle.color": {
- "desc": "<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "splitLine.lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "splitLine.lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "splitArea": {
- "desc": "<p>Split area of axis in <a href=\"#grid\">grid</a> area.</p>\n"
- },
- "splitArea.show": {
- "desc": "<p>Set this to be <code class=\"codespan\">true</code> to show the splitArea.</p>\n"
- },
- "splitArea.interval": {
- "desc": "<p>Axis splitArea is valid in the category axis. Defaults to the same as <a href=\"#.axisLabel.interval\">axisLabel.interval</a>. </p>\n<p>By default, <code class=\"codespan\">interval</code> is automatically calculated to ensure a good display.</p>\n<p>It can be set to 0 to force all labels to be displayed.</p>\n<p>If the value is <code class=\"codespan\">1</code>, it means "displays a label every other label". If the value is <code class=\"codespan\">2</code>, i [...]
- },
- "splitArea.areaStyle": {
- "desc": "<p>Split area style.</p>\n"
- },
- "splitArea.areaStyle.color": {
- "desc": "<p>Color of the split area.\nThe split area color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.</p>\n"
- },
- "axisPointer": {
- "desc": "<p>Configurations for axis pointer.</p>\n"
- },
- "axisPointer.show": {
- "desc": "<p>Whether to display the axisPointer. Set this to be <code class=\"codespan\">true</code> to show the splitArea.</p>\n"
- },
- "axisPointer.lineStyle.color": {
- "desc": "<p>The color of the line. </p>\n<p>In addition to color strings, RGBA values represented by arrays are supported, for example:</p>\n<pre><code class=\"lang-ts\">// pure white\n[1, 1, 1, 1]\n</code></pre>\n<p>When using an array representation, each channel can set a value greater than 1 to represent the color value of HDR.</p>\n"
- },
- "axisPointer.lineStyle.opacity": {
- "desc": "<p>The opacity of the line.</p>\n"
- },
- "axisPointer.lineStyle.width": {
- "desc": "<p>The width of the line.</p>\n"
- },
- "axisPointer.label": {
- "desc": "<p>The label of axisPointer.</p>\n"
- },
- "axisPointer.label.show": {
- "desc": "<p>Whether to display the label of axisPointer. Value axes are displayed by default, while category axes are not.</p>\n"
- },
- "axisPointer.label.formatter": {
- "desc": "<p>The formatter of the label. . The first parameter to the function is the value of the current axis. The second parameter to the function is an array of values for all axes.</p>\n<pre><code class=\"lang-ts\">(value: number, valueAll: Array) => string\n</code></pre>\n"
- },
- "axisPointer.label.margin": {
- "desc": "<p>Distance between label and axis.\nLike the scale label, this distance is a 3D space rather than a screen pixel.</p>\n"
- },
- "axisPointer.label.textStyle.color": {
- "desc": "<p>The Color of the text.</p>\n"
- },
- "axisPointer.label.textStyle.borderWidth": {
- "desc": "<p>The border width of the text.</p>\n"
- },
- "axisPointer.label.textStyle.borderColor": {
- "desc": "<p>The border color of the text.</p>\n"
- },
- "axisPointer.label.textStyle.fontFamily": {
- "desc": "<p>The font family of the text.</p>\n"
- },
- "axisPointer.label.textStyle.fontSize": {
- "desc": "<p>The font size of the text.</p>\n"
- },
- "axisPointer.label.textStyle.fontWeight": {
- "desc": "<p>The font thick weight of the text.</p>\n<p><strong>Optional:</strong></p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"
- }
-}
\ No newline at end of file
+{"show":{"desc":"<p>Whether to display the z-axis.</p>\n"},"name":{"desc":"<p>The name of the axis.</p>\n"},"grid3DIndex":{"desc":"<p>The index of the <a href=\"#grid3D\">grid3D</a> component used by the axis. The default is to use the first <a href=\"#grid3D\">grid3D</a> component.</p>\n"},"nameTextStyle":{"desc":"<p>Text style of axis name.</p>\n"},"nameTextStyle.color":{"desc":"<p>Color of axis name uses <a href=\"#zAxis3D.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by def [...]
\ No newline at end of file
diff --git a/en/documents/option-gl.json b/en/documents/option-gl.json
index be9e6480..516b8953 100644
--- a/en/documents/option-gl.json
+++ b/en/documents/option-gl.json
@@ -1 +1 @@
-{"$schema":"https://echarts.apache.org/doc/json-schem","option":{"type":"Object","properties":{"globe":{"type":["Object"],"description":"<p>Globe component. The component provides the drawing of the Earth and the coordinate system. The developer can display 3D Scatter, 3D Bubble, 3D Bar, 3D Lines on it.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the globe component.</p>\n","default":true},"zlevel":{"type":["number"],"description":"<p>The layer in wh [...]
\ No newline at end of file
+{"$schema":"https://echarts.apache.org/doc/json-schema","option":{"type":"Object","properties":{"globe":{"type":["Object"],"description":"<p>Globe component. The component provides the drawing of the Earth and the coordinate system. The developer can display 3D Scatter, 3D Bubble, 3D Bar, 3D Lines on it.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the globe component.</p>\n","default":true},"zlevel":{"type":["number"],"description":"<p>The layer in w [...]
\ No newline at end of file
diff --git a/en/documents/option-parts/option.angleAxis.js b/en/documents/option-parts/option.angleAxis.js
index 9d9a5c98..d3cb45f3 100644
--- a/en/documents/option-parts/option.angleAxis.js
+++ b/en/documents/option-parts/option.angleAxis.js
@@ -1,2226 +1 @@
-window.__EC_DOC_option_angleAxis = {
- "id": {
- "desc": "<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"
- },
- "polarIndex": {
- "desc": "<p>The index of angle axis in Polar Coordinate. The first axis is used by default.</p>\n"
- },
- "startAngle": {
- "desc": "\n\n<p>Starting angle of axis. 90 degrees by default, standing for top position of center. 0 degree stands for right position of center.</p>\n<p>The following shows an example with startAngle of 45 deg.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/en/view.html?c=doc-example/polar-start-angle&edit=1&reset=1\" width=\"400\" height=\"400\"></iframe>\n\n",
- "uiControl": {
- "type": "angle",
- "default": "90",
- "min": "-360",
- "max": "360",
- "step": "1"
- }
- },
- "clockwise": {
- "desc": "\n\n<p>Whether the positive position of axis is clockwise. True for clockwise by default.</p>\n<p>The following shows an example with clockwise as <code class=\"codespan\">false</code>.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/en/view.html?c=doc-example/polar-anticlockwise&edit=1&reset=1\" width=\"400\" height=\"400\"></iframe>\n\n\n\n",
- "uiControl": {
- "type": "boolean",
- "default": "true"
- }
- },
- "type": {
- "desc": "<p>Type of axis.</p>\n<p>Option:</p>\n<ul>\n<li><p><code class=\"codespan\">'value'</code>\n Numerical axis, suitable for continuous data.</p>\n</li>\n<li><p><code class=\"codespan\">'category'</code>\n Category axis, suitable for discrete category data. Category data can be auto retrieved from <a href=\"#series.data\">series.data</a> or <a href=\"#dataset.source\">dataset.source</a>, or can be specified via <a href=\"#angleAxis.data\">angleAxis.data</a>.</ [...]
- },
- "boundaryGap": {
- "desc": "\n\n<p>The boundary gap on both sides of a coordinate axis. The setting and behavior of category axes and non-category axes are different.</p>\n<p>The <code class=\"codespan\">boundaryGap</code> of category axis can be set to either <code class=\"codespan\">true</code> or <code class=\"codespan\">false</code>. Default value is set to be <code class=\"codespan\">true</code>, in which case <a href=\"#angleAxis.axisTick\">axisTick</a> is served only as a separation line, and la [...]
- "uiControl": {
- "type": "boolean"
- }
- },
- "min": {
- "desc": "\n\n<p>The minimun value of axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">'dataMin'</code> so that the minimum value on this axis is set to be the minimum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class=\"codespan\">data: ['categoryA', 'categoryB', &# [...]
- "uiControl": {
- "type": "number"
- }
- },
- "max": {
- "desc": "\n\n<p>The maximum value of axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">'dataMax'</code> so that the minimum value on this axis is set to be the maximum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class=\"codespan\">data: ['categoryA', 'categoryB', &# [...]
- "uiControl": {
- "type": "number"
- }
- },
- "scale": {
- "desc": "\n\n<p>It is available only in numerical axis, i.e., <a href=\"#angleAxis.type\">type</a>: 'value'.</p>\n<p>It specifies whether not to contain zero position of axis compulsively. When it is set to be <code class=\"codespan\">true</code>, the axis may not contain zero position, which is useful in the scatter chart for both value axes.</p>\n<p>This configuration item is unavailable when the <a href=\"#angleAxis.min\">min</a> and <a href=\"#angleAxis.max\">max</a> are [...]
- "uiControl": {
- "type": "boolean"
- }
- },
- "splitNumber": {
- "desc": "\n\n<p>Number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.</p>\n<p>This is unavailable for category axis.</p>\n",
- "uiControl": {
- "type": "number",
- "min": "1",
- "step": "1",
- "default": "5"
- }
- },
- "minInterval": {
- "desc": "\n\n<p>Minimum gap between split lines.</p>\n<p>For example, it can be set to be <code class=\"codespan\">1</code> to make sure axis label is show as integer.</p>\n<pre><code class=\"lang-ts\">{\n minInterval: 1\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#angleAxis.type\">type</a> 'value' or 'time'.</p>\n",
- "uiControl": {
- "type": "number"
- }
- },
- "maxInterval": {
- "desc": "\n\n<p>Maximum gap between split lines.</p>\n<p>For example, in time axis (<a href=\"#angleAxis.type\">type</a> is 'time'), it can be set to be <code class=\"codespan\">3600 * 24 * 1000</code> to make sure that the gap between axis labels is less than or equal to one day.</p>\n<pre><code class=\"lang-ts\">{\n maxInterval: 3600 * 1000 * 24\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#angleAxis.type\">type</a> 'value' or 'time'.</p>\n",
- "uiControl": {
- "type": "number"
- }
- },
- "interval": {
- "desc": "\n\n<p>Compulsively set segmentation interval for axis.</p>\n<p>As <a href=\"#angleAxis.splitNumber\">splitNumber</a> is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with <a href=\"#angleAxis.min\">min</a> and <a href=\"#angleAxis.max\">max</a> to compulsively set tickings. But in most cases, we do not suggest using this, our automatic calculation is enough for most situations.</p>\n<p>This is unavai [...]
- "uiControl": {
- "type": "number"
- }
- },
- "logBase": {
- "desc": "\n\n<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#angleAxis.type\">type</a>: 'log'.</p>\n",
- "uiControl": {
- "type": "number",
- "default": "10"
- }
- },
- "silent": {
- "desc": "<p>Set this to <code class=\"codespan\">true</code>, to prevent interaction with the axis.</p>\n"
- },
- "triggerEvent": {
- "desc": "<p>Set this to <code class=\"codespan\">true</code> to enable triggering events.</p>\n<p>Parameters of the event include:</p>\n<pre><code class=\"lang-ts\">{\n // Component type: xAxis, yAxis, radiusAxis, angleAxis\n // Each of which has an attribute for index, e.g., xAxisIndex for xAxis\n componentType: string,\n // Value on axis before being formatted.\n // Click on value label to trigger event.\n value: '',\n // Name of axis.\n // Click on [...]
- },
- "axisLine": {
- "desc": "<p>Settings related to axis line.</p>\n"
- },
- "axisLine.show": {
- "desc": "\n\n<p>Set this to <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n",
- "uiControl": {
- "type": "boolean",
- "default": "true"
- }
- },
- "axisLine.symbol": {
- "desc": "\n\n<p>Symbol of the two ends of the axis. It could be a string, representing the same symbol for two ends; or an array with two string elements, representing the two ends separately. It's set to be <code class=\"codespan\">'none'</code> by default, meaning no arrow for either end. If it is set to be <code class=\"codespan\">'arrow'</code>, there shall be two arrows. If there should only one arrow at the end, it should set to be <code class=\"codespan\">[ [...]
- "uiControl": {
- "type": "icon",
- "default": "none"
- }
- },
- "axisLine.symbolSize": {
- "desc": "\n\n<p>Size of the arrows at two ends. The first is the width perpendicular to the axis, the next is the width parallel to the axis.</p>\n",
- "uiControl": {
- "type": "vector",
- "default": "10,15"
- }
- },
- "axisLine.symbolOffset": {
- "desc": "\n\n<p>Arrow offset of axis. If is array, the first number is the offset of the arrow at the beginning, and the second number is the offset of the arrow at the end. If is number, it means the arrows have the same offset.</p>\n",
- "uiControl": {
- "type": "vector",
- "default": "0,0"
- }
- },
- "axisLine.lineStyle.color": {
- "desc": "\n\n<p>line styleLine color. </p>\n<blockquote>\n<p>Supports setting as solid color using <code class=\"codespan\">rgb(255,255,255)</code>, <code class=\"codespan\">rgba(255,255,255,1)</code>, <code class=\"codespan\">#fff</code>, etc. Also supports setting as gradient color and pattern fill, see <a href=\"#color\">option.color</a> for details</p>\n</blockquote>\n",
- "uiControl": {
- "type": "color"
- }
- },
- "axisLine.lineStyle.width": {
- "desc": "\n\n<p>line style line width.</p>\n",
- "uiControl": {
- "type": "number",
- "value": "1",
- "min": "0",
- "step": "0.5"
- }
- },
- "axisLine.lineStyle.type": {
- "desc": "\n\n\n<p>line type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n<p>Since <code class=\"codespan\">v5.0.0</code>, it can also be a number or a number array to specify the <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\" target=\"_blank\">dash array</a> of the li [...]
- "uiControl": {
- "type": "enum",
- "default": "solid",
- "options": "solid,dashed,dotted"
- }
- },
- "axisLine.lineStyle.dashOffset": {
- "desc": "<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To set the line dash offset. With \n<code class=\"codespan\">type</code>\n, we can make the line style more flexible.</p>\n<p>Refer to MDN <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset\" target=\"_blank\">lineDashOffset</a> for more details.</p>\n",
- "uiControl": {
- "type": "number",
- "min": "0",
- "step": "1",
- "default": "0"
- }
- },
- "axisLine.lineStyle.cap": {
- "desc": "<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To specify how to draw the end points of the line.\nPossible values are:</p>\n<ul>\n<li><code class=\"codespan\">'butt'</code>: The ends of lines are squared off at the endpoints.</li>\n<li><code class=\"codespan\">'round'</code>: The ends of lines are rounded.</li>\n<li><code class=\"codespan\">'square'</code>: The ends of lines are squared off by adding a box wi [...]
- "uiControl": {
- "type": "enum",
- "default": "butt",
- "options": "butt,round,square"
- }
- },
- "axisLine.lineStyle.join": {
- "desc": "<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To determine the shape used to join two line segments where they meet.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">'bevel'</code>: Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.</li>\n<li><code class=\"codespan\">'round'</code>: Rounds off the cor [...]
- "uiControl": {
- "type": "enum",
- "default": "bevel",
- "options": "bevel,round,miter"
- }
- },
- "axisLine.lineStyle.miterLimit": {
- "desc": "<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To set the miter limit ratio. Only works when \n<code class=\"codespan\">join</code>\n is set as <code class=\"codespan\">miter</code>.</p>\n<p>Default value is <code class=\"codespan\">10</code>. Negative、<code class=\"codespan\">0</code>、<code class=\"codespan\">Infinity</code> and <code class=\"codespan\">NaN</code> values are ignored.</p>\n<p>Refer to MDN <a href=\"https://developer. [...]
- "uiControl": {
- "type": "number",
- "min": "0",
- "step": "1",
- "default": "10"
- }
- },
- "axisLine.lineStyle.shadowBlur": {
- "desc": "\n\n<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-ts\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n",
- "uiControl": {
- "type": "number",
- "default": "",
- "min": "0",
- "step": "0.5"
- }
- },
- "axisLine.lineStyle.shadowColor": {
- "desc": "\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "uiControl": {
- "type": "color",
- "default": ""
- }
- },
- "axisLine.lineStyle.shadowOffsetX": {
- "desc": "\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "uiControl": {
- "type": "number",
- "default": "0",
- "step": "0.5"
- }
- },
- "axisLine.lineStyle.shadowOffsetY": {
- "desc": "\n\n<p>Offset distance on the vertical direction of shadow.</p>\n",
- "uiControl": {
- "type": "number",
- "default": "0",
- "step": "0.5"
- }
- },
- "axisLine.lineStyle.opacity": {
- "desc": "\n\n<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n",
- "uiControl": {
- "type": "number",
- "default": "1",
- "min": "0",
- "max": "1",
- "step": "0.01"
- }
- },
- "axisTick": {
- "desc": "<p>Settings related to axis tick.</p>\n"
- },
- "axisTick.show": {
- "desc": "\n\n<p>Set this to <code class=\"codespan\">false</code> to prevent the axis tick from showing.</p>\n",
- "uiControl": {
- "type": "boolean",
- "default": "true"
- }
- },
- "axisTick.alignWithLabel": {
- "desc": "\n\n<p>Align axis tick with label, which is available only when <code class=\"codespan\">boundaryGap</code> is set to be <code class=\"codespan\">true</code> in category axis. See the following picture:</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/img/axis-align-with-label.png\"></p>\n",
- "uiControl": {
- "type": "boolean",
- "default": "false"
- }
- },
- "axisTick.interval": {
- "desc": "\n\n\n\n<p>Interval of axisTick, which is available in category axis. is set to be the same as <a href=\"#angleAxis.axisLabel.interval\">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\ [...]
- "uiControl": {
- "type": "number",
- "min": "0",
- "step": "1"
- }
- },
- "axisTick.inside": {
- "desc": "\n\n<p>Set this to <code class=\"codespan\">true</code> so the axis labels face the <code class=\"codespan\">inside</code> direction.</p>\n",
- "uiControl": {
- "type": "boolean"
- }
- },
- "axisTick.length": {
- "desc": "\n\n<p>The length of the axis tick.</p>\n",
- "uiControl": {
- "type": "number",
- "min": "0",
- "step": "0.5",
- "default": "5"
- }
- },
- "axisTick.lineStyle": {
- "desc": "<p>Line style of axis ticks.</p>\n"
- },
- "axisTick.lineStyle.color": {
- "desc": "<p>Color of axis label is set to be <a href=\"#angleAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"
- },
- "axisTick.lineStyle.width": {
- "desc": "\n\n<p>axisTick line width.</p>\n",
- "uiControl": {
- "type": "number",
- "value": "1",
- "min": "0",
- "step": "0.5"
- }
- },
- "axisTick.lineStyle.type": {
- "desc": "\n\n\n<p>line type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n<p>Since <code class=\"codespan\">v5.0.0</code>, it can also be a number or a number array to specify the <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\" target=\"_blank\">dash array</a> of the li [...]
- "uiControl": {
- "type": "enum",
- "default": "solid",
- "options": "solid,dashed,dotted"
- }
- },
- "axisTick.lineStyle.dashOffset": {
- "desc": "<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To set the line dash offset. With \n<code class=\"codespan\">type</code>\n, we can make the line style more flexible.</p>\n<p>Refer to MDN <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset\" target=\"_blank\">lineDashOffset</a> for more details.</p>\n",
- "uiControl": {
- "type": "number",
- "min": "0",
- "step": "1",
- "default": "0"
- }
- },
- "axisTick.lineStyle.cap": {
- "desc": "<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To specify how to draw the end points of the line.\nPossible values are:</p>\n<ul>\n<li><code class=\"codespan\">'butt'</code>: The ends of lines are squared off at the endpoints.</li>\n<li><code class=\"codespan\">'round'</code>: The ends of lines are rounded.</li>\n<li><code class=\"codespan\">'square'</code>: The ends of lines are squared off by adding a box wi [...]
- "uiControl": {
- "type": "enum",
- "default": "butt",
- "options": "butt,round,square"
- }
- },
- "axisTick.lineStyle.join": {
- "desc": "<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To determine the shape used to join two line segments where they meet.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">'bevel'</code>: Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.</li>\n<li><code class=\"codespan\">'round'</code>: Rounds off the cor [...]
- "uiControl": {
- "type": "enum",
- "default": "bevel",
- "options": "bevel,round,miter"
- }
- },
- "axisTick.lineStyle.miterLimit": {
- "desc": "<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To set the miter limit ratio. Only works when \n<code class=\"codespan\">join</code>\n is set as <code class=\"codespan\">miter</code>.</p>\n<p>Default value is <code class=\"codespan\">10</code>. Negative、<code class=\"codespan\">0</code>、<code class=\"codespan\">Infinity</code> and <code class=\"codespan\">NaN</code> values are ignored.</p>\n<p>Refer to MDN <a href=\"https://developer. [...]
- "uiControl": {
- "type": "number",
- "min": "0",
- "step": "1",
- "default": "10"
- }
- },
- "axisTick.lineStyle.shadowBlur": {
- "desc": "\n\n<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-ts\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n",
- "uiControl": {
- "type": "number",
- "default": "",
- "min": "0",
- "step": "0.5"
- }
- },
- "axisTick.lineStyle.shadowColor": {
- "desc": "\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "uiControl": {
- "type": "color",
- "default": ""
- }
- },
- "axisTick.lineStyle.shadowOffsetX": {
- "desc": "\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "uiControl": {
- "type": "number",
- "default": "0",
- "step": "0.5"
- }
- },
- "axisTick.lineStyle.shadowOffsetY": {
- "desc": "\n\n<p>Offset distance on the vertical direction of shadow.</p>\n",
- "uiControl": {
- "type": "number",
- "default": "0",
- "step": "0.5"
- }
- },
- "axisTick.lineStyle.opacity": {
- "desc": "\n\n<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n",
- "uiControl": {
- "type": "number",
- "default": "1",
- "min": "0",
- "max": "1",
- "step": "0.01"
- }
- },
- "minorTick": {
- "desc": "<blockquote>\n<p>Since <code class=\"codespan\">v4.6.0</code></p>\n</blockquote>\n<p>Settings related minor ticks.</p>\n<p>Note: <code class=\"codespan\">minorTick</code> is not available in the <code class=\"codespan\">category</code> type axis.</p>\n<p>Examples:</p>\n<p>1) Using minor ticks in function plotting.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/en/view.html?c=line-function&edit=1&reset=1\" width=\"600\" height=\"350\"></iframe>\n\n\n<p>2) Using [...]
- },
- "minorTick.show": {
- "desc": "\n\n<p>If show minor ticks.</p>\n",
- "uiControl": {
- "type": "boolean",
- "default": "true"
- }
- },
- "minorTick.splitNumber": {
- "desc": "\n\n<p>Number of interval splited by minor ticks.</p>\n",
- "uiControl": {
- "type": "number",
- "min": "1",
- "step": "1",
- "default": "5"
- }
- },
- "minorTick.length": {
- "desc": "\n\n<p>Length of minor ticks lines。</p>\n",
- "uiControl": {
- "type": "number",
- "min": "0",
- "step": "0.5",
- "default": "3"
- }
- },
- "minorTick.lineStyle.color": {
- "desc": "\n\n<p>Style configuration of minor ticks lines <a href=\"#angleAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。</p>\n",
- "uiControl": {
- "type": "color"
- }
- },
- "minorTick.lineStyle.width": {
- "desc": "\n\n<p>minorTick line width.</p>\n",
- "uiControl": {
- "type": "number",
- "value": "1",
- "min": "0",
- "step": "0.5"
- }
- },
- "minorTick.lineStyle.type": {
- "desc": "\n\n\n<p>line type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n<p>Since <code class=\"codespan\">v5.0.0</code>, it can also be a number or a number array to specify the <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\" target=\"_blank\">dash array</a> of the li [...]
- "uiControl": {
- "type": "enum",
- "default": "solid",
- "options": "solid,dashed,dotted"
- }
- },
- "minorTick.lineStyle.dashOffset": {
- "desc": "<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To set the line dash offset. With \n<code class=\"codespan\">type</code>\n, we can make the line style more flexible.</p>\n<p>Refer to MDN <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset\" target=\"_blank\">lineDashOffset</a> for more details.</p>\n",
- "uiControl": {
- "type": "number",
- "min": "0",
- "step": "1",
- "default": "0"
- }
- },
- "minorTick.lineStyle.cap": {
- "desc": "<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To specify how to draw the end points of the line.\nPossible values are:</p>\n<ul>\n<li><code class=\"codespan\">'butt'</code>: The ends of lines are squared off at the endpoints.</li>\n<li><code class=\"codespan\">'round'</code>: The ends of lines are rounded.</li>\n<li><code class=\"codespan\">'square'</code>: The ends of lines are squared off by adding a box wi [...]
- "uiControl": {
- "type": "enum",
- "default": "butt",
- "options": "butt,round,square"
- }
- },
- "minorTick.lineStyle.join": {
- "desc": "<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To determine the shape used to join two line segments where they meet.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">'bevel'</code>: Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.</li>\n<li><code class=\"codespan\">'round'</code>: Rounds off the cor [...]
- "uiControl": {
- "type": "enum",
- "default": "bevel",
- "options": "bevel,round,miter"
- }
- },
- "minorTick.lineStyle.miterLimit": {
- "desc": "<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To set the miter limit ratio. Only works when \n<code class=\"codespan\">join</code>\n is set as <code class=\"codespan\">miter</code>.</p>\n<p>Default value is <code class=\"codespan\">10</code>. Negative、<code class=\"codespan\">0</code>、<code class=\"codespan\">Infinity</code> and <code class=\"codespan\">NaN</code> values are ignored.</p>\n<p>Refer to MDN <a href=\"https://developer. [...]
- "uiControl": {
- "type": "number",
- "min": "0",
- "step": "1",
- "default": "10"
- }
- },
- "minorTick.lineStyle.shadowBlur": {
- "desc": "\n\n<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-ts\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n",
- "uiControl": {
- "type": "number",
- "default": "",
- "min": "0",
- "step": "0.5"
- }
- },
- "minorTick.lineStyle.shadowColor": {
- "desc": "\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "uiControl": {
- "type": "color",
- "default": ""
- }
- },
- "minorTick.lineStyle.shadowOffsetX": {
- "desc": "\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "uiControl": {
- "type": "number",
- "default": "0",
- "step": "0.5"
- }
- },
- "minorTick.lineStyle.shadowOffsetY": {
- "desc": "\n\n<p>Offset distance on the vertical direction of shadow.</p>\n",
- "uiControl": {
- "type": "number",
- "default": "0",
- "step": "0.5"
- }
- },
- "minorTick.lineStyle.opacity": {
- "desc": "\n\n<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n",
- "uiControl": {
- "type": "number",
- "default": "1",
- "min": "0",
- "max": "1",
- "step": "0.01"
- }
- },
- "axisLabel": {
- "desc": "<p>Settings related to axis label.</p>\n"
- },
- "axisLabel.show": {
- "desc": "\n\n<p>Set this to <code class=\"codespan\">false</code> to prevent the axis label from appearing.</p>\n",
- "uiControl": {
- "type": "boolean",
- "default": "true"
- }
- },
- "axisLabel.interval": {
- "desc": "\n\n\n\n<p>Interval of Axis label, which is available in category axis. </p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre> [...]
- "uiControl": {
- "type": "number",
- "min": "0",
- "step": "1"
- }
- },
- "axisLabel.inside": {
- "desc": "\n\n<p>Set this to <code class=\"codespan\">true</code> so the axis labels face the <code class=\"codespan\">inside</code> direction.</p>\n",
- "uiControl": {
- "type": "boolean"
- }
- },
- "axisLabel.margin": {
- "desc": "\n\n<p>The margin between the axis label and the axis line.</p>\n",
- "uiControl": {
- "type": "number",
- "default": "8",
- "step": "0.5"
- }
- },
- "axisLabel.formatter": {
- "desc": "<p>Formatter of axis label, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class=\"lang-ts\">// Use string template; template variable is the default label of axis {value}\nformatter: '{value} kg'\n// Use callback.\nformatter: function (value, index) {\n return value + 'kg';\n}\n</code></pre>\n<hr>\n<p>For axes of time <a href=\"#.type\">type</a>: <code class=\"codespan\">'time'</code>, <code class=\"codespan [...]
- },
- "axisLabel.showMinLabel": {
- "desc": "\n\n<p>Whether to show the label of the min tick. Optional values: <code class=\"codespan\">true</code>, <code class=\"codespan\">false</code>, <code class=\"codespan\">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the min tick will not be displayed.</p>\n",
- "uiControl": {
- "type": "boolean"
- }
- },
- "axisLabel.showMaxLabel": {
- "desc": "\n\n<p>Whether to show the label of the max tick. Optional values: <code class=\"codespan\">true</code>, <code class=\"codespan\">false</code>, <code class=\"codespan\">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.</p>\n",
- "uiControl": {
- "type": "boolean"
- }
- },
- "axisLabel.hideOverlap": {
- "desc": "\n\n\n\n<blockquote>\n<p>Since <code class=\"codespan\">v5.2.0</code></p>\n</blockquote>\n<p>Whether to hide overlapped labels.</p>\n",
- "uiControl": {
- "type": "boolean"
- }
- },
- "axisLabel.color": {
- "desc": "\n\n<p>Color of axis label is set to be <a href=\"#angleAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class=\"lang-ts\">(val: string) => Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class=\"lang-ts\">textStyle: {\n color: function (value, index) {\n return value >= 0 ? 'gr [...]
- "uiControl": {
- "type": "color"
- }
- },
- "axisLabel.fontStyle": {
- "desc": "\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n",
- "uiControl": {
- "type": "enum",
- "default": "normal",
- "options": "normal,italic,oblique"
- }
- },
- "axisLabel.fontWeight": {
- "desc": "\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
- "uiControl": {
- "type": "enum",
- "default": "normal",
- "options": "normal,bold,bolder,lighter"
- }
- },
- "axisLabel.fontFamily": {
- "desc": "\n\n<p> font family.</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "uiControl": {
- "type": "enum",
- "default": "sans-serif",
- "options": "sans-serif,serif,monospace,Arial,Courier New"
- }
- },
- "axisLabel.fontSize": {
- "desc": "\n\n<p> font size.</p>\n",
- "uiControl": {
- "type": "number",
- "default": "12",
- "min": "1",
- "step": "1"
- }
- },
- "axisLabel.align": {
- "desc": "\n\n<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-t [...]
- "uiControl": {
- "type": "enum",
- "options": "left,center,right"
- }
- },
- "axisLabel.verticalAlign": {
- "desc": "\n\n<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code [...]
- "uiControl": {
- "type": "enum",
- "options": "top,middle,bottom"
- }
- },
- "axisLabel.lineHeight": {
- "desc": "\n\n<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-ts\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n",
- "uiControl": {
- "type": "number",
- "min": "0",
- "step": "1",
- "default": "12"
- }
- },
- "axisLabel.backgroundColor": {
- "desc": "\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElemen [...]
- "uiControl": {
- "type": "color",
- "default": "#fff"
- }
- },
- "axisLabel.borderColor": {
- "desc": "\n\n<p>Border color of the text fragment.</p>\n",
- "uiControl": {
- "type": "color",
- "default": "#fff"
- }
- },
- "axisLabel.borderWidth": {
- "desc": "\n\n<p>Border width of the text fragment.</p>\n",
- "uiControl": {
- "type": "number",
- "min": "0",
- "step": "0.5"
- }
- },
- "axisLabel.borderType": {
- "desc": "\n\n\n<p>the text fragment border type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n<p>Since <code class=\"codespan\">v5.0.0</code>, it can also be a number or a number array to specify the <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\" target=\"_blank\">dash [...]
- "uiControl": {
- "type": "enum",
- "default": "solid",
- "options": "solid,dashed,dotted"
- }
- },
- "axisLabel.borderDashOffset": {
- "desc": "<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To set the line dash offset. With \n<code class=\"codespan\">borderType</code>\n, we can make the line style more flexible.</p>\n<p>Refer to MDN <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset\" target=\"_blank\">lineDashOffset</a> for more details.</p>\n",
- "uiControl": {
- "type": "number",
- "min": "0",
- "step": "1",
- "default": "0"
- }
- },
- "axisLabel.borderRadius": {
- "desc": "\n\n<p>Border radius of the text fragment.</p>\n",
- "uiControl": {
- "type": "vector",
- "min": "0",
- "dims": "LT,RT, RB, LB"
- }
- },
- "axisLabel.padding": {
- "desc": "\n\n<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code cl [...]
- "uiControl": {
- "type": "vector",
- "min": "0",
- "dims": "T,R,B,L"
- }
- },
- "axisLabel.shadowColor": {
- "desc": "\n\n<p>Shadow color of the text block.</p>\n",
- "uiControl": {
- "type": "color"
- }
- },
- "axisLabel.shadowBlur": {
- "desc": "\n\n<p>Show blur of the text block.</p>\n",
- "uiControl": {
- "type": "number",
- "min": "0",
- "step": "0.5"
- }
- },
- "axisLabel.shadowOffsetX": {
- "desc": "\n\n<p>Shadow X offset of the text block.</p>\n",
- "uiControl": {
- "type": "number",
- "step": "0.5"
- }
- },
- "axisLabel.shadowOffsetY": {
- "desc": "\n\n<p>Shadow Y offset of the text block.</p>\n",
- "uiControl": {
- "type": "number",
- "step": "0.5"
- }
- },
- "axisLabel.width": {
- "desc": "\n\n<p>Width of text block.</p>\n",
- "uiControl": {
- "type": "number",
- "default": "100",
- "min": "1",
- "max": "500",
- "step": "1"
- }
- },
- "axisLabel.height": {
- "desc": "\n\n<p>Height of text block.</p>\n",
- "uiControl": {
- "type": "number",
- "default": "50",
- "min": "1",
- "max": "500",
- "step": "1"
- }
- },
- "axisLabel.textBorderColor": {
- "desc": "\n\n<p>Stroke color of the text.</p>\n",
- "uiControl": {
- "type": "color"
- }
- },
- "axisLabel.textBorderWidth": {
- "desc": "\n\n<p>Stroke line width of the text.</p>\n",
- "uiControl": {
- "type": "number",
- "min": "0",
- "step": "0.5"
- }
- },
- "axisLabel.textBorderType": {
- "desc": "\n\n\n<p>Stroke line type of the text.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n<p>Since <code class=\"codespan\">v5.0.0</code>, it can also be a number or a number array to specify the <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\" target=\"_blank\">dash [...]
- "uiControl": {
- "type": "enum",
- "default": "solid",
- "options": "solid,dashed,dotted"
- }
- },
- "axisLabel.textBorderDashOffset": {
- "desc": "<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To set the line dash offset. With \n<code class=\"codespan\">textBorderType</code>\n, we can make the line style more flexible.</p>\n<p>Refer to MDN <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset\" target=\"_blank\">lineDashOffset</a> for more details.</p>\n",
- "uiControl": {
- "type": "number",
- "min": "0",
- "step": "1",
- "default": "0"
- }
- },
- "axisLabel.textShadowColor": {
- "desc": "\n\n<p>Shadow color of the text itself.</p>\n",
- "uiControl": {
- "type": "color",
- "default": "#000"
- }
- },
- "axisLabel.textShadowBlur": {
- "desc": "\n\n<p>Shadow blue of the text itself.</p>\n",
- "uiControl": {
- "type": "number",
- "min": "0",
- "step": "0.5"
- }
- },
- "axisLabel.textShadowOffsetX": {
- "desc": "\n\n<p>Shadow X offset of the text itself.</p>\n",
- "uiControl": {
- "type": "number",
- "step": "0.5"
- }
- },
- "axisLabel.textShadowOffsetY": {
- "desc": "\n\n<p>Shadow Y offset of the text itself.</p>\n",
- "uiControl": {
- "type": "number",
- "step": "0.5"
- }
- },
- "axisLabel.overflow": {
- "desc": "\n\n<p>Determine how to display the text when it's overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">'break'</code> Break by word</li>\n<li><code class=\"codespan\">'breakAll'</code> Break by character.</li>\n</ul>\n",
- "uiControl": {
- "type": "enum",
- "options": "truncate,break,breakAll"
- }
- },
- "axisLabel.ellipsis": {
- "desc": "<p>Ellipsis to be displayed when <code class=\"codespan\">overflow</code> is set to <code class=\"codespan\">truncate</code>.</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> Truncate the overflow lines.</li>\n</ul>\n"
- },
- "axisLabel.rich": {
- "desc": "<p>"Rich text styles" can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-ts\">label: {\n // Styles defined in 'rich' can be applied to some fragments\n // of text by adding some markers to those fragment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet} [...]
- },
- "axisLabel.rich.<style_name>.color": {
- "desc": "\n\n<p> text color.</p>\n",
- "uiControl": {
- "type": "color",
- "default": "null"
- }
- },
- "axisLabel.rich.<style_name>.fontStyle": {
- "desc": "\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n",
- "uiControl": {
- "type": "enum",
- "default": "normal",
- "options": "normal,italic,oblique"
- }
- },
- "axisLabel.rich.<style_name>.fontWeight": {
- "desc": "\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
- "uiControl": {
- "type": "enum",
- "default": "normal",
- "options": "normal,bold,bolder,lighter"
- }
- },
- "axisLabel.rich.<style_name>.fontFamily": {
- "desc": "\n\n<p> font family.</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "uiControl": {
- "type": "enum",
- "default": "sans-serif",
- "options": "sans-serif,serif,monospace,Arial,Courier New"
- }
- },
- "axisLabel.rich.<style_name>.fontSize": {
- "desc": "\n\n<p> font size.</p>\n",
- "uiControl": {
- "type": "number",
- "default": "12",
- "min": "1",
- "step": "1"
- }
- },
- "axisLabel.rich.<style_name>.align": {
- "desc": "\n\n<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-t [...]
- "uiControl": {
- "type": "enum",
- "options": "left,center,right"
- }
- },
- "axisLabel.rich.<style_name>.verticalAlign": {
- "desc": "\n\n<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code [...]
- "uiControl": {
- "type": "enum",
- "options": "top,middle,bottom"
- }
- },
- "axisLabel.rich.<style_name>.lineHeight": {
- "desc": "\n\n<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-ts\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n",
- "uiControl": {
- "type": "number",
- "min": "0",
- "step": "1",
- "default": "12"
- }
- },
- "axisLabel.rich.<style_name>.backgroundColor": {
- "desc": "\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElemen [...]
- "uiControl": {
- "type": "color",
- "default": "#fff"
- }
- },
- "axisLabel.rich.<style_name>.borderColor": {
- "desc": "\n\n<p>Border color of the text fragment.</p>\n",
- "uiControl": {
- "type": "color",
- "default": "#fff"
- }
- },
- "axisLabel.rich.<style_name>.borderWidth": {
- "desc": "\n\n<p>Border width of the text fragment.</p>\n",
- "uiControl": {
- "type": "number",
- "min": "0",
- "step": "0.5"
- }
- },
- "axisLabel.rich.<style_name>.borderType": {
- "desc": "\n\n\n<p>the text fragment border type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n<p>Since <code class=\"codespan\">v5.0.0</code>, it can also be a number or a number array to specify the <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\" target=\"_blank\">dash [...]
- "uiControl": {
- "type": "enum",
- "default": "solid",
- "options": "solid,dashed,dotted"
- }
- },
- "axisLabel.rich.<style_name>.borderDashOffset": {
- "desc": "<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To set the line dash offset. With \n<code class=\"codespan\">borderType</code>\n, we can make the line style more flexible.</p>\n<p>Refer to MDN <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset\" target=\"_blank\">lineDashOffset</a> for more details.</p>\n",
- "uiControl": {
- "type": "number",
- "min": "0",
- "step": "1",
- "default": "0"
- }
- },
- "axisLabel.rich.<style_name>.borderRadius": {
- "desc": "\n\n<p>Border radius of the text fragment.</p>\n",
- "uiControl": {
- "type": "vector",
- "min": "0",
- "dims": "LT,RT, RB, LB"
- }
- },
- "axisLabel.rich.<style_name>.padding": {
- "desc": "\n\n<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code cl [...]
- "uiControl": {
- "type": "vector",
- "min": "0",
- "dims": "T,R,B,L"
- }
- },
- "axisLabel.rich.<style_name>.shadowColor": {
- "desc": "\n\n<p>Shadow color of the text block.</p>\n",
- "uiControl": {
- "type": "color"
- }
- },
- "axisLabel.rich.<style_name>.shadowBlur": {
- "desc": "\n\n<p>Show blur of the text block.</p>\n",
- "uiControl": {
- "type": "number",
- "min": "0",
- "step": "0.5"
- }
- },
- "axisLabel.rich.<style_name>.shadowOffsetX": {
- "desc": "\n\n<p>Shadow X offset of the text block.</p>\n",
- "uiControl": {
- "type": "number",
- "step": "0.5"
- }
- },
- "axisLabel.rich.<style_name>.shadowOffsetY": {
- "desc": "\n\n<p>Shadow Y offset of the text block.</p>\n",
... 1515166 lines suppressed ...
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org