You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by su...@apache.org on 2020/06/30 06:43:16 UTC
[incubator-echarts-website] branch asf-site updated: update doc
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch asf-site
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-website.git
The following commit(s) were added to refs/heads/asf-site by this push:
new b3f88a6 update doc
b3f88a6 is described below
commit b3f88a6049c8206c87aa08c5bec7cfbb11b8fc94
Author: 100pah <su...@gmail.com>
AuthorDate: Tue Jun 30 14:40:48 2020 +0800
update doc
---
components/builder.html | 2 +-
components/download.html | 4 +-
en/404.html | 2 +-
en/api.html | 8 +-
en/builder.html | 2 +-
en/builder/echarts.html | 2 +-
en/changelog.html | 2 +-
en/cheat-sheet.html | 2 +-
en/coding-standard.html | 2 +-
en/committers.html | 2 +-
en/css/SourceCodePro-Regular.woff | Bin 0 -> 89796 bytes
en/css/doc-bundle.css | 737 +-
en/css/doc-bundle.css.map | 2 +-
en/css/icon.eot | Bin 0 -> 1440 bytes
en/css/icon.svg | 11 +
en/css/icon.ttf | Bin 0 -> 1276 bytes
en/css/icon.woff | Bin 0 -> 1352 bytes
en/dependencies.html | 2 +-
en/documents/api-parts/api.action.json | 148 +-
en/documents/api-parts/api.echarts.json | 56 +-
en/documents/api-parts/api.echartsInstance.json | 84 +-
en/documents/api-parts/api.events.json | 116 +-
en/documents/api-parts/api.json | 16 +-
en/documents/api.json | 2 +-
en/documents/option-gl-parts/option-gl.geo3D.json | 680 +-
en/documents/option-gl-parts/option-gl.globe.json | 464 +-
en/documents/option-gl-parts/option-gl.grid3D.json | 528 +-
en/documents/option-gl-parts/option-gl.json | 72 +-
.../option-gl-parts/option-gl.mapbox3D.json | 268 +-
.../option-gl-parts/option-gl.series-bar3D.json | 356 +-
.../option-gl-parts/option-gl.series-flowGL.json | 48 +-
.../option-gl-parts/option-gl.series-graphGL.json | 184 +-
.../option-gl-parts/option-gl.series-line3D.json | 88 +-
.../option-gl-parts/option-gl.series-lines3D.json | 108 +-
.../option-gl-parts/option-gl.series-map3D.json | 684 +-
.../option-gl.series-polygons3D.json | 44 +-
.../option-gl.series-scatter3D.json | 188 +-
.../option-gl.series-scatterGL.json | 84 +-
.../option-gl-parts/option-gl.series-surface.json | 256 +-
.../option-gl-parts/option-gl.xAxis3D.json | 308 +-
.../option-gl-parts/option-gl.yAxis3D.json | 308 +-
.../option-gl-parts/option-gl.zAxis3D.json | 308 +-
en/documents/option-gl.json | 2 +-
en/documents/option-parts/option-outline.json | 2 +-
en/documents/option-parts/option.angleAxis.json | 2008 ++-
en/documents/option-parts/option.aria.json | 108 +-
en/documents/option-parts/option.axisPointer.json | 476 +-
en/documents/option-parts/option.brush.json | 68 +-
en/documents/option-parts/option.calendar.json | 1616 ++-
.../option-parts/option.dataZoom-inside.json | 157 +-
.../option-parts/option.dataZoom-slider.json | 575 +-
en/documents/option-parts/option.dataset.json | 16 +-
en/documents/option-parts/option.edgeShape.json | 479 -
en/documents/option-parts/option.geo.json | 2050 ++-
en/documents/option-parts/option.graphic.json | 1708 ++-
en/documents/option-parts/option.grid.json | 799 +-
en/documents/option-parts/option.json | 648 +-
en/documents/option-parts/option.legend.json | 1788 ++-
en/documents/option-parts/option.parallel.json | 1875 ++-
en/documents/option-parts/option.parallelAxis.json | 1830 ++-
en/documents/option-parts/option.polar.json | 691 +-
en/documents/option-parts/option.radar.json | 1321 +-
en/documents/option-parts/option.radiusAxis.json | 2454 +++-
en/documents/option-parts/option.series-bar.json | 7862 ++++++++++--
.../option-parts/option.series-boxplot.json | 6098 +++++++--
.../option-parts/option.series-candlestick.json | 6177 +++++++--
.../option-parts/option.series-custom.json | 2242 +++-
.../option-parts/option.series-effectScatter.json | 8112 ++++++++++--
.../option-parts/option.series-funnel.json | 8072 ++++++++++--
en/documents/option-parts/option.series-gauge.json | 7260 +++++++++--
en/documents/option-parts/option.series-graph.json | 11452 ++++++++++++++---
.../option-parts/option.series-heatmap.json | 7620 +++++++++--
en/documents/option-parts/option.series-line.json | 8257 ++++++++++--
en/documents/option-parts/option.series-lines.json | 7419 +++++++++--
en/documents/option-parts/option.series-map.json | 7904 ++++++++++--
.../option-parts/option.series-parallel.json | 543 +-
.../option-parts/option.series-pictorialBar.json | 8319 ++++++++++--
en/documents/option-parts/option.series-pie.json | 8272 ++++++++++--
en/documents/option-parts/option.series-radar.json | 3188 ++++-
.../option-parts/option.series-sankey.json | 3079 ++++-
.../option-parts/option.series-scatter.json | 8114 ++++++++++--
.../option-parts/option.series-sunburst.json | 6886 ++++++++--
.../option-parts/option.series-themeRiver.json | 1304 +-
en/documents/option-parts/option.series-tree.json | 3479 ++++-
.../option-parts/option.series-treemap.json | 7612 +++++++++--
en/documents/option-parts/option.singleAxis.json | 3164 ++++-
en/documents/option-parts/option.textStyle.json | 112 +-
en/documents/option-parts/option.timeline.json | 1282 +-
en/documents/option-parts/option.title.json | 847 +-
en/documents/option-parts/option.toolbox.json | 1623 ++-
en/documents/option-parts/option.tooltip.json | 744 +-
.../option-parts/option.visualMap-continuous.json | 317 +-
.../option-parts/option.visualMap-piecewise.json | 352 +-
en/documents/option-parts/option.xAxis.json | 2491 +++-
en/documents/option-parts/option.yAxis.json | 2491 +++-
en/documents/option.json | 2 +-
en/documents/tutorial-parts/tutorial.json | 72 +-
en/documents/tutorial.json | 2 +-
en/download-extension.html | 2 +-
en/download-map.html | 2 +-
en/download-theme.html | 2 +-
en/download.html | 4 +-
en/faq.html | 2 +-
en/feature.html | 2 +-
en/index.html | 4 +-
en/js/doc-bundle.js | 8 +-
en/maillist.html | 2 +-
en/option-gl.html | 8 +-
en/option.html | 8 +-
en/option3.html | 2 +-
en/tutorial.html | 8 +-
examples/data-gl/animating-contour-on-globe.js | 14 +-
examples/data-gl/bar3d-dataset.js | 2 +-
examples/data-gl/bar3d-global-population.js | 2 +-
examples/data-gl/bar3d-mapbox-view-change.js | 4 +-
examples/data-gl/bar3d-music-visualization.js | 4 +-
examples/data-gl/bar3d-myth.js | 6 +-
.../bar3d-noise-modified-from-marpi-demo.js | 4 +-
examples/data-gl/bar3d-on-mapbox.js | 4 +-
examples/data-gl/bar3d-shanghai.js | 4 +-
examples/data-gl/bar3d-simplex-noise.js | 2 +-
examples/data-gl/bar3d-voxelize-image.js | 4 +-
examples/data-gl/flowGL-noise.js | 2 +-
examples/data-gl/geo3d-with-different-height.js | 6 +-
examples/data-gl/geo3d.js | 4 +-
.../data-gl/global-population-bar3d-on-globe.js | 8 +-
examples/data-gl/global-wind-visualization-2.js | 2 +-
examples/data-gl/global-wind-visualization.js | 2 +-
examples/data-gl/globe-contour-paint.js | 14 +-
examples/data-gl/globe-country-carousel.js | 4 +-
examples/data-gl/globe-displacement.js | 4 +-
examples/data-gl/globe-echarts-gl-hello-world.js | 8 +-
examples/data-gl/globe-layers.js | 10 +-
examples/data-gl/globe-moon.js | 8 +-
examples/data-gl/globe-with-echarts-surface.js | 2 +-
examples/data-gl/graphgl-large-internet.js | 2 +-
examples/data-gl/graphgl-npm-dep.js | 4 +-
examples/data-gl/image-surface-sushuang.js | 2 +-
examples/data-gl/image-to-bar3d.js | 2 +-
examples/data-gl/iron-globe.js | 12 +-
examples/data-gl/lines3d-airline-on-globe.js | 6 +-
examples/data-gl/lines3d-flight-path-on-mapbox.js | 2 +-
examples/data-gl/lines3d-flights-gl.js | 2 +-
examples/data-gl/lines3d-flights-on-geo3d.js | 4 +-
examples/data-gl/lines3d-flights.js | 8 +-
examples/data-gl/lines3d-taxi-chengdu.js | 2 +-
.../data-gl/lines3d-taxi-routes-of-cape-town.js | 6 +-
examples/data-gl/linesGL-ny.js | 2 +-
examples/data-gl/map3d-alcohol-consumption.js | 4 +-
examples/data-gl/map3d-buildings-on-mapbox.js | 4 +-
examples/data-gl/map3d-buildings.js | 4 +-
examples/data-gl/map3d-colorful-cities.js | 4 +-
...d-plastic-material-style-buildings-on-mapbox.js | 4 +-
examples/data-gl/map3d-wood-city.js | 6 +-
examples/data-gl/map3d-wood-map-on-mapbox.js | 10 +-
examples/data-gl/map3d-wood-map.js | 16 +-
examples/data-gl/metal-bar3d.js | 4 +-
examples/data-gl/metal-surface.js | 2 +-
examples/data-gl/parametric-surface-rose.js | 4 +-
examples/data-gl/scatter3D-dataset.js | 2 +-
examples/data-gl/scatter3d-globe-population.js | 8 +-
examples/data-gl/scatter3d-orthographic.js | 2 +-
examples/data-gl/scatter3d-scatter.js | 2 +-
examples/data-gl/scatter3d-shanghai.js | 2 +-
examples/data-gl/scatter3d-simplex-noise.js | 2 +-
.../data-gl/scatter3d-weibo-checkin-on-mapbox.js | 2 +-
examples/data-gl/scatter3d.js | 2 +-
examples/data-gl/scatterGL-gps.js | 2 +-
examples/data-gl/scattergl-weibo.js | 2 +-
examples/data-gl/stacked-bar3d.js | 2 +-
examples/data-gl/surface-breather.js | 2 +-
examples/data-gl/surface-golden-rose.js | 2 +-
examples/data-gl/surface-leather.js | 8 +-
examples/data-gl/surface-mollusc-shell.js | 2 +-
examples/data-gl/surface-theme-roses.js | 2 +-
examples/data/bar-rich-text.js | 6 +-
examples/data/candlestick-brush.js | 2 +-
examples/data/confidence-band.js | 2 +-
examples/data/custom-gantt-flight.js | 2 +-
examples/data/custom-hexbin.js | 4 +-
examples/data/custom-ohlc.js | 2 +-
examples/data/custom-wind.js | 2 +-
examples/data/dataset-encode1.js | 2 +-
.../data/doc-example/bar-dataZoom-filterMode.js | 2 +-
examples/data/doc-example/bar-media-timeline.js | 4 +-
.../data/doc-example/candlestick-axisPointer.js | 2 +-
.../doc-example/map-visualMap-continuous-text.js | 2 +-
.../doc-example/map-visualMap-piecewise-text.js | 2 +-
.../data/doc-example/pictorialBar-graphicType.js | 2 +-
examples/data/doc-example/pie-media.js | 4 +-
examples/data/doc-example/title-block.js | 6 +-
examples/data/doc-example/treemap-borderColor.js | 2 +-
examples/data/graph-circular-layout.js | 2 +-
examples/data/graph-force.js | 2 +-
examples/data/graph-life-expectancy.js | 2 +-
examples/data/graph-npm.js | 2 +-
examples/data/graph-webkit-dep.js | 2 +-
examples/data/graph.js | 2 +-
examples/data/heatmap-bmap.js | 2 +-
examples/data/line-aqi.js | 2 +-
examples/data/lines-airline.js | 2 +-
examples/data/lines-bmap-bus.js | 2 +-
examples/data/lines-bmap-effect.js | 2 +-
examples/data/lines-bmap.js | 2 +-
examples/data/lines-ny.js | 2 +-
examples/data/map-HK.js | 2 +-
examples/data/map-labels.js | 4 +-
examples/data/map-province.js | 2 +-
examples/data/map-usa.js | 2 +-
examples/data/mix-zoom-on-value.js | 2 +-
examples/data/parallel-nutrients.js | 2 +-
examples/data/pictorialBar-hill.js | 4 +-
examples/data/pie-rich-text.js | 6 +-
examples/data/sankey-energy.js | 2 +-
examples/data/sankey-levels.js | 2 +-
examples/data/sankey-nodeAlign-left.js | 2 +-
examples/data/sankey-nodeAlign-right.js | 2 +-
examples/data/scatter-life-expectancy-timeline.js | 2 +-
examples/data/scatter-nebula.js | 2 +-
examples/data/scatter-nutrients-matrix.js | 2 +-
examples/data/scatter-nutrients.js | 2 +-
examples/data/scatter-painter-choice.js | 2 +-
examples/data/scatter-stream-visual.js | 2 +-
examples/data/scatter-weibo.js | 2 +-
examples/data/tree-basic.js | 2 +-
examples/data/tree-orient-bottom-top.js | 2 +-
examples/data/tree-orient-right-left.js | 2 +-
examples/data/tree-radial.js | 2 +-
examples/data/tree-vertical.js | 2 +-
examples/data/treemap-disk.js | 2 +-
examples/data/treemap-drill-down.js | 2 +-
examples/data/treemap-obama.js | 2 +-
examples/data/treemap-show-parent.js | 2 +-
examples/data/treemap-visual.js | 2 +-
examples/data/wind-barb.js | 8 +-
examples/en/editor.html | 8 +-
examples/en/index.html | 8 +-
examples/en/view.html | 8 +-
examples/screenshot.html | 4 +-
examples/zh/editor.html | 8 +-
examples/zh/index.html | 8 +-
examples/zh/view.html | 8 +-
layouts/basic.html | 2 +-
layouts/doc-old.html | 8 +-
layouts/doc.html | 8 +-
zh/404.html | 2 +-
zh/api.html | 8 +-
zh/builder.html | 4 +-
zh/builder/echarts.html | 2 +-
zh/builder3.html | 4 +-
zh/changelog.html | 6 +-
zh/cheat-sheet.html | 2 +-
zh/coding-standard.html | 2 +-
zh/committers.html | 2 +-
zh/css/SourceCodePro-Regular.woff | Bin 0 -> 89796 bytes
zh/css/doc-bundle.css | 737 +-
zh/css/doc-bundle.css.map | 2 +-
zh/css/icon.eot | Bin 0 -> 1440 bytes
zh/css/icon.svg | 11 +
zh/css/icon.ttf | Bin 0 -> 1276 bytes
zh/css/icon.woff | Bin 0 -> 1352 bytes
zh/demo.html | 2 +-
zh/dependencies.html | 2 +-
zh/documents/api-parts/api.action.json | 164 +-
zh/documents/api-parts/api.echarts.json | 56 +-
zh/documents/api-parts/api.echartsInstance.json | 84 +-
zh/documents/api-parts/api.events.json | 128 +-
zh/documents/api-parts/api.json | 16 +-
zh/documents/api.json | 2 +-
zh/documents/option-gl-parts/option-gl.geo3D.json | 680 +-
zh/documents/option-gl-parts/option-gl.globe.json | 464 +-
zh/documents/option-gl-parts/option-gl.grid3D.json | 528 +-
zh/documents/option-gl-parts/option-gl.json | 72 +-
.../option-gl-parts/option-gl.mapbox3D.json | 268 +-
.../option-gl-parts/option-gl.series-bar3D.json | 356 +-
.../option-gl-parts/option-gl.series-flowGL.json | 48 +-
.../option-gl-parts/option-gl.series-graphGL.json | 184 +-
.../option-gl-parts/option-gl.series-line3D.json | 88 +-
.../option-gl-parts/option-gl.series-lines3D.json | 108 +-
.../option-gl-parts/option-gl.series-map3D.json | 684 +-
.../option-gl.series-polygons3D.json | 44 +-
.../option-gl.series-scatter3D.json | 188 +-
.../option-gl.series-scatterGL.json | 84 +-
.../option-gl-parts/option-gl.series-surface.json | 256 +-
.../option-gl-parts/option-gl.xAxis3D.json | 308 +-
.../option-gl-parts/option-gl.yAxis3D.json | 308 +-
.../option-gl-parts/option-gl.zAxis3D.json | 308 +-
zh/documents/option-gl.json | 2 +-
zh/documents/option-parts/option-outline.json | 2 +-
zh/documents/option-parts/option.angleAxis.json | 2053 ++-
zh/documents/option-parts/option.aria.json | 108 +-
zh/documents/option-parts/option.axisPointer.json | 476 +-
zh/documents/option-parts/option.brush.json | 68 +-
zh/documents/option-parts/option.calendar.json | 1616 ++-
.../option-parts/option.dataZoom-inside.json | 157 +-
.../option-parts/option.dataZoom-slider.json | 575 +-
zh/documents/option-parts/option.dataset.json | 16 +-
zh/documents/option-parts/option.geo.json | 2331 +++-
zh/documents/option-parts/option.graphic.json | 1708 ++-
zh/documents/option-parts/option.grid.json | 799 +-
zh/documents/option-parts/option.json | 655 +-
zh/documents/option-parts/option.legend.json | 1787 ++-
zh/documents/option-parts/option.parallel.json | 1879 ++-
zh/documents/option-parts/option.parallelAxis.json | 1834 ++-
zh/documents/option-parts/option.polar.json | 691 +-
zh/documents/option-parts/option.radar.json | 1328 +-
zh/documents/option-parts/option.radiusAxis.json | 2499 +++-
zh/documents/option-parts/option.series-bar.json | 9561 ++++++++++++--
.../option-parts/option.series-boxplot.json | 7480 +++++++++--
.../option-parts/option.series-candlestick.json | 7543 +++++++++--
.../option-parts/option.series-custom.json | 2242 +++-
.../option-parts/option.series-effectScatter.json | 9493 ++++++++++++--
.../option-parts/option.series-funnel.json | 9449 ++++++++++++--
zh/documents/option-parts/option.series-gauge.json | 8637 +++++++++++--
zh/documents/option-parts/option.series-graph.json | 12814 ++++++++++++++++---
.../option-parts/option.series-heatmap.json | 8986 +++++++++++--
zh/documents/option-parts/option.series-line.json | 9645 ++++++++++++--
zh/documents/option-parts/option.series-lines.json | 8789 +++++++++++--
zh/documents/option-parts/option.series-map.json | 9318 ++++++++++++--
.../option-parts/option.series-parallel.json | 451 +-
.../option-parts/option.series-pictorialBar.json | 9685 ++++++++++++--
zh/documents/option-parts/option.series-pie.json | 9630 ++++++++++++--
zh/documents/option-parts/option.series-radar.json | 3214 ++++-
.../option-parts/option.series-sankey.json | 3083 ++++-
.../option-parts/option.series-scatter.json | 9488 ++++++++++++--
.../option-parts/option.series-sunburst.json | 6886 ++++++++--
.../option-parts/option.series-themeRiver.json | 1308 +-
zh/documents/option-parts/option.series-tree.json | 3969 +++++-
.../option-parts/option.series-treemap.json | 7750 +++++++++--
zh/documents/option-parts/option.singleAxis.json | 3209 ++++-
zh/documents/option-parts/option.textStyle.json | 112 +-
zh/documents/option-parts/option.timeline.json | 1528 ++-
zh/documents/option-parts/option.title.json | 847 +-
zh/documents/option-parts/option.toolbox.json | 1623 ++-
zh/documents/option-parts/option.tooltip.json | 744 +-
.../option-parts/option.visualMap-continuous.json | 317 +-
.../option-parts/option.visualMap-piecewise.json | 356 +-
zh/documents/option-parts/option.xAxis.json | 2536 +++-
zh/documents/option-parts/option.yAxis.json | 2536 +++-
zh/documents/option.json | 2 +-
zh/documents/tutorial-parts/tutorial.json | 88 +-
zh/documents/tutorial.json | 2 +-
zh/download-extension.html | 2 +-
zh/download-map.html | 2 +-
zh/download-theme.html | 2 +-
zh/download.html | 4 +-
zh/download3.html | 4 +-
zh/examples.html | 2 +-
zh/faq.html | 2 +-
zh/feature.html | 2 +-
zh/index.html | 4 +-
zh/js/doc-bundle.js | 8 +-
zh/maillist.html | 2 +-
zh/option-gl.html | 8 +-
zh/option.html | 8 +-
zh/option3.html | 8 +-
zh/spreadsheet.html | 8 +-
zh/tutorial.html | 8 +-
358 files changed, 326900 insertions(+), 53466 deletions(-)
diff --git a/components/builder.html b/components/builder.html
index 99f7e8c..af1c1ed 100644
--- a/components/builder.html
+++ b/components/builder.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dis [...]
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dis [...]
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/components/download.html b/components/download.html
index c2ec03b..e9f50d2 100644
--- a/components/download.html
+++ b/components/download.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dis [...]
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dis [...]
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>下载 - Apache ECharts (incubating)</title><script type="text/javascript" src="https://cdn.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/zh/images/forie.png" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</ [...]
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</ [...]
//- $('.download-echarts').click(function (e) {
//- var el = document.createElement('div');
diff --git a/en/404.html b/en/404.html
index cd84c10..d4e0404 100644
--- a/en/404.html
+++ b/en/404.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dis [...]
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dis [...]
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/en/api.html b/en/api.html
index aef45d4..3527852 100644
--- a/en/api.html
+++ b/en/api.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dis [...]
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dis [...]
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -9,8 +9,8 @@
</script><title>ECharts Documentation</title><style>html, body {
/* position: sticky should not have overflow parents.*/
overflow-x: hidden;
-}</style><link rel="stylesheet" href="https://echarts.apache.org/en/css/doc-bundle.css?_v_=1593450283959"><script type="text/javascript" src="https://cdn.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" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="lo [...]
+}</style><link rel="stylesheet" href="https://echarts.apache.org/en/css/doc-bundle.css?_v_=1593499200389"><script type="text/javascript" src="https://cdn.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" alt="ie tip"></div></body><![endif]-->
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="lo [...]
</script><script type="text/javascript">window.globalArgsExtra = {
baseUrl: 'documents/api-parts',
docType: 'api',
@@ -19,7 +19,7 @@
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">document.getElementById('nav-doc').className = 'active';
-window.globalArgsExtra.version = '1593450283959';
+window.globalArgsExtra.version = '1593499200389';
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.html b/en/builder.html
index b90c2e6..a77957d 100644
--- a/en/builder.html
+++ b/en/builder.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dis [...]
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dis [...]
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/en/builder/echarts.html b/en/builder/echarts.html
index 6822732..58d8c54 100644
--- a/en/builder/echarts.html
+++ b/en/builder/echarts.html
@@ -56,7 +56,7 @@
'esprima': 'lib/esprima',
'estraverse': 'lib/estraverse'
},
- urlArgs: 'v=1593450283959'
+ urlArgs: 'v=1593499200389'
});
require(['build']);
diff --git a/en/changelog.html b/en/changelog.html
index ed13942..0999ac6 100644
--- a/en/changelog.html
+++ b/en/changelog.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dis [...]
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dis [...]
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/en/cheat-sheet.html b/en/cheat-sheet.html
index 3a7dc6a..6905688 100644
--- a/en/cheat-sheet.html
+++ b/en/cheat-sheet.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dis [...]
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dis [...]
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/en/coding-standard.html b/en/coding-standard.html
index 5fd6916..32acb4f 100644
--- a/en/coding-standard.html
+++ b/en/coding-standard.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dis [...]
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dis [...]
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/en/committers.html b/en/committers.html
index 80afc75..60c60d4 100644
--- a/en/committers.html
+++ b/en/committers.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dis [...]
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dis [...]
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/en/css/SourceCodePro-Regular.woff b/en/css/SourceCodePro-Regular.woff
new file mode 100644
index 0000000..4c18af4
Binary files /dev/null and b/en/css/SourceCodePro-Regular.woff differ
diff --git a/en/css/doc-bundle.css b/en/css/doc-bundle.css
index a203df1..12f43a4 100644
--- a/en/css/doc-bundle.css
+++ b/en/css/doc-bundle.css
@@ -1,7 +1,15 @@
-@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap);
@import url(https://fonts.googleapis.com/css?family=Montserrat&display=swap);
-.el-popper .popper__arrow,.el-popper .popper__arrow::after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.el-popper .popper__arrow{border-width:6px;-webkit-filter:drop-shadow(0 2px 12px rgba(0, 0, 0, .03));filter:drop-shadow(0 2px 12px rgba(0, 0, 0, .03))}.el-popper .popper__arrow::after{content:" ";border-width:6px}.el-popper[x-placement^=top]{margin-bottom:12px}.el-popper[x-placement^=top] .popper__arrow{bottom:-6px;left:50%;margin-right:3 [...]
+@charset "UTF-8";.el-radio-button,.el-radio-button__inner{display:inline-block;position:relative;outline:0}.el-radio-button__inner{line-height:1;white-space:nowrap;vertical-align:middle;background:#FFF;border:1px solid #DCDFE6;font-weight:500;border-left:0;color:#606266;-webkit-appearance:none;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;cursor:pointer;-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.35 [...]
.el-fade-in-enter,.el-fade-in-leave-active,.el-fade-in-linear-enter,.el-fade-in-linear-leave,.el-fade-in-linear-leave-active,.fade-in-linear-enter,.fade-in-linear-leave,.fade-in-linear-leave-active{opacity:0}.fade-in-linear-enter-active,.fade-in-linear-leave-active{-webkit-transition:opacity .2s linear;transition:opacity .2s linear}.el-fade-in-linear-enter-active,.el-fade-in-linear-leave-active{-webkit-transition:opacity .2s linear;transition:opacity .2s linear}.el-fade-in-enter-active,. [...]
+.el-radio-group{display:inline-block;line-height:1;vertical-align:middle;font-size:0}
+.el-textarea{position:relative;display:inline-block;width:100%;vertical-align:bottom;font-size:14px}.el-textarea__inner{display:block;resize:vertical;padding:5px 15px;line-height:1.5;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;font-size:inherit;color:#606266;background-color:#FFF;background-image:none;border:1px solid #DCDFE6;border-radius:4px;-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1);transition:border-color .2s cubic-bezier(.645,.045,.355,1)}. [...]
+.el-alert{width:100%;padding:8px 16px;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:4px;position:relative;background-color:#FFF;overflow:hidden;opacity:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:opacity .2s;transition:opacity .2s}.el-alert.is-light .el-alert__closebtn{color:#C0C4CC}.el-alert.is-dark .el-alert__closebtn,.el-alert.is-dark .el-alert__description{colo [...]
+.el-select-dropdown__item{font-size:14px;padding:0 20px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#606266;height:34px;line-height:34px;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer}.el-select-dropdown__item.is-disabled{color:#C0C4CC;cursor:not-allowed}.el-select-dropdown__item.is-disabled:hover{background-color:#FFF}.el-select-dropdown__item.hover,.el-select-dropdown__item:hover{background-color:#F5F7FA}.el-select-dropdown__ite [...]
+.el-popper .popper__arrow,.el-popper .popper__arrow::after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.el-popper .popper__arrow{border-width:6px;-webkit-filter:drop-shadow(0 2px 12px rgba(0, 0, 0, .03));filter:drop-shadow(0 2px 12px rgba(0, 0, 0, .03))}.el-popper .popper__arrow::after{content:" ";border-width:6px}.el-popper[x-placement^=top]{margin-bottom:12px}.el-popper[x-placement^=top] .popper__arrow{bottom:-6px;left:50%;margin-right:3 [...]
+.el-textarea{position:relative;display:inline-block;width:100%;vertical-align:bottom;font-size:14px}.el-textarea__inner{display:block;resize:vertical;padding:5px 15px;line-height:1.5;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;font-size:inherit;color:#606266;background-color:#FFF;background-image:none;border:1px solid #DCDFE6;border-radius:4px;-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1);transition:border-color .2s cubic-bezier(.645,.045,.355,1)}. [...]
+.el-color-predefine{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:12px;margin-top:8px;width:280px}.el-color-predefine__colors{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-wrap:wrap;flex-wrap:wrap}.el-color-predefine__color-selector{margin:0 0 8px 8px;width:20px;height:20px;border-radius:4px;cursor:pointer}.el-color-predefine__color-selector:nth-child(10n+1){margin-left:0}.el-color-predefine__color-selector.selected{-w [...]
+.el-switch{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;font-size:14px;line-height:20px;height:20px;vertical-align:middle}.el-switch.is-disabled .el-switch__core,.el-switch.is-disabled .el-switch__label{cursor:not-allowed}.el-switch__core,.el-switch__label{display:inline-block;cursor:pointer;vertical-align:middle}.el-switch__label{-webkit-transition:.2s;transition:.2s;height:2 [...]
+.el-popper .popper__arrow,.el-popper .popper__arrow::after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.el-popper .popper__arrow{border-width:6px;-webkit-filter:drop-shadow(0 2px 12px rgba(0, 0, 0, .03));filter:drop-shadow(0 2px 12px rgba(0, 0, 0, .03))}.el-popper .popper__arrow::after{content:" ";border-width:6px}.el-popper[x-placement^=top]{margin-bottom:12px}.el-popper[x-placement^=top] .popper__arrow{bottom:-6px;left:50%;margin-right:3 [...]
.el-drawer.ltr,.el-drawer.rtl,.el-drawer__container{top:0;bottom:0;height:100%}.el-drawer.btt,.el-drawer.ttb,.el-drawer__container{left:0;right:0;width:100%}@-webkit-keyframes el-drawer-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes el-drawer-fade-in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes rtl-drawer-in{0%{-webkit-transform:translate(100%,0);transform:translate(100%,0)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes rtl-drawer-in{0%{-webkit-transform:t [...]
.el-tooltip:focus:hover,.el-tooltip:focus:not(.focusing){outline-width:0}.el-tooltip__popper{position:absolute;border-radius:4px;padding:10px;z-index:2000;font-size:12px;line-height:1.2;min-width:10px;word-wrap:break-word}.el-tooltip__popper .popper__arrow,.el-tooltip__popper .popper__arrow::after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.el-tooltip__popper .popper__arrow{border-width:6px}.el-tooltip__popper .popper__arrow::after{conten [...]
.el-textarea{position:relative;display:inline-block;width:100%;vertical-align:bottom;font-size:14px}.el-textarea__inner{display:block;resize:vertical;padding:5px 15px;line-height:1.5;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;font-size:inherit;color:#606266;background-color:#FFF;background-image:none;border:1px solid #DCDFE6;border-radius:4px;-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1);transition:border-color .2s cubic-bezier(.645,.045,.355,1)}. [...]
@@ -9,6 +17,7 @@
.el-loading-parent--relative{position:relative!important}.el-loading-parent--hidden{overflow:hidden!important}.el-loading-mask{position:absolute;z-index:2000;background-color:rgba(255,255,255,.9);margin:0;top:0;right:0;bottom:0;left:0;-webkit-transition:opacity .3s;transition:opacity .3s}.el-loading-mask.is-fullscreen{position:fixed}.el-loading-mask.is-fullscreen .el-loading-spinner{margin-top:-25px}.el-loading-mask.is-fullscreen .el-loading-spinner .circular{height:50px;width:50px}.el-l [...]
@charset "UTF-8";.el-fade-in-enter,.el-fade-in-leave-active,.el-fade-in-linear-enter,.el-fade-in-linear-leave,.el-fade-in-linear-leave-active,.fade-in-linear-enter,.fade-in-linear-leave,.fade-in-linear-leave-active{opacity:0}.el-checkbox,.el-checkbox__input{display:inline-block;position:relative}.fade-in-linear-enter-active,.fade-in-linear-leave-active{-webkit-transition:opacity .2s linear;transition:opacity .2s linear}.el-fade-in-linear-enter-active,.el-fade-in-linear-leave-active{-webk [...]
.el-main{display:block;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-preferred-size:auto;flex-basis:auto;overflow:auto;-webkit-box-sizing:border-box;box-sizing:border-box;padding:20px}
+.el-footer{padding:0 20px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0}
.el-aside{overflow:auto;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0}
.el-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-preferred-size:auto;flex-basis:auto;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:0}.el-container.is-vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
.el-button-group>.el-button.is-active,.el-button-group>.el-button.is-disabled,.el-button-group>.el-button:active,.el-button-group>.el-button:focus,.el-button-group>.el-button:hover{z-index:1}.el-button{display:inline-block;line-height:1;white-space:nowrap;cursor:pointer;background:#FFF;border:1px solid #DCDFE6;color:#606266;-webkit-appearance:none;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;outline:0;margin:0;-webkit-transition:.1s;transition:.1s;font-weight:500 [...]
@@ -48,7 +57,7 @@
color: #eee;
}
.doc-nav .doc-nav-item {
- font-family: Monaco,'Source Code Pro', monospace;
+ font-family: 'Source Code Pro', monospace;
font-size: 13px;
white-space: nowrap;
}
@@ -104,6 +113,7 @@
}
.property-popup-desc blockquote p {
margin: 0;
+ font-size: 12px;
}
.property-popup-desc blockquote pre {
font-size: 12px;
@@ -131,14 +141,13 @@
font-size: 13px;
}
.property-popup-desc .codespan {
- padding: 2px 4px;
+ padding: 1px 5px;
font-size: 14px;
- color: #293C55;
- background-color: #f9f2f4;
+ background-color: #f4f4f4;
border-radius: 4px;
}
.property-popup-desc code *, .property-popup-desc code {
- font-family: Monaco, 'Source Code Pro', 'Courier New', monospace;
+ font-family: 'Source Code Pro', 'Courier New', monospace;
}
.property-popup-desc ol {
margin-left: 20px;
@@ -153,7 +162,7 @@
font-size: 14px;
}
.property-popup-desc a {
- font-family: Monaco,'Source Code Pro', STHeiti, "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif;
+ font-family: 'Source Code Pro', STHeiti, "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif;
}
.property-popup-desc pre {
font-size: 12px;
@@ -177,6 +186,82 @@
font-size: 12px;
}
+.control-color > * {
+ display: inline-block;
+ vertical-align: middle;
+}
+.control-color span {
+ font-size: 12px;
+ font-weight: bold;
+}
+
+.control-number .el-input-number {
+ width: 120px;
+}
+
+.control-vector > div {
+ display: inline-block;
+ margin-left: 8px;
+ font-size: 12px;
+ font-weight: bold;
+}
+.control-vector .control-vector-group > div {
+ display: inline-block;
+ margin-left: 5px;
+}
+.control-vector .el-input-number {
+ width: 90px;
+}
+.control-vector label {
+ text-transform: uppercase;
+ margin-right: 5px;
+}
+
+.control-enum-special {
+ font-style: italic;
+}
+
+.control-percent > div {
+ display: inline-block;
+}
+.control-percent .el-slider {
+ width: 200px;
+ display: inline-block;
+ vertical-align: middle;
+}
+.control-percent .el-input-number {
+ display: inline-block;
+ width: 90px;
+ margin-left: 10px;
+}
+.control-percent .el-radio-group {
+ margin-right: 10px;
+}
+.control-percent .el-radio-button--mini .el-radio-button__inner {
+ padding: 5px 4px;
+ font-size: 10px;
+}
+
+.control-percent-vector > div {
+ margin-top: 3px;
+ font-size: 12px;
+ font-weight: bold;
+}
+.control-percent-vector > div > label {
+ text-transform: uppercase;
+ margin-right: 5px;
+}
+.control-percent-vector .control-percent, .control-percent-vector label {
+ display: inline-block;
+}
+.control-percent-vector .control-percent .el-slider {
+ width: 100px;
+}
+
+.option-control {
+ margin-top: 10px;
+}
+
.doc-content-item-card {
margin-top: 30px;
margin-left: 15px;
@@ -199,7 +284,7 @@
.doc-content-item-card h4 {
margin: 0;
padding: 0;
- font-family: Monaco, 'Source Code Pro', monospace;
+ font-family: 'Source Code Pro', monospace;
}
.doc-content-item-card h4 > * {
vertical-align: bottom;
@@ -253,12 +338,29 @@
text-decoration: underline;
}
.doc-content-item-card h4 .default-value {
- color: #293c55;
+ color: #434343;
font-size: 16px;
margin-left: 15px;
vertical-align: bottom;
font-weight: normal;
}
+.doc-content-item-card h4 .control-toggle {
+ float: right;
+ font-size: 14px;
+ cursor: pointer;
+ color: #555;
+}
+.doc-content-item-card h4 .control-toggle i {
+ font-family: iconfont;
+ font-style: normal;
+ vertical-align: middle;
+}
+.doc-content-item-card h4 .control-toggle:hover {
+ color: #999;
+}
+.doc-content-item-card h4 .control-toggle.active {
+ color: #409eff;
+}
.doc-content-item-card.level-1 > h4 .anchor {
font-size: 20px;
}
@@ -269,13 +371,13 @@
font-size: 20px;
}
.doc-content-item-card.level-2 > h4 .anchor {
- font-size: 18px;
+ font-size: 16px;
}
.doc-content-item-card.level-2 > h4 .path-parent {
font-size: 14px;
}
.doc-content-item-card.level-2 > h4 .path-base {
- font-size: 18px;
+ font-size: 16px;
}
.doc-content-item-card.level-3 > h4 .anchor {
font-size: 16px;
@@ -408,24 +510,28 @@
}
.doc-content-item-card .prop-types {
margin-top: 5px;
+ display: inline-block;
+}
+.doc-content-item-card .option-control {
+ float: right;
}
.doc-content-item-card .prop-type {
display: inline-block;
margin-right: 4px;
border-radius: 4px;
padding: 3px 5px;
- color: #fff;
- background-color: #a3a3a3;
+ color: #333;
+ background-color: #f9f2f4;
font-size: 12px;
}
.doc-content-item-card .prop-type-string {
- background-color: #fd8888;
+ background-color: #f9f2f4;
}
.doc-content-item-card .prop-type-number {
- background-color: #8fb9e4;
+ background-color: #f9f2f4;
}
.doc-content-item-card .prop-type-boolean {
- background-color: #e6a23c;
+ background-color: #f9f2f4;
}
.doc-content-item-card .properties-list-panel {
max-width: 700px;
@@ -453,9 +559,532 @@
font-size: 14px;
}
-.doc-content {
+/* BASICS */
+
+.CodeMirror {
+ /* Set height, width, borders, and global font properties here */
+ font-family: monospace;
+ height: 300px;
+ color: black;
+ direction: ltr;
+}
+
+/* PADDING */
+
+.CodeMirror-lines {
+ padding: 4px 0; /* Vertical padding around content */
+}
+.CodeMirror pre.CodeMirror-line,
+.CodeMirror pre.CodeMirror-line-like {
+ padding: 0 4px; /* Horizontal padding of content */
+}
+
+.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+ background-color: white; /* The little square between H and V scrollbars */
+}
+
+/* GUTTER */
+
+.CodeMirror-gutters {
+ border-right: 1px solid #ddd;
+ background-color: #f7f7f7;
+ white-space: nowrap;
+}
+.CodeMirror-linenumbers {}
+.CodeMirror-linenumber {
+ padding: 0 3px 0 5px;
+ min-width: 20px;
+ text-align: right;
+ color: #999;
+ white-space: nowrap;
+}
+
+.CodeMirror-guttermarker { color: black; }
+.CodeMirror-guttermarker-subtle { color: #999; }
+
+/* CURSOR */
+
+.CodeMirror-cursor {
+ border-left: 1px solid black;
+ border-right: none;
+ width: 0;
+}
+/* Shown when moving in bi-directional text */
+.CodeMirror div.CodeMirror-secondarycursor {
+ border-left: 1px solid silver;
+}
+.cm-fat-cursor .CodeMirror-cursor {
+ width: auto;
+ border: 0 !important;
+ background: #7e7;
+}
+.cm-fat-cursor div.CodeMirror-cursors {
+ z-index: 1;
+}
+.cm-fat-cursor-mark {
+ background-color: rgba(20, 255, 20, 0.5);
+ -webkit-animation: blink 1.06s steps(1) infinite;
+ -moz-animation: blink 1.06s steps(1) infinite;
+ animation: blink 1.06s steps(1) infinite;
+}
+.cm-animate-fat-cursor {
+ width: auto;
+ border: 0;
+ -webkit-animation: blink 1.06s steps(1) infinite;
+ -moz-animation: blink 1.06s steps(1) infinite;
+ animation: blink 1.06s steps(1) infinite;
+ background-color: #7e7;
+}
+@-moz-keyframes blink {
+ 0% {}
+ 50% { background-color: transparent; }
+ 100% {}
+}
+@-webkit-keyframes blink {
+ 0% {}
+ 50% { background-color: transparent; }
+ 100% {}
+}
+@keyframes blink {
+ 0% {}
+ 50% { background-color: transparent; }
+ 100% {}
+}
+
+/* Can style cursor different in overwrite (non-insert) mode */
+.CodeMirror-overwrite .CodeMirror-cursor {}
+
+.cm-tab { display: inline-block; text-decoration: inherit; }
+
+.CodeMirror-rulers {
+ position: absolute;
+ left: 0; right: 0; top: -50px; bottom: 0;
+ overflow: hidden;
+}
+.CodeMirror-ruler {
+ border-left: 1px solid #ccc;
+ top: 0; bottom: 0;
+ position: absolute;
+}
+
+/* DEFAULT THEME */
+
+.cm-s-default .cm-header {color: blue;}
+.cm-s-default .cm-quote {color: #090;}
+.cm-negative {color: #d44;}
+.cm-positive {color: #292;}
+.cm-header, .cm-strong {font-weight: bold;}
+.cm-em {font-style: italic;}
+.cm-link {text-decoration: underline;}
+.cm-strikethrough {text-decoration: line-through;}
+
+.cm-s-default .cm-keyword {color: #708;}
+.cm-s-default .cm-atom {color: #219;}
+.cm-s-default .cm-number {color: #164;}
+.cm-s-default .cm-def {color: #00f;}
+.cm-s-default .cm-variable,
+.cm-s-default .cm-punctuation,
+.cm-s-default .cm-property,
+.cm-s-default .cm-operator {}
+.cm-s-default .cm-variable-2 {color: #05a;}
+.cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;}
+.cm-s-default .cm-comment {color: #a50;}
+.cm-s-default .cm-string {color: #a11;}
+.cm-s-default .cm-string-2 {color: #f50;}
+.cm-s-default .cm-meta {color: #555;}
+.cm-s-default .cm-qualifier {color: #555;}
+.cm-s-default .cm-builtin {color: #30a;}
+.cm-s-default .cm-bracket {color: #997;}
+.cm-s-default .cm-tag {color: #170;}
+.cm-s-default .cm-attribute {color: #00c;}
+.cm-s-default .cm-hr {color: #999;}
+.cm-s-default .cm-link {color: #00c;}
+
+.cm-s-default .cm-error {color: #f00;}
+.cm-invalidchar {color: #f00;}
+
+.CodeMirror-composing { border-bottom: 2px solid; }
+
+/* Default styles for common addons */
+
+div.CodeMirror span.CodeMirror-matchingbracket {color: #0b0;}
+div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
+.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
+.CodeMirror-activeline-background {background: #e8f2ff;}
+
+/* STOP */
+
+/* The rest of this file contains styles related to the mechanics of
+ the editor. You probably shouldn't touch them. */
+
+.CodeMirror {
+ position: relative;
+ overflow: hidden;
+ background: white;
+}
+
+.CodeMirror-scroll {
+ overflow: scroll !important; /* Things will break if this is overridden */
+ /* 50px is the magic margin used to hide the element's real scrollbars */
+ /* See overflow: hidden in .CodeMirror */
+ margin-bottom: -50px; margin-right: -50px;
+ padding-bottom: 50px;
+ height: 100%;
+ outline: none; /* Prevent dragging from highlighting the element */
+ position: relative;
+}
+.CodeMirror-sizer {
+ position: relative;
+ border-right: 50px solid transparent;
+}
+
+/* The fake, visible scrollbars. Used to force redraw during scrolling
+ before actual scrolling happens, thus preventing shaking and
+ flickering artifacts. */
+.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+ position: absolute;
+ z-index: 6;
+ display: none;
+}
+.CodeMirror-vscrollbar {
+ right: 0; top: 0;
+ overflow-x: hidden;
+ overflow-y: scroll;
+}
+.CodeMirror-hscrollbar {
+ bottom: 0; left: 0;
+ overflow-y: hidden;
+ overflow-x: scroll;
+}
+.CodeMirror-scrollbar-filler {
+ right: 0; bottom: 0;
+}
+.CodeMirror-gutter-filler {
+ left: 0; bottom: 0;
+}
+
+.CodeMirror-gutters {
+ position: absolute; left: 0; top: 0;
+ min-height: 100%;
+ z-index: 3;
+}
+.CodeMirror-gutter {
+ white-space: normal;
+ height: 100%;
+ display: inline-block;
+ vertical-align: top;
+ margin-bottom: -50px;
+}
+.CodeMirror-gutter-wrapper {
+ position: absolute;
+ z-index: 4;
+ background: none !important;
+ border: none !important;
+}
+.CodeMirror-gutter-background {
+ position: absolute;
+ top: 0; bottom: 0;
+ z-index: 4;
+}
+.CodeMirror-gutter-elt {
+ position: absolute;
+ cursor: default;
+ z-index: 4;
+}
+.CodeMirror-gutter-wrapper ::selection { background-color: transparent }
+.CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }
+
+.CodeMirror-lines {
+ cursor: text;
+ min-height: 1px; /* prevents collapsing before first draw */
+}
+.CodeMirror pre.CodeMirror-line,
+.CodeMirror pre.CodeMirror-line-like {
+ /* Reset some styles that the rest of the page might have set */
+ -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
+ border-width: 0;
+ background: transparent;
+ font-family: inherit;
+ font-size: inherit;
+ margin: 0;
+ white-space: pre;
+ word-wrap: normal;
+ line-height: inherit;
+ color: inherit;
+ z-index: 2;
+ position: relative;
+ overflow: visible;
+ -webkit-tap-highlight-color: transparent;
+ -webkit-font-variant-ligatures: contextual;
+ font-variant-ligatures: contextual;
+}
+.CodeMirror-wrap pre.CodeMirror-line,
+.CodeMirror-wrap pre.CodeMirror-line-like {
+ word-wrap: break-word;
+ white-space: pre-wrap;
+ word-break: normal;
+}
+
+.CodeMirror-linebackground {
+ position: absolute;
+ left: 0; right: 0; top: 0; bottom: 0;
+ z-index: 0;
+}
+
+.CodeMirror-linewidget {
+ position: relative;
+ z-index: 2;
+ padding: 0.1px; /* Force widget margins to stay inside of the container */
+}
+
+.CodeMirror-widget {}
+
+.CodeMirror-rtl pre { direction: rtl; }
+
+.CodeMirror-code {
+ outline: none;
+}
+
+/* Force content-box sizing for the elements where we expect it */
+.CodeMirror-scroll,
+.CodeMirror-sizer,
+.CodeMirror-gutter,
+.CodeMirror-gutters,
+.CodeMirror-linenumber {
+ -moz-box-sizing: content-box;
+ box-sizing: content-box;
+}
+
+.CodeMirror-measure {
+ position: absolute;
+ width: 100%;
+ height: 0;
+ overflow: hidden;
+ visibility: hidden;
+}
+
+.CodeMirror-cursor {
+ position: absolute;
+ pointer-events: none;
+}
+.CodeMirror-measure pre { position: static; }
+
+div.CodeMirror-cursors {
+ visibility: hidden;
+ position: relative;
+ z-index: 3;
+}
+div.CodeMirror-dragcursors {
+ visibility: visible;
+}
+
+.CodeMirror-focused div.CodeMirror-cursors {
+ visibility: visible;
+}
+
+.CodeMirror-selected { background: #d9d9d9; }
+.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
+.CodeMirror-crosshair { cursor: crosshair; }
+.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
+.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
+
+.cm-searching {
+ background-color: #ffa;
+ background-color: rgba(255, 255, 0, .4);
+}
+
+/* Used to force a border model for a node */
+.cm-force-border { padding-right: .1px; }
+
+@media print {
+ /* Hide the cursor when printing */
+ .CodeMirror div.CodeMirror-cursors {
+ visibility: hidden;
+ }
+}
+
+/* See issue #2901 */
+.cm-tab-wrap-hack:after { content: ''; }
+
+/* Help users use markselection to safely style text background */
+span.CodeMirror-selectedtext { background: none; }
+
+/*
+
+ Name: dracula
+ Author: Michael Kaminsky (http://github.com/mkaminsky11)
+
+ Original dracula color scheme by Zeno Rocha (https://github.com/zenorocha/dracula-theme)
+
+*/
+
+
+.cm-s-dracula.CodeMirror, .cm-s-dracula .CodeMirror-gutters {
+ background-color: #282a36 !important;
+ color: #f8f8f2 !important;
+ border: none;
+}
+.cm-s-dracula .CodeMirror-gutters { color: #282a36; }
+.cm-s-dracula .CodeMirror-cursor { border-left: solid thin #f8f8f0; }
+.cm-s-dracula .CodeMirror-linenumber { color: #6D8A88; }
+.cm-s-dracula .CodeMirror-selected { background: rgba(255, 255, 255, 0.10); }
+.cm-s-dracula .CodeMirror-line::selection, .cm-s-dracula .CodeMirror-line > span::selection, .cm-s-dracula .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.10); }
+.cm-s-dracula .CodeMirror-line::-moz-selection, .cm-s-dracula .CodeMirror-line > span::-moz-selection, .cm-s-dracula .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.10); }
+.cm-s-dracula span.cm-comment { color: #6272a4; }
+.cm-s-dracula span.cm-string, .cm-s-dracula span.cm-string-2 { color: #f1fa8c; }
+.cm-s-dracula span.cm-number { color: #bd93f9; }
+.cm-s-dracula span.cm-variable { color: #50fa7b; }
+.cm-s-dracula span.cm-variable-2 { color: white; }
+.cm-s-dracula span.cm-def { color: #50fa7b; }
+.cm-s-dracula span.cm-operator { color: #ff79c6; }
+.cm-s-dracula span.cm-keyword { color: #ff79c6; }
+.cm-s-dracula span.cm-atom { color: #bd93f9; }
+.cm-s-dracula span.cm-meta { color: #f8f8f2; }
+.cm-s-dracula span.cm-tag { color: #ff79c6; }
+.cm-s-dracula span.cm-attribute { color: #50fa7b; }
+.cm-s-dracula span.cm-qualifier { color: #50fa7b; }
+.cm-s-dracula span.cm-property { color: #66d9ef; }
+.cm-s-dracula span.cm-builtin { color: #50fa7b; }
+.cm-s-dracula span.cm-variable-3, .cm-s-dracula span.cm-type { color: #ffb86c; }
+
+.cm-s-dracula .CodeMirror-activeline-background { background: rgba(255,255,255,0.1); }
+.cm-s-dracula .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; }
+
+#example-panel {
+ position: fixed;
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+ padding: 10px 0px;
+ text-align: left;
+ background: #fff;
+}
+#example-panel h2 {
+ font-weight: normal;
+ font-size: 20px;
+ color: #333;
+ padding-left: 20px;
+ font-weight: bold;
+ margin: 5px 0;
+}
+#example-panel p.intro {
+ color: #aaa;
+ padding-left: 20px;
+ margin: 5px 0;
+ font-size: 12px;
+}
+#example-panel .preview-and-code {
+ position: absolute;
+ top: 90px;
+ bottom: 0;
+ left: 0;
+ right: 0;
+}
+#example-panel .el-alert {
+ position: absolute;
+ top: 0;
+}
+#example-panel .preview-main {
+ background: #fefefe;
+}
+#example-panel .example-code {
+ position: relative;
+}
+#example-panel .example-code .codemirror-main {
+ position: absolute;
+ left: 10px;
+ top: 10px;
+ right: 10px;
+ bottom: 15px;
+ box-shadow: -5px -5px 15px rgba(0, 0, 0, 0.1);
+}
+#example-panel .example-code .codemirror-main .CodeMirror {
+ height: 100%;
+ overflow-y: scroll;
+ border-radius: 6px;
+ font-family: 'Source Code Pro', monospace;
+ font-size: 13px;
+}
+#example-panel .example-code .codemirror-main .CodeMirror .CodeMirror-scroll {
+ padding: 15px;
+}
+#example-panel .example-code .codemirror-main .CodeMirror ::-webkit-scrollbar-thumb {
+ width: 8px;
+ min-height: 15px;
+ background: rgba(255, 255, 255, 0.3) !important;
+ -webkit-transition: all 0.3s ease-in-out;
+ transition: all 0.3s ease-in-out;
+ border-radius: 2px;
+}
+#example-panel .example-code .codemirror-main .CodeMirror .option-changed {
+ background: rgba(255, 255, 255, 0.1);
+}
+#example-panel .example-code .codemirror-main .CodeMirror .CodeMirror-cursor {
+ display: none;
+}
+#example-panel .toolbar {
+ position: absolute;
+ top: 15px;
+ right: 10px;
+}
+#example-panel .toolbar .example-list {
+ width: 180px;
+}
+#example-panel.right-layout {
+ bottom: 0;
+ top: 40px;
+ right: 10px;
+}
+#example-panel.right-layout .preview-main {
+ width: 100%;
+ height: 50%;
+}
+#example-panel.right-layout .example-code {
+ width: 100%;
+ height: 50%;
+}
+#example-panel.down-layout {
+ left: 300px;
+ bottom: 0;
+ right: 0;
+}
+#example-panel.down-layout .preview-main {
+ width: 50%;
+ height: 100%;
+ float: left;
+}
+#example-panel.down-layout .example-code {
+ width: 50%;
+ height: 100%;
+ float: left;
+}
+
+.doc-main {
margin-left: 10px;
}
+.doc-main .open-option-example {
+ position: fixed;
+ right: 0;
+ top: 50%;
+ padding: 10px;
+ border-radius: 20px 0 0 20px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+ background: #fff;
+ cursor: pointer;
+ font-size: 12px;
+}
+.doc-main .open-option-example:hover {
+ background: #eee;
+}
+.doc-main .open-option-example i {
+ font-size: 16px;
+ vertical-align: middle;
+}
+.doc-content {
+ text-align: left;
+ color: #4d555e;
+}
+.doc-content.option-example-actived.option-example-right-layout {
+ margin-right: 45%;
+}
.doc-content h2 {
color: #B03A5B;
font-size: 34px;
@@ -468,9 +1097,9 @@
}
.doc-content h3 {
font-weight: normal;
- color: #999;
- font-size: 30px;
- margin: 20px 20px 20px 0;
+ color: #969696;
+ font-size: 28px;
+ margin: 20px 0px 20px 20px;
}
.doc-content .page-description {
padding: 5px 0;
@@ -494,6 +1123,7 @@
}
.doc-content .page-description blockquote p {
margin: 0;
+ font-size: 12px;
}
.doc-content .page-description blockquote pre {
font-size: 12px;
@@ -521,14 +1151,13 @@
font-size: 13px;
}
.doc-content .page-description .codespan {
- padding: 2px 4px;
+ padding: 1px 5px;
font-size: 14px;
- color: #293C55;
- background-color: #f9f2f4;
+ background-color: #f4f4f4;
border-radius: 4px;
}
.doc-content .page-description code *, .doc-content .page-description code {
- font-family: Monaco, 'Source Code Pro', 'Courier New', monospace;
+ font-family: 'Source Code Pro', 'Courier New', monospace;
}
.doc-content .page-description ol {
margin-left: 20px;
@@ -543,7 +1172,7 @@
font-size: 14px;
}
.doc-content .page-description a {
- font-family: Monaco,'Source Code Pro', STHeiti, "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif;
+ font-family: 'Source Code Pro', STHeiti, "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif;
}
.doc-content .item-description {
margin: 0;
@@ -568,6 +1197,7 @@
}
.doc-content .item-description blockquote p {
margin: 0;
+ font-size: 12px;
}
.doc-content .item-description blockquote pre {
font-size: 12px;
@@ -595,14 +1225,13 @@
font-size: 13px;
}
.doc-content .item-description .codespan {
- padding: 2px 4px;
+ padding: 1px 5px;
font-size: 14px;
- color: #293C55;
- background-color: #f9f2f4;
+ background-color: #f4f4f4;
border-radius: 4px;
}
.doc-content .item-description code *, .doc-content .item-description code {
- font-family: Monaco, 'Source Code Pro', 'Courier New', monospace;
+ font-family: 'Source Code Pro', 'Courier New', monospace;
}
.doc-content .item-description ol {
margin-left: 20px;
@@ -617,7 +1246,7 @@
font-size: 14px;
}
.doc-content .item-description a {
- font-family: Monaco,'Source Code Pro', STHeiti, "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif;
+ font-family: 'Source Code Pro', STHeiti, "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif;
}
.ec-doc-tutorial .page-description h2 {
font-weight: normal;
@@ -625,8 +1254,10 @@
margin-left: 0;
margin-top: 40px;
}
-.ec-doc-mobile .doc-content {
+.ec-doc-mobile .doc-main {
margin-left: 0;
+}
+.ec-doc-mobile .doc-content {
background: #f2f2f2;
margin-bottom: 100px;
}
@@ -725,6 +1356,7 @@
}
.doc-search-result-item-card blockquote p {
margin: 0;
+ font-size: 12px;
}
.doc-search-result-item-card blockquote pre {
font-size: 12px;
@@ -752,14 +1384,13 @@
font-size: 13px;
}
.doc-search-result-item-card .codespan {
- padding: 2px 4px;
+ padding: 1px 5px;
font-size: 14px;
- color: #293C55;
- background-color: #f9f2f4;
+ background-color: #f4f4f4;
border-radius: 4px;
}
.doc-search-result-item-card code *, .doc-search-result-item-card code {
- font-family: Monaco, 'Source Code Pro', 'Courier New', monospace;
+ font-family: 'Source Code Pro', 'Courier New', monospace;
}
.doc-search-result-item-card ol {
margin-left: 20px;
@@ -774,7 +1405,7 @@
font-size: 14px;
}
.doc-search-result-item-card a {
- font-family: Monaco,'Source Code Pro', STHeiti, "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif;
+ font-family: 'Source Code Pro', STHeiti, "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif;
}
.doc-search-result-item-card iframe, .doc-search-result-item-card pre, .doc-search-result-item-card image {
display: none;
@@ -799,6 +1430,21 @@
padding: 0 10px;
}
+@font-face {
+ font-family: 'iconfont';
+ src: url(../css/icon.eot);
+ src: url(../css/icon.eot#iefix) format("embedded-opentype"), url(../css/icon.ttf) format("truetype"), url(../css/icon.woff) format("woff"), url(../css/icon.svg) format("svg");
+ font-weight: normal;
+ font-style: normal;
+ font-display: block;
+}
+@font-face {
+ font-family: 'Source Code Pro';
+ font-style: normal;
+ font-weight: 400;
+ font-display: swap;
+ src: url(../css/SourceCodePro-Regular.woff) format("woff");
+}
.ec-doc {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Helvetica Neue", Helvetica, Arial, sans-serif;
height: 100%;
@@ -815,16 +1461,16 @@
.ec-doc a:hover {
text-decoration: underline;
}
-.ec-doc .el-aside {
+.ec-doc > .el-aside {
border-right: 1px solid #ddd;
position: relative;
}
-.ec-doc .el-aside .doc-type-nav {
+.ec-doc > .el-aside .doc-type-nav {
border-bottom: 1px solid #eee;
margin-bottom: 10px;
margin-left: 5px;
}
-.ec-doc .el-aside .doc-type-nav a {
+.ec-doc > .el-aside .doc-type-nav a {
display: inline-block;
line-height: 35px;
width: 20%;
@@ -835,10 +1481,10 @@
cursor: pointer;
font-size: 14px;
}
-.ec-doc .el-aside .doc-type-nav a.selected {
+.ec-doc > .el-aside .doc-type-nav a.selected {
border-top: 3px solid #B03A5B;
}
-.ec-doc .el-aside .doc-nav {
+.ec-doc > .el-aside .doc-nav {
position: absolute;
top: 90px;
bottom: 0;
@@ -846,10 +1492,10 @@
right: 0;
overflow-y: scroll;
}
-.ec-doc .el-main {
+.ec-doc > .el-main {
text-align: center;
}
-.ec-doc .el-main > div {
+.ec-doc > .el-main > div {
margin: 0 auto;
text-align: left;
min-width: 100%;
@@ -857,6 +1503,9 @@
.ec-doc.ec-doc-locale-zh .doc-type-nav a {
width: 20%;
}
+.el-select-dropdown.el-popper {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
.ec-doc-mobile {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Helvetica Neue", Helvetica, Arial, sans-serif;
diff --git a/en/css/doc-bundle.css.map b/en/css/doc-bundle.css.map
index fad5e9b..8916144 100644
--- a/en/css/doc-bundle.css.map
+++ b/en/css/doc-bundle.css.map
@@ -1 +1 @@
-{"version":3,"sources":["webpack://echartsDoc/./node_modules/element-ui/lib/theme-chalk/popover.css","webpack://echartsDoc/./node_modules/element-ui/lib/theme-chalk/base.css","webpack://echartsDoc/./node_modules/element-ui/lib/theme-chalk/drawer.css","webpack://echartsDoc/./node_modules/element-ui/lib/theme-chalk/tooltip.css","webpack://echartsDoc/./node_modules/element-ui/lib/theme-chalk/input.css","webpack://echartsDoc/./node_modules/element-ui/lib/theme-chalk/autocomplete.css","webpac [...]
\ No newline at end of file
+{"version":3,"sources":["webpack://echartsDoc/./node_modules/element-ui/lib/theme-chalk/radio-button.css","webpack://echartsDoc/./node_modules/element-ui/lib/theme-chalk/base.css","webpack://echartsDoc/./node_modules/element-ui/lib/theme-chalk/radio-group.css","webpack://echartsDoc/./node_modules/element-ui/lib/theme-chalk/slider.css","webpack://echartsDoc/./node_modules/element-ui/lib/theme-chalk/alert.css","webpack://echartsDoc/./node_modules/element-ui/lib/theme-chalk/option.css","web [...]
\ No newline at end of file
diff --git a/en/css/icon.eot b/en/css/icon.eot
new file mode 100644
index 0000000..28362b4
Binary files /dev/null and b/en/css/icon.eot differ
diff --git a/en/css/icon.svg b/en/css/icon.svg
new file mode 100644
index 0000000..3dbd03e
--- /dev/null
+++ b/en/css/icon.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode=" " horiz-adv-x="512" d="" />
+<glyph unicode="" glyph-name="try" horiz-adv-x="1073" d="M292.571 813.714c0-80.791-65.494-146.286-146.286-146.286s-146.286 65.494-146.286 146.286c0 80.791 65.494 146.286 146.286 146.286s146.286-65.494 146.286-146.286zM434.812 862.476c-5.873 35.007-17.963 67.907-35.096 97.524h380.474c134.652 0 243.81-109.157 243.81-243.81v-239.922c-17.44 12.333-37.865 21.022-60.348 24.769l-37.176 6.196v208.956c0 80.791-65.494 146.286-146.286 146.286h-345.379zM146.286 521.143v-292.571c0-80.791 65.4 [...]
+</font></defs></svg>
\ No newline at end of file
diff --git a/en/css/icon.ttf b/en/css/icon.ttf
new file mode 100644
index 0000000..8523a69
Binary files /dev/null and b/en/css/icon.ttf differ
diff --git a/en/css/icon.woff b/en/css/icon.woff
new file mode 100644
index 0000000..43ac0d9
Binary files /dev/null and b/en/css/icon.woff differ
diff --git a/en/dependencies.html b/en/dependencies.html
index a75da1c..25a75b0 100644
--- a/en/dependencies.html
+++ b/en/dependencies.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dis [...]
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dis [...]
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/en/documents/api-parts/api.action.json b/en/documents/api-parts/api.action.json
index f407ee5..7d470c9 100644
--- a/en/documents/api-parts/api.action.json
+++ b/en/documents/api-parts/api.action.json
@@ -1,39 +1,113 @@
{
- "highlight": "<p>Highlights the given graphic element.</p>\n<p>Series is specified through <code class=\"codespan\">seriesName</code> or <code class=\"codespan\">seriesIndex</code>. If another data needs to be specified, then use <code class=\"codespan\">dataIndex</code> or <code class=\"codespan\">name</code>.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'highlight',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number [...]
- "downplay": "<p>Cancels highlighting graphic element.</p>\n<p>Series is specified through <code class=\"codespan\">seriesName</code> or <code class=\"codespan\">seriesIndex</code>. If another data needs to be specified, then use <code class=\"codespan\">dataIndex</code> or <code class=\"codespan\">name</code>.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'downplay',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|A [...]
- "legend": "<p>Actions related to <a href=\"option.html#legend\" target=\"_blank\">legend component</a>, which should include <a href=\"option.html#legend\" target=\"_blank\">legend component</a> before use.</p>\n",
- "legend.legendSelect": "<p>Selects legend.</p>\n<pre><code class=\"lang-js\">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": "<p>Unselects the legend.</p>\n<pre><code class=\"lang-js\">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": "<p>Toggles legend selecting state.</p>\n<pre><code class=\"lang-js\">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": "<p>Selects all legends.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'legendAllSelect'\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendselectall\">legendselectall</a></p>\n",
- "legend.legendInverseSelect": "<p>Inverses all legends.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'legendInverseSelect'\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendinverseselect\">legendinverseselect</a></p>\n",
- "legend.legendScroll": "<p>Controll 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-js\">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 ==========-->\n",
- "tooltip": "<p>Actions related to <a href=\"option.html#tooltip\" target=\"_blank\">tooltip component</a>, which should include <a href=\"option.html#tooltip\" target=\"_blank\">tooltip component</a> before use.</p>\n",
- "tooltip.showTip": "<p>Shows tooltip.</p>\n<p>There are two 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-js\">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 optio [...]
- "tooltip.hideTip": "<p>Hides tooltip.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'hideTip'\n})\n</code></pre>\n<!--============= dataZoom ==========-->\n",
- "dataZoom": "<p>Actions related to <a href=\"option.html#dataZoom\" target=\"_blank\">data region zoom component</a>, which should include <a href=\"option.html#dataZoom\" target=\"_blank\">data region zoom component</a> before use.</p>\n",
- "dataZoom.dataZoom": "<p>Zoom data region.</p>\n<pre><code class=\"lang-js\">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 loca [...]
- "dataZoom.takeGlobalCursor": "<p>Activate or inactivate <code class=\"codespan\">dataZoom</code> buttom in <code class=\"codespan\">toolbox</code>.</p>\n<pre><code class=\"lang-js\">myChart.dispatchAction({\n type: 'takeGlobalCursor',\n key: 'dataZoomSelect',\n // Activate or inactivate.\n dataZoomSelectActive: true\n});\n</code></pre>\n<!--============= visualMap ==========-->\n",
- "visualMap": "<p>Actions related to <a href=\"option.html#visualMap\" target=\"_blank\">visual mapping component</a>, which should include <a href=\"option.html#visualMap\" target=\"_blank\">visual mapping component</a> before use.</p>\n",
- "visualMap.selectDataRange": "<p>Selects data range of visual mapping.</p>\n<pre><code class=\"lang-js\">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 cate [...]
- "timeline": "<p>Actions related to <a href=\"option.html#timeline\" target=\"_blank\">timeline component</a>, which should include <a href=\"option.html#timeline\" target=\"_blank\">timeline component</a> before use.</p>\n",
- "timeline.timelineChange": "<p>Sets the current time point.</p>\n<pre><code class=\"lang-js\">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": "<p>Toggles playing status of timeline.</p>\n<pre><code class=\"lang-js\">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 ==========-->\n",
- "toolbox": "<p>Actions related to <a href=\"option.html#toolbox\" target=\"_blank\">toolbox component</a>, which should include <a href=\"option.html#toolbox\" target=\"_blank\">toolbox component</a> before use.</p>\n",
- "toolbox.restore": "<p>Resets option.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'restore'\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.restore\">restore</a>\n<!--============= pie ==========--></p>\n",
- "pie": "<p>Actions related to <a href=\"option.html#series-pie\" target=\"_blank\">pie chart</a>, which should include <a href=\"option.html#series-pie\" target=\"_blank\">pie chart</a> before use.</p>\n",
- "pie.pieSelect": "<p>Selects the specified pie chart.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'pieSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is def [...]
- "pie.pieUnSelect": "<p>Cancels selecting specified pie chart.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'pieUnSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIn [...]
- "pie.pieToggleSelect": "<p>Toggles selecting status of specified pie chart.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'pieToggleSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; i [...]
- "map": "<p>Actions related to <a href=\"option.html#series-map\" target=\"_blank\">map</a>, which should include <a href=\"option.html#series-map\" target=\"_blank\">map</a> before use.</p>\n",
- "map.mapSelect": "<p>Selects the specified map area.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'mapSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defi [...]
- "map.mapUnSelect": "<p>Cancels selecting specified map area.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'mapUnSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataInd [...]
- "map.mapToggleSelect": "<p>Toggles selecting status of specified map area.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'mapToggleSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ig [...]
- "graph": "<p>Actions related to <a href=\"option.html#series-graph\" target=\"_blank\">graph</a>, which should include <a href=\"option.html#series-graph\" target=\"_blank\">graph</a> before use.</p>\n",
- "graph.focusNodeAdjacency": "<p>Highlight the specified node and all of its adjacent nodes.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'focusNodeAdjacency',\n\n // Use seriesId or seriesIndex or seriesName to specify\n // the target series.\n seriesId: 'xxx',\n seriesIndex: 0,\n seriesName: 'nnn',\n\n // Use either `dataIndex` or `edgeDataIndex` to specify\n // the target node or target edge.\n dataIndex: 12\n edgeDa [...]
- "graph.unfocusNodeAdjacency": "<p>Reverse highlight the specified node and all of its adjacent nodes.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'unfocusNodeAdjacency',\n\n // Use seriesId or seriesIndex or seriesName to location the series.\n seriesId: 'xxx',\n seriesIndex: 0,\n seriesName: 'nnn'\n})\n</code></pre>\n<p>Event <a href=\"#event.unfocusNodeAdjacency\">unfocusNodeAdjacency</a> will be thrown finally.</p>\n<!--========= [...]
- "brush": "<p><a href=\"option.html#brush\" target=\"_blank\">brush</a> related actions.</p>\n",
- "brush.brush": "<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 [...]
- "brush.brushEnd": "<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": "<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-js\">api.dispatchAction({\n type: 'takeGlobalCursor',\n // If intending to enable brush, must [...]
+ "highlight": {
+ "desc": "<p>Highlights the given graphic element.</p>\n<p>Series is specified through <code class=\"codespan\">seriesName</code> or <code class=\"codespan\">seriesIndex</code>. If another data needs to be specified, then use <code class=\"codespan\">dataIndex</code> or <code class=\"codespan\">name</code>.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'highlight',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Ar [...]
+ },
+ "downplay": {
+ "desc": "<p>Cancels highlighting graphic element.</p>\n<p>Series is specified through <code class=\"codespan\">seriesName</code> or <code class=\"codespan\">seriesIndex</code>. If another data needs to be specified, then use <code class=\"codespan\">dataIndex</code> or <code class=\"codespan\">name</code>.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'downplay',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Arr [...]
+ },
+ "legend": {
+ "desc": "<p>Actions related to <a href=\"option.html#legend\" target=\"_blank\">legend component</a>, which should include <a href=\"option.html#legend\" target=\"_blank\">legend component</a> before use.</p>\n"
+ },
+ "legend.legendSelect": {
+ "desc": "<p>Selects legend.</p>\n<pre><code class=\"lang-js\">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-js\">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-js\">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-js\">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-js\">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>Controll 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-js\">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\n"
+ },
+ "tooltip": {
+ "desc": "<p>Actions related to <a href=\"option.html#tooltip\" target=\"_blank\">tooltip component</a>, which should include <a href=\"option.html#tooltip\" target=\"_blank\">tooltip component</a> before use.</p>\n"
+ },
+ "tooltip.showTip": {
+ "desc": "<p>Shows tooltip.</p>\n<p>There are two 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-js\">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 defa [...]
+ },
+ "tooltip.hideTip": {
+ "desc": "<p>Hides tooltip.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'hideTip'\n})\n</code></pre>\n\n"
+ },
+ "dataZoom": {
+ "desc": "<p>Actions related to <a href=\"option.html#dataZoom\" target=\"_blank\">data region zoom component</a>, which should include <a href=\"option.html#dataZoom\" target=\"_blank\">data region zoom component</a> before use.</p>\n"
+ },
+ "dataZoom.dataZoom": {
+ "desc": "<p>Zoom data region.</p>\n<pre><code class=\"lang-js\">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-js\">myChart.dispatchAction({\n type: 'takeGlobalCursor',\n key: 'dataZoomSelect',\n // Activate or inactivate.\n dataZoomSelectActive: true\n});\n</code></pre>\n\n"
+ },
+ "visualMap": {
+ "desc": "<p>Actions related to <a href=\"option.html#visualMap\" target=\"_blank\">visual mapping component</a>, which should include <a href=\"option.html#visualMap\" target=\"_blank\">visual mapping component</a> before use.</p>\n"
+ },
+ "visualMap.selectDataRange": {
+ "desc": "<p>Selects data range of visual mapping.</p>\n<pre><code class=\"lang-js\">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>, which should include <a href=\"option.html#timeline\" target=\"_blank\">timeline component</a> before use.</p>\n"
+ },
+ "timeline.timelineChange": {
+ "desc": "<p>Sets the current time point.</p>\n<pre><code class=\"lang-js\">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-js\">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\n"
+ },
+ "toolbox": {
+ "desc": "<p>Actions related to <a href=\"option.html#toolbox\" target=\"_blank\">toolbox component</a>, which should include <a href=\"option.html#toolbox\" target=\"_blank\">toolbox component</a> before use.</p>\n"
+ },
+ "toolbox.restore": {
+ "desc": "<p>Resets option.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'restore'\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.restore\">restore</a>\n<!--============= pie ==========--></p>\n"
+ },
+ "pie": {
+ "desc": "<p>Actions related to <a href=\"option.html#series-pie\" target=\"_blank\">pie chart</a>, which should include <a href=\"option.html#series-pie\" target=\"_blank\">pie chart</a> before use.</p>\n"
+ },
+ "pie.pieSelect": {
+ "desc": "<p>Selects the specified pie chart.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'pieSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n [...]
+ },
+ "pie.pieUnSelect": {
+ "desc": "<p>Cancels selecting specified pie chart.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'pieUnSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is de [...]
+ },
+ "pie.pieToggleSelect": {
+ "desc": "<p>Toggles selecting status of specified pie chart.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'pieToggleSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when d [...]
+ },
+ "map": {
+ "desc": "<p>Actions related to <a href=\"option.html#series-map\" target=\"_blank\">map</a>, which should include <a href=\"option.html#series-map\" target=\"_blank\">map</a> before use.</p>\n"
+ },
+ "map.mapSelect": {
+ "desc": "<p>Selects the specified map area.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'mapSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n [...]
+ },
+ "map.mapUnSelect": {
+ "desc": "<p>Cancels selecting specified map area.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'mapUnSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is def [...]
+ },
+ "map.mapToggleSelect": {
+ "desc": "<p>Toggles selecting status of specified map area.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'mapToggleSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when da [...]
+ },
+ "graph": {
+ "desc": "<p>Actions related to <a href=\"option.html#series-graph\" target=\"_blank\">graph</a>, which should include <a href=\"option.html#series-graph\" target=\"_blank\">graph</a> before use.</p>\n"
+ },
+ "graph.focusNodeAdjacency": {
+ "desc": "<p>Highlight the specified node and all of its adjacent nodes.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'focusNodeAdjacency',\n\n // Use seriesId or seriesIndex or seriesName to specify\n // the target series.\n seriesId: 'xxx',\n seriesIndex: 0,\n seriesName: 'nnn',\n\n // Use either `dataIndex` or `edgeDataIndex` to specify\n // the target node or target edge.\n dataIndex: 12\n edgeDataIndex: 5\n})\n</ [...]
+ },
+ "graph.unfocusNodeAdjacency": {
+ "desc": "<p>Reverse highlight the specified node and all of its adjacent nodes.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'unfocusNodeAdjacency',\n\n // Use seriesId or seriesIndex or seriesName to location the series.\n seriesId: 'xxx',\n seriesIndex: 0,\n seriesName: 'nnn'\n})\n</code></pre>\n<p>Event <a href=\"#event.unfocusNodeAdjacency\">unfocusNodeAdjacency</a> will be thrown finally.</p>\n\n"
+ },
+ "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-js\">api.dispatchAction({\n type: 'takeGlobalCursor',\n // If intending to enable brush, must set. Otherwise, [...]
+ }
}
\ 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 8ded50b..6a8ac99 100644
--- a/en/documents/api-parts/api.echarts.json
+++ b/en/documents/api-parts/api.echarts.json
@@ -1,16 +1,44 @@
{
- "init": "<pre><code class=\"lang-js\">(dom: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: {\n devicePixelRatio?: number,\n renderer?: string,\n width?: number|string,\n height?: number|string\n}) => ECharts\n</code></pre>\n<p>Creates an ECharts instance, and returns an <a href=\"#echartsInstance\">echartsInstance</a>. You shall not initialize multiple ECharts instances on a single container.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code cl [...]
- "connect": "<pre><code class=\"lang-js\">(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-js\">// set group id of each instance respectively.\nchart1.group = 'group1';\nchart2.group = 'group1';\necharts.connect('group1');\ [...]
- "disconnect": "<pre><code class=\"lang-js\">(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": "<pre><code class=\"lang-js\">(target: ECharts|HTMLDivElement|HTMLCanvasElement)\n</code></pre>\n<p>Destroys chart instance, after which the instance cannot be used any more.</p>\n",
- "getInstanceByDom": "<pre><code class=\"lang-js\">(target: HTMLDivElement|HTMLCanvasElement) => ECharts\n</code></pre>\n<p>Returns chart instance of dom container.</p>\n",
- "registerMap": "<pre><code class=\"lang-js\">(mapName: string, geoJson: Object, specialAreas?: Object)\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 href=\"option.html#series-map\" target=\"_blank\">map</a>.</p>\n<p>Please refer to <a href=\"option.html#geo.map\" target=\"_blank\">option.geo</a> for usage.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code [...]
- "getMap": "<pre><code class=\"lang-js\">(mapName: string)\n</code></pre>\n<p>Get a registered map in the following format:</p>\n<pre><code class=\"lang-js\">{\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",
- "registerTheme": "<pre><code class=\"lang-js\">(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",
- "graphic": "<p>Util methods about graphics.</p>\n",
- "graphic.extendShape": "<p>Create a new shape class.</p>\n<pre><code class=\"lang-js\">(\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": "<p>Register a user defined shape.</p>\n<pre><code class=\"lang-js\">(\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 ov [...]
- "graphic.getShapeClass": "<p>Get the <a href=\"#echarts.graphic.registerShape\">registered</a> shape class.</p>\n<pre><code class=\"lang-js\">(\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\">'p [...]
- "graphic.clipPointsByRect": "<p>Clip the given points by the given rectangular.</p>\n<pre><code class=\"lang-js\">(\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": "<p>Clip the first input rectangular by the second input rectangular.</p>\n<pre><code class=\"lang-js\">(\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 re [...]
+ "init": {
+ "desc": "<pre><code class=\"lang-js\">(dom: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: {\n devicePixelRatio?: number,\n renderer?: string,\n width?: number|string,\n height?: number|string\n}) => ECharts\n</code></pre>\n<p>Creates an ECharts instance, and returns an <a href=\"#echartsInstance\">echartsInstance</a>. You shall not initialize multiple ECharts instances on a single container.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code [...]
+ },
+ "connect": {
+ "desc": "<pre><code class=\"lang-js\">(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-js\">// set group id of each instance respectively.\nchart1.group = 'group1';\nchart2.group = 'group1';\necharts.connect('group1');\n [...]
+ },
+ "disconnect": {
+ "desc": "<pre><code class=\"lang-js\">(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-js\">(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-js\">(target: HTMLDivElement|HTMLCanvasElement) => ECharts\n</code></pre>\n<p>Returns chart instance of dom container.</p>\n"
+ },
+ "registerMap": {
+ "desc": "<pre><code class=\"lang-js\">(mapName: string, geoJson: Object, specialAreas?: Object)\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 href=\"option.html#series-map\" target=\"_blank\">map</a>.</p>\n<p>Please refer to <a href=\"option.html#geo.map\" target=\"_blank\">option.geo</a> for usage.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code clas [...]
+ },
+ "getMap": {
+ "desc": "<pre><code class=\"lang-js\">(mapName: string)\n</code></pre>\n<p>Get a registered map in the following format:</p>\n<pre><code class=\"lang-js\">{\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"
+ },
+ "registerTheme": {
+ "desc": "<pre><code class=\"lang-js\">(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"
+ },
+ "graphic": {
+ "desc": "<p>Util methods about graphics.</p>\n"
+ },
+ "graphic.extendShape": {
+ "desc": "<p>Create a new shape class.</p>\n<pre><code class=\"lang-js\">(\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-js\">(\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-js\">(\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-js\">(\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-js\">(\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
diff --git a/en/documents/api-parts/api.echartsInstance.json b/en/documents/api-parts/api.echartsInstance.json
index f1fb3c8..a969e7f 100644
--- a/en/documents/api-parts/api.echartsInstance.json
+++ b/en/documents/api-parts/api.echartsInstance.json
@@ -1,23 +1,65 @@
{
- "group": "<p>Group name to be used in chart <a href=\"#echarts.connect\">connection</a>.</p>\n",
- "setOption": "<pre><code class=\"lang-js\">(option: Object, notMerge?: boolean, lazyUpdate?: boolean)\nor\n(option: Object, opts?: Object)\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\" target=\"_blank\">animation</a> is enabled, ECharts will find the difference between [...]
- "getWidth": "<pre><code class=\"lang-js\">() => number\n</code></pre>\n<p>Gets width of ECharts instance container.</p>\n",
- "getHeight": "<pre><code class=\"lang-js\">() => number\n</code></pre>\n<p>Gets height of ECharts instance container.</p>\n",
- "getDom": "<pre><code class=\"lang-js\">() => HTMLCanvasElement|HTMLDivElement\n</code></pre>\n<p>Gets DOM element of ECharts instance container.</p>\n",
- "getOption": "<pre><code class=\"lang-js\">() => 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> [...]
- "resize": "<pre><code class=\"lang-js\">(opts?: {\n width?: number|string,\n height?: number|string,\n silent?: boolean\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=\"codespan\">width</code></p>\n<p> Specify width explicitly, in pixel. If setting to <c [...]
- "dispatchAction": "<pre><code class=\"lang-js\">(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 [...]
- "on": "<pre><code class=\"lang-js\">(\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.disp [...]
- "off": "<pre><code class=\"lang-js\">(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": "<pre><code class=\"lang-js\">(\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 [...]
- "convertFromPixel": "<pre><code class=\"lang-js\">(\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,\ [...]
- "containPixel": "<pre><code class=\"lang-js\">(\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?: st [...]
- "showLoading": "<pre><code class=\"lang-js\">(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 [...]
- "hideLoading": "<p>Hides animation loading effect.</p>\n",
- "getDataURL": "<pre><code class=\"lang-js\">(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 chart image; [...]
- "getConnectedDataURL": "<pre><code class=\"lang-js\">(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 con [...]
- "appendData": "<pre><code class=\"lang-js\">(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 scenario, 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=\"cod [...]
- "clear": "<p>Clears current instance; removes all components and series in current instance.</p>\n",
- "isDisposed": "<pre><code class=\"lang-js\">() => boolean\n</code></pre>\n<p>Returns whether current instance has been disposed.</p>\n",
- "dispose": "<p>Disposes instance. Once disposed, the instance can not be used again.</p>\n"
+ "group": {
+ "desc": "<p>Group name to be used in chart <a href=\"#echarts.connect\">connection</a>.</p>\n"
+ },
+ "setOption": {
+ "desc": "<pre><code class=\"lang-js\">(option: Object, notMerge?: boolean, lazyUpdate?: boolean)\nor\n(option: Object, opts?: Object)\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\" target=\"_blank\">animation</a> is enabled, ECharts will find the difference between two [...]
+ },
+ "getWidth": {
+ "desc": "<pre><code class=\"lang-js\">() => number\n</code></pre>\n<p>Gets width of ECharts instance container.</p>\n"
+ },
+ "getHeight": {
+ "desc": "<pre><code class=\"lang-js\">() => number\n</code></pre>\n<p>Gets height of ECharts instance container.</p>\n"
+ },
+ "getDom": {
+ "desc": "<pre><code class=\"lang-js\">() => HTMLCanvasElement|HTMLDivElement\n</code></pre>\n<p>Gets DOM element of ECharts instance container.</p>\n"
+ },
+ "getOption": {
+ "desc": "<pre><code class=\"lang-js\">() => 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-js\">(opts?: {\n width?: number|string,\n height?: number|string,\n silent?: boolean\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=\"codespan\">width</code></p>\n<p> Specify width explicitly, in pixel. If setting to <c [...]
+ },
+ "dispatchAction": {
+ "desc": "<pre><code class=\"lang-js\">(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-js\">(\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-js\">(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-js\">(\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-js\">(\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-js\">(\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-js\">(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-js\">(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 chart image; ret [...]
+ },
+ "getConnectedDataURL": {
+ "desc": "<pre><code class=\"lang-js\">(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-js\">(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 scenario, 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=\"codespa [...]
+ },
+ "clear": {
+ "desc": "<p>Clears current instance; removes all components and series in current instance.</p>\n"
+ },
+ "isDisposed": {
+ "desc": "<pre><code class=\"lang-js\">() => 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
diff --git a/en/documents/api-parts/api.events.json b/en/documents/api-parts/api.events.json
index a626467..ad32a24 100644
--- a/en/documents/api-parts/api.events.json
+++ b/en/documents/api-parts/api.events.json
@@ -1,31 +1,89 @@
{
- "Mouse events": "<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-js\">{\n // type of the component to which the clicked glyph belongs\n // i.e., 'series', &# [...]
- "legendselectchanged": "<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-js\">{\n type: 'legendselectchanged',\n // change legend name\n name: string\n // table of all legend selecting states\n selected: Object\n}\n</cod [...]
- "legendselected": "<p><strong>ACTION:</strong> <a href=\"#action.legend.legendSelect\">legendSelect</a>\nEvent emitted after legend is selected.</p>\n<pre><code class=\"lang-js\">{\n type: 'legendselected',\n // name of selected legend\n name: string\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n<p><strong>Attention: </strong> In ECharts 2.x, event related to user switching lengend is now changed from <code class=\"codespan\">le [...]
- "legendunselected": "<p><strong>ACTION:</strong> <a href=\"#action.legend.legendUnSelect\">legendUnSelect</a>\nEvent emitted after unselecting legend.</p>\n<pre><code class=\"lang-js\">{\n type: 'legendunselected',\n // name of unselected legend\n name: string\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n",
- "legendselectall": "<p><strong>ACTION:</strong> <a href=\"#action.legend.legendAllSelect\">legendAllSelect</a>\nEvent emitted after all legends are selected.</p>\n<pre><code class=\"lang-js\">{\n type: 'legendselectall',\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n",
- "legendinverseselect": "<p><strong>ACTION:</strong> <a href=\"#action.legend.legendInverseSelect\">legendInverseSelect</a>\nEvent emitted after inversing all legends.</p>\n<pre><code class=\"lang-js\">{\n type: 'legendinverseselect',\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n",
- "legendscroll": "<p><strong>ACTION:</strong> <a href=\"#action.legend.legendScroll\">legendscroll</a>\nEvent when trigger legend scroll.</p>\n<pre><code class=\"lang-js\">{\n type: 'legendscroll',\n scrollDataIndex: number\n legendId: string\n}\n</code></pre>\n",
- "datazoom": "<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-js\">{\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 [...]
- "datarangeselected": "<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-js\">{\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 [...]
- "timelinechanged": "<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-js\">{\n type: 'timelinechanged',\n // index of time point\n currentIndex: number\n}\n</code></pre>\n",
- "timelineplaychanged": "<p><strong>ACTION:</strong> <a href=\"#action.timeline.timelinePlayChange\">timelinePlayChange</a>\nSwitching event of play state in timeline.</p>\n<pre><code class=\"lang-js\">{\n type: 'timelineplaychanged',\n // play state, true for auto play\n playState: boolean\n}\n</code></pre>\n",
- "restore": "<p><strong>ACTION:</strong> <a href=\"#action.toolbox.restore\">restore</a>\nResets option event.</p>\n<pre><code class=\"lang-js\">{\n type: 'restore'\n}\n</code></pre>\n",
- "dataviewchanged": "<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-js\">{\n type: 'dataviewchanged'\n}\n</code></pre>\n",
- "magictypechanged": "<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-js\">{\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",
- "pieselectchanged": "<p><strong>ACTION:</strong> <a href=\"#action.pie.pieToggleSelect\">pieToggleSelect</a></p>\n<p>Event emitted after pie chart selecting state changes.</p>\n<p>It will be triggered when user clicks to select.</p>\n<pre><code class=\"lang-js\">{\n type: 'pieselectchanged',\n // series ID, can be passed in option\n seriesId: string\n // data name\n name: name,\n // table of all selected data.\n selected: Object\n}\n</code></pre>\n<p><stron [...]
- "pieselected": "<p><strong>ACTION:</strong> <a href=\"#action.pie.pieSelect\">pieSelect</a></p>\n<p>pie chartEvent 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.pieselectchanged\">pieselectchanged</a>).</p>\n<pre><code class=\"lang-js\">{\n type: 'pieselected',\n // series ID, can incoming in option\n seriesId: stri [...]
- "pieunselected": "<p><strong>ACTION:</strong> <a href=\"#action.pie.pieUnSelect\">pieUnSelect</a></p>\n<p>pie chart 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.pieselectchanged\">pieselectchanged</a>).</p>\n<pre><code class=\"lang-js\">{\n type: 'pieunselected',\n // series ID, can incoming in option\n serie [...]
- "mapselectchanged": "<p><strong>ACTION:</strong> <a href=\"#action.map.mapToggleSelect\">mapToggleSelect</a></p>\n<p>Event emitted after map region selecting state changes.</p>\n<p>It will be triggered when user clicks to select.</p>\n<pre><code class=\"lang-js\">{\n type: 'mapselectchanged',\n // series ID, can be passed in option\n seriesId: string\n // data name\n name: name,\n // table of all selected data.\n selected: Object\n}\n</code></pre>\n<p><stro [...]
- "mapselected": "<p><strong>ACTION:</strong> <a href=\"#action.map.mapSelect\">mapSelect</a></p>\n<p>map regionEvent 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.mapselectchanged\">mapselectchanged</a>).</p>\n<pre><code class=\"lang-js\">{\n type: 'mapselected',\n // series ID, can incoming in option\n seriesId: str [...]
- "mapunselected": "<p><strong>ACTION:</strong> <a href=\"#action.map.mapUnSelect\">mapUnSelect</a></p>\n<p>map region 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.mapselectchanged\">mapselectchanged</a>).</p>\n<pre><code class=\"lang-js\">{\n type: 'mapunselected',\n // series ID, can incoming in option\n seri [...]
- "axisareaselected": "<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 highlight 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().getSe [...]
- "focusnodeadjacency": "<p>Adjacent nodes highlight event in <a href=\"option.html#graph\" target=\"_blank\">graph</a>.</p>\n<p>See <a href=\"#action.graph.focusNodeAdjacency\">focusNodeAdjacency</a>.</p>\n",
- "unfocusnodeadjacency": "<p>Adjacent nodes reverse-highlight event in <a href=\"option.html#graph\" target=\"_blank\">graph</a>.</p>\n<p>See <a href=\"#action.graph.unfocusNodeAdjacency\">unfocusNodeAdjacency</a>.</p>\n",
- "brush": "<p>Event triggered after action <a href=\"#action.brush.brush\">brush</a> dispatched.</p>\n",
- "brushEnd": "<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": "<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 // [...]
- "globalcursortaken": "<p>See <a href=\"#action.brush.takeGlobalCursor\">takeGlobalCursor</a>.</p>\n",
- "rendered": "<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=\"#animation\">animation</a> and relevant options) or progressive rendering finished (see <a href=\"#series-scatter.progressive\">progressive</a> and relevant options).</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">var snapshotImage = new Image();\ndocument.body.append(snapshotImage);\nchart.on('rendered [...]
- "finished": "<p>Triggered when render finished, that is, when animation finished (see <a href=\"#animation\">animation</a> and relevant options) and progressive rendering finished (see <a href=\"#series-scatter.progressive\">progressive</a> and relevant options).</p>\n<pre><code class=\"lang-js\">var snapshotImage = new Image();\ndocument.body.append(snapshotImage);\nchart.on('finished', function () {\n snapshotImage.src = chart.getDataURL();\n});\n</code></pre>\n"
+ "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-js\">{\n // type of the component to which the clicked glyph belongs\n // i.e., 'series', 'mar [...]
+ },
+ "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-js\">{\n type: 'legendselectchanged',\n // change legend name\n name: string\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n"
+ },
+ "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-js\">{\n type: 'legendselected',\n // name of selected legend\n name: string\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n<p><strong>Attention: </strong> In ECharts 2.x, event related to user switching lengend is now changed from <code class=\"codespan\">legendsele [...]
+ },
+ "legendunselected": {
+ "desc": "<p><strong>ACTION:</strong> <a href=\"#action.legend.legendUnSelect\">legendUnSelect</a>\nEvent emitted after unselecting legend.</p>\n<pre><code class=\"lang-js\">{\n type: 'legendunselected',\n // name of unselected legend\n name: string\n // table of all legend selecting states\n selected: Object\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-js\">{\n type: 'legendselectall',\n // table of all legend selecting states\n selected: Object\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-js\">{\n type: 'legendinverseselect',\n // table of all legend selecting states\n selected: Object\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-js\">{\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-js\">{\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-js\">{\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: [...]
+ },
+ "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-js\">{\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-js\">{\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-js\">{\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-js\">{\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-js\">{\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"
+ },
+ "pieselectchanged": {
+ "desc": "<p><strong>ACTION:</strong> <a href=\"#action.pie.pieToggleSelect\">pieToggleSelect</a></p>\n<p>Event emitted after pie chart selecting state changes.</p>\n<p>It will be triggered when user clicks to select.</p>\n<pre><code class=\"lang-js\">{\n type: 'pieselectchanged',\n // series ID, can be passed in option\n seriesId: string\n // data name\n name: name,\n // table of all selected data.\n selected: Object\n}\n</code></pre>\n<p><strong>Attentio [...]
+ },
+ "pieselected": {
+ "desc": "<p><strong>ACTION:</strong> <a href=\"#action.pie.pieSelect\">pieSelect</a></p>\n<p>pie chartEvent 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.pieselectchanged\">pieselectchanged</a>).</p>\n<pre><code class=\"lang-js\">{\n type: 'pieselected',\n // series ID, can incoming in option\n seriesId: string\n [...]
+ },
+ "pieunselected": {
+ "desc": "<p><strong>ACTION:</strong> <a href=\"#action.pie.pieUnSelect\">pieUnSelect</a></p>\n<p>pie chart 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.pieselectchanged\">pieselectchanged</a>).</p>\n<pre><code class=\"lang-js\">{\n type: 'pieunselected',\n // series ID, can incoming in option\n seriesId: st [...]
+ },
+ "mapselectchanged": {
+ "desc": "<p><strong>ACTION:</strong> <a href=\"#action.map.mapToggleSelect\">mapToggleSelect</a></p>\n<p>Event emitted after map region selecting state changes.</p>\n<p>It will be triggered when user clicks to select.</p>\n<pre><code class=\"lang-js\">{\n type: 'mapselectchanged',\n // series ID, can be passed in option\n seriesId: string\n // data name\n name: name,\n // table of all selected data.\n selected: Object\n}\n</code></pre>\n<p><strong>Attenti [...]
+ },
+ "mapselected": {
+ "desc": "<p><strong>ACTION:</strong> <a href=\"#action.map.mapSelect\">mapSelect</a></p>\n<p>map regionEvent 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.mapselectchanged\">mapselectchanged</a>).</p>\n<pre><code class=\"lang-js\">{\n type: 'mapselected',\n // series ID, can incoming in option\n seriesId: string\n [...]
+ },
+ "mapunselected": {
+ "desc": "<p><strong>ACTION:</strong> <a href=\"#action.map.mapUnSelect\">mapUnSelect</a></p>\n<p>map region 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.mapselectchanged\">mapselectchanged</a>).</p>\n<pre><code class=\"lang-js\">{\n type: 'mapunselected',\n // series ID, can incoming in option\n seriesId: s [...]
+ },
+ "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 highlight 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]; [...]
+ },
+ "focusnodeadjacency": {
+ "desc": "<p>Adjacent nodes highlight event in <a href=\"option.html#graph\" target=\"_blank\">graph</a>.</p>\n<p>See <a href=\"#action.graph.focusNodeAdjacency\">focusNodeAdjacency</a>.</p>\n"
+ },
+ "unfocusnodeadjacency": {
+ "desc": "<p>Adjacent nodes reverse-highlight event in <a href=\"option.html#graph\" target=\"_blank\">graph</a>.</p>\n<p>See <a href=\"#action.graph.unfocusNodeAdjacency\">unfocusNodeAdjacency</a>.</p>\n"
+ },
+ "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=\"#animation\">animation</a> and relevant options) or progressive rendering finished (see <a href=\"#series-scatter.progressive\">progressive</a> and relevant options).</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">var snapshotImage = new Image();\ndocument.body.append(snapshotImage);\nchart.on('rendered' [...]
+ },
+ "finished": {
+ "desc": "<p>Triggered when render finished, that is, when animation finished (see <a href=\"#animation\">animation</a> and relevant options) and progressive rendering finished (see <a href=\"#series-scatter.progressive\">progressive</a> and relevant options).</p>\n<pre><code class=\"lang-js\">var snapshotImage = new Image();\ndocument.body.append(snapshotImage);\nchart.on('finished', function () {\n snapshotImage.src = chart.getDataURL();\n});\n</code></pre>\n"
+ }
}
\ No newline at end of file
diff --git a/en/documents/api-parts/api.json b/en/documents/api-parts/api.json
index 883c420..d77fb52 100644
--- a/en/documents/api-parts/api.json
+++ b/en/documents/api-parts/api.json
@@ -1,6 +1,14 @@
{
- "echarts": "<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": "<p>Instance created through <a href=\"#echarts.init\">echarts.init</a>.</p>\n",
- "action": "<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": "<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-js\">myChart.on(' [...]
+ "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-js\">myChart.on(' [...]
+ }
}
\ No newline at end of file
diff --git a/en/documents/api.json b/en/documents/api.json
index 28570ff..6ef130d 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-js\">(dom: HTMLDivElement|HTMLCanvasElement, theme?: O [...]
\ No newline at end of file
+{"$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-js\">(dom: HTMLDivElement|HTMLCanvasElement, theme?: O [...]
\ 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 2e5d966..3d4eb0e 100644
--- a/en/documents/option-gl-parts/option-gl.geo3D.json
+++ b/en/documents/option-gl-parts/option-gl.geo3D.json
@@ -1,172 +1,512 @@
{
- "show": "<p>Whether to display 3D geographic coordinate system components.</p>\n",
- "map": "<p>The map type. The map type used in ECharts-gl is the same as the <a href=\"http://echarts.baidu.com/option.html#geo.map\" target=\"_blank\">geo</a> component.</p>\n<p>You can download the required map file in the <a href=\"http://ecomfe.github.io/echarts-builder-web/map3.html\" target=\"_blank\">Map Download Interface</a>, then to import and register it into ECharts.</p>\n<p>EChart provides map data in two formats. One is the JS file that can be imported directly through the [...]
- "boxWidth": "<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": "<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": "<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": "<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": "<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-js\">// Configure as a panoramic texture\nenvironment: 'asset/starfield.jpg&# [...]
- "groundPlane": "<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": "<p>Whether to display the ground.</p>\n",
- "groundPlane.color": "<p>The color of the ground.</p>\n",
- "instancing": "<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": "<p>The setting of the label.</p>\n",
- "label.show": "<p>Whether to show the label.</p>\n",
- "label.distance": "<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": "<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 [...]
- "label.textStyle": "<p>The font style of the label.</p>\n",
- "label.textStyle.color": "<p>The Color of the text.</p>\n",
- "label.textStyle.borderWidth": "<p>The border width of the text.</p>\n",
- "label.textStyle.borderColor": "<p>The border color of the text.</p>\n",
- "label.textStyle.fontFamily": "<p>The font family of the text.</p>\n",
- "label.textStyle.fontSize": "<p>The font size of the text.</p>\n",
- "label.textStyle.fontWeight": "<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": "<p>Visual properties of 3D graphics in A 3D geographic coordinate system component, including color, transparency, strokes, etc.</p>\n",
- "itemStyle.color": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// 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": "<p>The opacity of the graphic.</p>\n",
- "itemStyle.borderWidth": "<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": "<p>The color of the border.</p>\n",
- "emphasis": "<p>Graphic and label styles when mouse hover is highlighted.</p>\n",
- "emphasis.label.show": "<p>Whether to show the label.</p>\n",
- "emphasis.label.distance": "<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": "<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 v [...]
- "emphasis.label.textStyle": "<p>The font style of the label.</p>\n",
- "emphasis.label.textStyle.color": "<p>The Color of the text.</p>\n",
- "emphasis.label.textStyle.borderWidth": "<p>The border width of the text.</p>\n",
- "emphasis.label.textStyle.borderColor": "<p>The border color of the text.</p>\n",
- "emphasis.label.textStyle.fontFamily": "<p>The font family of the text.</p>\n",
- "emphasis.label.textStyle.fontSize": "<p>The font size of the text.</p>\n",
- "emphasis.label.textStyle.fontWeight": "<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": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// 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": "<p>The opacity of the graphic.</p>\n",
- "regions": "<p>The setting of the map area.</p>\n",
- "regions.name": "<p>The name of the corresponding map area, such as <code class=\"codespan\">'Guangdong'</code>, <code class=\"codespan\">'Zhejiang'</code>.</p>\n",
- "regions.regionHeight": "<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": "<p>Style settings for a single area.</p>\n",
- "regions.itemStyle.color": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// 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": "<p>The opacity of the graphic.</p>\n",
- "regions.itemStyle.borderWidth": "<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": "<p>The color of the border.</p>\n",
- "regions.label": "<p>Label settings for a single area.</p>\n",
- "regions.label.show": "<p>Whether to show the label.</p>\n",
- "regions.label.distance": "<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": "<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 va [...]
- "regions.label.textStyle": "<p>The font style of the label.</p>\n",
- "regions.label.textStyle.color": "<p>The Color of the text.</p>\n",
- "regions.label.textStyle.borderWidth": "<p>The border width of the text.</p>\n",
- "regions.label.textStyle.borderColor": "<p>The border color of the text.</p>\n",
- "regions.label.textStyle.fontFamily": "<p>The font family of the text.</p>\n",
- "regions.label.textStyle.fontSize": "<p>The font size of the text.</p>\n",
- "regions.label.textStyle.fontWeight": "<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": "<p>Setting the highlight for labels and styles for a single area.</p>\n",
- "regions.emphasis.itemStyle.color": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// 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": "<p>The opacity of the graphic.</p>\n",
- "regions.emphasis.itemStyle.borderWidth": "<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": "<p>The color of the border.</p>\n",
- "regions.emphasis.label.show": "<p>Whether to show the label.</p>\n",
- "regions.emphasis.label.distance": "<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": "<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 [...]
- "regions.emphasis.label.textStyle": "<p>The font style of the label.</p>\n",
- "regions.emphasis.label.textStyle.color": "<p>The Color of the text.</p>\n",
- "regions.emphasis.label.textStyle.borderWidth": "<p>The border width of the text.</p>\n",
- "regions.emphasis.label.textStyle.borderColor": "<p>The border color of the text.</p>\n",
- "regions.emphasis.label.textStyle.fontFamily": "<p>The font family of the text.</p>\n",
- "regions.emphasis.label.textStyle.fontSize": "<p>The font size of the text.</p>\n",
- "regions.emphasis.label.textStyle.fontWeight": "<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": "<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 cl [...]
- "realisticMaterial": "<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": "<p>The texture map of the material detail.</p>\n",
- "realisticMaterial.textureTiling": "<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, [...]
- "realisticMaterial.textureOffset": "<p>The displacement of the texture detail texture.</p>\n",
- "realisticMaterial.roughness": "<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 <code class=\"codespan\">globe](~globe)</code>0.2<code class=\"codespan\">(smooth) and</code>0.8` (roug [...]
- "realisticMaterial.metalness": "<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 [...]
- "realisticMaterial.roughnessAdjust": "<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": "<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": "<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": "<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": "<p>The texture map of the material detail.</p>\n",
- "lambertMaterial.textureTiling": "<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, yo [...]
- "lambertMaterial.textureOffset": "<p>The displacement of the texture detail texture.</p>\n",
- "colorMaterial": "<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": "<p>The texture map of the material detail.</p>\n",
- "colorMaterial.textureTiling": "<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 [...]
- "colorMaterial.textureOffset": "<p>The displacement of the texture detail texture.</p>\n",
- "light": "<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": "<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": "<p>The color of the main light source.</p>\n",
- "light.main.intensity": "<p>The intensity of the main light source.</p>\n",
- "light.main.shadow": "<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=\"1 [...]
- "light.main.shadowQuality": "<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.p [...]
- "light.main.alpha": "<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": "<p>The main light source is around the y-axis, which is the angle of the left-right rotation.</p>\n",
- "light.ambient": "<p>Global ambient light settings.</p>\n",
- "light.ambient.color": "<p>The color of ambient light.</p>\n",
- "light.ambient.intensity": "<p>The intensity of ambient light.</p>\n",
- "light.ambientCubemap": "<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": "<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-js\">ambientCubemap: {\n texture: 'pisa.hdr',\n // The exposure value used whe [...]
- "light.ambientCubemap.diffuseIntensity": "<p>The intensity of diffuse.</p>\n",
- "light.ambientCubemap.specularIntensity": "<p>The intensity of specular.</p>\n",
- "postEffect": "<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 [...]
- "postEffect.enable": "<p>Whether to enable post-processing effects. Not enabled by default.</p>\n",
- "postEffect.bloom": "<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-post [...]
- "postEffect.bloom.enable": "<p>Whether to enable the bloom effect.</p>\n",
- "postEffect.bloom.bloomIntensity": "<p>The intensity of the bloom. The default is 0.1.</p>\n",
- "postEffect.depthOfField": "<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.</ [...]
- "postEffect.depthOfField.enable": "<p>Whether to enable the depth of field.</p>\n",
- "postEffect.depthOfField.focalDistance": "<p>The initial focus distance. The user can click on the area to automatically focus.</p>\n",
- "postEffect.depthOfField.focalRange": "<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": "<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": "<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\">\n <img src=\"documents/asset/gl/img/geo-dof-large.png\" width=\"100%\" title=\"blurSize: 10\">\n</div>\n",
- "postEffect.screenSpaceAmbientOcclusion": "<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 [...]
- "postEffect.SSAO": "<p>Same as <a href=\"#geo3D.postEffect.screenSpaceAmbientOcclusion\">screenSpaceAmbientOcclusion</a></p>\n",
- "postEffect.SSAO.enable": "<p>Whether to enable SSAO (screen space ambient occlusion). Not enabled by default.</p>\n",
- "postEffect.SSAO.quality": "<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": "<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\">\n <img src= [...]
- "postEffect.SSAO.intensity": "<p>The intensity of SSAO (screen space ambient occlusion). The larger the value, the darker the color.</p>\n",
- "postEffect.colorCorrection": "<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\">\n <img src=\"documents/asset/gl/img/buildings-warm.jpg\" width=\"100%\" title=\"Warm\">\ [...]
- "postEffect.colorCorrection.enable": "<p>Whether to enable the color correction.</p>\n",
- "postEffect.colorCorrection.lookupTexture": "<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 proc [...]
- "postEffect.colorCorrection.exposure": "<p>The exposure of the image.</p>\n",
- "postEffect.colorCorrection.brightness": "<p>The brightness of the image.</p>\n",
- "postEffect.colorCorrection.contrast": "<p>The contrast of the image.</p>\n",
- "postEffect.colorCorrection.saturation": "<p>The saturation of the image.</p>\n",
- "postEffect.FXAA": "<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 [...]
- "postEffect.FXAA.enable": "<p>Whether to enable FXAA. Not enabled by default.</p>\n",
- "temporalSuperSampling": "<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 i [...]
- "temporalSuperSampling.enable": "<p>Whether to enable temporal supersampling. By default, temporal supersampling is also turned on synchronously when [postEffect] (~geo3D.postEffect) is turned on.</p>\n",
- "viewControl": "<p><code class=\"codespan\">viewControl</code> is used for mouse rotation, zooming, and other perspective control.</p>\n",
- "viewControl.projection": "<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": "<p>Whether to enable the angle of view to automatically rotate around the object.</p>\n",
- "viewControl.autoRotateDirection": "<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": "<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": "<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": "<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": "<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-js\">// can't rotate\nrotateSensitivity: 0\n// can only be rotated horizontally\nrotateSensitivity: [1, [...]
- "viewControl.zoomSensitivity": "<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": "<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": "<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": "<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": "<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": "<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": "<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": "<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": "<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": "<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": "<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": "<p>The angle of view is around the y-axis, which is the angle of rotation from left to right.</p>\n",
- "viewControl.center": "<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": "<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": "<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": "<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": "<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": "<p>Whether to enable animation.</p>\n",
- "viewControl.animationDurationUpdate": "<p>The duration time for update the transition animation.</p>\n",
- "viewControl.animationEasingUpdate": "<p>The easing effect for update transition animation.</p>\n",
- "zlevel": "<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": "<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 t [...]
- "top": "<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 the [...]
- "right": "<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": "<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": "<p> The width of the view of the component.</p>\n",
- "height": "<p> The height of the view of the component.</p>\n"
+ "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=\"http://echarts.baidu.com/option.html#geo.map\" target=\"_blank\">geo</a> component.</p>\n<p>You can download the required map file in the <a href=\"http://ecomfe.github.io/echarts-builder-web/map3.html\" target=\"_blank\">Map Download Interface</a>, then to import and register it into ECharts.</p>\n<p>EChart provides map data in two formats. One is the JS file that can be imported directly through [...]
+ },
+ "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-js\">// 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 ite [...]
+ },
+ "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-js\">// 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 ite [...]
+ },
+ "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-js\">// 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-js\">// 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 ite [...]
+ },
+ "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-js\">// 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 ite [...]
+ },
+ "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 <code class=\"codespan\">globe](~globe)</code>0.2<code class=\"codespan\">(smooth) and</code>0.8` (rough).</p>\n<p><img widt [...]
+ },
+ "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-js\">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=\"docu [...]
+ },
+ "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<d [...]
+ },
+ "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 [postEffect] (~geo3D.postEffect) 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-js\">// 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
diff --git a/en/documents/option-gl-parts/option-gl.globe.json b/en/documents/option-gl-parts/option-gl.globe.json
index 5d5a28c..57bee7a 100644
--- a/en/documents/option-gl-parts/option-gl.globe.json
+++ b/en/documents/option-gl-parts/option-gl.globe.json
@@ -1,118 +1,350 @@
{
- "show": "<p>Whether to show the globe component.</p>\n",
- "zlevel": "<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": "<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 t [...]
- "top": "<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 the [...]
- "right": "<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": "<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": "<p> The width of the view of the component.</p>\n",
- "height": "<p> The height of the view of the component.</p>\n",
- "globeRadius": "<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": "<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": "<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-js\">// Configure as a panoramic texture\nenvironment: 'asset/starfield.jpg'\n [...]
- "baseTexture": "<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-js\">// Use the globe's texture image\nbaseTexture: 'asset/earth.jpg'\n\n// Use the world map example of echarts as a texture.\nvar canvas = do [...]
- "heightTexture": "<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/ass [...]
- "displacementTexture": "<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": "<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\">\n <img src=\"documents/asset/gl/img/displacement-enable.png\" width=\"100%\" title= [...]
- "displacementQuality": "<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-conta [...]
- "shading": "<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'</cod [...]
- "realisticMaterial": "<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": "<p>The texture map of the material detail.</p>\n",
- "realisticMaterial.textureTiling": "<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, [...]
- "realisticMaterial.textureOffset": "<p>The displacement of the texture detail texture.</p>\n",
- "realisticMaterial.roughness": "<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 <code class=\"codespan\">globe](~globe)</code>0.2<code class=\"codespan\">(smooth) and</code>0.8` (roug [...]
- "realisticMaterial.metalness": "<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 [...]
- "realisticMaterial.roughnessAdjust": "<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": "<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": "<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": "<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": "<p>The texture map of the material detail.</p>\n",
- "lambertMaterial.textureTiling": "<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, yo [...]
- "lambertMaterial.textureOffset": "<p>The displacement of the texture detail texture.</p>\n",
- "colorMaterial": "<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": "<p>The texture map of the material detail.</p>\n",
- "colorMaterial.textureTiling": "<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 [...]
- "colorMaterial.textureOffset": "<p>The displacement of the texture detail texture.</p>\n",
- "light": "<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": "<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": "<p>The color of the main light source.</p>\n",
- "light.main.intensity": "<p>The intensity of the main light source.</p>\n",
- "light.main.shadow": "<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=\"1 [...]
- "light.main.shadowQuality": "<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.p [...]
- "light.main.alpha": "<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": "<p>The main light source is around the y-axis, which is the angle of the left-right rotation.</p>\n",
- "light.main.time": "<p>The time of sunshine. The current system time is used by default.</p>\n",
- "light.ambient": "<p>Global ambient light settings.</p>\n",
- "light.ambient.color": "<p>The color of ambient light.</p>\n",
- "light.ambient.intensity": "<p>The intensity of ambient light.</p>\n",
- "light.ambientCubemap": "<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": "<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-js\">ambientCubemap: {\n texture: 'pisa.hdr',\n // The exposure value used whe [...]
- "light.ambientCubemap.diffuseIntensity": "<p>The intensity of diffuse.</p>\n",
- "light.ambientCubemap.specularIntensity": "<p>The intensity of specular.</p>\n",
- "postEffect": "<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 [...]
- "postEffect.enable": "<p>Whether to enable post-processing effects. Not enabled by default.</p>\n",
- "postEffect.bloom": "<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-post [...]
- "postEffect.bloom.enable": "<p>Whether to enable the bloom effect.</p>\n",
- "postEffect.bloom.bloomIntensity": "<p>The intensity of the bloom. The default is 0.1.</p>\n",
- "postEffect.depthOfField": "<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.</ [...]
- "postEffect.depthOfField.enable": "<p>Whether to enable the depth of field.</p>\n",
- "postEffect.depthOfField.focalDistance": "<p>The initial focus distance. The user can click on the area to automatically focus.</p>\n",
- "postEffect.depthOfField.focalRange": "<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": "<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": "<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\">\n <img src=\"documents/asset/gl/img/geo-dof-large.png\" width=\"100%\" title=\"blurSize: 10\">\n</div>\n",
- "postEffect.screenSpaceAmbientOcclusion": "<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 [...]
- "postEffect.SSAO": "<p>Same as <a href=\"#globe.postEffect.screenSpaceAmbientOcclusion\">screenSpaceAmbientOcclusion</a></p>\n",
- "postEffect.SSAO.enable": "<p>Whether to enable SSAO (screen space ambient occlusion). Not enabled by default.</p>\n",
- "postEffect.SSAO.quality": "<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": "<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\">\n <img src= [...]
- "postEffect.SSAO.intensity": "<p>The intensity of SSAO (screen space ambient occlusion). The larger the value, the darker the color.</p>\n",
- "postEffect.colorCorrection": "<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\">\n <img src=\"documents/asset/gl/img/buildings-warm.jpg\" width=\"100%\" title=\"Warm\">\ [...]
- "postEffect.colorCorrection.enable": "<p>Whether to enable the color correction.</p>\n",
- "postEffect.colorCorrection.lookupTexture": "<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 proc [...]
- "postEffect.colorCorrection.exposure": "<p>The exposure of the image.</p>\n",
- "postEffect.colorCorrection.brightness": "<p>The brightness of the image.</p>\n",
- "postEffect.colorCorrection.contrast": "<p>The contrast of the image.</p>\n",
- "postEffect.colorCorrection.saturation": "<p>The saturation of the image.</p>\n",
- "postEffect.FXAA": "<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 [...]
- "postEffect.FXAA.enable": "<p>Whether to enable FXAA. Not enabled by default.</p>\n",
- "temporalSuperSampling": "<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 i [...]
- "temporalSuperSampling.enable": "<p>Whether to enable temporal supersampling. By default, temporal supersampling is also turned on synchronously when [postEffect] (~globe.postEffect) is turned on.</p>\n",
- "viewControl": "<p><code class=\"codespan\">viewControl</code> is used for mouse rotation, zooming, and other perspective control.</p>\n",
- "viewControl.projection": "<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": "<p>Whether to enable the angle of view to automatically rotate around the object.</p>\n",
- "viewControl.autoRotateDirection": "<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": "<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": "<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": "<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": "<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-js\">// can't rotate\nrotateSensitivity: 0\n// can only be rotated horizontally\nrotateSensitivity: [1, [...]
- "viewControl.zoomSensitivity": "<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": "<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": "<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": "<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": "<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": "<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": "<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": "<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": "<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": "<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": "<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": "<p>The angle of view is around the y-axis, which is the angle of rotation from left to right.</p>\n",
- "viewControl.center": "<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": "<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": "<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": "<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": "<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": "<p>Whether to enable animation.</p>\n",
- "viewControl.animationDurationUpdate": "<p>The duration time for update the transition animation.</p>\n",
- "viewControl.animationEasingUpdate": "<p>The easing effect for update transition animation.</p>\n",
- "viewControl.targetCoord": "<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-js\">viewControl: {\n // locate in BeiJing\n targetCoord: [116.46, 39.92]\n}\n</code></pre>\n",
- "layers": "<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": "<p>Whether to show this layer.</p>\n",
- "layers.type": "<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": "<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-js\">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": "<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": "<p>The intensity of the mixture.</p>\n",
- "layers.shading": "<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": "<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": "<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"
+ "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-js\">// Configure as a panoramic texture\nenvironment: 'asset/starfield.jpg'\n// Co [...]
+ },
+ "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-js\">// Use the globe's texture image\nbaseTexture: 'asset/earth.jpg'\n\n// Use the world map example of echarts as a texture.\nvar canvas = documen [...]
+ },
+ "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 <code class=\"codespan\">globe](~globe)</code>0.2<code class=\"codespan\">(smooth) and</code>0.8` (rough).</p>\n<p><img widt [...]
+ },
+ "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-js\">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=\"docu [...]
+ },
+ "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<d [...]
+ },
+ "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 [postEffect] (~globe.postEffect) 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-js\">// 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-js\">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-js\">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
diff --git a/en/documents/option-gl-parts/option-gl.grid3D.json b/en/documents/option-gl-parts/option-gl.grid3D.json
index 406cd1a..e429183 100644
--- a/en/documents/option-gl-parts/option-gl.grid3D.json
+++ b/en/documents/option-gl-parts/option-gl.grid3D.json
@@ -1,134 +1,398 @@
{
- "show": "<p>Whether to display a 3D cartesian coordinate system component.</p>\n",
- "boxWidth": "<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": "<p>3D cartesian coordinate system height in a 3D scene.</p>\n",
- "boxDepth": "<p>3D cartesian coordinate system depth in a 3D scene.</p>\n",
- "axisLine": "<p>Settings related to axis line.</p>\n",
- "axisLine.show": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n",
- "axisLine.interval": "<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.</ [...]
- "axisLine.lineStyle.color": "<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-js\">// 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": "<p>The opacity of the line.</p>\n",
- "axisLine.lineStyle.width": "<p>The width of the line.</p>\n",
- "axisLabel": "<p>Settings related to axis label.</p>\n",
- "axisLabel.show": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis label from appearing.</p>\n",
- "axisLabel.margin": "<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": "<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.< [...]
- "axisLabel.textStyle.color": "<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-js\">(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-js\">textStyle: {\n color: function (value, index) {\n return value >= 0 ? & [...]
- "axisLabel.textStyle.borderWidth": "<p>The border width of the text.</p>\n",
- "axisLabel.textStyle.borderColor": "<p>The border color of the text.</p>\n",
- "axisLabel.textStyle.fontFamily": "<p>The font family of the text.</p>\n",
- "axisLabel.textStyle.fontSize": "<p>The font size of the text.</p>\n",
- "axisLabel.textStyle.fontWeight": "<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<!-- Overwrite color -->",
- "axisTick": "<p>Settings related to axis tick.</p>\n",
- "axisTick.show": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis tick from showing.</p>\n",
- "axisTick.interval": "<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\ [...]
- "axisTick.length": "<p>The length of the axis tick.</p>\n",
- "axisTick.lineStyle.color": "<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": "<p>The opacity of the line.</p>\n",
- "axisTick.lineStyle.width": "<p>The width of the line.</p>\n<!-- Overwrite color -->",
- "splitLine": "<p>Settings related to axis line.</p>\n",
- "splitLine.show": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n",
- "splitLine.interval": "<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.< [...]
- "splitLine.lineStyle.color": "<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-js\">// 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": "<p>The opacity of the line.</p>\n",
- "splitLine.lineStyle.width": "<p>The width of the line.</p>\n",
- "splitArea": "<p>Split area of axis in <a href=\"#grid\">grid</a> area.</p>\n",
- "splitArea.show": "<p>Set this to be <code class=\"codespan\">true</code> to show the splitArea.</p>\n",
- "splitArea.interval": "<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\" [...]
- "splitArea.areaStyle": "<p>Split area style.</p>\n",
- "splitArea.areaStyle.color": "<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": "<p>Configurations for axis pointer.</p>\n",
- "axisPointer.show": "<p>Whether to display the axisPointer. Set this to be <code class=\"codespan\">true</code> to show the splitArea.</p>\n",
- "axisPointer.lineStyle.color": "<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-js\">// 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": "<p>The opacity of the line.</p>\n",
- "axisPointer.lineStyle.width": "<p>The width of the line.</p>\n",
- "axisPointer.label": "<p>The label of axisPointer.</p>\n",
- "axisPointer.label.show": "<p>Whether to display the label of axisPointer. Value axes are displayed by default, while category axes are not.</p>\n",
- "axisPointer.label.formatter": "<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-js\">(value: number, valueAll: Array) => string\n</code></pre>\n",
- "axisPointer.label.margin": "<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": "<p>The Color of the text.</p>\n",
- "axisPointer.label.textStyle.borderWidth": "<p>The border width of the text.</p>\n",
- "axisPointer.label.textStyle.borderColor": "<p>The border color of the text.</p>\n",
- "axisPointer.label.textStyle.fontFamily": "<p>The font family of the text.</p>\n",
- "axisPointer.label.textStyle.fontSize": "<p>The font size of the text.</p>\n",
- "axisPointer.label.textStyle.fontWeight": "<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": "<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-js\">// Configure as a panoramic texture\nenvironment: 'asset/starfield.jpg& [...]
- "light": "<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": "<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": "<p>The color of the main light source.</p>\n",
- "light.main.intensity": "<p>The intensity of the main light source.</p>\n",
- "light.main.shadow": "<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=\"1 [...]
- "light.main.shadowQuality": "<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.p [...]
- "light.main.alpha": "<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": "<p>The main light source is around the y-axis, which is the angle of the left-right rotation.</p>\n",
- "light.ambient": "<p>Global ambient light settings.</p>\n",
- "light.ambient.color": "<p>The color of ambient light.</p>\n",
- "light.ambient.intensity": "<p>The intensity of ambient light.</p>\n",
- "light.ambientCubemap": "<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": "<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-js\">ambientCubemap: {\n texture: 'pisa.hdr',\n // The exposure value used whe [...]
- "light.ambientCubemap.diffuseIntensity": "<p>The intensity of diffuse.</p>\n",
- "light.ambientCubemap.specularIntensity": "<p>The intensity of specular.</p>\n",
- "postEffect": "<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 [...]
- "postEffect.enable": "<p>Whether to enable post-processing effects. Not enabled by default.</p>\n",
- "postEffect.bloom": "<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-post [...]
- "postEffect.bloom.enable": "<p>Whether to enable the bloom effect.</p>\n",
- "postEffect.bloom.bloomIntensity": "<p>The intensity of the bloom. The default is 0.1.</p>\n",
- "postEffect.depthOfField": "<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.</ [...]
- "postEffect.depthOfField.enable": "<p>Whether to enable the depth of field.</p>\n",
- "postEffect.depthOfField.focalDistance": "<p>The initial focus distance. The user can click on the area to automatically focus.</p>\n",
- "postEffect.depthOfField.focalRange": "<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": "<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": "<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\">\n <img src=\"documents/asset/gl/img/geo-dof-large.png\" width=\"100%\" title=\"blurSize: 10\">\n</div>\n",
- "postEffect.screenSpaceAmbientOcclusion": "<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 [...]
- "postEffect.SSAO": "<p>Same as <a href=\"#grid3D.postEffect.screenSpaceAmbientOcclusion\">screenSpaceAmbientOcclusion</a></p>\n",
- "postEffect.SSAO.enable": "<p>Whether to enable SSAO (screen space ambient occlusion). Not enabled by default.</p>\n",
- "postEffect.SSAO.quality": "<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": "<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\">\n <img src= [...]
- "postEffect.SSAO.intensity": "<p>The intensity of SSAO (screen space ambient occlusion). The larger the value, the darker the color.</p>\n",
- "postEffect.colorCorrection": "<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\">\n <img src=\"documents/asset/gl/img/buildings-warm.jpg\" width=\"100%\" title=\"Warm\">\ [...]
- "postEffect.colorCorrection.enable": "<p>Whether to enable the color correction.</p>\n",
- "postEffect.colorCorrection.lookupTexture": "<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 proc [...]
- "postEffect.colorCorrection.exposure": "<p>The exposure of the image.</p>\n",
- "postEffect.colorCorrection.brightness": "<p>The brightness of the image.</p>\n",
- "postEffect.colorCorrection.contrast": "<p>The contrast of the image.</p>\n",
- "postEffect.colorCorrection.saturation": "<p>The saturation of the image.</p>\n",
- "postEffect.FXAA": "<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 [...]
- "postEffect.FXAA.enable": "<p>Whether to enable FXAA. Not enabled by default.</p>\n",
- "temporalSuperSampling": "<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 [...]
- "temporalSuperSampling.enable": "<p>Whether to enable temporal supersampling. By default, temporal supersampling is also turned on synchronously when [postEffect] (~grid3D.postEffect) is turned on.</p>\n",
- "viewControl": "<p><code class=\"codespan\">viewControl</code> is used for mouse rotation, zooming, and other perspective control.</p>\n",
- "viewControl.projection": "<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": "<p>Whether to enable the angle of view to automatically rotate around the object.</p>\n",
- "viewControl.autoRotateDirection": "<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": "<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": "<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": "<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": "<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-js\">// can't rotate\nrotateSensitivity: 0\n// can only be rotated horizontally\nrotateSensitivity: [1, [...]
- "viewControl.zoomSensitivity": "<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": "<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": "<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": "<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": "<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": "<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": "<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": "<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": "<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": "<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": "<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": "<p>The angle of view is around the y-axis, which is the angle of rotation from left to right.</p>\n",
- "viewControl.center": "<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": "<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": "<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": "<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": "<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": "<p>Whether to enable animation.</p>\n",
- "viewControl.animationDurationUpdate": "<p>The duration time for update the transition animation.</p>\n",
- "viewControl.animationEasingUpdate": "<p>The easing effect for update transition animation.</p>\n",
- "zlevel": "<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": "<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 t [...]
- "top": "<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 the [...]
- "right": "<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": "<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": "<p> The width of the view of the component.</p>\n",
- "height": "<p> The height of the view of the component.</p>\n"
+ "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-js\">// 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-js\">(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-js\">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-js\">// 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-js\">// 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-js\">(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-js\">// Configure as a panoramic texture\nenvironment: 'asset/starfield.jpg'\ [...]
+ },
+ "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-js\">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=\"docu [...]
+ },
+ "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<d [...]
+ },
+ "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 [postEffect] (~grid3D.postEffect) 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-js\">// 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
diff --git a/en/documents/option-gl-parts/option-gl.json b/en/documents/option-gl-parts/option-gl.json
index 4b4df9b..3de8b9a 100644
--- a/en/documents/option-gl-parts/option-gl.json
+++ b/en/documents/option-gl-parts/option-gl.json
@@ -1,20 +1,56 @@
{
- "globe": "<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": "<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": "<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 usin [...]
- "grid3D": "<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": "<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 separatel [...]
- "yAxis3D": "<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 separatel [...]
- "zAxis3D": "<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 separatel [...]
- "series": "<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": "<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": "<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": "<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": "<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=\"aut [...]
- "series-map3D": "<p><strong>3D map</strong></p>\n<p>3D maps are mainly used for visualizing geographic area data. With the [visualMap] (<a href=\"http://echarts.baidu.com/option.html#visualMap\" target=\"_blank\">http://echarts.baidu.com/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 and [...]
- "series-surface": "<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": "<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": "<p>A 2D scatter/bubble plot drawn using WebGL.</p>\n<p>It is used in the same way as <a href=\"http://echarts.baidu.com/option.html#series-scatter\" target=\"_blank\">scatter</a>.</p>\n",
- "series-graphGL": "<p>Uses WebGL to drawn the relational chart, support the layout and rendering of large-scale network/relational data.</p>\n",
- "series-flowGL": "<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"
+ "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=\"http://echarts.baidu.com/option.html#visualMap\" target=\"_blank\">http://echarts.baidu.com/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 and to di [...]
+ },
+ "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=\"http://echarts.baidu.com/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
diff --git a/en/documents/option-gl-parts/option-gl.mapbox3D.json b/en/documents/option-gl-parts/option-gl.mapbox3D.json
index fd76edf..b70171c 100644
--- a/en/documents/option-gl-parts/option-gl.mapbox3D.json
+++ b/en/documents/option-gl-parts/option-gl.mapbox3D.json
@@ -1,69 +1,203 @@
{
- "style": "<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": "<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-js\">mapbox3D: {\n center: [104.114129, 37.550339],\n zoom: 3\n}\n</code></pre>\n",
- "zoom": "<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": "<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": "<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": "<p>The zoom of the altitude Scale.</p>\n",
- "shading": "<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": "<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": "<p>The texture map of the material detail.</p>\n",
- "realisticMaterial.textureTiling": "<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, [...]
- "realisticMaterial.textureOffset": "<p>The displacement of the texture detail texture.</p>\n",
- "realisticMaterial.roughness": "<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 <code class=\"codespan\">globe](~globe)</code>0.2<code class=\"codespan\">(smooth) and</code>0.8` (roug [...]
- "realisticMaterial.metalness": "<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 [...]
- "realisticMaterial.roughnessAdjust": "<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": "<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": "<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": "<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": "<p>The texture map of the material detail.</p>\n",
- "lambertMaterial.textureTiling": "<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, yo [...]
- "lambertMaterial.textureOffset": "<p>The displacement of the texture detail texture.</p>\n",
- "colorMaterial": "<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": "<p>The texture map of the material detail.</p>\n",
- "colorMaterial.textureTiling": "<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 [...]
- "colorMaterial.textureOffset": "<p>The displacement of the texture detail texture.</p>\n",
- "light": "<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": "<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": "<p>The color of the main light source.</p>\n",
- "light.main.intensity": "<p>The intensity of the main light source.</p>\n",
- "light.main.shadow": "<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=\"1 [...]
- "light.main.shadowQuality": "<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.p [...]
- "light.main.alpha": "<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": "<p>The main light source is around the y-axis, which is the angle of the left-right rotation.</p>\n",
- "light.ambient": "<p>Global ambient light settings.</p>\n",
- "light.ambient.color": "<p>The color of ambient light.</p>\n",
- "light.ambient.intensity": "<p>The intensity of ambient light.</p>\n",
- "light.ambientCubemap": "<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": "<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-js\">ambientCubemap: {\n texture: 'pisa.hdr',\n // The exposure value used whe [...]
- "light.ambientCubemap.diffuseIntensity": "<p>The intensity of diffuse.</p>\n",
- "light.ambientCubemap.specularIntensity": "<p>The intensity of specular.</p>\n",
- "postEffect": "<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 [...]
- "postEffect.enable": "<p>Whether to enable post-processing effects. Not enabled by default.</p>\n",
- "postEffect.bloom": "<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-post [...]
- "postEffect.bloom.enable": "<p>Whether to enable the bloom effect.</p>\n",
- "postEffect.bloom.bloomIntensity": "<p>The intensity of the bloom. The default is 0.1.</p>\n",
- "postEffect.depthOfField": "<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.</ [...]
- "postEffect.depthOfField.enable": "<p>Whether to enable the depth of field.</p>\n",
- "postEffect.depthOfField.focalDistance": "<p>The initial focus distance. The user can click on the area to automatically focus.</p>\n",
- "postEffect.depthOfField.focalRange": "<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": "<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": "<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\">\n <img src=\"documents/asset/gl/img/geo-dof-large.png\" width=\"100%\" title=\"blurSize: 10\">\n</div>\n",
- "postEffect.screenSpaceAmbientOcclusion": "<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 [...]
- "postEffect.SSAO": "<p>Same as <a href=\"#mapbox3D.postEffect.screenSpaceAmbientOcclusion\">screenSpaceAmbientOcclusion</a></p>\n",
- "postEffect.SSAO.enable": "<p>Whether to enable SSAO (screen space ambient occlusion). Not enabled by default.</p>\n",
- "postEffect.SSAO.quality": "<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": "<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\">\n <img src= [...]
- "postEffect.SSAO.intensity": "<p>The intensity of SSAO (screen space ambient occlusion). The larger the value, the darker the color.</p>\n",
- "postEffect.colorCorrection": "<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\">\n <img src=\"documents/asset/gl/img/buildings-warm.jpg\" width=\"100%\" title=\"Warm\">\ [...]
- "postEffect.colorCorrection.enable": "<p>Whether to enable the color correction.</p>\n",
- "postEffect.colorCorrection.lookupTexture": "<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 proc [...]
- "postEffect.colorCorrection.exposure": "<p>The exposure of the image.</p>\n",
- "postEffect.colorCorrection.brightness": "<p>The brightness of the image.</p>\n",
- "postEffect.colorCorrection.contrast": "<p>The contrast of the image.</p>\n",
- "postEffect.colorCorrection.saturation": "<p>The saturation of the image.</p>\n",
- "postEffect.FXAA": "<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 th [...]
- "postEffect.FXAA.enable": "<p>Whether to enable FXAA. Not enabled by default.</p>\n",
- "temporalSuperSampling": "<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.\nAn [...]
- "temporalSuperSampling.enable": "<p>Whether to enable temporal supersampling. By default, temporal supersampling is also turned on synchronously when [postEffect] (~mapbox3D.postEffect) is turned on.</p>\n"
+ "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-js\">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 <code class=\"codespan\">globe](~globe)</code>0.2<code class=\"codespan\">(smooth) and</code>0.8` (rough).</p>\n<p><img widt [...]
+ },
+ "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-js\">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=\"docu [...]
+ },
+ "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<d [...]
+ },
+ "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 [postEffect] (~mapbox3D.postEffect) is turned on.</p>\n"
+ }
}
\ 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 5fb0cb4..8446291 100644
--- a/en/documents/option-gl-parts/option-gl.series-bar3D.json
+++ b/en/documents/option-gl-parts/option-gl.series-bar3D.json
@@ -1,91 +1,269 @@
{
- "name": "<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": "<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, wit [...]
- "grid3DIndex": "<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": "<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": "<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": "<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\">\n <img src=\"documents/asset/gl/img/bar3D-bevel.png\" width=\"100%\" title=\"bevelSize: 0.3\">\n</div>\n",
- "bevelSmoothness": "<p>The smoothness of the bevel, the larger the value, the smoother.</p>\n",
- "stack": "<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",
- "minHeight": "<p>The minimum width of the bar.</p>\n",
- "itemStyle": "<p>The style of the bar, including color and opacity.</p>\n",
- "itemStyle.color": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// 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": "<p>The opacity of the graphic.</p>\n",
- "label": "<p>Configure the label of the bar.</p>\n",
- "label.show": "<p>Whether to show the label.</p>\n",
- "label.distance": "<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": "<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 [...]
- "label.textStyle": "<p>The font style of the label.</p>\n",
- "label.textStyle.color": "<p>The Color of the text.</p>\n",
- "label.textStyle.borderWidth": "<p>The border width of the text.</p>\n",
- "label.textStyle.borderColor": "<p>The border color of the text.</p>\n",
- "label.textStyle.fontFamily": "<p>The font family of the text.</p>\n",
- "label.textStyle.fontSize": "<p>The font size of the text.</p>\n",
- "label.textStyle.fontWeight": "<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": "<p>Configure labels and styles for bar highlighting.</p>\n",
- "emphasis.itemStyle.color": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// 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": "<p>The opacity of the graphic.</p>\n",
- "emphasis.label.show": "<p>Whether to show the label.</p>\n",
- "emphasis.label.distance": "<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": "<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 v [...]
- "emphasis.label.textStyle": "<p>The font style of the label.</p>\n",
- "emphasis.label.textStyle.color": "<p>The Color of the text.</p>\n",
- "emphasis.label.textStyle.borderWidth": "<p>The border width of the text.</p>\n",
- "emphasis.label.textStyle.borderColor": "<p>The border color of the text.</p>\n",
- "emphasis.label.textStyle.fontFamily": "<p>The font family of the text.</p>\n",
- "emphasis.label.textStyle.fontSize": "<p>The font size of the text.</p>\n",
- "emphasis.label.textStyle.fontWeight": "<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": "<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-js\">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": "<p>The name of data item.</p>\n",
- "data.value": "<p>Data value.</p>\n",
- "data.itemStyle": "<p>The style setting of a single data item.</p>\n",
- "data.itemStyle.color": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// 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": "<p>The opacity of the graphic.</p>\n",
- "data.label": "<p>The label setting of a single data item.</p>\n",
- "data.label.show": "<p>Whether to show the label.</p>\n",
- "data.label.distance": "<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": "<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 [...]
- "data.label.textStyle": "<p>The font style of the label.</p>\n",
- "data.label.textStyle.color": "<p>The Color of the text.</p>\n",
- "data.label.textStyle.borderWidth": "<p>The border width of the text.</p>\n",
- "data.label.textStyle.borderColor": "<p>The border color of the text.</p>\n",
- "data.label.textStyle.fontFamily": "<p>The font family of the text.</p>\n",
- "data.label.textStyle.fontSize": "<p>The font size of the text.</p>\n",
- "data.label.textStyle.fontWeight": "<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": "<p>Configure labels and styles for a sigle data item highlighting.</p>\n",
- "data.emphasis.itemStyle.color": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// 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": "<p>The opacity of the graphic.</p>\n",
- "data.emphasis.label.show": "<p>Whether to show the label.</p>\n",
- "data.emphasis.label.distance": "<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": "<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>: [...]
- "data.emphasis.label.textStyle": "<p>The font style of the label.</p>\n",
- "data.emphasis.label.textStyle.color": "<p>The Color of the text.</p>\n",
- "data.emphasis.label.textStyle.borderWidth": "<p>The border width of the text.</p>\n",
- "data.emphasis.label.textStyle.borderColor": "<p>The border color of the text.</p>\n",
- "data.emphasis.label.textStyle.fontFamily": "<p>The font family of the text.</p>\n",
- "data.emphasis.label.textStyle.fontSize": "<p>The font size of the text.</p>\n",
- "data.emphasis.label.textStyle.fontWeight": "<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": "<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": "<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": "<p>The texture map of the material detail.</p>\n",
- "realisticMaterial.textureTiling": "<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, [...]
- "realisticMaterial.textureOffset": "<p>The displacement of the texture detail texture.</p>\n",
- "realisticMaterial.roughness": "<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 <code class=\"codespan\">globe](~globe)</code>0.2<code class=\"codespan\">(smooth) and</code>0.8` (roug [...]
- "realisticMaterial.metalness": "<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 [...]
- "realisticMaterial.roughnessAdjust": "<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": "<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": "<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": "<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": "<p>The texture map of the material detail.</p>\n",
- "lambertMaterial.textureTiling": "<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, yo [...]
- "lambertMaterial.textureOffset": "<p>The displacement of the texture detail texture.</p>\n",
- "colorMaterial": "<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": "<p>The texture map of the material detail.</p>\n",
- "colorMaterial.textureTiling": "<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 [...]
- "colorMaterial.textureOffset": "<p>The displacement of the texture detail texture.</p>\n",
- "zlevel": "<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": "<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": "<p>Whether to enable animation.</p>\n",
- "animationDurationUpdate": "<p>The duration time for update the transition animation.</p>\n",
- "animationEasingUpdate": "<p>The easing effect for update transition animation.</p>\n"
+ "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"
+ },
+ "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-js\">// 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 ite [...]
+ },
+ "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-js\">// 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 ite [...]
+ },
+ "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-js\">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-js\">// 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 ite [...]
+ },
+ "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-js\">// 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 ite [...]
+ },
+ "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 <code class=\"codespan\">globe](~globe)</code>0.2<code class=\"codespan\">(smooth) and</code>0.8` (rough).</p>\n<p><img widt [...]
+ },
+ "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
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 a39f432..5d16c30 100644
--- a/en/documents/option-gl-parts/option-gl.series-flowGL.json
+++ b/en/documents/option-gl-parts/option-gl.series-flowGL.json
@@ -1,14 +1,38 @@
{
- "particleDensity": "<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": "<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\">`point'</code> and <code class=\"codespan\">'line'</code>.</p [...]
- "particleSize": "<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": "<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": "<p>The length of the track of the particle. The larger the value, the longer the track.</p>\n",
- "supersampling": "<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/flo [...]
- "gridWidth": "<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": "<p>The number of grid heights of incoming grid data.</p>\n",
- "data": "<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-js\">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": "<p>The style of the vector field trace.</p>\n",
- "itemStyle.color": "<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": "<p>Transparency of vector field traces.</p>\n"
+ "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-js\">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
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 1f6a9f2..e53458a 100644
--- a/en/documents/option-gl-parts/option-gl.series-graphGL.json
+++ b/en/documents/option-gl-parts/option-gl.series-graphGL.json
@@ -1,48 +1,140 @@
{
- "name": "<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": "<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": "<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 hund [...]
- "forceAtlas2.GPU": "<p>Whether to enable GPU layout.</p>\n",
- "forceAtlas2.steps": "<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": "<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": "<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": "<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": "<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": "<p>The gravity that the node is subjected to. This force will make the nodes close to the center.</p>\n",
- "forceAtlas2.gravityCenter": "<p>The position of the gravity center. By default, is the middle point of the initial position.</p>\n",
- "forceAtlas2.scaling": "<p>The scaling factor of the layout. The larger the value, the greater the repulsive force between the nodes.</p>\n",
- "forceAtlas2.edgeWeightInfluence": "<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": "<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": "<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": "<p>Whether to prevent the nodes from overlapping.</p>\n",
- "symbol": "<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": "<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-js\">(value: Array|number, params: Obj [...]
- "itemStyle": "<p>The style settings for the node.</p>\n",
- "itemStyle.color": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// 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": "<p>The opacity of the graphic.</p>\n",
- "itemStyle.borderWidth": "<p>Sets the width of the border.</p>\n",
- "itemStyle.borderColor": "<p>Sets the color of the border.</p>\n",
- "lineStyle": "<p>The style setting of the relationship line.</p>\n",
- "lineStyle.color": "<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-js\">// 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": "<p>The opacity of the line.</p>\n",
- "lineStyle.width": "<p>The width of the line.</p>\n",
- "data": "<p>The data set of the node.</p>\n<p>The data format is the same as <a href=\"http://echarts.baidu.com/option.html#series-graph.data\" target=\"_blank\">graph.data</a></p>\n",
- "data.name": "<p>The name of the data item.</p>\n",
- "data.value": "<p>Data item value.</p>\n",
- "data.itemStyle": "<p>The style of a single node.</p>\n",
- "data.itemStyle.color": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// 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": "<p>The opacity of the graphic.</p>\n",
- "data.itemStyle.borderWidth": "<p>Sets the width of the border.</p>\n",
- "data.itemStyle.borderColor": "<p>Sets the color of the border.</p>\n",
- "nodes": "<p>Same as <a href=\"#series-graphGL.data\">graphGL.data</a>.</p>\n",
- "links": "<p>Relational data between nodes.\nThe data format is the same as <a href=\"http://echarts.baidu.com/option.html#series-graph.links\" target=\"_blank\">graph.links</a></p>\n",
- "links.source": "<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": "<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": "<p>The value of the edge.</p>\n",
- "links.lineStyle": "<p>The style of a single edge.</p>\n",
- "links.lineStyle.color": "<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-js\">// 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": "<p>The opacity of the line.</p>\n",
- "links.lineStyle.width": "<p>The width of the line.</p>\n",
- "edges": "<p>Same as <a href=\"#series-graphGL.links\">graphGL.links</a></p>\n",
- "zlevel": "<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 [...]
+ "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-js\">(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-js\">// 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-js\">// 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=\"http://echarts.baidu.com/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-js\">// 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=\"http://echarts.baidu.com/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-js\">// 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
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 f4cc816..7a080bd 100644
--- a/en/documents/option-gl-parts/option-gl.series-line3D.json
+++ b/en/documents/option-gl-parts/option-gl.series-line3D.json
@@ -1,24 +1,68 @@
{
- "name": "<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": "<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": "<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": "<p>The style of the lines.</p>\n",
- "lineStyle.color": "<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-js\">// 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": "<p>The opacity of the line.</p>\n",
- "lineStyle.width": "<p>The width of the line.</p>\n",
- "lineStyle.lineStyle.color": "<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-js\">// 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": "<p>The opacity of the line.</p>\n",
- "lineStyle.lineStyle.width": "<p>The width of the line.</p>\n",
- "data": "<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-js\">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 three [...]
- "data.name": "<p>The name of data item.</p>\n",
- "data.value": "<p>Data value.</p>\n",
- "data.itemStyle": "<p>The style setting of a single data item.</p>\n",
- "data.itemStyle.color": "<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-js\">// 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": "<p>The opacity of the line.</p>\n",
- "data.itemStyle.width": "<p>The width of the line.</p>\n",
- "zlevel": "<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": "<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": "<p>Whether to enable animation.</p>\n",
- "animationDurationUpdate": "<p>The duration time for update the transition animation.</p>\n",
- "animationEasingUpdate": "<p>The easing effect for update transition animation.</p>\n"
+ "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-js\">// 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-js\">// 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-js\">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-js\">// 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
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 bf99a53..0fc6a24 100644
--- a/en/documents/option-gl-parts/option-gl.series-lines3D.json
+++ b/en/documents/option-gl-parts/option-gl.series-lines3D.json
@@ -1,29 +1,83 @@
{
- "name": "<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": "<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 coord [...]
- "geo3DIndex": "<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": "<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": "<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": "<p>The setting about the special effects of lines.</p>\n",
- "effect.show": "<p>Whether to show special effect. It is not displayed by default.</p>\n",
- "effect.period": "<p>The duration of the special effect, which unit is second.</p>\n",
- "effect.constantSpeed": "<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": "<p>The width of the trail of special effects. </p>\n",
- "effect.trailLength": "<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": "<p>The color of the trail, which default is the same as the line color.</p>\n",
- "effect.trailOpacity": "<p>The opacity of the trail, which default is the same as line opacity.</p>\n",
- "lineStyle": "<p>The line style of the lines.</p>\n",
- "lineStyle.color": "<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-js\">// 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": "<p>The opacity of the line.</p>\n",
- "lineStyle.width": "<p>The width of the line.</p>\n",
- "data": "<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-js\">data: [\n [\n [120, 66, 1], // latitude, longitude and altitude coordinates of the start point\n [122, 67, 2] // latitude, longitude an [...]
- "data.coords": "<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": "<p>The value of data.</p>\n",
- "data.lineStyle": "<p>Style setting for single data (single line).</p>\n",
- "data.lineStyle.color": "<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-js\">// 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": "<p>The opacity of the line.</p>\n",
- "data.lineStyle.width": "<p>The width of the line.</p>\n",
- "blendMode": "<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 ove [...]
- "zlevel": "<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": "<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"
+ "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-js\">// 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-js\">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-js\">// 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
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 833f398..d852346 100644
--- a/en/documents/option-gl-parts/option-gl.series-map3D.json
+++ b/en/documents/option-gl-parts/option-gl.series-map3D.json
@@ -1,173 +1,515 @@
{
- "name": "<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": "<p>The map type. The map type used in ECharts-gl is the same as the <a href=\"http://echarts.baidu.com/option.html#geo.map\" target=\"_blank\">geo</a> component.</p>\n<p>You can download the required map file in the <a href=\"http://ecomfe.github.io/echarts-builder-web/map3.html\" target=\"_blank\">Map Download Interface</a>, then to import and register it into ECharts.</p>\n<p>EChart provides map data in two formats. One is the JS file that can be imported directly through the [...]
- "boxWidth": "<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": "<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": "<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": "<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": "<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-js\">// Configure as a panoramic texture\nenvironment: 'asset/starfiel [...]
- "groundPlane": "<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": "<p>Whether to display the ground.</p>\n",
- "groundPlane.color": "<p>The color of the ground.</p>\n",
- "instancing": "<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": "<p>The setting of the label.</p>\n",
- "label.show": "<p>Whether to show the label.</p>\n",
- "label.distance": "<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": "<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 [...]
- "label.textStyle": "<p>The font style of the label.</p>\n",
- "label.textStyle.color": "<p>The Color of the text.</p>\n",
- "label.textStyle.borderWidth": "<p>The border width of the text.</p>\n",
- "label.textStyle.borderColor": "<p>The border color of the text.</p>\n",
- "label.textStyle.fontFamily": "<p>The font family of the text.</p>\n",
- "label.textStyle.fontSize": "<p>The font size of the text.</p>\n",
- "label.textStyle.fontWeight": "<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": "<p>Visual properties of 3D graphics in 三维地图, including color, transparency, strokes, etc.</p>\n",
- "itemStyle.color": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// 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": "<p>The opacity of the graphic.</p>\n",
- "itemStyle.borderWidth": "<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": "<p>The color of the border.</p>\n",
- "emphasis": "<p>Graphic and label styles when mouse hover is highlighted.</p>\n",
- "emphasis.label.show": "<p>Whether to show the label.</p>\n",
- "emphasis.label.distance": "<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": "<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 v [...]
- "emphasis.label.textStyle": "<p>The font style of the label.</p>\n",
- "emphasis.label.textStyle.color": "<p>The Color of the text.</p>\n",
- "emphasis.label.textStyle.borderWidth": "<p>The border width of the text.</p>\n",
- "emphasis.label.textStyle.borderColor": "<p>The border color of the text.</p>\n",
- "emphasis.label.textStyle.fontFamily": "<p>The font family of the text.</p>\n",
- "emphasis.label.textStyle.fontSize": "<p>The font size of the text.</p>\n",
- "emphasis.label.textStyle.fontWeight": "<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": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// 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": "<p>The opacity of the graphic.</p>\n",
- "data": "<p>The setting of the map area.</p>\n",
- "data.name": "<p>The name of the corresponding map area, such as <code class=\"codespan\">'Guangdong'</code>, <code class=\"codespan\">'Zhejiang'</code>.</p>\n",
- "data.value": "<p>The data value for this area.</p>\n",
- "data.regionHeight": "<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": "<p>Style settings for a single area.</p>\n",
- "data.itemStyle.color": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// 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": "<p>The opacity of the graphic.</p>\n",
- "data.itemStyle.borderWidth": "<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": "<p>The color of the border.</p>\n",
- "data.label": "<p>Label settings for a single area.</p>\n",
- "data.label.show": "<p>Whether to show the label.</p>\n",
- "data.label.distance": "<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": "<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 [...]
- "data.label.textStyle": "<p>The font style of the label.</p>\n",
- "data.label.textStyle.color": "<p>The Color of the text.</p>\n",
- "data.label.textStyle.borderWidth": "<p>The border width of the text.</p>\n",
- "data.label.textStyle.borderColor": "<p>The border color of the text.</p>\n",
- "data.label.textStyle.fontFamily": "<p>The font family of the text.</p>\n",
- "data.label.textStyle.fontSize": "<p>The font size of the text.</p>\n",
- "data.label.textStyle.fontWeight": "<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": "<p>Setting the highlight for labels and styles for a single area.</p>\n",
- "data.emphasis.itemStyle.color": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// 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": "<p>The opacity of the graphic.</p>\n",
- "data.emphasis.itemStyle.borderWidth": "<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": "<p>The color of the border.</p>\n",
- "data.emphasis.label.show": "<p>Whether to show the label.</p>\n",
- "data.emphasis.label.distance": "<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": "<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>: [...]
- "data.emphasis.label.textStyle": "<p>The font style of the label.</p>\n",
- "data.emphasis.label.textStyle.color": "<p>The Color of the text.</p>\n",
- "data.emphasis.label.textStyle.borderWidth": "<p>The border width of the text.</p>\n",
- "data.emphasis.label.textStyle.borderColor": "<p>The border color of the text.</p>\n",
- "data.emphasis.label.textStyle.fontFamily": "<p>The font family of the text.</p>\n",
- "data.emphasis.label.textStyle.fontSize": "<p>The font size of the text.</p>\n",
- "data.emphasis.label.textStyle.fontWeight": "<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": "<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'</c [...]
- "realisticMaterial": "<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": "<p>The texture map of the material detail.</p>\n",
- "realisticMaterial.textureTiling": "<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, [...]
- "realisticMaterial.textureOffset": "<p>The displacement of the texture detail texture.</p>\n",
- "realisticMaterial.roughness": "<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 <code class=\"codespan\">globe](~globe)</code>0.2<code class=\"codespan\">(smooth) and</code>0.8` (roug [...]
- "realisticMaterial.metalness": "<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 [...]
- "realisticMaterial.roughnessAdjust": "<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": "<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": "<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": "<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": "<p>The texture map of the material detail.</p>\n",
- "lambertMaterial.textureTiling": "<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, yo [...]
- "lambertMaterial.textureOffset": "<p>The displacement of the texture detail texture.</p>\n",
- "colorMaterial": "<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": "<p>The texture map of the material detail.</p>\n",
- "colorMaterial.textureTiling": "<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 [...]
- "colorMaterial.textureOffset": "<p>The displacement of the texture detail texture.</p>\n",
- "light": "<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": "<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": "<p>The color of the main light source.</p>\n",
- "light.main.intensity": "<p>The intensity of the main light source.</p>\n",
- "light.main.shadow": "<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=\"1 [...]
- "light.main.shadowQuality": "<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.p [...]
- "light.main.alpha": "<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": "<p>The main light source is around the y-axis, which is the angle of the left-right rotation.</p>\n",
- "light.ambient": "<p>Global ambient light settings.</p>\n",
- "light.ambient.color": "<p>The color of ambient light.</p>\n",
- "light.ambient.intensity": "<p>The intensity of ambient light.</p>\n",
- "light.ambientCubemap": "<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": "<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-js\">ambientCubemap: {\n texture: 'pisa.hdr',\n // The exposure value used whe [...]
- "light.ambientCubemap.diffuseIntensity": "<p>The intensity of diffuse.</p>\n",
- "light.ambientCubemap.specularIntensity": "<p>The intensity of specular.</p>\n",
- "postEffect": "<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 [...]
- "postEffect.enable": "<p>Whether to enable post-processing effects. Not enabled by default.</p>\n",
- "postEffect.bloom": "<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-post [...]
- "postEffect.bloom.enable": "<p>Whether to enable the bloom effect.</p>\n",
- "postEffect.bloom.bloomIntensity": "<p>The intensity of the bloom. The default is 0.1.</p>\n",
- "postEffect.depthOfField": "<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.</ [...]
- "postEffect.depthOfField.enable": "<p>Whether to enable the depth of field.</p>\n",
- "postEffect.depthOfField.focalDistance": "<p>The initial focus distance. The user can click on the area to automatically focus.</p>\n",
- "postEffect.depthOfField.focalRange": "<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": "<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": "<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\">\n <img src=\"documents/asset/gl/img/geo-dof-large.png\" width=\"100%\" title=\"blurSize: 10\">\n</div>\n",
- "postEffect.screenSpaceAmbientOcclusion": "<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 [...]
- "postEffect.SSAO": "<p>Same as <a href=\"#series-map3D.postEffect.screenSpaceAmbientOcclusion\">screenSpaceAmbientOcclusion</a></p>\n",
- "postEffect.SSAO.enable": "<p>Whether to enable SSAO (screen space ambient occlusion). Not enabled by default.</p>\n",
- "postEffect.SSAO.quality": "<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": "<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\">\n <img src= [...]
- "postEffect.SSAO.intensity": "<p>The intensity of SSAO (screen space ambient occlusion). The larger the value, the darker the color.</p>\n",
- "postEffect.colorCorrection": "<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\">\n <img src=\"documents/asset/gl/img/buildings-warm.jpg\" width=\"100%\" title=\"Warm\">\ [...]
- "postEffect.colorCorrection.enable": "<p>Whether to enable the color correction.</p>\n",
- "postEffect.colorCorrection.lookupTexture": "<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 proc [...]
- "postEffect.colorCorrection.exposure": "<p>The exposure of the image.</p>\n",
- "postEffect.colorCorrection.brightness": "<p>The brightness of the image.</p>\n",
- "postEffect.colorCorrection.contrast": "<p>The contrast of the image.</p>\n",
- "postEffect.colorCorrection.saturation": "<p>The saturation of the image.</p>\n",
- "postEffect.FXAA": "<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. A [...]
- "postEffect.FXAA.enable": "<p>Whether to enable FXAA. Not enabled by default.</p>\n",
- "temporalSuperSampling": "<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. [...]
- "temporalSuperSampling.enable": "<p>Whether to enable temporal supersampling. By default, temporal supersampling is also turned on synchronously when [postEffect] (~series-map3D.postEffect) is turned on.</p>\n",
- "viewControl": "<p><code class=\"codespan\">viewControl</code> is used for mouse rotation, zooming, and other perspective control.</p>\n",
- "viewControl.projection": "<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": "<p>Whether to enable the angle of view to automatically rotate around the object.</p>\n",
- "viewControl.autoRotateDirection": "<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": "<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": "<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": "<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": "<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-js\">// can't rotate\nrotateSensitivity: 0\n// can only be rotated horizontally\nrotateSensitivity: [1, [...]
- "viewControl.zoomSensitivity": "<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": "<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": "<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": "<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": "<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": "<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": "<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": "<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": "<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": "<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": "<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": "<p>The angle of view is around the y-axis, which is the angle of rotation from left to right.</p>\n",
- "viewControl.center": "<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": "<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": "<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": "<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": "<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": "<p>Whether to enable animation.</p>\n",
- "viewControl.animationDurationUpdate": "<p>The duration time for update the transition animation.</p>\n",
- "viewControl.animationEasingUpdate": "<p>The easing effect for update transition animation.</p>\n",
- "zlevel": "<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": "<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 t [...]
- "top": "<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 the [...]
- "right": "<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": "<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": "<p> The width of the view of the component.</p>\n",
- "height": "<p> The height of the view of the component.</p>\n"
+ "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=\"http://echarts.baidu.com/option.html#geo.map\" target=\"_blank\">geo</a> component.</p>\n<p>You can download the required map file in the <a href=\"http://ecomfe.github.io/echarts-builder-web/map3.html\" target=\"_blank\">Map Download Interface</a>, then to import and register it into ECharts.</p>\n<p>EChart provides map data in two formats. One is the JS file that can be imported directly through [...]
+ },
+ "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-js\">// 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 ite [...]
+ },
+ "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-js\">// 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 ite [...]
+ },
+ "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-js\">// 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-js\">// 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 ite [...]
+ },
+ "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-js\">// 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 ite [...]
+ },
+ "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 <code class=\"codespan\">globe](~globe)</code>0.2<code class=\"codespan\">(smooth) and</code>0.8` (rough).</p>\n<p><img widt [...]
+ },
+ "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-js\">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=\"docu [...]
+ },
+ "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<d [...]
+ },
+ "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 [postEffect] (~series-map3D.postEffect) 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-js\">// 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
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 5666370..65aca92 100644
--- a/en/documents/option-gl-parts/option-gl.series-polygons3D.json
+++ b/en/documents/option-gl-parts/option-gl.series-polygons3D.json
@@ -1,13 +1,35 @@
{
- "multiPolygon": "<p>Whether a data contains multiple polygons.</p>\n",
- "itemStyle": "<p>Graphic styles, including color, transparency, strokes, and etc.</p>\n",
- "itemStyle.color": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// 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": "<p>The opacity of the graphic.</p>\n",
- "emphasis": "<p>Mouse hover Highlights the style of graphics and labels.</p>\n",
- "emphasis.itemStyle.color": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// 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": "<p>The opacity of the graphic.</p>\n",
- "data": "<p>A list of data for the polygon.</p>\n<pre><code class=\"lang-js\">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": "<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": "<p>Enable progressive rendering thresholds, progressive rendering can be loading the screen without blocking.</p>\n",
- "progressive": "<p>Progressively render the amount of data per render.</p>\n"
+ "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-js\">// 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-js\">// 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-js\">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
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 8a32290..e3cf716 100644
--- a/en/documents/option-gl-parts/option-gl.series-scatter3D.json
+++ b/en/documents/option-gl-parts/option-gl.series-scatter3D.json
@@ -1,49 +1,143 @@
{
- "name": "<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": "<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, wit [...]
- "grid3DIndex": "<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": "<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": "<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": "<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": "<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-js\">(value: Array|number, params: Obj [...]
- "itemStyle": "<p>Sets the style of scatter such as colors, strokes, etc.</p>\n",
- "itemStyle.color": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// 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": "<p>The opacity of the graphic.</p>\n",
- "itemStyle.borderWidth": "<p>Sets the width of the border.</p>\n",
- "itemStyle.borderColor": "<p>Sets the color of the border.</p>\n",
- "label": "<p>Sets the style of label.</p>\n",
- "label.show": "<p>Whether to show the label.</p>\n",
- "label.distance": "<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": "<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": "<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 [...]
- "label.textStyle": "<p>The font style of the label.</p>\n",
- "label.textStyle.color": "<p>The Color of the text.</p>\n",
- "label.textStyle.borderWidth": "<p>The border width of the text.</p>\n",
- "label.textStyle.borderColor": "<p>The border color of the text.</p>\n",
- "label.textStyle.fontFamily": "<p>The font family of the text.</p>\n",
- "label.textStyle.fontSize": "<p>The font size of the text.</p>\n",
- "label.textStyle.fontWeight": "<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": "<p>Graphics and labels are highlighted.</p>\n",
- "emphasis.itemStyle.color": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// 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": "<p>The opacity of the graphic.</p>\n",
- "emphasis.itemStyle.borderWidth": "<p>Sets the width of the border.</p>\n",
- "emphasis.itemStyle.borderColor": "<p>Sets the color of the border.</p>\n",
- "emphasis.label.show": "<p>Whether to show the label.</p>\n",
- "emphasis.label.distance": "<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": "<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": "<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 v [...]
- "emphasis.label.textStyle": "<p>The font style of the label.</p>\n",
- "emphasis.label.textStyle.color": "<p>The Color of the text.</p>\n",
- "emphasis.label.textStyle.borderWidth": "<p>The border width of the text.</p>\n",
- "emphasis.label.textStyle.borderColor": "<p>The border color of the text.</p>\n",
- "emphasis.label.textStyle.fontFamily": "<p>The font family of the text.</p>\n",
- "emphasis.label.textStyle.fontSize": "<p>The font size of the text.</p>\n",
- "emphasis.label.textStyle.fontWeight": "<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": "<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-js\">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\">y [...]
- "blendMode": "<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 ove [...]
- "zlevel": "<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": "<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": "<p>Whether to enable animation.</p>\n",
- "animationDurationUpdate": "<p>The duration time for update the transition animation.</p>\n",
- "animationEasingUpdate": "<p>The easing effect for update transition animation.</p>\n"
+ "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-js\">(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-js\">// 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 ite [...]
+ },
+ "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-js\">// 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 ite [...]
+ },
+ "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-js\">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
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 007e100..0e1e518 100644
--- a/en/documents/option-gl-parts/option-gl.series-scatterGL.json
+++ b/en/documents/option-gl-parts/option-gl.series-scatterGL.json
@@ -1,23 +1,65 @@
{
- "name": "<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": "<p>The coordinate system used.</p>\n<p>Same as <a href=\"http://echarts.baidu.com/option.html#series-scatter.coordinateSystem\" target=\"_blank\">scatter.coordinateSystem</a></p>\n",
- "symbol": "<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": "<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-js\">(value: Array|number, params: Obj [...]
- "itemStyle": "<p>Sets the style of scatter</p>\n",
- "itemStyle.color": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// 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": "<p>The opacity of the graphic.</p>\n",
- "itemStyle.borderWidth": "<p>Sets the width of the border.</p>\n",
- "itemStyle.borderColor": "<p>Sets the color of the border.</p>\n",
- "data": "<p>The data array of scatter.</p>\n<p>The data format is the same as <a href=\"http://echarts.baidu.com/option.html#series-scatter.data\" target=\"_blank\">scatter.data</a></p>\n",
- "data.name": "<p>The name of the data item.</p>\n",
- "data.value": "<p>Data item value</p>\n",
- "data.itemStyle": "<p>The style of a single data graphic.</p>\n",
- "data.itemStyle.color": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// 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": "<p>The opacity of the graphic.</p>\n",
- "data.itemStyle.borderWidth": "<p>Sets the width of the border.</p>\n",
- "data.itemStyle.borderColor": "<p>Sets the color of the border.</p>\n",
- "blendMode": "<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 ove [...]
- "zlevel": "<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": "<p>Enable progressive rendering thresholds, progressive rendering can be loading the screen without blocking.</p>\n",
- "progressive": "<p>Progressively render the amount of data per render.</p>\n"
+ "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=\"http://echarts.baidu.com/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-js\">(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-js\">// 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=\"http://echarts.baidu.com/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-js\">// 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
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 53bf176..208c84b 100644
--- a/en/documents/option-gl-parts/option-gl.series-surface.json
+++ b/en/documents/option-gl-parts/option-gl.series-surface.json
@@ -1,66 +1,194 @@
{
- "name": "<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": "<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": "<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": "<p>Whether it is a parametric surface.</p>\n",
- "wireframe": "<p>The wireframe of the surface.</p>\n",
- "wireframe.show": "<p>Whether to display wireframe. Default is Display.</p>\n",
- "wireframe.lineStyle": "<p>The style of the wireframe.</p>\n",
- "wireframe.lineStyle.color": "<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-js\">// 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": "<p>The opacity of the line.</p>\n",
- "wireframe.lineStyle.width": "<p>The width of the line.</p>\n",
- "equation": "<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-js\">equation: {\n x: {\n step: 0.1,\n min: -3,\n max: 3,\n },\n y: {\n step: 0.1,\n min: -3,\n [...]
- "equation.x": "<p>Independent variable x.</p>\n",
- "equation.x.step": "<p>The step size of x.</p>\n",
- "equation.x.min": "<p>The minimum value of x.</p>\n",
- "equation.x.max": "<p>The maximum value of x.</p>\n",
- "equation.y": "<p>The independent variable y.</p>\n",
- "equation.y.step": "<p>The step size of x.</p>\n",
- "equation.y.min": "<p>The minimum value of y.</p>\n",
- "equation.y.max": "<p>The maximum value of y.</p>\n",
- "equation.z": "<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-js\">(x: number, y: number) => number\n</code></pre>\n",
- "parametricEquation": "<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\" [...]
- "parametricEquation.u": "<p>The argument u.</p>\n",
- "parametricEquation.u.step": "<p>The step size of u.</p>\n",
- "parametricEquation.u.min": "<p>The minimum value of u.</p>\n",
- "parametricEquation.u.max": "<p>The maximum value of u.</p>\n",
- "parametricEquation.v": "<p>Independent variable v.</p>\n",
- "parametricEquation.v.step": "<p>The step size of v.</p>\n",
- "parametricEquation.v.min": "<p>The minimum value of v.</p>\n",
- "parametricEquation.v.max": "<p>The maximum value of v.</p>\n",
- "parametricEquation.x": "<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-js\">(u: number, v: number) => number\n</code></pre>\n",
- "parametricEquation.y": "<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-js\">(u: number, v: number) => number\n</code></pre>\n",
- "parametricEquation.z": "<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-js\">(u: number, v: number) => number\n</code></pre>\n",
- "itemStyle": "<p>The color, opacity, and other styles of the surface.</p>\n",
- "itemStyle.color": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// 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": "<p>The opacity of the graphic.</p>\n",
- "data": "<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-js\">data: [\n [-1,-1 [...]
- "data.name": "<p>The name of the data item.</p>\n",
- "data.value": "<p>Data item value.</p>\n",
- "data.itemStyle": "<p>The style setting for a single data item.</p>\n",
- "data.itemStyle.color": "<p>The color of the graphic. </p>\n<pre><code class=\"lang-js\">// 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": "<p>The opacity of the graphic.</p>\n",
- "shading": "<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": "<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": "<p>The texture map of the material detail.</p>\n",
- "realisticMaterial.textureTiling": "<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, [...]
- "realisticMaterial.textureOffset": "<p>The displacement of the texture detail texture.</p>\n",
- "realisticMaterial.roughness": "<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 <code class=\"codespan\">globe](~globe)</code>0.2<code class=\"codespan\">(smooth) and</code>0.8` (roug [...]
- "realisticMaterial.metalness": "<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 [...]
- "realisticMaterial.roughnessAdjust": "<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": "<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": "<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": "<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": "<p>The texture map of the material detail.</p>\n",
- "lambertMaterial.textureTiling": "<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, yo [...]
- "lambertMaterial.textureOffset": "<p>The displacement of the texture detail texture.</p>\n",
- "colorMaterial": "<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": "<p>The texture map of the material detail.</p>\n",
- "colorMaterial.textureTiling": "<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 [...]
- "colorMaterial.textureOffset": "<p>The displacement of the texture detail texture.</p>\n",
- "zlevel": "<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": "<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": "<p>Whether to enable animation.</p>\n",
- "animationDurationUpdate": "<p>The duration time for update the transition animation.</p>\n",
- "animationEasingUpdate": "<p>The easing effect for update transition animation.</p>\n"
+ "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-js\">// 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-js\">equation: {\n x: {\n step: 0.1,\n min: -3,\n max: 3,\n },\n y: {\n step: 0.1,\n min: -3,\n [...]
+ },
+ "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-js\">(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-js\">(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-js\">(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-js\">(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-js\">// 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-js\">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-js\">// 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 <code class=\"codespan\">globe](~globe)</code>0.2<code class=\"codespan\">(smooth) and</code>0.8` (rough).</p>\n<p><img widt [...]
+ },
+ "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
diff --git a/en/documents/option-gl-parts/option-gl.xAxis3D.json b/en/documents/option-gl-parts/option-gl.xAxis3D.json
index a5514c5..ceb6f3c 100644
--- a/en/documents/option-gl-parts/option-gl.xAxis3D.json
+++ b/en/documents/option-gl-parts/option-gl.xAxis3D.json
@@ -1,79 +1,233 @@
{
- "show": "<p>Whether to display the x-axis.</p>\n",
- "name": "<p>The name of the axis.</p>\n",
- "grid3DIndex": "<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": "<p>Text style of axis name.</p>\n",
- "nameTextStyle.color": "<p>Color of axis name uses <a href=\"#xAxis3D.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n",
- "nameTextStyle.borderWidth": "<p>The border width of the text.</p>\n",
- "nameTextStyle.borderColor": "<p>The border color of the text.</p>\n",
- "nameTextStyle.fontFamily": "<p>The font family of the text.</p>\n",
- "nameTextStyle.fontSize": "<p>The font size of the text.</p>\n",
- "nameTextStyle.fontWeight": "<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": "<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": "<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 c [...]
- "min": "<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": "<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": "<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": "<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": "<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-js\">{\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": "<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 fo [...]
- "logBase": "<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#xAxis3D.type\">type</a>: 'log'.</p>\n",
- "data": "<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> provides [...]
- "data.value": "<p>Name of a category.</p>\n",
- "data.textStyle": "<p>Text style of the category.</p>\n",
- "data.textStyle.color": "<p>The Color of the text.</p>\n",
- "data.textStyle.borderWidth": "<p>The border width of the text.</p>\n",
- "data.textStyle.borderColor": "<p>The border color of the text.</p>\n",
- "data.textStyle.fontFamily": "<p>The font family of the text.</p>\n",
- "data.textStyle.fontSize": "<p>The font size of the text.</p>\n",
- "data.textStyle.fontWeight": "<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": "<p>Settings related to axis line.</p>\n",
- "axisLine.show": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n",
- "axisLine.interval": "<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.</ [...]
- "axisLine.lineStyle.color": "<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-js\">// 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": "<p>The opacity of the line.</p>\n",
- "axisLine.lineStyle.width": "<p>The width of the line.</p>\n",
- "axisLabel": "<p>Settings related to axis label.</p>\n",
- "axisLabel.show": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis label from appearing.</p>\n",
- "axisLabel.margin": "<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": "<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.< [...]
- "axisLabel.textStyle.color": "<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-js\">(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-js\">textStyle: {\n color: function (value, index) {\n return value >= 0 ? & [...]
- "axisLabel.textStyle.borderWidth": "<p>The border width of the text.</p>\n",
- "axisLabel.textStyle.borderColor": "<p>The border color of the text.</p>\n",
- "axisLabel.textStyle.fontFamily": "<p>The font family of the text.</p>\n",
- "axisLabel.textStyle.fontSize": "<p>The font size of the text.</p>\n",
- "axisLabel.textStyle.fontWeight": "<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<!-- Overwrite color -->",
- "axisTick": "<p>Settings related to axis tick.</p>\n",
- "axisTick.show": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis tick from showing.</p>\n",
- "axisTick.interval": "<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\ [...]
- "axisTick.length": "<p>The length of the axis tick.</p>\n",
- "axisTick.lineStyle.color": "<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": "<p>The opacity of the line.</p>\n",
- "axisTick.lineStyle.width": "<p>The width of the line.</p>\n<!-- Overwrite color -->",
- "splitLine": "<p>Settings related to axis line.</p>\n",
- "splitLine.show": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n",
- "splitLine.interval": "<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.< [...]
- "splitLine.lineStyle.color": "<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-js\">// 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": "<p>The opacity of the line.</p>\n",
- "splitLine.lineStyle.width": "<p>The width of the line.</p>\n",
- "splitArea": "<p>Split area of axis in <a href=\"#grid\">grid</a> area.</p>\n",
- "splitArea.show": "<p>Set this to be <code class=\"codespan\">true</code> to show the splitArea.</p>\n",
- "splitArea.interval": "<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\" [...]
- "splitArea.areaStyle": "<p>Split area style.</p>\n",
- "splitArea.areaStyle.color": "<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": "<p>Configurations for axis pointer.</p>\n",
- "axisPointer.show": "<p>Whether to display the axisPointer. Set this to be <code class=\"codespan\">true</code> to show the splitArea.</p>\n",
- "axisPointer.lineStyle.color": "<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-js\">// 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": "<p>The opacity of the line.</p>\n",
- "axisPointer.lineStyle.width": "<p>The width of the line.</p>\n",
- "axisPointer.label": "<p>The label of axisPointer.</p>\n",
- "axisPointer.label.show": "<p>Whether to display the label of axisPointer. Value axes are displayed by default, while category axes are not.</p>\n",
- "axisPointer.label.formatter": "<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-js\">(value: number, valueAll: Array) => string\n</code></pre>\n",
- "axisPointer.label.margin": "<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": "<p>The Color of the text.</p>\n",
- "axisPointer.label.textStyle.borderWidth": "<p>The border width of the text.</p>\n",
- "axisPointer.label.textStyle.borderColor": "<p>The border color of the text.</p>\n",
- "axisPointer.label.textStyle.fontFamily": "<p>The font family of the text.</p>\n",
- "axisPointer.label.textStyle.fontSize": "<p>The font size of the text.</p>\n",
- "axisPointer.label.textStyle.fontWeight": "<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"
+ "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-js\">{\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-js\">// 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-js\">(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-js\">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-js\">// 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-js\">// 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-js\">(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
diff --git a/en/documents/option-gl-parts/option-gl.yAxis3D.json b/en/documents/option-gl-parts/option-gl.yAxis3D.json
index 86df0fe..ab7c91a 100644
--- a/en/documents/option-gl-parts/option-gl.yAxis3D.json
+++ b/en/documents/option-gl-parts/option-gl.yAxis3D.json
@@ -1,79 +1,233 @@
{
- "show": "<p>Whether to display the y-axis.</p>\n",
- "name": "<p>The name of the axis.</p>\n",
- "grid3DIndex": "<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": "<p>Text style of axis name.</p>\n",
- "nameTextStyle.color": "<p>Color of axis name uses <a href=\"#yAxis3D.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n",
- "nameTextStyle.borderWidth": "<p>The border width of the text.</p>\n",
- "nameTextStyle.borderColor": "<p>The border color of the text.</p>\n",
- "nameTextStyle.fontFamily": "<p>The font family of the text.</p>\n",
- "nameTextStyle.fontSize": "<p>The font size of the text.</p>\n",
- "nameTextStyle.fontWeight": "<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": "<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": "<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 c [...]
- "min": "<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": "<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": "<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": "<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": "<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-js\">{\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": "<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 fo [...]
- "logBase": "<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#yAxis3D.type\">type</a>: 'log'.</p>\n",
- "data": "<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> provides [...]
- "data.value": "<p>Name of a category.</p>\n",
- "data.textStyle": "<p>Text style of the category.</p>\n",
- "data.textStyle.color": "<p>The Color of the text.</p>\n",
- "data.textStyle.borderWidth": "<p>The border width of the text.</p>\n",
- "data.textStyle.borderColor": "<p>The border color of the text.</p>\n",
- "data.textStyle.fontFamily": "<p>The font family of the text.</p>\n",
- "data.textStyle.fontSize": "<p>The font size of the text.</p>\n",
- "data.textStyle.fontWeight": "<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": "<p>Settings related to axis line.</p>\n",
- "axisLine.show": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n",
- "axisLine.interval": "<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.</ [...]
- "axisLine.lineStyle.color": "<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-js\">// 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": "<p>The opacity of the line.</p>\n",
- "axisLine.lineStyle.width": "<p>The width of the line.</p>\n",
- "axisLabel": "<p>Settings related to axis label.</p>\n",
- "axisLabel.show": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis label from appearing.</p>\n",
- "axisLabel.margin": "<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": "<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.< [...]
- "axisLabel.textStyle.color": "<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-js\">(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-js\">textStyle: {\n color: function (value, index) {\n return value >= 0 ? & [...]
- "axisLabel.textStyle.borderWidth": "<p>The border width of the text.</p>\n",
- "axisLabel.textStyle.borderColor": "<p>The border color of the text.</p>\n",
- "axisLabel.textStyle.fontFamily": "<p>The font family of the text.</p>\n",
- "axisLabel.textStyle.fontSize": "<p>The font size of the text.</p>\n",
- "axisLabel.textStyle.fontWeight": "<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<!-- Overwrite color -->",
- "axisTick": "<p>Settings related to axis tick.</p>\n",
- "axisTick.show": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis tick from showing.</p>\n",
- "axisTick.interval": "<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\ [...]
- "axisTick.length": "<p>The length of the axis tick.</p>\n",
- "axisTick.lineStyle.color": "<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": "<p>The opacity of the line.</p>\n",
- "axisTick.lineStyle.width": "<p>The width of the line.</p>\n<!-- Overwrite color -->",
- "splitLine": "<p>Settings related to axis line.</p>\n",
- "splitLine.show": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n",
- "splitLine.interval": "<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.< [...]
- "splitLine.lineStyle.color": "<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-js\">// 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": "<p>The opacity of the line.</p>\n",
- "splitLine.lineStyle.width": "<p>The width of the line.</p>\n",
- "splitArea": "<p>Split area of axis in <a href=\"#grid\">grid</a> area.</p>\n",
- "splitArea.show": "<p>Set this to be <code class=\"codespan\">true</code> to show the splitArea.</p>\n",
- "splitArea.interval": "<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\" [...]
- "splitArea.areaStyle": "<p>Split area style.</p>\n",
- "splitArea.areaStyle.color": "<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": "<p>Configurations for axis pointer.</p>\n",
- "axisPointer.show": "<p>Whether to display the axisPointer. Set this to be <code class=\"codespan\">true</code> to show the splitArea.</p>\n",
- "axisPointer.lineStyle.color": "<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-js\">// 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": "<p>The opacity of the line.</p>\n",
- "axisPointer.lineStyle.width": "<p>The width of the line.</p>\n",
- "axisPointer.label": "<p>The label of axisPointer.</p>\n",
- "axisPointer.label.show": "<p>Whether to display the label of axisPointer. Value axes are displayed by default, while category axes are not.</p>\n",
- "axisPointer.label.formatter": "<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-js\">(value: number, valueAll: Array) => string\n</code></pre>\n",
- "axisPointer.label.margin": "<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": "<p>The Color of the text.</p>\n",
- "axisPointer.label.textStyle.borderWidth": "<p>The border width of the text.</p>\n",
- "axisPointer.label.textStyle.borderColor": "<p>The border color of the text.</p>\n",
- "axisPointer.label.textStyle.fontFamily": "<p>The font family of the text.</p>\n",
- "axisPointer.label.textStyle.fontSize": "<p>The font size of the text.</p>\n",
- "axisPointer.label.textStyle.fontWeight": "<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"
+ "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-js\">{\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-js\">// 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-js\">(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-js\">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-js\">// 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-js\">// 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-js\">(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
diff --git a/en/documents/option-gl-parts/option-gl.zAxis3D.json b/en/documents/option-gl-parts/option-gl.zAxis3D.json
index e698bd9..7c38682 100644
--- a/en/documents/option-gl-parts/option-gl.zAxis3D.json
+++ b/en/documents/option-gl-parts/option-gl.zAxis3D.json
@@ -1,79 +1,233 @@
{
- "show": "<p>Whether to display the z-axis.</p>\n",
- "name": "<p>The name of the axis.</p>\n",
- "grid3DIndex": "<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": "<p>Text style of axis name.</p>\n",
- "nameTextStyle.color": "<p>Color of axis name uses <a href=\"#zAxis3D.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n",
- "nameTextStyle.borderWidth": "<p>The border width of the text.</p>\n",
- "nameTextStyle.borderColor": "<p>The border color of the text.</p>\n",
- "nameTextStyle.fontFamily": "<p>The font family of the text.</p>\n",
- "nameTextStyle.fontSize": "<p>The font size of the text.</p>\n",
- "nameTextStyle.fontWeight": "<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": "<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": "<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 c [...]
- "min": "<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": "<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": "<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": "<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": "<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-js\">{\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": "<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 fo [...]
- "logBase": "<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#zAxis3D.type\">type</a>: 'log'.</p>\n",
- "data": "<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> provides [...]
- "data.value": "<p>Name of a category.</p>\n",
- "data.textStyle": "<p>Text style of the category.</p>\n",
- "data.textStyle.color": "<p>The Color of the text.</p>\n",
- "data.textStyle.borderWidth": "<p>The border width of the text.</p>\n",
- "data.textStyle.borderColor": "<p>The border color of the text.</p>\n",
- "data.textStyle.fontFamily": "<p>The font family of the text.</p>\n",
- "data.textStyle.fontSize": "<p>The font size of the text.</p>\n",
- "data.textStyle.fontWeight": "<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": "<p>Settings related to axis line.</p>\n",
- "axisLine.show": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n",
- "axisLine.interval": "<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.</ [...]
- "axisLine.lineStyle.color": "<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-js\">// 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": "<p>The opacity of the line.</p>\n",
- "axisLine.lineStyle.width": "<p>The width of the line.</p>\n",
- "axisLabel": "<p>Settings related to axis label.</p>\n",
- "axisLabel.show": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis label from appearing.</p>\n",
- "axisLabel.margin": "<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": "<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.< [...]
- "axisLabel.textStyle.color": "<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-js\">(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-js\">textStyle: {\n color: function (value, index) {\n return value >= 0 ? & [...]
- "axisLabel.textStyle.borderWidth": "<p>The border width of the text.</p>\n",
- "axisLabel.textStyle.borderColor": "<p>The border color of the text.</p>\n",
- "axisLabel.textStyle.fontFamily": "<p>The font family of the text.</p>\n",
- "axisLabel.textStyle.fontSize": "<p>The font size of the text.</p>\n",
- "axisLabel.textStyle.fontWeight": "<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<!-- Overwrite color -->",
- "axisTick": "<p>Settings related to axis tick.</p>\n",
- "axisTick.show": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis tick from showing.</p>\n",
- "axisTick.interval": "<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\ [...]
- "axisTick.length": "<p>The length of the axis tick.</p>\n",
- "axisTick.lineStyle.color": "<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": "<p>The opacity of the line.</p>\n",
- "axisTick.lineStyle.width": "<p>The width of the line.</p>\n<!-- Overwrite color -->",
- "splitLine": "<p>Settings related to axis line.</p>\n",
- "splitLine.show": "<p>Set this to be <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n",
- "splitLine.interval": "<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.< [...]
- "splitLine.lineStyle.color": "<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-js\">// 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": "<p>The opacity of the line.</p>\n",
- "splitLine.lineStyle.width": "<p>The width of the line.</p>\n",
- "splitArea": "<p>Split area of axis in <a href=\"#grid\">grid</a> area.</p>\n",
- "splitArea.show": "<p>Set this to be <code class=\"codespan\">true</code> to show the splitArea.</p>\n",
- "splitArea.interval": "<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\" [...]
- "splitArea.areaStyle": "<p>Split area style.</p>\n",
- "splitArea.areaStyle.color": "<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": "<p>Configurations for axis pointer.</p>\n",
- "axisPointer.show": "<p>Whether to display the axisPointer. Set this to be <code class=\"codespan\">true</code> to show the splitArea.</p>\n",
- "axisPointer.lineStyle.color": "<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-js\">// 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": "<p>The opacity of the line.</p>\n",
- "axisPointer.lineStyle.width": "<p>The width of the line.</p>\n",
- "axisPointer.label": "<p>The label of axisPointer.</p>\n",
- "axisPointer.label.show": "<p>Whether to display the label of axisPointer. Value axes are displayed by default, while category axes are not.</p>\n",
- "axisPointer.label.formatter": "<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-js\">(value: number, valueAll: Array) => string\n</code></pre>\n",
- "axisPointer.label.margin": "<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": "<p>The Color of the text.</p>\n",
- "axisPointer.label.textStyle.borderWidth": "<p>The border width of the text.</p>\n",
- "axisPointer.label.textStyle.borderColor": "<p>The border color of the text.</p>\n",
- "axisPointer.label.textStyle.fontFamily": "<p>The font family of the text.</p>\n",
- "axisPointer.label.textStyle.fontSize": "<p>The font size of the text.</p>\n",
- "axisPointer.label.textStyle.fontWeight": "<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"
+ "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-js\">{\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-js\">// 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-js\">(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-js\">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-js\">// 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-js\">// 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-js\">(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
diff --git a/en/documents/option-gl.json b/en/documents/option-gl.json
index 0448737..b33abd5 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-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
diff --git a/en/documents/option-parts/option-outline.json b/en/documents/option-parts/option-outline.json
index 0dd4781..35c44bc 100644
--- a/en/documents/option-parts/option-outline.json
+++ b/en/documents/option-parts/option-outline.json
@@ -1 +1 @@
-{"children":[{"type":"Object","isObject":true,"prop":"title","children":[{"type":"string","prop":"id"},{"default":true,"prop":"show"},{"default":"''","prop":"text"},{"default":"''","prop":"link"},{"default":"'blank'","prop":"target"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#333'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop": [...]
\ No newline at end of file
+{"children":[{"type":"Object","isObject":true,"prop":"title","children":[{"type":"string","prop":"id"},{"default":true,"prop":"show"},{"default":"''","prop":"text"},{"default":"''","prop":"link"},{"default":"'blank'","prop":"target"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#333'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop": [...]
\ No newline at end of file
diff --git a/en/documents/option-parts/option.angleAxis.json b/en/documents/option-parts/option.angleAxis.json
index 0c23a93..d365d63 100644
--- a/en/documents/option-parts/option.angleAxis.json
+++ b/en/documents/option-parts/option.angleAxis.json
@@ -1,265 +1,1747 @@
{
- "id": "<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n",
- "polarIndex": "<p>The index of angle axis in Polar Coordinate. The first axis is used by default.</p>\n",
- "startAngle": "<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/zh/view.html?c=doc-example/polar-start-angle&edit=1&reset=1\" width=\"400\" height=\"400\" ></iframe>\n\n\n",
- "clockwise": "<p>Whether the positive position of axis is in 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/zh/view.html?c=doc-example/polar-anticlockwise&edit=1&reset=1\" width=\"400\" height=\"400\" ></iframe>\n\n\n\n\n",
- "type": "<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>.</p> [...]
- "boundaryGap": "<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 l [...]
- "min": "<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', 'cate [...]
- "max": "<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', 'cate [...]
- "scale": "<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 set.</p>\n",
- "splitNumber": "<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",
- "minInterval": "<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-js\">{\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",
- "maxInterval": "<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-js\">{\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'. [...]
- "interval": "<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, out automatic calculation is enough for most situations.</p>\n<p>This is unavaila [...]
- "logBase": "<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#angleAxis.type\">type</a>: 'log'.</p>\n",
- "silent": "<p>Set this to <code class=\"codespan\">true</code>, to prevent interaction with the axis.</p>\n",
- "triggerEvent": "<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-js\">{\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 // Cli [...]
- "axisLine": "<p>Settings related to axis line.</p>\n",
- "axisLine.show": "<p>Set this to <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n",
- "axisLine.symbol": "<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=\"codespa [...]
- "axisLine.symbolSize": "<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",
- "axisLine.symbolOffset": "<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",
- "axisLine.lineStyle.color": "<p>line styleLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code class=\"codespan\">'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><cod [...]
- "axisLine.lineStyle.width": "<p>line style line width.</p>\n",
- "axisLine.lineStyle.type": "<p>line style line type.</p>\n<p>Options 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",
- "axisLine.lineStyle.shadowBlur": "<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-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n",
- "axisLine.lineStyle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "axisLine.lineStyle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "axisLine.lineStyle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "axisLine.lineStyle.opacity": "<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n",
- "axisTick": "<p>Settings related to axis tick.</p>\n",
- "axisTick.show": "<p>Set this to <code class=\"codespan\">false</code> to prevent the axis tick from showing.</p>\n",
- "axisTick.alignWithLabel": "<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",
- "axisTick.interval": "<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.</ [...]
- "axisTick.inside": "<p>Set this to <code class=\"codespan\">true</code> so the axis labels face the <code class=\"codespan\">inside</code> direction.</p>\n",
- "axisTick.length": "<p>The length of the axis tick.</p>\n",
- "axisTick.lineStyle.color": "<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": "<p>axisTick line width.</p>\n",
- "axisTick.lineStyle.type": "<p>axisTick line type.</p>\n<p>Options 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",
- "axisTick.lineStyle.shadowBlur": "<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-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n",
- "axisTick.lineStyle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "axisTick.lineStyle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "axisTick.lineStyle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "axisTick.lineStyle.opacity": "<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n<!-- Overwrite color -->\n",
- "minorTick": "<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\">cateogry</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/zh/view.html?c=line-function&edit=1&reset=1\" width=\"600\" height=\"350\" ></iframe>\n\n\n<p>2) Usi [...]
- "minorTick.show": "<p>If show minor ticks.</p>\n",
- "minorTick.splitNumber": "<p>Number of interval splited by minor ticks.</p>\n",
- "minorTick.length": "<p>Length of minor ticks lines。</p>\n",
- "minorTick.lineStyle.color": "<p>Style configuration of minor ticks lines <a href=\"#angleAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。</p>\n",
- "minorTick.lineStyle.width": "<p>minorTick line width.</p>\n",
- "minorTick.lineStyle.type": "<p>minorTick line type.</p>\n<p>Options 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",
- "minorTick.lineStyle.shadowBlur": "<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-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n",
- "minorTick.lineStyle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "minorTick.lineStyle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "minorTick.lineStyle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "minorTick.lineStyle.opacity": "<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n<!-- Overwrite color -->\n",
- "axisLabel": "<p>Settings related to axis label.</p>\n",
- "axisLabel.show": "<p>Set this to <code class=\"codespan\">false</code> to prevent the axis label from appearing.</p>\n",
- "axisLabel.interval": "<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< [...]
- "axisLabel.inside": "<p>Set this to <code class=\"codespan\">true</code> so the axis labels face the <code class=\"codespan\">inside</code> direction.</p>\n",
- "axisLabel.margin": "<p>The margin between the axis label and the axis line.</p>\n",
- "axisLabel.formatter": "<p>Formatter of axis label, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Use string template; template variable is the default label of axis {value}\nformatter: '{value} kg'\n\n// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n // Formatted to be month/day; display year only in the first label\n var date = new Date(value);\n var texts [...]
- "axisLabel.showMinLabel": "<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",
- "axisLabel.showMaxLabel": "<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",
- "axisLabel.color": "<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-js\">(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-js\">textStyle: {\n color: function (value, index) {\n return value >= 0 ? &# [...]
- "axisLabel.fontStyle": "<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",
- "axisLabel.fontWeight": "<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",
- "axisLabel.fontFamily": "<p> font family.</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "axisLabel.fontSize": "<p> font size.</p>\n",
- "axisLabel.align": "<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=\"l [...]
- "axisLabel.verticalAlign": "<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> [...]
- "axisLabel.lineHeight": "<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-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n",
- "axisLabel.backgroundColor": "<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-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or H [...]
- "axisLabel.borderColor": "<p>Border color of the text fragment.</p>\n",
- "axisLabel.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "axisLabel.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "axisLabel.padding": "<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, < [...]
- "axisLabel.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "axisLabel.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "axisLabel.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "axisLabel.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "axisLabel.width": "<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\ [...]
- "axisLabel.height": "<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">heig [...]
- "axisLabel.textBorderColor": "<p>Storke color of the text.</p>\n",
- "axisLabel.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "axisLabel.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "axisLabel.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "axisLabel.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "axisLabel.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "axisLabel.rich": "<p>"Rich text styles" can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">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 sni [...]
- "axisLabel.rich.<style_name>.color": "<p> text color.</p>\n",
- "axisLabel.rich.<style_name>.fontStyle": "<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",
- "axisLabel.rich.<style_name>.fontWeight": "<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",
- "axisLabel.rich.<style_name>.fontFamily": "<p> font family.</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "axisLabel.rich.<style_name>.fontSize": "<p> font size.</p>\n",
- "axisLabel.rich.<style_name>.align": "<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<p [...]
- "axisLabel.rich.<style_name>.verticalAlign": "<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 [...]
- "axisLabel.rich.<style_name>.lineHeight": "<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-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n",
- "axisLabel.rich.<style_name>.backgroundColor": "<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-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageEle [...]
- "axisLabel.rich.<style_name>.borderColor": "<p>Border color of the text fragment.</p>\n",
- "axisLabel.rich.<style_name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "axisLabel.rich.<style_name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "axisLabel.rich.<style_name>.padding": "<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< [...]
- "axisLabel.rich.<style_name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "axisLabel.rich.<style_name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "axisLabel.rich.<style_name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "axisLabel.rich.<style_name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "axisLabel.rich.<style_name>.width": "<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p> [...]
- "axisLabel.rich.<style_name>.height": "<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class [...]
- "axisLabel.rich.<style_name>.textBorderColor": "<p>Storke color of the text.</p>\n",
- "axisLabel.rich.<style_name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "axisLabel.rich.<style_name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "axisLabel.rich.<style_name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "axisLabel.rich.<style_name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "axisLabel.rich.<style_name>.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n<!-- Overwrite color -->\n",
- "splitLine": "<p>Split line of axis in <a href=\"#grid\">grid</a> area.</p>\n",
- "splitLine.show": "<p>Set this to <code class=\"codespan\">false</code> to prevent the splitLine from showing.\n<code class=\"codespan\">value</code> type axes are shown by default, while <code class=\"codespan\">category</code> type axes are hidden.</p>\n",
- "splitLine.interval": "<p>Interval of Axis splitLine, 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 s [...]
- "splitLine.lineStyle.color": "<p>The color of the splitLine, which could be set separately.</p>\n<p>SplitLine color could also be set in color array, which the split lines would take as their colors in turns.</p>\n<p>Example:</p>\n<pre><code>splitLine: {\n lineStyle: {\n // Dark and light colors will be used in turns\n color: ['#aaa', '#ddd']\n }\n}\n</code></pre>",
- "splitLine.lineStyle.width": "<p>splitLine line width.</p>\n",
- "splitLine.lineStyle.type": "<p>splitLine line type.</p>\n<p>Options 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",
- "splitLine.lineStyle.shadowBlur": "<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-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n",
- "splitLine.lineStyle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "splitLine.lineStyle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "splitLine.lineStyle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "splitLine.lineStyle.opacity": "<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n<!-- overwrite color -->\n",
- "minorSplitLine": "<blockquote>\n<p>Since <code class=\"codespan\">v4.6.0</code></p>\n</blockquote>\n<p>Minor split lines of axis in the <a href=\"#grid\">grid</a> area。It will align to the <a href=\"#angleAxis.minorTick\">minorTick</a></p>\n",
- "minorSplitLine.show": "<p>If show minor split lines.</p>\n",
- "minorSplitLine.lineStyle.color": "<p>minorSplitLineLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code class=\"codespan\">'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\ [...]
- "minorSplitLine.lineStyle.width": "<p>minorSplitLine line width.</p>\n",
- "minorSplitLine.lineStyle.type": "<p>minorSplitLine line type.</p>\n<p>Options 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",
- "minorSplitLine.lineStyle.shadowBlur": "<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-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n",
- "minorSplitLine.lineStyle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "minorSplitLine.lineStyle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "minorSplitLine.lineStyle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "minorSplitLine.lineStyle.opacity": "<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n",
- "splitArea": "<p>Split area of axis in <a href=\"#grid\">grid</a> area, not shown by default.</p>\n",
- "splitArea.interval": "<p>Interval of Axis splitArea, 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 s [...]
- "splitArea.show": "<p>Set this to <code class=\"codespan\">true</code> to show the splitArea.</p>\n",
- "splitArea.areaStyle": "<p>Split area style.</p>\n",
- "splitArea.areaStyle.color": "<p>Color of split area.\nSplitArea 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",
- "splitArea.areaStyle.shadowBlur": "<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-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n",
- "splitArea.areaStyle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "splitArea.areaStyle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "splitArea.areaStyle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "splitArea.areaStyle.opacity": "<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n",
- "data": "<p>Category data, available in <a href=\"#angleAxis.type\">type</a>: 'category' axis.</p>\n<p>If <a href=\"#angleAxis.type\">type</a> is not specified, but <code class=\"codespan\">axis.data</code> is specified, the <a href=\"#angleAxis.type\">type</a> is auto set as <code class=\"codespan\">'category'</code>.</p>\n<p>If <a href=\"#angleAxis.type\">type</a> is specified as <code class=\"codespan\">'category'</code>, but <code class=\"codespan\">axis.dat [...]
- "data.value": "<p>Name of a category.</p>\n",
- "data.textStyle": "<p>Text style of the category.</p>\n",
- "data.textStyle.color": "<p> text color.</p>\n",
- "data.textStyle.fontStyle": "<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",
- "data.textStyle.fontWeight": "<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",
- "data.textStyle.fontFamily": "<p> font family.</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "data.textStyle.fontSize": "<p> font size.</p>\n",
- "data.textStyle.align": "<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 clas [...]
- "data.textStyle.verticalAlign": "<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 [...]
- "data.textStyle.lineHeight": "<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-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n",
- "data.textStyle.backgroundColor": "<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-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // [...]
- "data.textStyle.borderColor": "<p>Border color of the text fragment.</p>\n",
- "data.textStyle.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "data.textStyle.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "data.textStyle.padding": "<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>Noti [...]
- "data.textStyle.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "data.textStyle.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "data.textStyle.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "data.textStyle.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "data.textStyle.width": "<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code cl [...]
- "data.textStyle.height": "<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\" [...]
- "data.textStyle.textBorderColor": "<p>Storke color of the text.</p>\n",
- "data.textStyle.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "data.textStyle.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "data.textStyle.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "data.textStyle.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "data.textStyle.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "data.textStyle.rich": "<p>"Rich text styles" can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">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 thi [...]
- "data.textStyle.rich.<style_name>.color": "<p> text color.</p>\n",
- "data.textStyle.rich.<style_name>.fontStyle": "<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",
- "data.textStyle.rich.<style_name>.fontWeight": "<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",
- "data.textStyle.rich.<style_name>.fontFamily": "<p> font family.</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "data.textStyle.rich.<style_name>.fontSize": "<p> font size.</p>\n",
- "data.textStyle.rich.<style_name>.align": "<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 [...]
- "data.textStyle.rich.<style_name>.verticalAlign": "<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 [...]
- "data.textStyle.rich.<style_name>.lineHeight": "<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-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n",
- "data.textStyle.rich.<style_name>.backgroundColor": "<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-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLIma [...]
- "data.textStyle.rich.<style_name>.borderColor": "<p>Border color of the text fragment.</p>\n",
- "data.textStyle.rich.<style_name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "data.textStyle.rich.<style_name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "data.textStyle.rich.<style_name>.padding": "<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>.</l [...]
- "data.textStyle.rich.<style_name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "data.textStyle.rich.<style_name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "data.textStyle.rich.<style_name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "data.textStyle.rich.<style_name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "data.textStyle.rich.<style_name>.width": "<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code> [...]
- "data.textStyle.rich.<style_name>.height": "<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code [...]
- "data.textStyle.rich.<style_name>.textBorderColor": "<p>Storke color of the text.</p>\n",
- "data.textStyle.rich.<style_name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "data.textStyle.rich.<style_name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "data.textStyle.rich.<style_name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "data.textStyle.rich.<style_name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "data.textStyle.rich.<style_name>.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "axisPointer": "<p>axisPointer settings on the axis.</p>\n",
- "axisPointer.show": "<p>axisPointer will not be displayed by default. But if <a href=\"#tooltip.trigger\">tooltip.trigger</a> is set as <code class=\"codespan\">'axis'</code> or <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as <code class=\"codespan\">'cross'</code>, axisPointer will be displayed automatically. Each coordinate system will automatically chose the axes whose will display its axisPointer. <a href=\"#tooltip.axisPointer.axis\">t [...]
- "axisPointer.type": "<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">'line'</code> line indicator.</p>\n</li>\n<li><p><code class=\"codespan\">'shadow'</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code class=\"codespan\">'none'</code> no indicator displayed.</p>\n</li>\n</ul>\n",
- "axisPointer.snap": "<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n",
- "axisPointer.z": "<p>z value, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n",
- "axisPointer.label": "<p>label of axisPointer</p>\n",
- "axisPointer.label.show": "<p>Whether show label. Label will not show by default. But if <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as <code class=\"codespan\">'cross'</code>, label will be displayed automatically.</p>\n",
- "axisPointer.label.precision": "<p>The precision of value in label. It is auto determined by default. You can also set it as <code class=\"codespan\">'2'</code>, which indicates that two decimal fractions are reserved.</p>\n",
- "axisPointer.label.formatter": "<p>The formatter of label.</p>\n<p>If set as <code class=\"codespan\">string</code>, for example it can be: <code class=\"codespan\">formatter: 'some text {value} some text</code>, where <code class=\"codespan\">{value}</code> will be replaced by axis value automatically.</p>\n<p>If set as <code class=\"codespan\">function</code>:</p>\n<p><strong>Parameters:</strong></p>\n<p><code class=\"codespan\">{Object}</code> params: Including fields as follows [...]
- "axisPointer.label.margin": "<p>Distance between label and axis.</p>\n",
- "axisPointer.label.color": "<p> text color.</p>\n",
- "axisPointer.label.fontStyle": "<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",
- "axisPointer.label.fontWeight": "<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",
- "axisPointer.label.fontFamily": "<p> font family.</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "axisPointer.label.fontSize": "<p> font size.</p>\n",
- "axisPointer.label.lineHeight": "<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-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n",
- "axisPointer.label.width": "<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code [...]
- "axisPointer.label.height": "<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespa [...]
- "axisPointer.label.textBorderColor": "<p>Storke color of the text.</p>\n",
- "axisPointer.label.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "axisPointer.label.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "axisPointer.label.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "axisPointer.label.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "axisPointer.label.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "axisPointer.label.padding": "<p>axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // do [...]
- "axisPointer.label.backgroundColor": "<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n",
- "axisPointer.label.borderColor": "<p>Border color of label.</p>\n",
- "axisPointer.label.borderWidth": "<p>Border width of label.</p>\n",
- "axisPointer.label.shadowBlur": "<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-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n",
- "axisPointer.label.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "axisPointer.label.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "axisPointer.label.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "axisPointer.lineStyle": "<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">'line'</code>.</p>\n",
- "axisPointer.lineStyle.color": "<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code class=\"codespan\">'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class [...]
- "axisPointer.lineStyle.width": "<p> line width.</p>\n",
- "axisPointer.lineStyle.type": "<p> line type.</p>\n<p>Options 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",
- "axisPointer.lineStyle.shadowBlur": "<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-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n",
- "axisPointer.lineStyle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "axisPointer.lineStyle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "axisPointer.lineStyle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "axisPointer.lineStyle.opacity": "<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n",
- "axisPointer.shadowStyle": "<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">'shadow'</code>.</p>\n",
- "axisPointer.shadowStyle.color": "<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code class=\"codespan\">'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code cla [...]
- "axisPointer.shadowStyle.shadowBlur": "<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-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n",
- "axisPointer.shadowStyle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "axisPointer.shadowStyle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "axisPointer.shadowStyle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "axisPointer.shadowStyle.opacity": "<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n",
- "axisPointer.triggerTooltip": "<p>Whether to trigger tooltip.</p>\n",
- "axisPointer.value": "<p>current value. When using <a href=\"xAxisPointer.handle\" target=\"_blank\">axisPointer.handle</a>, <code class=\"codespan\">value</code> can be set to define the initail position of axisPointer.</p>\n",
- "axisPointer.status": "<p>Current status, can be <code class=\"codespan\">'show'</code> 和 <code class=\"codespan\">'hide'</code>.</p>\n",
- "axisPointer.handle": "<p>A button used to drag axisPointer. This feature is applicable in touch device. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-tooltip-touch&edit=1&reset=1\" target=\"_blank\">example</a>.</p>\n",
- "axisPointer.handle.show": "<p>Set to <code class=\"codespan\">true</code> to use handle.</p>\n",
- "axisPointer.handle.icon": "<p>The icon of the handle.</p>\n<p>It can be set to an image with <code class=\"codespan\">'image://url'</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3 [...]
- "axisPointer.handle.size": "<p>The size of the handle, which can be set as a single value or an array (<code class=\"codespan\">[width, height]</code>).</p>\n",
- "axisPointer.handle.margin": "<p>Distance from handle center to axis.</p>\n",
- "axisPointer.handle.color": "<p>The color of the handle.</p>\n",
- "axisPointer.handle.throttle": "<p>Throttle rate of trigger view update when dragging handle, in ms. Increase the value to improve performance, but decrease the experience.</p>\n",
- "axisPointer.handle.shadowBlur": "<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-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n",
- "axisPointer.handle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "axisPointer.handle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "axisPointer.handle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "zlevel": "<p><code class=\"codespan\">zlevel</code> value of all graphical elements in Angle Axis.</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 man [...]
- "z": "<p><code class=\"codespan\">z</code> value of all graphical elements in Angle Axis, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n"
+ "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": "<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/zh/view.html?c=doc-example/polar-start-angle&edit=1&reset=1\" width=\"400\" height=\"400\"><iframe />\n\n\n",
+ "uiControl": {
+ "type": "angle",
+ "default": "90",
+ "min": "-360",
+ "max": "360",
+ "step": "1"
+ }
+ },
+ "clockwise": {
+ "desc": "<p>Whether the positive position of axis is in 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/zh/view.html?c=doc-example/polar-anticlockwise&edit=1&reset=1\" width=\"400\" height=\"400\"><iframe />\n\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": "<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 labels [...]
+ "uiControl": {
+ "type": "boolean"
+ }
+ },
+ "min": {
+ "desc": "<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', 'c [...]
+ "uiControl": {
+ "type": "number"
+ }
+ },
+ "max": {
+ "desc": "<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', 'c [...]
+ "uiControl": {
+ "type": "number"
+ }
+ },
+ "scale": {
+ "desc": "<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 set. [...]
+ "uiControl": {
+ "type": "boolean"
+ }
+ },
+ "splitNumber": {
+ "desc": "<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": "<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-js\">{\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": "<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-js\">{\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": "<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, out automatic calculation is enough for most situations.</p>\n<p>This is unavailabl [...]
+ "uiControl": {
+ "type": "number"
+ }
+ },
+ "logBase": {
+ "desc": "<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-js\">{\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": "<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": "<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": "<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": "<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": "<p>line styleLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code class=\"codespan\">'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\ [...]
+ "uiControl": {
+ "type": "color"
+ }
+ },
+ "axisLine.lineStyle.width": {
+ "desc": "<p>line style line width.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "value": "1",
+ "min": "0",
+ "step": "0.5"
+ }
+ },
+ "axisLine.lineStyle.type": {
+ "desc": "<p>line style line type.</p>\n<p>Options 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",
+ "uiControl": {
+ "type": "enum",
+ "default": "solid",
+ "options": "solid,dashed,dotted"
+ }
+ },
+ "axisLine.lineStyle.shadowBlur": {
+ "desc": "<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-js\">{\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": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
+ "uiControl": {
+ "type": "color",
+ "default": ""
+ }
+ },
+ "axisLine.lineStyle.shadowOffsetX": {
+ "desc": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "default": "0",
+ "step": "0.5"
+ }
+ },
+ "axisLine.lineStyle.shadowOffsetY": {
+ "desc": "<p>Offset distance on the vertical direction of shadow.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "default": "0",
+ "step": "0.5"
+ }
+ },
+ "axisLine.lineStyle.opacity": {
+ "desc": "<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": "<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": "<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": "<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>\n<p>On t [...]
+ "uiControl": {
+ "type": "number",
+ "min": "0",
+ "step": "1"
+ }
+ },
+ "axisTick.inside": {
+ "desc": "<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": "<p>The length of the axis tick.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "min": "0",
+ "step": "0.5",
+ "default": "5"
+ }
+ },
+ "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": "<p>axisTick line width.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "value": "1",
+ "min": "0",
+ "step": "0.5"
+ }
+ },
+ "axisTick.lineStyle.type": {
+ "desc": "<p>axisTick line type.</p>\n<p>Options 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",
+ "uiControl": {
+ "type": "enum",
+ "default": "solid",
+ "options": "solid,dashed,dotted"
+ }
+ },
+ "axisTick.lineStyle.shadowBlur": {
+ "desc": "<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-js\">{\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": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
+ "uiControl": {
+ "type": "color",
+ "default": ""
+ }
+ },
+ "axisTick.lineStyle.shadowOffsetX": {
+ "desc": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "default": "0",
+ "step": "0.5"
+ }
+ },
+ "axisTick.lineStyle.shadowOffsetY": {
+ "desc": "<p>Offset distance on the vertical direction of shadow.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "default": "0",
+ "step": "0.5"
+ }
+ },
+ "axisTick.lineStyle.opacity": {
+ "desc": "<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\">cateogry</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/zh/view.html?c=line-function&edit=1&reset=1\" width=\"600\" height=\"350\"><iframe />\n\n\n<p>2) Using [...]
+ },
+ "minorTick.show": {
+ "desc": "<p>If show minor ticks.</p>\n",
+ "uiControl": {
+ "type": "boolean",
+ "default": "true"
+ }
+ },
+ "minorTick.splitNumber": {
+ "desc": "<p>Number of interval splited by minor ticks.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "min": "1",
+ "step": "1",
+ "default": "5"
+ }
+ },
+ "minorTick.length": {
+ "desc": "<p>Length of minor ticks lines。</p>\n",
+ "uiControl": {
+ "type": "number",
+ "min": "0",
+ "step": "0.5",
+ "default": "3"
+ }
+ },
+ "minorTick.lineStyle.color": {
+ "desc": "<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": "<p>minorTick line width.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "value": "1",
+ "min": "0",
+ "step": "0.5"
+ }
+ },
+ "minorTick.lineStyle.type": {
+ "desc": "<p>minorTick line type.</p>\n<p>Options 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",
+ "uiControl": {
+ "type": "enum",
+ "default": "solid",
+ "options": "solid,dashed,dotted"
+ }
+ },
+ "minorTick.lineStyle.shadowBlur": {
+ "desc": "<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-js\">{\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": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
+ "uiControl": {
+ "type": "color",
+ "default": ""
+ }
+ },
+ "minorTick.lineStyle.shadowOffsetX": {
+ "desc": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "default": "0",
+ "step": "0.5"
+ }
+ },
+ "minorTick.lineStyle.shadowOffsetY": {
+ "desc": "<p>Offset distance on the vertical direction of shadow.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "default": "0",
+ "step": "0.5"
+ }
+ },
+ "minorTick.lineStyle.opacity": {
+ "desc": "<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": "<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": "<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><code cl [...]
+ "uiControl": {
+ "type": "number",
+ "min": "0",
+ "step": "1"
+ }
+ },
+ "axisLabel.inside": {
+ "desc": "<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": "<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-js\">// Use string template; template variable is the default label of axis {value}\nformatter: '{value} kg'\n\n// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n // Formatted to be month/day; display year only in the first label\n var date = new Date(value);\n var texts = [(date.get [...]
+ },
+ "axisLabel.showMinLabel": {
+ "desc": "<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": "<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.color": {
+ "desc": "<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-js\">(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-js\">textStyle: {\n color: function (value, index) {\n return value >= 0 ? 'green& [...]
+ "uiControl": {
+ "type": "color"
+ }
+ },
+ "axisLabel.fontStyle": {
+ "desc": "<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": "<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": "<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": "<p> font size.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "default": "12",
+ "min": "1",
+ "step": "1"
+ }
+ },
+ "axisLabel.align": {
+ "desc": "<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-js\"> [...]
+ "uiControl": {
+ "type": "enum",
+ "options": "left,center,right"
+ }
+ },
+ "axisLabel.verticalAlign": {
+ "desc": "<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 clas [...]
+ "uiControl": {
+ "type": "enum",
+ "options": "top,middle,bottom"
+ }
+ },
+ "axisLabel.lineHeight": {
+ "desc": "<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-js\">{\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": "<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-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n [...]
+ "uiControl": {
+ "type": "color",
+ "default": "#fff"
+ }
+ },
+ "axisLabel.borderColor": {
+ "desc": "<p>Border color of the text fragment.</p>\n",
+ "uiControl": {
+ "type": "color",
+ "default": "#fff"
+ }
+ },
+ "axisLabel.borderWidth": {
+ "desc": "<p>Border width of the text fragment.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "min": "0",
+ "step": "0.5"
+ }
+ },
+ "axisLabel.borderRadius": {
+ "desc": "<p>Border radius of the text fragment.</p>\n",
+ "uiControl": {
+ "type": "vector",
+ "min": "0",
+ "dims": "LT,RT, RB, LB"
+ }
+ },
+ "axisLabel.padding": {
+ "desc": "<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 class= [...]
+ "uiControl": {
+ "type": "vector",
+ "min": "0",
+ "dims": "T,R,B,L"
+ }
+ },
+ "axisLabel.shadowColor": {
+ "desc": "<p>Shadow color of the text block.</p>\n",
+ "uiControl": {
+ "type": "color"
+ }
+ },
+ "axisLabel.shadowBlur": {
+ "desc": "<p>Show blur of the text block.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "min": "0",
+ "step": "0.5"
+ }
+ },
+ "axisLabel.shadowOffsetX": {
+ "desc": "<p>Shadow X offset of the text block.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "step": "0.5"
+ }
+ },
+ "axisLabel.shadowOffsetY": {
+ "desc": "<p>Shadow Y offset of the text block.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "step": "0.5"
+ }
+ },
+ "axisLabel.width": {
+ "desc": "<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan [...]
+ },
+ "axisLabel.height": {
+ "desc": "<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> [...]
+ },
+ "axisLabel.textBorderColor": {
+ "desc": "<p>Storke color of the text.</p>\n",
+ "uiControl": {
+ "type": "color"
+ }
+ },
+ "axisLabel.textBorderWidth": {
+ "desc": "<p>Storke line width of the text.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "min": "0",
+ "step": "0.5"
+ }
+ },
+ "axisLabel.textShadowColor": {
+ "desc": "<p>Shadow color of the text itself.</p>\n",
+ "uiControl": {
+ "type": "color",
+ "default": "#000"
+ }
+ },
+ "axisLabel.textShadowBlur": {
+ "desc": "<p>Shadow blue of the text itself.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "min": "0",
+ "step": "0.5"
+ }
+ },
+ "axisLabel.textShadowOffsetX": {
+ "desc": "<p>Shadow X offset of the text itself.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "step": "0.5"
+ }
+ },
+ "axisLabel.textShadowOffsetY": {
+ "desc": "<p>Shadow Y offset of the text itself.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "step": "0.5"
+ }
+ },
+ "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-js\">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": "<p> text color.</p>\n",
+ "uiControl": {
+ "type": "color",
+ "default": "null"
+ }
+ },
+ "axisLabel.rich.<style_name>.fontStyle": {
+ "desc": "<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": "<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": "<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": "<p> font size.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "default": "12",
+ "min": "1",
+ "step": "1"
+ }
+ },
+ "axisLabel.rich.<style_name>.align": {
+ "desc": "<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-js\"> [...]
+ "uiControl": {
+ "type": "enum",
+ "options": "left,center,right"
+ }
+ },
+ "axisLabel.rich.<style_name>.verticalAlign": {
+ "desc": "<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 clas [...]
+ "uiControl": {
+ "type": "enum",
+ "options": "top,middle,bottom"
+ }
+ },
+ "axisLabel.rich.<style_name>.lineHeight": {
+ "desc": "<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-js\">{\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": "<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-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n [...]
+ "uiControl": {
+ "type": "color",
+ "default": "#fff"
+ }
+ },
+ "axisLabel.rich.<style_name>.borderColor": {
+ "desc": "<p>Border color of the text fragment.</p>\n",
+ "uiControl": {
+ "type": "color",
+ "default": "#fff"
+ }
+ },
+ "axisLabel.rich.<style_name>.borderWidth": {
+ "desc": "<p>Border width of the text fragment.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "min": "0",
+ "step": "0.5"
+ }
+ },
+ "axisLabel.rich.<style_name>.borderRadius": {
+ "desc": "<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": "<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 class= [...]
+ "uiControl": {
+ "type": "vector",
+ "min": "0",
+ "dims": "T,R,B,L"
+ }
+ },
+ "axisLabel.rich.<style_name>.shadowColor": {
+ "desc": "<p>Shadow color of the text block.</p>\n",
+ "uiControl": {
+ "type": "color"
+ }
+ },
+ "axisLabel.rich.<style_name>.shadowBlur": {
+ "desc": "<p>Show blur of the text block.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "min": "0",
+ "step": "0.5"
+ }
+ },
+ "axisLabel.rich.<style_name>.shadowOffsetX": {
+ "desc": "<p>Shadow X offset of the text block.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "step": "0.5"
+ }
+ },
+ "axisLabel.rich.<style_name>.shadowOffsetY": {
+ "desc": "<p>Shadow Y offset of the text block.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "step": "0.5"
+ }
+ },
+ "axisLabel.rich.<style_name>.width": {
+ "desc": "<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan [...]
+ },
+ "axisLabel.rich.<style_name>.height": {
+ "desc": "<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> [...]
+ },
+ "axisLabel.rich.<style_name>.textBorderColor": {
+ "desc": "<p>Storke color of the text.</p>\n",
+ "uiControl": {
+ "type": "color"
+ }
+ },
+ "axisLabel.rich.<style_name>.textBorderWidth": {
+ "desc": "<p>Storke line width of the text.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "min": "0",
+ "step": "0.5"
+ }
+ },
+ "axisLabel.rich.<style_name>.textShadowColor": {
+ "desc": "<p>Shadow color of the text itself.</p>\n",
+ "uiControl": {
+ "type": "color",
+ "default": "#000"
+ }
+ },
+ "axisLabel.rich.<style_name>.textShadowBlur": {
+ "desc": "<p>Shadow blue of the text itself.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "min": "0",
+ "step": "0.5"
+ }
+ },
+ "axisLabel.rich.<style_name>.textShadowOffsetX": {
+ "desc": "<p>Shadow X offset of the text itself.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "step": "0.5"
+ }
+ },
+ "axisLabel.rich.<style_name>.textShadowOffsetY": {
+ "desc": "<p>Shadow Y offset of the text itself.</p>\n\n",
+ "uiControl": {
+ "type": "number",
+ "step": "0.5"
+ }
+ },
+ "splitLine": {
+ "desc": "<p>Split line of axis in <a href=\"#grid\">grid</a> area.</p>\n"
+ },
+ "splitLine.show": {
+ "desc": "<p>Set this to <code class=\"codespan\">false</code> to prevent the splitLine from showing.\n<code class=\"codespan\">value</code> type axes are shown by default, while <code class=\"codespan\">category</code> type axes are hidden.</p>\n",
+ "uiControl": {
+ "type": "boolean",
+ "default": "true"
+ }
+ },
+ "splitLine.interval": {
+ "desc": "<p>Interval of Axis splitLine, 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>\n< [...]
+ "uiControl": {
+ "type": "number",
+ "min": "0",
+ "step": "1"
+ }
+ },
+ "splitLine.lineStyle.color": {
+ "desc": "<p>The color of the splitLine, which could be set separately.</p>\n<p>SplitLine color could also be set in color array, which the split lines would take as their colors in turns.</p>\n<p>Example:</p>\n<pre><code>splitLine: {\n lineStyle: {\n // Dark and light colors will be used in turns\n color: ['#aaa', '#ddd']\n }\n}\n</code></pre>",
+ "uiControl": {
+ "type": "color"
+ }
+ },
+ "splitLine.lineStyle.width": {
+ "desc": "<p>splitLine line width.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "value": "1",
+ "min": "0",
+ "step": "0.5"
+ }
+ },
+ "splitLine.lineStyle.type": {
+ "desc": "<p>splitLine line type.</p>\n<p>Options 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",
+ "uiControl": {
+ "type": "enum",
+ "default": "solid",
+ "options": "solid,dashed,dotted"
+ }
+ },
+ "splitLine.lineStyle.shadowBlur": {
+ "desc": "<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-js\">{\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"
+ }
+ },
+ "splitLine.lineStyle.shadowColor": {
+ "desc": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
+ "uiControl": {
+ "type": "color",
+ "default": ""
+ }
+ },
+ "splitLine.lineStyle.shadowOffsetX": {
+ "desc": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "default": "0",
+ "step": "0.5"
+ }
+ },
+ "splitLine.lineStyle.shadowOffsetY": {
+ "desc": "<p>Offset distance on the vertical direction of shadow.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "default": "0",
+ "step": "0.5"
+ }
+ },
+ "splitLine.lineStyle.opacity": {
+ "desc": "<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"
+ }
+ },
+ "minorSplitLine": {
+ "desc": "<blockquote>\n<p>Since <code class=\"codespan\">v4.6.0</code></p>\n</blockquote>\n<p>Minor split lines of axis in the <a href=\"#grid\">grid</a> area。It will align to the <a href=\"#angleAxis.minorTick\">minorTick</a></p>\n"
+ },
+ "minorSplitLine.show": {
+ "desc": "<p>If show minor split lines.</p>\n",
+ "uiControl": {
+ "type": "boolean",
+ "default": "true"
+ }
+ },
+ "minorSplitLine.lineStyle.color": {
+ "desc": "<p>minorSplitLineLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code class=\"codespan\">'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang [...]
+ },
+ "minorSplitLine.lineStyle.width": {
+ "desc": "<p>minorSplitLine line width.</p>\n"
+ },
+ "minorSplitLine.lineStyle.type": {
+ "desc": "<p>minorSplitLine line type.</p>\n<p>Options 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"
+ },
+ "minorSplitLine.lineStyle.shadowBlur": {
+ "desc": "<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-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"
+ },
+ "minorSplitLine.lineStyle.shadowColor": {
+ "desc": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"
+ },
+ "minorSplitLine.lineStyle.shadowOffsetX": {
+ "desc": "<p>Offset distance on the horizontal direction of shadow.</p>\n"
+ },
+ "minorSplitLine.lineStyle.shadowOffsetY": {
+ "desc": "<p>Offset distance on the vertical direction of shadow.</p>\n"
+ },
+ "minorSplitLine.lineStyle.opacity": {
+ "desc": "<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"
+ },
+ "splitArea": {
+ "desc": "<p>Split area of axis in <a href=\"#grid\">grid</a> area, not shown by default.</p>\n"
+ },
+ "splitArea.interval": {
+ "desc": "<p>Interval of Axis splitArea, 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>\n< [...]
+ "uiControl": {
+ "type": "number",
+ "min": "0",
+ "step": "1"
+ }
+ },
+ "splitArea.show": {
+ "desc": "<p>Set this to <code class=\"codespan\">true</code> to show the splitArea.</p>\n",
+ "uiControl": {
+ "type": "boolean",
+ "default": "true"
+ }
+ },
+ "splitArea.areaStyle": {
+ "desc": "<p>Split area style.</p>\n"
+ },
+ "splitArea.areaStyle.color": {
+ "desc": "<p>Color of split area.\nSplitArea 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"
+ },
+ "splitArea.areaStyle.shadowBlur": {
+ "desc": "<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-js\">{\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"
+ }
+ },
+ "splitArea.areaStyle.shadowColor": {
+ "desc": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
+ "uiControl": {
+ "type": "color",
+ "default": ""
+ }
+ },
+ "splitArea.areaStyle.shadowOffsetX": {
+ "desc": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "default": "0",
+ "step": "0.5"
+ }
+ },
+ "splitArea.areaStyle.shadowOffsetY": {
+ "desc": "<p>Offset distance on the vertical direction of shadow.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "default": "0",
+ "step": "0.5"
+ }
+ },
+ "splitArea.areaStyle.opacity": {
+ "desc": "<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"
+ }
+ },
+ "data": {
+ "desc": "<p>Category data, available in <a href=\"#angleAxis.type\">type</a>: 'category' axis.</p>\n<p>If <a href=\"#angleAxis.type\">type</a> is not specified, but <code class=\"codespan\">axis.data</code> is specified, the <a href=\"#angleAxis.type\">type</a> is auto set as <code class=\"codespan\">'category'</code>.</p>\n<p>If <a href=\"#angleAxis.type\">type</a> is specified as <code class=\"codespan\">'category'</code>, but <code class=\"codespan\">axis.d [...]
+ },
+ "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> text color.</p>\n",
+ "uiControl": {
+ "type": "color",
+ "default": "null"
+ }
+ },
+ "data.textStyle.fontStyle": {
+ "desc": "<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"
+ }
+ },
+ "data.textStyle.fontWeight": {
+ "desc": "<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"
+ }
+ },
+ "data.textStyle.fontFamily": {
+ "desc": "<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"
+ }
+ },
+ "data.textStyle.fontSize": {
+ "desc": "<p> font size.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "default": "12",
+ "min": "1",
+ "step": "1"
+ }
+ },
+ "data.textStyle.align": {
+ "desc": "<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-js\"> [...]
+ "uiControl": {
+ "type": "enum",
+ "options": "left,center,right"
+ }
+ },
+ "data.textStyle.verticalAlign": {
+ "desc": "<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 clas [...]
+ "uiControl": {
+ "type": "enum",
+ "options": "top,middle,bottom"
+ }
+ },
+ "data.textStyle.lineHeight": {
+ "desc": "<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-js\">{\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"
+ }
+ },
+ "data.textStyle.backgroundColor": {
+ "desc": "<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-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n [...]
+ "uiControl": {
+ "type": "color",
+ "default": "#fff"
+ }
+ },
+ "data.textStyle.borderColor": {
+ "desc": "<p>Border color of the text fragment.</p>\n",
+ "uiControl": {
+ "type": "color",
+ "default": "#fff"
+ }
+ },
+ "data.textStyle.borderWidth": {
+ "desc": "<p>Border width of the text fragment.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "min": "0",
+ "step": "0.5"
+ }
+ },
+ "data.textStyle.borderRadius": {
+ "desc": "<p>Border radius of the text fragment.</p>\n",
+ "uiControl": {
+ "type": "vector",
+ "min": "0",
+ "dims": "LT,RT, RB, LB"
+ }
+ },
+ "data.textStyle.padding": {
+ "desc": "<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 class= [...]
+ "uiControl": {
+ "type": "vector",
+ "min": "0",
+ "dims": "T,R,B,L"
+ }
+ },
+ "data.textStyle.shadowColor": {
+ "desc": "<p>Shadow color of the text block.</p>\n",
+ "uiControl": {
+ "type": "color"
+ }
+ },
+ "data.textStyle.shadowBlur": {
+ "desc": "<p>Show blur of the text block.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "min": "0",
+ "step": "0.5"
+ }
+ },
+ "data.textStyle.shadowOffsetX": {
+ "desc": "<p>Shadow X offset of the text block.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "step": "0.5"
+ }
+ },
+ "data.textStyle.shadowOffsetY": {
+ "desc": "<p>Shadow Y offset of the text block.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "step": "0.5"
+ }
+ },
+ "data.textStyle.width": {
+ "desc": "<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan [...]
+ },
+ "data.textStyle.height": {
+ "desc": "<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> [...]
+ },
+ "data.textStyle.textBorderColor": {
+ "desc": "<p>Storke color of the text.</p>\n",
+ "uiControl": {
+ "type": "color"
+ }
+ },
+ "data.textStyle.textBorderWidth": {
+ "desc": "<p>Storke line width of the text.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "min": "0",
+ "step": "0.5"
+ }
+ },
+ "data.textStyle.textShadowColor": {
+ "desc": "<p>Shadow color of the text itself.</p>\n",
+ "uiControl": {
+ "type": "color",
+ "default": "#000"
+ }
+ },
+ "data.textStyle.textShadowBlur": {
+ "desc": "<p>Shadow blue of the text itself.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "min": "0",
+ "step": "0.5"
+ }
+ },
+ "data.textStyle.textShadowOffsetX": {
+ "desc": "<p>Shadow X offset of the text itself.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "step": "0.5"
+ }
+ },
+ "data.textStyle.textShadowOffsetY": {
+ "desc": "<p>Shadow Y offset of the text itself.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "step": "0.5"
+ }
+ },
+ "data.textStyle.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-js\">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} [...]
+ },
+ "data.textStyle.rich.<style_name>.color": {
+ "desc": "<p> text color.</p>\n",
+ "uiControl": {
+ "type": "color",
+ "default": "null"
+ }
+ },
+ "data.textStyle.rich.<style_name>.fontStyle": {
+ "desc": "<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"
+ }
+ },
+ "data.textStyle.rich.<style_name>.fontWeight": {
+ "desc": "<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"
+ }
+ },
+ "data.textStyle.rich.<style_name>.fontFamily": {
+ "desc": "<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"
+ }
+ },
+ "data.textStyle.rich.<style_name>.fontSize": {
+ "desc": "<p> font size.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "default": "12",
+ "min": "1",
+ "step": "1"
+ }
+ },
+ "data.textStyle.rich.<style_name>.align": {
+ "desc": "<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-js\"> [...]
+ "uiControl": {
+ "type": "enum",
+ "options": "left,center,right"
+ }
+ },
+ "data.textStyle.rich.<style_name>.verticalAlign": {
+ "desc": "<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 clas [...]
+ "uiControl": {
+ "type": "enum",
+ "options": "top,middle,bottom"
+ }
+ },
+ "data.textStyle.rich.<style_name>.lineHeight": {
+ "desc": "<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-js\">{\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"
+ }
+ },
+ "data.textStyle.rich.<style_name>.backgroundColor": {
+ "desc": "<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-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n [...]
+ "uiControl": {
+ "type": "color",
+ "default": "#fff"
+ }
+ },
+ "data.textStyle.rich.<style_name>.borderColor": {
+ "desc": "<p>Border color of the text fragment.</p>\n",
+ "uiControl": {
+ "type": "color",
+ "default": "#fff"
+ }
+ },
+ "data.textStyle.rich.<style_name>.borderWidth": {
+ "desc": "<p>Border width of the text fragment.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "min": "0",
+ "step": "0.5"
+ }
+ },
+ "data.textStyle.rich.<style_name>.borderRadius": {
+ "desc": "<p>Border radius of the text fragment.</p>\n",
+ "uiControl": {
+ "type": "vector",
+ "min": "0",
+ "dims": "LT,RT, RB, LB"
+ }
+ },
+ "data.textStyle.rich.<style_name>.padding": {
+ "desc": "<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 class= [...]
+ "uiControl": {
+ "type": "vector",
+ "min": "0",
+ "dims": "T,R,B,L"
+ }
+ },
+ "data.textStyle.rich.<style_name>.shadowColor": {
+ "desc": "<p>Shadow color of the text block.</p>\n",
+ "uiControl": {
+ "type": "color"
+ }
+ },
+ "data.textStyle.rich.<style_name>.shadowBlur": {
+ "desc": "<p>Show blur of the text block.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "min": "0",
+ "step": "0.5"
+ }
+ },
+ "data.textStyle.rich.<style_name>.shadowOffsetX": {
+ "desc": "<p>Shadow X offset of the text block.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "step": "0.5"
+ }
+ },
+ "data.textStyle.rich.<style_name>.shadowOffsetY": {
+ "desc": "<p>Shadow Y offset of the text block.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "step": "0.5"
+ }
+ },
+ "data.textStyle.rich.<style_name>.width": {
+ "desc": "<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan [...]
+ },
+ "data.textStyle.rich.<style_name>.height": {
+ "desc": "<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> [...]
+ },
+ "data.textStyle.rich.<style_name>.textBorderColor": {
+ "desc": "<p>Storke color of the text.</p>\n",
+ "uiControl": {
+ "type": "color"
+ }
+ },
+ "data.textStyle.rich.<style_name>.textBorderWidth": {
+ "desc": "<p>Storke line width of the text.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "min": "0",
+ "step": "0.5"
+ }
+ },
+ "data.textStyle.rich.<style_name>.textShadowColor": {
+ "desc": "<p>Shadow color of the text itself.</p>\n",
+ "uiControl": {
+ "type": "color",
+ "default": "#000"
+ }
+ },
+ "data.textStyle.rich.<style_name>.textShadowBlur": {
+ "desc": "<p>Shadow blue of the text itself.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "min": "0",
+ "step": "0.5"
+ }
+ },
+ "data.textStyle.rich.<style_name>.textShadowOffsetX": {
+ "desc": "<p>Shadow X offset of the text itself.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "step": "0.5"
+ }
+ },
+ "data.textStyle.rich.<style_name>.textShadowOffsetY": {
+ "desc": "<p>Shadow Y offset of the text itself.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "step": "0.5"
+ }
+ },
+ "axisPointer": {
+ "desc": "<p>axisPointer settings on the axis.</p>\n"
+ },
+ "axisPointer.show": {
+ "desc": "<p>axisPointer will not be displayed by default. But if <a href=\"#tooltip.trigger\">tooltip.trigger</a> is set as <code class=\"codespan\">'axis'</code> or <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as <code class=\"codespan\">'cross'</code>, axisPointer will be displayed automatically. Each coordinate system will automatically chose the axes whose will display its axisPointer. <a href=\"#tooltip.axisPointer.axis\">tooltip.axi [...]
+ "uiControl": {
+ "type": "boolean"
+ }
+ },
+ "axisPointer.type": {
+ "desc": "<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">'line'</code> line indicator.</p>\n</li>\n<li><p><code class=\"codespan\">'shadow'</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code class=\"codespan\">'none'</code> no indicator displayed.</p>\n</li>\n</ul>\n",
+ "uiControl": {
+ "type": "enum",
+ "options": "line,shadow,none"
+ }
+ },
+ "axisPointer.snap": {
+ "desc": "<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n"
+ },
+ "axisPointer.z": {
+ "desc": "<p>z value, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n"
+ },
+ "axisPointer.label": {
+ "desc": "<p>label of axisPointer</p>\n"
+ },
+ "axisPointer.label.show": {
+ "desc": "<p>Whether show label. Label will not show by default. But if <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as <code class=\"codespan\">'cross'</code>, label will be displayed automatically.</p>\n"
+ },
+ "axisPointer.label.precision": {
+ "desc": "<p>The precision of value in label. It is auto determined by default. You can also set it as <code class=\"codespan\">'2'</code>, which indicates that two decimal fractions are reserved.</p>\n"
+ },
+ "axisPointer.label.formatter": {
+ "desc": "<p>The formatter of label.</p>\n<p>If set as <code class=\"codespan\">string</code>, for example it can be: <code class=\"codespan\">formatter: 'some text {value} some text</code>, where <code class=\"codespan\">{value}</code> will be replaced by axis value automatically.</p>\n<p>If set as <code class=\"codespan\">function</code>:</p>\n<p><strong>Parameters:</strong></p>\n<p><code class=\"codespan\">{Object}</code> params: Including fields as follows:</p>\n<p><code class [...]
+ },
+ "axisPointer.label.margin": {
+ "desc": "<p>Distance between label and axis.</p>\n"
+ },
+ "axisPointer.label.color": {
+ "desc": "<p> text color.</p>\n",
+ "uiControl": {
+ "type": "color",
+ "default": "'#fff'"
+ }
+ },
+ "axisPointer.label.fontStyle": {
+ "desc": "<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"
+ }
+ },
+ "axisPointer.label.fontWeight": {
+ "desc": "<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"
+ }
+ },
+ "axisPointer.label.fontFamily": {
+ "desc": "<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"
+ }
+ },
+ "axisPointer.label.fontSize": {
+ "desc": "<p> font size.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "default": "12",
+ "min": "1",
+ "step": "1"
+ }
+ },
+ "axisPointer.label.lineHeight": {
+ "desc": "<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-js\">{\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"
+ }
+ },
+ "axisPointer.label.width": {
+ "desc": "<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan [...]
+ },
+ "axisPointer.label.height": {
+ "desc": "<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> [...]
+ },
+ "axisPointer.label.textBorderColor": {
+ "desc": "<p>Storke color of the text.</p>\n",
+ "uiControl": {
+ "type": "color"
+ }
+ },
+ "axisPointer.label.textBorderWidth": {
+ "desc": "<p>Storke line width of the text.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "min": "0",
+ "step": "0.5"
+ }
+ },
+ "axisPointer.label.textShadowColor": {
+ "desc": "<p>Shadow color of the text itself.</p>\n",
+ "uiControl": {
+ "type": "color",
+ "default": "#000"
+ }
+ },
+ "axisPointer.label.textShadowBlur": {
+ "desc": "<p>Shadow blue of the text itself.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "min": "0",
+ "step": "0.5"
+ }
+ },
+ "axisPointer.label.textShadowOffsetX": {
+ "desc": "<p>Shadow X offset of the text itself.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "step": "0.5"
+ }
+ },
+ "axisPointer.label.textShadowOffsetY": {
+ "desc": "<p>Shadow Y offset of the text itself.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "step": "0.5"
+ }
+ },
+ "axisPointer.label.padding": {
+ "desc": "<p>axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left [...]
+ "uiControl": {
+ "type": "vector",
+ "min": "0",
+ "dims": "T,R,B,L"
+ }
+ },
+ "axisPointer.label.backgroundColor": {
+ "desc": "<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n"
+ },
+ "axisPointer.label.borderColor": {
+ "desc": "<p>Border color of label.</p>\n"
+ },
+ "axisPointer.label.borderWidth": {
+ "desc": "<p>Border width of label.</p>\n"
+ },
+ "axisPointer.label.shadowBlur": {
+ "desc": "<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-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n",
+ "uiControl": {
+ "type": "number",
+ "default": "3",
+ "min": "0",
+ "step": "0.5"
+ }
+ },
+ "axisPointer.label.shadowColor": {
+ "desc": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
+ "uiControl": {
+ "type": "color",
+ "default": "#aaa"
+ }
+ },
+ "axisPointer.label.shadowOffsetX": {
+ "desc": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "default": "0",
+ "step": "0.5"
+ }
+ },
+ "axisPointer.label.shadowOffsetY": {
+ "desc": "<p>Offset distance on the vertical direction of shadow.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "default": "0",
+ "step": "0.5"
+ }
+ },
+ "axisPointer.lineStyle": {
+ "desc": "<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">'line'</code>.</p>\n"
+ },
+ "axisPointer.lineStyle.color": {
+ "desc": "<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code class=\"codespan\">'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linea [...]
+ "uiControl": {
+ "type": "color"
+ }
+ },
+ "axisPointer.lineStyle.width": {
+ "desc": "<p> line width.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "value": "1",
+ "min": "0",
+ "step": "0.5"
+ }
+ },
+ "axisPointer.lineStyle.type": {
+ "desc": "<p> line type.</p>\n<p>Options 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",
+ "uiControl": {
+ "type": "enum",
+ "default": "solid",
+ "options": "solid,dashed,dotted"
+ }
+ },
+ "axisPointer.lineStyle.shadowBlur": {
+ "desc": "<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-js\">{\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"
+ }
+ },
+ "axisPointer.lineStyle.shadowColor": {
+ "desc": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
+ "uiControl": {
+ "type": "color",
+ "default": ""
+ }
+ },
+ "axisPointer.lineStyle.shadowOffsetX": {
+ "desc": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "default": "0",
+ "step": "0.5"
+ }
+ },
+ "axisPointer.lineStyle.shadowOffsetY": {
+ "desc": "<p>Offset distance on the vertical direction of shadow.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "default": "0",
+ "step": "0.5"
+ }
+ },
+ "axisPointer.lineStyle.opacity": {
+ "desc": "<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"
+ }
+ },
+ "axisPointer.shadowStyle": {
+ "desc": "<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">'shadow'</code>.</p>\n"
+ },
+ "axisPointer.shadowStyle.color": {
+ "desc": "<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code class=\"codespan\">'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linea [...]
+ "uiControl": {
+ "type": "color"
+ }
+ },
+ "axisPointer.shadowStyle.shadowBlur": {
+ "desc": "<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-js\">{\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"
+ }
+ },
+ "axisPointer.shadowStyle.shadowColor": {
+ "desc": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
+ "uiControl": {
+ "type": "color",
+ "default": ""
+ }
+ },
+ "axisPointer.shadowStyle.shadowOffsetX": {
+ "desc": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "default": "0",
+ "step": "0.5"
+ }
+ },
+ "axisPointer.shadowStyle.shadowOffsetY": {
+ "desc": "<p>Offset distance on the vertical direction of shadow.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "default": "0",
+ "step": "0.5"
+ }
+ },
+ "axisPointer.shadowStyle.opacity": {
+ "desc": "<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"
+ }
+ },
+ "axisPointer.triggerTooltip": {
+ "desc": "<p>Whether to trigger tooltip.</p>\n",
+ "uiControl": {
+ "type": "boolean",
+ "default": "true"
+ }
+ },
+ "axisPointer.value": {
+ "desc": "<p>current value. When using <a href=\"xAxisPointer.handle\" target=\"_blank\">axisPointer.handle</a>, <code class=\"codespan\">value</code> can be set to define the initail position of axisPointer.</p>\n"
+ },
+ "axisPointer.status": {
+ "desc": "<p>Current status, can be <code class=\"codespan\">'show'</code> 和 <code class=\"codespan\">'hide'</code>.</p>\n",
+ "uiControl": {
+ "type": "enum",
+ "options": "show,hide"
+ }
+ },
+ "axisPointer.handle": {
+ "desc": "<p>A button used to drag axisPointer. This feature is applicable in touch device. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-tooltip-touch&edit=1&reset=1\" target=\"_blank\">example</a>.</p>\n"
+ },
+ "axisPointer.handle.show": {
+ "desc": "<p>Set to <code class=\"codespan\">true</code> to use handle.</p>\n",
+ "uiControl": {
+ "type": "boolean"
+ }
+ },
+ "axisPointer.handle.icon": {
+ "desc": "<p>The icon of the handle.</p>\n<p>It can be set to an image with <code class=\"codespan\">'image://url'</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGol [...]
+ "uiControl": {
+ "type": "icon",
+ "clean": "true"
+ }
+ },
+ "axisPointer.handle.size": {
+ "desc": "<p>The size of the handle, which can be set as a single value or an array (<code class=\"codespan\">[width, height]</code>).</p>\n",
+ "uiControl": {
+ "type": "vector",
+ "default": "45,45",
+ "min": "0",
+ "step": "0.5",
+ "dims": "width,height"
+ }
+ },
+ "axisPointer.handle.margin": {
+ "desc": "<p>Distance from handle center to axis.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "default": "50",
+ "min": "0",
+ "step": "0.5"
+ }
+ },
+ "axisPointer.handle.color": {
+ "desc": "<p>The color of the handle.</p>\n",
+ "uiControl": {
+ "type": "color"
+ }
+ },
+ "axisPointer.handle.throttle": {
+ "desc": "<p>Throttle rate of trigger view update when dragging handle, in ms. Increase the value to improve performance, but decrease the experience.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "default": "40",
+ "min": "0",
+ "step": "10"
+ }
+ },
+ "axisPointer.handle.shadowBlur": {
+ "desc": "<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-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n",
+ "uiControl": {
+ "type": "number",
+ "default": "3",
+ "min": "0",
+ "step": "0.5"
+ }
+ },
+ "axisPointer.handle.shadowColor": {
+ "desc": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
+ "uiControl": {
+ "type": "color",
+ "default": "#aaa"
+ }
+ },
+ "axisPointer.handle.shadowOffsetX": {
+ "desc": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "default": "2",
+ "step": "0.5"
+ }
+ },
+ "axisPointer.handle.shadowOffsetY": {
+ "desc": "<p>Offset distance on the vertical direction of shadow.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "default": "0",
+ "step": "0.5"
+ }
+ },
+ "zlevel": {
+ "desc": "<p><code class=\"codespan\">zlevel</code> value of all graphical elements in Angle Axis.</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 man [...]
+ },
+ "z": {
+ "desc": "<p><code class=\"codespan\">z</code> value of all graphical elements in Angle Axis, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n"
+ }
}
\ No newline at end of file
diff --git a/en/documents/option-parts/option.aria.json b/en/documents/option-parts/option.aria.json
index 262bacb..4df4f7a 100644
--- a/en/documents/option-parts/option.aria.json
+++ b/en/documents/option-parts/option.aria.json
@@ -1,29 +1,83 @@
{
- "show": "<p>Whether to enable ARIA. When enabled, there should be an <code class=\"codespan\">aria-label</code> label.</p>\n",
- "description": "<p>By default, the description is generated by our algorithm based on charts. If user want to set the description totally, <code class=\"codespan\">description</code> should be set to the whole description.</p>\n<p>This is useful when single data values cannot represent what the chart means. For example, if the chart is a map containing many scatter points. Default description can only show the data, but the users may find it hard to understand what the user mean. In th [...]
- "general": "<p>General discription of chart.</p>\n",
- "general.withTitle": "<p>If <a href=\"#title.text\">title.text</a> exists, then this is used. Template variable:</p>\n<ul>\n<li><code class=\"codespan\">{title}</code>: will be replaced by <a href=\"#title.text\">title.text</a>.</li>\n</ul>\n",
- "general.withoutTitle": "<p>If <a href=\"#title.text\">title.text</a> does not exist, then this is used.</p>\n",
- "series": "<p>Series-related configures.</p>\n",
- "series.maxCount": "<p>Maximum series number.</p>\n",
- "series.single": "<p>Description used when there is only one chart.</p>\n",
- "series.single.prefix": "<p>General description for all series. This displays before all series descriptions. Template variable:</p>\n<ul>\n<li><code class=\"codespan\">{seriesCount}</code>: will be replaced by series count, which is 1.</li>\n</ul>\n",
- "series.single.withName": "<p>If chart contains <code class=\"codespan\">name</code> attribute, then this is used. Template variable:</p>\n<ul>\n<li><code class=\"codespan\">{seriesName}</code>: will be replaced by the series <code class=\"codespan\">name</code>;</li>\n<li><code class=\"codespan\">{seriesType}</code>: will be replaced by the series type name.</li>\n</ul>\n",
- "series.single.withoutName": "<p>If chart doesn't contain <code class=\"codespan\">name</code> attribute, then this is used. Template variable:</p>\n<ul>\n<li><code class=\"codespan\">{seriesType}</code>: will be replaced by series type name.</li>\n</ul>\n",
- "series.multiple": "<p>Description used when there are more than one chart.</p>\n",
- "series.multiple.prefix": "<p>General description for all series. This displays before all series descriptions. Template variable:</p>\n<ul>\n<li><code class=\"codespan\">{seriesCount}</code>: will be replaced by series count.</li>\n</ul>\n",
- "series.multiple.withName": "<p>If series contains <code class=\"codespan\">name</code> attribute, then this is used. Template variable:</p>\n<ul>\n<li><code class=\"codespan\">{seriesName}</code>: will be replaced by series <code class=\"codespan\">name</code>;</li>\n<li><code class=\"codespan\">{seriesType}</code>: will be replaced by series type name.</li>\n</ul>\n",
- "series.multiple.withoutName": "<p>If series doesn't contain <code class=\"codespan\">name</code> attribute, then this is used. Template variable:</p>\n<ul>\n<li><code class=\"codespan\">{seriesType}</code>: will be replaced by series type name.</li>\n</ul>\n",
- "series.multiple.separator": "<p>Separators between series and series.</p>\n",
- "series.multiple.separator.middle": "<p>Separators other than the last one.</p>\n",
- "series.multiple.separator.end": "<p>The last series seperator.</p>\n",
- "data": "<p>Data-related configures.</p>\n",
- "data.maxCount": "<p>Maximum data number.</p>\n",
- "data.allData": "<p>Description used when all data is displayed. Note that this option will <strong>not</strong> set to display all data. If all data should be displayed, <a href=\"#aria.data.maxCount\">aria.data.maxCount</a> should be set to be <code class=\"codespan\">Number.MAX_VALUE</code>.</p>\n",
- "data.partialData": "<p>Description used when only part of data is displayed. Template variable:</p>\n<ul>\n<li><code class=\"codespan\">{displayCnt}</code>: number of data displayed.</li>\n</ul>\n",
- "data.withName": "<p>If data contains <code class=\"codespan\">name</code> attribute, then this is used. Template variable:</p>\n<ul>\n<li><code class=\"codespan\">{name}</code>: will be replaced by data <code class=\"codespan\">name</code>;</li>\n<li><code class=\"codespan\">{value}</code>: will be replaced by data value.</li>\n</ul>\n",
- "data.withoutName": "<p>If data doesn't contain <code class=\"codespan\">name</code> attribute, then this is used. Template variable:</p>\n<ul>\n<li><code class=\"codespan\">{value}</code>: will be replaced by data value.</li>\n</ul>\n",
- "data.separator": "<p>Separators between data and data.</p>\n",
- "data.separator.middle": "<p>Separators other than the last one.</p>\n",
- "data.separator.end": "<p>The last data separator.</p>\n<p>Note that since series <code class=\"codespan\">separator.end</code> is used after the last data, <code class=\"codespan\">data.separator.end</code> is not needed in most cases.</p>\n"
+ "show": {
+ "desc": "<p>Whether to enable ARIA. When enabled, there should be an <code class=\"codespan\">aria-label</code> label.</p>\n"
+ },
+ "description": {
+ "desc": "<p>By default, the description is generated by our algorithm based on charts. If user want to set the description totally, <code class=\"codespan\">description</code> should be set to the whole description.</p>\n<p>This is useful when single data values cannot represent what the chart means. For example, if the chart is a map containing many scatter points. Default description can only show the data, but the users may find it hard to understand what the user mean. In this ca [...]
+ },
+ "general": {
+ "desc": "<p>General discription of chart.</p>\n"
+ },
+ "general.withTitle": {
+ "desc": "<p>If <a href=\"#title.text\">title.text</a> exists, then this is used. Template variable:</p>\n<ul>\n<li><code class=\"codespan\">{title}</code>: will be replaced by <a href=\"#title.text\">title.text</a>.</li>\n</ul>\n"
+ },
+ "general.withoutTitle": {
+ "desc": "<p>If <a href=\"#title.text\">title.text</a> does not exist, then this is used.</p>\n"
+ },
+ "series": {
+ "desc": "<p>Series-related configures.</p>\n"
+ },
+ "series.maxCount": {
+ "desc": "<p>Maximum series number.</p>\n"
+ },
+ "series.single": {
+ "desc": "<p>Description used when there is only one chart.</p>\n"
+ },
+ "series.single.prefix": {
+ "desc": "<p>General description for all series. This displays before all series descriptions. Template variable:</p>\n<ul>\n<li><code class=\"codespan\">{seriesCount}</code>: will be replaced by series count, which is 1.</li>\n</ul>\n"
+ },
+ "series.single.withName": {
+ "desc": "<p>If chart contains <code class=\"codespan\">name</code> attribute, then this is used. Template variable:</p>\n<ul>\n<li><code class=\"codespan\">{seriesName}</code>: will be replaced by the series <code class=\"codespan\">name</code>;</li>\n<li><code class=\"codespan\">{seriesType}</code>: will be replaced by the series type name.</li>\n</ul>\n"
+ },
+ "series.single.withoutName": {
+ "desc": "<p>If chart doesn't contain <code class=\"codespan\">name</code> attribute, then this is used. Template variable:</p>\n<ul>\n<li><code class=\"codespan\">{seriesType}</code>: will be replaced by series type name.</li>\n</ul>\n"
+ },
+ "series.multiple": {
+ "desc": "<p>Description used when there are more than one chart.</p>\n"
+ },
+ "series.multiple.prefix": {
+ "desc": "<p>General description for all series. This displays before all series descriptions. Template variable:</p>\n<ul>\n<li><code class=\"codespan\">{seriesCount}</code>: will be replaced by series count.</li>\n</ul>\n"
+ },
+ "series.multiple.withName": {
+ "desc": "<p>If series contains <code class=\"codespan\">name</code> attribute, then this is used. Template variable:</p>\n<ul>\n<li><code class=\"codespan\">{seriesName}</code>: will be replaced by series <code class=\"codespan\">name</code>;</li>\n<li><code class=\"codespan\">{seriesType}</code>: will be replaced by series type name.</li>\n</ul>\n"
+ },
+ "series.multiple.withoutName": {
+ "desc": "<p>If series doesn't contain <code class=\"codespan\">name</code> attribute, then this is used. Template variable:</p>\n<ul>\n<li><code class=\"codespan\">{seriesType}</code>: will be replaced by series type name.</li>\n</ul>\n"
+ },
+ "series.multiple.separator": {
+ "desc": "<p>Separators between series and series.</p>\n"
+ },
+ "series.multiple.separator.middle": {
+ "desc": "<p>Separators other than the last one.</p>\n"
+ },
+ "series.multiple.separator.end": {
+ "desc": "<p>The last series seperator.</p>\n"
+ },
+ "data": {
+ "desc": "<p>Data-related configures.</p>\n"
+ },
+ "data.maxCount": {
+ "desc": "<p>Maximum data number.</p>\n"
+ },
+ "data.allData": {
+ "desc": "<p>Description used when all data is displayed. Note that this option will <strong>not</strong> set to display all data. If all data should be displayed, <a href=\"#aria.data.maxCount\">aria.data.maxCount</a> should be set to be <code class=\"codespan\">Number.MAX_VALUE</code>.</p>\n"
+ },
+ "data.partialData": {
+ "desc": "<p>Description used when only part of data is displayed. Template variable:</p>\n<ul>\n<li><code class=\"codespan\">{displayCnt}</code>: number of data displayed.</li>\n</ul>\n"
+ },
+ "data.withName": {
+ "desc": "<p>If data contains <code class=\"codespan\">name</code> attribute, then this is used. Template variable:</p>\n<ul>\n<li><code class=\"codespan\">{name}</code>: will be replaced by data <code class=\"codespan\">name</code>;</li>\n<li><code class=\"codespan\">{value}</code>: will be replaced by data value.</li>\n</ul>\n"
+ },
+ "data.withoutName": {
+ "desc": "<p>If data doesn't contain <code class=\"codespan\">name</code> attribute, then this is used. Template variable:</p>\n<ul>\n<li><code class=\"codespan\">{value}</code>: will be replaced by data value.</li>\n</ul>\n"
+ },
+ "data.separator": {
+ "desc": "<p>Separators between data and data.</p>\n"
+ },
+ "data.separator.middle": {
+ "desc": "<p>Separators other than the last one.</p>\n"
+ },
+ "data.separator.end": {
+ "desc": "<p>The last data separator.</p>\n<p>Note that since series <code class=\"codespan\">separator.end</code> is used after the last data, <code class=\"codespan\">data.separator.end</code> is not needed in most cases.</p>\n"
+ }
}
\ No newline at end of file
diff --git a/en/documents/option-parts/option.axisPointer.json b/en/documents/option-parts/option.axisPointer.json
index 7466b1c..f91f0a1 100644
--- a/en/documents/option-parts/option.axisPointer.json
+++ b/en/documents/option-parts/option.axisPointer.json
@@ -1,66 +1,414 @@
{
- "id": "<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n",
- "show": "<p>axisPointer will not be displayed by default. But if <a href=\"#tooltip.trigger\">tooltip.trigger</a> is set as <code class=\"codespan\">'axis'</code> or <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as <code class=\"codespan\">'cross'</code>, axisPointer will be displayed automatically. Each coordinate system will automatically chose the axes whose will display its axisPointer. <a href=\"#tooltip.axisPointer.axis\">tooltip.axisP [...]
- "type": "<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">'line'</code> line indicator.</p>\n</li>\n<li><p><code class=\"codespan\">'shadow'</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code class=\"codespan\">'none'</code> no indicator displayed.</p>\n</li>\n</ul>\n",
- "snap": "<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n",
- "z": "<p>z value, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n",
- "label": "<p>label of axisPointer</p>\n",
- "label.show": "<p>Whether show label. Label will not show by default. But if <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as <code class=\"codespan\">'cross'</code>, label will be displayed automatically.</p>\n",
- "label.precision": "<p>The precision of value in label. It is auto determined by default. You can also set it as <code class=\"codespan\">'2'</code>, which indicates that two decimal fractions are reserved.</p>\n",
- "label.formatter": "<p>The formatter of label.</p>\n<p>If set as <code class=\"codespan\">string</code>, for example it can be: <code class=\"codespan\">formatter: 'some text {value} some text</code>, where <code class=\"codespan\">{value}</code> will be replaced by axis value automatically.</p>\n<p>If set as <code class=\"codespan\">function</code>:</p>\n<p><strong>Parameters:</strong></p>\n<p><code class=\"codespan\">{Object}</code> params: Including fields as follows:</p>\n<p><c [...]
- "label.margin": "<p>Distance between label and axis.</p>\n",
- "label.color": "<p> text color.</p>\n",
- "label.fontStyle": "<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",
- "label.fontWeight": "<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",
- "label.fontFamily": "<p> font family.</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "label.fontSize": "<p> font size.</p>\n",
- "label.lineHeight": "<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-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n",
- "label.width": "<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"cod [...]
- "label.height": "<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</ [...]
- "label.textBorderColor": "<p>Storke color of the text.</p>\n",
- "label.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "label.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "label.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "label.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "label.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "label.padding": "<p>axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, [...]
- "label.backgroundColor": "<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n",
- "label.borderColor": "<p>Border color of label.</p>\n",
- "label.borderWidth": "<p>Border width of label.</p>\n",
- "label.shadowBlur": "<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-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n",
- "label.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "label.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "label.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "lineStyle": "<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">'line'</code>.</p>\n",
- "lineStyle.color": "<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code class=\"codespan\">'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\" [...]
- "lineStyle.width": "<p> line width.</p>\n",
- "lineStyle.type": "<p> line type.</p>\n<p>Options 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",
- "lineStyle.shadowBlur": "<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-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n",
- "lineStyle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "lineStyle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "lineStyle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "lineStyle.opacity": "<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n",
- "shadowStyle": "<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">'shadow'</code>.</p>\n",
- "shadowStyle.color": "<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code class=\"codespan\">'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js [...]
- "shadowStyle.shadowBlur": "<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-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n",
- "shadowStyle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "shadowStyle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "shadowStyle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "shadowStyle.opacity": "<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n",
- "triggerTooltip": "<p>Whether to trigger tooltip.</p>\n",
- "value": "<p>current value. When using <a href=\"xAxisPointer.handle\" target=\"_blank\">axisPointer.handle</a>, <code class=\"codespan\">value</code> can be set to define the initail position of axisPointer.</p>\n",
- "status": "<p>Current status, can be <code class=\"codespan\">'show'</code> 和 <code class=\"codespan\">'hide'</code>.</p>\n",
- "handle": "<p>A button used to drag axisPointer. This feature is applicable in touch device. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-tooltip-touch&edit=1&reset=1\" target=\"_blank\">example</a>.</p>\n",
- "handle.show": "<p>Set to <code class=\"codespan\">true</code> to use handle.</p>\n",
- "handle.icon": "<p>The icon of the handle.</p>\n<p>It can be set to an image with <code class=\"codespan\">'image://url'</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCc [...]
- "handle.size": "<p>The size of the handle, which can be set as a single value or an array (<code class=\"codespan\">[width, height]</code>).</p>\n",
- "handle.margin": "<p>Distance from handle center to axis.</p>\n",
- "handle.color": "<p>The color of the handle.</p>\n",
- "handle.throttle": "<p>Throttle rate of trigger view update when dragging handle, in ms. Increase the value to improve performance, but decrease the experience.</p>\n",
- "handle.shadowBlur": "<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-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n",
- "handle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "handle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "handle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "link": "<p>axisPointers can be linked to each other. The term "link" represents that axes are synchronized and move together. Axes are linked according to the value of axisPointer.</p>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/view.html?c=candlestick-brush&edit=1&reset=1\" target=\"_blank\">sampleA</a> and <a href=\"https://echarts.apache.org/examples/zh/view.html?c=scatter-nutrients-matrix&edit=1&reset=1\" target=\"_blank\">sampleB</a>.</p>\n< [...]
- "triggerOn": "<p>Conditions to trigger tooltip. Options:</p>\n<ul>\n<li><p><code class=\"codespan\">'mousemove'</code></p>\n<p> Trigger when mouse moves.</p>\n</li>\n<li><p><code class=\"codespan\">'click'</code></p>\n<p> Trigger when mouse clicks.</p>\n</li>\n<li><p><code class=\"codespan\">'mousemove|click'</code></p>\n<p> Trigger when mouse clicks and moves.</p>\n</li>\n<li><p><code class=\"codespan\">'none'</code></p>\n<p> Do not triggered by <co [...]
+ "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"
+ },
+ "show": {
+ "desc": "<p>axisPointer will not be displayed by default. But if <a href=\"#tooltip.trigger\">tooltip.trigger</a> is set as <code class=\"codespan\">'axis'</code> or <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as <code class=\"codespan\">'cross'</code>, axisPointer will be displayed automatically. Each coordinate system will automatically chose the axes whose will display its axisPointer. <a href=\"#tooltip.axisPointer.axis\">tooltip.axi [...]
+ "uiControl": {
+ "type": "boolean"
+ }
+ },
+ "type": {
+ "desc": "<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">'line'</code> line indicator.</p>\n</li>\n<li><p><code class=\"codespan\">'shadow'</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code class=\"codespan\">'none'</code> no indicator displayed.</p>\n</li>\n</ul>\n",
+ "uiControl": {
+ "type": "enum",
+ "options": "line,shadow,none"
+ }
+ },
+ "snap": {
+ "desc": "<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n"
+ },
+ "z": {
+ "desc": "<p>z value, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n"
+ },
+ "label": {
+ "desc": "<p>label of axisPointer</p>\n"
+ },
+ "label.show": {
+ "desc": "<p>Whether show label. Label will not show by default. But if <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as <code class=\"codespan\">'cross'</code>, label will be displayed automatically.</p>\n"
+ },
+ "label.precision": {
+ "desc": "<p>The precision of value in label. It is auto determined by default. You can also set it as <code class=\"codespan\">'2'</code>, which indicates that two decimal fractions are reserved.</p>\n"
+ },
+ "label.formatter": {
+ "desc": "<p>The formatter of label.</p>\n<p>If set as <code class=\"codespan\">string</code>, for example it can be: <code class=\"codespan\">formatter: 'some text {value} some text</code>, where <code class=\"codespan\">{value}</code> will be replaced by axis value automatically.</p>\n<p>If set as <code class=\"codespan\">function</code>:</p>\n<p><strong>Parameters:</strong></p>\n<p><code class=\"codespan\">{Object}</code> params: Including fields as follows:</p>\n<p><code class [...]
+ },
+ "label.margin": {
+ "desc": "<p>Distance between label and axis.</p>\n"
+ },
+ "label.color": {
+ "desc": "<p> text color.</p>\n",
+ "uiControl": {
+ "type": "color",
+ "default": "'#fff'"
+ }
+ },
+ "label.fontStyle": {
+ "desc": "<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"
+ }
+ },
+ "label.fontWeight": {
+ "desc": "<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"
+ }
+ },
+ "label.fontFamily": {
+ "desc": "<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"
+ }
+ },
+ "label.fontSize": {
+ "desc": "<p> font size.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "default": "12",
+ "min": "1",
+ "step": "1"
+ }
+ },
+ "label.lineHeight": {
+ "desc": "<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-js\">{\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"
+ }
+ },
+ "label.width": {
+ "desc": "<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan [...]
+ },
+ "label.height": {
+ "desc": "<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> [...]
+ },
+ "label.textBorderColor": {
+ "desc": "<p>Storke color of the text.</p>\n",
+ "uiControl": {
+ "type": "color"
+ }
+ },
+ "label.textBorderWidth": {
+ "desc": "<p>Storke line width of the text.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "min": "0",
+ "step": "0.5"
+ }
+ },
+ "label.textShadowColor": {
+ "desc": "<p>Shadow color of the text itself.</p>\n",
+ "uiControl": {
+ "type": "color",
+ "default": "#000"
+ }
+ },
+ "label.textShadowBlur": {
+ "desc": "<p>Shadow blue of the text itself.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "min": "0",
+ "step": "0.5"
+ }
+ },
+ "label.textShadowOffsetX": {
+ "desc": "<p>Shadow X offset of the text itself.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "step": "0.5"
+ }
+ },
+ "label.textShadowOffsetY": {
+ "desc": "<p>Shadow Y offset of the text itself.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "step": "0.5"
+ }
+ },
+ "label.padding": {
+ "desc": "<p>axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left [...]
+ "uiControl": {
+ "type": "vector",
+ "min": "0",
+ "dims": "T,R,B,L"
+ }
+ },
+ "label.backgroundColor": {
+ "desc": "<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n"
+ },
+ "label.borderColor": {
+ "desc": "<p>Border color of label.</p>\n"
+ },
+ "label.borderWidth": {
+ "desc": "<p>Border width of label.</p>\n"
+ },
+ "label.shadowBlur": {
+ "desc": "<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-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n",
+ "uiControl": {
+ "type": "number",
+ "default": "3",
+ "min": "0",
+ "step": "0.5"
+ }
+ },
+ "label.shadowColor": {
+ "desc": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
+ "uiControl": {
+ "type": "color",
+ "default": "#aaa"
+ }
+ },
+ "label.shadowOffsetX": {
+ "desc": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "default": "0",
+ "step": "0.5"
+ }
+ },
+ "label.shadowOffsetY": {
+ "desc": "<p>Offset distance on the vertical direction of shadow.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "default": "0",
+ "step": "0.5"
+ }
+ },
+ "lineStyle": {
+ "desc": "<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">'line'</code>.</p>\n"
+ },
+ "lineStyle.color": {
+ "desc": "<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code class=\"codespan\">'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linea [...]
+ "uiControl": {
+ "type": "color"
+ }
+ },
+ "lineStyle.width": {
+ "desc": "<p> line width.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "value": "1",
+ "min": "0",
+ "step": "0.5"
+ }
+ },
+ "lineStyle.type": {
+ "desc": "<p> line type.</p>\n<p>Options 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",
+ "uiControl": {
+ "type": "enum",
+ "default": "solid",
+ "options": "solid,dashed,dotted"
+ }
+ },
+ "lineStyle.shadowBlur": {
+ "desc": "<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-js\">{\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"
+ }
+ },
+ "lineStyle.shadowColor": {
+ "desc": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
+ "uiControl": {
+ "type": "color",
+ "default": ""
+ }
+ },
+ "lineStyle.shadowOffsetX": {
+ "desc": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "default": "0",
+ "step": "0.5"
+ }
+ },
+ "lineStyle.shadowOffsetY": {
+ "desc": "<p>Offset distance on the vertical direction of shadow.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "default": "0",
+ "step": "0.5"
+ }
+ },
+ "lineStyle.opacity": {
+ "desc": "<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"
+ }
+ },
+ "shadowStyle": {
+ "desc": "<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">'shadow'</code>.</p>\n"
+ },
+ "shadowStyle.color": {
+ "desc": "<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code class=\"codespan\">'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linea [...]
+ "uiControl": {
+ "type": "color"
+ }
+ },
+ "shadowStyle.shadowBlur": {
+ "desc": "<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-js\">{\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"
+ }
+ },
+ "shadowStyle.shadowColor": {
+ "desc": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
+ "uiControl": {
+ "type": "color",
+ "default": ""
+ }
+ },
+ "shadowStyle.shadowOffsetX": {
+ "desc": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "default": "0",
+ "step": "0.5"
+ }
+ },
+ "shadowStyle.shadowOffsetY": {
+ "desc": "<p>Offset distance on the vertical direction of shadow.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "default": "0",
+ "step": "0.5"
+ }
+ },
+ "shadowStyle.opacity": {
+ "desc": "<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"
+ }
+ },
+ "triggerTooltip": {
+ "desc": "<p>Whether to trigger tooltip.</p>\n",
+ "uiControl": {
+ "type": "boolean",
+ "default": "true"
+ }
+ },
+ "value": {
+ "desc": "<p>current value. When using <a href=\"xAxisPointer.handle\" target=\"_blank\">axisPointer.handle</a>, <code class=\"codespan\">value</code> can be set to define the initail position of axisPointer.</p>\n"
+ },
+ "status": {
+ "desc": "<p>Current status, can be <code class=\"codespan\">'show'</code> 和 <code class=\"codespan\">'hide'</code>.</p>\n",
+ "uiControl": {
+ "type": "enum",
+ "options": "show,hide"
+ }
+ },
+ "handle": {
+ "desc": "<p>A button used to drag axisPointer. This feature is applicable in touch device. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-tooltip-touch&edit=1&reset=1\" target=\"_blank\">example</a>.</p>\n"
+ },
+ "handle.show": {
+ "desc": "<p>Set to <code class=\"codespan\">true</code> to use handle.</p>\n",
+ "uiControl": {
+ "type": "boolean"
+ }
+ },
+ "handle.icon": {
+ "desc": "<p>The icon of the handle.</p>\n<p>It can be set to an image with <code class=\"codespan\">'image://url'</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGol [...]
+ "uiControl": {
+ "type": "icon",
+ "clean": "true"
+ }
+ },
+ "handle.size": {
+ "desc": "<p>The size of the handle, which can be set as a single value or an array (<code class=\"codespan\">[width, height]</code>).</p>\n",
+ "uiControl": {
+ "type": "vector",
+ "default": "45,45",
+ "min": "0",
+ "step": "0.5",
+ "dims": "width,height"
+ }
+ },
+ "handle.margin": {
+ "desc": "<p>Distance from handle center to axis.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "default": "50",
+ "min": "0",
+ "step": "0.5"
+ }
+ },
+ "handle.color": {
+ "desc": "<p>The color of the handle.</p>\n",
+ "uiControl": {
+ "type": "color"
+ }
+ },
+ "handle.throttle": {
+ "desc": "<p>Throttle rate of trigger view update when dragging handle, in ms. Increase the value to improve performance, but decrease the experience.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "default": "40",
+ "min": "0",
+ "step": "10"
+ }
+ },
+ "handle.shadowBlur": {
+ "desc": "<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-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n",
+ "uiControl": {
+ "type": "number",
+ "default": "3",
+ "min": "0",
+ "step": "0.5"
+ }
+ },
+ "handle.shadowColor": {
+ "desc": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
+ "uiControl": {
+ "type": "color",
+ "default": "#aaa"
+ }
+ },
+ "handle.shadowOffsetX": {
+ "desc": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "default": "2",
+ "step": "0.5"
+ }
+ },
+ "handle.shadowOffsetY": {
+ "desc": "<p>Offset distance on the vertical direction of shadow.</p>\n",
+ "uiControl": {
+ "type": "number",
+ "default": "0",
+ "step": "0.5"
+ }
+ },
+ "link": {
+ "desc": "<p>axisPointers can be linked to each other. The term "link" represents that axes are synchronized and move together. Axes are linked according to the value of axisPointer.</p>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/view.html?c=candlestick-brush&edit=1&reset=1\" target=\"_blank\">sampleA</a> and <a href=\"https://echarts.apache.org/examples/zh/view.html?c=scatter-nutrients-matrix&edit=1&reset=1\" target=\"_blank\">sampleB</a>.</p>\ [...]
+ },
+ "triggerOn": {
+ "desc": "<p>Conditions to trigger tooltip. Options:</p>\n<ul>\n<li><p><code class=\"codespan\">'mousemove'</code></p>\n<p> Trigger when mouse moves.</p>\n</li>\n<li><p><code class=\"codespan\">'click'</code></p>\n<p> Trigger when mouse clicks.</p>\n</li>\n<li><p><code class=\"codespan\">'mousemove|click'</code></p>\n<p> Trigger when mouse clicks and moves.</p>\n</li>\n<li><p><code class=\"codespan\">'none'</code></p>\n<p> Do not triggered by <code [...]
+ "uiControl": {
+ "type": "enum",
+ "options": "mousemove,click,none"
+ }
+ }
}
\ No newline at end of file
diff --git a/en/documents/option-parts/option.brush.json b/en/documents/option-parts/option.brush.json
index c1bdc2d..27b80fd 100644
--- a/en/documents/option-parts/option.brush.json
+++ b/en/documents/option-parts/option.brush.json
@@ -1,19 +1,53 @@
{
- "id": "<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n",
- "toolbox": "<p>Use the buttons in toolbox.</p>\n<p>Buttons in toolbox that is related to brush includes:</p>\n<ul>\n<li><code class=\"codespan\">'rect'</code>: for selection-box in rectangle shape;</li>\n<li><code class=\"codespan\">'polygon'</code>: for selection-box in polygon shape;</li>\n<li><code class=\"codespan\">'lineX'</code>: for horizontal selection-box;</li>\n<li><code class=\"codespan\">'lineY'</code>: for vertical selection-box;</li>\n<li>< [...]
- "brushLink": "<p>Links interaction between selected items in different series.</p>\n<p>Following is an example of enabling selected effect for <code class=\"codespan\">scatter</code> and <code class=\"codespan\">parallel</code> charts once a scatter chart is selected.</p>\n<p><code class=\"codespan\">brushLink</code> is an array of <code class=\"codespan\">seriesIndex</code>es, which assignes the series that can be interacted. For example, it can be:</p>\n<ul>\n<li><code class=\"codesp [...]
- "seriesIndex": "<p>Assigns which of the series can use brush selecting, whose value can be:</p>\n<ul>\n<li><code class=\"codespan\">'all'</code>: all series;</li>\n<li><code class=\"codespan\">'Array'</code>: series index array;</li>\n<li><code class=\"codespan\">'number'</code>: certain series index.</li>\n</ul>\n",
- "geoIndex": "<p>Assigns which of the geo can use brush selecting.</p>\n<p><code class=\"codespan\">brush</code> can be set to be <em>global</em>, or <em>belonging to a particular coordinate</em>.</p>\n<p><strong>Global brushes</strong></p>\n<p>Selecting is enabled for everywhere in ECharts's instance in this case. This is the default situation, when brush is not set to be global.</p>\n<p><strong>Coordinate brushes</strong></p>\n<p>Selecting is enabled only in the assigned coordinat [...]
- "xAxisIndex": "<p>Assigns which of the xAxisIndex can use brush selecting.</p>\n<p><code class=\"codespan\">brush</code> can be set to be <em>global</em>, or <em>belonging to a particular coordinate</em>.</p>\n<p><strong>Global brushes</strong></p>\n<p>Selecting is enabled for everywhere in ECharts's instance in this case. This is the default situation, when brush is not set to be global.</p>\n<p><strong>Coordinate brushes</strong></p>\n<p>Selecting is enabled only in the assigned [...]
- "yAxisIndex": "<p>Assigns which of the yAxisIndex can use brush selecting.</p>\n<p><code class=\"codespan\">brush</code> can be set to be <em>global</em>, or <em>belonging to a particular coordinate</em>.</p>\n<p><strong>Global brushes</strong></p>\n<p>Selecting is enabled for everywhere in ECharts's instance in this case. This is the default situation, when brush is not set to be global.</p>\n<p><strong>Coordinate brushes</strong></p>\n<p>Selecting is enabled only in the assigned [...]
- "brushType": "<p>Default type of brush.</p>\n<ul>\n<li><code class=\"codespan\">'rect'</code>: for selection-box in rectangle shape;</li>\n<li><code class=\"codespan\">'polygon'</code>: for selection-box in polygon shape;</li>\n<li><code class=\"codespan\">'lineX'</code>: for horizontal selection-box;</li>\n<li><code class=\"codespan\">'lineY'</code>: for vertical selection-box;</li>\n</ul>\n",
- "brushMode": "<p>Default brush mode, whose value can be:</p>\n<ul>\n<li><code class=\"codespan\">'single'</code>: for single selection;</li>\n<li><code class=\"codespan\">'multiple'</code>: for multiple selection.</li>\n</ul>\n",
- "transformable": "<p>Determines whether a selected box can be changed in shape or translated.</p>\n",
- "brushStyle": "<p>Defailt brush style, whose value is:</p>\n<pre><code class=\"lang-javascript\">{\n borderWidth: 1,\n color: 'rgba(120,140,180,0.3)',\n borderColor: 'rgba(120,140,180,0.8)'\n},\n</code></pre>\n",
- "throttleType": "<p>By default, <code class=\"codespan\">brushSelected</code> is always triggered when selection-box is selected or moved, to tell the outside about the event.</p>\n<p>But efficiency problems may occur when events are triggered too frequently, or the animation result may be affected. So brush components provides <a href=\"#brush.throttleType\">brush.throttleType</a> and <a href=\"#brush.throttleDelay\">brush.throttleDelay</a> to solve this problem.</p>\n<p>Valid <code c [...]
- "throttleDelay": "<p><code class=\"codespan\">0</code> for disabling throttle.</p>\n<p>By default, <code class=\"codespan\">brushSelected</code> is always triggered when selection-box is selected or moved, to tell the outside about the event.</p>\n<p>But efficiency problems may occur when events are triggered too frequently, or the animation result may be affected. So brush components provides <a href=\"#brush.throttleType\">brush.throttleType</a> and <a href=\"#brush.throttleDelay\">b [...]
- "removeOnClick": "<p>Defined whether <em>clearing all select-boxes on click</em> is enabled when <a href=\"#brush.brushMode\">brush.brushMode</a> is <code class=\"codespan\">'single'</code>.</p>\n",
- "inBrush": "<p>Defines visual effects of items in selection.</p>\n<p>Available visual effects include:</p>\n<ul>\n<li><code class=\"codespan\">symbol</code>: Type of symbol.</li>\n<li><code class=\"codespan\">symbolSize</code>: Symbol size.</li>\n<li><code class=\"codespan\">color</code>: Symbol color.</li>\n<li><code class=\"codespan\">colorAlpha</code>: Symbol alpha channel.</li>\n<li><code class=\"codespan\">opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code [...]
- "outOfBrush": "<p>Defines visual effects of items out of selection.</p>\n<p>Available visual effects include:</p>\n<ul>\n<li><code class=\"codespan\">symbol</code>: Type of symbol.</li>\n<li><code class=\"codespan\">symbolSize</code>: Symbol size.</li>\n<li><code class=\"codespan\">color</code>: Symbol color.</li>\n<li><code class=\"codespan\">colorAlpha</code>: Symbol alpha channel.</li>\n<li><code class=\"codespan\">opacity</code>: Opacity of symbol and others (like labels).</li>\n<l [...]
- "z": "<p>z-index of brush cover box. It can be adjust when incorrect overlap occurs.</p>\n"
+ "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"
+ },
+ "toolbox": {
+ "desc": "<p>Use the buttons in toolbox.</p>\n<p>Buttons in toolbox that is related to brush includes:</p>\n<ul>\n<li><code class=\"codespan\">'rect'</code>: for selection-box in rectangle shape;</li>\n<li><code class=\"codespan\">'polygon'</code>: for selection-box in polygon shape;</li>\n<li><code class=\"codespan\">'lineX'</code>: for horizontal selection-box;</li>\n<li><code class=\"codespan\">'lineY'</code>: for vertical selection-box;</li>\n<li><c [...]
+ },
+ "brushLink": {
+ "desc": "<p>Links interaction between selected items in different series.</p>\n<p>Following is an example of enabling selected effect for <code class=\"codespan\">scatter</code> and <code class=\"codespan\">parallel</code> charts once a scatter chart is selected.</p>\n<p><code class=\"codespan\">brushLink</code> is an array of <code class=\"codespan\">seriesIndex</code>es, which assignes the series that can be interacted. For example, it can be:</p>\n<ul>\n<li><code class=\"codespan\ [...]
+ },
+ "seriesIndex": {
+ "desc": "<p>Assigns which of the series can use brush selecting, whose value can be:</p>\n<ul>\n<li><code class=\"codespan\">'all'</code>: all series;</li>\n<li><code class=\"codespan\">'Array'</code>: series index array;</li>\n<li><code class=\"codespan\">'number'</code>: certain series index.</li>\n</ul>\n"
+ },
+ "geoIndex": {
+ "desc": "<p>Assigns which of the geo can use brush selecting.</p>\n<p><code class=\"codespan\">brush</code> can be set to be <em>global</em>, or <em>belonging to a particular coordinate</em>.</p>\n<p><strong>Global brushes</strong></p>\n<p>Selecting is enabled for everywhere in ECharts's instance in this case. This is the default situation, when brush is not set to be global.</p>\n<p><strong>Coordinate brushes</strong></p>\n<p>Selecting is enabled only in the assigned coordinates [...]
+ },
+ "xAxisIndex": {
+ "desc": "<p>Assigns which of the xAxisIndex can use brush selecting.</p>\n<p><code class=\"codespan\">brush</code> can be set to be <em>global</em>, or <em>belonging to a particular coordinate</em>.</p>\n<p><strong>Global brushes</strong></p>\n<p>Selecting is enabled for everywhere in ECharts's instance in this case. This is the default situation, when brush is not set to be global.</p>\n<p><strong>Coordinate brushes</strong></p>\n<p>Selecting is enabled only in the assigned coor [...]
+ },
+ "yAxisIndex": {
+ "desc": "<p>Assigns which of the yAxisIndex can use brush selecting.</p>\n<p><code class=\"codespan\">brush</code> can be set to be <em>global</em>, or <em>belonging to a particular coordinate</em>.</p>\n<p><strong>Global brushes</strong></p>\n<p>Selecting is enabled for everywhere in ECharts's instance in this case. This is the default situation, when brush is not set to be global.</p>\n<p><strong>Coordinate brushes</strong></p>\n<p>Selecting is enabled only in the assigned coor [...]
+ },
+ "brushType": {
+ "desc": "<p>Default type of brush.</p>\n<ul>\n<li><code class=\"codespan\">'rect'</code>: for selection-box in rectangle shape;</li>\n<li><code class=\"codespan\">'polygon'</code>: for selection-box in polygon shape;</li>\n<li><code class=\"codespan\">'lineX'</code>: for horizontal selection-box;</li>\n<li><code class=\"codespan\">'lineY'</code>: for vertical selection-box;</li>\n</ul>\n"
+ },
+ "brushMode": {
+ "desc": "<p>Default brush mode, whose value can be:</p>\n<ul>\n<li><code class=\"codespan\">'single'</code>: for single selection;</li>\n<li><code class=\"codespan\">'multiple'</code>: for multiple selection.</li>\n</ul>\n"
+ },
+ "transformable": {
+ "desc": "<p>Determines whether a selected box can be changed in shape or translated.</p>\n"
+ },
+ "brushStyle": {
+ "desc": "<p>Defailt brush style, whose value is:</p>\n<pre><code class=\"lang-javascript\">{\n borderWidth: 1,\n color: 'rgba(120,140,180,0.3)',\n borderColor: 'rgba(120,140,180,0.8)'\n},\n</code></pre>\n"
+ },
+ "throttleType": {
+ "desc": "<p>By default, <code class=\"codespan\">brushSelected</code> is always triggered when selection-box is selected or moved, to tell the outside about the event.</p>\n<p>But efficiency problems may occur when events are triggered too frequently, or the animation result may be affected. So brush components provides <a href=\"#brush.throttleType\">brush.throttleType</a> and <a href=\"#brush.throttleDelay\">brush.throttleDelay</a> to solve this problem.</p>\n<p>Valid <code class=\ [...]
+ },
+ "throttleDelay": {
+ "desc": "<p><code class=\"codespan\">0</code> for disabling throttle.</p>\n<p>By default, <code class=\"codespan\">brushSelected</code> is always triggered when selection-box is selected or moved, to tell the outside about the event.</p>\n<p>But efficiency problems may occur when events are triggered too frequently, or the animation result may be affected. So brush components provides <a href=\"#brush.throttleType\">brush.throttleType</a> and <a href=\"#brush.throttleDelay\">brush.th [...]
+ },
+ "removeOnClick": {
+ "desc": "<p>Defined whether <em>clearing all select-boxes on click</em> is enabled when <a href=\"#brush.brushMode\">brush.brushMode</a> is <code class=\"codespan\">'single'</code>.</p>\n"
+ },
+ "inBrush": {
+ "desc": "<p>Defines visual effects of items in selection.</p>\n<p>Available visual effects include:</p>\n<ul>\n<li><code class=\"codespan\">symbol</code>: Type of symbol.</li>\n<li><code class=\"codespan\">symbolSize</code>: Symbol size.</li>\n<li><code class=\"codespan\">color</code>: Symbol color.</li>\n<li><code class=\"codespan\">colorAlpha</code>: Symbol alpha channel.</li>\n<li><code class=\"codespan\">opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code [...]
+ },
+ "outOfBrush": {
+ "desc": "<p>Defines visual effects of items out of selection.</p>\n<p>Available visual effects include:</p>\n<ul>\n<li><code class=\"codespan\">symbol</code>: Type of symbol.</li>\n<li><code class=\"codespan\">symbolSize</code>: Symbol size.</li>\n<li><code class=\"codespan\">color</code>: Symbol color.</li>\n<li><code class=\"codespan\">colorAlpha</code>: Symbol alpha channel.</li>\n<li><code class=\"codespan\">opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><c [...]
+ },
+ "z": {
+ "desc": "<p>z-index of brush cover box. It can be adjust when incorrect overlap occurs.</p>\n"
+ }
}
\ No newline at end of file
diff --git a/en/documents/option-parts/option.calendar.json b/en/documents/option-parts/option.calendar.json
index 5563f3c..36ea0db 100644
--- a/en/documents/option-parts/option.calendar.json
+++ b/en/documents/option-parts/option.calendar.json
@@ -1,205 +1,1415 @@
{
- "id": "<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n",
- "zlevel": "<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</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 [...]
- "z": "<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n",
- "left": "<p>Distance between calendar 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>\ [...]
- "top": "<p>Distance between calendar 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 [...]
- "right": "<p>Distance between calendar 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": "<p>Distance between calendar 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": "<p>The height of calendar coordinates.</p>\n<p>Note: <code class=\"codespan\">cellSize</code> is 20 by default. If <code class=\"codespan\">width</code> is set,\n <code class=\"codespan\">cellSize[0]</code> will be forced to <code class=\"codespan\">auto</code>;</p>\n",
- "height": "<p>The height of calendar coordinates.</p>\n<p>Note: <code class=\"codespan\">cellSize</code> is 20 by default. If <code class=\"codespan\">height</code> is set,\n <code class=\"codespan\">cellSize[1]</code> will be forced to <code class=\"codespan\">auto</code>;</p>\n",
- "range": "<p>Required, range of Calendar coordinates, support multiple formats.</p>\n<p>Examples:</p>\n<pre><code class=\"lang-js\">\n// one year\nrange: 2017\n\n// one month\nrange: '2017-02'\n\n// a range\nrange: ['2017-01-02', '2017-02-23']\n\n// note: they will be identified as ['2017-01-01', '2017-02-01']\nrange: ['2017-01', '2017-02']\n</code></pre>\n",
- "cellSize": "<p>The size of each rect of calendar coordinates, can be set to a single value or array, the first element is width and the second element is height.</p>\n<p>Support setting self-adaptation: <code class=\"codespan\">auto</code>, the default width and height to be 20.</p>\n<p>Examples:</p>\n<pre><code class=\"lang-js\">\n// Set the width and height to be 20\ncellSize: 20\n\n// Set the width to be 20, and height to be 40\ncellSize: [20, 40]\n\n// Set width and height to be s [...]
- "orient": "<p>The layout orientation of calendar.</p>\n<p>Options:</p>\n<ul>\n<li>'horizontal'</li>\n<li>'vertical'</li>\n</ul>\n",
- "splitLine": "<p>Calendar coordinates splitLine style.</p>\n",
- "splitLine.show": "<p>Set this to <code class=\"codespan\">false</code> to prevent the splitLine from showing</p>\n",
- "splitLine.lineStyle.color": "<p>splitLineLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code class=\"codespan\">'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><cod [...]
- "splitLine.lineStyle.width": "<p>splitLine line width.</p>\n",
- "splitLine.lineStyle.type": "<p>splitLine line type.</p>\n<p>Options 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",
- "splitLine.lineStyle.shadowBlur": "<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-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n",
- "splitLine.lineStyle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "splitLine.lineStyle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "splitLine.lineStyle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "splitLine.lineStyle.opacity": "<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n<p>Examples:</p>\n<pre><code class=\"lang-js\">calendar: [{\n splitLine: {\n show: true,\n lineStyle: {\n color: '#000',\n width: 1,\n type: 'solid'\n }\n }\n}]\n</code></pre>\n",
- "itemStyle": "<p>Every rect style in calendar coordinates.</p>\n",
- "itemStyle.color": "<p>calendar color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code class=\"codespan\">'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang- [...]
- "itemStyle.borderColor": "<p>calendar border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n",
- "itemStyle.borderWidth": "<p>calendar border width. No border when it is set to be 0.</p>\n",
- "itemStyle.borderType": "<p>Border type, which can be <code class=\"codespan\">'solid'</code>, <code class=\"codespan\">'dashed'</code>, or <code class=\"codespan\">'dotted'</code>. <code class=\"codespan\">'solid'</code> by default.</p>\n",
- "itemStyle.shadowBlur": "<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-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n",
- "itemStyle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "itemStyle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "itemStyle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "itemStyle.opacity": "<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n<p>Examples:</p>\n<pre><code class=\"lang-js\">calendar: [{\n itemStyle: {\n color: '#fff',\n borderWidth: 1,\n borderColor: '#ccc'\n }\n}]\n</code></pre>\n",
- "dayLabel": "<p>Day style in calendar coordinates.</p>\n",
- "dayLabel.show": "<p>Set this to <code class=\"codespan\">false</code> to prevent dayLabel from showing.</p>\n",
- "dayLabel.firstDay": "<p>A week from the beginning of the week, the default starting on Sunday.</p>\n<p>Examples:</p>\n<pre><code class=\"lang-js\">\ncalendar: [{\n dayLabel: {\n firstDay: 1 // start on Monday\n }\n}]\n</code></pre>\n",
- "dayLabel.margin": "<p>The margin between the day label and the axis line.</p>\n",
- "dayLabel.position": "<p>Position of week, at the beginning or end of the range.</p>\n<p>Options:</p>\n<ul>\n<li>'start'</li>\n<li>'end'</li>\n</ul>\n",
- "dayLabel.nameMap": "<p>Week text content, defaults to 'en';\nIt supports Chinese, English, and custom;\nindex 0 always means Sunday;</p>\n<p>Examples:</p>\n<pre><code class=\"lang-js\">\n// shortcut to English ['S', 'M', 'T', 'W', 'T', 'F', 'S'],\nnameMap: 'en'\n\n// shortcut to Chinese ['日', '一', '二', '三', '四', '五', '六']\nnameMap: 'cn'\n\n// Custom [...]
- "dayLabel.color": "<p> text color.</p>\n",
- "dayLabel.fontStyle": "<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",
- "dayLabel.fontWeight": "<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",
- "dayLabel.fontFamily": "<p> font family.</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "dayLabel.fontSize": "<p> font size.</p>\n",
- "dayLabel.align": "<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=\"la [...]
- "dayLabel.verticalAlign": "<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>\ [...]
- "dayLabel.lineHeight": "<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-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n",
- "dayLabel.backgroundColor": "<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-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HT [...]
- "dayLabel.borderColor": "<p>Border color of the text fragment.</p>\n",
- "dayLabel.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "dayLabel.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "dayLabel.padding": "<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, <c [...]
- "dayLabel.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "dayLabel.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "dayLabel.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "dayLabel.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "dayLabel.width": "<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\" [...]
- "dayLabel.height": "<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">heigh [...]
- "dayLabel.textBorderColor": "<p>Storke color of the text.</p>\n",
- "dayLabel.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "dayLabel.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "dayLabel.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "dayLabel.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "dayLabel.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "dayLabel.rich": "<p>"Rich text styles" can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">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 snip [...]
- "dayLabel.rich.<style_name>.color": "<p> text color.</p>\n",
- "dayLabel.rich.<style_name>.fontStyle": "<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",
- "dayLabel.rich.<style_name>.fontWeight": "<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",
- "dayLabel.rich.<style_name>.fontFamily": "<p> font family.</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "dayLabel.rich.<style_name>.fontSize": "<p> font size.</p>\n",
- "dayLabel.rich.<style_name>.align": "<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<pr [...]
- "dayLabel.rich.<style_name>.verticalAlign": "<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. [...]
- "dayLabel.rich.<style_name>.lineHeight": "<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-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n",
- "dayLabel.rich.<style_name>.backgroundColor": "<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-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElem [...]
- "dayLabel.rich.<style_name>.borderColor": "<p>Border color of the text fragment.</p>\n",
- "dayLabel.rich.<style_name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "dayLabel.rich.<style_name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "dayLabel.rich.<style_name>.padding": "<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</ [...]
- "dayLabel.rich.<style_name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "dayLabel.rich.<style_name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "dayLabel.rich.<style_name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "dayLabel.rich.<style_name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "dayLabel.rich.<style_name>.width": "<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\ [...]
- "dayLabel.rich.<style_name>.height": "<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class= [...]
- "dayLabel.rich.<style_name>.textBorderColor": "<p>Storke color of the text.</p>\n",
- "dayLabel.rich.<style_name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "dayLabel.rich.<style_name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "dayLabel.rich.<style_name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "dayLabel.rich.<style_name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "dayLabel.rich.<style_name>.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "monthLabel": "<p>Month label in calendar coordinates.</p>\n",
- "monthLabel.show": "<p>Set this to <code class=\"codespan\">false</code> to prevent monthLabel from showing.</p>\n",
- "monthLabel.align": "<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=\" [...]
- "monthLabel.margin": "<p>The margin between the month label and the axis line.</p>\n",
- "monthLabel.position": "<p>Position of week, at the beginning or end of the range.</p>\n<p>Options:</p>\n<ul>\n<li>'start'</li>\n<li>'end'</li>\n</ul>\n",
- "monthLabel.nameMap": "<p>Month text content, defaults to 'en';\nIt supports Chinese, English, and custom;\nIndex 0 always means Jan;</p>\n<p>Examples:</p>\n<pre><code class=\"lang-js\">// Shortcut to English [\n 'Jan', 'Feb', 'Mar',\n 'Apr', 'May', 'Jun',\n 'Jul', 'Aug', 'Sep',\n 'Oct', 'Nov', 'Dec'\n ],\nnameMap [...]
- "monthLabel.formatter": "<p>Formatter of month text label, which supports string template and callback function.</p>\n<p>Examples:</p>\n<pre><code class=\"lang-js\">// Use string template; eg: 2017-02\n/*\n template variables:\n {nameMap} default nameMap eg：'Feb'\n {yyyy} four-digit years eg: 2017\n {yy} two-digit years eg: 17\n {MM} two-digit month eg: 02\n {M} single-digit month eg: 2\n*/\nformatter: '{yyyy}-{MM}'\n\n// Use callback function; [...]
- "monthLabel.color": "<p> text color.</p>\n",
- "monthLabel.fontStyle": "<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",
- "monthLabel.fontWeight": "<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",
- "monthLabel.fontFamily": "<p> font family.</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "monthLabel.fontSize": "<p> font size.</p>\n",
- "monthLabel.verticalAlign": "<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 [...]
- "monthLabel.lineHeight": "<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-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n",
- "monthLabel.backgroundColor": "<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-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or [...]
- "monthLabel.borderColor": "<p>Border color of the text fragment.</p>\n",
- "monthLabel.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "monthLabel.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "monthLabel.padding": "<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, [...]
- "monthLabel.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "monthLabel.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "monthLabel.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "monthLabel.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "monthLabel.width": "<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class= [...]
- "monthLabel.height": "<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">hei [...]
- "monthLabel.textBorderColor": "<p>Storke color of the text.</p>\n",
- "monthLabel.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "monthLabel.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "monthLabel.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "monthLabel.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "monthLabel.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "monthLabel.rich": "<p>"Rich text styles" can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">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 sn [...]
- "monthLabel.rich.<style_name>.color": "<p> text color.</p>\n",
- "monthLabel.rich.<style_name>.fontStyle": "<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",
- "monthLabel.rich.<style_name>.fontWeight": "<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",
- "monthLabel.rich.<style_name>.fontFamily": "<p> font family.</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "monthLabel.rich.<style_name>.fontSize": "<p> font size.</p>\n",
- "monthLabel.rich.<style_name>.align": "<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< [...]
- "monthLabel.rich.<style_name>.verticalAlign": "<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 use [...]
- "monthLabel.rich.<style_name>.lineHeight": "<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-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n",
- "monthLabel.rich.<style_name>.backgroundColor": "<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-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageEl [...]
- "monthLabel.rich.<style_name>.borderColor": "<p>Border color of the text fragment.</p>\n",
- "monthLabel.rich.<style_name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "monthLabel.rich.<style_name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "monthLabel.rich.<style_name>.padding": "<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 [...]
- "monthLabel.rich.<style_name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "monthLabel.rich.<style_name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "monthLabel.rich.<style_name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "monthLabel.rich.<style_name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "monthLabel.rich.<style_name>.width": "<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p [...]
- "monthLabel.rich.<style_name>.height": "<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code clas [...]
- "monthLabel.rich.<style_name>.textBorderColor": "<p>Storke color of the text.</p>\n",
- "monthLabel.rich.<style_name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "monthLabel.rich.<style_name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "monthLabel.rich.<style_name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "monthLabel.rich.<style_name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "monthLabel.rich.<style_name>.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "yearLabel": "<p>Year label in calendar coordinates.</p>\n",
- "yearLabel.show": "<p>Set this to <code class=\"codespan\">false</code> to stop yearLabel from showing</p>\n",
- "yearLabel.margin": "<p>The margin between the month label and the axis line.</p>\n",
- "yearLabel.position": "<p>Position of year.</p>\n<p>Default:\nwhen orient is set as <code class=\"codespan\">horizontal</code>, position is <code class=\"codespan\">left</code>\nwhen orient is set as <code class=\"codespan\">vertical</code>, position is <code class=\"codespan\">top</code></p>\n<p>Options:</p>\n<ul>\n<li>'top'</li>\n<li>'bottom'</li>\n<li>'left'</li>\n<li>'right'</li>\n</ul>\n",
- "yearLabel.formatter": "<p>Formatter of year text label, which supports string template and callback function.</p>\n<p>By default, the current range of the year, if the interval across the year, showing the first year and the last year</p>\n<p>Examples:</p>\n<pre><code class=\"lang-js\">// Use string template; eg: ['2017-10-11', '2018-01-21']\n/*\n template variables:\n {nameMap} default nameMap eg：'2017-2018'\n {start} start year eg: 2017\n {end} [...]
... 374925 lines suppressed ...
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org