You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2019/12/23 07:01:19 UTC
[incubator-echarts-doc] branch release updated (eea9467 -> dbaf86d)
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a change to branch release
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-doc.git.
from eea9467 feature: add tutorial about basic concepts.
new f5974b0 add minorTick, minorSplitLine in the doc. rename 线图 to 路径图，add clip in the candlestick
new dbaf86d Remove auto generated files.
The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
Summary of changes:
.gitignore | 15 +-
en/option/component/axis-common.md | 77 +-
en/option/partial/clip.md | 7 +-
en/option/series/candlestick.md | 5 +
public/404.html | 6 -
public/about.html | 6 -
public/api.html | 6 -
public/builder.html | 6 -
public/builder3.html | 6 -
public/changelog.html | 6 -
public/cheat-sheet.html | 6 -
public/coding-standard.html | 6 -
public/committer.html | 6 -
public/css/doc-bundle.css | 1004 ------------
public/css/element-icons.ttf | Bin 55956 -> 0 bytes
public/css/element-icons.woff | Bin 28200 -> 0 bytes
public/demo.html | 6 -
public/download-extension.html | 6 -
public/download-map.html | 6 -
public/download-theme.html | 6 -
public/download.html | 6 -
public/download3.html | 6 -
public/en/documents/api-parts/api-outline.json | 1 -
public/en/documents/api-parts/api.action.json | 36 -
public/en/documents/api-parts/api.echarts.json | 16 -
.../documents/api-parts/api.echartsInstance.json | 23 -
public/en/documents/api-parts/api.events.json | 28 -
public/en/documents/api-parts/api.json | 6 -
public/en/documents/api.json | 1 -
public/en/documents/asset/gl/img/alpha-beta.sketch | Bin 65536 -> 0 bytes
public/en/documents/asset/gl/img/bar3D-bevel.png | Bin 936101 -> 0 bytes
.../en/documents/asset/gl/img/bar3D-no-bevel.png | Bin 653448 -> 0 bytes
.../en/documents/asset/gl/img/buildings-cold.jpg | Bin 244509 -> 0 bytes
.../en/documents/asset/gl/img/buildings-warm.jpg | Bin 271468 -> 0 bytes
.../documents/asset/gl/img/city-region-height.jpg | Bin 115703 -> 0 bytes
public/en/documents/asset/gl/img/crispwinter.png | Bin 134164 -> 0 bytes
.../asset/gl/img/displacement-disable.png | Bin 444676 -> 0 bytes
.../documents/asset/gl/img/displacement-enable.png | Bin 469684 -> 0 bytes
.../en/documents/asset/gl/img/displacement-low.png | Bin 393852 -> 0 bytes
.../documents/asset/gl/img/displacement-ultra.png | Bin 752937 -> 0 bytes
public/en/documents/asset/gl/img/flowGL-line.jpg | Bin 477721 -> 0 bytes
public/en/documents/asset/gl/img/flowGL-noss.jpg | Bin 468782 -> 0 bytes
public/en/documents/asset/gl/img/flowGL-point.jpg | Bin 481332 -> 0 bytes
public/en/documents/asset/gl/img/flowGL-ss.jpg | Bin 491893 -> 0 bytes
public/en/documents/asset/gl/img/flowGL-wind.jpg | Bin 309476 -> 0 bytes
public/en/documents/asset/gl/img/geo-bar3D.jpg | Bin 144774 -> 0 bytes
public/en/documents/asset/gl/img/geo-border.png | Bin 120977 -> 0 bytes
public/en/documents/asset/gl/img/geo-dof-large.png | Bin 251435 -> 0 bytes
public/en/documents/asset/gl/img/geo-dof-small.png | Bin 242725 -> 0 bytes
public/en/documents/asset/gl/img/geo-dof.png | Bin 280814 -> 0 bytes
public/en/documents/asset/gl/img/geo-no-dof.png | Bin 313830 -> 0 bytes
public/en/documents/asset/gl/img/geo-no-shadow.png | Bin 348841 -> 0 bytes
public/en/documents/asset/gl/img/geo-no-ssao.png | Bin 795777 -> 0 bytes
.../en/documents/asset/gl/img/geo-shadow-high.png | Bin 456090 -> 0 bytes
.../en/documents/asset/gl/img/geo-shadow-low.png | Bin 462952 -> 0 bytes
public/en/documents/asset/gl/img/geo-shadow.png | Bin 417158 -> 0 bytes
public/en/documents/asset/gl/img/geo-size.png | Bin 609536 -> 0 bytes
public/en/documents/asset/gl/img/geo-size.sketch | Bin 1452208 -> 0 bytes
.../asset/gl/img/geo-ssao-large-radius.png | Bin 777267 -> 0 bytes
.../asset/gl/img/geo-ssao-small-radius.png | Bin 784519 -> 0 bytes
public/en/documents/asset/gl/img/geo-ssao.png | Bin 798212 -> 0 bytes
public/en/documents/asset/gl/img/globe-airline.png | Bin 705346 -> 0 bytes
public/en/documents/asset/gl/img/globe-gloss.png | Bin 658718 -> 0 bytes
public/en/documents/asset/gl/img/globe-metal.png | Bin 435143 -> 0 bytes
.../en/documents/asset/gl/img/globe-non-metal.png | Bin 444160 -> 0 bytes
.../asset/gl/img/globe-posteffect-bloom.png | Bin 124521 -> 0 bytes
.../asset/gl/img/globe-posteffect-disable.png | Bin 614586 -> 0 bytes
.../asset/gl/img/globe-posteffect-enable.png | Bin 569860 -> 0 bytes
public/en/documents/asset/gl/img/globe-rough.png | Bin 611425 -> 0 bytes
.../documents/asset/gl/img/globe-shading-color.png | Bin 214590 -> 0 bytes
.../asset/gl/img/globe-shading-lambert.png | Bin 372631 -> 0 bytes
.../asset/gl/img/globe-shading-realistic.png | Bin 513755 -> 0 bytes
.../en/documents/asset/gl/img/gpu-layout-perf.png | Bin 19249 -> 0 bytes
public/en/documents/asset/gl/img/grid3D.png | Bin 83657 -> 0 bytes
public/en/documents/asset/gl/img/grid3D.sketch | Bin 122880 -> 0 bytes
.../documents/asset/gl/img/heightmap-disable.png | Bin 42600 -> 0 bytes
.../en/documents/asset/gl/img/heightmap-enable.png | Bin 97918 -> 0 bytes
.../en/documents/asset/gl/img/light-alpha-beta.png | Bin 10156 -> 0 bytes
public/en/documents/asset/gl/img/line3D.png | Bin 403986 -> 0 bytes
public/en/documents/asset/gl/img/lookup.png | Bin 2095 -> 0 bytes
.../documents/asset/gl/img/parametric-surface.png | Bin 619802 -> 0 bytes
public/en/documents/asset/gl/img/polygons3D-ny.jpg | Bin 541314 -> 0 bytes
public/en/documents/asset/gl/img/roughness.png | Bin 204762 -> 0 bytes
public/en/documents/asset/gl/img/scatter3D.png | Bin 771845 -> 0 bytes
public/en/documents/asset/gl/img/surface-index.png | Bin 121825 -> 0 bytes
.../en/documents/asset/gl/img/surface-index.sketch | Bin 240059 -> 0 bytes
.../en/documents/asset/gl/img/surface-no-taa.png | Bin 190861 -> 0 bytes
public/en/documents/asset/gl/img/surface-taa.png | Bin 227139 -> 0 bytes
.../en/documents/asset/gl/img/view-alpha-beta.png | Bin 9788 -> 0 bytes
public/en/documents/asset/img/aria-example.png | Bin 290782 -> 0 bytes
.../documents/asset/img/axis-align-with-label.png | Bin 7514 -> 0 bytes
.../en/documents/asset/img/custom-build-line.png | Bin 72720 -> 0 bytes
public/en/documents/asset/img/custom-build-pie.png | Bin 41231 -> 0 bytes
public/en/documents/asset/img/echarts-aria.jpg | Bin 143809 -> 0 bytes
public/en/documents/asset/img/gl/bar3D-2d-data.png | Bin 58130 -> 0 bytes
public/en/documents/asset/img/gl/bar3D.png | Bin 142020 -> 0 bytes
public/en/documents/asset/img/gl/grid3D-basic.png | Bin 30307 -> 0 bytes
.../en/documents/asset/img/gl/scatter3D-color.png | Bin 145129 -> 0 bytes
.../documents/asset/img/gl/scatter3D-gaussian.png | Bin 114828 -> 0 bytes
.../en/documents/asset/img/gl/scatter3D-life.png | Bin 90059 -> 0 bytes
.../en/documents/asset/img/gl/scatter3D-life2.png | Bin 167782 -> 0 bytes
public/en/documents/asset/img/gl/surface.png | Bin 189074 -> 0 bytes
public/en/documents/asset/img/smooth-algorithm.png | Bin 244496 -> 0 bytes
.../documents/asset/img/smooth-monotone-none.png | Bin 43625 -> 0 bytes
.../en/documents/asset/img/smooth-monotone-x.png | Bin 47594 -> 0 bytes
.../documents/asset/img/smooth-non-monotone-x.png | Bin 161468 -> 0 bytes
.../en/documents/asset/img/smooth-old-problem.png | Bin 145198 -> 0 bytes
.../en/documents/asset/img/smooth-old-vs-new.png | Bin 121268 -> 0 bytes
.../en/documents/asset/img/treemap-border-gap.png | Bin 92466 -> 0 bytes
public/en/documents/changelog.html | 1209 ---------------
public/en/documents/coding-standard.html | 567 -------
.../option-gl-parts/option-gl-outline.json | 1 -
.../documents/option-gl-parts/option-gl.geo3D.json | 172 ---
.../documents/option-gl-parts/option-gl.globe.json | 118 --
.../option-gl-parts/option-gl.grid3D.json | 134 --
public/en/documents/option-gl-parts/option-gl.json | 20 -
.../option-gl-parts/option-gl.mapbox3D.json | 69 -
.../option-gl-parts/option-gl.series-bar3D.json | 91 --
.../option-gl-parts/option-gl.series-flowGL.json | 14 -
.../option-gl-parts/option-gl.series-graphGL.json | 48 -
.../option-gl-parts/option-gl.series-line3D.json | 24 -
.../option-gl-parts/option-gl.series-lines3D.json | 29 -
.../option-gl-parts/option-gl.series-map3D.json | 173 ---
.../option-gl.series-polygons3D.json | 13 -
.../option-gl.series-scatter3D.json | 49 -
.../option-gl.series-scatterGL.json | 23 -
.../option-gl-parts/option-gl.series-surface.json | 66 -
.../option-gl-parts/option-gl.xAxis3D.json | 79 -
.../option-gl-parts/option-gl.yAxis3D.json | 79 -
.../option-gl-parts/option-gl.zAxis3D.json | 79 -
public/en/documents/option-gl.json | 1 -
.../en/documents/option-parts/option-outline.json | 1 -
.../documents/option-parts/option.angleAxis.json | 239 ---
public/en/documents/option-parts/option.aria.json | 29 -
.../documents/option-parts/option.axisPointer.json | 66 -
public/en/documents/option-parts/option.brush.json | 19 -
.../en/documents/option-parts/option.calendar.json | 205 ---
.../option-parts/option.dataZoom-inside.json | 25 -
.../option-parts/option.dataZoom-slider.json | 78 -
.../en/documents/option-parts/option.dataset.json | 6 -
public/en/documents/option-parts/option.geo.json | 300 ----
.../en/documents/option-parts/option.graphic.json | 414 -----
public/en/documents/option-parts/option.grid.json | 110 --
public/en/documents/option-parts/option.json | 65 -
.../en/documents/option-parts/option.legend.json | 177 ---
.../en/documents/option-parts/option.parallel.json | 226 ---
.../option-parts/option.parallelAxis.json | 220 ---
public/en/documents/option-parts/option.polar.json | 97 --
public/en/documents/option-parts/option.radar.json | 172 ---
.../documents/option-parts/option.radiusAxis.json | 295 ----
.../documents/option-parts/option.series-bar.json | 1187 --------------
.../option-parts/option.series-boxplot.json | 942 ------------
.../option-parts/option.series-candlestick.json | 957 ------------
.../option-parts/option.series-custom.json | 474 ------
.../option-parts/option.series-effectScatter.json | 1192 --------------
.../option-parts/option.series-funnel.json | 1178 --------------
.../option-parts/option.series-gauge.json | 1076 -------------
.../option-parts/option.series-graph.json | 1611 -------------------
.../option-parts/option.series-heatmap.json | 1126 --------------
.../documents/option-parts/option.series-line.json | 1214 ---------------
.../option-parts/option.series-lines.json | 1112 --------------
.../documents/option-parts/option.series-map.json | 1180 --------------
.../option-parts/option.series-parallel.json | 84 -
.../option-parts/option.series-pictorialBar.json | 1221 ---------------
.../documents/option-parts/option.series-pie.json | 1202 ---------------
.../option-parts/option.series-radar.json | 399 -----
.../option-parts/option.series-sankey.json | 397 -----
.../option-parts/option.series-scatter.json | 1195 --------------
.../option-parts/option.series-sunburst.json | 864 -----------
.../option-parts/option.series-themeRiver.json | 169 --
.../documents/option-parts/option.series-tree.json | 495 ------
.../option-parts/option.series-treemap.json | 966 ------------
.../documents/option-parts/option.singleAxis.json | 391 -----
.../documents/option-parts/option.textStyle.json | 16 -
.../en/documents/option-parts/option.timeline.json | 198 ---
public/en/documents/option-parts/option.title.json | 111 --
.../en/documents/option-parts/option.toolbox.json | 222 ---
.../en/documents/option-parts/option.tooltip.json | 100 --
.../option-parts/option.visualMap-continuous.json | 52 -
.../option-parts/option.visualMap-piecewise.json | 58 -
public/en/documents/option-parts/option.xAxis.json | 300 ----
public/en/documents/option-parts/option.yAxis.json | 300 ----
public/en/documents/option.json | 1 -
.../documents/tutorial-parts/tutorial-outline.json | 1 -
public/en/documents/tutorial-parts/tutorial.json | 19 -
public/en/documents/tutorial.json | 1 -
public/examples.html | 3 -
public/faq.html | 6 -
public/feature.html | 6 -
public/index.html | 6 -
public/js/doc-bundle.js | 20 -
public/maillist.html | 6 -
public/option-gl.html | 6 -
public/option.html | 6 -
public/option3.html | 6 -
public/spreadsheet.html | 6 -
public/tutorial.html | 6 -
public/zh/documents/api-parts/api-outline.json | 1 -
public/zh/documents/api-parts/api.action.json | 40 -
public/zh/documents/api-parts/api.echarts.json | 16 -
.../documents/api-parts/api.echartsInstance.json | 23 -
public/zh/documents/api-parts/api.events.json | 31 -
public/zh/documents/api-parts/api.json | 6 -
public/zh/documents/api.json | 1 -
public/zh/documents/asset/gl/img/alpha-beta.sketch | Bin 65536 -> 0 bytes
public/zh/documents/asset/gl/img/bar3D-bevel.png | Bin 936101 -> 0 bytes
.../zh/documents/asset/gl/img/bar3D-no-bevel.png | Bin 653448 -> 0 bytes
.../zh/documents/asset/gl/img/buildings-cold.jpg | Bin 244509 -> 0 bytes
.../zh/documents/asset/gl/img/buildings-warm.jpg | Bin 271468 -> 0 bytes
.../documents/asset/gl/img/city-region-height.jpg | Bin 115703 -> 0 bytes
public/zh/documents/asset/gl/img/crispwinter.png | Bin 134164 -> 0 bytes
.../asset/gl/img/displacement-disable.png | Bin 444676 -> 0 bytes
.../documents/asset/gl/img/displacement-enable.png | Bin 469684 -> 0 bytes
.../zh/documents/asset/gl/img/displacement-low.png | Bin 393852 -> 0 bytes
.../documents/asset/gl/img/displacement-ultra.png | Bin 752937 -> 0 bytes
public/zh/documents/asset/gl/img/flowGL-line.jpg | Bin 477721 -> 0 bytes
public/zh/documents/asset/gl/img/flowGL-noss.jpg | Bin 468782 -> 0 bytes
public/zh/documents/asset/gl/img/flowGL-point.jpg | Bin 481332 -> 0 bytes
public/zh/documents/asset/gl/img/flowGL-ss.jpg | Bin 491893 -> 0 bytes
public/zh/documents/asset/gl/img/flowGL-wind.jpg | Bin 309476 -> 0 bytes
public/zh/documents/asset/gl/img/geo-bar3D.jpg | Bin 144774 -> 0 bytes
public/zh/documents/asset/gl/img/geo-border.png | Bin 120977 -> 0 bytes
public/zh/documents/asset/gl/img/geo-dof-large.png | Bin 251435 -> 0 bytes
public/zh/documents/asset/gl/img/geo-dof-small.png | Bin 242725 -> 0 bytes
public/zh/documents/asset/gl/img/geo-dof.png | Bin 280814 -> 0 bytes
public/zh/documents/asset/gl/img/geo-no-dof.png | Bin 313830 -> 0 bytes
public/zh/documents/asset/gl/img/geo-no-shadow.png | Bin 348841 -> 0 bytes
public/zh/documents/asset/gl/img/geo-no-ssao.png | Bin 795777 -> 0 bytes
.../zh/documents/asset/gl/img/geo-shadow-high.png | Bin 456090 -> 0 bytes
.../zh/documents/asset/gl/img/geo-shadow-low.png | Bin 462952 -> 0 bytes
public/zh/documents/asset/gl/img/geo-shadow.png | Bin 417158 -> 0 bytes
public/zh/documents/asset/gl/img/geo-size.png | Bin 609536 -> 0 bytes
public/zh/documents/asset/gl/img/geo-size.sketch | Bin 1452208 -> 0 bytes
.../asset/gl/img/geo-ssao-large-radius.png | Bin 777267 -> 0 bytes
.../asset/gl/img/geo-ssao-small-radius.png | Bin 784519 -> 0 bytes
public/zh/documents/asset/gl/img/geo-ssao.png | Bin 798212 -> 0 bytes
public/zh/documents/asset/gl/img/globe-airline.png | Bin 705346 -> 0 bytes
public/zh/documents/asset/gl/img/globe-gloss.png | Bin 658718 -> 0 bytes
public/zh/documents/asset/gl/img/globe-metal.png | Bin 435143 -> 0 bytes
.../zh/documents/asset/gl/img/globe-non-metal.png | Bin 444160 -> 0 bytes
.../asset/gl/img/globe-posteffect-bloom.png | Bin 124521 -> 0 bytes
.../asset/gl/img/globe-posteffect-disable.png | Bin 614586 -> 0 bytes
.../asset/gl/img/globe-posteffect-enable.png | Bin 569860 -> 0 bytes
public/zh/documents/asset/gl/img/globe-rough.png | Bin 611425 -> 0 bytes
.../documents/asset/gl/img/globe-shading-color.png | Bin 214590 -> 0 bytes
.../asset/gl/img/globe-shading-lambert.png | Bin 372631 -> 0 bytes
.../asset/gl/img/globe-shading-realistic.png | Bin 513755 -> 0 bytes
.../zh/documents/asset/gl/img/gpu-layout-perf.png | Bin 19249 -> 0 bytes
public/zh/documents/asset/gl/img/grid3D.png | Bin 83657 -> 0 bytes
public/zh/documents/asset/gl/img/grid3D.sketch | Bin 122880 -> 0 bytes
.../documents/asset/gl/img/heightmap-disable.png | Bin 42600 -> 0 bytes
.../zh/documents/asset/gl/img/heightmap-enable.png | Bin 97918 -> 0 bytes
.../zh/documents/asset/gl/img/light-alpha-beta.png | Bin 10156 -> 0 bytes
public/zh/documents/asset/gl/img/line3D.png | Bin 403986 -> 0 bytes
public/zh/documents/asset/gl/img/lookup.png | Bin 2095 -> 0 bytes
.../documents/asset/gl/img/parametric-surface.png | Bin 619802 -> 0 bytes
public/zh/documents/asset/gl/img/polygons3D-ny.jpg | Bin 541314 -> 0 bytes
public/zh/documents/asset/gl/img/roughness.png | Bin 204762 -> 0 bytes
public/zh/documents/asset/gl/img/scatter3D.png | Bin 771845 -> 0 bytes
public/zh/documents/asset/gl/img/surface-index.png | Bin 121825 -> 0 bytes
.../zh/documents/asset/gl/img/surface-index.sketch | Bin 240059 -> 0 bytes
.../zh/documents/asset/gl/img/surface-no-taa.png | Bin 190861 -> 0 bytes
public/zh/documents/asset/gl/img/surface-taa.png | Bin 227139 -> 0 bytes
.../zh/documents/asset/gl/img/view-alpha-beta.png | Bin 9788 -> 0 bytes
public/zh/documents/asset/img/aria-example.png | Bin 290782 -> 0 bytes
.../documents/asset/img/axis-align-with-label.png | Bin 7514 -> 0 bytes
.../zh/documents/asset/img/custom-build-line.png | Bin 72720 -> 0 bytes
public/zh/documents/asset/img/custom-build-pie.png | Bin 41231 -> 0 bytes
public/zh/documents/asset/img/echarts-aria.jpg | Bin 143809 -> 0 bytes
public/zh/documents/asset/img/gl/bar3D-2d-data.png | Bin 58130 -> 0 bytes
public/zh/documents/asset/img/gl/bar3D.png | Bin 142020 -> 0 bytes
public/zh/documents/asset/img/gl/grid3D-basic.png | Bin 30307 -> 0 bytes
.../zh/documents/asset/img/gl/scatter3D-color.png | Bin 145129 -> 0 bytes
.../documents/asset/img/gl/scatter3D-gaussian.png | Bin 114828 -> 0 bytes
.../zh/documents/asset/img/gl/scatter3D-life.png | Bin 90059 -> 0 bytes
.../zh/documents/asset/img/gl/scatter3D-life2.png | Bin 167782 -> 0 bytes
public/zh/documents/asset/img/gl/surface.png | Bin 189074 -> 0 bytes
public/zh/documents/asset/img/smooth-algorithm.png | Bin 244496 -> 0 bytes
.../documents/asset/img/smooth-monotone-none.png | Bin 43625 -> 0 bytes
.../zh/documents/asset/img/smooth-monotone-x.png | Bin 47594 -> 0 bytes
.../documents/asset/img/smooth-non-monotone-x.png | Bin 161468 -> 0 bytes
.../zh/documents/asset/img/smooth-old-problem.png | Bin 145198 -> 0 bytes
.../zh/documents/asset/img/smooth-old-vs-new.png | Bin 121268 -> 0 bytes
.../zh/documents/asset/img/treemap-border-gap.png | Bin 92466 -> 0 bytes
public/zh/documents/changelog.html | 1623 --------------------
.../option-gl-parts/option-gl-outline.json | 1 -
.../documents/option-gl-parts/option-gl.geo3D.json | 172 ---
.../documents/option-gl-parts/option-gl.globe.json | 118 --
.../option-gl-parts/option-gl.grid3D.json | 134 --
public/zh/documents/option-gl-parts/option-gl.json | 20 -
.../option-gl-parts/option-gl.mapbox3D.json | 69 -
.../option-gl-parts/option-gl.series-bar3D.json | 91 --
.../option-gl-parts/option-gl.series-flowGL.json | 14 -
.../option-gl-parts/option-gl.series-graphGL.json | 48 -
.../option-gl-parts/option-gl.series-line3D.json | 24 -
.../option-gl-parts/option-gl.series-lines3D.json | 29 -
.../option-gl-parts/option-gl.series-map3D.json | 173 ---
.../option-gl.series-polygons3D.json | 13 -
.../option-gl.series-scatter3D.json | 49 -
.../option-gl.series-scatterGL.json | 23 -
.../option-gl-parts/option-gl.series-surface.json | 66 -
.../option-gl-parts/option-gl.xAxis3D.json | 79 -
.../option-gl-parts/option-gl.yAxis3D.json | 79 -
.../option-gl-parts/option-gl.zAxis3D.json | 79 -
public/zh/documents/option-gl.json | 1 -
.../zh/documents/option-parts/option-outline.json | 1 -
.../documents/option-parts/option.angleAxis.json | 243 ---
public/zh/documents/option-parts/option.aria.json | 29 -
.../documents/option-parts/option.axisPointer.json | 66 -
public/zh/documents/option-parts/option.brush.json | 19 -
.../zh/documents/option-parts/option.calendar.json | 205 ---
.../option-parts/option.dataZoom-inside.json | 25 -
.../option-parts/option.dataZoom-slider.json | 78 -
.../zh/documents/option-parts/option.dataset.json | 6 -
public/zh/documents/option-parts/option.geo.json | 301 ----
.../zh/documents/option-parts/option.graphic.json | 414 -----
public/zh/documents/option-parts/option.grid.json | 110 --
public/zh/documents/option-parts/option.json | 67 -
.../zh/documents/option-parts/option.legend.json | 175 ---
.../zh/documents/option-parts/option.parallel.json | 228 ---
.../option-parts/option.parallelAxis.json | 222 ---
public/zh/documents/option-parts/option.polar.json | 97 --
public/zh/documents/option-parts/option.radar.json | 172 ---
.../documents/option-parts/option.radiusAxis.json | 299 ----
.../documents/option-parts/option.series-bar.json | 1197 ---------------
.../option-parts/option.series-boxplot.json | 949 ------------
.../option-parts/option.series-candlestick.json | 960 ------------
.../option-parts/option.series-custom.json | 474 ------
.../option-parts/option.series-effectScatter.json | 1198 ---------------
.../option-parts/option.series-funnel.json | 1183 --------------
.../option-parts/option.series-gauge.json | 1083 -------------
.../option-parts/option.series-graph.json | 1613 -------------------
.../option-parts/option.series-heatmap.json | 1129 --------------
.../documents/option-parts/option.series-line.json | 1220 ---------------
.../option-parts/option.series-lines.json | 1116 --------------
.../documents/option-parts/option.series-map.json | 1185 --------------
.../option-parts/option.series-parallel.json | 61 -
.../option-parts/option.series-pictorialBar.json | 1224 ---------------
.../documents/option-parts/option.series-pie.json | 1203 ---------------
.../option-parts/option.series-radar.json | 403 -----
.../option-parts/option.series-sankey.json | 399 -----
.../option-parts/option.series-scatter.json | 1200 ---------------
.../option-parts/option.series-sunburst.json | 864 -----------
.../option-parts/option.series-themeRiver.json | 170 --
.../documents/option-parts/option.series-tree.json | 498 ------
.../option-parts/option.series-treemap.json | 969 ------------
.../documents/option-parts/option.singleAxis.json | 395 -----
.../documents/option-parts/option.textStyle.json | 16 -
.../zh/documents/option-parts/option.timeline.json | 196 ---
public/zh/documents/option-parts/option.title.json | 111 --
.../zh/documents/option-parts/option.toolbox.json | 222 ---
.../zh/documents/option-parts/option.tooltip.json | 100 --
.../option-parts/option.visualMap-continuous.json | 52 -
.../option-parts/option.visualMap-piecewise.json | 58 -
public/zh/documents/option-parts/option.xAxis.json | 304 ----
public/zh/documents/option-parts/option.yAxis.json | 304 ----
public/zh/documents/option.json | 1 -
.../documents/tutorial-parts/tutorial-outline.json | 1 -
public/zh/documents/tutorial-parts/tutorial.json | 23 -
public/zh/documents/tutorial.json | 1 -
zh/option/component/axis-common.md | 74 +-
zh/option/component/geo-common.md | 2 +-
zh/option/partial/clip.md | 5 +-
zh/option/series/candlestick.md | 5 +
zh/option/series/lines.md | 6 +-
365 files changed, 173 insertions(+), 56980 deletions(-)
delete mode 100644 public/404.html
delete mode 100644 public/about.html
delete mode 100644 public/api.html
delete mode 100644 public/builder.html
delete mode 100644 public/builder3.html
delete mode 100644 public/changelog.html
delete mode 100644 public/cheat-sheet.html
delete mode 100644 public/coding-standard.html
delete mode 100644 public/committer.html
delete mode 100644 public/css/doc-bundle.css
delete mode 100644 public/css/element-icons.ttf
delete mode 100644 public/css/element-icons.woff
delete mode 100644 public/demo.html
delete mode 100644 public/download-extension.html
delete mode 100644 public/download-map.html
delete mode 100644 public/download-theme.html
delete mode 100644 public/download.html
delete mode 100644 public/download3.html
delete mode 100644 public/en/documents/api-parts/api-outline.json
delete mode 100644 public/en/documents/api-parts/api.action.json
delete mode 100644 public/en/documents/api-parts/api.echarts.json
delete mode 100644 public/en/documents/api-parts/api.echartsInstance.json
delete mode 100644 public/en/documents/api-parts/api.events.json
delete mode 100644 public/en/documents/api-parts/api.json
delete mode 100644 public/en/documents/api.json
delete mode 100644 public/en/documents/asset/gl/img/alpha-beta.sketch
delete mode 100644 public/en/documents/asset/gl/img/bar3D-bevel.png
delete mode 100644 public/en/documents/asset/gl/img/bar3D-no-bevel.png
delete mode 100644 public/en/documents/asset/gl/img/buildings-cold.jpg
delete mode 100644 public/en/documents/asset/gl/img/buildings-warm.jpg
delete mode 100644 public/en/documents/asset/gl/img/city-region-height.jpg
delete mode 100644 public/en/documents/asset/gl/img/crispwinter.png
delete mode 100644 public/en/documents/asset/gl/img/displacement-disable.png
delete mode 100644 public/en/documents/asset/gl/img/displacement-enable.png
delete mode 100644 public/en/documents/asset/gl/img/displacement-low.png
delete mode 100644 public/en/documents/asset/gl/img/displacement-ultra.png
delete mode 100644 public/en/documents/asset/gl/img/flowGL-line.jpg
delete mode 100644 public/en/documents/asset/gl/img/flowGL-noss.jpg
delete mode 100644 public/en/documents/asset/gl/img/flowGL-point.jpg
delete mode 100644 public/en/documents/asset/gl/img/flowGL-ss.jpg
delete mode 100644 public/en/documents/asset/gl/img/flowGL-wind.jpg
delete mode 100644 public/en/documents/asset/gl/img/geo-bar3D.jpg
delete mode 100644 public/en/documents/asset/gl/img/geo-border.png
delete mode 100644 public/en/documents/asset/gl/img/geo-dof-large.png
delete mode 100644 public/en/documents/asset/gl/img/geo-dof-small.png
delete mode 100644 public/en/documents/asset/gl/img/geo-dof.png
delete mode 100644 public/en/documents/asset/gl/img/geo-no-dof.png
delete mode 100644 public/en/documents/asset/gl/img/geo-no-shadow.png
delete mode 100644 public/en/documents/asset/gl/img/geo-no-ssao.png
delete mode 100644 public/en/documents/asset/gl/img/geo-shadow-high.png
delete mode 100644 public/en/documents/asset/gl/img/geo-shadow-low.png
delete mode 100644 public/en/documents/asset/gl/img/geo-shadow.png
delete mode 100644 public/en/documents/asset/gl/img/geo-size.png
delete mode 100644 public/en/documents/asset/gl/img/geo-size.sketch
delete mode 100644 public/en/documents/asset/gl/img/geo-ssao-large-radius.png
delete mode 100644 public/en/documents/asset/gl/img/geo-ssao-small-radius.png
delete mode 100644 public/en/documents/asset/gl/img/geo-ssao.png
delete mode 100644 public/en/documents/asset/gl/img/globe-airline.png
delete mode 100644 public/en/documents/asset/gl/img/globe-gloss.png
delete mode 100644 public/en/documents/asset/gl/img/globe-metal.png
delete mode 100644 public/en/documents/asset/gl/img/globe-non-metal.png
delete mode 100644 public/en/documents/asset/gl/img/globe-posteffect-bloom.png
delete mode 100644 public/en/documents/asset/gl/img/globe-posteffect-disable.png
delete mode 100644 public/en/documents/asset/gl/img/globe-posteffect-enable.png
delete mode 100644 public/en/documents/asset/gl/img/globe-rough.png
delete mode 100644 public/en/documents/asset/gl/img/globe-shading-color.png
delete mode 100644 public/en/documents/asset/gl/img/globe-shading-lambert.png
delete mode 100644 public/en/documents/asset/gl/img/globe-shading-realistic.png
delete mode 100644 public/en/documents/asset/gl/img/gpu-layout-perf.png
delete mode 100644 public/en/documents/asset/gl/img/grid3D.png
delete mode 100644 public/en/documents/asset/gl/img/grid3D.sketch
delete mode 100644 public/en/documents/asset/gl/img/heightmap-disable.png
delete mode 100644 public/en/documents/asset/gl/img/heightmap-enable.png
delete mode 100644 public/en/documents/asset/gl/img/light-alpha-beta.png
delete mode 100644 public/en/documents/asset/gl/img/line3D.png
delete mode 100644 public/en/documents/asset/gl/img/lookup.png
delete mode 100644 public/en/documents/asset/gl/img/parametric-surface.png
delete mode 100644 public/en/documents/asset/gl/img/polygons3D-ny.jpg
delete mode 100644 public/en/documents/asset/gl/img/roughness.png
delete mode 100644 public/en/documents/asset/gl/img/scatter3D.png
delete mode 100644 public/en/documents/asset/gl/img/surface-index.png
delete mode 100644 public/en/documents/asset/gl/img/surface-index.sketch
delete mode 100644 public/en/documents/asset/gl/img/surface-no-taa.png
delete mode 100644 public/en/documents/asset/gl/img/surface-taa.png
delete mode 100644 public/en/documents/asset/gl/img/view-alpha-beta.png
delete mode 100644 public/en/documents/asset/img/aria-example.png
delete mode 100644 public/en/documents/asset/img/axis-align-with-label.png
delete mode 100644 public/en/documents/asset/img/custom-build-line.png
delete mode 100644 public/en/documents/asset/img/custom-build-pie.png
delete mode 100644 public/en/documents/asset/img/echarts-aria.jpg
delete mode 100644 public/en/documents/asset/img/gl/bar3D-2d-data.png
delete mode 100644 public/en/documents/asset/img/gl/bar3D.png
delete mode 100644 public/en/documents/asset/img/gl/grid3D-basic.png
delete mode 100644 public/en/documents/asset/img/gl/scatter3D-color.png
delete mode 100644 public/en/documents/asset/img/gl/scatter3D-gaussian.png
delete mode 100644 public/en/documents/asset/img/gl/scatter3D-life.png
delete mode 100644 public/en/documents/asset/img/gl/scatter3D-life2.png
delete mode 100644 public/en/documents/asset/img/gl/surface.png
delete mode 100644 public/en/documents/asset/img/smooth-algorithm.png
delete mode 100644 public/en/documents/asset/img/smooth-monotone-none.png
delete mode 100644 public/en/documents/asset/img/smooth-monotone-x.png
delete mode 100644 public/en/documents/asset/img/smooth-non-monotone-x.png
delete mode 100644 public/en/documents/asset/img/smooth-old-problem.png
delete mode 100644 public/en/documents/asset/img/smooth-old-vs-new.png
delete mode 100644 public/en/documents/asset/img/treemap-border-gap.png
delete mode 100644 public/en/documents/changelog.html
delete mode 100644 public/en/documents/coding-standard.html
delete mode 100644 public/en/documents/option-gl-parts/option-gl-outline.json
delete mode 100644 public/en/documents/option-gl-parts/option-gl.geo3D.json
delete mode 100644 public/en/documents/option-gl-parts/option-gl.globe.json
delete mode 100644 public/en/documents/option-gl-parts/option-gl.grid3D.json
delete mode 100644 public/en/documents/option-gl-parts/option-gl.json
delete mode 100644 public/en/documents/option-gl-parts/option-gl.mapbox3D.json
delete mode 100644 public/en/documents/option-gl-parts/option-gl.series-bar3D.json
delete mode 100644 public/en/documents/option-gl-parts/option-gl.series-flowGL.json
delete mode 100644 public/en/documents/option-gl-parts/option-gl.series-graphGL.json
delete mode 100644 public/en/documents/option-gl-parts/option-gl.series-line3D.json
delete mode 100644 public/en/documents/option-gl-parts/option-gl.series-lines3D.json
delete mode 100644 public/en/documents/option-gl-parts/option-gl.series-map3D.json
delete mode 100644 public/en/documents/option-gl-parts/option-gl.series-polygons3D.json
delete mode 100644 public/en/documents/option-gl-parts/option-gl.series-scatter3D.json
delete mode 100644 public/en/documents/option-gl-parts/option-gl.series-scatterGL.json
delete mode 100644 public/en/documents/option-gl-parts/option-gl.series-surface.json
delete mode 100644 public/en/documents/option-gl-parts/option-gl.xAxis3D.json
delete mode 100644 public/en/documents/option-gl-parts/option-gl.yAxis3D.json
delete mode 100644 public/en/documents/option-gl-parts/option-gl.zAxis3D.json
delete mode 100644 public/en/documents/option-gl.json
delete mode 100644 public/en/documents/option-parts/option-outline.json
delete mode 100644 public/en/documents/option-parts/option.angleAxis.json
delete mode 100644 public/en/documents/option-parts/option.aria.json
delete mode 100644 public/en/documents/option-parts/option.axisPointer.json
delete mode 100644 public/en/documents/option-parts/option.brush.json
delete mode 100644 public/en/documents/option-parts/option.calendar.json
delete mode 100644 public/en/documents/option-parts/option.dataZoom-inside.json
delete mode 100644 public/en/documents/option-parts/option.dataZoom-slider.json
delete mode 100644 public/en/documents/option-parts/option.dataset.json
delete mode 100644 public/en/documents/option-parts/option.geo.json
delete mode 100644 public/en/documents/option-parts/option.graphic.json
delete mode 100644 public/en/documents/option-parts/option.grid.json
delete mode 100644 public/en/documents/option-parts/option.json
delete mode 100644 public/en/documents/option-parts/option.legend.json
delete mode 100644 public/en/documents/option-parts/option.parallel.json
delete mode 100644 public/en/documents/option-parts/option.parallelAxis.json
delete mode 100644 public/en/documents/option-parts/option.polar.json
delete mode 100644 public/en/documents/option-parts/option.radar.json
delete mode 100644 public/en/documents/option-parts/option.radiusAxis.json
delete mode 100644 public/en/documents/option-parts/option.series-bar.json
delete mode 100644 public/en/documents/option-parts/option.series-boxplot.json
delete mode 100644 public/en/documents/option-parts/option.series-candlestick.json
delete mode 100644 public/en/documents/option-parts/option.series-custom.json
delete mode 100644 public/en/documents/option-parts/option.series-effectScatter.json
delete mode 100644 public/en/documents/option-parts/option.series-funnel.json
delete mode 100644 public/en/documents/option-parts/option.series-gauge.json
delete mode 100644 public/en/documents/option-parts/option.series-graph.json
delete mode 100644 public/en/documents/option-parts/option.series-heatmap.json
delete mode 100644 public/en/documents/option-parts/option.series-line.json
delete mode 100644 public/en/documents/option-parts/option.series-lines.json
delete mode 100644 public/en/documents/option-parts/option.series-map.json
delete mode 100644 public/en/documents/option-parts/option.series-parallel.json
delete mode 100644 public/en/documents/option-parts/option.series-pictorialBar.json
delete mode 100644 public/en/documents/option-parts/option.series-pie.json
delete mode 100644 public/en/documents/option-parts/option.series-radar.json
delete mode 100644 public/en/documents/option-parts/option.series-sankey.json
delete mode 100644 public/en/documents/option-parts/option.series-scatter.json
delete mode 100644 public/en/documents/option-parts/option.series-sunburst.json
delete mode 100644 public/en/documents/option-parts/option.series-themeRiver.json
delete mode 100644 public/en/documents/option-parts/option.series-tree.json
delete mode 100644 public/en/documents/option-parts/option.series-treemap.json
delete mode 100644 public/en/documents/option-parts/option.singleAxis.json
delete mode 100644 public/en/documents/option-parts/option.textStyle.json
delete mode 100644 public/en/documents/option-parts/option.timeline.json
delete mode 100644 public/en/documents/option-parts/option.title.json
delete mode 100644 public/en/documents/option-parts/option.toolbox.json
delete mode 100644 public/en/documents/option-parts/option.tooltip.json
delete mode 100644 public/en/documents/option-parts/option.visualMap-continuous.json
delete mode 100644 public/en/documents/option-parts/option.visualMap-piecewise.json
delete mode 100644 public/en/documents/option-parts/option.xAxis.json
delete mode 100644 public/en/documents/option-parts/option.yAxis.json
delete mode 100644 public/en/documents/option.json
delete mode 100644 public/en/documents/tutorial-parts/tutorial-outline.json
delete mode 100644 public/en/documents/tutorial-parts/tutorial.json
delete mode 100644 public/en/documents/tutorial.json
delete mode 100644 public/examples.html
delete mode 100644 public/faq.html
delete mode 100644 public/feature.html
delete mode 100644 public/index.html
delete mode 100644 public/js/doc-bundle.js
delete mode 100644 public/maillist.html
delete mode 100644 public/option-gl.html
delete mode 100644 public/option.html
delete mode 100644 public/option3.html
delete mode 100644 public/spreadsheet.html
delete mode 100644 public/tutorial.html
delete mode 100644 public/zh/documents/api-parts/api-outline.json
delete mode 100644 public/zh/documents/api-parts/api.action.json
delete mode 100644 public/zh/documents/api-parts/api.echarts.json
delete mode 100644 public/zh/documents/api-parts/api.echartsInstance.json
delete mode 100644 public/zh/documents/api-parts/api.events.json
delete mode 100644 public/zh/documents/api-parts/api.json
delete mode 100644 public/zh/documents/api.json
delete mode 100644 public/zh/documents/asset/gl/img/alpha-beta.sketch
delete mode 100644 public/zh/documents/asset/gl/img/bar3D-bevel.png
delete mode 100644 public/zh/documents/asset/gl/img/bar3D-no-bevel.png
delete mode 100644 public/zh/documents/asset/gl/img/buildings-cold.jpg
delete mode 100644 public/zh/documents/asset/gl/img/buildings-warm.jpg
delete mode 100644 public/zh/documents/asset/gl/img/city-region-height.jpg
delete mode 100644 public/zh/documents/asset/gl/img/crispwinter.png
delete mode 100644 public/zh/documents/asset/gl/img/displacement-disable.png
delete mode 100644 public/zh/documents/asset/gl/img/displacement-enable.png
delete mode 100644 public/zh/documents/asset/gl/img/displacement-low.png
delete mode 100644 public/zh/documents/asset/gl/img/displacement-ultra.png
delete mode 100644 public/zh/documents/asset/gl/img/flowGL-line.jpg
delete mode 100644 public/zh/documents/asset/gl/img/flowGL-noss.jpg
delete mode 100644 public/zh/documents/asset/gl/img/flowGL-point.jpg
delete mode 100644 public/zh/documents/asset/gl/img/flowGL-ss.jpg
delete mode 100644 public/zh/documents/asset/gl/img/flowGL-wind.jpg
delete mode 100644 public/zh/documents/asset/gl/img/geo-bar3D.jpg
delete mode 100644 public/zh/documents/asset/gl/img/geo-border.png
delete mode 100644 public/zh/documents/asset/gl/img/geo-dof-large.png
delete mode 100644 public/zh/documents/asset/gl/img/geo-dof-small.png
delete mode 100644 public/zh/documents/asset/gl/img/geo-dof.png
delete mode 100644 public/zh/documents/asset/gl/img/geo-no-dof.png
delete mode 100644 public/zh/documents/asset/gl/img/geo-no-shadow.png
delete mode 100644 public/zh/documents/asset/gl/img/geo-no-ssao.png
delete mode 100644 public/zh/documents/asset/gl/img/geo-shadow-high.png
delete mode 100644 public/zh/documents/asset/gl/img/geo-shadow-low.png
delete mode 100644 public/zh/documents/asset/gl/img/geo-shadow.png
delete mode 100644 public/zh/documents/asset/gl/img/geo-size.png
delete mode 100644 public/zh/documents/asset/gl/img/geo-size.sketch
delete mode 100644 public/zh/documents/asset/gl/img/geo-ssao-large-radius.png
delete mode 100644 public/zh/documents/asset/gl/img/geo-ssao-small-radius.png
delete mode 100644 public/zh/documents/asset/gl/img/geo-ssao.png
delete mode 100644 public/zh/documents/asset/gl/img/globe-airline.png
delete mode 100644 public/zh/documents/asset/gl/img/globe-gloss.png
delete mode 100644 public/zh/documents/asset/gl/img/globe-metal.png
delete mode 100644 public/zh/documents/asset/gl/img/globe-non-metal.png
delete mode 100644 public/zh/documents/asset/gl/img/globe-posteffect-bloom.png
delete mode 100644 public/zh/documents/asset/gl/img/globe-posteffect-disable.png
delete mode 100644 public/zh/documents/asset/gl/img/globe-posteffect-enable.png
delete mode 100644 public/zh/documents/asset/gl/img/globe-rough.png
delete mode 100644 public/zh/documents/asset/gl/img/globe-shading-color.png
delete mode 100644 public/zh/documents/asset/gl/img/globe-shading-lambert.png
delete mode 100644 public/zh/documents/asset/gl/img/globe-shading-realistic.png
delete mode 100644 public/zh/documents/asset/gl/img/gpu-layout-perf.png
delete mode 100644 public/zh/documents/asset/gl/img/grid3D.png
delete mode 100644 public/zh/documents/asset/gl/img/grid3D.sketch
delete mode 100644 public/zh/documents/asset/gl/img/heightmap-disable.png
delete mode 100644 public/zh/documents/asset/gl/img/heightmap-enable.png
delete mode 100644 public/zh/documents/asset/gl/img/light-alpha-beta.png
delete mode 100644 public/zh/documents/asset/gl/img/line3D.png
delete mode 100644 public/zh/documents/asset/gl/img/lookup.png
delete mode 100644 public/zh/documents/asset/gl/img/parametric-surface.png
delete mode 100644 public/zh/documents/asset/gl/img/polygons3D-ny.jpg
delete mode 100644 public/zh/documents/asset/gl/img/roughness.png
delete mode 100644 public/zh/documents/asset/gl/img/scatter3D.png
delete mode 100644 public/zh/documents/asset/gl/img/surface-index.png
delete mode 100644 public/zh/documents/asset/gl/img/surface-index.sketch
delete mode 100644 public/zh/documents/asset/gl/img/surface-no-taa.png
delete mode 100644 public/zh/documents/asset/gl/img/surface-taa.png
delete mode 100644 public/zh/documents/asset/gl/img/view-alpha-beta.png
delete mode 100644 public/zh/documents/asset/img/aria-example.png
delete mode 100644 public/zh/documents/asset/img/axis-align-with-label.png
delete mode 100644 public/zh/documents/asset/img/custom-build-line.png
delete mode 100644 public/zh/documents/asset/img/custom-build-pie.png
delete mode 100644 public/zh/documents/asset/img/echarts-aria.jpg
delete mode 100644 public/zh/documents/asset/img/gl/bar3D-2d-data.png
delete mode 100644 public/zh/documents/asset/img/gl/bar3D.png
delete mode 100644 public/zh/documents/asset/img/gl/grid3D-basic.png
delete mode 100644 public/zh/documents/asset/img/gl/scatter3D-color.png
delete mode 100644 public/zh/documents/asset/img/gl/scatter3D-gaussian.png
delete mode 100644 public/zh/documents/asset/img/gl/scatter3D-life.png
delete mode 100644 public/zh/documents/asset/img/gl/scatter3D-life2.png
delete mode 100644 public/zh/documents/asset/img/gl/surface.png
delete mode 100644 public/zh/documents/asset/img/smooth-algorithm.png
delete mode 100644 public/zh/documents/asset/img/smooth-monotone-none.png
delete mode 100644 public/zh/documents/asset/img/smooth-monotone-x.png
delete mode 100644 public/zh/documents/asset/img/smooth-non-monotone-x.png
delete mode 100644 public/zh/documents/asset/img/smooth-old-problem.png
delete mode 100644 public/zh/documents/asset/img/smooth-old-vs-new.png
delete mode 100644 public/zh/documents/asset/img/treemap-border-gap.png
delete mode 100644 public/zh/documents/changelog.html
delete mode 100644 public/zh/documents/option-gl-parts/option-gl-outline.json
delete mode 100644 public/zh/documents/option-gl-parts/option-gl.geo3D.json
delete mode 100644 public/zh/documents/option-gl-parts/option-gl.globe.json
delete mode 100644 public/zh/documents/option-gl-parts/option-gl.grid3D.json
delete mode 100644 public/zh/documents/option-gl-parts/option-gl.json
delete mode 100644 public/zh/documents/option-gl-parts/option-gl.mapbox3D.json
delete mode 100644 public/zh/documents/option-gl-parts/option-gl.series-bar3D.json
delete mode 100644 public/zh/documents/option-gl-parts/option-gl.series-flowGL.json
delete mode 100644 public/zh/documents/option-gl-parts/option-gl.series-graphGL.json
delete mode 100644 public/zh/documents/option-gl-parts/option-gl.series-line3D.json
delete mode 100644 public/zh/documents/option-gl-parts/option-gl.series-lines3D.json
delete mode 100644 public/zh/documents/option-gl-parts/option-gl.series-map3D.json
delete mode 100644 public/zh/documents/option-gl-parts/option-gl.series-polygons3D.json
delete mode 100644 public/zh/documents/option-gl-parts/option-gl.series-scatter3D.json
delete mode 100644 public/zh/documents/option-gl-parts/option-gl.series-scatterGL.json
delete mode 100644 public/zh/documents/option-gl-parts/option-gl.series-surface.json
delete mode 100644 public/zh/documents/option-gl-parts/option-gl.xAxis3D.json
delete mode 100644 public/zh/documents/option-gl-parts/option-gl.yAxis3D.json
delete mode 100644 public/zh/documents/option-gl-parts/option-gl.zAxis3D.json
delete mode 100644 public/zh/documents/option-gl.json
delete mode 100644 public/zh/documents/option-parts/option-outline.json
delete mode 100644 public/zh/documents/option-parts/option.angleAxis.json
delete mode 100644 public/zh/documents/option-parts/option.aria.json
delete mode 100644 public/zh/documents/option-parts/option.axisPointer.json
delete mode 100644 public/zh/documents/option-parts/option.brush.json
delete mode 100644 public/zh/documents/option-parts/option.calendar.json
delete mode 100644 public/zh/documents/option-parts/option.dataZoom-inside.json
delete mode 100644 public/zh/documents/option-parts/option.dataZoom-slider.json
delete mode 100644 public/zh/documents/option-parts/option.dataset.json
delete mode 100644 public/zh/documents/option-parts/option.geo.json
delete mode 100644 public/zh/documents/option-parts/option.graphic.json
delete mode 100644 public/zh/documents/option-parts/option.grid.json
delete mode 100644 public/zh/documents/option-parts/option.json
delete mode 100644 public/zh/documents/option-parts/option.legend.json
delete mode 100644 public/zh/documents/option-parts/option.parallel.json
delete mode 100644 public/zh/documents/option-parts/option.parallelAxis.json
delete mode 100644 public/zh/documents/option-parts/option.polar.json
delete mode 100644 public/zh/documents/option-parts/option.radar.json
delete mode 100644 public/zh/documents/option-parts/option.radiusAxis.json
delete mode 100644 public/zh/documents/option-parts/option.series-bar.json
delete mode 100644 public/zh/documents/option-parts/option.series-boxplot.json
delete mode 100644 public/zh/documents/option-parts/option.series-candlestick.json
delete mode 100644 public/zh/documents/option-parts/option.series-custom.json
delete mode 100644 public/zh/documents/option-parts/option.series-effectScatter.json
delete mode 100644 public/zh/documents/option-parts/option.series-funnel.json
delete mode 100644 public/zh/documents/option-parts/option.series-gauge.json
delete mode 100644 public/zh/documents/option-parts/option.series-graph.json
delete mode 100644 public/zh/documents/option-parts/option.series-heatmap.json
delete mode 100644 public/zh/documents/option-parts/option.series-line.json
delete mode 100644 public/zh/documents/option-parts/option.series-lines.json
delete mode 100644 public/zh/documents/option-parts/option.series-map.json
delete mode 100644 public/zh/documents/option-parts/option.series-parallel.json
delete mode 100644 public/zh/documents/option-parts/option.series-pictorialBar.json
delete mode 100644 public/zh/documents/option-parts/option.series-pie.json
delete mode 100644 public/zh/documents/option-parts/option.series-radar.json
delete mode 100644 public/zh/documents/option-parts/option.series-sankey.json
delete mode 100644 public/zh/documents/option-parts/option.series-scatter.json
delete mode 100644 public/zh/documents/option-parts/option.series-sunburst.json
delete mode 100644 public/zh/documents/option-parts/option.series-themeRiver.json
delete mode 100644 public/zh/documents/option-parts/option.series-tree.json
delete mode 100644 public/zh/documents/option-parts/option.series-treemap.json
delete mode 100644 public/zh/documents/option-parts/option.singleAxis.json
delete mode 100644 public/zh/documents/option-parts/option.textStyle.json
delete mode 100644 public/zh/documents/option-parts/option.timeline.json
delete mode 100644 public/zh/documents/option-parts/option.title.json
delete mode 100644 public/zh/documents/option-parts/option.toolbox.json
delete mode 100644 public/zh/documents/option-parts/option.tooltip.json
delete mode 100644 public/zh/documents/option-parts/option.visualMap-continuous.json
delete mode 100644 public/zh/documents/option-parts/option.visualMap-piecewise.json
delete mode 100644 public/zh/documents/option-parts/option.xAxis.json
delete mode 100644 public/zh/documents/option-parts/option.yAxis.json
delete mode 100644 public/zh/documents/option.json
delete mode 100644 public/zh/documents/tutorial-parts/tutorial-outline.json
delete mode 100644 public/zh/documents/tutorial-parts/tutorial.json
delete mode 100644 public/zh/documents/tutorial.json
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[incubator-echarts-doc] 01/02: add minorTick, minorSplitLine in the doc. rename 线图 to 路径图，add clip in the candlestick
Posted by sh...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch release
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-doc.git
commit f5974b0a2eaec9b5f2ca4c8cb5b2c096e7de60c7
Author: pissang <bm...@gmail.com>
AuthorDate: Mon Dec 23 14:55:43 2019 +0800
add minorTick, minorSplitLine in the doc. rename 线图 to 路径图，add clip in the candlestick
---
en/option/component/axis-common.md | 77 +++++++++++++++++++++++++++++++++++---
en/option/partial/clip.md | 7 +++-
en/option/series/candlestick.md | 5 +++
zh/option/component/axis-common.md | 74 ++++++++++++++++++++++++++++++++++--
zh/option/component/geo-common.md | 2 +-
zh/option/partial/clip.md | 5 ++-
zh/option/series/candlestick.md | 5 +++
zh/option/series/lines.md | 6 +--
8 files changed, 165 insertions(+), 16 deletions(-)
diff --git a/en/option/component/axis-common.md b/en/option/component/axis-common.md
index 59afdfc..22b64d1 100644
--- a/en/option/component/axis-common.md
+++ b/en/option/component/axis-common.md
@@ -163,7 +163,13 @@ Set this to `true` so the axis labels face the `inside` direction.
The length of the axis tick.
##${prefix} lineStyle(Object)
-{{ use: partial-line-style(prefix='##' + ${prefix}, defaultColor="'#333'", defaultWidth=1, defaultType="'solid'", name="axisTick") }}
+{{ use: partial-line-style(
+ prefix='##' + ${prefix},
+ defaultColor="'#333'",
+ defaultWidth=1,
+ defaultType="'solid'",
+ name="axisTick"
+) }}
<!-- Overwrite color -->
###${prefix} color(Color)
@@ -171,11 +177,40 @@ Color of axis label is set to be [axisLine.lineStyle.color](~${componentType}.ax
+{{target: partial-axis-common-minor-tick}}
+
+#${prefix} minorTick(Object)
+Settings related minor ticks.
+
+Note: `minorTick` is not available in the `cateogry` type axis.
+
+##${prefix} show(boolean) = ${defaultShow|default(false)}
+If show minor ticks.
+
+##${prefix} splitNumber(number) = 5
+Number of interval splited by minor ticks.
+
+##${prefix} length(number) = 3
+Length of minor ticks lines。
+
+##${prefix} lineStyle(Object)
+
+{{ use: partial-line-style(
+ prefix='##' + ${prefix},
+ defaultWidth=1,
+ defaultType="'solid'",
+ name="minorTick"
+) }}
+<!-- Overwrite color -->
+###${prefix} color(Color)
+Style configuration of minor ticks lines [axisLine.lineStyle.color](~${componentType}.axisLine.lineStyle.color)。
+
+
{{target: partial-axis-common-split-line}}
#${prefix} splitLine(Object)
-SplitLine of axis in [grid](~grid) area.
+Split line of axis in [grid](~grid) area.
##${prefix} show(boolean) = ${defaultShow|default(true)}
@@ -188,10 +223,16 @@ Set this to `false` to prevent the splitLine from showing.
name="Axis splitLine",
componentType=${componentType}
) }}
-##${prefix} lineStyle(Object)
{{ /if }}
-{{ use: partial-line-style(prefix='##' + ${prefix}, defaultColor="'#333'", defaultWidth=1, defaultType="'solid'", name="splitLine") }}
+##${prefix} lineStyle(Object)
+{{ use: partial-line-style(
+ prefix='##' + ${prefix},
+ defaultColor="'#333'",
+ defaultWidth=1,
+ defaultType="'solid'",
+ name="splitLine"
+) }}
<!-- overwrite color -->
###${prefix} color(Array|string) = ['#ccc']
@@ -210,6 +251,22 @@ splitLine: {
```
+{{target: partial-axis-common-minor-split-line}}
+
+#${prefix} minorSplitLine(Object)
+Minor split lines of axis in the [grid](~grid) area。It will align to the [minorTick](~${componentType}.minorTick)
+
+##${prefix} show(boolean) = ${defaultShow|default(false)}
+If show minor split lines.
+
+##${prefix} lineStyle(Object)
+{{ use: partial-line-style(
+ prefix='##' + ${prefix},
+ defaultColor="'#eee'",
+ defaultWidth=1,
+ defaultType="'solid'",
+ name="minorSplitLine"
+) }}
@@ -406,6 +463,11 @@ Base of logarithm, which is valid only for numeric axes with [type](~${component
componentType=${componentType}
) }}
+{{ use: partial-axis-common-minor-tick(
+ prefix=${prefix},
+ componentType=${componentType}
+) }}
+
{{ use: partial-axis-common-axis-label(
prefix=${prefix},
componentType=${componentType}
@@ -418,6 +480,11 @@ Base of logarithm, which is valid only for numeric axes with [type](~${component
componentType=${componentType}
) }}
+{{ use: partial-axis-common-minor-split-line(
+ prefix=${prefix},
+ componentType=${componentType}
+) }}
+
{{ use: partial-axis-common-split-area(
prefix=${prefix},
componentType=${componentType}
@@ -488,7 +555,7 @@ axisPointer settings on the axis.
-{ target: partial-axis-interval }}
+{{ target: partial-axis-interval }}
Interval of ${name}, which is available in category axis. {{ if: !${isAxisLabel} }} is set to be the same as [axisLabel.interval](~${componentType}.axisLabel.interval) by default.{{ /if }}
It uses a strategy that labels do not overlap by default.
diff --git a/en/option/partial/clip.md b/en/option/partial/clip.md
index 47ef368..cdacd71 100644
--- a/en/option/partial/clip.md
+++ b/en/option/partial/clip.md
@@ -2,14 +2,17 @@
#${prefix|default('#')} clip(boolean) = ${defaultClip|default(true)}
-{{ use: partial-version(version='4.4.0') }}
+{{ use: partial-version(
+ version=${version|default("4.4.0")}
+) }}
If clip the overflow on the coordinate system. Clip results varies between series:
-+ Scatter：Ignore the symbols exceeds the coordinate system. Not clip the graphics.
++ Scatter：Ignore the symbols exceeds the coordinate system. Not clip the elements.
+ Bar：Clip all the overflowed. With bar width kept.
+ Line：Clip the overflowed line.
+ Lines: Clip all the overflowed.
++ Candlestick: Ignore the elements exceeds the coordinate system.
+ Custom: Clip all the olverflowed.
All these series have default value `true` except custom series. Set it to `false` if you don't want to clip.
\ No newline at end of file
diff --git a/en/option/series/candlestick.md b/en/option/series/candlestick.md
index 9794e38..40dd045 100644
--- a/en/option/series/candlestick.md
+++ b/en/option/series/candlestick.md
@@ -204,6 +204,11 @@ Emphasis style of a candle box.
hasType=true
)}}
+{{use: partial-clip(
+ prefix="#",
+ version="4.5.0"
+) }}
+
{{use:partial-z-zlevel(
prefix="#",
componentName="candlestick"
diff --git a/zh/option/component/axis-common.md b/zh/option/component/axis-common.md
index d10e203..6871bad 100644
--- a/zh/option/component/axis-common.md
+++ b/zh/option/component/axis-common.md
@@ -144,14 +144,50 @@ textStyle: {
##${prefix} length(number) = 5
坐标轴刻度的长度。
+
##${prefix} lineStyle(Object)
-{{ use: partial-line-style(prefix='##' + ${prefix}, defaultColor="'#333'", defaultWidth=1, defaultType="'solid'", name="坐标轴刻度") }}
+刻度线的样式设置。
+
+{{ use: partial-line-style(
+ prefix='##' + ${prefix},
+ defaultWidth=1,
+ defaultType="'solid'",
+ name="坐标轴刻度"
+) }}
<!-- Overwrite color -->
###${prefix} color(Color)
-刻度线的颜色，默认取 [axisLine.lineStyle.color](~${componentType}.axisLine.lineStyle.color)。
+刻度线的颜色，默认取 [axisTick.lineStyle.color](~${componentType}.axisTick.lineStyle.color)。
+
+{{target: partial-axis-common-minor-tick}}
+
+#${prefix} minorTick(Object)
+坐标轴次刻度线相关设置。
+
+注意：次刻度线无法在类目轴（[type](~${componentType}.type): `'category'`）中使用。
+
+##${prefix} show(boolean) = ${defaultShow|default(false)}
+是否显示次刻度线。
+
+##${prefix} splitNumber(number) = 5
+次刻度线分割数，默认会分割成 5 段
+
+##${prefix} length(number) = 3
+次刻度线的长度。
+
+##${prefix} lineStyle(Object)
+
+{{ use: partial-line-style(
+ prefix='##' + ${prefix},
+ defaultWidth=1,
+ defaultType="'solid'",
+ name="次刻度线"
+) }}
+<!-- Overwrite color -->
+###${prefix} color(Color)
+刻度线的颜色，默认取 [axisLine.lineStyle.color](~${componentType}.axisLine.lineStyle.color)。
@@ -169,9 +205,15 @@ textStyle: {
componentType=${componentType}
) }}
{{ /if }}
-##${prefix} lineStyle(Object)
-{{ use: partial-line-style(prefix='##' + ${prefix}, defaultColor="'#333'", defaultWidth=1, defaultType="'solid'", name="分隔线") }}
+##${prefix} lineStyle(Object)
+{{ use: partial-line-style(
+ prefix='##' + ${prefix},
+ defaultColor="'#333'",
+ defaultWidth=1,
+ defaultType="'solid'",
+ name="分隔线"
+) }}
<!-- overwrite color -->
###${prefix} color(Array|string) = ['#ccc']
@@ -189,8 +231,22 @@ splitLine: {
}
```
+{{target: partial-axis-common-minor-split-line}}
+#${prefix} minorSplitLine(Object)
+坐标轴在 [grid](~grid) 区域中的次分隔线。次分割线会对齐次刻度线 [minorTick](~${componentType}.minorTick)
+##${prefix} show(boolean) = ${defaultShow|default(false)}
+是否显示次分隔线。默认不显示。
+
+
+{{ use: partial-line-style(
+ prefix='##' + ${prefix},
+ defaultColor="'#eee'",
+ defaultWidth=1,
+ defaultType="'solid'",
+ name="次分隔线"
+) }}
{{target: partial-axis-common-split-area}}
@@ -391,6 +447,11 @@ max: function (value) {
componentType=${componentType}
) }}
+{{ use: partial-axis-common-minor-tick(
+ prefix=${prefix},
+ componentType=${componentType}
+) }}
+
{{ use: partial-axis-common-axis-label(
prefix=${prefix},
componentType=${componentType}
@@ -403,6 +464,11 @@ max: function (value) {
componentType=${componentType}
) }}
+{{ use: partial-axis-common-minor-split-line(
+ prefix=${prefix},
+ componentType=${componentType}
+) }}
+
{{ use: partial-axis-common-split-area(
prefix=${prefix},
componentType=${componentType}
diff --git a/zh/option/component/geo-common.md b/zh/option/component/geo-common.md
index 4a63031..599af4a 100644
--- a/zh/option/component/geo-common.md
+++ b/zh/option/component/geo-common.md
@@ -89,7 +89,7 @@ boundingCoords: [
}
```
-## selectedMode(boolean|string) = false
+##${prefix} selectedMode(boolean|string) = false
选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选`'single'`表示单选，或者`'multiple'`表示多选。
diff --git a/zh/option/partial/clip.md b/zh/option/partial/clip.md
index 98245af..4ade4e9 100644
--- a/zh/option/partial/clip.md
+++ b/zh/option/partial/clip.md
@@ -2,7 +2,9 @@
#${prefix|default('#')} clip(boolean) = ${defaultClip|default(true)}
-{{ use: partial-version(version='4.4.0') }}
+{{ use: partial-version(
+ version=${version|default("4.4.0")}
+) }}
是否裁剪超出坐标系部分的图形，具体裁剪效果根据系列决定：
@@ -10,6 +12,7 @@
+ 柱状图：裁掉所有超出坐标系的部分，但是依然保留柱子的宽度
+ 折线图：裁掉所有超出坐标系的折线部分，拐点图形的逻辑按照散点图处理
+ 路径图：裁掉所有超出坐标系的部分
++ K 线图：忽略整体都超出坐标系的图形，但是不裁剪单个图形
+ 自定义系列：裁掉所有超出坐标系的部分
除了自定义系列，其它系列的默认值都为 true，及开启裁剪，如果你觉得不想要裁剪的话，可以设置成 false 关闭。
\ No newline at end of file
diff --git a/zh/option/series/candlestick.md b/zh/option/series/candlestick.md
index e79ccae..2f6915f 100644
--- a/zh/option/series/candlestick.md
+++ b/zh/option/series/candlestick.md
@@ -201,6 +201,11 @@ K 线图的高亮图形样式。
hasType=true
)}}
+{{use: partial-clip(
+ prefix="#",
+ version="4.5.0"
+) }}
+
{{use:partial-z-zlevel(
prefix="#",
componentName="K线图"
diff --git a/zh/option/series/lines.md b/zh/option/series/lines.md
index 848184c..4f899ef 100644
--- a/zh/option/series/lines.md
+++ b/zh/option/series/lines.md
@@ -3,7 +3,7 @@
# series.lines(Object)
-**线图**
+**路径图**
用于带有起点和终点信息的线数据的绘制，主要用于地图上的航线，路线的可视化。
@@ -69,7 +69,7 @@ ECharts 2.x 里会用地图上的 `markLine` 去绘制迁徙效果，在 ECharts
是否循环显示特效。
## large(boolean) = false
-是否启用大规模线图的优化，在数据图形特别多的时候（>=5k）可以开启。
+是否启用大规模路径图的优化，在数据图形特别多的时候（>=5k）可以开启。
开启后配合 [largeThreshold](~series-lines.largeThreshold) 在数据量大于指定阈值的时候对绘制进行优化。
@@ -191,7 +191,7 @@ ECharts 2.x 里会用地图上的 `markLine` 去绘制迁徙效果，在 ECharts
{{use:partial-z-zlevel(
prefix="#",
- componentName="线图"
+ componentName="路径图"
) }}
{{ use:partial-silent(
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[incubator-echarts-doc] 02/02: Remove auto generated files.
Posted by sh...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch release
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-doc.git
commit dbaf86de7ad5ca7311aea229678e291f4cd536fd
Author: pissang <bm...@gmail.com>
AuthorDate: Mon Dec 23 15:01:03 2019 +0800
Remove auto generated files.
---
.gitignore | 15 +-
public/404.html | 6 -
public/about.html | 6 -
public/api.html | 6 -
public/builder.html | 6 -
public/builder3.html | 6 -
public/changelog.html | 6 -
public/cheat-sheet.html | 6 -
public/coding-standard.html | 6 -
public/committer.html | 6 -
public/css/doc-bundle.css | 1004 ------------
public/css/element-icons.ttf | Bin 55956 -> 0 bytes
public/css/element-icons.woff | Bin 28200 -> 0 bytes
public/demo.html | 6 -
public/download-extension.html | 6 -
public/download-map.html | 6 -
public/download-theme.html | 6 -
public/download.html | 6 -
public/download3.html | 6 -
public/en/documents/api-parts/api-outline.json | 1 -
public/en/documents/api-parts/api.action.json | 36 -
public/en/documents/api-parts/api.echarts.json | 16 -
.../documents/api-parts/api.echartsInstance.json | 23 -
public/en/documents/api-parts/api.events.json | 28 -
public/en/documents/api-parts/api.json | 6 -
public/en/documents/api.json | 1 -
public/en/documents/asset/gl/img/alpha-beta.sketch | Bin 65536 -> 0 bytes
public/en/documents/asset/gl/img/bar3D-bevel.png | Bin 936101 -> 0 bytes
.../en/documents/asset/gl/img/bar3D-no-bevel.png | Bin 653448 -> 0 bytes
.../en/documents/asset/gl/img/buildings-cold.jpg | Bin 244509 -> 0 bytes
.../en/documents/asset/gl/img/buildings-warm.jpg | Bin 271468 -> 0 bytes
.../documents/asset/gl/img/city-region-height.jpg | Bin 115703 -> 0 bytes
public/en/documents/asset/gl/img/crispwinter.png | Bin 134164 -> 0 bytes
.../asset/gl/img/displacement-disable.png | Bin 444676 -> 0 bytes
.../documents/asset/gl/img/displacement-enable.png | Bin 469684 -> 0 bytes
.../en/documents/asset/gl/img/displacement-low.png | Bin 393852 -> 0 bytes
.../documents/asset/gl/img/displacement-ultra.png | Bin 752937 -> 0 bytes
public/en/documents/asset/gl/img/flowGL-line.jpg | Bin 477721 -> 0 bytes
public/en/documents/asset/gl/img/flowGL-noss.jpg | Bin 468782 -> 0 bytes
public/en/documents/asset/gl/img/flowGL-point.jpg | Bin 481332 -> 0 bytes
public/en/documents/asset/gl/img/flowGL-ss.jpg | Bin 491893 -> 0 bytes
public/en/documents/asset/gl/img/flowGL-wind.jpg | Bin 309476 -> 0 bytes
public/en/documents/asset/gl/img/geo-bar3D.jpg | Bin 144774 -> 0 bytes
public/en/documents/asset/gl/img/geo-border.png | Bin 120977 -> 0 bytes
public/en/documents/asset/gl/img/geo-dof-large.png | Bin 251435 -> 0 bytes
public/en/documents/asset/gl/img/geo-dof-small.png | Bin 242725 -> 0 bytes
public/en/documents/asset/gl/img/geo-dof.png | Bin 280814 -> 0 bytes
public/en/documents/asset/gl/img/geo-no-dof.png | Bin 313830 -> 0 bytes
public/en/documents/asset/gl/img/geo-no-shadow.png | Bin 348841 -> 0 bytes
public/en/documents/asset/gl/img/geo-no-ssao.png | Bin 795777 -> 0 bytes
.../en/documents/asset/gl/img/geo-shadow-high.png | Bin 456090 -> 0 bytes
.../en/documents/asset/gl/img/geo-shadow-low.png | Bin 462952 -> 0 bytes
public/en/documents/asset/gl/img/geo-shadow.png | Bin 417158 -> 0 bytes
public/en/documents/asset/gl/img/geo-size.png | Bin 609536 -> 0 bytes
public/en/documents/asset/gl/img/geo-size.sketch | Bin 1452208 -> 0 bytes
.../asset/gl/img/geo-ssao-large-radius.png | Bin 777267 -> 0 bytes
.../asset/gl/img/geo-ssao-small-radius.png | Bin 784519 -> 0 bytes
public/en/documents/asset/gl/img/geo-ssao.png | Bin 798212 -> 0 bytes
public/en/documents/asset/gl/img/globe-airline.png | Bin 705346 -> 0 bytes
public/en/documents/asset/gl/img/globe-gloss.png | Bin 658718 -> 0 bytes
public/en/documents/asset/gl/img/globe-metal.png | Bin 435143 -> 0 bytes
.../en/documents/asset/gl/img/globe-non-metal.png | Bin 444160 -> 0 bytes
.../asset/gl/img/globe-posteffect-bloom.png | Bin 124521 -> 0 bytes
.../asset/gl/img/globe-posteffect-disable.png | Bin 614586 -> 0 bytes
.../asset/gl/img/globe-posteffect-enable.png | Bin 569860 -> 0 bytes
public/en/documents/asset/gl/img/globe-rough.png | Bin 611425 -> 0 bytes
.../documents/asset/gl/img/globe-shading-color.png | Bin 214590 -> 0 bytes
.../asset/gl/img/globe-shading-lambert.png | Bin 372631 -> 0 bytes
.../asset/gl/img/globe-shading-realistic.png | Bin 513755 -> 0 bytes
.../en/documents/asset/gl/img/gpu-layout-perf.png | Bin 19249 -> 0 bytes
public/en/documents/asset/gl/img/grid3D.png | Bin 83657 -> 0 bytes
public/en/documents/asset/gl/img/grid3D.sketch | Bin 122880 -> 0 bytes
.../documents/asset/gl/img/heightmap-disable.png | Bin 42600 -> 0 bytes
.../en/documents/asset/gl/img/heightmap-enable.png | Bin 97918 -> 0 bytes
.../en/documents/asset/gl/img/light-alpha-beta.png | Bin 10156 -> 0 bytes
public/en/documents/asset/gl/img/line3D.png | Bin 403986 -> 0 bytes
public/en/documents/asset/gl/img/lookup.png | Bin 2095 -> 0 bytes
.../documents/asset/gl/img/parametric-surface.png | Bin 619802 -> 0 bytes
public/en/documents/asset/gl/img/polygons3D-ny.jpg | Bin 541314 -> 0 bytes
public/en/documents/asset/gl/img/roughness.png | Bin 204762 -> 0 bytes
public/en/documents/asset/gl/img/scatter3D.png | Bin 771845 -> 0 bytes
public/en/documents/asset/gl/img/surface-index.png | Bin 121825 -> 0 bytes
.../en/documents/asset/gl/img/surface-index.sketch | Bin 240059 -> 0 bytes
.../en/documents/asset/gl/img/surface-no-taa.png | Bin 190861 -> 0 bytes
public/en/documents/asset/gl/img/surface-taa.png | Bin 227139 -> 0 bytes
.../en/documents/asset/gl/img/view-alpha-beta.png | Bin 9788 -> 0 bytes
public/en/documents/asset/img/aria-example.png | Bin 290782 -> 0 bytes
.../documents/asset/img/axis-align-with-label.png | Bin 7514 -> 0 bytes
.../en/documents/asset/img/custom-build-line.png | Bin 72720 -> 0 bytes
public/en/documents/asset/img/custom-build-pie.png | Bin 41231 -> 0 bytes
public/en/documents/asset/img/echarts-aria.jpg | Bin 143809 -> 0 bytes
public/en/documents/asset/img/gl/bar3D-2d-data.png | Bin 58130 -> 0 bytes
public/en/documents/asset/img/gl/bar3D.png | Bin 142020 -> 0 bytes
public/en/documents/asset/img/gl/grid3D-basic.png | Bin 30307 -> 0 bytes
.../en/documents/asset/img/gl/scatter3D-color.png | Bin 145129 -> 0 bytes
.../documents/asset/img/gl/scatter3D-gaussian.png | Bin 114828 -> 0 bytes
.../en/documents/asset/img/gl/scatter3D-life.png | Bin 90059 -> 0 bytes
.../en/documents/asset/img/gl/scatter3D-life2.png | Bin 167782 -> 0 bytes
public/en/documents/asset/img/gl/surface.png | Bin 189074 -> 0 bytes
public/en/documents/asset/img/smooth-algorithm.png | Bin 244496 -> 0 bytes
.../documents/asset/img/smooth-monotone-none.png | Bin 43625 -> 0 bytes
.../en/documents/asset/img/smooth-monotone-x.png | Bin 47594 -> 0 bytes
.../documents/asset/img/smooth-non-monotone-x.png | Bin 161468 -> 0 bytes
.../en/documents/asset/img/smooth-old-problem.png | Bin 145198 -> 0 bytes
.../en/documents/asset/img/smooth-old-vs-new.png | Bin 121268 -> 0 bytes
.../en/documents/asset/img/treemap-border-gap.png | Bin 92466 -> 0 bytes
public/en/documents/changelog.html | 1209 ---------------
public/en/documents/coding-standard.html | 567 -------
.../option-gl-parts/option-gl-outline.json | 1 -
.../documents/option-gl-parts/option-gl.geo3D.json | 172 ---
.../documents/option-gl-parts/option-gl.globe.json | 118 --
.../option-gl-parts/option-gl.grid3D.json | 134 --
public/en/documents/option-gl-parts/option-gl.json | 20 -
.../option-gl-parts/option-gl.mapbox3D.json | 69 -
.../option-gl-parts/option-gl.series-bar3D.json | 91 --
.../option-gl-parts/option-gl.series-flowGL.json | 14 -
.../option-gl-parts/option-gl.series-graphGL.json | 48 -
.../option-gl-parts/option-gl.series-line3D.json | 24 -
.../option-gl-parts/option-gl.series-lines3D.json | 29 -
.../option-gl-parts/option-gl.series-map3D.json | 173 ---
.../option-gl.series-polygons3D.json | 13 -
.../option-gl.series-scatter3D.json | 49 -
.../option-gl.series-scatterGL.json | 23 -
.../option-gl-parts/option-gl.series-surface.json | 66 -
.../option-gl-parts/option-gl.xAxis3D.json | 79 -
.../option-gl-parts/option-gl.yAxis3D.json | 79 -
.../option-gl-parts/option-gl.zAxis3D.json | 79 -
public/en/documents/option-gl.json | 1 -
.../en/documents/option-parts/option-outline.json | 1 -
.../documents/option-parts/option.angleAxis.json | 239 ---
public/en/documents/option-parts/option.aria.json | 29 -
.../documents/option-parts/option.axisPointer.json | 66 -
public/en/documents/option-parts/option.brush.json | 19 -
.../en/documents/option-parts/option.calendar.json | 205 ---
.../option-parts/option.dataZoom-inside.json | 25 -
.../option-parts/option.dataZoom-slider.json | 78 -
.../en/documents/option-parts/option.dataset.json | 6 -
public/en/documents/option-parts/option.geo.json | 300 ----
.../en/documents/option-parts/option.graphic.json | 414 -----
public/en/documents/option-parts/option.grid.json | 110 --
public/en/documents/option-parts/option.json | 65 -
.../en/documents/option-parts/option.legend.json | 177 ---
.../en/documents/option-parts/option.parallel.json | 226 ---
.../option-parts/option.parallelAxis.json | 220 ---
public/en/documents/option-parts/option.polar.json | 97 --
public/en/documents/option-parts/option.radar.json | 172 ---
.../documents/option-parts/option.radiusAxis.json | 295 ----
.../documents/option-parts/option.series-bar.json | 1187 --------------
.../option-parts/option.series-boxplot.json | 942 ------------
.../option-parts/option.series-candlestick.json | 957 ------------
.../option-parts/option.series-custom.json | 474 ------
.../option-parts/option.series-effectScatter.json | 1192 --------------
.../option-parts/option.series-funnel.json | 1178 --------------
.../option-parts/option.series-gauge.json | 1076 -------------
.../option-parts/option.series-graph.json | 1611 -------------------
.../option-parts/option.series-heatmap.json | 1126 --------------
.../documents/option-parts/option.series-line.json | 1214 ---------------
.../option-parts/option.series-lines.json | 1112 --------------
.../documents/option-parts/option.series-map.json | 1180 --------------
.../option-parts/option.series-parallel.json | 84 -
.../option-parts/option.series-pictorialBar.json | 1221 ---------------
.../documents/option-parts/option.series-pie.json | 1202 ---------------
.../option-parts/option.series-radar.json | 399 -----
.../option-parts/option.series-sankey.json | 397 -----
.../option-parts/option.series-scatter.json | 1195 --------------
.../option-parts/option.series-sunburst.json | 864 -----------
.../option-parts/option.series-themeRiver.json | 169 --
.../documents/option-parts/option.series-tree.json | 495 ------
.../option-parts/option.series-treemap.json | 966 ------------
.../documents/option-parts/option.singleAxis.json | 391 -----
.../documents/option-parts/option.textStyle.json | 16 -
.../en/documents/option-parts/option.timeline.json | 198 ---
public/en/documents/option-parts/option.title.json | 111 --
.../en/documents/option-parts/option.toolbox.json | 222 ---
.../en/documents/option-parts/option.tooltip.json | 100 --
.../option-parts/option.visualMap-continuous.json | 52 -
.../option-parts/option.visualMap-piecewise.json | 58 -
public/en/documents/option-parts/option.xAxis.json | 300 ----
public/en/documents/option-parts/option.yAxis.json | 300 ----
public/en/documents/option.json | 1 -
.../documents/tutorial-parts/tutorial-outline.json | 1 -
public/en/documents/tutorial-parts/tutorial.json | 19 -
public/en/documents/tutorial.json | 1 -
public/examples.html | 3 -
public/faq.html | 6 -
public/feature.html | 6 -
public/index.html | 6 -
public/js/doc-bundle.js | 20 -
public/maillist.html | 6 -
public/option-gl.html | 6 -
public/option.html | 6 -
public/option3.html | 6 -
public/spreadsheet.html | 6 -
public/tutorial.html | 6 -
public/zh/documents/api-parts/api-outline.json | 1 -
public/zh/documents/api-parts/api.action.json | 40 -
public/zh/documents/api-parts/api.echarts.json | 16 -
.../documents/api-parts/api.echartsInstance.json | 23 -
public/zh/documents/api-parts/api.events.json | 31 -
public/zh/documents/api-parts/api.json | 6 -
public/zh/documents/api.json | 1 -
public/zh/documents/asset/gl/img/alpha-beta.sketch | Bin 65536 -> 0 bytes
public/zh/documents/asset/gl/img/bar3D-bevel.png | Bin 936101 -> 0 bytes
.../zh/documents/asset/gl/img/bar3D-no-bevel.png | Bin 653448 -> 0 bytes
.../zh/documents/asset/gl/img/buildings-cold.jpg | Bin 244509 -> 0 bytes
.../zh/documents/asset/gl/img/buildings-warm.jpg | Bin 271468 -> 0 bytes
.../documents/asset/gl/img/city-region-height.jpg | Bin 115703 -> 0 bytes
public/zh/documents/asset/gl/img/crispwinter.png | Bin 134164 -> 0 bytes
.../asset/gl/img/displacement-disable.png | Bin 444676 -> 0 bytes
.../documents/asset/gl/img/displacement-enable.png | Bin 469684 -> 0 bytes
.../zh/documents/asset/gl/img/displacement-low.png | Bin 393852 -> 0 bytes
.../documents/asset/gl/img/displacement-ultra.png | Bin 752937 -> 0 bytes
public/zh/documents/asset/gl/img/flowGL-line.jpg | Bin 477721 -> 0 bytes
public/zh/documents/asset/gl/img/flowGL-noss.jpg | Bin 468782 -> 0 bytes
public/zh/documents/asset/gl/img/flowGL-point.jpg | Bin 481332 -> 0 bytes
public/zh/documents/asset/gl/img/flowGL-ss.jpg | Bin 491893 -> 0 bytes
public/zh/documents/asset/gl/img/flowGL-wind.jpg | Bin 309476 -> 0 bytes
public/zh/documents/asset/gl/img/geo-bar3D.jpg | Bin 144774 -> 0 bytes
public/zh/documents/asset/gl/img/geo-border.png | Bin 120977 -> 0 bytes
public/zh/documents/asset/gl/img/geo-dof-large.png | Bin 251435 -> 0 bytes
public/zh/documents/asset/gl/img/geo-dof-small.png | Bin 242725 -> 0 bytes
public/zh/documents/asset/gl/img/geo-dof.png | Bin 280814 -> 0 bytes
public/zh/documents/asset/gl/img/geo-no-dof.png | Bin 313830 -> 0 bytes
public/zh/documents/asset/gl/img/geo-no-shadow.png | Bin 348841 -> 0 bytes
public/zh/documents/asset/gl/img/geo-no-ssao.png | Bin 795777 -> 0 bytes
.../zh/documents/asset/gl/img/geo-shadow-high.png | Bin 456090 -> 0 bytes
.../zh/documents/asset/gl/img/geo-shadow-low.png | Bin 462952 -> 0 bytes
public/zh/documents/asset/gl/img/geo-shadow.png | Bin 417158 -> 0 bytes
public/zh/documents/asset/gl/img/geo-size.png | Bin 609536 -> 0 bytes
public/zh/documents/asset/gl/img/geo-size.sketch | Bin 1452208 -> 0 bytes
.../asset/gl/img/geo-ssao-large-radius.png | Bin 777267 -> 0 bytes
.../asset/gl/img/geo-ssao-small-radius.png | Bin 784519 -> 0 bytes
public/zh/documents/asset/gl/img/geo-ssao.png | Bin 798212 -> 0 bytes
public/zh/documents/asset/gl/img/globe-airline.png | Bin 705346 -> 0 bytes
public/zh/documents/asset/gl/img/globe-gloss.png | Bin 658718 -> 0 bytes
public/zh/documents/asset/gl/img/globe-metal.png | Bin 435143 -> 0 bytes
.../zh/documents/asset/gl/img/globe-non-metal.png | Bin 444160 -> 0 bytes
.../asset/gl/img/globe-posteffect-bloom.png | Bin 124521 -> 0 bytes
.../asset/gl/img/globe-posteffect-disable.png | Bin 614586 -> 0 bytes
.../asset/gl/img/globe-posteffect-enable.png | Bin 569860 -> 0 bytes
public/zh/documents/asset/gl/img/globe-rough.png | Bin 611425 -> 0 bytes
.../documents/asset/gl/img/globe-shading-color.png | Bin 214590 -> 0 bytes
.../asset/gl/img/globe-shading-lambert.png | Bin 372631 -> 0 bytes
.../asset/gl/img/globe-shading-realistic.png | Bin 513755 -> 0 bytes
.../zh/documents/asset/gl/img/gpu-layout-perf.png | Bin 19249 -> 0 bytes
public/zh/documents/asset/gl/img/grid3D.png | Bin 83657 -> 0 bytes
public/zh/documents/asset/gl/img/grid3D.sketch | Bin 122880 -> 0 bytes
.../documents/asset/gl/img/heightmap-disable.png | Bin 42600 -> 0 bytes
.../zh/documents/asset/gl/img/heightmap-enable.png | Bin 97918 -> 0 bytes
.../zh/documents/asset/gl/img/light-alpha-beta.png | Bin 10156 -> 0 bytes
public/zh/documents/asset/gl/img/line3D.png | Bin 403986 -> 0 bytes
public/zh/documents/asset/gl/img/lookup.png | Bin 2095 -> 0 bytes
.../documents/asset/gl/img/parametric-surface.png | Bin 619802 -> 0 bytes
public/zh/documents/asset/gl/img/polygons3D-ny.jpg | Bin 541314 -> 0 bytes
public/zh/documents/asset/gl/img/roughness.png | Bin 204762 -> 0 bytes
public/zh/documents/asset/gl/img/scatter3D.png | Bin 771845 -> 0 bytes
public/zh/documents/asset/gl/img/surface-index.png | Bin 121825 -> 0 bytes
.../zh/documents/asset/gl/img/surface-index.sketch | Bin 240059 -> 0 bytes
.../zh/documents/asset/gl/img/surface-no-taa.png | Bin 190861 -> 0 bytes
public/zh/documents/asset/gl/img/surface-taa.png | Bin 227139 -> 0 bytes
.../zh/documents/asset/gl/img/view-alpha-beta.png | Bin 9788 -> 0 bytes
public/zh/documents/asset/img/aria-example.png | Bin 290782 -> 0 bytes
.../documents/asset/img/axis-align-with-label.png | Bin 7514 -> 0 bytes
.../zh/documents/asset/img/custom-build-line.png | Bin 72720 -> 0 bytes
public/zh/documents/asset/img/custom-build-pie.png | Bin 41231 -> 0 bytes
public/zh/documents/asset/img/echarts-aria.jpg | Bin 143809 -> 0 bytes
public/zh/documents/asset/img/gl/bar3D-2d-data.png | Bin 58130 -> 0 bytes
public/zh/documents/asset/img/gl/bar3D.png | Bin 142020 -> 0 bytes
public/zh/documents/asset/img/gl/grid3D-basic.png | Bin 30307 -> 0 bytes
.../zh/documents/asset/img/gl/scatter3D-color.png | Bin 145129 -> 0 bytes
.../documents/asset/img/gl/scatter3D-gaussian.png | Bin 114828 -> 0 bytes
.../zh/documents/asset/img/gl/scatter3D-life.png | Bin 90059 -> 0 bytes
.../zh/documents/asset/img/gl/scatter3D-life2.png | Bin 167782 -> 0 bytes
public/zh/documents/asset/img/gl/surface.png | Bin 189074 -> 0 bytes
public/zh/documents/asset/img/smooth-algorithm.png | Bin 244496 -> 0 bytes
.../documents/asset/img/smooth-monotone-none.png | Bin 43625 -> 0 bytes
.../zh/documents/asset/img/smooth-monotone-x.png | Bin 47594 -> 0 bytes
.../documents/asset/img/smooth-non-monotone-x.png | Bin 161468 -> 0 bytes
.../zh/documents/asset/img/smooth-old-problem.png | Bin 145198 -> 0 bytes
.../zh/documents/asset/img/smooth-old-vs-new.png | Bin 121268 -> 0 bytes
.../zh/documents/asset/img/treemap-border-gap.png | Bin 92466 -> 0 bytes
public/zh/documents/changelog.html | 1623 --------------------
.../option-gl-parts/option-gl-outline.json | 1 -
.../documents/option-gl-parts/option-gl.geo3D.json | 172 ---
.../documents/option-gl-parts/option-gl.globe.json | 118 --
.../option-gl-parts/option-gl.grid3D.json | 134 --
public/zh/documents/option-gl-parts/option-gl.json | 20 -
.../option-gl-parts/option-gl.mapbox3D.json | 69 -
.../option-gl-parts/option-gl.series-bar3D.json | 91 --
.../option-gl-parts/option-gl.series-flowGL.json | 14 -
.../option-gl-parts/option-gl.series-graphGL.json | 48 -
.../option-gl-parts/option-gl.series-line3D.json | 24 -
.../option-gl-parts/option-gl.series-lines3D.json | 29 -
.../option-gl-parts/option-gl.series-map3D.json | 173 ---
.../option-gl.series-polygons3D.json | 13 -
.../option-gl.series-scatter3D.json | 49 -
.../option-gl.series-scatterGL.json | 23 -
.../option-gl-parts/option-gl.series-surface.json | 66 -
.../option-gl-parts/option-gl.xAxis3D.json | 79 -
.../option-gl-parts/option-gl.yAxis3D.json | 79 -
.../option-gl-parts/option-gl.zAxis3D.json | 79 -
public/zh/documents/option-gl.json | 1 -
.../zh/documents/option-parts/option-outline.json | 1 -
.../documents/option-parts/option.angleAxis.json | 243 ---
public/zh/documents/option-parts/option.aria.json | 29 -
.../documents/option-parts/option.axisPointer.json | 66 -
public/zh/documents/option-parts/option.brush.json | 19 -
.../zh/documents/option-parts/option.calendar.json | 205 ---
.../option-parts/option.dataZoom-inside.json | 25 -
.../option-parts/option.dataZoom-slider.json | 78 -
.../zh/documents/option-parts/option.dataset.json | 6 -
public/zh/documents/option-parts/option.geo.json | 301 ----
.../zh/documents/option-parts/option.graphic.json | 414 -----
public/zh/documents/option-parts/option.grid.json | 110 --
public/zh/documents/option-parts/option.json | 67 -
.../zh/documents/option-parts/option.legend.json | 175 ---
.../zh/documents/option-parts/option.parallel.json | 228 ---
.../option-parts/option.parallelAxis.json | 222 ---
public/zh/documents/option-parts/option.polar.json | 97 --
public/zh/documents/option-parts/option.radar.json | 172 ---
.../documents/option-parts/option.radiusAxis.json | 299 ----
.../documents/option-parts/option.series-bar.json | 1197 ---------------
.../option-parts/option.series-boxplot.json | 949 ------------
.../option-parts/option.series-candlestick.json | 960 ------------
.../option-parts/option.series-custom.json | 474 ------
.../option-parts/option.series-effectScatter.json | 1198 ---------------
.../option-parts/option.series-funnel.json | 1183 --------------
.../option-parts/option.series-gauge.json | 1083 -------------
.../option-parts/option.series-graph.json | 1613 -------------------
.../option-parts/option.series-heatmap.json | 1129 --------------
.../documents/option-parts/option.series-line.json | 1220 ---------------
.../option-parts/option.series-lines.json | 1116 --------------
.../documents/option-parts/option.series-map.json | 1185 --------------
.../option-parts/option.series-parallel.json | 61 -
.../option-parts/option.series-pictorialBar.json | 1224 ---------------
.../documents/option-parts/option.series-pie.json | 1203 ---------------
.../option-parts/option.series-radar.json | 403 -----
.../option-parts/option.series-sankey.json | 399 -----
.../option-parts/option.series-scatter.json | 1200 ---------------
.../option-parts/option.series-sunburst.json | 864 -----------
.../option-parts/option.series-themeRiver.json | 170 --
.../documents/option-parts/option.series-tree.json | 498 ------
.../option-parts/option.series-treemap.json | 969 ------------
.../documents/option-parts/option.singleAxis.json | 395 -----
.../documents/option-parts/option.textStyle.json | 16 -
.../zh/documents/option-parts/option.timeline.json | 196 ---
public/zh/documents/option-parts/option.title.json | 111 --
.../zh/documents/option-parts/option.toolbox.json | 222 ---
.../zh/documents/option-parts/option.tooltip.json | 100 --
.../option-parts/option.visualMap-continuous.json | 52 -
.../option-parts/option.visualMap-piecewise.json | 58 -
public/zh/documents/option-parts/option.xAxis.json | 304 ----
public/zh/documents/option-parts/option.yAxis.json | 304 ----
public/zh/documents/option.json | 1 -
.../documents/tutorial-parts/tutorial-outline.json | 1 -
public/zh/documents/tutorial-parts/tutorial.json | 23 -
public/zh/documents/tutorial.json | 1 -
357 files changed, 8 insertions(+), 56964 deletions(-)
diff --git a/.gitignore b/.gitignore
index 3bfcccc..21b2d1f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -171,10 +171,11 @@ pip-log.txt
.DS_Store
node_modules
-
-
-public/js/doc-bundle.js.map
-public/css/doc-bundle.css.map
-
-
-slides/webgl
\ No newline at end of file
+slides/webgl
+
+# Generated distributions
+public/js
+public/css
+public/zh/documents
+public/en/documents
+public/*.html
diff --git a/public/404.html b/public/404.html
deleted file mode 100644
index 94d5366..0000000
--- a/public/404.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><script type="text/javascript">var hash = (location.hash || '').replace('#', '');
-var search = (location.search || '').replace('?', '');
-var lang = navigator.language || navigator.userLanguage;
-lang = lang.indexOf('zh') > -1 ? 'zh' : 'en';
-location.href = 'https://echarts.apache.org/' + lang + '/404.html'
- + (search ? '?' + search : '') + (hash ? '#' + hash : '');</script></head></html>
\ No newline at end of file
diff --git a/public/about.html b/public/about.html
deleted file mode 100644
index 1881511..0000000
--- a/public/about.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><script type="text/javascript">var hash = (location.hash || '').replace('#', '');
-var search = (location.search || '').replace('?', '');
-var lang = navigator.language || navigator.userLanguage;
-lang = lang.indexOf('zh') > -1 ? 'zh' : 'en';
-location.href = 'https://echarts.apache.org/' + lang + '/committers.html'
- + (search ? '?' + search : '') + (hash ? '#' + hash : '');</script></head></html>
\ No newline at end of file
diff --git a/public/api.html b/public/api.html
deleted file mode 100644
index defd670..0000000
--- a/public/api.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><script type="text/javascript">var hash = (location.hash || '').replace('#', '');
-var search = (location.search || '').replace('?', '');
-var lang = navigator.language || navigator.userLanguage;
-lang = lang.indexOf('zh') > -1 ? 'zh' : 'en';
-location.href = 'https://echarts.apache.org/' + lang + '/api.html'
- + (search ? '?' + search : '') + (hash ? '#' + hash : '');</script></head></html>
\ No newline at end of file
diff --git a/public/builder.html b/public/builder.html
deleted file mode 100644
index 3f5c648..0000000
--- a/public/builder.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><script type="text/javascript">var hash = (location.hash || '').replace('#', '');
-var search = (location.search || '').replace('?', '');
-var lang = navigator.language || navigator.userLanguage;
-lang = lang.indexOf('zh') > -1 ? 'zh' : 'en';
-location.href = 'https://echarts.apache.org/' + lang + '/builder.html'
- + (search ? '?' + search : '') + (hash ? '#' + hash : '');</script></head></html>
\ No newline at end of file
diff --git a/public/builder3.html b/public/builder3.html
deleted file mode 100644
index ecee9f1..0000000
--- a/public/builder3.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><script type="text/javascript">var hash = (location.hash || '').replace('#', '');
-var search = (location.search || '').replace('?', '');
-var lang = navigator.language || navigator.userLanguage;
-lang = lang.indexOf('zh') > -1 ? 'zh' : 'en';
-location.href = 'https://echarts.apache.org/' + lang + '/builder3.html'
- + (search ? '?' + search : '') + (hash ? '#' + hash : '');</script></head></html>
\ No newline at end of file
diff --git a/public/changelog.html b/public/changelog.html
deleted file mode 100644
index a1f22cc..0000000
--- a/public/changelog.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><script type="text/javascript">var hash = (location.hash || '').replace('#', '');
-var search = (location.search || '').replace('?', '');
-var lang = navigator.language || navigator.userLanguage;
-lang = lang.indexOf('zh') > -1 ? 'zh' : 'en';
-location.href = 'https://echarts.apache.org/' + lang + '/changelog.html'
- + (search ? '?' + search : '') + (hash ? '#' + hash : '');</script></head></html>
\ No newline at end of file
diff --git a/public/cheat-sheet.html b/public/cheat-sheet.html
deleted file mode 100644
index d3ba853..0000000
--- a/public/cheat-sheet.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><script type="text/javascript">var hash = (location.hash || '').replace('#', '');
-var search = (location.search || '').replace('?', '');
-var lang = navigator.language || navigator.userLanguage;
-lang = lang.indexOf('zh') > -1 ? 'zh' : 'en';
-location.href = 'https://echarts.apache.org/' + lang + '/cheat-sheet.html'
- + (search ? '?' + search : '') + (hash ? '#' + hash : '');</script></head></html>
\ No newline at end of file
diff --git a/public/coding-standard.html b/public/coding-standard.html
deleted file mode 100644
index c9c5db5..0000000
--- a/public/coding-standard.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><script type="text/javascript">var hash = (location.hash || '').replace('#', '');
-var search = (location.search || '').replace('?', '');
-var lang = navigator.language || navigator.userLanguage;
-lang = lang.indexOf('zh') > -1 ? 'zh' : 'en';
-location.href = 'https://echarts.apache.org/' + lang + '/coding-standard.html'
- + (search ? '?' + search : '') + (hash ? '#' + hash : '');</script></head></html>
\ No newline at end of file
diff --git a/public/committer.html b/public/committer.html
deleted file mode 100644
index 3deb8ef..0000000
--- a/public/committer.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><script type="text/javascript">var hash = (location.hash || '').replace('#', '');
-var search = (location.search || '').replace('?', '');
-var lang = navigator.language || navigator.userLanguage;
-lang = lang.indexOf('zh') > -1 ? 'zh' : 'en';
-location.href = 'https://echarts.apache.org/' + lang + '/committer.html'
- + (search ? '?' + search : '') + (hash ? '#' + hash : '');</script></head></html>
\ No newline at end of file
diff --git a/public/css/doc-bundle.css b/public/css/doc-bundle.css
deleted file mode 100644
index 7d8c080..0000000
--- a/public/css/doc-bundle.css
+++ /dev/null
@@ -1,1004 +0,0 @@
-@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 [...]
-.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-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)}. [...]
-.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-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-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 [...]
-.doc-nav h3 {
- margin: 0;
- padding: 5px;
- font-family: Monaco, 'Source Code Pro', monospace;
- font-size: 14px;
-}
-.doc-nav .toolbox {
- position: absolute;
- right: 10px;
- top: 5px;
-}
-.doc-nav .toolbox .item {
- font-size: 14px;
- cursor: pointer;
- color: #337ab7;
-}
-.doc-nav .toolbox .item:hover {
- text-decoration: underline;
-}
-.doc-nav .el-tree {
- padding-left: 6px;
-}
-.doc-nav .el-tree-node {
- color: #333;
-}
-.doc-nav .el-tree-node .el-tree-node__content {
- height: 24px;
-}
-.doc-nav .el-tree-node.is-current > .el-tree-node__content {
- background-color: #B03A5B;
- color: #fff;
-}
-.doc-nav .el-tree-node.is-current > .el-tree-node__content .default-value {
- color: #eee;
-}
-.doc-nav .doc-nav-item {
- font-family: Monaco,'Source Code Pro', monospace;
- font-size: 13px;
- white-space: nowrap;
-}
-.doc-nav .doc-nav-item .default-value {
- color: #999;
-}
-.ec-doc-tutorial .doc-nav .el-tree, .ec-doc-api .doc-nav .el-tree {
- padding-left: 0;
- margin-top: 10px;
-}
-.ec-doc-tutorial .doc-nav .el-tree-node .el-tree-node__content {
- height: 32px;
-}
-.ec-doc-tutorial .doc-nav .el-tree-node .doc-nav-item {
- margin-left: -10px;
- font-family: "Source Sans Pro", "Helvetica Neue", "Segoe UI", Arial, "PingFang SC", STHeiti, "Microsoft Yahei", sans-serif;
-}
-
-.properties-list-panel h5 {
- font-weight: normal;
- color: #999;
- font-size: 30px;
- margin: 5px 0;
- font-size: 14px;
-}
-.properties-list-panel .properties-list a {
- font-family: Monaco,'Source Code Pro', STHeiti, "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif;
- font-size: 12px;
- margin-right: 2px;
-}
-.property-popup-desc {
- max-height: 300px;
- max-width: 500px;
- overflow-y: auto;
- overflow-x: auto;
-}
-.property-popup-desc .hljs {
- background: transparent;
- padding: 0;
-}
-.property-popup-desc hr {
- border: none;
- border-bottom: 1px solid #eee;
- width: 80%;
-}
-.property-popup-desc blockquote {
- font-size: 12px;
- color: #999;
- background-color: #fdfdfd;
- border-left: 2px solid #ddd;
- margin-left: 0px;
- padding: 5px 10px;
-}
-.property-popup-desc blockquote p {
- margin: 0;
-}
-.property-popup-desc blockquote pre {
- font-size: 12px;
-}
-.property-popup-desc iframe {
- border: 1px solid #ccc;
- display: block;
- margin-top: 5px;
- max-width: 100%;
-}
-.property-popup-desc img {
- max-width: 100%;
-}
-.property-popup-desc p {
- line-height: 1.7em;
- margin: 12px 0 0 0;
- font-size: 14px;
-}
-.property-popup-desc pre {
- margin: 5px 0;
- border-radius: 5px;
- background-color: #f5f7fa;
- border: none;
- padding: 10px;
- font-size: 13px;
-}
-.property-popup-desc .codespan {
- padding: 2px 4px;
- font-size: 14px;
- color: #293C55;
- background-color: #f9f2f4;
- border-radius: 4px;
-}
-.property-popup-desc code *, .property-popup-desc code {
- font-family: Monaco, 'Source Code Pro', 'Courier New', monospace;
-}
-.property-popup-desc ol {
- margin-left: 20px;
-}
-.property-popup-desc ul li {
- list-style: disc;
- margin: 10px 20px;
- font-size: 14px;
-}
-.property-popup-desc ol li {
- list-style: decimal;
-}
-.property-popup-desc a {
- font-family: Monaco,'Source Code Pro', STHeiti, "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif;
-}
-.property-popup-desc pre {
- font-size: 12px;
-}
-.property-popup-desc p {
- font-size: 12px;
-}
-.property-popup-desc ul {
- margin: 0;
- padding: 0;
-}
-.property-popup-desc ul li {
- font-size: 12px;
- margin: 5px 20px;
- list-style: disc;
-}
-.property-popup-desc pre {
- padding: 5px;
-}
-.property-popup-desc .codespan {
- font-size: 12px;
-}
-
-.doc-content-item-card {
- margin-top: 30px;
- margin-left: 15px;
- border-top: 1px solid #ccc;
- position: relative;
- padding: 15px 0;
-}
-.doc-content-item-card .hierarchy-line {
- position: absolute;
- top: 35px;
- bottom: 0px;
- left: -14px;
- width: 10px;
- border-left: 1px solid #C592A0;
- border-bottom: 1px solid #C592A0;
-}
-.doc-content-item-card h4 {
- margin: 0;
- padding: 0;
- font-family: Monaco, 'Source Code Pro', monospace;
-}
-.doc-content-item-card h4 > * {
- vertical-align: bottom;
- display: inline-block;
-}
-.doc-content-item-card h4 .el-button {
- padding: 2px;
- font-size: 12px;
- margin-left: -23px;
- color: #C592A0;
- border-color: #C592A0;
- border-radius: 4px;
- background: #fff;
- position: relative;
-}
-.doc-content-item-card h4 .anchor {
- color: #C592A0;
- font-size: 16px;
- text-decoration: none;
-}
-.doc-content-item-card h4 .anchor:hover {
- text-decoration: underline;
-}
-.doc-content-item-card h4 .path-parent {
- font-size: 12px;
- padding: 0;
- font-weight: normal;
-}
-.doc-content-item-card h4 .path-parent .separator {
- margin: 0 3px;
- color: #B03A5B;
-}
-.doc-content-item-card h4 .path-parent a {
- color: #C592A0;
- margin: 0;
-}
-.doc-content-item-card h4 .path-base {
- font-size: 14px;
- padding: 0;
- margin-left: -4px;
- font-weight: normal;
-}
-.doc-content-item-card h4 .path-base a {
- color: #B03A5B;
- margin: 0;
-}
-.doc-content-item-card h4 .path-parent a, .doc-content-item-card h4 .path-base a {
- text-decoration: none;
-}
-.doc-content-item-card h4 .path-parent a:hover, .doc-content-item-card h4 .path-base a:hover {
- text-decoration: underline;
-}
-.doc-content-item-card h4 .default-value {
- color: #293c55;
- font-size: 18px;
- margin-left: 15px;
- vertical-align: bottom;
- font-weight: normal;
-}
-.doc-content-item-card.level-1 > h4 .anchor {
- font-size: 20px;
-}
-.doc-content-item-card.level-1 > h4 .path-parent {
- font-size: 16px;
-}
-.doc-content-item-card.level-1 > h4 .path-base {
- font-size: 20px;
-}
-.doc-content-item-card.level-2 > h4 .anchor {
- font-size: 18px;
-}
-.doc-content-item-card.level-2 > h4 .path-parent {
- font-size: 14px;
-}
-.doc-content-item-card.level-2 > h4 .path-base {
- font-size: 18px;
-}
-.doc-content-item-card.level-3 > h4 .anchor {
- font-size: 16px;
-}
-.doc-content-item-card.level-3 > h4 .path-parent {
- font-size: 13px;
-}
-.doc-content-item-card.level-3 > h4 .path-base {
- font-size: 16px;
-}
-.doc-content-item-card.level-2 {
- border-top: none;
- margin-top: 10px;
-}
-.doc-content-item-card.level-2 .guider {
- vertical-align: middle;
- width: 34px;
- margin-left: -39px;
- margin-right: 2px;
- border-top: 1px solid #C592A0;
- position: relative;
-}
-.doc-content-item-card.level-3 {
- border-top: none;
- margin-top: 10px;
-}
-.doc-content-item-card.level-3 .guider {
- vertical-align: middle;
- width: 34px;
- margin-left: -39px;
- margin-right: 2px;
- border-top: 1px solid #C592A0;
- position: relative;
-}
-.doc-content-item-card.level-4 {
- border-top: none;
- margin-top: 10px;
-}
-.doc-content-item-card.level-4 .guider {
- vertical-align: middle;
- width: 34px;
- margin-left: -39px;
- margin-right: 2px;
- border-top: 1px solid #C592A0;
- position: relative;
-}
-.doc-content-item-card.level-5 {
- border-top: none;
- margin-top: 10px;
-}
-.doc-content-item-card.level-5 .guider {
- vertical-align: middle;
- width: 34px;
- margin-left: -39px;
- margin-right: 2px;
- border-top: 1px solid #C592A0;
- position: relative;
-}
-.doc-content-item-card.level-6 {
- border-top: none;
- margin-top: 10px;
-}
-.doc-content-item-card.level-6 .guider {
- vertical-align: middle;
- width: 34px;
- margin-left: -39px;
- margin-right: 2px;
- border-top: 1px solid #C592A0;
- position: relative;
-}
-.doc-content-item-card.level-7 {
- border-top: none;
- margin-top: 10px;
-}
-.doc-content-item-card.level-7 .guider {
- vertical-align: middle;
- width: 34px;
- margin-left: -39px;
- margin-right: 2px;
- border-top: 1px solid #C592A0;
- position: relative;
-}
-.doc-content-item-card.level-8 {
- border-top: none;
- margin-top: 10px;
-}
-.doc-content-item-card.level-8 .guider {
- vertical-align: middle;
- width: 34px;
- margin-left: -39px;
- margin-right: 2px;
- border-top: 1px solid #C592A0;
- position: relative;
-}
-.doc-content-item-card.level-9 {
- border-top: none;
- margin-top: 10px;
-}
-.doc-content-item-card.level-9 .guider {
- vertical-align: middle;
- width: 34px;
- margin-left: -39px;
- margin-right: 2px;
- border-top: 1px solid #C592A0;
- position: relative;
-}
-.doc-content-item-card.level-10 {
- border-top: none;
- margin-top: 10px;
-}
-.doc-content-item-card.level-10 .guider {
- vertical-align: middle;
- width: 34px;
- margin-left: -39px;
- margin-right: 2px;
- border-top: 1px solid #C592A0;
- position: relative;
-}
-.doc-content-item-card.level-11 {
- border-top: none;
- margin-top: 10px;
-}
-.doc-content-item-card.level-11 .guider {
- vertical-align: middle;
- width: 34px;
- margin-left: -39px;
- margin-right: 2px;
- border-top: 1px solid #C592A0;
- position: relative;
-}
-.doc-content-item-card .prop-types {
- margin-top: 5px;
-}
-.doc-content-item-card .prop-type {
- display: inline-block;
- margin-right: 4px;
- border-radius: 4px;
- padding: 3px 5px;
- color: #fff;
- background-color: #a3a3a3;
- font-size: 12px;
-}
-.doc-content-item-card .prop-type-string {
- background-color: #fd8888;
-}
-.doc-content-item-card .prop-type-number {
- background-color: #8fb9e4;
-}
-.doc-content-item-card .prop-type-boolean {
- background-color: #e6a23c;
-}
-.doc-content-item-card .properties-list-panel {
- max-width: 700px;
-}
-.doc-content-item-card .children {
- padding: 10px;
-}
-.ec-doc-mobile .doc-content-item-card {
- margin-left: 0;
- margin-top: 10px;
- padding: 10px 10px;
- background: #fff;
- border-top: none;
-}
-.ec-doc-mobile .doc-content-item-card.level-1 > h4 .anchor {
- font-size: 18px;
-}
-.ec-doc-mobile .doc-content-item-card.level-1 > h4 .path-parent {
- font-size: 13px;
-}
-.ec-doc-mobile .doc-content-item-card.level-1 > h4 .path-base {
- font-size: 18px;
-}
-.ec-doc-mobile .doc-content-item-card.level-1 > h4 .default-value {
- font-size: 14px;
-}
-
-.doc-content {
- margin-left: 10px;
-}
-.doc-content h2 {
- color: #B03A5B;
- font-size: 34px;
- border-bottom: 1px solid #ccc;
- height: 45px;
- line-height: 45px;
- margin: 0;
- font-weight: normal;
-}
-.doc-content h3 {
- font-weight: normal;
- color: #999;
- font-size: 30px;
-}
-.doc-content .page-description {
- padding: 5px 0;
-}
-.doc-content .page-description .hljs {
- background: transparent;
- padding: 0;
-}
-.doc-content .page-description hr {
- border: none;
- border-bottom: 1px solid #eee;
- width: 80%;
-}
-.doc-content .page-description blockquote {
- font-size: 12px;
- color: #999;
- background-color: #fdfdfd;
- border-left: 2px solid #ddd;
- margin-left: 0px;
- padding: 5px 10px;
-}
-.doc-content .page-description blockquote p {
- margin: 0;
-}
-.doc-content .page-description blockquote pre {
- font-size: 12px;
-}
-.doc-content .page-description iframe {
- border: 1px solid #ccc;
- display: block;
- margin-top: 5px;
- max-width: 100%;
-}
-.doc-content .page-description img {
- max-width: 100%;
-}
-.doc-content .page-description p {
- line-height: 1.7em;
- margin: 12px 0 0 0;
- font-size: 14px;
-}
-.doc-content .page-description pre {
- margin: 5px 0;
- border-radius: 5px;
- background-color: #f5f7fa;
- border: none;
- padding: 10px;
- font-size: 13px;
-}
-.doc-content .page-description .codespan {
- padding: 2px 4px;
- font-size: 14px;
- color: #293C55;
- background-color: #f9f2f4;
- border-radius: 4px;
-}
-.doc-content .page-description code *, .doc-content .page-description code {
- font-family: Monaco, 'Source Code Pro', 'Courier New', monospace;
-}
-.doc-content .page-description ol {
- margin-left: 20px;
-}
-.doc-content .page-description ul li {
- list-style: disc;
- margin: 10px 20px;
- font-size: 14px;
-}
-.doc-content .page-description ol li {
- list-style: decimal;
-}
-.doc-content .page-description a {
- font-family: Monaco,'Source Code Pro', STHeiti, "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif;
-}
-.doc-content .item-description {
- margin: 0;
- padding: 5px 0;
-}
-.doc-content .item-description .hljs {
- background: transparent;
- padding: 0;
-}
-.doc-content .item-description hr {
- border: none;
- border-bottom: 1px solid #eee;
- width: 80%;
-}
-.doc-content .item-description blockquote {
- font-size: 12px;
- color: #999;
- background-color: #fdfdfd;
- border-left: 2px solid #ddd;
- margin-left: 0px;
- padding: 5px 10px;
-}
-.doc-content .item-description blockquote p {
- margin: 0;
-}
-.doc-content .item-description blockquote pre {
- font-size: 12px;
-}
-.doc-content .item-description iframe {
- border: 1px solid #ccc;
- display: block;
- margin-top: 5px;
- max-width: 100%;
-}
-.doc-content .item-description img {
- max-width: 100%;
-}
-.doc-content .item-description p {
- line-height: 1.7em;
- margin: 12px 0 0 0;
- font-size: 14px;
-}
-.doc-content .item-description pre {
- margin: 5px 0;
- border-radius: 5px;
- background-color: #f5f7fa;
- border: none;
- padding: 10px;
- font-size: 13px;
-}
-.doc-content .item-description .codespan {
- padding: 2px 4px;
- font-size: 14px;
- color: #293C55;
- background-color: #f9f2f4;
- border-radius: 4px;
-}
-.doc-content .item-description code *, .doc-content .item-description code {
- font-family: Monaco, 'Source Code Pro', 'Courier New', monospace;
-}
-.doc-content .item-description ol {
- margin-left: 20px;
-}
-.doc-content .item-description ul li {
- list-style: disc;
- margin: 10px 20px;
- font-size: 14px;
-}
-.doc-content .item-description ol li {
- list-style: decimal;
-}
-.doc-content .item-description a {
- font-family: Monaco,'Source Code Pro', STHeiti, "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif;
-}
-.ec-doc-tutorial .page-description h2 {
- font-weight: normal;
- font-size: 22px;
- margin-left: 0;
- margin-top: 40px;
-}
-.ec-doc-mobile .doc-content {
- margin-left: 0;
- background: #f2f2f2;
- margin-bottom: 100px;
-}
-.ec-doc-mobile .page-description {
- padding: 5px 10px;
- background: #fff;
-}
-.ec-doc-mobile h2 {
- font-size: 22px;
- font-weight: normal;
- padding: 20px 10px;
- border-bottom: none;
-}
-.ec-doc-mobile h3 {
- font-size: 20px;
- padding-left: 10px;
-}
-
-.doc-search {
- padding: 5px;
-}
-.doc-search .search-input {
- width: 100%;
-}
-.el-autocomplete-suggestion.search-input-popper {
- width: 300px !important;
-}
-.el-autocomplete-suggestion.search-input-popper li {
- line-height: 28px;
- padding: 0 10px;
-}
-.doc-path-suggestion-item {
- font-family: Monaco,Consolas,Courier new,monospace;
- font-size: 12px;
-}
-
-.doc-search-result-item-card {
- margin: 30px 10px;
- border-top: 1px solid #ccc;
-}
-.doc-search-result-item-card h4 {
- margin: 10px 0;
-}
-.doc-search-result-item-card h4 > * {
- vertical-align: middle;
- display: inline-block;
-}
-.doc-search-result-item-card h4 a.path {
- font-family: Montserrat, sans-serif;
- font-size: 18px;
- padding-left: 5px;
- padding: 0;
- font-weight: normal;
- color: #B03A5B;
-}
-.doc-search-result-item-card .item-description mark, .doc-search-result-item-card h4 mark {
- background-color: #fc0;
- border-radius: 3px;
- padding: 2px;
-}
-.doc-search-result-item-card .other-result {
- font-size: 12px;
- padding: 0 0 10px 0;
-}
-.doc-search-result-item-card .other-result > div {
- font-family: Montserrat, sans-serif;
-}
-.doc-search-result-item-card.needs-show-more .item-description {
- max-height: 200px;
- overflow-y: hidden;
-}
-.doc-search-result-item-card.needs-show-more .show-more-button {
- display: block;
-}
-.doc-search-result-item-card .show-more-button {
- display: none;
- text-align: center;
- cursor: pointer;
-}
-.doc-search-result-item-card .hljs {
- background: transparent;
- padding: 0;
-}
-.doc-search-result-item-card hr {
- border: none;
- border-bottom: 1px solid #eee;
- width: 80%;
-}
-.doc-search-result-item-card blockquote {
- font-size: 12px;
- color: #999;
- background-color: #fdfdfd;
- border-left: 2px solid #ddd;
- margin-left: 0px;
- padding: 5px 10px;
-}
-.doc-search-result-item-card blockquote p {
- margin: 0;
-}
-.doc-search-result-item-card blockquote pre {
- font-size: 12px;
-}
-.doc-search-result-item-card iframe {
- border: 1px solid #ccc;
- display: block;
- margin-top: 5px;
- max-width: 100%;
-}
-.doc-search-result-item-card img {
- max-width: 100%;
-}
-.doc-search-result-item-card p {
- line-height: 1.7em;
- margin: 12px 0 0 0;
- font-size: 14px;
-}
-.doc-search-result-item-card pre {
- margin: 5px 0;
- border-radius: 5px;
- background-color: #f5f7fa;
- border: none;
- padding: 10px;
- font-size: 13px;
-}
-.doc-search-result-item-card .codespan {
- padding: 2px 4px;
- font-size: 14px;
- color: #293C55;
- background-color: #f9f2f4;
- border-radius: 4px;
-}
-.doc-search-result-item-card code *, .doc-search-result-item-card code {
- font-family: Monaco, 'Source Code Pro', 'Courier New', monospace;
-}
-.doc-search-result-item-card ol {
- margin-left: 20px;
-}
-.doc-search-result-item-card ul li {
- list-style: disc;
- margin: 10px 20px;
- font-size: 14px;
-}
-.doc-search-result-item-card ol li {
- list-style: decimal;
-}
-.doc-search-result-item-card a {
- font-family: Monaco,'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;
-}
-
-.doc-search-result h3 {
- font-weight: normal;
- font-size: 24px;
-}
-.doc-search-result .result-summary {
- padding: 10px 0;
- color: #999;
-}
-.doc-search-result .result-summary .searching {
- color: #B03A5B;
-}
-
-.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%;
-}
-.ec-doc ul, .ec-doc ol {
- margin: 0;
- padding: 0;
-}
-.ec-doc a {
- color: #337ab7;
- text-decoration: none;
- margin: 0 3px;
-}
-.ec-doc a:hover {
- text-decoration: underline;
-}
-.ec-doc .el-aside {
- border-right: 1px solid #ddd;
- position: relative;
-}
-.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 {
- display: inline-block;
- line-height: 35px;
- width: 20%;
- text-align: center;
- box-sizing: border-box;
- text-decoration: none;
- color: #000;
- cursor: pointer;
- font-size: 14px;
-}
-.ec-doc .el-aside .doc-type-nav a.selected {
- border-top: 3px solid #B03A5B;
-}
-.ec-doc .el-aside .doc-nav {
- position: absolute;
- top: 90px;
- bottom: 0;
- left: 0;
- right: 0;
- overflow-y: scroll;
-}
-.ec-doc .el-main {
- text-align: center;
-}
-.ec-doc .el-main > div {
- margin: 0 auto;
- text-align: left;
- min-width: 100%;
-}
-.ec-doc.ec-doc-locale-zh .doc-type-nav a {
- width: 20%;
-}
-
-.ec-doc-mobile {
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Helvetica Neue", Helvetica, Arial, sans-serif;
- position: relative;
-}
-.ec-doc-mobile ul, .ec-doc-mobile ol {
- margin: 0;
- padding: 0;
-}
-.ec-doc-mobile a {
- color: #337ab7;
- text-decoration: none;
- margin: 0 3px;
-}
-.ec-doc-mobile a:hover {
- text-decoration: underline;
-}
-.ec-doc-mobile .top-bar {
- position: sticky;
- top: 0;
- height: 90px;
- left: 0;
- right: 0;
- background: #fff;
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
- border-bottom: 1px solid #ddd;
- z-index: 10;
-}
-.ec-doc-mobile .doc-type-nav {
- border-bottom: 1px solid #eee;
- margin-bottom: 10px;
- margin-left: 5px;
-}
-.ec-doc-mobile .doc-type-nav a {
- display: inline-block;
- line-height: 30px;
- width: 30%;
- text-align: center;
- box-sizing: border-box;
- text-decoration: none;
- color: #000;
- cursor: pointer;
- font-size: 14px;
-}
-.ec-doc-mobile .doc-type-nav a.selected {
- border-top: 3px solid #B03A5B;
-}
-.ec-doc-mobile .doc-mobile-toolbar {
- display: flex;
- flex-direction: row;
-}
-.ec-doc-mobile .doc-mobile-toolbar .open-nav {
- margin: 6px 5px;
-}
-.ec-doc-mobile .doc-mobile-toolbar .doc-search {
- flex: 1;
-}
-.ec-doc-mobile .doc-breadcrumb {
- position: fixed;
- text-align: center;
- left: 50%;
- transform: translate(-50%, 0);
- bottom: 20px;
- border-radius: 4px;
- padding: 5px;
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
- background: #337ab7;
-}
-.ec-doc-mobile .doc-breadcrumb a {
- display: inline-block;
- color: #fff;
-}
-.el-drawer .doc-nav {
- position: absolute;
- top: 10px;
- bottom: 0;
- left: 0;
- right: 0;
- overflow-y: scroll;
-}
-
-/**
- * GitHub Gist Theme
- * Author : Anthony Attard - https://github.com/AnthonyAttard
- * Author : Louis Barranqueiro - https://github.com/LouisBarranqueiro
- */
-
-.hljs {
- display: block;
- background: white;
- padding: 0.5em;
- color: #333333;
- overflow-x: auto;
-}
-
-.hljs-comment,
-.hljs-meta {
- color: #969896;
-}
-
-.hljs-variable,
-.hljs-template-variable,
-.hljs-strong,
-.hljs-emphasis,
-.hljs-quote {
- color: #df5000;
-}
-
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-type {
- color: #d73a49;
-}
-
-.hljs-literal,
-.hljs-symbol,
-.hljs-bullet,
-.hljs-attribute {
- color: #0086b3;
-}
-
-.hljs-section,
-.hljs-name {
- color: #63a35c;
-}
-
-.hljs-tag {
- color: #333333;
-}
-
-.hljs-title,
-.hljs-attr,
-.hljs-selector-id,
-.hljs-selector-class,
-.hljs-selector-attr,
-.hljs-selector-pseudo {
- color: #6f42c1;
-}
-
-.hljs-addition {
- color: #55a532;
- background-color: #eaffea;
-}
-
-.hljs-deletion {
- color: #bd2c00;
- background-color: #ffecec;
-}
-
-.hljs-link {
- text-decoration: underline;
-}
-
-.hljs-number {
- color: #005cc5;
-}
-
-.hljs-string {
- color: #032f62;
-}
-
diff --git a/public/css/element-icons.ttf b/public/css/element-icons.ttf
deleted file mode 100644
index 91b74de..0000000
Binary files a/public/css/element-icons.ttf and /dev/null differ
diff --git a/public/css/element-icons.woff b/public/css/element-icons.woff
deleted file mode 100644
index 02b9a25..0000000
Binary files a/public/css/element-icons.woff and /dev/null differ
diff --git a/public/demo.html b/public/demo.html
deleted file mode 100644
index 411f414..0000000
--- a/public/demo.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><script type="text/javascript">var hash = (location.hash || '').replace('#', '');
-var search = (location.search || '').replace('?', '');
-var lang = navigator.language || navigator.userLanguage;
-lang = lang.indexOf('zh') > -1 ? 'zh' : 'en';
-location.href = 'https://echarts.apache.org/' + lang + '/demo.html'
- + (search ? '?' + search : '') + (hash ? '#' + hash : '');</script></head></html>
\ No newline at end of file
diff --git a/public/download-extension.html b/public/download-extension.html
deleted file mode 100644
index 21b8dc6..0000000
--- a/public/download-extension.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><script type="text/javascript">var hash = (location.hash || '').replace('#', '');
-var search = (location.search || '').replace('?', '');
-var lang = navigator.language || navigator.userLanguage;
-lang = lang.indexOf('zh') > -1 ? 'zh' : 'en';
-location.href = 'https://echarts.apache.org/' + lang + '/download-extension.html'
- + (search ? '?' + search : '') + (hash ? '#' + hash : '');</script></head></html>
\ No newline at end of file
diff --git a/public/download-map.html b/public/download-map.html
deleted file mode 100644
index 0b37bd9..0000000
--- a/public/download-map.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><script type="text/javascript">var hash = (location.hash || '').replace('#', '');
-var search = (location.search || '').replace('?', '');
-var lang = navigator.language || navigator.userLanguage;
-lang = lang.indexOf('zh') > -1 ? 'zh' : 'en';
-location.href = 'https://echarts.apache.org/' + lang + '/download-map.html'
- + (search ? '?' + search : '') + (hash ? '#' + hash : '');</script></head></html>
\ No newline at end of file
diff --git a/public/download-theme.html b/public/download-theme.html
deleted file mode 100644
index 1db2141..0000000
--- a/public/download-theme.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><script type="text/javascript">var hash = (location.hash || '').replace('#', '');
-var search = (location.search || '').replace('?', '');
-var lang = navigator.language || navigator.userLanguage;
-lang = lang.indexOf('zh') > -1 ? 'zh' : 'en';
-location.href = 'https://echarts.apache.org/' + lang + '/download-theme.html'
- + (search ? '?' + search : '') + (hash ? '#' + hash : '');</script></head></html>
\ No newline at end of file
diff --git a/public/download.html b/public/download.html
deleted file mode 100644
index b2d4d12..0000000
--- a/public/download.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><script type="text/javascript">var hash = (location.hash || '').replace('#', '');
-var search = (location.search || '').replace('?', '');
-var lang = navigator.language || navigator.userLanguage;
-lang = lang.indexOf('zh') > -1 ? 'zh' : 'en';
-location.href = 'https://echarts.apache.org/' + lang + '/download.html'
- + (search ? '?' + search : '') + (hash ? '#' + hash : '');</script></head></html>
\ No newline at end of file
diff --git a/public/download3.html b/public/download3.html
deleted file mode 100644
index 8f59bf1..0000000
--- a/public/download3.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><script type="text/javascript">var hash = (location.hash || '').replace('#', '');
-var search = (location.search || '').replace('?', '');
-var lang = navigator.language || navigator.userLanguage;
-lang = lang.indexOf('zh') > -1 ? 'zh' : 'en';
-location.href = 'https://echarts.apache.org/' + lang + '/download3.html'
- + (search ? '?' + search : '') + (hash ? '#' + hash : '');</script></head></html>
\ No newline at end of file
diff --git a/public/en/documents/api-parts/api-outline.json b/public/en/documents/api-parts/api-outline.json
deleted file mode 100644
index 06ee6af..0000000
--- a/public/en/documents/api-parts/api-outline.json
+++ /dev/null
@@ -1 +0,0 @@
-{"children":[{"type":"Object","isObject":true,"prop":"echarts","children":[{"type":"Function","prop":"init"},{"type":"Function","prop":"connect"},{"type":"Function","prop":"disconnect"},{"type":"Function","prop":"dispose"},{"type":"Function","prop":"getInstanceByDom"},{"type":"Function","prop":"registerMap"},{"type":"Function","prop":"getMap"},{"type":"Function","prop":"registerTheme"},{"type":"*","isObject":true,"prop":"graphic","children":[{"type":"Function","prop":"extendShape"},{"typ [...]
\ No newline at end of file
diff --git a/public/en/documents/api-parts/api.action.json b/public/en/documents/api-parts/api.action.json
deleted file mode 100644
index 62b44df..0000000
--- a/public/en/documents/api-parts/api.action.json
+++ /dev/null
@@ -1,36 +0,0 @@
-{
- "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.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 location the series.\n seriesId: 'xxx',\n seriesIndex: 0,\n seriesName: 'nnn',\n\n // Use dataIndex to location the node.\n dataIndex: 12\n})\n</code></pre>\n<p>Event <a href=\"#event.focusNodeAdjacency\">focusNodeAdjace [...]
- "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 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 is a "coodinate system area", belonging\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 [...]
-}
\ No newline at end of file
diff --git a/public/en/documents/api-parts/api.echarts.json b/public/en/documents/api-parts/api.echarts.json
deleted file mode 100644
index 1f17bc0..0000000
--- a/public/en/documents/api-parts/api.echarts.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
- "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 class= [...]
- "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 [...]
-}
\ No newline at end of file
diff --git a/public/en/documents/api-parts/api.echartsInstance.json b/public/en/documents/api-parts/api.echartsInstance.json
deleted file mode 100644
index 371d0a2..0000000
--- a/public/en/documents/api-parts/api.echartsInstance.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
- "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=\"co [...]
- "clear": "<p>Clears current instance; removes all components and charts in current instance. After clearing, <a href=\"#echartsInstance.getOption\">getOption</a> returns an empty object <code class=\"codespan\">{}</code>.</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"
-}
\ No newline at end of file
diff --git a/public/en/documents/api-parts/api.events.json b/public/en/documents/api-parts/api.events.json
deleted file mode 100644
index 57266d4..0000000
--- a/public/en/documents/api-parts/api.events.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
- "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",
- "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</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"
-}
\ No newline at end of file
diff --git a/public/en/documents/api-parts/api.json b/public/en/documents/api-parts/api.json
deleted file mode 100644
index 883c420..0000000
--- a/public/en/documents/api-parts/api.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "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(' [...]
-}
\ No newline at end of file
diff --git a/public/en/documents/api.json b/public/en/documents/api.json
deleted file mode 100644
index f6e5d63..0000000
--- a/public/en/documents/api.json
+++ /dev/null
@@ -1 +0,0 @@
-{"$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/public/en/documents/asset/gl/img/alpha-beta.sketch b/public/en/documents/asset/gl/img/alpha-beta.sketch
deleted file mode 100644
index f55c7e7..0000000
Binary files a/public/en/documents/asset/gl/img/alpha-beta.sketch and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/bar3D-bevel.png b/public/en/documents/asset/gl/img/bar3D-bevel.png
deleted file mode 100644
index 184736a..0000000
Binary files a/public/en/documents/asset/gl/img/bar3D-bevel.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/bar3D-no-bevel.png b/public/en/documents/asset/gl/img/bar3D-no-bevel.png
deleted file mode 100644
index 0c091e4..0000000
Binary files a/public/en/documents/asset/gl/img/bar3D-no-bevel.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/buildings-cold.jpg b/public/en/documents/asset/gl/img/buildings-cold.jpg
deleted file mode 100644
index 0544e8f..0000000
Binary files a/public/en/documents/asset/gl/img/buildings-cold.jpg and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/buildings-warm.jpg b/public/en/documents/asset/gl/img/buildings-warm.jpg
deleted file mode 100644
index 10ac3c7..0000000
Binary files a/public/en/documents/asset/gl/img/buildings-warm.jpg and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/city-region-height.jpg b/public/en/documents/asset/gl/img/city-region-height.jpg
deleted file mode 100644
index cba9419..0000000
Binary files a/public/en/documents/asset/gl/img/city-region-height.jpg and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/crispwinter.png b/public/en/documents/asset/gl/img/crispwinter.png
deleted file mode 100644
index 17a31fe..0000000
Binary files a/public/en/documents/asset/gl/img/crispwinter.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/displacement-disable.png b/public/en/documents/asset/gl/img/displacement-disable.png
deleted file mode 100644
index 4cfdf6d..0000000
Binary files a/public/en/documents/asset/gl/img/displacement-disable.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/displacement-enable.png b/public/en/documents/asset/gl/img/displacement-enable.png
deleted file mode 100644
index 5497d9f..0000000
Binary files a/public/en/documents/asset/gl/img/displacement-enable.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/displacement-low.png b/public/en/documents/asset/gl/img/displacement-low.png
deleted file mode 100644
index 3070548..0000000
Binary files a/public/en/documents/asset/gl/img/displacement-low.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/displacement-ultra.png b/public/en/documents/asset/gl/img/displacement-ultra.png
deleted file mode 100644
index 88957bd..0000000
Binary files a/public/en/documents/asset/gl/img/displacement-ultra.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/flowGL-line.jpg b/public/en/documents/asset/gl/img/flowGL-line.jpg
deleted file mode 100644
index b4f9a8b..0000000
Binary files a/public/en/documents/asset/gl/img/flowGL-line.jpg and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/flowGL-noss.jpg b/public/en/documents/asset/gl/img/flowGL-noss.jpg
deleted file mode 100644
index 63c6150..0000000
Binary files a/public/en/documents/asset/gl/img/flowGL-noss.jpg and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/flowGL-point.jpg b/public/en/documents/asset/gl/img/flowGL-point.jpg
deleted file mode 100644
index efca5bb..0000000
Binary files a/public/en/documents/asset/gl/img/flowGL-point.jpg and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/flowGL-ss.jpg b/public/en/documents/asset/gl/img/flowGL-ss.jpg
deleted file mode 100644
index e5e129b..0000000
Binary files a/public/en/documents/asset/gl/img/flowGL-ss.jpg and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/flowGL-wind.jpg b/public/en/documents/asset/gl/img/flowGL-wind.jpg
deleted file mode 100644
index c3f2b38..0000000
Binary files a/public/en/documents/asset/gl/img/flowGL-wind.jpg and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/geo-bar3D.jpg b/public/en/documents/asset/gl/img/geo-bar3D.jpg
deleted file mode 100644
index b5e87f7..0000000
Binary files a/public/en/documents/asset/gl/img/geo-bar3D.jpg and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/geo-border.png b/public/en/documents/asset/gl/img/geo-border.png
deleted file mode 100644
index f0a387e..0000000
Binary files a/public/en/documents/asset/gl/img/geo-border.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/geo-dof-large.png b/public/en/documents/asset/gl/img/geo-dof-large.png
deleted file mode 100644
index de000ee..0000000
Binary files a/public/en/documents/asset/gl/img/geo-dof-large.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/geo-dof-small.png b/public/en/documents/asset/gl/img/geo-dof-small.png
deleted file mode 100644
index 9da1426..0000000
Binary files a/public/en/documents/asset/gl/img/geo-dof-small.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/geo-dof.png b/public/en/documents/asset/gl/img/geo-dof.png
deleted file mode 100644
index 19c6d23..0000000
Binary files a/public/en/documents/asset/gl/img/geo-dof.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/geo-no-dof.png b/public/en/documents/asset/gl/img/geo-no-dof.png
deleted file mode 100644
index da6c472..0000000
Binary files a/public/en/documents/asset/gl/img/geo-no-dof.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/geo-no-shadow.png b/public/en/documents/asset/gl/img/geo-no-shadow.png
deleted file mode 100644
index a80574b..0000000
Binary files a/public/en/documents/asset/gl/img/geo-no-shadow.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/geo-no-ssao.png b/public/en/documents/asset/gl/img/geo-no-ssao.png
deleted file mode 100644
index 9c0b001..0000000
Binary files a/public/en/documents/asset/gl/img/geo-no-ssao.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/geo-shadow-high.png b/public/en/documents/asset/gl/img/geo-shadow-high.png
deleted file mode 100644
index 8d161fe..0000000
Binary files a/public/en/documents/asset/gl/img/geo-shadow-high.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/geo-shadow-low.png b/public/en/documents/asset/gl/img/geo-shadow-low.png
deleted file mode 100644
index b0d67f9..0000000
Binary files a/public/en/documents/asset/gl/img/geo-shadow-low.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/geo-shadow.png b/public/en/documents/asset/gl/img/geo-shadow.png
deleted file mode 100644
index 7a1a66e..0000000
Binary files a/public/en/documents/asset/gl/img/geo-shadow.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/geo-size.png b/public/en/documents/asset/gl/img/geo-size.png
deleted file mode 100644
index cffd2fe..0000000
Binary files a/public/en/documents/asset/gl/img/geo-size.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/geo-size.sketch b/public/en/documents/asset/gl/img/geo-size.sketch
deleted file mode 100644
index 8b5f83c..0000000
Binary files a/public/en/documents/asset/gl/img/geo-size.sketch and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/geo-ssao-large-radius.png b/public/en/documents/asset/gl/img/geo-ssao-large-radius.png
deleted file mode 100644
index 44e799c..0000000
Binary files a/public/en/documents/asset/gl/img/geo-ssao-large-radius.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/geo-ssao-small-radius.png b/public/en/documents/asset/gl/img/geo-ssao-small-radius.png
deleted file mode 100644
index 9fa0a52..0000000
Binary files a/public/en/documents/asset/gl/img/geo-ssao-small-radius.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/geo-ssao.png b/public/en/documents/asset/gl/img/geo-ssao.png
deleted file mode 100644
index a59b30d..0000000
Binary files a/public/en/documents/asset/gl/img/geo-ssao.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/globe-airline.png b/public/en/documents/asset/gl/img/globe-airline.png
deleted file mode 100644
index 99bb031..0000000
Binary files a/public/en/documents/asset/gl/img/globe-airline.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/globe-gloss.png b/public/en/documents/asset/gl/img/globe-gloss.png
deleted file mode 100644
index f5bf666..0000000
Binary files a/public/en/documents/asset/gl/img/globe-gloss.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/globe-metal.png b/public/en/documents/asset/gl/img/globe-metal.png
deleted file mode 100644
index 3baa3d1..0000000
Binary files a/public/en/documents/asset/gl/img/globe-metal.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/globe-non-metal.png b/public/en/documents/asset/gl/img/globe-non-metal.png
deleted file mode 100644
index 49c64fb..0000000
Binary files a/public/en/documents/asset/gl/img/globe-non-metal.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/globe-posteffect-bloom.png b/public/en/documents/asset/gl/img/globe-posteffect-bloom.png
deleted file mode 100644
index a1ab2f5..0000000
Binary files a/public/en/documents/asset/gl/img/globe-posteffect-bloom.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/globe-posteffect-disable.png b/public/en/documents/asset/gl/img/globe-posteffect-disable.png
deleted file mode 100644
index 34bbfb7..0000000
Binary files a/public/en/documents/asset/gl/img/globe-posteffect-disable.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/globe-posteffect-enable.png b/public/en/documents/asset/gl/img/globe-posteffect-enable.png
deleted file mode 100644
index d326ded..0000000
Binary files a/public/en/documents/asset/gl/img/globe-posteffect-enable.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/globe-rough.png b/public/en/documents/asset/gl/img/globe-rough.png
deleted file mode 100644
index 239daee..0000000
Binary files a/public/en/documents/asset/gl/img/globe-rough.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/globe-shading-color.png b/public/en/documents/asset/gl/img/globe-shading-color.png
deleted file mode 100644
index c86a20e..0000000
Binary files a/public/en/documents/asset/gl/img/globe-shading-color.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/globe-shading-lambert.png b/public/en/documents/asset/gl/img/globe-shading-lambert.png
deleted file mode 100644
index b0c5469..0000000
Binary files a/public/en/documents/asset/gl/img/globe-shading-lambert.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/globe-shading-realistic.png b/public/en/documents/asset/gl/img/globe-shading-realistic.png
deleted file mode 100644
index 67080d6..0000000
Binary files a/public/en/documents/asset/gl/img/globe-shading-realistic.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/gpu-layout-perf.png b/public/en/documents/asset/gl/img/gpu-layout-perf.png
deleted file mode 100644
index 3d07eae..0000000
Binary files a/public/en/documents/asset/gl/img/gpu-layout-perf.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/grid3D.png b/public/en/documents/asset/gl/img/grid3D.png
deleted file mode 100644
index 45e97f7..0000000
Binary files a/public/en/documents/asset/gl/img/grid3D.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/grid3D.sketch b/public/en/documents/asset/gl/img/grid3D.sketch
deleted file mode 100644
index 55095cc..0000000
Binary files a/public/en/documents/asset/gl/img/grid3D.sketch and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/heightmap-disable.png b/public/en/documents/asset/gl/img/heightmap-disable.png
deleted file mode 100644
index a77caf9..0000000
Binary files a/public/en/documents/asset/gl/img/heightmap-disable.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/heightmap-enable.png b/public/en/documents/asset/gl/img/heightmap-enable.png
deleted file mode 100644
index 7d235ad..0000000
Binary files a/public/en/documents/asset/gl/img/heightmap-enable.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/light-alpha-beta.png b/public/en/documents/asset/gl/img/light-alpha-beta.png
deleted file mode 100644
index a5faad2..0000000
Binary files a/public/en/documents/asset/gl/img/light-alpha-beta.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/line3D.png b/public/en/documents/asset/gl/img/line3D.png
deleted file mode 100644
index a15ecfe..0000000
Binary files a/public/en/documents/asset/gl/img/line3D.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/lookup.png b/public/en/documents/asset/gl/img/lookup.png
deleted file mode 100644
index ed814df..0000000
Binary files a/public/en/documents/asset/gl/img/lookup.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/parametric-surface.png b/public/en/documents/asset/gl/img/parametric-surface.png
deleted file mode 100644
index f7033a7..0000000
Binary files a/public/en/documents/asset/gl/img/parametric-surface.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/polygons3D-ny.jpg b/public/en/documents/asset/gl/img/polygons3D-ny.jpg
deleted file mode 100644
index f053fa0..0000000
Binary files a/public/en/documents/asset/gl/img/polygons3D-ny.jpg and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/roughness.png b/public/en/documents/asset/gl/img/roughness.png
deleted file mode 100644
index 76eb955..0000000
Binary files a/public/en/documents/asset/gl/img/roughness.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/scatter3D.png b/public/en/documents/asset/gl/img/scatter3D.png
deleted file mode 100644
index 0972ec5..0000000
Binary files a/public/en/documents/asset/gl/img/scatter3D.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/surface-index.png b/public/en/documents/asset/gl/img/surface-index.png
deleted file mode 100644
index 5c342d4..0000000
Binary files a/public/en/documents/asset/gl/img/surface-index.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/surface-index.sketch b/public/en/documents/asset/gl/img/surface-index.sketch
deleted file mode 100644
index 2a7b185..0000000
Binary files a/public/en/documents/asset/gl/img/surface-index.sketch and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/surface-no-taa.png b/public/en/documents/asset/gl/img/surface-no-taa.png
deleted file mode 100644
index 390e448..0000000
Binary files a/public/en/documents/asset/gl/img/surface-no-taa.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/surface-taa.png b/public/en/documents/asset/gl/img/surface-taa.png
deleted file mode 100644
index e3f1676..0000000
Binary files a/public/en/documents/asset/gl/img/surface-taa.png and /dev/null differ
diff --git a/public/en/documents/asset/gl/img/view-alpha-beta.png b/public/en/documents/asset/gl/img/view-alpha-beta.png
deleted file mode 100644
index 1199994..0000000
Binary files a/public/en/documents/asset/gl/img/view-alpha-beta.png and /dev/null differ
diff --git a/public/en/documents/asset/img/aria-example.png b/public/en/documents/asset/img/aria-example.png
deleted file mode 100644
index 79c8b77..0000000
Binary files a/public/en/documents/asset/img/aria-example.png and /dev/null differ
diff --git a/public/en/documents/asset/img/axis-align-with-label.png b/public/en/documents/asset/img/axis-align-with-label.png
deleted file mode 100644
index e5ec04e..0000000
Binary files a/public/en/documents/asset/img/axis-align-with-label.png and /dev/null differ
diff --git a/public/en/documents/asset/img/custom-build-line.png b/public/en/documents/asset/img/custom-build-line.png
deleted file mode 100644
index 8b16a79..0000000
Binary files a/public/en/documents/asset/img/custom-build-line.png and /dev/null differ
diff --git a/public/en/documents/asset/img/custom-build-pie.png b/public/en/documents/asset/img/custom-build-pie.png
deleted file mode 100644
index 041aeb5..0000000
Binary files a/public/en/documents/asset/img/custom-build-pie.png and /dev/null differ
diff --git a/public/en/documents/asset/img/echarts-aria.jpg b/public/en/documents/asset/img/echarts-aria.jpg
deleted file mode 100644
index f654c23..0000000
Binary files a/public/en/documents/asset/img/echarts-aria.jpg and /dev/null differ
diff --git a/public/en/documents/asset/img/gl/bar3D-2d-data.png b/public/en/documents/asset/img/gl/bar3D-2d-data.png
deleted file mode 100644
index 65a591a..0000000
Binary files a/public/en/documents/asset/img/gl/bar3D-2d-data.png and /dev/null differ
diff --git a/public/en/documents/asset/img/gl/bar3D.png b/public/en/documents/asset/img/gl/bar3D.png
deleted file mode 100644
index 7f8b504..0000000
Binary files a/public/en/documents/asset/img/gl/bar3D.png and /dev/null differ
diff --git a/public/en/documents/asset/img/gl/grid3D-basic.png b/public/en/documents/asset/img/gl/grid3D-basic.png
deleted file mode 100644
index 170046c..0000000
Binary files a/public/en/documents/asset/img/gl/grid3D-basic.png and /dev/null differ
diff --git a/public/en/documents/asset/img/gl/scatter3D-color.png b/public/en/documents/asset/img/gl/scatter3D-color.png
deleted file mode 100644
index 99a00e8..0000000
Binary files a/public/en/documents/asset/img/gl/scatter3D-color.png and /dev/null differ
diff --git a/public/en/documents/asset/img/gl/scatter3D-gaussian.png b/public/en/documents/asset/img/gl/scatter3D-gaussian.png
deleted file mode 100644
index 652734e..0000000
Binary files a/public/en/documents/asset/img/gl/scatter3D-gaussian.png and /dev/null differ
diff --git a/public/en/documents/asset/img/gl/scatter3D-life.png b/public/en/documents/asset/img/gl/scatter3D-life.png
deleted file mode 100644
index 9a31b4b..0000000
Binary files a/public/en/documents/asset/img/gl/scatter3D-life.png and /dev/null differ
diff --git a/public/en/documents/asset/img/gl/scatter3D-life2.png b/public/en/documents/asset/img/gl/scatter3D-life2.png
deleted file mode 100644
index 4b3e8db..0000000
Binary files a/public/en/documents/asset/img/gl/scatter3D-life2.png and /dev/null differ
diff --git a/public/en/documents/asset/img/gl/surface.png b/public/en/documents/asset/img/gl/surface.png
deleted file mode 100644
index adf4cc2..0000000
Binary files a/public/en/documents/asset/img/gl/surface.png and /dev/null differ
diff --git a/public/en/documents/asset/img/smooth-algorithm.png b/public/en/documents/asset/img/smooth-algorithm.png
deleted file mode 100644
index 8f322dc..0000000
Binary files a/public/en/documents/asset/img/smooth-algorithm.png and /dev/null differ
diff --git a/public/en/documents/asset/img/smooth-monotone-none.png b/public/en/documents/asset/img/smooth-monotone-none.png
deleted file mode 100644
index c620225..0000000
Binary files a/public/en/documents/asset/img/smooth-monotone-none.png and /dev/null differ
diff --git a/public/en/documents/asset/img/smooth-monotone-x.png b/public/en/documents/asset/img/smooth-monotone-x.png
deleted file mode 100644
index 0cc3025..0000000
Binary files a/public/en/documents/asset/img/smooth-monotone-x.png and /dev/null differ
diff --git a/public/en/documents/asset/img/smooth-non-monotone-x.png b/public/en/documents/asset/img/smooth-non-monotone-x.png
deleted file mode 100644
index 4d520e2..0000000
Binary files a/public/en/documents/asset/img/smooth-non-monotone-x.png and /dev/null differ
diff --git a/public/en/documents/asset/img/smooth-old-problem.png b/public/en/documents/asset/img/smooth-old-problem.png
deleted file mode 100644
index f0a7796..0000000
Binary files a/public/en/documents/asset/img/smooth-old-problem.png and /dev/null differ
diff --git a/public/en/documents/asset/img/smooth-old-vs-new.png b/public/en/documents/asset/img/smooth-old-vs-new.png
deleted file mode 100644
index 3f47e50..0000000
Binary files a/public/en/documents/asset/img/smooth-old-vs-new.png and /dev/null differ
diff --git a/public/en/documents/asset/img/treemap-border-gap.png b/public/en/documents/asset/img/treemap-border-gap.png
deleted file mode 100644
index e754562..0000000
Binary files a/public/en/documents/asset/img/treemap-border-gap.png and /dev/null differ
diff --git a/public/en/documents/changelog.html b/public/en/documents/changelog.html
deleted file mode 100644
index 4968081..0000000
--- a/public/en/documents/changelog.html
+++ /dev/null
@@ -1,1209 +0,0 @@
-<h2 id="v4-6-0">v4.6.0</h2>
-<div class="time"></div>
-
-<ul>
-<li><p>[Feature] Optimize label layout on pie. Add new <code>alignTo</code> option for aligning the labels. Check more detail in PR <a href="https://github.com/apache/incubator-echarts/pull/11715">#11715</a> (<a href="https://github.com/Ovilia">Wenli Zhang</a>)</p>
-</li>
-<li><p>[Feature] Add <code>minorTick</code>, <code>minorSplitLine</code> on axis. Check more detail in the PR <a href="https://github.com/apache/incubator-echarts/pull/11705">#11705</a> (<a href="https://github.com/pissang">Yi Shen</a>)</p>
-</li>
-<li><p>[Feature] Added more themes. <a href="https://github.com/apache/incubator-echarts/pull/11566">#11566</a> (<a href="https://github.com/WebCodePro719">WebCodePro719</a>)</p>
-</li>
-<li><p>[Enhance] Chart will keep the dragging status when mouse is out of the area. Which will provide a much better dragging experience. <a href="https://github.com/apache/incubator-echarts/pull/11710">#11710</a> (<a href="https://github.com/100pah">Shuang Su</a>)</p>
-</li>
-<li><p>[Enhance] Legend will display colors from <code>visualMap</code> component in <code>pie</code>/<code>funnel</code>/<code>radar</code> series. <a href="https://github.com/apache/incubator-echarts/pull/11737">#11737</a> (<a href="https://github.com/pissang">Yi Shen</a>)</p>
-</li>
-<li><p>[Enhance] Enhance dataset default encode guess strategy. <a href="https://github.com/apache/incubator-echarts/pull/11746">#11746</a> (<a href="https://github.com/100pah">Shuang Su</a>)</p>
-</li>
-<li><p>[Enhance] Stack icon on toolbox now is a toggle button. Removed tiled icon. <a href="https://github.com/apache/incubator-echarts/pull/11367">#11367</a> (<a href="https://github.com/alex2wong">alex2wong</a>)</p>
-</li>
-<li><p>[Enhance] Add a delay to avoid flashing when hovering on nodes and edges of <code>graph</code> and <code>sankey</code> series. <a href="https://github.com/apache/incubator-echarts/pull/11572">11572</a> (<a href="https://github.com/apache/incubator-echarts/pull/11457">Deqing Li</a>)</p>
-</li>
-<li><p>[Fix] Fix bar width calculation with <code>barMaxWidth</code> constraint and negative <code>barGap</code>. <a href="https://github.com/apache/incubator-echarts/pull/11713">#11713</a> (<a href="https://github.com/pissang">Yi Shen</a>)</p>
-</li>
-<li><p>[Fix] Fix seams in <code>heatmap</code> series. Which may cause unexpected gray lines. <a href="https://github.com/apache/incubator-echarts/pull/11689">#11689</a> (<a href="https://github.com/pissang">Yi Shen</a>)</p>
-</li>
-<li><p>[Fix] Fix unexpected highlight state after inverse selection in <code>legend</code>. <a href="https://github.com/apache/incubator-echarts/pull/11547">#11547</a> (<a href="https://github.com/SnailSword">SnailSword</a>)</p>
-</li>
-<li><p>[Fix] Fix tooltip may highlight the point out of chart in <code>line</code> series. <a href="https://github.com/apache/incubator-echarts/pull/11548">#11548</a> (<a href="https://github.com/SnailSword">SnailSword</a>)</p>
-</li>
-<li><p>[Fix] Fix label may not disappear on SVG renderer. <a href="https://github.com/ecomfe/zrender/pull/535">ecomfe/zrender#535</a> (<a href="https://github.com/Ovilia">Wenli Zhang</a>)</p>
-</li>
-<li><p>[Fix] Not display bar on polar when value is <code>0</code>. <a href="https://github.com/apache/incubator-echarts/issues/11452">#11452</a> (<a href="https://github.com/foolzhang">foolzhang</a>)</p>
-</li>
-<li><p>[Fix] Fix logic issue in global <code>textStyle</code>. <a href="https://github.com/apache/incubator-echarts/pull/11653">#11653</a> (<a href="https://github.com/code4fan">code4fan</a>)</p>
-</li>
-<li><p>[Fix] Fix label color of <code>axisPointer</code> in dark theme. <a href="https://github.com/apache/incubator-echarts/pull/11656">#11656</a> (<a href="https://github.com/asiOvOtus">asiOvOtus</a>)</p>
-</li>
-<li><p>[Fix] Fix <code>markPoint</code> out of the chart may still display in the wrong position. <a href="https://github.com/apache/incubator-echarts/pull/11484">#11484</a> (<a href="https://github.com/susiwen8">susiwen8</a>)</p>
-</li>
-<li><p>[Fix] Fix tooltip shows multiple values around both sides of the pointer. <a href="https://github.com/apache/incubator-echarts/pull/11648">#11648</a> (<a href="https://github.com/100pah">Shuang Su</a>)</p>
-</li>
-<li><p>[Fix] Fix <code>label.formatter</code> of leaves in <code>tree</code> series not work. <a href="https://github.com/apache/incubator-echarts/pull/11556">#11556</a> (<a href="https://github.com/apache/incubator-echarts/pull/11457">Deqing Li</a>)</p>
-</li>
-<li><p>[Fix] Fix overflow symbol not display when <code>clip</code> is set <code>false</code> in <code>line</code> series. <a href="https://github.com/apache/incubator-echarts/pull/11552">#11552</a> (<a href="https://github.com/SnailSword">SnailSword</a>)</p>
-</li>
-</ul>
-<h2 id="v4-5-0">v4.5.0</h2>
-<div class="time">2019-11-18</div>
-
-<ul>
-<li><p>[Feature] Add <code>roundCap</code> option for round corners on <code>bar</code> series width <code>polar</code> coordinate system. <a href="https://github.com/apache/incubator-echarts/pull/11393">#11393</a> (<a href="https://github.com/Ovilia">Wenli Zhang</a>)</p>
-</li>
-<li><p>[Feature] Add event <code>brushEnd</code> for <code>brush</code> component <a href="https://github.com/apache/incubator-echarts/pull/11285">#11285</a>(<a href="https://github.com/cuijian-dexter">Jian Cui</a>)</p>
-</li>
-<li><p>[Feature] Add <code>friction</code> option in force layout of <code>graph</code>. <a href="https://github.com/apache/incubator-echarts/pull/11276">#11276</a> (<a href="https://github.com/pissang">Yi Shen</a>)</p>
-</li>
-<li><p>[Feature] Add <code>ignoreFoceLayout</code> option in the <code>graph</code> links. <a href="https://github.com/apache/incubator-echarts/pull/11445">#11445</a> (<a href="https://github.com/TYzzt">TYzzt</a>)</p>
-</li>
-<li><p>[Feature] Add <code>axisType</code> in the indicator of <code>radar</code> series. <a href="https://github.com/apache/incubator-echarts/pull/11324">#11324</a>(<a href="https://github.com/zifix">zifix</a>)</p>
-</li>
-</ul>
-<ul>
-<li><p>[Feature] Add <code>clip</code> option in <code>candllestick</code> series. <a href="https://github.com/apache/incubator-echarts/pull/11529">#11529</a> (<a href="https://github.com/pissang">Yi Shen</a>)</p>
-</li>
-<li><p>[Fix] Fix lots of label positioning issues in SVG renderer. <a href="https://github.com/ecomfe/zrender/pull/519">ecomfe/zrender#519</a> (<a href="https://github.com/100pah">Shuang Su</a>)</p>
-</li>
-<li><p>[Fix] Fix interval issues related to category axis tick. Like <code>areaStyle.color</code> is incorrect in <a href="https://github.com/apache/incubator-echarts/issues/10948">#10948</a>, <code>xAxis.axisTick.interval</code> is calculated incorrectly in <a href="https://github.com/apache/incubator-echarts/pull/11176">#11176</a> . <a href="https://github.com/apache/incubator-echarts/pull/11186">#11186</a> (<a href="https://github.com/foolzhang">foolzhang</a>)</p>
-</li>
-<li><p>[Fix] Fix <code>bar</code> series can't display on the <code>log</code> axis. <a href="https://github.com/apache/incubator-echarts/pull/11472">#11472</a>(<a href="https://github.com/SnailSword">SnailSword</a>)</p>
-</li>
-<li><p>[Fix] Fix tooltip may be covered by the canvas when <code>-webkit-overflow-scrolling: touch</code> on iOS 13. <a href="https://github.com/ecomfe/zrender/pull/522">ecomfe/zrender#522</a> (<a href="https://github.com/100pah">Shuang Su</a>)</p>
-</li>
-<li><p>[Fix] Fix some of labels on category axis may disappear forever after chart resized. <a href="https://github.com/apache/incubator-echarts/pull/11536">#11536</a> (<a href="https://github.com/100pah">Shuang Su</a>)</p>
-</li>
-<li><p>[Fix] Fix brush drag gets stuck when the mouse leaves the chart area. <a href="https://github.com/apache/incubator-echarts/pull/11516">#11516</a> (<a href="https://github.com/100pah">Shuang Su</a>)</p>
-</li>
-<li><p>[Fix] Fix image symbol may disappear forever after legend toggled. <a href="https://github.com/apache/incubator-echarts/pull/11515">#11515</a> (<a href="https://github.com/yufeng04">Feng Yu</a>)</p>
-</li>
-<li><p>[Fix] Fix changing from <code>'scroll'</code> type to <code>'plain'</code> type not work bug in legend. <a href="https://github.com/apache/incubator-echarts/pull/11504">#11504</a> (<a href="https://github.com/yufeng04">Feng Yu</a>)</p>
-</li>
-<li><p>[Fix] Optimize layout and bar width of <code>bar</code> series on <code>time</code> axis and <code>value</code> axis. Make the <code>barMaxWidth</code> has higher priority than <code>barWidth</code>. Add <code>barMinWidth</code> for <code>bar</code> series on <code>time</code> axis and <code>value</code> axis. <a href="https://github.com/apache/incubator-echarts/pull/11479">#11479</a> (<a href="https://github.com/Ovilia">Wenli Zhang</a>, <a href="https://github.com/100pah">Shuang [...]
-</li>
-<li><p>[Fix] Fix title of toolbox icon may be cut by the container. <a href="https://github.com/apache/incubator-echarts/pull/11456">#11456</a> (<a href="https://github.com/Ovilia">Wenli Zhang</a>)</p>
-</li>
-<li><p>[Fix] Fix precision issue in the ticks calculating. <a href="https://github.com/apache/incubator-echarts/pull/11488">#11488</a> (<a href="https://github.com/Ovilia">Wenli Zhang</a>)</p>
-</li>
-<li><p>[Fix] Fix <code>rotate</code> property of label not work in <code>tree</code> series. <a href="https://github.com/apache/incubator-echarts/pull/11457">#11457</a> (<a href="https://github.com/apache/incubator-echarts/pull/11457">Deqing Li</a>)</p>
-</li>
-<li><p>[Fix] Fix edge won't disappear after collapsed if the <code>id</code> is duplicated in <code>tree</code> series. <a href="https://github.com/apache/incubator-echarts/pull/11447">#11447</a> (<a href="https://github.com/apache/incubator-echarts/pull/11457">Deqing Li</a>)</p>
-</li>
-<li><p>[Fix] Fix data disappear when updating with <code>dataset</code> in <code>gauge</code> series. <a href="https://github.com/apache/incubator-echarts/pull/11373">#11373</a> (<a href="https://github.com/Ovilia">Wenli Zhang</a>)</p>
-</li>
-<li><p>[Fix] Fix gradient on bar leaked to label in SVG Renderer. (<a href="https://github.com/Ovilia">Wenli Zhang</a>) </p>
-</li>
-</ul>
-<h2 id="v4-4-0">v4.4.0</h2>
-<div class="time">2019-10-15</div>
-
-<ul>
-<li><p>[Feature] Add option <code>clip</code> for <code>line</code>, <code>bar</code>, <code>lines</code>, <code>scatter</code> and <code>custom series</code>,
-which prevents the shapes overflow the area of the coordinate system. And support setting
-<code>filterMode</code> on <code>toolbox.dataZoom</code>. Fix #9200, #10224, #10748, #11086.</p>
-</li>
-<li><p>[Feature] Support "select all" and "reverse select" buttons in <code>legend</code>. See <code>legend.selector</code> for details.</p>
-</li>
-<li><p>[Feature] Provide <code>echarts.graphic.registerShape</code> and <code>echarts.graphic.getShapeClass</code>.
-The registered shape classes can be used in <code>custom series</code> and <code>graphic component</code>.</p>
-</li>
-<li><p>[Feature] Support show border style on <code>legend</code> item. Support setting <code>itemStyle</code> on <code>legend</code>. Fix #7340.</p>
-</li>
-<li><p>[Feature] Support expansion animation for data update, support <code>pie-series.animationTypeUpdate</code>. Fix #11029.</p>
-</li>
-<li><p>[Feature] Support setting <code>rippleEffect.color</code> in <code>effectScatter</code>.</p>
-</li>
-<li><p>[Feature] Support using BaiduMap API version 3.0 in bmap by option <code>bmap.mapStyleV2</code>.</p>
-</li>
-<li><p>[Fix] Fix that the stacked bar exceed zoom limit.
-Fix #7534, #7672, #7732, #7872, #8069, #8520, #8935, #8955, #9200, #9237, #9847, #10359, #10518, #10972.</p>
-</li>
-<li><p>[Fix] Fix that sometimes when using "toolbox dataZoom" it can not return to the original state. Fix #11055.</p>
-</li>
-<li><p>[Fix] Fix the texture pattern rendering in <code>map</code> and <code>geo</code>. And Fix that the the shadow of them are different between canvas renderer and SVG renderer. Fix #11055, #5429.</p>
-</li>
-<li><p>[Fix] Fix that data does not rendered after a <code>NaN</code> value in candlestick. Fix #11101.</p>
-</li>
-<li><p>[Fix] Fix <code>geo.label.formatter</code> does not work. Fix #8489.</p>
-</li>
-<li><p>[Fix] Fix the hover style incorrect in <code>custom series</code>. Fix #11103.</p>
-</li>
-<li><p>[Fix] Fix that tree root node disappears after roaming. Fix #10291, #10986, #10164, #9580, #9256, #9216.</p>
-</li>
-<li><p>[Fix] Fix that SVG renderer should render normally despite hover layer set. Fix #11054.</p>
-</li>
-<li><p>[Fix] Add dispose checking for chart instance.</p>
-</li>
-</ul>
-<h2 id="v4-3-0">v4.3.0</h2>
-<div class="time">2019-09-16</div>
-
-<ul>
-<li><p>[Feature] Sankey diagram enhancement:
-Add left/right node align, right in sankey diagram.
-Support user to specify the depth of the node.
-Enhance sankey node tooltip formatter.
-Add depth layout info for each node.</p>
-</li>
-<li><p>[Feature] Support callback in <code>series.symbol</code>. Contributed by PR #9664 originally.</p>
-</li>
-<li><p>[Feature] Enhance Pie chart:
-Support <code>minShowLabelAngle</code>. Contributed by PR #8997 originally.
-Support label rotate in pie chart. Fix #10045.</p>
-</li>
-<li><p>[Feature] Support <code>backgroundColor</code> for connected charts in toolbox. <code>toolbox.feature.saveAsImage.connectedBackgroundColor</code> can be used to set the background color. Fix #10099.</p>
-</li>
-<li><p>[Feature] Enhance toolbox:
-Enable to set text style of toolbox.
-Support tooltip for toolbox. Fix #10202.</p>
-</li>
-<li><p>[Feature] Enhance dataZoom:
-Normalize illegal range setting and get accurate <code>start</code>/<code>end</code>/<code>startValue</code>/<code>endValue</code> in <code>'dataZoom'</code> event.</p>
-</li>
-<li><p>[Feature] Add <code>dimensionNames</code> and <code>encode</code> info to callback parameters of formatters. Fix #10248 and Close #10250.</p>
-</li>
-<li><p>[Feature] Funnel enhancement:
-<code>series.label.position</code> support to set <code>rightTop</code>, <code>rightBottom</code>, <code>leftTop</code>, <code>leftBottom</code>. And fix style in funnel text position.</p>
-</li>
-<li><p>[Fix] Support mouse event in iOS when css transform used. Fix #9434, #8326, #5009, #5921.</p>
-</li>
-<li><p>[Fix] Use a clearer warning message when initing dom without size. Fix #10478.</p>
-</li>
-<li><p>[Fix] Fix that the rgba opacity does not work in SVG renderer. Fix #9014</p>
-</li>
-<li><p>[Fix] Enhance funnel chart label display policy PR #8759</p>
-</li>
-<li><p>[Fix] Fix the highlight/downplay of pie graphic.</p>
-</li>
-<li><p>[Fix] Fix the mouse pointer in force graph. Fix #7764, contributed by PR #9134.</p>
-</li>
-<li><p>[Fix] Fix that <code>symbol</code> and <code>symbolSize</code> and <code>opacity</code> does not work in <code>series[i]-graph.categories[i]</code>. Fix #8009 and #5969, contributed by PR #9171.</p>
-</li>
-<li><p>[Fix] Fix that <code>axisLine.show</code> does not work in the gauge. Fix #9194, contributed by PR #9195.</p>
-</li>
-<li><p>[Fix] Fix a display error when the first data item is '-' in radar. Fix 8962.</p>
-</li>
-<li><p>[Fix] Fix polygon rendering bug when the first value is <code>NaN</code>. Fix #8962, contributed by PR #9162.</p>
-</li>
-<li><p>[Fix] Fix text truncate bug in treemap when using SVG renderer.</p>
-</li>
-<li><p>[Fix] Fix that <code>label.rotate</code> does not work in graph. Fix #9182, contributed by PR #9210.</p>
-</li>
-<li><p>[Fix] Fix the rich content hiding bug and confine bug in tooltip. Fix ecomfe/echarts-for-weixin#360, ecomfe/echarts-for-weixin#347.</p>
-</li>
-<li><p>[Fix] Fix that callback function params.color is incorrect in sunburst area. Fix #8952, contributed by PR #9238.</p>
-</li>
-<li><p>[Fix] Fix that when <code>axisLabel.interval</code> of a category axis is set as <code>0</code>, all labels are displayed regardless of overlap. Fix #9589.</p>
-</li>
-<li><p>[Fix] Fix sub-pixel in markLine. Move subPixelOptimize to zrender. Fix #9598.</p>
-</li>
-<li><p>[Fix] Fix that when doing clear on click handler error is thrown. Fix #9649.</p>
-</li>
-<li><p>[Fix] Fix that <code>false</code> value in data items effect subsequent items in <code>visualMap</code>. Fix #8799.</p>
-</li>
-<li><p>[Fix] Enhance <code>hoverStyle</code> and <code>highlight</code>/<code>downplay</code> API. Support keep highlighted when changing style (e.g., <code>setOption</code> or <code>hoverLink</code>). Fix the highlight conflict.</p>
-</li>
-<li><p>[Fix] Fix radar line disappear on hover when there is empty value in data.</p>
-</li>
-<li><p>[Fix] Fix that geo map panning not working on Edge browser. Fix #9479.</p>
-</li>
-<li><p>[Fix] Fix map label bugs:
-Fix map rich label missing when missing data.
-Fix map label miss to enter formatter when missing data.
-Fix #9682.</p>
-</li>
-<li><p>[Fix] Enable <code>triggerEvent</code> for label of <code>angleAxis</code>. Fix #9765.</p>
-</li>
-<li><p>[Fix] Fix that the hover style bugs of graph:
-Fix that the hover style is disabled by <code>focusNodeAdjacency</code> in graph.
-Fix that the line label can not be returned to its original opacity after <code>"focusNodeAdjacency"</code>.</p>
-</li>
-<li><p>[Fix] Lift the axis line arrow over splitLine and tick.</p>
-</li>
-<li><p>[Fix] Fix that the scrollable legend pager does not work when the target index is illegal. Fix #7568.</p>
-</li>
-<li><p>[Fix] Exclude padding from tooltip position, since it's included in clientWidth. Contributed by PR #9750.</p>
-</li>
-<li><p>[Fix] Fix <code>barWidth</code> calculation when stack on multiple polars. Fix #9626.</p>
-</li>
-<li><p>[Fix] Loop to find the first non-NaN angle for clipPath in pie.</p>
-</li>
-<li><p>[Fix] Fix line width in singleAxis. Fix #9965.</p>
-</li>
-<li><p>[Fix] Fix the label bounding rect calculation error when <code>rich</code> used (e.g., containLabel: true while axisLabel has rich).</p>
-</li>
-<li><p>[Fix] Part of emphasis in sunburst do not work. Fix #9563, constributed by PR #9993.</p>
-</li>
-<li><p>[Fix] Add <code>seriesId</code> in <code>pieselectchanged</code>. Fix #9830.</p>
-</li>
-<li><p>[Fix] Fix that axis name align does not work. Fix #9901.</p>
-</li>
-<li><p>[Fix] Fix taht the strange label position when the pie chart series data value is <code>null</code>. Fix #10088.</p>
-</li>
-<li><p>[Fix] Do not create an anchor element if you don't need to in <code>SaveAsImage</code>. Contributed by PR #10132.</p>
-</li>
-<li><p>[Fix] Fix that <code>axisLabel</code> dost not display correctly in radar. Fix #9282, contributed by PR #10036.</p>
-</li>
-<li><p>[Fix] Fix that bar chart is abnormal when <code>filterMode</code> of <code>dataZoom</code> is 'empty'. Fix #9882.</p>
-</li>
-<li><p>[Fix] Fix <code>series.label.formatter</code> callback bug. Fix #10248, contributed by PR #10250.</p>
-</li>
-<li><p>[Fix] Fix that the last axis labels are duplicated. Fix #10304.</p>
-</li>
-<li><p>[Fix] Fix that setting <code>emphasis.lineStyle.type</code> as <code>solid</code> dose not work. Fix #9704, close #10129.</p>
-</li>
-<li><p>[Fix] Fix that if some negetive numbers or strings existing in the dimensions array, the corresponding line will not show. Fix #10343.</p>
-</li>
-<li><p>[Fix] Fix that when <code>'0'</code> existing in dimentions the chart do not work. Make backward compat when dimention is a number-like string. Fix #9363, contributed by PR #9388.</p>
-</li>
-<li><p>[Fix] Fix hover style on <code>textStroke</code> bug in custom series.</p>
-</li>
-<li><p>[Fix] Fix graph bug when data is number typed. Fix #10485.</p>
-</li>
-<li><p>[Fix] Fix that <code>axisPointer</code> label padding does not work. Fix #10569.</p>
-</li>
-<li><p>[Fix] Add <code>dimIndex</code> for callback formatter in radar. Close #10403, #10180, contributed PR #10437.</p>
-</li>
-<li><p>[Fix] Prevent treamap from using hover layer by default. Fix #10521. Ref #10635.</p>
-</li>
-<li><p>[Fix] Update pointer when type is none. Fix #10570.</p>
-</li>
-<li><p>[Fix] Enhance circular layout: based on symbol size and fix overlap when some value are very smaller than the max value. Fix #10462, Close #10615.</p>
-</li>
-<li><p>[Fix] Support click and tooltip in bar large mode. Fix #10699.</p>
-</li>
-</ul>
-<h2 id="v4-2-1">v4.2.1</h2>
-<div class="time">2019-03-21</div>
-
-<ul>
-<li><p>[Fix] Fix text cache problem. See <a href="https://github.com/apache/incubator-echarts/issues/9190">#9190</a>, <a href="https://github.com/apache/incubator-echarts/issues/9597">#9597</a>, <a href="https://github.com/apache/incubator-echarts/issues/9762">#9762</a>.</p>
-</li>
-<li><p>[Fix] Fix that in some case re-<code>setOption</code> in event handler throws error. See <a href="https://github.com/apache/incubator-echarts/issues/9649">#9649</a>.</p>
-</li>
-<li><p>[Fix] Fix that geo region problem causes <code>showTip</code> abnormal. See <a href="https://github.com/apache/incubator-echarts/issues/9156">#9156</a>.</p>
-</li>
-<li><p>[Fix] Fix that stacked bars are over cartesian in some cases. See <a href="https://github.com/apache/incubator-echarts/issues/9346">#9346</a>.</p>
-</li>
-<li><p>[Fix] Fix that legend is not able to scroll when the space is not enough to contain one item. See <a href="https://github.com/apache/incubator-echarts/issues/6743">#6743</a>, <a href="https://github.com/apache/incubator-echarts/issues/8971">#8971</a>, <a href="https://github.com/apache/incubator-echarts/issues/9471">#9471</a>.</p>
-</li>
-<li><p>[Fix] Fix that the centered pie label might has some bias on some angles. See <a href="https://github.com/apache/incubator-echarts/issues/9657">#9657</a>.</p>
-</li>
-<li><p>[Fix] Fix that Geo map panning is not working on MS Edge browser See <a href="https://github.com/apache/incubator-echarts/issues/9479">#9479</a>.</p>
-</li>
-<li><p>[Fix] Fix that label dispaly problem in map series. See <a href="https://github.com/apache/incubator-echarts/issues/9682">#9682</a>.</p>
-</li>
-<li><p>[Fix] Fix that <code>visualMap: false</code> set on data items makes subsequent items abnormal. See <a href="https://github.com/apache/incubator-echarts/issues/8799">#8799</a>.</p>
-</li>
-<li><p>[Fix] When <code>axisLabel.interval</code> of a category axis is set as <code>0</code>, all labels show regardless of overlap. See <a href="https://github.com/apache/incubator-echarts/issues/9589">#9589</a>.</p>
-</li>
-<li><p>[Fix] Fix grid(cartesian) did not render when both containLabel and axisLabel.rich used.</p>
-</li>
-<li><p>[Fix] Fix license statement.</p>
-</li>
-<li><p>[Fix] Fix rich text boundingRect bug.</p>
-</li>
-</ul>
-<h2 id="v4-2-0-rc2">v4.2.0.rc2</h2>
-<div class="time">2018-10-15</div>
-
-<p>Recovery build</p>
-<p>Fix the problem that bar progressive was blocked.</p>
-<h2 id="v4-2-0-rc1">v4.2.0.rc1</h2>
-<div class="time">2018-09-11</div>
-
-<ul>
-<li><p><strong>[Feature] Support non-html tooltip</strong>, which enable show tooltip on non-html environment, for example, WeChat Mini App. Use <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#tooltip.renderMode">tooltip.renderMode</a> to enable this feature.</p>
-</li>
-<li><p><strong>[Feature] Support event filtering</strong>, which enable listen event triggered by specified component, series, data items. See <a href="https://ecomfe.github.io/echarts-doc/public/en/api.html#echartsInstance.on">chart.on</a> for details, where a new parameter <code>query</code> provided this feature. Support event listening for <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom">custom series</a> and <a href="https://ecomfe.github.io/echarts [...]
-</li>
-<li><p><strong>[Feature] Enable implementing scroll bar</strong> by dataZoom (similar behavior as the browser scroll bar), see <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#dataZoom-inside.moveOnMouseWheel">dataZoom-inside.moveOnMouseWheel</a>, and see the <a href="https://ecomfe.github.io/echarts-examples/public/editor.html?c=custom-gantt-flight">Gantt example</a>.</p>
-</li>
-<li><p>[Feature] Support focusing node adjacency in sankey diagram. See <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-sankey.focusNodeAdjacency">focusNodeAdjacency</a> and <a href="https://ecomfe.github.io/echarts-examples/public/editor.html?c=sankey-product">example</a>.</p>
-</li>
-<li><p>[Feature] Support vertical layout of sankey diagram, see <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-sankey.orient">series-sankey.orient</a> and <a href="https://ecomfe.github.io/echarts-examples/public/editor.html?c=sankey-vertical">Vertical sankey example</a>.</p>
-</li>
-<li><p>[Feature] Support roam for tree diagram. See <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-tree.roam">series-tree.roam</a>.</p>
-</li>
-<li><p>[Feature] Enable to set an axis as <code>-1</code> in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.encode">encode</a> for <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom">custom series</a>, which indicates that the axis and its corresponding dataZoom do not control any dimension of the series (either calculate axis extent by this series nor scale or filter this series). See <a href="https://ecomfe.github.io/ech [...]
-</li>
-<li><p>[Feature] Enable layout <code>'cover'</code> in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.return_path.shape.layout">path shape</a> for <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom">custom series</a>, which brings convenience when using <a href="http://www.w3.org/TR/SVG/paths.html#PathData">SVG PathData</a> create shapes. See <a href="https://ecomfe.github.io/echarts-examples/public/edit [...]
-</li>
-<li><p>[Feature] Enhance <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom">custom series</a>: Added <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.params">params.actionType</a>, enables some optimize. And add<a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.params">params.coordSys.zoom</a> for geo coordinate system. Add <a href="https://ecomfe.gith [...]
-</li>
-<li><p>[Feature] Support inner radius for <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#radar.radius">radar</a>. See <a href="https://github.com/apache/incubator-echarts/issues/8717">#8717</a>.</p>
-</li>
-<li><p>[Fix] Fix polar category axis interval bug. See <a href="https://github.com/apache/incubator-echarts/issues/8791">#8791</a>.</p>
-</li>
-<li><p>[Fix] Do not support set polar center on series. Center should be set on <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#polar.center">polar.center</a>.</p>
-</li>
-<li><p>[Fix] Update normal shadow style for <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-sunburst">sunburst</a>. See <a href="https://github.com/apache/incubator-echarts/issues/8583">#8583</a>.</p>
-</li>
-<li><p>[Fix] Fix empty <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#dataset">dataset</a> problem. See <a href="https://github.com/apache/incubator-echarts/issues/8395">#8395</a>.</p>
-</li>
-<li><p>[Fix] Fix bar start position when multiple axes exists. See <a href="https://github.com/apache/incubator-echarts/issues/8747">#8747</a>.</p>
-</li>
-<li><p>[Fix] Remove clipPath for expansion animation. See <a href="https://github.com/apache/incubator-echarts/issues/8994">#8994</a>.</p>
-</li>
-<li><p>[Fix] Fix axes overlap when two Y axes are on one X axis. See <a href="https://github.com/apache/incubator-echarts/issues/8975">#8975</a>.</p>
-</li>
-</ul>
-<h2 id="v4-1-0">v4.1.0</h2>
-<div class="time">2018-05-02</div>
-
-<ul>
-<li><p>[Feature] Enable candlestick and bar chart rendering and zooming in a large amount of data (200K). Add option <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-candlestick.progressiveChunkMode">series-candlestick.progressiveChunkMode</a> to enhance the effect when progressively rendering. See example <a href="https://ecomfe.github.io/echarts-examples/public/editor.html?c=candlestick-large">candlestick-large</a>.</p>
-</li>
-<li><p>[Feature] Add tree directions from right to left, from bottom to top for tree series. <a href="https://github.com/apache/incubator-echarts/issues/7351">#7351</a> <a href="https://github.com/apache/incubator-echarts/issues/7154">#7154</a>. See example <a href="https://ecomfe.github.io/echarts-examples/public/editor.html?c=tree-orient-right-left">tree-orient-right-left</a>, <a href="https://ecomfe.github.io/echarts-examples/public/editor.html?c=tree-vertical">tree-vertical</a>.</p>
-</li>
-<li><p>[Feature] Support keeping-aspect for legend path. <a href="https://github.com/apache/incubator-echarts/issues/7831">#7831</a></p>
-</li>
-<li><p>[Feature] Support node dragging for sankey chart. See example <a href="https://ecomfe.github.io/echarts-examples/public/editor.html?c=sankey-energy">sankey-energy</a>.</p>
-</li>
-<li><p>[Enhance] Category axis enhancement:</p>
-<ul>
-<li>Optimize the performance in a large amount of data (> 100K ~ 1M)</li>
-<li>Enhance the auto interval strategy.</li>
-<li>Enhance the animation when zooming and moving the data window of cartesian.</li>
-</ul>
-</li>
-<li><p>[Enhance] In line chart, enhance symbol display strategy when using category axis (see <code>showAllSymbol:'auto'</code>).</p>
-</li>
-<li><p>[Enhance] Support that lift the brushed elements to the top (add option <code>visualMap.inRange.liftZ</code>).</p>
-</li>
-<li><p>[Enhance] Enhance the order of nodes for sankey diagram. <a href="https://github.com/apache/incubator-echarts/issues/3390">#3390</a> <a href="https://github.com/apache/incubator-echarts/issues/3543">#3543</a> <a href="https://github.com/apache/incubator-echarts/issues/6365">#6365</a> <a href="https://github.com/apache/incubator-echarts/issues/4880">#4880</a> <a href="https://github.com/apache/incubator-echarts/issues/4986">#4986</a></p>
-</li>
-<li><p>[Enhance] Enhance sampling performance in progressive mode.</p>
-</li>
-<li><p>[Enhance] Enhance parallel performance in progressive mode.</p>
-</li>
-<li><p>[Enhance] Currently do not filter empty data item in data zoom, which makes line chart keeping broken. <a href="https://github.com/apache/incubator-echarts/issues/7955">#7955</a></p>
-</li>
-<li><p>[Enhance] Support toolbox.feature merge.</p>
-</li>
-<li><p>[Fix] Resolve browser become unresponsive when the data of sankey series has cycle. <a href="https://github.com/apache/incubator-echarts/issues/7495">#7495</a> <a href="https://github.com/apache/incubator-echarts/issues/8117">#8117</a> <a href="https://github.com/apache/incubator-echarts/issues/7583">#7583</a> <a href="https://github.com/apache/incubator-echarts/issues/7325">#7325</a> <a href="https://github.com/apache/incubator-echarts/issues/6555">#6555</a></p>
-</li>
-<li><p>[Fix] <code>yAxis</code> extent did not update when some of the stacked bar series hide. <a href="https://github.com/apache/incubator-echarts/issues/8003">#8003</a></p>
-</li>
-<li><p>[Fix] Currently we fetch name from <code>dateItem.name</code> firstly in list. <a href="https://github.com/apache/incubator-echarts/issues/7966">#7966</a></p>
-</li>
-<li><p>[Fix] Typed array incorrect usage in WeChat app.</p>
-</li>
-<li><p>[Fix] <code>option</code> in axis data item did not work. <a href="https://github.com/apache/incubator-echarts/issues/7954">#7954</a></p>
-</li>
-<li><p>[Fix] <code>markArea</code> only displayed the last one. <a href="https://github.com/apache/incubator-echarts/issues/7902">#7902</a></p>
-</li>
-<li><p>[Fix] Fixed the WeChat environment imprecise detection.</p>
-</li>
-<li><p>[Fix] Rounding error in clip symbol for line chart. <a href="https://github.com/apache/incubator-echarts/issues/7913">#7913</a></p>
-</li>
-<li><p>[Fix] The default tooltip in candlestick only showed one item. <a href="https://github.com/apache/incubator-echarts/issues/8149">#8149</a></p>
-</li>
-<li><p>[Fix] Bar chart start point was incorrect when multiple axes exist. <a href="https://github.com/apache/incubator-echarts/issues/7412">#7412</a></p>
-</li>
-<li><p>[Fix] <code>markArea</code> did not display when using ordinal string. <a href="https://github.com/apache/incubator-echarts/issues/7849">#7849</a></p>
-</li>
-<li><p>[Fix] <code>dataZoom</code> threw error when series was empty. <a href="https://github.com/apache/incubator-echarts/issues/7666">#7666</a></p>
-</li>
-<li><p>[Fix] Add compatibility of data exceptions for sankey series. <a href="https://github.com/apache/incubator-echarts/issues/2867">#2867</a></p>
-</li>
-<li><p>[Fix] Fix error when removing node or rendering again for the tree series. <a href="https://github.com/apache/incubator-echarts/issues/8038">#8038</a> <a href="https://github.com/apache/incubator-echarts/issues/8040">#8040</a> <a href="https://github.com/apache/incubator-echarts/issues/7720">#7720</a> <a href="https://github.com/apache/incubator-echarts/issues/7363">#7363</a> <a href="https://github.com/apache/incubator-echarts/issues/7315">#7315</a></p>
-</li>
-<li><p>[Fix] <code>sunburst</code> chart roll-up element was not removed when chart.setOption called. <a href="https://github.com/apache/incubator-echarts/issues/8132">#8132</a></p>
-</li>
-<li><p>[Fix] SVG axisPointer text position bug. <a href="https://github.com/apache/incubator-echarts/issues/7947">#7947</a></p>
-</li>
-<li><p>[Fix] Large lines chart render bug in large mode.</p>
-</li>
-<li><p>[Fix] The last day of a month was not displayed in calendar. <a href="https://github.com/apache/incubator-echarts/issues/8045">#8045</a></p>
-</li>
-<li><p>[Fix] Data sampling of line chart caused incorrect extent when data had NaN.</p>
-</li>
-<li><p>[Fix] Data sampling of line chart worked abnormally when using <code>series.encode</code>. <a href="https://github.com/apache/incubator-echarts/issues/8017">#8017</a></p>
-</li>
-<li><p>[Fix] <code>legendHoverLink: false</code> did not work appropriately when multiple series had the same name. <a href="https://github.com/apache/incubator-echarts/issues/8010">#8010</a></p>
-</li>
-<li><p>[Fix] Some of the graph hover style did not work.</p>
-</li>
-<li><p>[Fix] Fix axis extent calculation error when using stack.</p>
-</li>
-</ul>
-<h2 id="v4-0-4">v4.0.4</h2>
-<div class="time">2018-02-28</div>
-
-<p>[Recovery Build]</p>
-<ul>
-<li>[^] Fixed bar layout problem. See <a href="https://github.com/apache/incubator-echarts/issues/7831">#7831</a>.</li>
-</ul>
-<h2 id="v4-0-3">v4.0.3</h2>
-<div class="time">2018-02-27</div>
-
-<ul>
-<li><p><strong>[+] ECharts has been able to work on WeChat Applet.</strong></p>
-</li>
-<li><p>[+] Added a new smooth policy, which corrects some undesired smooth result. See details in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-line.smooth">series-line.smooth</a> and <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-line.smoothMonotone">series-line.smoothMonotone</a>. Fixed <a href="https://github.com/apache/incubator-echarts/issues/7158">#7158</a>.</p>
-</li>
-<li><p>[+] Supported <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-line.symbolOffset">series-line.symbolOffset</a> of axis arrow. See <a href="https://github.com/apache/incubator-echarts/issues/7422">#7422</a>.</p>
-</li>
-<li><p>[+] Supported <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-sunburst.label.minAngle">series-sunburst.label.minAngle</a>, which enables hiding text if the sector is less then the <code>minAngle</code>. See <a href="https://github.com/apache/incubator-echarts/issues/7614">#7614</a>.</p>
-</li>
-<li><p>[+] Supported tooltip in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-sunburst">sunburst</a>. See <a href="https://github.com/apache/incubator-echarts/issues/7691">#7691</a>.</p>
-</li>
-<li><p>[+] Supported configuring <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-sunburst.nodeClick">series-sunburst.nodeClick</a> in level or single sector. See <a href="https://github.com/apache/incubator-echarts/issues/7541">#7541</a>.</p>
-</li>
-<li><p>[+] Supported <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-bar.stack">stack data</a> by value but not index. Fixed stack bug when using <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#dataset">dataset</a>. See <a href="https://github.com/apache/incubator-echarts/issues/7535">#7535</a>, <a href="https://github.com/apache/incubator-echarts/issues/7560">#7560</a>, <a href="https://github.com/apache/incubator-echarts/issues/6861">#6861 [...]
-</li>
-<li><p>[^] Fixed shape clip when <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-line">line chart</a> is overflow cartesian area.</p>
-</li>
-<li><p>[^] Fixed that the last area of <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#xAxis.splitArea">splitArea</a> did not display. See <a href="https://github.com/apache/incubator-echarts/issues/7118">#7118</a>.</p>
-</li>
-<li><p>[^] Fixed gradient color bug of <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-sunburst">sunburst</a>. See <a href="https://github.com/apache/incubator-echarts/issues/7569">#7569</a>.</p>
-</li>
-<li><p>[^] Fixed the case when <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#visualMap">visualMap</a> component is not imported for <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-sunburst">sunburst</a>. See <a href="https://github.com/apache/incubator-echarts/issues/7575">#7575</a>.</p>
-</li>
-<li><p>[^] Fixed that <a href="https://ecomfe.github.io/echarts-doc/public/en/api.html#echartsInstance.appendData">apendData</a> did not work when data amount was less then <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-scatter.progressive">progressive</a> limit. See <a href="https://github.com/apache/incubator-echarts/issues/7718">#7718</a> and <a href="https://github.com/apache/incubator-echarts/issues/7625">#7625</a>.</p>
-</li>
-<li><p>[^] Fixed that <a href="api.html#echartsInstance.appendData">apendData</a> caused series color changed if series name was not specified.</p>
-</li>
-<li><p>[^] Fixed that <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#tooltip.axisPointer.label.show">tooltip.axisPointer.label.show</a> did not work when set as <code>false</code>. See <a href="https://github.com/apache/incubator-echarts/issues/7725">#7725</a>.</p>
-</li>
-<li><p>[^] Fixed that <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-map">map</a> could not be selected if an area had no data. See <a href="https://github.com/apache/incubator-echarts/issues/7629">#7629</a>.</p>
-</li>
-<li><p>[^] Fixed <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-candlestick">candlestick</a> encode problem. See <a href="https://github.com/apache/incubator-echarts/issues/7715">#7715</a>.</p>
-</li>
-<li><p>[^] Fixed the data item empty check logic, which caused that <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem">renderItem</a> could not enter when value array length not the same, and <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#dataset">dataset</a> could not be displayed. See <a href="https://github.com/apache/incubator-echarts/issues/7733">#7733</a>.</p>
-</li>
-<li><p>[^] Fixed the textStyle compatibility logic.</p>
-</li>
-</ul>
-<h2 id="v4-0-2">v4.0.2</h2>
-<div class="time">2018-01-18</div>
-
-<ul>
-<li><p>[^] Fixed that in some case the scollable legend (<code>legend.type: 'scroll'</code>) caused ghost. See <a href="https://github.com/apache/incubator-echarts/issues/7502">#7502</a>.</p>
-</li>
-<li><p>[^] Fixed that the <code>selected</code> option did not work in the data item of <a href="option.html#series-pie">pie</a>. See <a href="https://github.com/apache/incubator-echarts/issues/7515">#7515</a>.</p>
-</li>
-<li><p>[^] Fixed <a href="option.html#timeline.controlStyle.showNextBtn">play button</a> of timeline component could not be disabled. See <a href="https://github.com/apache/incubator-echarts/issues/7506">#7506</a>.</p>
-</li>
-</ul>
-<h2 id="v4-0-1">v4.0.1</h2>
-<div class="time">2018-01-17</div>
-
-<h2 id="v4-0-0">v4.0.0</h2>
-<div class="time">2018-01-16</div>
-
-<ul>
-<li><p>[+] Supported to render up to <strong>tens millions of data</strong> directly. ECharts4 has upgrade to stream architecture, and along with detailed optimization, it has supported to render incrementally loaded data and support progressive rendering.</p>
-<ul>
-<li>Ten millions of GIS data probably take up to about hundreds MB of space. In this case chunked data loading or WebStock is required for the purpose of display graphics as soon as possible and not blocking the browser while processing loaded data. The samples of incremental data loading can be checked here: <a href="https://ecomfe.github.io/echarts-examples/public/editor.html?c=scatterGL-gps&gl=1">scatterGL-gps</a> and <a href="https://ecomfe.github.io/echarts-examples/public/edito [...]
-<li>Supported the human interactions in the big data scenario, where continuous interactions (e.g., roam in geo and cartesian) will not block the browser. Benefit from the using of GPU and avoiding of layout recalculation, ECharts GL provides smooth interactions, which has been demonstrated in the examples above. Without WebGL, the basic ECharts implements progressive rendering to support non-blocking interaction, which can be checked at the pan and zoom in <a href="https://ecomfe.github [...]
-</ul>
-</li>
-<li><p>[+] <strong>Published ZRender SVG Rendering Engine</strong> as an alternative backend of ECharts besides the existing Canvas Rendering Engine. The choice of rendering engine usually depends on the scenario, for example, benefit from the low memory cost, SVG Rendering Engine is suitable for mobile device, or the case that many ECharts instances exists in a single page, while the Canvas Rendering Engine is suitable for big data rendering or when visual effects required. Canvas Rende [...]
-</li>
-<li><p>[+] <strong>Published Sunburst Chart</strong> to visualize hierarchical data efficiently with excellent interactions. See [examples] and (excellent) and <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-sunburst">docs</a>.</p>
-</li>
-<li><p>[+] <strong>Published <a href="http://echarts.baidu.com/tutorial.html#%E6%95%B0%E6%8D%AE%E9%9B%86%EF%BC%88dataset%EF%BC%89">dataset</a> component</strong> to support data based configuration, visual encoding and data sharing in different series.</p>
-</li>
-<li><p>[+] <strong>Supported WAI-ARIA (the Accessible Rich Internet Applications Suite）</strong> to help the disabled people to access the data visualization in web.</p>
-</li>
-<li><p>[+] Since ECharts4, the options <code>label</code> and <code>itemStyle</code> has been flattened. The original level of <code>normal</code> is not needed any more, which make ECharts option more neat. As always, <strong>The previous option style in ECharts3 is still be compatible</strong>.</p>
-</li>
-<li><p>[+] Added two color themes, named 'light' and 'dark'. Apply them by <code>echarts.init(dom, themeName);</code>.</p>
-</li>
-<li><p>[+] Supported that auto collect legend names when <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#legend.data">legend.data</a> is not specified.</p>
-</li>
-<li><p>[+] Supported that auto collect category names when <code>axis.type</code> is <code>'category'</code> and <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#xAxis.data">axis.data</a> is not specified.</p>
-</li>
-</ul>
-<h2 id="v3-8-4">v3.8.4</h2>
-<div class="time">2017-11-13</div>
-
-<ul>
-<li>[^] Fixed that <code>registerMap</code> is null on <code>index*.js</code>.</li>
-<li>[^] Fixed some CommonJS incorrect brought by injection.</li>
-</ul>
-<h2 id="v3-8-2">v3.8.2</h2>
-<div class="time">2017-11-10</div>
-
-<ul>
-<li>[^] Fixed backward compatibility problems brounght by <code>3.8.0</code>:<ul>
-<li>In <code>3.8.0</code>, the content in <code>lib</code> directory is the same as the content in <code>src</code> directory (both are ES Module), which may not compatible with the old verisons of node and webpack. So rollback to commonJS format in <code>lib</code> of <code>3.8.2</code>.</li>
-<li>In <code>3.8.0</code>, the source code in <code>src</code> constains global variable <code>__DEV__</code> (which prints dev helper info for echarts users). To get the declaration of the global variable, users should include <code>echarts/src/config.js</code> manually or make some settings in <code>webpack</code>/<code>rollup</code> (Check <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#Create%20Custom%20Build%20of%20ECharts">custom build tutorial</a> please), whic [...]
-<li>After <code>3.8</code>, <code>echarts/src/echarts.js</code> (the same as <code>echarts/lib/echarts.js</code> in <code>3.8.0</code>) does not include util methods, which used to be mounted on it. Now util methods are listed in <code>echarts/src/export</code> and mounted on <code>echarts/echarts*.js</code>. But it is not backward compatibility, so we have rollbacked to mount them on <code>echarts/lib/echarts.js</code> in <code>3.8.2</code>.</li>
-<li>The way of including <code>echarts/extension/dataTool</code>, havs been rollbacked to the original approach before <code>3.8</code>, where it must be included explicitly, and the namespace will be mounted on <code>echarts</code> namespame.</li>
-</ul>
-</li>
-<li>[^] Fixed the problem that SVG renderer throws error when encounter null value.</li>
-</ul>
-<h2 id="v3-8-0">v3.8,0</h2>
-<div class="time">2017-11-07</div>
-
-<ul>
-<li><p>[+] <strong>Supported <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-tree">Tree Chart</a></strong>, including <a href="https://ecomfe.github.io/echarts-examples/public/index.html#tree-basic">horizontal layout</a>, <a href="https://ecomfe.github.io/echarts-examples/public/index.html#tree-vertical">vertical layout</a>, <a href="https://ecomfe.github.io/echarts-examples/public/index.html#tree-radial">radial layout</a>.</p>
-</li>
-<li><p>[+] <strong>Supported <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#Render%20by%20Canvas%20or%20SVG">SVG Renderer (beta)</a></strong>, enable developers to choose SVG or Canvas renderer based on their platfroms and functional requirments.</p>
-</li>
-<li><p>[+] Source code of echarts has been switched to ES Module, which enabled tree shaking of bundle and reduced size.</p>
-</li>
-<li><p>[+] Supported build scripts for creating custom build, including multiple language support. See <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#Create%20Custom%20Build%20of%20ECharts">custom build tutorial</a>. And added Finnish support, which is contributed by <a href="https://github.com/xvaara">xvaara</a> in <a href="https://github.com/apache/incubator-echarts/pull/6863">PR #6863</a>.</p>
-</li>
-<li><p>[+] Supported <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#xAxis.axisLine.symbol">axis arrow</a>. See <a href="https://github.com/apache/incubator-echarts/issues/6675">#6675</a>.</p>
-</li>
-<li><p>[+] Supported <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-treemap.levels.itemStyle.normal.strokeWidth">strokeWidth</a> and <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-treemap.levels.itemStyle.normal.strokeColor">strokeColor</a> in treemap. See <a href="https://github.com/apache/incubator-echarts/issues/6804">#6804</a>.</p>
-</li>
-<li><p>[+] Supported <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-graph.focusNodeAdjacency">show adjacent nodes</a> in graph. See <a href="https://github.com/apache/incubator-echarts/issues/6772">#6772</a>.</p>
-</li>
-<li><p>[^] Fixed the area calculation when <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#grid.containLabel">grid.containLabel</a> is <code>true</code> and axis is <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#yAxis.axisLabel.rotate">rotated</a>. Thanks <a href="https://github.com/xvaara">xvaara</a> for <a href="https://github.com/apache/incubator-echarts/pull/6951">PR #6951</a>.</p>
-</li>
-<li><p>[^] Fixed that the calculation of interval is not incorrect when <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#xAxis.axisLabel.rotate">axisLabel.rotate</a> is set in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#xAxis.type">category axis</a>. See <a href="https://github.com/apache/incubator-echarts/issues/4170">#4170</a>. Thanks<a href="https://github.com/lanyuechen">lanyuechen</a> for <a href="https://github.com/apache/incubator-echarts [...]
-</li>
-<li><p>[^] Fixed the negative problem in <code>dataTool.prepareBoxplotData</code>. Thanks <a href="https://github.com/d-rudolf">d-rudolf</a> for <a href="https://github.com/apache/incubator-echarts/pull/6749">PR #6749</a>.</p>
-</li>
-<li><p>[^] Enhanced the label interval of <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#xAxis.type">time axis</a>. Thanks <a href="https://github.com/xiaoshan00">xiaoshan00</a> for <a href="https://github.com/apache/incubator-echarts/pull/6808">PR #6808</a>.</p>
-</li>
-<li><p>[^] Supported <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#radiusAxis.inverse">radiusAxis.inverse</a>. See <a href="https://github.com/apache/incubator-echarts/issues/6805">#6805</a> and <a href="https://github.com/apache/incubator-echarts/issues/4253">#4253</a>.</p>
-</li>
-<li><p>[^] Renamed some variables to avoid webpack special variable name. See <a href="https://github.com/apache/incubator-echarts/issues/6788">#6788</a>.</p>
-</li>
-<li><p>[^] Fixed position problem of <a href="https://ecomfe.github.io/echarts-examples/public/index.html#pie-legend">scrollable legend</a>. See <a href="https://github.com/apache/incubator-echarts/issues/6756">#6756</a>.</p>
-</li>
-<li><p>[^] Fixed that the <a href="https://ecomfe.github.io/echarts-examples/public/index.html#themeRiver-basic">themeRiver</a> legend color is incorrect. See <a href="https://github.com/apache/incubator-echarts/issues/6932">#6932</a>.</p>
-</li>
-<li><p>[^] Fixed that brush empty value caused error thrown. See <a href="https://github.com/apache/incubator-echarts/issues/6892">#6892</a>.</p>
-</li>
-<li><p><code>dist/echarts/echarts.simple.js</code> do not includ utils, which used to be mounted on <code>echarts</code>. <code>dist/echarts/echarts.common.js</code> and <code>dist/echarts/echarts.js</code> keep including them as before. And developers can <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#Create%20Custom%20Build%20of%20ECharts">custom build</a> to include them.</p>
-</li>
-<li><p>Changes about <code>dataTool</code>: When using <code>dist/echarts/echarts.simple.js</code> or <code>dist/echarts/echarts.common.js</code>, <code>dist/echarts/extension/dataTool.js</code> should be manually included as before, but the namespace <code>dataTool</code> will not be mounted to <code>echarts</code>. When using <code>dist/echarts/echarts.js</code>, <code>echarts.dataTool</code> is included automatically by default.</p>
-</li>
-</ul>
-<h2 id="v3-7-2">v3.7.2</h2>
-<div class="time">2017-09-27</div>
-
-<ul>
-<li><p>[+] Supported English version build (All default text is in English) in <a href="https://github.com/apache/incubator-echarts/tree/master/dist">https://github.com/apache/incubator-echarts/tree/master/dist</a>. See <a href="https://github.com/apache/incubator-echarts/issues/2321">#2321</a>.</p>
-</li>
-<li><p>[+] Supported <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-pie.hoverOffset">pie.hoverOffset</a>. See <a href="https://github.com/apache/incubator-echarts/issues/3857">#3857</a>.</p>
-</li>
-<li><p>[^] Fixed compatibility of data in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-candlestick">candlestick</a>. See <a href="https://github.com/apache/incubator-echarts/issues/6576">#6576</a>.</p>
-</li>
-<li><p>[^] Fixed <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#xAxis.showMaxLabel">showMaxLabel</a> <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#xAxis.showMinLabel">showMinLabel</a>.</p>
-</li>
-<li><p>[^] Fixed area chart when all value is negative. See <a href="https://github.com/apache/incubator-echarts/issues/6707">#6707</a>.</p>
-</li>
-<li><p>[^] Made the meaning of <code>'middle'</code> and <code>'center'</code> consist in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#xAxis.nameLocation">axis.nameLocation</a>.</p>
-</li>
-<li><p>[^] Fixed that <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-line.markArea.itemStyle.emphasis">markArea.itemStyle.emphasis</a> did not work. See <a href="https://github.com/apache/incubator-echarts/issues/5245">#5245</a>.</p>
-</li>
-<li><p>[^] Fixed the problem of right click in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-treemap">treemap</a>. See <a href="https://github.com/apache/incubator-echarts/issues/6313">#6313</a>.</p>
-</li>
-<li><p>[^] Fixed that calender did not work because of DST (Day Saving Time). See <a href="https://github.com/apache/incubator-echarts/issues/6543">#6543</a>.</p>
-</li>
-<li><p>[^] Enhanced the "save as image" in IE. See <a href="https://github.com/apache/incubator-echarts/issues/6279">#6279</a>.</p>
-</li>
-<li><p>[^] Fixed cleaning for "motion blur". See <a href="https://github.com/apache/incubator-echarts/issues/6577">#6577</a>.</p>
-</li>
-<li><p>[^] Fix doji for k series <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-candlestick">candlestick</a>. See <a href="https://github.com/apache/incubator-echarts/issues/6583">#6583</a>.</p>
-</li>
-<li><p>[^] Fixed the compatibility for <code>markPoint</code>. See <a href="https://github.com/apache/incubator-echarts/issues/6503">#6503</a>.</p>
-</li>
-</ul>
-<h2 id="v3-7-1">v3.7.1</h2>
-<div class="time">2017-08-31</div>
-
-<p>[Recovery Build]</p>
-<ul>
-<li><p>[+] Supported function in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#xAxis.min">axis.min</a>, <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#xAxis.max">axis.max</a>. See <a href="https://github.com/apache/incubator-echarts/issues/6465">#6465</a>.</p>
-</li>
-<li><p>[^] Fixed problems of compatibility and emphasis style about textStyle. See <a href="https://github.com/apache/incubator-echarts/issues/6491">#6491</a>、<a href="https://github.com/apache/incubator-echarts/issues/6529">#6529</a>, <a href="https://github.com/apache/incubator-echarts/issues/6516">#6516</a>, <a href="https://github.com/apache/incubator-echarts/issues/6532">#6532</a>, <a href="https://github.com/apache/incubator-echarts/issues/6237">#6237</a>.</p>
-</li>
-<li><p>[^] Add sub-pixel optimize to <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-candlestick">candlestick</a>.</p>
-</li>
-<li><p>[^] Fixed that emphasis style was not applied when using <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-graph.focusNodeAdjacency">graph.focusNodeAdjacency</a>.</p>
-</li>
-</ul>
-<h2 id="v3-7-0">v3.7.0</h2>
-<div class="time">2017-08-16</div>
-
-<ul>
-<li><p><strong>[+] Supported <a href="https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE">Rich Text</a></strong>, which has enabled style configuring to some text snippets or the entire text block, and supported using images in text, and supported alignment or rotation of text block or snippets.</p>
-</li>
-<li><p><strong>[+] Supported <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#legend.type">Scrollable Legend</a></strong>, which provides a solution for displays planty of legend items. See <a href="https://ecomfe.github.io/echarts-examples/public/editor.html?c=pie-legend">vertical legend</a> 或 <a href="https://ecomfe.github.io/echarts-examples/public/editor.html?c=radar2">horizontal legend</a>.</p>
-</li>
-<li><p>[+] Flatten <code>textStyle</code> option. <code>textStyle</code> exist in echarts option everywhere, for example, <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-bar.label.normal.textStyle">series-bar.label.normal.textStyle</a>, <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#xAxis.axisLabel.textStyle">xAxis.axisLabel.textStyle</a>. It seems that some of them are to deep and verbose. So we removed the level of <code>textStyle</code> [...]
-<ul>
-<li><code>axisPointer.textStyle</code></li>
-<li><code>xAxis.axisLabel.textStyle</code></li>
-<li><code>yAxis.axisLabel.textStyle</code></li>
-<li><code>radar.axisLabel.textStyle</code></li>
-<li><code>singleAxis.axisLabel.textStyle</code></li>
-<li><code>radiusAxis.axisLabel.textStyle</code></li>
-<li><code>angleAxis.axisLabel.textStyle</code></li>
-<li><code>parallel.parallelAxisDefault.axisLabel.textStyle</code></li>
-<li><code>parallelAxis.axisLabel.textStyle</code></li>
-<li><code>series.label[normal|emphasis].textStyle</code></li>
-<li><code>series.data.label[normal|emphasis].textStyle</code></li>
-<li><code>series-gauge.axisLabel.textStyle</code></li>
-<li><code>series-gauge.title.textStyle</code></li>
-<li><code>series-gauge.detail.textStyle</code></li>
-<li><code>series-treemap.upperLabel[normal|emphasis].textStyle</code></li>
-<li><code>series-graph.edgeLabel[normal|emphasis].textStyle</code></li>
-<li><code>calendar.dayLabel.textStyle</code></li>
-<li><code>calendar.monthLabel.textStyle</code></li>
-<li><code>calendar.yearLabel.textStyle</code></li>
-<li><code>markPoint.label[normal|emphasis].textStyle</code></li>
-<li><code>markPoint.data.label[normal|emphasis].textStyle</code></li>
-<li><code>markLine.label[normal|emphasis].textStyle</code></li>
-<li><code>markLine.data.label[normal|emphasis].textStyle</code></li>
-<li><code>markArea.label[normal|emphasis].textStyle</code></li>
-<li><code>markArea.data.label[normal|emphasis].textStyle</code></li>
-<li><code>tooltip.axisPointer.crossStyle.textStyle</code></li>
-<li><code>axisPointer.label.textStyle</code></li>
-<li><code>timeline.label.textStyle</code></li>
-<li><code>radar.name.textStyle</code></li>
-</ul>
-</li>
-<li><p>[+] Supported <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#xAxis.minInterval">minInterval</a> on time axis (that is, <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#xAxis.type">axis.type</a> is <code>'time'</code>), and supported <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#xAxis.maxInterval">maxInterval</a> on value axis (that is <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#xAxis.type [...]
-</li>
-<li><p>[+] Supported <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#xAxis.axisLine.onZeroAxisIndex">xAxis.axisLine.onZeroAxisIndex</a>, which enables specifing corresponding relationship when multiple axes used and <code>onZero</code> is required. See <a href="https://github.com/apache/incubator-echarts/issues/5069">#5069</a>.</p>
-</li>
-<li><p>[+] Supported that do not use <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.coordinateSystems">coordinate system</a> in <code>custom series</code>.</p>
-</li>
-<li><p>[+] Supported rotation and alignment of label in bar chart. See <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-bar.label.normal.rotate">rotate</a>, <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-bar.label.normal.align">align</a>, <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-bar.label.normal.verticalAlign">verticalAlign</a>. See <a href="https://ecomfe.github.io/echarts-examples/public/editor.html [...]
-</li>
-<li><p>[+] Supported <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#radar.indicator.color">radar.indicator.color</a>, which enables setting different color for each indicator of radar chart. See <a href="https://github.com/apache/incubator-echarts/issues/6128">#6128</a>.</p>
-</li>
-<li><p>[+] Supported <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#dataZoom.rangeMode">dataZoom.rangeMode</a>, which can fixing zoom window according to data when data updated. See <a href="https://github.com/apache/incubator-echarts/issues/6040">#6128</a>.</p>
-</li>
-<li><p>[+] Supported using <code>dataIndex</code> in <a href="https://ecomfe.github.io/echarts-doc/public/en/api.html#action.legend.legendToggleSelect">action.legend.legendToggleSelect</a>, <a href="https://ecomfe.github.io/echarts-doc/public/en/api.html#action.legend.legendSelect">action.legend.legendSelect</a>, <a href="https://ecomfe.github.io/echarts-doc/public/en/api.html#action.legend.legendUnSelect">action.legend.legendUnSelect</a>. See <a href="https://github.com/apache/incubator [...]
-</li>
-<li><p>[+] Supported <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-map.label.formatter">map.label.formatter</a>, which enables using rich text in map series. See <a href="https://ecomfe.github.io/echarts-examples/public/editor.html?c=map-labels">Map Labels</a>.</p>
-</li>
-<li><p>[+] Supported <a href="http://echarts.baidu.com/option.html#title.borderRadius">title.borderRadius</a> and <a href="http://echarts.baidu.com/option.html#legend.borderRadius">legend.borderRadius</a>, which enables round corner of background or border in <code>title</code> and <code>legend</code> component.</p>
-</li>
-<li><p>[^] Fixed that error thrown when using shadow in pie series in some version of IE. See <a href="https://github.com/apache/incubator-echarts/issues/5777">#5777</a>.</p>
-</li>
-<li><p>[^] Fixed that name can not be obtained in <code>tooltip</code> when <code>nameMap</code> was used in map serise and there was no data in some areas. See <a href="https://github.com/apache/incubator-echarts/issues/5633">#5633</a>.</p>
-</li>
-<li><p>[^] Fixed <code>tooltip</code> location incorrect after roamed in bmap extension. See <a href="https://github.com/apache/incubator-echarts/issues/6211">#6211</a>.</p>
-</li>
-<li><p>[^] Fixed null pointer exception of <code>axisPointer</code>. See <a href="https://github.com/apache/incubator-echarts/issues/6121">#6121</a>.</p>
-</li>
-<li><p>[^] Fixed that error occured when height of heatmap was 0. See <a href="https://github.com/apache/incubator-echarts/issues/6214">#6214</a>.</p>
-</li>
-<li><p>[+] Fixed the incorrect rendering when the first entry was empty in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-candlestick">candlestick</a>. See <a href="https://github.com/apache/incubator-echarts/issues/6059">#6059</a>.</p>
-</li>
-<li><p>[^] Fixed that <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-bar.dimensions">series-bar.dimensions</a> did not work. See <a href="https://github.com/apache/incubator-echarts/issues/6252">#6252</a>.</p>
-</li>
-<li><p>[^] Fixed that when chilren number of group was not fixed, they could not be removed correctly in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom">custom series</a>.</p>
-</li>
-<li><p>[^] Fixed the error that calling <code>connect</code> before <code>setOption</code> called. See <a href="https://github.com/apache/incubator-echarts/issues/6281">#6281</a>.</p>
-</li>
-<li><p>[^] Fixed the edge judgement of <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#tooltip.confine">tooltip.confine</a>. See <a href="https://github.com/apache/incubator-echarts/issues/6277">#6277</a> and <a href="https://github.com/apache/incubator-echarts/commit/0da06d8">0da06d8</a>.</p>
-</li>
-<li><p>[^] Fixed that bar series displayed abnormal when viewport was narrow and bar series were overlapped (both set <code>barWidth</code> and <code>barGap: '-100%'</code>). See <a href="https://github.com/apache/incubator-echarts/issues/6312">#6312</a>.</p>
-</li>
-<li><p>[^] Fixed precision problems. See <a href="https://github.com/apache/incubator-echarts/issues/6371">#6371</a>.</p>
-</li>
-</ul>
-<h2 id="v3-6-2">v3.6.2</h2>
-<div class="time">2017-06-15</div>
-
-<ul>
-<li><p>[+] Supported draw <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom">custom series</a> on <a href="https://github.com/apache/incubator-echarts/tree/master/extension/bmap">Baidu Map (bmap)</a>. See <a href="https://ecomfe.github.io/echarts-examples/public/editor.html?c=map-polygon">example 1</a> and <a href="https://ecomfe.github.io/echarts-examples/public/editor.html?c=map-bin">example 2</a>.</p>
-</li>
-<li><p>[+] Supported show parent labels in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-treemap">treemap</a>. See <a href="https://ecomfe.github.io/echarts-examples/public/editor.html?c=treemap-show-parent">example</a>. See <a href="https://github.com/apache/incubator-echarts/issues/5869">#5869</a> and <a href="https://github.com/apache/incubator-echarts/issues/5579">#5579</a>.</p>
-</li>
-<li><p>[+] Supported specifying mouse cursor style by: <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-line.cursor">series-line.cursor</a>, <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-bar.cursor">series-bar.cursor</a>, <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-pie.cursor">series-pie.cursor</a>, <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-scatter.cursor">series-scatter [...]
-</li>
-<li><p>[+] Support both negative and positive bounding data specified on <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-pictorialBar.symbolBoundingData">series-pictorialBar.symbolBoundingData</a>. See <a href="https://github.com/apache/incubator-echarts/issues/5793">#5793</a>.</p>
-</li>
-<li><p>[+] Supported <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-graph.data.fixed">fixed</a> in <code>graph</code>. See <a href="https://github.com/apache/incubator-echarts/issues/5966">#5966</a>.</p>
-</li>
-<li><p>[+] Supported <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-treemap.label.normal.formatter">label.formatter</a>in <code>treemap</code>. See <a href="https://github.com/apache/incubator-echarts/issues/5757">#5757</a>.</p>
-</li>
-<li><p>[+] Supported <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#timeline.label.normal.textStyle.align">label.normal.textStyle.align</a> and <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#timeline.label.normal.textStyle.basealign">label.normal.textStyle.basealign</a> in <code>timeline</code>. See <a href="https://github.com/apache/incubator-echarts/issues/5960">#5960</a>.</p>
-</li>
-<li><p>[^] Fixed that <code>tooltip</code> did not work when <a href="https://ecomfe.github.io/echarts-examples/public/editor.html?c=scatter-large">large scatter</a> was zoomed. See<a href="https://github.com/apache/incubator-echarts/issues/5837">#5837</a>.</p>
-</li>
-<li><p>[^] Fixed that parameter <code>position</code> did not work when trigger <a href="https://ecomfe.github.io/echarts-doc/public/en/api.html#action.tooltip.showTip">showTip</a> action. See <a href="https://github.com/apache/incubator-echarts/issues/5874">#5874</a>.</p>
-</li>
-<li><p>[^] Fixed that sometimes the sum of the percent value is less than <code>100%</code> slightly in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-pie">pie</a>, which was caused by precision problem. See <a href="https://github.com/apache/incubator-echarts/issues/5850">#5850</a>.</p>
-</li>
-<li><p>[^] Fixed only the last <code>markPoint</code> or <code>markLine</code> was displayed when <code>series.name</code> was the same. See <a href="https://github.com/apache/incubator-echarts/issues/5712">#5712</a>.</p>
-</li>
-<li><p>[^] Fixed that <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-bar.itemStyle.normal.barBorderRadius">barBorderRadius</a> did not work in horizontal bar. See <a href="https://github.com/apache/incubator-echarts/issues/5943">#5943</a>.</p>
-</li>
-<li><p>[^] Fixed the zoom point error when applying <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#dataZoom-inside">dataZoom-inside</a> on Y axis. See <a href="https://github.com/apache/incubator-echarts/issues/5278">#5278</a>.</p>
-</li>
-<li><p>[^] Fixed sometimes <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-radar">radar</a> did not display normally. See <a href="https://github.com/apache/incubator-echarts/issues/5986">#5986</a>.</p>
-</li>
-</ul>
-<h2 id="v3-6-1">v3.6.1</h2>
-<div class="time">2017-05-26</div>
-
-<p>[Recovery Build]</p>
-<ul>
-<li>[^] Fixed that <a href="http://echarts.baidu.com/option.html#series-line.sampling">data sampling</a> did not work.</li>
-<li>[^] Fixed the problem on ie11 when compiled by webpack. See <a href="https://github.com/ecomfe/zrender/issues/189">zrender/#189</a>.</li>
-</ul>
-<h2 id="v3-6-0">v3.6.0</h2>
-<div class="time">2017-05-25</div>
-
-<ul>
-<li><p><strong>[+] Published <a href="http://echarts.baidu.com/option.html#series-custom">custom series</a></strong>, which enables user to customize render logic and make new types of chart. See <a href="http://echarts.baidu.com/examples.html#chart-type-custom">samples</a>.</p>
-</li>
-<li><p><strong>[+] Supported polar bar chart</strong>. See <a href="https://ecomfe.github.io/echarts-examples/public/editor.html?c=bar-polar-stack">sample1</a>, <a href="https://ecomfe.github.io/echarts-examples/public/editor.html?c=bar-polar-stack-radial">sample2</a>, <a href="https://ecomfe.github.io/echarts-examples/public/editor.html?c=bar-polar-real-estate">sample3</a>.</p>
-</li>
-<li><p>[+] Supported <a href="http://echarts.baidu.com/option.html#series-scatter.encode">encode</a>, which enable user to specify which dimensions in <a href="http://echarts.baidu.com/option.html#series-scatter.data">data</a> are mapped to which axis of coordinate system. Or which dimensions will be displayed in <a href="http://echarts.baidu.com/option.html#tooltip">tooltip</a> or <a href="http://echarts.baidu.com/option.html#series-scatter.label">label</a>. [Break Change]: The default [...]
-</li>
-<li><p>[+] Supported <a href="http://echarts.baidu.com/option.html#series-scatter.dimensions">dimensions</a>, which enables that specifying names and types for each dimensions in <a href="http://echarts.baidu.com/option.html#series-scatter.data">data</a>. Name can be displayed in <a href="http://echarts.baidu.com/option.html#tooltip">tooltip</a>.</p>
-</li>
-<li><p>[+] Supported <a href="http://echarts.baidu.com/option.html#dataZoom.minSpan">dataZoom.minSpan</a> and <a href="http://echarts.baidu.com/option.html#dataZoom.maxSpan">dataZoom.maxSpan</a>. See <a href="https://github.com/apache/incubator-echarts/issues/2843">#2843</a>.</p>
-</li>
-<li><p>[+] Supported <a href="http://echarts.baidu.com/option.html#dataZoom-inside.moveOnMouseMove">dataZoom.moveOnMouseMove</a> and <a href="http://echarts.baidu.com/option.html#dataZoom-inside.zoomOnMouseWheel">dataZoom.zoomOnMouseWheel</a>, which enables that triggering dataZoom only by mouse wheel while holding 'ctrl'/'alt'/'shift'. Moreover, supported <a href="http://echarts.baidu.com/option.html#dataZoom-inside.preventDefaultMouseMove">preventDefaultMouseMov [...]
-</li>
-<li><p>[+] Supported using image in <a href="http://echarts.baidu.com/option.html#dataZoom-slider.handleIcon">dataZoom.handleIcon</a> setting.</p>
-</li>
-<li><p>[^] Fixed boundary problems on world map.</p>
-</li>
-<li><p>[^] Fixed that <a href="http://echarts.baidu.com/option.html#xAxis.minInterval">minInterval</a> did not work when <a href="http://echarts.baidu.com/option.html#xAxis.min">min</a> was set. See <a href="https://github.com/apache/incubator-echarts/issues/4838">#4838</a>.</p>
-</li>
-<li><p>[^] Fixed problems caused by default properties on <code>Object</code>. See <a href="https://github.com/apache/incubator-echarts/issues/5576">#5576</a>.</p>
-</li>
-<li><p>[^] Fixed that error was thrown when <code>setOption</code> while legend selection changed, which was caused <a href="http://echarts.baidu.com/option.html#graphic">graphic</a>. See <a href="https://github.com/apache/incubator-echarts/issues/5783">#5783</a>.</p>
-</li>
-<li><p>[^] Fixed <a href="http://echarts.baidu.com/option.html#parallelAxis.axisLabel.interval">parallelAxis.axisLabel.interval</a> supporting. See <a href="https://github.com/apache/incubator-echarts/issues/5694">#5694</a>.</p>
-</li>
-<li><p>[^] Enhanced interaction of <code>dataZoom</code>.</p>
-</li>
-<li><p>[^] Fixed the problem about <a href="http://echarts.baidu.com/option.html#series-pie.minAngle">minAngle</a> on rose chart. See <a href="https://github.com/apache/incubator-echarts/issues/5617">#5617</a>.</p>
-</li>
-<li><p>[^] Fixed the problem when tooltip updating.</p>
-</li>
-</ul>
-<h2 id="v3-5-4">v3.5.4</h2>
-<div class="time">2017-04-27</div>
-
-<ul>
-<li>[^] Fixed the <code>clipPath</code> support for <a href="https://github.com/ecomfe/echarts-liquidfill">liquidfill</a>.</li>
-<li>[^] Fixed the position when <code>label</code> is set as <code>insideTop</code>.</li>
-<li>[^] Fixed the problem when transforming <a href="http://www.w3.org/TR/SVG/paths.html#PathData">SVG PathData</a>.</li>
-</ul>
-<h2 id="v3-5-3">v3.5.3</h2>
-<div class="time">2017-04-14</div>
-
-<ul>
-<li><p>[^] Fixed the problem when both <code>left</code> <code>right</code> <code>width</code> <code>top</code> <code>bottom</code> <code>height</code> are set. See <a href="https://github.com/apache/incubator-echarts/issues/5440">#5440</a>.</p>
-</li>
-<li><p>[^] Fixed the problem when input x,y to <a href="https://ecomfe.github.io/echarts-doc/public/en/api.html#action.tooltip.showTip">showTip</a>. See <a href="https://github.com/apache/incubator-echarts/issues/5449">#5449</a>.</p>
-</li>
-<li><p>[^] Enhanced the effect of <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#xAxis.boundaryGap">boundaryGap</a> when only one data existed. See <a href="https://github.com/apache/incubator-echarts/issues/4417">#4417</a>.</p>
-</li>
-<li><p>[^] Fixed animation easing setting of <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-gauge.animationEasing">gauge</a>. See <a href="https://github.com/apache/incubator-echarts/issues/5451">#5451</a>.</p>
-</li>
-<li><p>[^] Made the sorting of <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-treemap">treemap</a> stable when values were the same.</p>
-</li>
-<li><p>[^] Fixed that roam and brush conflicted when components overlaped.</p>
-</li>
-<li><p>[^] Enlarged area of <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#parallelAxis.nameRotate">parallel axis name</a> when it rotates.</p>
-</li>
-<li><p>[^] Enabled <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#toolbox.feature.brush.type">toolbox clear button</a> to be able to clear brush box of <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#parallelAxis">parallelAxis</a>.</p>
-</li>
-<li><p>[^] Improved the performance of zrender up to <code>50%</code>.</p>
-</li>
-</ul>
-<h2 id="v3-5-2">v3.5.2</h2>
-<div class="time">2017-04-05</div>
-
-<ul>
-<li><p>[+] Supported <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#useUTC">useUTC</a>, which enables display <code>axisLabel</code> and <code>tooltip</code> in local time or UTC. Related default setttings are modified: <code>axisLabel</code> and <code>tooltip</code> display local time by default, and <code>data</code> recognize time string as local time if timezone not specified. See <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-line.dat [...]
-</li>
-<li><p>[+] Supported <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#xAxis.axisLabel.showMinLabel">axisLabel.showMinLabel</a> and <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#xAxis.axisLabel.showMaxLabel">axisLabel.showMaxLabel</a>.</p>
-</li>
-<li><p>[+] Supported <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-funnel.sort">funnel.sort</a>, which enables sorting funnel by index or customized function.</p>
-</li>
-<li><p>[^] Fixed float error of <code>axisTick</code>. See <a href="https://github.com/apache/incubator-echarts/issues/5041">#5041</a>.</p>
-</li>
-<li><p>[^] Fixed that <code>axisTick</code> did not display when value was too small. See <a href="https://github.com/apache/incubator-echarts/issues/5386">#5386</a>.</p>
-</li>
-<li><p>[^] Fixed when <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#tooltip.trigger">tooltip.trigger</a> was <code>'axis'</code>, <code>dispatchAction</code> <a href="https://ecomfe.github.io/echarts-doc/public/en/api.html#action.tooltip.showTip">showTip</a> did not work. See <a href="https://github.com/apache/incubator-echarts/issues/5423">#5423</a>.</p>
-</li>
-<li><p>[^] Fixed that <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#visualMap">visualMap</a> disabled <code>itemStyle</code> of <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-map">map</a>. See <a href="https://github.com/apache/incubator-echarts/issues/5388">#5388</a>.</p>
-</li>
-<li><p>[^] Fixed that <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#tooltip.trigger">tooltip.trigger</a> did not support <code>'none'</code>. See <a href="https://github.com/apache/incubator-echarts/issues/5400">#5400</a>.</p>
-</li>
-<li><p>[^] Fixed problem of <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-sankey">sankey</a> on ie11. See <a href="https://github.com/apache/incubator-echarts/issues/3306">#3306</a>.</p>
-</li>
-<li><p>[^] Fixed that <code>data.lineStyle.color</code> of <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-parallel">parallel</a> did not work. See <a href="https://github.com/apache/incubator-echarts/issues/5363">#5363</a>.</p>
-</li>
-</ul>
-<h2 id="v3-5-1">v3.5.1</h2>
-<div class="time">2017-03-23</div>
-
-<p>Recovery Build</p>
-<ul>
-<li><p>[^] Fixed <a href="https://github.com/apache/incubator-echarts/issues/5352">#5352</a>.</p>
-</li>
-<li><p>[^] Fixed <a href="https://github.com/apache/incubator-echarts/issues/5350">#5350</a>.</p>
-</li>
-</ul>
-<h2 id="v3-5-0">v3.5.0</h2>
-<div class="time">2017-03-23</div>
-
-<ul>
-<li><p><strong>[+] Published <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#calendar">calendar coordinate system</a></strong>. See <a href="https://ecomfe.github.io/echarts-examples/public/index.html#calendar">examples</a>.</p>
-</li>
-<li><p><strong>[+] Published echarts statistics tools <a href="https://github.com/ecomfe/echarts-stat">echarts-stat</a></strong></p>
-</li>
-<li><p><strong>[+] Enhanced axis pointer</strong> See examples: <a href="https://ecomfe.github.io/echarts-examples/public/index.html#candlestick-brush">link</a>, <a href="https://ecomfe.github.io/echarts-examples/public/index.html#line-tooltip-touch">mobile (touch device) 1</a>, <a href="https://ecomfe.github.io/echarts-examples/public/index.html#candlestick-touch">mobile (touch device) 2</a>, <a href="https://ecomfe.github.io/echarts-examples/public/index.html#scatter-nutrients-matrix"> [...]
-</li>
-<li><p>[+] Enhanced method <code>echarts.util.parseDate</code>, which have supported parsing different formats of data expression to UTC time. See <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-line.data">time in series.data</a></p>
-</li>
-<li><p>[^] Enhanced processing of geoJSON.</p>
-</li>
-<li><p>[^] Fixed that <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#toolbox.feature.dataZoom">toolbox.feature.dataZoom</a> can not control multiple x axes. See <a href="https://github.com/apache/incubator-echarts/issues/4896">#4896</a>.</p>
-</li>
-<li><p>[^] Fixed the default extent of category axis in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#dataZoom">dataZoom</a>. See <a href="https://github.com/apache/incubator-echarts/issues/5226">#5226</a>.</p>
-</li>
-<li><p>[^] Fixed function name of "disConnect". See <a href="https://github.com/apache/incubator-echarts/issues/5208">#5208</a>.</p>
-</li>
-<li><p>[^] Remove incorrect warning specifying <code>width,height</code> when initialize echart. See <a href="https://github.com/apache/incubator-echarts/issues/4569">#4569</a>.</p>
-</li>
-<li><p>[^] Fixed that tooltip in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series.gauge">gauge</a> do not support percentage. See <a href="https://github.com/apache/incubator-echarts/issues/4347">#4347</a> and <a href="https://github.com/apache/incubator-echarts/pull/4332">#4332</a>.</p>
-</li>
-<li><p>[^] Fixed the behavior when pointer color is 'auto' in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series.gauge">gauge</a>. See <a href="https://github.com/apache/incubator-echarts/issues/5109">#5109</a>.</p>
-</li>
-<li><p>[^] Fixed the problem when <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-gauge.pointer.show">series-gauge.pointer.show</a> is <code>false</code>. See <a href="https://github.com/apache/incubator-echarts/issues/4944">#4944</a>.</p>
-</li>
-<li><p>Fixed the initialization of series-treemap.data is incorrect in one case.</p>
-</li>
-<li><p>Fixed the style of <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#toolbox">toolbox</a>. See <a href="https://github.com/apache/incubator-echarts/issues/3591">#3591</a>.</p>
-</li>
-<li><p>Enhanced the behavior of <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#brush">brush</a> on category axis.</p>
-</li>
-<li><p>[^] Fixed that visualMap is abnormal when some item of <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#visualMap-piecewise.categories">visualMap-piecewise.categories</a> is numberic string. See <a href="https://github.com/apache/incubator-echarts/issues/4960">#4960</a>.</p>
-</li>
-</ul>
-<h2 id="v3-4-0">v3.4.0</h2>
-<div class="time">2017-01-12</div>
-
-<ul>
-<li><p><strong>[+] Published <code>pictorialBar</code> chart：<a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-pictorialBar">pictorialBar</a>. See <a href="https://ecomfe.github.io/echarts-examples/public/index.html#chart-type-pictorialBar">example</a>.</strong></p>
-</li>
-<li><p><strong>[+] Published <code>themeRiver</code> chart：<a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-themeRiver">themeRiver</a>.See <a href="https://ecomfe.github.io/echarts-examples/public/index.html#chart-type-themeRiver">example</a>.</strong></p>
-</li>
-<li><p>[+] A specified <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#geo">geo coordinate system</a> has been able to be used in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-map">map series</a>. (In the past map series could only creat an inner exclusive geo coodinate system). Thus, <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-map">map series</a> can be used to control color of a geo component. Moreover, a g [...]
-</li>
-<li><p>[+] Added <a href="https://ecomfe.github.io/echarts-doc/public/en/api.html#action.graph.focusNodeAdjacency">focusNodeAdjacency action</a>, which enables trigger adjacent highlight of <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-geo">graph</a> through API.</p>
-</li>
-<li><p>[+] Added <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-pie.animationType">series-pie.animationType</a>, which enables more animation effects.</p>
-</li>
-<li><p>[+] Callback function have been supported in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#animationDuration">animationDuration</a>, which enables different animation duration of data items.</p>
-</li>
-<li><p>[+] <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#xAxis.min">min</a> and <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#xAxis.max">max</a> have been supported in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#xAxis.type">category axis</a>.</p>
-</li>
-<li><p>[+] <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#xAxis.type">category axis</a> has been changed to show all categories by default, in spite of whether there is data in categories. In the past, categories in the end that has no data will not be displayed.</p>
-</li>
-<li><p>[+] When using <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#singleAxis">singleAxis</a>, <code>series.data</code> has supported one-dimension array, like <code>[11, 23, 44]</code>.</p>
-</li>
-<li><p>[+] <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#dataZoom">dataZoom</a> has supported <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#singleAxis">singleAxis</a>.</p>
-</li>
-<li><p>[+] Exposed throttle util method: <code>chart.util.throttle</code>.</p>
-</li>
-<li><p>[+] <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-candlestick">candlestick</a> has supported <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-candlestick.barWidth">barWidth</a>, <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-candlestick.barMinWidth">barMinWidth</a> and <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-candlestick.barMaxWidth">barMaxWidth</a>. See <a href="ht [...]
-</li>
-<li><p>[+] <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-lines">lines chart</a> has supported <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-lines.symbol">symbol</a>, <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-lines.symbolSize">symbolSize</a>.</p>
-</li>
-<li><p>[+] Added support for show end text and data label at the same time in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#visualMap-piecewise">visualMap-piecewise</a>. See <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#visualMap-piecewise.showLabel">visualMap-piecewise.showLabel</a>, and See <a href="https://github.com/apache/incubator-echarts/issues/4845">#4845</a>.</p>
-</li>
-<li><p>[+] When using <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#visualMap">visualMap</a> to control a series, it has supported that some data items escape from the control by visualMap, but use its series visual settings (color, symbol, ...). See the paragraph of <code>Configure mapping</code> in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#visualMap">visualMap</a>.</p>
-</li>
-<li><p>[^] Enhanced the effect of <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#grid">grid (cartesian)</a> when on data displayed.</p>
-</li>
-<li><p>[^] Added parameter <code>dataIndex</code> in <a href="https://ecomfe.github.io/echarts-doc/public/en/api.html#action.tooltip.showTip">showTip event</a>.</p>
-</li>
-<li><p>[^] Fixed vulnerability about XSS in tooltip. See <a href="https://github.com/apache/incubator-echarts/issues/4769">#4769</a>.</p>
-</li>
-<li><p>[^] Fixed that some attributes did not work in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-graph.edgeLabel">series-graph.edgeLabel</a>. See <a href="https://github.com/apache/incubator-echarts/issues/4555">#4555</a>.</p>
-</li>
-<li><p>[^] Fixed tick render problem when <code>min</code> <code>max</code> is <code>stirng</code> in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-gauge">series-gauge</a>. See <a href="https://github.com/apache/incubator-echarts/issues/4617">#4617</a>.</p>
-</li>
-<li><p>[^] Fixed <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-gauge.pointer.show">series-gauge.pointer.show</a> problem. See <a href="https://github.com/apache/incubator-echarts/issues/4618">#4618</a>.</p>
-</li>
-<li><p>[^] Fixed <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-radar">series-radar</a> render error in a case that no data exists.</p>
-</li>
-<li><p>[^] Fixed <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-line.markArea.label.normal.show">markArea.label.normal.show</a> problem. See <a href="https://github.com/apache/incubator-echarts/issues/4723">#4723</a>.</p>
-</li>
-<li><p>[^] Enhanced the process when data is equals or less then zero in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#yAxis.type">log axis</a>. See <a href="https://github.com/apache/incubator-echarts/issues/4743">#4743</a> and <a href="https://github.com/apache/incubator-echarts/issues/3161">#3161</a>.</p>
-</li>
-</ul>
-<h2 id="v3-3-2">v3.3.2</h2>
-<div class="time">2016-11-24</div>
-
-<ul>
-<li><p>[+] <strong>Add <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#graphic">graphic</a> in option, enable graphic configuration in option. See examples: <a href="http://echarts.baidu.com/gallery/editor.html?c=line-y-category">http://echarts.baidu.com/gallery/editor.html?c=line-y-category</a>, <a href="http://echarts.baidu.com/gallery/editor.html?c=line-draggable">http://echarts.baidu.com/gallery/editor.html?c=line-draggable</a> and <a href="http://echarts.baidu.co [...]
-</li>
-<li><p>[+] Add <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-treemap.visualMin">visualMin</a> and <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-treemap.visualMax">visualMax</a>, and enhance capability of visual mapping in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-treemap">treemap</a>. See <a href="https://github.com/apache/incubator-echarts/issues/2509">#2509</a>.</p>
-</li>
-<li><p>[+] Add <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#tooltip.confine">tooltip.confine</a>, which can confine tooltip within contianer of echarts instance. It helps a lot in small screen, or in the situation that outer dom is set to be <code>overflow:hidden</code>.</p>
-</li>
-<li><p>[^] Fix that erroneously forbiden default pan behavior in touch device. See <a href="https://github.com/apache/incubator-echarts/issues/4393">#4393</a>.</p>
-</li>
-<li><p>[^] Enhance user experience for <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#geo">geo</a> / <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-map">map</a> in touche device.</p>
-</li>
-<li><p>[^] Fix calculation error of <a href="https://ecomfe.github.io/echarts-doc/public/en/api.html#echartsInstance.containPixel">containPixel</a> in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#geo">geo</a> / <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-graph">graph</a>. See <a href="https://github.com/apache/incubator-echarts/issues/4405">#4405</a>.</p>
-</li>
-<li><p>[^] Enhance gradient <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#visualMap">visualMap</a> for <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-line">line</a>.</p>
-</li>
-<li><p>[^] Fix symbol mapping in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#visualMap">visualMap</a>.</p>
-</li>
-<li><p>[^] Enable <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#dataZoom.realtime">realtime</a> upating of label in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#dataZoom">dataZoom</a>. See <a href="https://github.com/apache/incubator-echarts/issues/4434">#4434</a>.</p>
-</li>
-<li><p>[^] Fix highlight error in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#dataZoom">dataZoom</a>. See <a href="https://github.com/apache/incubator-echarts/issues/4475">#4475</a>.</p>
-</li>
-<li><p>[^] Fix that can not save as image in MS Edge browser. See <a href="https://github.com/apache/incubator-echarts/issues/2451">#2451</a> and <a href="https://github.com/apache/incubator-echarts/issues/3586">#3586</a>.</p>
-</li>
-<li><p>[^] Fix format problem for <code>'time'</code> axis in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#tooltip">tooltip</a>. See <a href="https://github.com/apache/incubator-echarts/issues/4398">#4398</a>.</p>
-</li>
-<li><p>[^] Fix <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#tooltip">tooltip</a> may not show bug when first series have null data.</p>
-</li>
-<li><p>[^] Fix <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#grid.containLabel">grid.containLabel</a> not works for large fontSize. See <a href="https://github.com/apache/incubator-echarts/issues/3805">#3805</a>.</p>
-</li>
-<li><p>[^] Fix <code>echarts.extendSeriesModel</code> error. See <a href="https://github.com/apache/incubator-echarts/issues/4397">#4397</a>.</p>
-</li>
-<li><p>[^] Fix render error when <code>clockwise</code> is <code>false</code> and <code>minAngle</code> is used in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-pie">pie</a>. See <a href="https://github.com/apache/incubator-echarts/issues/4414">#4414</a>.</p>
-</li>
-<li><p>[^] Fix erroneously rendering dot in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#tooltip">tooltip</a> when using gradient color. See <a href="https://github.com/apache/incubator-echarts/issues/3994">#3994</a>.</p>
-</li>
-</ul>
-<h2 id="v3-3-1">v3.3.1</h2>
-<div class="time">2016-11-03</div>
-
-
-<h2 id="v3-3-0">v3.3.0</h2>
-<div class="time">2016-11-01</div>
-
-
-<h2 id="v3-2-3">v3.2.3</h2>
-<div class="time">2016-08-16</div>
-
-
-<h2 id="v3-2-2">v3.2.2</h2>
-<div class="time">2016-07-11</div>
-
-
-<h2 id="v3-2-1">v3.2.1</h2>
-<div class="time">2016-07-04</div>
-
-
-<h2 id="v3-2-0">v3.2.0</h2>
-<div class="time">2016-06-30</div>
-
-
-<h2 id="v3-1-10">v3.1.10</h2>
-<div class="time">2016-05-19</div>
-
-
-<h2 id="v3-1-9">v3.1.9</h2>
-<div class="time">2016-05-12</div>
-
-
-<h2 id="v3-1-8">v3.1.8</h2>
-<div class="time">2016-05-11</div>
-
-
-<h2 id="v3-1-7">v3.1.7</h2>
-<div class="time">2016-04-21</div>
-
-
-<h2 id="v3-1-6">v3.1.6</h2>
-<div class="time">2016-04-11</div>
-
-
-<h2 id="v3-1-5">v3.1.5</h2>
-<div class="time">2016-03-29</div>
-
-
-<h2 id="v3-1-4">v3.1.4</h2>
-<div class="time">2016-03-21</div>
-
-
-<h2 id="v3-1-3">v3.1.3</h2>
-<div class="time">2016-03-10</div>
-
-<ul>
-<li><p>【+】add in radar chart, see <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-radar">https://ecomfe.github.io/echarts-doc/public/en/option.html#series-radar</a></p>
-</li>
-<li><p>[^] position optimization of average, minimum and maximum value starting point and finishing point. Fix <a href="https://github.com/apache/incubator-echarts/issues/2762">#2762</a>, <a href="https://github.com/apache/incubator-echarts/issues/2688">#2688</a>.</p>
-</li>
-<li><p>[^] fix the only one configuration for ''none'' bug in markLine symbol. See <a href="https://github.com/apache/incubator-echarts/issues/2733">#2733</a></p>
-</li>
-<li><p>[^]optimization of vertically centered multiple yext lines.</p>
-</li>
-<li><p>[^] emphasis configuration item of label in data item as pie chart is normal value by dafualt.</p>
-</li>
-<li><p>[^] when introdcued on need, line chart, pie chart and scatter chart introduce grid component by dafault to avoid problems in<a href="https://github.com/apache/incubator-echarts/issues/2758">#2758</a>.</p>
-</li>
-<li><p>[^] fix floating point precision bug in dataZoom component. Fix <a href="https://github.com/apache/incubator-echarts/issues/2757">#2757</a></p>
-</li>
-<li><p>[^] unselected legend chart is grey. See <a href="https://github.com/apache/incubator-echarts/issues/2615">#2615</a></p>
-</li>
-<li><p>[^] fix dataZoom position failure bug in media query of 3.1.1. Fix <a href="https://github.com/apache/incubator-echarts/issues/2710">#2710</a></p>
-</li>
-<li><p>[^] fix firefox's incapability of triggering wheel events bug in 3.1.1 中. Fix <a href="https://github.com/apache/incubator-echarts/issues/2730">#2730</a></p>
-</li>
-<li><p>[^] IE8 optimization.</p>
-</li>
-<li><p>[^] change to webpack to build code.</p>
-</li>
-</ul>
-<h2 id="v3-1-2">v3.1.2</h2>
-<div class="time">2016-03-01</div>
-
-<ul>
-<li><p>【+】provide theme download,see details in <a href="http://echarts.baidu.com/download-theme.html">http://echarts.baidu.com/download-theme.html</a></p>
-</li>
-<li><p>[^] fix <code>the bug that update data can not be shown in</code>setOption` after emptying line chart data in v3.1.1.</p>
-</li>
-<li><p>[^] fix possiblity of reporting <code>id duplicates</code> error in <code>setOption(chart.getOption())</code> . Fix <a href="https://github.com/apache/incubator-echarts/issues/2635">#2635</a></p>
-</li>
-<li><p>[^] allow to customize toolbox toobar. See details in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#toolbox.feature">toolbox.feature</a></p>
-</li>
-<li><p>[^] scale optimization of <code>'time'</code> type axis in large-span time range.</p>
-</li>
-<li><p>[^] fix no show of label formatter return to 0.Fix <a href="https://github.com/apache/incubator-echarts/issues/2659">#2659</a></p>
-</li>
-<li><p>[^] fix markPoint label display error in charts with vertical axis as category axis.Fix <a href="https://github.com/apache/incubator-echarts/issues/2641">#2641</a></p>
-</li>
-<li><p>[^] optimize dataZoom, fix dynamic data update problem in dataZoom chart. Fix <a href="https://github.com/apache/incubator-echarts/issues/2667">#2667</a></p>
-</li>
-<li><p>[^] percentage is 0 rather than NaN when all pie chart data are zero. Fix <a href="https://github.com/apache/incubator-echarts/issues/2667">#2690</a></p>
-</li>
-<li><p>[^] title alignment optimization.</p>
-</li>
-<li><p>[^] support display of tooltip when charts update. Fix <a href="https://github.com/apache/incubator-echarts/issues/2478">#2478</a></p>
-</li>
-<li><p>[^] dashboard <code>splitLine.length</code>, <code>axisTick.length</code> supports percentage.</p>
-</li>
-<li><p>[^] optimization of line animation feature.</p>
-</li>
-<li><p>[^] optimization of category axis feature of large data amount .</p>
-</li>
-<li><p>[^] fix error reporting bug of markPoint and markLine in IE8.</p>
-</li>
-<li><p>[^] fix error reporting bug under <code>'use strict'</code>model. Fix <a href="https://github.com/apache/incubator-echarts/issues/2643">#2643</a></p>
-</li>
-</ul>
-<h2 id="v3-1-1">v3.1.1</h2>
-<div class="time">2016-02-22</div>
-
-<ul>
-<li><p>【+】newly add npm channel to obtain echarts, see details in <a href="http://echarts.baidu.com/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts">webpack + echarts tutorial</a></p>
-</li>
-<li><p>[^] fix abnormal indynamic markPoint and markLine . Fix <a href="https://github.com/apache/incubator-echarts/issues/2522">#2522</a></p>
-</li>
-<li><p>[^] fix parameter error in axis interval callback. Fix <a href="https://github.com/apache/incubator-echarts/issues/2470">#2470</a></p>
-</li>
-<li><p>[^] fix failure in customizing lineStyle of every edge in graph. Fix <a href="https://github.com/apache/incubator-echarts/issues/2558">#2558</a></p>
-</li>
-<li><p>[^] saveAsImage supports IE9+ and FireFox in toolbox.</p>
-</li>
-<li><p>[^] support cylindrical corner configuration. <a href="https://github.com/apache/incubator-echarts/issues/2550">#2550</a></p>
-</li>
-<li><p>[^] fix error in dataZoom location configuration item. Fix <a href="https://github.com/apache/incubator-echarts/issues/2619">#2619</a></p>
-</li>
-<li><p>[^] fix possible <code>id duplicate</code> error when fix <code>setOption</code> for too many times.Fix <a href="https://github.com/apache/incubator-echarts/issues/2452">#2452</a></p>
-</li>
-<li><p>[^] candlestick and boxplot chart support markPoint and markLine.Fix <a href="https://github.com/apache/incubator-echarts/issues/2566">#2566</a></p>
-</li>
-<li><p>[^] fix reset error in toolbox after use <code>setOption</code> in non-merge model.Fix <a href="https://github.com/apache/incubator-echarts/issues/2596">#2596</a></p>
-</li>
-<li><p>[^] scatter chart and markPoint support configurating <code>label</code> <code>formatter</code> in <code>emphasis</code>. Fix <a href="https://github.com/apache/incubator-echarts/issues/2596">#2596</a></p>
-</li>
-<li><p>[^] Treemap supports <code>roam</code> configuration item.</p>
-</li>
-<li><p>[^] axis of time type support time data of string format.</p>
-</li>
-<li><p>[^] fix switch problem in Line and area charts. Fix <a href="https://github.com/apache/incubator-echarts/issues/2625">#2625</a></p>
-</li>
-<li><p>[^] location optimization of multiple series of bar chart markPoint. Fix <a href="https://github.com/apache/incubator-echarts/issues/2623">#2623</a></p>
-</li>
-<li><p>[^] fix error reporting in init when theme is string and has dataZoom component. Fix <a href="https://github.com/apache/incubator-echarts/issues/2619">#2619</a></p>
-</li>
-<li><p>[^] legend and toolbox support setting height and width and wrap automatically through width and height.Fix <a href="https://github.com/apache/incubator-echarts/issues/2621">#2621</a></p>
-</li>
-<li><p>[^] optimization of line chart smooth, add in<code>smoothMonotone</code> configuration item, see details in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-line.smoothMonotone">option.html#series-line.smoothMonotone</a>, Fix <a href="https://github.com/apache/incubator-echarts/issues/2612">#2612</a></p>
-</li>
-<li><p>[^] fix incapability to trigger mouse events on computers with touch screen like Surface and so on. Fix <a href="https://github.com/apache/incubator-echarts/issues/2569">#2569</a></p>
-</li>
-</ul>
-<h2 id="v3-0-2">v3.0.2</h2>
-<div class="time">2016-01-23</div>
-
-<ul>
-<li><p>[^] fix highlight failture in scatter chart.</p>
-</li>
-<li><p>[^] optimize tooltip linkage. Fix <a href="https://github.com/apache/incubator-echarts/issues/2445">#2445</a></p>
-</li>
-<li><p>[^] dataZoom of inside type support zoomLock.</p>
-</li>
-<li><p>[^] add error alert of non-exist map type.</p>
-</li>
-<li><p>[^] optimize legend switch animation of line chart.</p>
-</li>
-<li><p>[^] fix problem about Legends cannot be added dynamically. Fix <a href="https://github.com/apache/incubator-echarts/issues/2457">#2457</a></p>
-</li>
-<li><p>[^] fix timeline's incapability to configutate show.</p>
-</li>
-<li><p>[^] fix 0 data shown as undefined in tooltip .Fix <a href="https://github.com/apache/incubator-echarts/issues/2463">#2463</a></p>
-</li>
-<li><p>[^] fix incorrect display of dataZoom zoom graphic. Fix <a href="https://github.com/apache/incubator-echarts/issues/2462">#2462</a></p>
-</li>
-<li><p>[^] fix the problem of axis <code>min</code> <code>max</code> as string, PR <a href="https://github.com/apache/incubator-echarts/pull/2481">#2481</a></p>
-</li>
-</ul>
-<h2 id="v3-0-1">v3.0.1</h2>
-<div class="time">2016-01-18</div>
-
-<ul>
-<li><p>[+] add <a href="https://ecomfe.github.io/echarts-doc/public/en/api.html#echartsInstance.getOption">getOption</a> and <a href="https://ecomfe.github.io/echarts-doc/public/en/api.html#echartsInstance.clear">clear</a> method</p>
-</li>
-<li><p>[^] fix average value, maximum value and minimum vaule label and the incapability to show correct value of tooltip. Fix <a href="https://github.com/apache/incubator-echarts/issues/2393">#2393</a></p>
-</li>
-<li><p>[^] fix drawing incorrectness when bar chart has bigger width than height, Fix <a href="https://github.com/apache/incubator-echarts/issues/2343">#2343</a></p>
-</li>
-<li><p>[^] fix the function problem of legend <code>show</code> configuration item. Fix <a href="https://github.com/apache/incubator-echarts/issues/2371">#2371</a></p>
-</li>
-<li><p>[^] map type can choose data attribute.</p>
-</li>
-<li><p>[^] fix average mark and mark calculation errors, Fix <a href="https://github.com/apache/incubator-echarts/issues/2367">#2367</a></p>
-</li>
-<li><p>[^] animation optimization when line chart change from <code>'-'</code> no data to data.</p>
-</li>
-<li><p>[^] mouse wheel zoom direction change to ommonly used one.</p>
-</li>
-<li><p>[^] data area zoom tool in toolbar support specified axis, see detail in<a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#toolbox.feature.dataZoom.yAxisIndex">toolbox document</a></p>
-</li>
-<li><p>[^] fix no data error on timeline, scale change from <code>[-1, 1]</code> to <code>[0, 1]</code> when data value axis has no data.</p>
-</li>
-<li><p>[^] fix drawing error of axis splitArea.</p>
-</li>
-<li><p>[^] fix multiple chart example linkage problem. Fix <a href="https://github.com/apache/incubator-echarts/issues/2391">#2391</a></p>
-</li>
-<li><p>[^] fix the problem that color on legend cannot display correctly with pie chart color being callback function. Fix <a href="https://github.com/apache/incubator-echarts/issues/2372">#2372</a></p>
-</li>
-<li><p>[^] fix mouse hover errors when pie chart data is 0.</p>
-</li>
-<li><p>[^] when all pie chart data are 0, secotrs changed to uniform distribution.</p>
-</li>
-<li><p>[^] fix errors in background seeting under IE 8.</p>
-</li>
-<li><p>[^] fix incorrect release event in tooltip component dispose.</p>
-</li>
-</ul>
-<h2 id="v3-0-0">v3.0.0</h2>
-<div class="time">2016-01-12</div>
-
-<ul>
-<li>The new echarts</li>
-</ul>
diff --git a/public/en/documents/coding-standard.html b/public/en/documents/coding-standard.html
deleted file mode 100644
index 826b231..0000000
--- a/public/en/documents/coding-standard.html
+++ /dev/null
@@ -1,567 +0,0 @@
-<h2 id="code-style">Code Style</h2>
-<h3 id="file">File</h3>
-<p><strong>[MUST]</strong> JavaScript Source files must be encoded in UTF-8 without BOM.</p>
-<h3 id="indentation">Indentation</h3>
-<p><strong>[MUST]</strong> 4 space indentation. tabs and 2 space are not allowed.</p>
-<p><strong>[MUST]</strong> <code>case</code> and <code>default</code> in <code>switch</code> must be indented.</p>
-<pre><code class="lang-js">// good
-switch (variable) {
- case '1':
- // do...
- break;
- case '2':
- // do...
- break;
- default:
- // do...
-}
-
-// bad
-switch (variable) {
-case '1':
- // do...
- break;
-case '2':
- // do...
- break;
-default:
- // do...
-}
-</code></pre>
-<h3 id="space">Space</h3>
-<p><strong>[MUST]</strong> Set off binary operator with spaces. But place no space between unary operator and its operand.</p>
-<pre><code class="lang-js">var a = !arr.length;
-a++;
-a = b + c;
-</code></pre>
-<p><strong>[MUST]</strong> Place 1 space before the leading brace.</p>
-<pre><code class="lang-js">// good
-
-if (condition) {
-}
-
-set('attr', {
- some: 'xxx',
- any: 'yyy'
-});
-
-function funcName() {
-}
-
-
-// bad
-
-if (condition){
-}
-
-set('attr',{
- some: 'xxx',
- any: 'yyy'
-});
-
-function funcName(){
-}
-</code></pre>
-<p><strong>[MUST]</strong> Place 1 space after <code>if</code> / <code>else</code> / <code>for</code> / <code>while</code> / <code>function</code> / <code>switch</code> / <code>do</code> / <code>try</code> / <code>catch</code> / <code>finally</code>.</p>
-<pre><code class="lang-js">// good
-
-if (condition) {
-}
-
-while (condition) {
-}
-
-(function () {
-})();
-
-
-// bad
-
-if(condition) {
-}
-
-while(condition) {
-}
-
-(function() {
-})();
-</code></pre>
-<p><strong>[MUST]</strong> In the object creating statement, place 1 space after <code>:</code>, but no space before it.</p>
-<pre><code class="lang-js">// good
-var obj = {
- a: 1,
- b: 2,
- c: 3
-};
-
-// bad
-var obj = {
- a : 1,
- b:2,
- c :3
-};
-</code></pre>
-<p><strong>[MUST]</strong> Place no space between the function name and <code>(</code> in function declaration, expression of named function and function call.</p>
-<pre><code class="lang-js">// good
-
-function funcName() {
-}
-
-var funcName = function funcName() {
-};
-
-funcName();
-
-
-// bad
-
-function funcName () {
-}
-
-var funcName = function funcName () {
-};
-
-funcName ();
-</code></pre>
-<p><strong>[MUST]</strong> Place no space between <code>,</code> and <code>;</code>.</p>
-<pre><code class="lang-js">// good
-callFunc(a, b);
-
-// bad
-callFunc(a , b) ;
-</code></pre>
-<p><strong>[MUST]</strong> Place no space after <code>(</code> and <code>[</code> and before <code>)</code> and <code>]</code>.</p>
-<pre><code class="lang-js">// good
-
-callFunc(param1, param2, param3);
-
-save(this.list[this.indexes[i]]);
-
-needIncream && (variable += increament);
-
-if (num > list.length) {
-}
-
-while (len--) {
-}
-
-
-// bad
-
-callFunc( param1, param2, param3 );
-
-save( this.list[ this.indexes[ i ] ] );
-
-needIncreament && ( variable += increament );
-
-if ( num > list.length ) {
-}
-
-while ( len-- ) {
-}
-
-
-// good
-var arr1 = [];
-var arr2 = [1, 2, 3];
-var obj1 = {};
-var obj2 = {name: 'obj'};
-var obj3 = {
- name: 'obj',
- age: 20,
- sex: 1
-};
-
-// bad
-var arr1 = [ ];
-var arr2 = [ 1, 2, 3 ];
-var obj1 = { };
-var obj2 = { name: 'obj' };
-var obj3 = {name: 'obj', age: 20, sex: 1};
-</code></pre>
-<p><strong>[MUST]</strong> Must no trailing space in each line.</p>
-<h3 id="line-break">Line Break</h3>
-<p><strong>[MUST]</strong> Place line break in the end of a statement.</p>
-<p><strong>[MUST]</strong> No more than 120 characters per line.</p>
-<p><strong>[MUST]</strong> Place operator at the beginning of a line if it break lines.</p>
-<pre><code class="lang-js">// good
-if (user.isAuthenticated()
- && user.isInRole('admin')
- && user.hasAuthority('add-admin')
- || user.hasAuthority('delete-admin')
-) {
- // Code
-}
-
-var result = number1 + number2 + number3
- + number4 + number5;
-
-
-// bad
-if (user.isAuthenticated() &&
- user.isInRole('admin') &&
- user.hasAuthority('add-admin') ||
- user.hasAuthority('delete-admin')) {
- // Code
-}
-
-var result = number1 + number2 + number3 +
- number4 + number5;
-</code></pre>
-<p><strong>[MUST]</strong> Start a new line for <code>)</code>, <code>]</code>, <code>}</code> if the content inside the brackets occupies multiple lines.
-Make the same indent as the line where the corresponding <code>(</code>, <code>[</code>, <code>{</code> placed.</p>
-<pre><code class="lang-js">// good
-if (product) {
- product.load();
- if (user.isAuthenticated()
- && user.isInRole('admin')
- && user.hasAuthority('add-admin')
- ) {
- sendProduct(user, product);
- }
-}
-var arr = [
- 'candy', 'sugar'
-];
-
-// bad
-if (product) {
- product.load();
- if (user.isAuthenticated()
- && user.isInRole('admin')
- && user.hasAuthority('add-admin')) {
- sendProduct(user, product);
- }
-}
-var arr = [
- 'candy', 'sugar'
- ];
-</code></pre>
-<p><strong>[MUST]</strong> Must not break lines before <code>,</code> or <code>;</code>.</p>
-<pre><code class="lang-js">// good
-var obj = {
- a: 1,
- b: 2,
- c: 3
-};
-
-foo(
- aVeryVeryLongArgument,
- anotherVeryLongArgument,
- callback
-);
-
-
-// bad
-var obj = {
- a: 1
- , b: 2
- , c: 3
-};
-
-foo(
- aVeryVeryLongArgument
- , anotherVeryLongArgument
- , callback
-);
-</code></pre>
-<p><strong>[SUGGEST]</strong> Suggestion about line break and indent:</p>
-<pre><code class="lang-js">if (user.isAuthenticated()
- && user.isInRole('admin')
- && user.hasAuthority('add-admin')
-) {
- // Code
-}
-
-foo(
- aVeryVeryLongArgument,
- anotherVeryLongArgument,
- callback
-);
-
-baidu.format(
- dateFormatTemplate,
- year, month, date, hour, minute, second
-);
-
-$('#items')
- .find('.selected')
- .highlight()
- .end();
-
-var result = thisIsAVeryVeryLongCondition
- ? resultA : resultB;
-
-var result = condition
- ? thisIsAVeryVeryLongResult
- : resultB;
-</code></pre>
-<p><strong>[MUST]</strong> Start a new line for <code>else</code> and <code>catch</code> if using multi-line blocks.</p>
-<pre><code class="lang-js">// good
-
-if (condition) {
- // some statements;
-}
-else {
- // some statements;
-}
-
-try {
- // some statements;
-}
-catch (ex) {
- // some statements;
-}
-
-
-// bad
-
-if (condition) {
- // some statements;
-} else {
- // some statements;
-}
-
-try {
- // some statements;
-} catch (ex) {
- // some statements;
-}
-</code></pre>
-<h3 id="statement">Statement</h3>
-<p><strong>[MUST]</strong> The comma must not be ignored at the end of a statement.</p>
-<p><strong>[MUST]</strong> The <code>{}</code> must not be ignored even if there is only one line.</p>
-<pre><code class="lang-js">// good
-if (condition) {
- callFunc();
-}
-
-// bad
-if (condition) callFunc();
-if (condition)
- callFunc();
-</code></pre>
-<p><strong>[MUST]</strong> Place no comma at the end of a function definition.</p>
-<pre><code class="lang-js">// good
-function funcName() {
-}
-
-// bad
-function funcName() {
-};
-
-// For function expression, the comma must not be ignored.
-var funcName = function () {
-};
-</code></pre>
-<p><strong>[MUST]</strong> No trailing comma in object and array declarations.</p>
-<pre><code class="lang-js">// good
-
-var obj = {
- attr1: 'xxx',
- attr2: 'yyy'
-};
-
-var arr = [
- 'xxx',
- 'yyy'
-];
-
-
-// bad
-
-var obj = {
- attr1: 'xxx',
- attr2: 'yyy',
-};
-
-var arr = [
- 'xxx',
- 'yyy',
-];
-</code></pre>
-<h3 id="naming-conventions">Naming Conventions</h3>
-<p><strong>[MUST]</strong> Use lowerCamelCase for variables, properties and function names.</p>
-<pre><code class="lang-js">var loadingModules = {};
-function loadProduct() {
-}
-</code></pre>
-<p><strong>[MUST]</strong> Use UpperCamelCase (Pascal) for class names.</p>
-<pre><code class="lang-js">function Element(options) {
-}
-</code></pre>
-<p><strong>[SUGGEST]</strong> All of the letters of a abbreviation should be both upper cases or both lower cases.</p>
-<pre><code class="lang-js">function parseSVG() {
-}
-var svgParser;
-</code></pre>
-<h2 id="language-features">Language features</h2>
-<h3 id="compatibility">Compatibility</h3>
-<p><strong>[MUST]</strong> The JavaScript code of ECharts should be based on <code>ECMAScript Language Specification Edition 3 (ES3)</code>. The language features that not supported by ES3 (namely, features that are only supported by ES5, ES6 or upper versions) must not be used.</p>
-<p>But there is an exception that ES Module can be used.</p>
-<p>Language features can be polyfilled by some utilities, but must not by modifying the prototype of the built-in JS objects.</p>
-<pre><code class="lang-js">// good
-
-import * as zrUtil from 'zrender/src/core/util';
-
-zrUtil.each(array, function (val, index) {
- sum += val;
-});
-
-var result = zrUtil.map(array, function (val) {
- return parse(val);
-});
-
-var pos = zrUtil.indexOf(array, val);
-
-var obj2 = zrUtil.extend({}, obj1);
-
-function Element() {
- // ...
-}
-
-
-// bad
-
-array.forEach(function (val, index) {
- sum += val;
-});
-
-let result = array.map(function (val) {
- return parse(val);
-});
-
-const pos = array.indexOf(val);
-
-var obj2 = Object.assign({}, obj1);
-
-class Element {
- // ...
-}
-
-String.prototype.trim = function () {
-};
-</code></pre>
-<h3 id="variable">Variable</h3>
-<p><strong>[MUST]</strong> Variables must be declared by <code>var</code>. And a <code>var</code> can not declares more than one variable.</p>
-<pre><code class="lang-js">// good
-var name = 'MyName';
-var hangModules = [];
-var missModules = [];
-var visited = {};
-
-// bad
-name = 'MyName';
-var hangModules = [],
- missModules = [],
- visited = {};
-</code></pre>
-<h3 id="condition">Condition</h3>
-<p><strong>[MUST]</strong> In equality expression, <code>==</code> can only be used on <code>null</code> or <code>undefined</code> detection. <code>===</code> should be used in the rest of cases .</p>
-<pre><code class="lang-js">// good
-if (age === 30) {
- // ...
-}
-if (type == null) {
- // ...
-}
-
-// bad
-if (age == 30) {
- // ......
-}
-</code></pre>
-<p><strong>[SUGGEST]</strong> Use <code>xxx == null</code> to determine <code>null</code> or <code>undefined</code>.</p>
-<p><strong>[SUGGEST]</strong> Try best to make the meaning of <code>null</code> and <code>undefined</code> the same, namely, do not make users or developers distinguishing whether a variable is <code>null</code> or <code>undefined</code>.</p>
-<p><strong>[SUGGEST]</strong> The function expression or function declaration should not be placed inside a loop body.</p>
-<pre><code class="lang-js">// good
-function clicker() {
- // ......
-}
-
-for (var i = 0, len = elements.length; i < len; i++) {
- var element = elements[i];
- addListener(element, 'click', clicker);
-}
-
-
-// bad
-for (var i = 0, len = elements.length; i < len; i++) {
- var element = elements[i];
- addListener(element, 'click', function () {});
-}
-</code></pre>
-<h3 id="type-conversion">Type Conversion</h3>
-<p><strong>[SUGGEST]</strong> Use <code>+ ''</code> to convert a value to string.</p>
-<pre><code class="lang-js">// good
-num + '';
-
-// bad
-new String(num);
-num.toString();
-String(num);
-</code></pre>
-<p><strong>[SUGGEST]</strong> Use <code>+</code> to convert a value to number.</p>
-<pre><code class="lang-js">// good
-+str;
-
-// bad
-Number(str);
-</code></pre>
-<p><strong>[MUST]</strong> The second parameter must not be ignored when using <code>parseInt</code>.</p>
-<pre><code class="lang-js">// good
-parseInt(str, 10);
-
-// bad
-parseInt(str);
-</code></pre>
-<h3 id="string-object-array">String, Object, Array</h3>
-<p><strong>[MUST]</strong> Use <code>'</code> but not <code>"</code> to define a string.</p>
-<p><strong>[MUST]</strong> Use object literal <code>{}</code> to create a plain object.</p>
-<pre><code class="lang-js">// good
-var obj = {};
-
-// bad
-var obj = new Object();
-</code></pre>
-<p><strong>[MUST]</strong> If all of the properties of an object literal do not need quotation marks, they should ignore them. If quotation marks is necessary, use <code>'</code> but not <code>"</code>.</p>
-<pre><code class="lang-js">// good
-var info = {
- name: 'someone',
- age: 28
-};
-
-// bad
-var info = {
- 'name': 'someone',
- 'age': 28
-};
-var info2 = {
- "age": 40
-};
-</code></pre>
-<p><strong>[MUST]</strong> The prototype of built-in objects must not be modified.</p>
-<pre><code class="lang-js">// Forbidden
-String.prototype.trim = function () {
-};
-</code></pre>
-<p><strong>[SUGGEST]</strong> Try best to use <code>.</code> but not <code>[]</code> to visit properties of an object.</p>
-<p><strong>[SUGGEST]</strong> <code>hasOwnProperty</code> should be used to when using <code>for ... in ...</code>, in case that some extra properties is added on the prototype of <code>Object</code> in some runtime environment.</p>
-<pre><code class="lang-js">var newInfo = {};
-for (var key in info) {
- if (info.hasOwnProperty(key)) {
- newInfo[key] = info[key];
- }
-}
-</code></pre>
-<p><strong>[MUST]</strong> Use array literal <code>[]</code> to create an array, except intending to create an array with a given length.</p>
-<pre><code class="lang-js">// good
-var arr = [];
-var arr2 = new Array(1e4);
-
-// bad
-var arr = new Array();
-</code></pre>
-<p><strong>[MUST]</strong> Do not use <code>for in</code> in array traverse.</p>
-<h3 id="others">Others</h3>
-<p><strong>[MUST]</strong> Do not use <code>eval</code> and <code>with</code>. <code>new Function</code> can be used.</p>
diff --git a/public/en/documents/option-gl-parts/option-gl-outline.json b/public/en/documents/option-gl-parts/option-gl-outline.json
deleted file mode 100644
index 383c8c2..0000000
--- a/public/en/documents/option-gl-parts/option-gl-outline.json
+++ /dev/null
@@ -1 +0,0 @@
-{"children":[{"type":"Object","isObject":true,"prop":"globe","children":[{"default":true,"prop":"show"},{"default":-10,"prop":"zlevel"},{"type":["string","number"],"default":"auto","prop":"left"},{"type":["string","number"],"default":"auto","prop":"top"},{"type":["string","number"],"default":"auto","prop":"right"},{"type":["string","number"],"default":"auto","prop":"bottom"},{"type":["string","number"],"default":"auto","prop":"width"},{"type":["string","number"],"default":"auto","prop":" [...]
\ No newline at end of file
diff --git a/public/en/documents/option-gl-parts/option-gl.geo3D.json b/public/en/documents/option-gl-parts/option-gl.geo3D.json
deleted file mode 100644
index 2e5d966..0000000
--- a/public/en/documents/option-gl-parts/option-gl.geo3D.json
+++ /dev/null
@@ -1,172 +0,0 @@
-{
- "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"
-}
\ No newline at end of file
diff --git a/public/en/documents/option-gl-parts/option-gl.globe.json b/public/en/documents/option-gl-parts/option-gl.globe.json
deleted file mode 100644
index 5d5a28c..0000000
--- a/public/en/documents/option-gl-parts/option-gl.globe.json
+++ /dev/null
@@ -1,118 +0,0 @@
-{
- "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"
-}
\ No newline at end of file
diff --git a/public/en/documents/option-gl-parts/option-gl.grid3D.json b/public/en/documents/option-gl-parts/option-gl.grid3D.json
deleted file mode 100644
index 406cd1a..0000000
--- a/public/en/documents/option-gl-parts/option-gl.grid3D.json
+++ /dev/null
@@ -1,134 +0,0 @@
-{
- "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"
-}
\ No newline at end of file
diff --git a/public/en/documents/option-gl-parts/option-gl.json b/public/en/documents/option-gl-parts/option-gl.json
deleted file mode 100644
index 4b4df9b..0000000
--- a/public/en/documents/option-gl-parts/option-gl.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
- "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"
-}
\ No newline at end of file
diff --git a/public/en/documents/option-gl-parts/option-gl.mapbox3D.json b/public/en/documents/option-gl-parts/option-gl.mapbox3D.json
deleted file mode 100644
index fd76edf..0000000
--- a/public/en/documents/option-gl-parts/option-gl.mapbox3D.json
+++ /dev/null
@@ -1,69 +0,0 @@
-{
- "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"
-}
\ No newline at end of file
diff --git a/public/en/documents/option-gl-parts/option-gl.series-bar3D.json b/public/en/documents/option-gl-parts/option-gl.series-bar3D.json
deleted file mode 100644
index 5fb0cb4..0000000
--- a/public/en/documents/option-gl-parts/option-gl.series-bar3D.json
+++ /dev/null
@@ -1,91 +0,0 @@
-{
- "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"
-}
\ No newline at end of file
diff --git a/public/en/documents/option-gl-parts/option-gl.series-flowGL.json b/public/en/documents/option-gl-parts/option-gl.series-flowGL.json
deleted file mode 100644
index a39f432..0000000
--- a/public/en/documents/option-gl-parts/option-gl.series-flowGL.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
- "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"
-}
\ No newline at end of file
diff --git a/public/en/documents/option-gl-parts/option-gl.series-graphGL.json b/public/en/documents/option-gl-parts/option-gl.series-graphGL.json
deleted file mode 100644
index 1f6a9f2..0000000
--- a/public/en/documents/option-gl-parts/option-gl.series-graphGL.json
+++ /dev/null
@@ -1,48 +0,0 @@
-{
- "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 [...]
-}
\ No newline at end of file
diff --git a/public/en/documents/option-gl-parts/option-gl.series-line3D.json b/public/en/documents/option-gl-parts/option-gl.series-line3D.json
deleted file mode 100644
index f4cc816..0000000
--- a/public/en/documents/option-gl-parts/option-gl.series-line3D.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
- "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"
-}
\ No newline at end of file
diff --git a/public/en/documents/option-gl-parts/option-gl.series-lines3D.json b/public/en/documents/option-gl-parts/option-gl.series-lines3D.json
deleted file mode 100644
index bf99a53..0000000
--- a/public/en/documents/option-gl-parts/option-gl.series-lines3D.json
+++ /dev/null
@@ -1,29 +0,0 @@
-{
- "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"
-}
\ No newline at end of file
diff --git a/public/en/documents/option-gl-parts/option-gl.series-map3D.json b/public/en/documents/option-gl-parts/option-gl.series-map3D.json
deleted file mode 100644
index 833f398..0000000
--- a/public/en/documents/option-gl-parts/option-gl.series-map3D.json
+++ /dev/null
@@ -1,173 +0,0 @@
-{
- "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"
-}
\ No newline at end of file
diff --git a/public/en/documents/option-gl-parts/option-gl.series-polygons3D.json b/public/en/documents/option-gl-parts/option-gl.series-polygons3D.json
deleted file mode 100644
index 5666370..0000000
--- a/public/en/documents/option-gl-parts/option-gl.series-polygons3D.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
- "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"
-}
\ No newline at end of file
diff --git a/public/en/documents/option-gl-parts/option-gl.series-scatter3D.json b/public/en/documents/option-gl-parts/option-gl.series-scatter3D.json
deleted file mode 100644
index 8a32290..0000000
--- a/public/en/documents/option-gl-parts/option-gl.series-scatter3D.json
+++ /dev/null
@@ -1,49 +0,0 @@
-{
- "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"
-}
\ No newline at end of file
diff --git a/public/en/documents/option-gl-parts/option-gl.series-scatterGL.json b/public/en/documents/option-gl-parts/option-gl.series-scatterGL.json
deleted file mode 100644
index 007e100..0000000
--- a/public/en/documents/option-gl-parts/option-gl.series-scatterGL.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
- "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"
-}
\ No newline at end of file
diff --git a/public/en/documents/option-gl-parts/option-gl.series-surface.json b/public/en/documents/option-gl-parts/option-gl.series-surface.json
deleted file mode 100644
index 53bf176..0000000
--- a/public/en/documents/option-gl-parts/option-gl.series-surface.json
+++ /dev/null
@@ -1,66 +0,0 @@
-{
- "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"
-}
\ No newline at end of file
diff --git a/public/en/documents/option-gl-parts/option-gl.xAxis3D.json b/public/en/documents/option-gl-parts/option-gl.xAxis3D.json
deleted file mode 100644
index a5514c5..0000000
--- a/public/en/documents/option-gl-parts/option-gl.xAxis3D.json
+++ /dev/null
@@ -1,79 +0,0 @@
-{
- "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"
-}
\ No newline at end of file
diff --git a/public/en/documents/option-gl-parts/option-gl.yAxis3D.json b/public/en/documents/option-gl-parts/option-gl.yAxis3D.json
deleted file mode 100644
index 86df0fe..0000000
--- a/public/en/documents/option-gl-parts/option-gl.yAxis3D.json
+++ /dev/null
@@ -1,79 +0,0 @@
-{
- "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"
-}
\ No newline at end of file
diff --git a/public/en/documents/option-gl-parts/option-gl.zAxis3D.json b/public/en/documents/option-gl-parts/option-gl.zAxis3D.json
deleted file mode 100644
index e698bd9..0000000
--- a/public/en/documents/option-gl-parts/option-gl.zAxis3D.json
+++ /dev/null
@@ -1,79 +0,0 @@
-{
- "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"
-}
\ No newline at end of file
diff --git a/public/en/documents/option-gl.json b/public/en/documents/option-gl.json
deleted file mode 100644
index 0448737..0000000
--- a/public/en/documents/option-gl.json
+++ /dev/null
@@ -1 +0,0 @@
-{"$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/public/en/documents/option-parts/option-outline.json b/public/en/documents/option-parts/option-outline.json
deleted file mode 100644
index f7c4ad3..0000000
--- a/public/en/documents/option-parts/option-outline.json
+++ /dev/null
@@ -1 +0,0 @@
-{"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":"*","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#333'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":18,"pro [...]
\ No newline at end of file
diff --git a/public/en/documents/option-parts/option.angleAxis.json b/public/en/documents/option-parts/option.angleAxis.json
deleted file mode 100644
index d0e3f5a..0000000
--- a/public/en/documents/option-parts/option.angleAxis.json
+++ /dev/null
@@ -1,239 +0,0 @@
-{
- "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://www.echartsjs.com/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://www.echartsjs.com/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. Data should only be set via <a href=\"#angleAxis.data\">data</a> for this type.</p>\n</li>\n<li><p><code class=\"codespan\">'time'</code>\n Time axis, suitable for continuous time series data. As comp [...]
- "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.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",
- "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.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.<user defined style name>.color": "<p> text color.</p>\n",
- "axisLabel.rich.<user defined 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.<user defined 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.<user defined style name>.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "axisLabel.rich.<user defined style name>.fontSize": "<p> font size</p>\n",
- "axisLabel.rich.<user defined 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 exa [...]
- "axisLabel.rich.<user defined 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 [...]
- "axisLabel.rich.<user defined 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.<user defined 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 [...]
- "axisLabel.rich.<user defined style name>.borderColor": "<p>Border color of the text fragment.</p>\n",
- "axisLabel.rich.<user defined style name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "axisLabel.rich.<user defined style name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "axisLabel.rich.<user defined 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]</c [...]
- "axisLabel.rich.<user defined style name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "axisLabel.rich.<user defined style name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "axisLabel.rich.<user defined style name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "axisLabel.rich.<user defined style name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "axisLabel.rich.<user defined 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\">paddin [...]
- "axisLabel.rich.<user defined 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> an [...]
- "axisLabel.rich.<user defined style name>.textBorderColor": "<p>Storke color of the text.</p>\n",
- "axisLabel.rich.<user defined style name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "axisLabel.rich.<user defined style name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "axisLabel.rich.<user defined style name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "axisLabel.rich.<user defined style name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "axisLabel.rich.<user defined style name>.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n<!-- Overwrite color -->\n",
- "splitLine": "<p>SplitLine 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.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",
- "splitArea": "<p>Split area of axis in <a href=\"#grid\">grid</a> area, not shown by default.</p>\n",
- "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.<user defined style name>.color": "<p> text color.</p>\n",
- "data.textStyle.rich.<user defined 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.<user defined 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.<user defined style name>.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "data.textStyle.rich.<user defined style name>.fontSize": "<p> font size</p>\n",
- "data.textStyle.rich.<user defined 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. Fo [...]
- "data.textStyle.rich.<user defined 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 [...]
- "data.textStyle.rich.<user defined 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.<user defined 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 [...]
- "data.textStyle.rich.<user defined style name>.borderColor": "<p>Border color of the text fragment.</p>\n",
- "data.textStyle.rich.<user defined style name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "data.textStyle.rich.<user defined style name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "data.textStyle.rich.<user defined 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, [...]
- "data.textStyle.rich.<user defined style name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "data.textStyle.rich.<user defined style name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "data.textStyle.rich.<user defined style name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "data.textStyle.rich.<user defined style name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "data.textStyle.rich.<user defined 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\">p [...]
- "data.textStyle.rich.<user defined 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</cod [...]
- "data.textStyle.rich.<user defined style name>.textBorderColor": "<p>Storke color of the text.</p>\n",
- "data.textStyle.rich.<user defined style name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "data.textStyle.rich.<user defined style name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "data.textStyle.rich.<user defined style name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "data.textStyle.rich.<user defined style name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "data.textStyle.rich.<user defined 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://www.echartsjs.com/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<p>{ target: partial-axis-interval }}\nInterval of , 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 [...]
- "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"
-}
\ No newline at end of file
diff --git a/public/en/documents/option-parts/option.aria.json b/public/en/documents/option-parts/option.aria.json
deleted file mode 100644
index 262bacb..0000000
--- a/public/en/documents/option-parts/option.aria.json
+++ /dev/null
@@ -1,29 +0,0 @@
-{
- "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"
-}
\ No newline at end of file
diff --git a/public/en/documents/option-parts/option.axisPointer.json b/public/en/documents/option-parts/option.axisPointer.json
deleted file mode 100644
index 112660e..0000000
--- a/public/en/documents/option-parts/option.axisPointer.json
+++ /dev/null
@@ -1,66 +0,0 @@
-{
- "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://www.echartsjs.com/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://www.echartsjs.com/examples/zh/view.html?c=candlestick-brush&edit=1&reset=1\" target=\"_blank\">sampleA</a> and <a href=\"https://www.echartsjs.com/examples/zh/view.html?c=scatter-nutrients-matrix&edit=1&reset=1\" target=\"_blank\">sampleB</a>.</p>\n<p> [...]
- "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 [...]
-}
\ No newline at end of file
diff --git a/public/en/documents/option-parts/option.brush.json b/public/en/documents/option-parts/option.brush.json
deleted file mode 100644
index 1d4a2fd..0000000
--- a/public/en/documents/option-parts/option.brush.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
- "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"
-}
\ No newline at end of file
diff --git a/public/en/documents/option-parts/option.calendar.json b/public/en/documents/option-parts/option.calendar.json
deleted file mode 100644
index 66dfd4e..0000000
--- a/public/en/documents/option-parts/option.calendar.json
+++ /dev/null
@@ -1,205 +0,0 @@
-{
- "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.<user defined style name>.color": "<p> text color.</p>\n",
- "dayLabel.rich.<user defined 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.<user defined 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.<user defined style name>.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "dayLabel.rich.<user defined style name>.fontSize": "<p> font size</p>\n",
- "dayLabel.rich.<user defined 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 exam [...]
- "dayLabel.rich.<user defined 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 [...]
- "dayLabel.rich.<user defined 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.<user defined 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 [...]
- "dayLabel.rich.<user defined style name>.borderColor": "<p>Border color of the text fragment.</p>\n",
- "dayLabel.rich.<user defined style name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "dayLabel.rich.<user defined style name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "dayLabel.rich.<user defined 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]</co [...]
- "dayLabel.rich.<user defined style name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "dayLabel.rich.<user defined style name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "dayLabel.rich.<user defined style name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "dayLabel.rich.<user defined style name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "dayLabel.rich.<user defined 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 [...]
- "dayLabel.rich.<user defined 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 [...]
- "dayLabel.rich.<user defined style name>.textBorderColor": "<p>Storke color of the text.</p>\n",
- "dayLabel.rich.<user defined style name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "dayLabel.rich.<user defined style name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "dayLabel.rich.<user defined style name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "dayLabel.rich.<user defined style name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "dayLabel.rich.<user defined 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.<user defined style name>.color": "<p> text color.</p>\n",
- "monthLabel.rich.<user defined 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.<user defined 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.<user defined style name>.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "monthLabel.rich.<user defined style name>.fontSize": "<p> font size</p>\n",
- "monthLabel.rich.<user defined 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 ex [...]
- "monthLabel.rich.<user defined 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 leve [...]
- "monthLabel.rich.<user defined 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.<user defined 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 // o [...]
- "monthLabel.rich.<user defined style name>.borderColor": "<p>Border color of the text fragment.</p>\n",
- "monthLabel.rich.<user defined style name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "monthLabel.rich.<user defined style name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "monthLabel.rich.<user defined 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]</ [...]
- "monthLabel.rich.<user defined style name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "monthLabel.rich.<user defined style name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "monthLabel.rich.<user defined style name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "monthLabel.rich.<user defined style name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "monthLabel.rich.<user defined 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\">paddi [...]
- "monthLabel.rich.<user defined 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> a [...]
- "monthLabel.rich.<user defined style name>.textBorderColor": "<p>Storke color of the text.</p>\n",
- "monthLabel.rich.<user defined style name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "monthLabel.rich.<user defined style name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "monthLabel.rich.<user defined style name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "monthLabel.rich.<user defined style name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "monthLabel.rich.<user defined 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} [...]
- "yearLabel.color": "<p> text color.</p>\n",
- "yearLabel.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",
- "yearLabel.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",
- "yearLabel.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "yearLabel.fontSize": "<p> font size</p>\n",
- "yearLabel.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 [...]
- "yearLabel.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> [...]
- "yearLabel.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",
- "yearLabel.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 [...]
- "yearLabel.borderColor": "<p>Border color of the text fragment.</p>\n",
- "yearLabel.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "yearLabel.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "yearLabel.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, < [...]
- "yearLabel.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "yearLabel.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "yearLabel.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "yearLabel.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "yearLabel.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=\ [...]
- "yearLabel.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 [...]
- "yearLabel.textBorderColor": "<p>Storke color of the text.</p>\n",
- "yearLabel.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "yearLabel.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "yearLabel.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "yearLabel.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "yearLabel.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "yearLabel.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 [...]
- "yearLabel.rich.<user defined style name>.color": "<p> text color.</p>\n",
- "yearLabel.rich.<user defined 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",
- "yearLabel.rich.<user defined 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",
- "yearLabel.rich.<user defined style name>.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "yearLabel.rich.<user defined style name>.fontSize": "<p> font size</p>\n",
- "yearLabel.rich.<user defined 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 exa [...]
- "yearLabel.rich.<user defined 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 [...]
- "yearLabel.rich.<user defined 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",
- "yearLabel.rich.<user defined 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 [...]
- "yearLabel.rich.<user defined style name>.borderColor": "<p>Border color of the text fragment.</p>\n",
- "yearLabel.rich.<user defined style name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "yearLabel.rich.<user defined style name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "yearLabel.rich.<user defined 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]</c [...]
- "yearLabel.rich.<user defined style name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "yearLabel.rich.<user defined style name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "yearLabel.rich.<user defined style name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "yearLabel.rich.<user defined style name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "yearLabel.rich.<user defined 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\">paddin [...]
- "yearLabel.rich.<user defined 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> an [...]
- "yearLabel.rich.<user defined style name>.textBorderColor": "<p>Storke color of the text.</p>\n",
- "yearLabel.rich.<user defined style name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "yearLabel.rich.<user defined style name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "yearLabel.rich.<user defined style name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "yearLabel.rich.<user defined style name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "yearLabel.rich.<user defined style name>.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "silent": "<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"
-}
\ No newline at end of file
diff --git a/public/en/documents/option-parts/option.dataZoom-inside.json b/public/en/documents/option-parts/option.dataZoom-inside.json
deleted file mode 100644
index bff8001..0000000
--- a/public/en/documents/option-parts/option.dataZoom-inside.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
- "id": "<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n",
- "disabled": "<p>Whether disable inside zoom.</p>\n",
- "xAxisIndex": "<p>Specify which <a href=\"#xAxis\">xAxis</a> is/are controlled by the <code class=\"codespan\">dataZoom-inside</code> when <a href=\"#grid\">catesian coordinate system</a> is used.</p>\n<p>By default the first <code class=\"codespan\">xAxis</code> that parallel to <code class=\"codespan\">dataZoom</code> are controlled when <a href=\"#dataZoom-inside.orient\">dataZoom-inside.orient</a> is set as <code class=\"codespan\">'horizontal'</code>. But it is recommended [...]
- "yAxisIndex": "<p>Specify which <a href=\"#yAxis\">yAxis</a> is/are controlled by the <code class=\"codespan\">dataZoom-inside</code> when <a href=\"#grid\">catesian coordinate system</a> is used.</p>\n<p>By default the first <code class=\"codespan\">yAxis</code> that parallel to <code class=\"codespan\">dataZoom</code> are controlled when <a href=\"#dataZoom-inside.orient\">dataZoom-inside.orient</a> is set as <code class=\"codespan\">'vertical'</code>. But it is recommended t [...]
- "radiusAxisIndex": "<p>Specify which <a href=\"#radiusAxis\">radiusAxis</a> is/are controlled by the <code class=\"codespan\">dataZoom-inside</code> when <a href=\"#polar\">polar coordinate system</a> is used.</p>\n<p>If it is set as a single <code class=\"codespan\">number</code>, one axis is controlled, while if it is set as an <code class=\"codespan\">Array</code> , multiple axes are controlled.</p>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">option: {\n radiusAxis [...]
- "angleAxisIndex": "<p>Specify which <a href=\"#angleAxis\">angleAxis</a> is/are controlled by the <code class=\"codespan\">dataZoom-inside</code> when <a href=\"#polar\">polar coordinate system</a> is used.</p>\n<p>If it is set as a single <code class=\"codespan\">number</code>, one axis is controlled, while if it is set as an <code class=\"codespan\">Array</code> , multiple axes are controlled.</p>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">option: {\n angleAxis: [\ [...]
- "filterMode": "<p>Generally <code class=\"codespan\">dataZoom</code> component zoom or roam coordinate system through data filtering and set the windows of axes internally.</p>\n<p>Its behaviours vary according to filtering mode settings (<a href=\"#dataZoom.filterMode\">dataZoom.filterMode</a>).</p>\n<p>Possible values:</p>\n<ul>\n<li><p>'filter': data that outside the window will be <strong>filtered</strong>, which may lead to some changes of windows of other axes. For each d [...]
- "start": "<p>The start percentage of the window out of the data extent, in the range of 0 ~ 100.</p>\n<p><a href=\"#dataZoom-inside.start\">dataZoom-inside.start</a> and <a href=\"#dataZoom-inside.end\">dataZoom-inside.end</a> define the window of the data in <strong>percent</strong> form.</p>\n<p>More info about the relationship between <code class=\"codespan\">dataZoom-inside.start</code> and axis extent can be checked in <a href=\"#dataZoom-inside.rangeMode\">dataZoom-inside.rangeMo [...]
- "end": "<p>The end percentage of the window out of the data extent, in the range of 0 ~ 100.</p>\n<p><a href=\"#dataZoom-inside.start\">dataZoom-inside.start</a> and <a href=\"#dataZoom-inside.end\">dataZoom-inside.end</a> define the window of the data in <strong>percent</strong> form.</p>\n<p>More info about the relationship between <code class=\"codespan\">dataZoom-inside.end</code> and axis extent can be checked in <a href=\"#dataZoom-inside.rangeMode\">dataZoom-inside.rangeMode</a> [...]
- "startValue": "<p>The start absolute value of the window, not works when <a href=\"#dataZoom-inside.start\">dataZoom-inside.start</a> is set.</p>\n<p><a href=\"#dataZoom-inside.startValue\">dataZoom-inside.startValue</a> and <a href=\"#dataZoom-inside.endValue\">dataZoom-inside.endValue</a> define the window of the data window in <strong>absolute value</strong> form.</p>\n<p>Notice, if an axis is set to be <code class=\"codespan\">category</code>, <code class=\"codespan\">startValue</c [...]
- "endValue": "<p>The end absolute value of the window, not works when <a href=\"#dataZoom-inside.end\">dataZoom-inside.end</a> is set.</p>\n<p><a href=\"#dataZoom-inside.startValue\">dataZoom-inside.startValue</a> and <a href=\"#dataZoom-inside.endValue\">dataZoom-inside.endValue</a> define the window of the data window in <strong>absolute value</strong> form.</p>\n<p>Notice, if an axis is set to be <code class=\"codespan\">category</code>, <code class=\"codespan\">startValue</code> cou [...]
- "minSpan": "<p>Used to restrict minimal window size, in percent, which value is in the range of [0, 100].</p>\n<p>If <a href=\"#dataZoom-inside.minValueSpan\">dataZoom-inside.minValueSpan</a> is set, <code class=\"codespan\">minSpan</code> does not work any more.</p>\n",
- "maxSpan": "<p>Used to restrict maximal window size, in percent, which value is in the range of [0, 100].</p>\n<p>If <a href=\"#dataZoom-inside.maxValueSpan\">dataZoom-inside.maxValueSpan</a> is set, <code class=\"codespan\">maxSpan</code> does not work any more.</p>\n",
- "minValueSpan": "<p>Used to restrict minimal window size.</p>\n<p>For example:\nIn time axis it can be set as <code class=\"codespan\">3600 * 24 * 1000 * 5</code> to represent "5 day".\nIn category axis it can be set as <code class=\"codespan\">5</code> to represent 5 categories.</p>\n",
- "maxValueSpan": "<p>Used to restrict maximal window size.</p>\n<p>For example:\nIn time axis it can be set as <code class=\"codespan\">3600 * 24 * 1000 * 5</code> to represent "5 day".\nIn category axis it can be set as <code class=\"codespan\">5</code> to represent 5 categories.</p>\n",
- "orient": "<p>Specify whether the layout of <code class=\"codespan\">dataZoom</code> component is horizontal or vertical. What's more, it indicates whether the horizontal axis or vertical axis is controlled by default in catesian coordinate system.</p>\n<p>Valid values:</p>\n<ul>\n<li><p><code class=\"codespan\">'horizontal'</code>: horizontal.</p>\n</li>\n<li><p><code class=\"codespan\">'vertical'</code>: vertical.</p>\n</li>\n</ul>\n",
- "zoomLock": "<p>Specify whether to lock the size of window (selected area).</p>\n<p>When set as <code class=\"codespan\">true</code>, the size of window is locked, that is, only the translation (by mouse drag or touch drag) is avialable but zoom is not.</p>\n",
- "throttle": "<p>Specify the frame rate of views refreshing, with unit millisecond (ms).</p>\n<p>If <a href=\"#animation\">animation</a> set as <code class=\"codespan\">true</code> and <a href=\"#animationDurationUpdate\">animationDurationUpdate</a> set as bigger than <code class=\"codespan\">0</code>, you can keep <code class=\"codespan\">throttle</code> as the default value <code class=\"codespan\">100</code> (or set it as a value bigger than <code class=\"codespan\">0</code>), otherw [...]
- "rangeMode": "<p>The format is <code class=\"codespan\">[rangeModeForStart, rangeModeForEnd]</code>.</p>\n<p>For example <code class=\"codespan\">rangeMode: ['value', 'percent']</code> means that use absolute value in <code class=\"codespan\">start</code> and percent value in <code class=\"codespan\">end</code>.</p>\n<p>Optional value for each item: <code class=\"codespan\">'value'</code>, <code class=\"codespan\">'percent'</code>.</p>\n<ul>\n<li><code c [...]
- "zoomOnMouseWheel": "<p>How to trigger zoom. Optional values:</p>\n<ul>\n<li><code class=\"codespan\">true</code>：Mouse wheel triggers zoom.</li>\n<li><code class=\"codespan\">false</code>：Mouse wheel can not triggers zoom.</li>\n<li><code class=\"codespan\">'shift'</code>：Holding <code class=\"codespan\">shift</code> and mouse wheel triggers zoom.</li>\n<li><code class=\"codespan\">'ctrl'</code>：Holding <code class=\"codespan\">ctrl</code> and mouse wheel triggers zoom [...]
- "moveOnMouseMove": "<p>How to trigger data window move. Optional values:</p>\n<ul>\n<li><code class=\"codespan\">true</code>：Mouse move triggers data window move.</li>\n<li><code class=\"codespan\">false</code>：Mouse move can not triggers data window move.</li>\n<li><code class=\"codespan\">'shift'</code>：Holding <code class=\"codespan\">shift</code> and mouse move triggers data window move.</li>\n<li><code class=\"codespan\">'ctrl'</code>：Holding <code class=\"codespan [...]
- "moveOnMouseWheel": "<p>How to trigger data window move. Optional values:</p>\n<ul>\n<li><code class=\"codespan\">true</code>：Mouse wheel triggers data window move.</li>\n<li><code class=\"codespan\">false</code>：Mouse wheel can not triggers data window move.</li>\n<li><code class=\"codespan\">'shift'</code>：Holding <code class=\"codespan\">shift</code> and mouse wheel triggers data window move.</li>\n<li><code class=\"codespan\">'ctrl'</code>：Holding <code class=\"code [...]
- "preventDefaultMouseMove": "<p>Whether to prevent default behavior of mouse move event.</p>\n"
-}
\ No newline at end of file
diff --git a/public/en/documents/option-parts/option.dataZoom-slider.json b/public/en/documents/option-parts/option.dataZoom-slider.json
deleted file mode 100644
index 88d6698..0000000
--- a/public/en/documents/option-parts/option.dataZoom-slider.json
+++ /dev/null
@@ -1,78 +0,0 @@
-{
- "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>Whether to show the component. If is set to be <code class=\"codespan\">false</code>, it will not show, but its data filtering function still works.</p>\n",
- "backgroundColor": "<p>The background color of the component.</p>\n",
- "dataBackground": "<p>The style of data shadow.</p>\n",
- "dataBackground.lineStyle": "<p>Line style of shadow</p>\n",
- "dataBackground.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 cl [...]
- "dataBackground.lineStyle.width": "<p> line width.</p>\n",
- "dataBackground.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",
- "dataBackground.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",
- "dataBackground.lineStyle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "dataBackground.lineStyle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "dataBackground.lineStyle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "dataBackground.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",
- "dataBackground.areaStyle": "<p>Area style of shadow</p>\n",
- "dataBackground.areaStyle.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 cl [...]
- "dataBackground.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",
- "dataBackground.areaStyle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "dataBackground.areaStyle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "dataBackground.areaStyle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "dataBackground.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",
- "fillerColor": "<p>The color to fill selected area.</p>\n",
- "borderColor": "<p>The color of border.</p>\n",
- "handleIcon": "<p>Icon shape of handle, which supports path string. Its default value is:</p>\n<pre><code class=\"lang-js\">'M8.2,13.6V3.9H6.3v9.7H3.1v14.9h3.3v9.7h1.8v-9.7h3.3V13.6H8.2z M9.7,24.4H4.8v-1.4h4.9V24.4z M9.7,19.1H4.8v-1.4h4.9V19.1z'\n</code></pre>\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< [...]
- "handleSize": "<p>The size of control handle. It can be in pixels, or in percentage relative to the width of dataZoom component. By default, it's the same as the width of dataZoom component.</p>\n",
- "handleStyle": "<p>Style of handle. Please refer to <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=area-simple\" target=\"_blank\">area-simple example</a>.</p>\n",
- "handleStyle.color": "<p> 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\">/ [...]
- "handleStyle.borderColor": "<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n",
- "handleStyle.borderWidth": "<p> border width. No border when it is set to be 0.</p>\n",
- "handleStyle.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",
- "handleStyle.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",
- "handleStyle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "handleStyle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "handleStyle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "handleStyle.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",
- "labelPrecision": "<p>Precision of label if in number form. By default, it is decided based on the number of data.</p>\n",
- "labelFormatter": "<p>The formatter tool for the label.</p>\n<ul>\n<li><p>It is a template if in <code class=\"codespan\">string</code>. For instance, <code class=\"codespan\">aaaa{value}bbbb</code>, where <code class=\"codespan\">{value}</code> will be replaced by the value of actual data value.</p>\n</li>\n<li><p>It is a callback function if in <code class=\"codespan\">Function</code>. For example:</p>\n</li>\n</ul>\n<pre><code class=\"lang-javascript\">/**\n * @param {*} value If ax [...]
- "showDetail": "<p>Whether to show detail, that is, show the detailed data information when dragging.</p>\n",
- "showDataShadow": "<p>Whether to show data shadow in <code class=\"codespan\">dataZoom-silder</code> component, to indicate the data tendency in brief.</p>\n",
- "realtime": "<p>Whether to update view while dragging. If it is set as <code class=\"codespan\">false</code>, the view will be updated only at the end of dragging.</p>\n",
- "textStyle.color": "<p>dataZoom text color.</p>\n",
- "textStyle.fontStyle": "<p>dataZoom 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",
- "textStyle.fontWeight": "<p>dataZoom 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",
- "textStyle.fontFamily": "<p>dataZoom font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "textStyle.fontSize": "<p>dataZoom font size</p>\n",
- "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",
- "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 class=\ [...]
- "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\">heig [...]
- "textStyle.textBorderColor": "<p>Storke color of the text.</p>\n",
- "textStyle.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "textStyle.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "textStyle.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "textStyle.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "textStyle.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "xAxisIndex": "<p>Specify which <a href=\"#xAxis\">xAxis</a> is/are controlled by the <code class=\"codespan\">dataZoom-slider</code> when <a href=\"#grid\">catesian coordinate system</a> is used.</p>\n<p>By default the first <code class=\"codespan\">xAxis</code> that parallel to <code class=\"codespan\">dataZoom</code> are controlled when <a href=\"#dataZoom-slider.orient\">dataZoom-slider.orient</a> is set as <code class=\"codespan\">'horizontal'</code>. But it is recommended [...]
- "yAxisIndex": "<p>Specify which <a href=\"#yAxis\">yAxis</a> is/are controlled by the <code class=\"codespan\">dataZoom-slider</code> when <a href=\"#grid\">catesian coordinate system</a> is used.</p>\n<p>By default the first <code class=\"codespan\">yAxis</code> that parallel to <code class=\"codespan\">dataZoom</code> are controlled when <a href=\"#dataZoom-slider.orient\">dataZoom-slider.orient</a> is set as <code class=\"codespan\">'vertical'</code>. But it is recommended t [...]
- "radiusAxisIndex": "<p>Specify which <a href=\"#radiusAxis\">radiusAxis</a> is/are controlled by the <code class=\"codespan\">dataZoom-slider</code> when <a href=\"#polar\">polar coordinate system</a> is used.</p>\n<p>If it is set as a single <code class=\"codespan\">number</code>, one axis is controlled, while if it is set as an <code class=\"codespan\">Array</code> , multiple axes are controlled.</p>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">option: {\n radiusAxis [...]
- "angleAxisIndex": "<p>Specify which <a href=\"#angleAxis\">angleAxis</a> is/are controlled by the <code class=\"codespan\">dataZoom-slider</code> when <a href=\"#polar\">polar coordinate system</a> is used.</p>\n<p>If it is set as a single <code class=\"codespan\">number</code>, one axis is controlled, while if it is set as an <code class=\"codespan\">Array</code> , multiple axes are controlled.</p>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">option: {\n angleAxis: [\ [...]
- "filterMode": "<p>Generally <code class=\"codespan\">dataZoom</code> component zoom or roam coordinate system through data filtering and set the windows of axes internally.</p>\n<p>Its behaviours vary according to filtering mode settings (<a href=\"#dataZoom.filterMode\">dataZoom.filterMode</a>).</p>\n<p>Possible values:</p>\n<ul>\n<li><p>'filter': data that outside the window will be <strong>filtered</strong>, which may lead to some changes of windows of other axes. For each d [...]
- "start": "<p>The start percentage of the window out of the data extent, in the range of 0 ~ 100.</p>\n<p><a href=\"#dataZoom-slider.start\">dataZoom-slider.start</a> and <a href=\"#dataZoom-slider.end\">dataZoom-slider.end</a> define the window of the data in <strong>percent</strong> form.</p>\n<p>More info about the relationship between <code class=\"codespan\">dataZoom-slider.start</code> and axis extent can be checked in <a href=\"#dataZoom-slider.rangeMode\">dataZoom-slider.rangeMo [...]
- "end": "<p>The end percentage of the window out of the data extent, in the range of 0 ~ 100.</p>\n<p><a href=\"#dataZoom-slider.start\">dataZoom-slider.start</a> and <a href=\"#dataZoom-slider.end\">dataZoom-slider.end</a> define the window of the data in <strong>percent</strong> form.</p>\n<p>More info about the relationship between <code class=\"codespan\">dataZoom-slider.end</code> and axis extent can be checked in <a href=\"#dataZoom-slider.rangeMode\">dataZoom-slider.rangeMode</a> [...]
- "startValue": "<p>The start absolute value of the window, not works when <a href=\"#dataZoom-slider.start\">dataZoom-slider.start</a> is set.</p>\n<p><a href=\"#dataZoom-slider.startValue\">dataZoom-slider.startValue</a> and <a href=\"#dataZoom-slider.endValue\">dataZoom-slider.endValue</a> define the window of the data window in <strong>absolute value</strong> form.</p>\n<p>Notice, if an axis is set to be <code class=\"codespan\">category</code>, <code class=\"codespan\">startValue</c [...]
- "endValue": "<p>The end absolute value of the window, not works when <a href=\"#dataZoom-slider.end\">dataZoom-slider.end</a> is set.</p>\n<p><a href=\"#dataZoom-slider.startValue\">dataZoom-slider.startValue</a> and <a href=\"#dataZoom-slider.endValue\">dataZoom-slider.endValue</a> define the window of the data window in <strong>absolute value</strong> form.</p>\n<p>Notice, if an axis is set to be <code class=\"codespan\">category</code>, <code class=\"codespan\">startValue</code> cou [...]
- "minSpan": "<p>Used to restrict minimal window size, in percent, which value is in the range of [0, 100].</p>\n<p>If <a href=\"#dataZoom-slider.minValueSpan\">dataZoom-slider.minValueSpan</a> is set, <code class=\"codespan\">minSpan</code> does not work any more.</p>\n",
- "maxSpan": "<p>Used to restrict maximal window size, in percent, which value is in the range of [0, 100].</p>\n<p>If <a href=\"#dataZoom-slider.maxValueSpan\">dataZoom-slider.maxValueSpan</a> is set, <code class=\"codespan\">maxSpan</code> does not work any more.</p>\n",
- "minValueSpan": "<p>Used to restrict minimal window size.</p>\n<p>For example:\nIn time axis it can be set as <code class=\"codespan\">3600 * 24 * 1000 * 5</code> to represent "5 day".\nIn category axis it can be set as <code class=\"codespan\">5</code> to represent 5 categories.</p>\n",
- "maxValueSpan": "<p>Used to restrict maximal window size.</p>\n<p>For example:\nIn time axis it can be set as <code class=\"codespan\">3600 * 24 * 1000 * 5</code> to represent "5 day".\nIn category axis it can be set as <code class=\"codespan\">5</code> to represent 5 categories.</p>\n",
- "orient": "<p>Specify whether the layout of <code class=\"codespan\">dataZoom</code> component is horizontal or vertical. What's more, it indicates whether the horizontal axis or vertical axis is controlled by default in catesian coordinate system.</p>\n<p>Valid values:</p>\n<ul>\n<li><p><code class=\"codespan\">'horizontal'</code>: horizontal.</p>\n</li>\n<li><p><code class=\"codespan\">'vertical'</code>: vertical.</p>\n</li>\n</ul>\n",
- "zoomLock": "<p>Specify whether to lock the size of window (selected area).</p>\n<p>When set as <code class=\"codespan\">true</code>, the size of window is locked, that is, only the translation (by mouse drag or touch drag) is avialable but zoom is not.</p>\n",
- "throttle": "<p>Specify the frame rate of views refreshing, with unit millisecond (ms).</p>\n<p>If <a href=\"#animation\">animation</a> set as <code class=\"codespan\">true</code> and <a href=\"#animationDurationUpdate\">animationDurationUpdate</a> set as bigger than <code class=\"codespan\">0</code>, you can keep <code class=\"codespan\">throttle</code> as the default value <code class=\"codespan\">100</code> (or set it as a value bigger than <code class=\"codespan\">0</code>), otherw [...]
- "rangeMode": "<p>The format is <code class=\"codespan\">[rangeModeForStart, rangeModeForEnd]</code>.</p>\n<p>For example <code class=\"codespan\">rangeMode: ['value', 'percent']</code> means that use absolute value in <code class=\"codespan\">start</code> and percent value in <code class=\"codespan\">end</code>.</p>\n<p>Optional value for each item: <code class=\"codespan\">'value'</code>, <code class=\"codespan\">'percent'</code>.</p>\n<ul>\n<li><code c [...]
- "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 dataZoom-slider 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 [...]
- "top": "<p>Distance between dataZoom-slider 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>.< [...]
- "right": "<p>Distance between dataZoom-slider 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 dataZoom-slider 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"
-}
\ No newline at end of file
diff --git a/public/en/documents/option-parts/option.dataset.json b/public/en/documents/option-parts/option.dataset.json
deleted file mode 100644
index cf232c7..0000000
--- a/public/en/documents/option-parts/option.dataset.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "id": "<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n",
- "source": "<p>Source data. Generally speaking, a source data describe a table, where these format below can be applied:</p>\n<p>2d array, where <a href=\"#dataset.dimensions\">dimension names</a> can be provided in the first row/column, or do not provide, only data.</p>\n<pre><code class=\"lang-js\">[\n ['product', '2015', '2016', '2017'],\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese C [...]
- "dimensions": "<p><code class=\"codespan\">dimensions</code> can be used to define dimension info for <code class=\"codespan\">series.data</code> or <code class=\"codespan\">dataset.source</code>.</p>\n<p>Notice: if <a href=\"#dataset\">dataset</a> is used, we can provide dimension names in the first column/row of <a href=\"#dataset.source\">dataset.source</a>, and not need to specify <code class=\"codespan\">dimensions</code> here. But if <code class=\"codespan\">dimensions</code> is [...]
- "sourceHeader": "<p>Whether the first row/column of <code class=\"codespan\">dataset.source</code> represents <a href=\"dataset.dimensions\" target=\"_blank\">dimension names</a>. Optional values:</p>\n<ul>\n<li><code class=\"codespan\">null/undefine</code>: means auto detect whether the first row/column is dimension names or data.</li>\n<li><code class=\"codespan\">true</code>: the first row/column is dimension names.</li>\n<li><code class=\"codespan\">false</code>: data start from th [...]
-}
\ No newline at end of file
diff --git a/public/en/documents/option-parts/option.geo.json b/public/en/documents/option-parts/option.geo.json
deleted file mode 100644
index 6ec1f64..0000000
--- a/public/en/documents/option-parts/option.geo.json
+++ /dev/null
@@ -1,300 +0,0 @@
-{
- "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>Whether to show the geo component.</p>\n",
- "map": "<p>Map charts.</p>\n<p>Due to the increase of fineness of map, ECharts 3 doesn't include map data by default for package size consideration. You may find map files you need on <a href=\"http://ecomfe.github.io/echarts-builder-web/map3.html\" target=\"_blank\">map download page</a> and then include and register them in ECharts.</p>\n<p>Two formats of map data are provided in ECharts, one of which can be included in <code class=\"codespan\"><script></code> tag as JavaSc [...]
- "roam": "<p>Whether to enable mouse zooming and translating. <code class=\"codespan\">false</code> by default. If either zooming or translating is wanted, it can be set to <code class=\"codespan\">'scale'</code> or <code class=\"codespan\">'move'</code>. Otherwise, set it to be <code class=\"codespan\">true</code> to enable both.</p>\n",
- "center": "<p>Center of current view-port, in longitude and latitude.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">center: [115.97, 29.71]\n</code></pre>\n",
- "aspectScale": "<p>Used to scale aspect of geo.</p>\n<p>The final aspect is calculated by: <code class=\"codespan\">geoBoundingRect.width / geoBoundingRect.height * aspectScale</code>.</p>\n",
- "boundingCoords": "<p>Two dimension array. Define coord of left-top, right-bottom in layout box.</p>\n<pre><code class=\"lang-js\">// A complete world map\nmap: 'world',\nleft: 0, top: 0, right: 0, bottom: 0,\nboundingCoords: [\n // [lng, lat] of left-top corner\n [-180, 90],\n // [lng, lat] of right-bottom corner\n [180, -90]\n],\n</code></pre>\n",
- "zoom": "<p>Zoom rate of current view-port.</p>\n",
- "scaleLimit": "<p>Limit of scaling, with <code class=\"codespan\">min</code> and <code class=\"codespan\">max</code>. <code class=\"codespan\">1</code> by default.</p>\n",
- "scaleLimit.min": "<p>Minimum scaling</p>\n",
- "scaleLimit.max": "<p>Maximum scaling</p>\n",
- "nameMap": "<p>Name mapping for customized areas. For example:</p>\n<pre><code class=\"lang-js\">{\n 'China' : '中国'\n}\n</code></pre>\n",
- "selectedMode": "<p>Selected mode decides whether multiple selecting is supported. By default, <code class=\"codespan\">false</code> is used for disabling selection. Its value can also be <code class=\"codespan\">'single'</code> for selecting single area, or <code class=\"codespan\">'multiple'</code> for selecting multiple areas.</p>\n",
- "label": "<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code [...]
- "label.show": "<p>Whether to show label.</p>\n",
- "label.position": "<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'le [...]
- "label.distance": "<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>).</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n",
- "label.rotate": "<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n",
- "label.offset": "<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n",
- "label.formatter": "<p>Data label formatter, which supports string template and 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>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code [...]
- "label.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series 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.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=\"lang- [...]
- "label.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>\n<p [...]
- "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.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 HTMLC [...]
- "label.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "label.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "label.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "label.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, <code [...]
- "label.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "label.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "label.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "label.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\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<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</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.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 snippet [...]
- "label.rich.<user defined style name>.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "label.rich.<user defined 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",
- "label.rich.<user defined 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",
- "label.rich.<user defined style name>.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "label.rich.<user defined style name>.fontSize": "<p> font size</p>\n",
- "label.rich.<user defined 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 [...]
- "label.rich.<user defined 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 wil [...]
- "label.rich.<user defined 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",
- "label.rich.<user defined 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 HTM [...]
- "label.rich.<user defined style name>.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "label.rich.<user defined style name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "label.rich.<user defined style name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "label.rich.<user defined 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> [...]
- "label.rich.<user defined style name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "label.rich.<user defined style name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "label.rich.<user defined style name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "label.rich.<user defined style name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "label.rich.<user defined 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</c [...]
- "label.rich.<user defined 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 <c [...]
- "label.rich.<user defined style name>.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "label.rich.<user defined style name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "label.rich.<user defined style name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "label.rich.<user defined style name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "label.rich.<user defined style name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "label.rich.<user defined style name>.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "label.emphasis.show": "<p>Whether to show label.</p>\n",
- "label.emphasis.position": "<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<l [...]
- "label.emphasis.distance": "<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>).</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n",
- "label.emphasis.rotate": "<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n",
- "label.emphasis.offset": "<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n",
- "label.emphasis.formatter": "<p>Data label formatter, which supports string template and 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>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n< [...]
- "label.emphasis.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "label.emphasis.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.emphasis.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.emphasis.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "label.emphasis.fontSize": "<p> font size</p>\n",
- "label.emphasis.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 [...]
- "label.emphasis.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 [...]
- "label.emphasis.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.emphasis.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 // [...]
- "label.emphasis.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "label.emphasis.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "label.emphasis.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "label.emphasis.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 [...]
- "label.emphasis.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "label.emphasis.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "label.emphasis.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "label.emphasis.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "label.emphasis.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 [...]
- "label.emphasis.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\" [...]
- "label.emphasis.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "label.emphasis.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "label.emphasis.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "label.emphasis.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "label.emphasis.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "label.emphasis.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "label.emphasis.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 [...]
- "label.emphasis.rich.<user defined style name>.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "label.emphasis.rich.<user defined 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",
- "label.emphasis.rich.<user defined 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",
- "label.emphasis.rich.<user defined style name>.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "label.emphasis.rich.<user defined style name>.fontSize": "<p> font size</p>\n",
- "label.emphasis.rich.<user defined 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. Fo [...]
- "label.emphasis.rich.<user defined 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 [...]
- "label.emphasis.rich.<user defined 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",
- "label.emphasis.rich.<user defined 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 [...]
- "label.emphasis.rich.<user defined style name>.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "label.emphasis.rich.<user defined style name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "label.emphasis.rich.<user defined style name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "label.emphasis.rich.<user defined 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, [...]
- "label.emphasis.rich.<user defined style name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "label.emphasis.rich.<user defined style name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "label.emphasis.rich.<user defined style name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "label.emphasis.rich.<user defined style name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "label.emphasis.rich.<user defined 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\">p [...]
- "label.emphasis.rich.<user defined 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</cod [...]
- "label.emphasis.rich.<user defined style name>.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "label.emphasis.rich.<user defined style name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "label.emphasis.rich.<user defined style name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "label.emphasis.rich.<user defined style name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "label.emphasis.rich.<user defined style name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "label.emphasis.rich.<user defined style name>.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "itemStyle": "<p>Graphic style of Map Area Border, <code class=\"codespan\">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n",
- "itemStyle.areaColor": "<p>Area filling color.</p>\n",
- "itemStyle.areaColor.color": "<p> 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=\"lan [...]
- "itemStyle.areaColor.borderColor": "<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n",
- "itemStyle.areaColor.borderWidth": "<p> border width. No border when it is set to be 0.</p>\n",
- "itemStyle.areaColor.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.areaColor.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.areaColor.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "itemStyle.areaColor.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "itemStyle.areaColor.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "itemStyle.areaColor.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",
- "itemStyle.emphasis": "<p>Map area style in highlighted state.</p>\n",
- "itemStyle.emphasis.areaColor": "<p>Area filling color.</p>\n",
- "itemStyle.emphasis.color": "<p> 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.emphasis.borderColor": "<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n",
- "itemStyle.emphasis.borderWidth": "<p> border width. No border when it is set to be 0.</p>\n",
- "itemStyle.emphasis.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.emphasis.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.emphasis.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "itemStyle.emphasis.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "itemStyle.emphasis.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "itemStyle.emphasis.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",
- "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 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",
- "layoutCenter": "<p><code class=\"codespan\">layoutCenter</code> and <code class=\"codespan\">layoutSize</code> provides layout strategy other than <code class=\"codespan\">left/right/top/bottom/width/height</code>.</p>\n<p>When using <code class=\"codespan\">left/right/top/bottom/width/height</code>, it is hard to put the map inside a box area with a fixed width-height ratio. In this case, <code class=\"codespan\">layoutCenter</code> attribute can be used to define the center position [...]
- "layoutSize": "<p>Size of map, see <code class=\"codespan\">layoutCenter</code> for more information. Percentage relative to screen width, and absolute pixel values are supported.</p>\n",
- "regions": "<p>Configure style for specified regions.\nFor example:</p>\n<pre><code class=\"lang-js\">regions: [{\n name: 'Guangdong',\n itemStyle: {\n areaColor: 'red',\n color: 'red'\n }\n}]\n</code></pre>\n<p>The region color can also be controlled by map series. See <a href=\"#series-map.geoIndex\">series-map.geoIndex</a>.</p>\n",
- "regions.name": "<p>Name of area in map, like <code class=\"codespan\">'Guangdong'</code>, or <code class=\"codespan\">'Zhejiang'</code>.</p>\n",
- "regions.selected": "<p>Whether this area is selected.</p>\n",
- "regions.itemStyle": "<p>Item style of this area.</p>\n",
- "regions.itemStyle.areaColor": "<p>Area color in the map.</p>\n",
- "regions.itemStyle.color": "<p> 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- [...]
- "regions.itemStyle.borderColor": "<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n",
- "regions.itemStyle.borderWidth": "<p> border width. No border when it is set to be 0.</p>\n",
- "regions.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",
- "regions.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",
- "regions.itemStyle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "regions.itemStyle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "regions.itemStyle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "regions.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",
- "regions.itemStyle.emphasis.areaColor": "<p>Area color in the map.</p>\n",
- "regions.itemStyle.emphasis.color": "<p> 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 clas [...]
- "regions.itemStyle.emphasis.borderColor": "<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n",
- "regions.itemStyle.emphasis.borderWidth": "<p> border width. No border when it is set to be 0.</p>\n",
- "regions.itemStyle.emphasis.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",
- "regions.itemStyle.emphasis.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",
- "regions.itemStyle.emphasis.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "regions.itemStyle.emphasis.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "regions.itemStyle.emphasis.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "regions.itemStyle.emphasis.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",
- "regions.label": "<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemSty [...]
- "regions.label.show": "<p>Whether to show label.</p>\n",
- "regions.label.position": "<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li [...]
- "regions.label.distance": "<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>).</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n",
- "regions.label.rotate": "<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n",
- "regions.label.offset": "<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n",
- "regions.label.formatter": "<p>Data label formatter, which supports string template and 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>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<l [...]
- "regions.label.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "regions.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",
- "regions.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",
- "regions.label.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "regions.label.fontSize": "<p> font size</p>\n",
- "regions.label.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 [...]
- "regions.label.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: [...]
- "regions.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",
- "regions.label.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 // [...]
- "regions.label.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "regions.label.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "regions.label.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "regions.label.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>Notic [...]
- "regions.label.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "regions.label.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "regions.label.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "regions.label.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "regions.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 cla [...]
- "regions.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\"> [...]
- "regions.label.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "regions.label.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "regions.label.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "regions.label.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "regions.label.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "regions.label.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "regions.label.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 [...]
- "regions.label.rich.<user defined style name>.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "regions.label.rich.<user defined 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",
- "regions.label.rich.<user defined 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",
- "regions.label.rich.<user defined style name>.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "regions.label.rich.<user defined style name>.fontSize": "<p> font size</p>\n",
- "regions.label.rich.<user defined 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 [...]
- "regions.label.rich.<user defined 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 l [...]
- "regions.label.rich.<user defined 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",
- "regions.label.rich.<user defined 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 / [...]
- "regions.label.rich.<user defined style name>.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "regions.label.rich.<user defined style name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "regions.label.rich.<user defined style name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "regions.label.rich.<user defined 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 [...]
- "regions.label.rich.<user defined style name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "regions.label.rich.<user defined style name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "regions.label.rich.<user defined style name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "regions.label.rich.<user defined style name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "regions.label.rich.<user defined 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\">pa [...]
- "regions.label.rich.<user defined 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 [...]
- "regions.label.rich.<user defined style name>.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "regions.label.rich.<user defined style name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "regions.label.rich.<user defined style name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "regions.label.rich.<user defined style name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "regions.label.rich.<user defined style name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "regions.label.rich.<user defined style name>.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "regions.label.emphasis.show": "<p>Whether to show label.</p>\n",
- "regions.label.emphasis.position": "<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n< [...]
- "regions.label.emphasis.distance": "<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>).</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n",
- "regions.label.emphasis.rotate": "<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n",
- "regions.label.emphasis.offset": "<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n",
- "regions.label.emphasis.formatter": "<p>Data label formatter, which supports string template and 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>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item. [...]
- "regions.label.emphasis.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "regions.label.emphasis.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",
- "regions.label.emphasis.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",
- "regions.label.emphasis.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "regions.label.emphasis.fontSize": "<p> font size</p>\n",
- "regions.label.emphasis.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><c [...]
- "regions.label.emphasis.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 [...]
- "regions.label.emphasis.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",
- "regions.label.emphasis.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, [...]
- "regions.label.emphasis.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "regions.label.emphasis.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "regions.label.emphasis.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "regions.label.emphasis.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>\ [...]
- "regions.label.emphasis.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "regions.label.emphasis.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "regions.label.emphasis.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "regions.label.emphasis.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "regions.label.emphasis.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> [...]
- "regions.label.emphasis.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=\"co [...]
- "regions.label.emphasis.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "regions.label.emphasis.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "regions.label.emphasis.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "regions.label.emphasis.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "regions.label.emphasis.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "regions.label.emphasis.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "regions.label.emphasis.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 applie [...]
- "regions.label.emphasis.rich.<user defined style name>.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "regions.label.emphasis.rich.<user defined 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",
- "regions.label.emphasis.rich.<user defined 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",
- "regions.label.emphasis.rich.<user defined style name>.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "regions.label.emphasis.rich.<user defined style name>.fontSize": "<p> font size</p>\n",
- "regions.label.emphasis.rich.<user defined 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 [...]
- "regions.label.emphasis.rich.<user defined 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 [...]
- "regions.label.emphasis.rich.<user defined 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",
- "regions.label.emphasis.rich.<user defined 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 dataUR [...]
- "regions.label.emphasis.rich.<user defined style name>.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "regions.label.emphasis.rich.<user defined style name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "regions.label.emphasis.rich.<user defined style name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "regions.label.emphasis.rich.<user defined 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 [...]
- "regions.label.emphasis.rich.<user defined style name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "regions.label.emphasis.rich.<user defined style name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "regions.label.emphasis.rich.<user defined style name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "regions.label.emphasis.rich.<user defined style name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "regions.label.emphasis.rich.<user defined 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=\"code [...]
- "regions.label.emphasis.rich.<user defined 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\">wi [...]
- "regions.label.emphasis.rich.<user defined style name>.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "regions.label.emphasis.rich.<user defined style name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "regions.label.emphasis.rich.<user defined style name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "regions.label.emphasis.rich.<user defined style name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "regions.label.emphasis.rich.<user defined style name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "regions.label.emphasis.rich.<user defined style name>.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "silent": "<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"
-}
\ No newline at end of file
diff --git a/public/en/documents/option-parts/option.graphic.json b/public/en/documents/option-parts/option.graphic.json
deleted file mode 100644
index 2e96a50..0000000
--- a/public/en/documents/option-parts/option.graphic.json
+++ /dev/null
@@ -1,414 +0,0 @@
-{
- "id": "<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n",
- "elements": "<p>A list of all graphic elements.</p>\n<p>Note, the standard configuration of graphic component is:</p>\n<pre><code class=\"lang-javascript\">{\n graphic: {\n elements: [\n {type: 'rect', ...}, {type: 'circle', ...}, ...\n ]\n }\n}\n</code></pre>\n<p>But we always use short patterns for convenience:</p>\n<pre><code class=\"lang-javascript\">{\n graphic: { // Declare only one graphic element.\n type: 'rect',\ [...]
- "elements-group": "<p><code class=\"codespan\">group</code> is the only type that can contain children, so that a group of elements can be positioned and transformed together.</p>\n",
- "elements-group.type": "<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphi [...]
- "elements-group.id": "<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n",
- "elements-group.$action": "<p>Specify the operation should be performed to the element when calling <code class=\"codespan\">setOption</code>.\nDefault value is 'merge', other values can be 'replace' or 'remove'.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class=\"codespan\">'merge'</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class=\"codespan\">'replace'</code>: create a new eleme [...]
- "elements-group.position": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <co [...]
- "elements-group.rotation": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <co [...]
- "elements-group.scale": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code [...]
- "elements-group.origin": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code [...]
- "elements-group.left": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">'3 [...]
- "elements-group.right": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">' [...]
- "elements-group.top": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">'33 [...]
- "elements-group.bottom": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">' [...]
- "elements-group.bounding": "<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\" ></iframe>\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class=\"codespan\">'all'</code>: (default)\n Use the transformed bounding box of itself and its descen [...]
- "elements-group.z": "<p>z value of the elements, determine the overlap order.</p>\n",
- "elements-group.zlevel": "<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n",
- "elements-group.info": "<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on('click', function (params) {\n console.log(params.info);\n});\n</code></pre>\n",
- "elements-group.silent": "<p>Whether response to mouse events / touch events.</p>\n",
- "elements-group.invisible": "<p>Whether the element is visible.</p>\n",
- "elements-group.ignore": "<p>Whether the element is totally ignored (neither render nor listen events).</p>\n",
- "elements-group.cursor": "<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n",
- "elements-group.draggable": "<p>Can be dragged or not.</p>\n",
- "elements-group.progressive": "<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n",
- "elements-group.width": "<p>Specify width of this <code class=\"codespan\">group</code>.</p>\n<p>This width is only used for the positioning of its children.</p>\n<p>When width is <code class=\"codespan\">0</code>, children can also be positioned according to its parent using <code class=\"codespan\">left: 'center'</code>.</p>\n",
- "elements-group.height": "<p>Specify height of this <code class=\"codespan\">group</code>.</p>\n<p>This height is only used for the positioning of its children.</p>\n<p>When height is <code class=\"codespan\">0</code>, children can also be positioned according to its parent using <code class=\"codespan\">top: 'middle'</code>.</p>\n",
- "elements-group.diffChildrenByName": "<p>In <a href=\"#series-custom\">custom series</a>, when <code class=\"codespan\">diffChildrenByName</code> is set as <code class=\"codespan\">true</code>, for each <a href=\"#graphic.elements-group\">group</a> returned from <a href=\"#series-custom.renderItem\">renderItem</a>, "diff" will be performed to its <a href=\"#graphic.elements-group.children\">children</a> according to the <a href=\"#graphic.elements-polygon.name\">name</a> attr [...]
- "elements-group.children": "<p>A list of children, each item is a declaration of an element.</p>\n",
- "elements-image.type": "<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphi [...]
- "elements-image.id": "<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n",
- "elements-image.$action": "<p>Specify the operation should be performed to the element when calling <code class=\"codespan\">setOption</code>.\nDefault value is 'merge', other values can be 'replace' or 'remove'.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class=\"codespan\">'merge'</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class=\"codespan\">'replace'</code>: create a new eleme [...]
- "elements-image.position": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <co [...]
- "elements-image.rotation": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <co [...]
- "elements-image.scale": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code [...]
- "elements-image.origin": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code [...]
- "elements-image.left": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">'3 [...]
- "elements-image.right": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">' [...]
- "elements-image.top": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">'33 [...]
- "elements-image.bottom": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">' [...]
- "elements-image.bounding": "<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\" ></iframe>\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class=\"codespan\">'all'</code>: (default)\n Use the transformed bounding box of itself and its descen [...]
- "elements-image.z": "<p>z value of the elements, determine the overlap order.</p>\n",
- "elements-image.zlevel": "<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n",
- "elements-image.info": "<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on('click', function (params) {\n console.log(params.info);\n});\n</code></pre>\n",
- "elements-image.silent": "<p>Whether response to mouse events / touch events.</p>\n",
- "elements-image.invisible": "<p>Whether the element is visible.</p>\n",
- "elements-image.ignore": "<p>Whether the element is totally ignored (neither render nor listen events).</p>\n",
- "elements-image.cursor": "<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n",
- "elements-image.draggable": "<p>Can be dragged or not.</p>\n",
- "elements-image.progressive": "<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n",
- "elements-image.style.image": "<p>Specify contant of the image, can be a URL, or <a href=\"https://tools.ietf.org/html/rfc2397\" target=\"_blank\">dataURI</a>.</p>\n",
- "elements-image.style.x": "<p>The x value of the left-top corner of the element in the coordinate system of its parent.</p>\n",
- "elements-image.style.y": "<p>The y value of the left-top corner of the element in the coordinate system of its parent.</p>\n",
- "elements-image.style.width": "<p>The width of the shape of the element.</p>\n",
- "elements-image.style.height": "<p>The height of the shape of the element.</p>\n<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice [...]
- "elements-image.style.fill": "<p>Color filled in this element.</p>\n",
- "elements-image.style.stroke": "<p>Color of stroke.</p>\n",
- "elements-image.style.lineWidth": "<p>Width of stroke.</p>\n",
- "elements-image.style.shadowBlur": "<p>Width of shadow.</p>\n",
- "elements-image.style.shadowOffsetX": "<p>X offset of shadow.</p>\n",
- "elements-image.style.shadowOffsetY": "<p>Y offset of shadow.</p>\n",
- "elements-image.style.shadowColor": "<p>color of shadow.</p>\n",
- "elements-text": "<p>Text block.</p>\n",
- "elements-text.type": "<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic [...]
- "elements-text.id": "<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n",
- "elements-text.$action": "<p>Specify the operation should be performed to the element when calling <code class=\"codespan\">setOption</code>.\nDefault value is 'merge', other values can be 'replace' or 'remove'.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class=\"codespan\">'merge'</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class=\"codespan\">'replace'</code>: create a new elemen [...]
- "elements-text.position": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <cod [...]
- "elements-text.rotation": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <cod [...]
- "elements-text.scale": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code c [...]
- "elements-text.origin": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code [...]
- "elements-text.left": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">'33 [...]
- "elements-text.right": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">'3 [...]
- "elements-text.top": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">'33% [...]
- "elements-text.bottom": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">' [...]
- "elements-text.bounding": "<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\" ></iframe>\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class=\"codespan\">'all'</code>: (default)\n Use the transformed bounding box of itself and its descent [...]
- "elements-text.z": "<p>z value of the elements, determine the overlap order.</p>\n",
- "elements-text.zlevel": "<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n",
- "elements-text.info": "<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on('click', function (params) {\n console.log(params.info);\n});\n</code></pre>\n",
- "elements-text.silent": "<p>Whether response to mouse events / touch events.</p>\n",
- "elements-text.invisible": "<p>Whether the element is visible.</p>\n",
- "elements-text.ignore": "<p>Whether the element is totally ignored (neither render nor listen events).</p>\n",
- "elements-text.cursor": "<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n",
- "elements-text.draggable": "<p>Can be dragged or not.</p>\n",
- "elements-text.progressive": "<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n",
- "elements-text.style.text": "<p>Text content. <code class=\"codespan\">\\n</code> can be used as a line break.</p>\n",
- "elements-text.style.x": "<p>The x value of the left-top corner of the element in the coordinate system of its parent.</p>\n",
- "elements-text.style.y": "<p>The y value of the left-top corner of the element in the coordinate system of its parent.</p>\n",
- "elements-text.style.font": "<p>Font size, font type, font weight, font color, follow the form of <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font\" target=\"_blank\">css font</a>.</p>\n<p>For example:</p>\n<pre><code>// size | family\nfont: '2em "STHeiti", sans-serif'\n\n// style | weight | size | family\nfont: 'italic bolder 16px cursive'\n\n// weight | size | family\nfont: 'bolder 2em "Microsoft YaHei", sans-serif'\n</code></pre>",
- "elements-text.style.textAlign": "<p>Text horizontal alignment. Optional values: <code class=\"codespan\">'left'</code>, <code class=\"codespan\">'center'</code>, <code class=\"codespan\">'right'</code>.</p>\n<p><code class=\"codespan\">'left'</code> means the left side of the text block is specified by the <a href=\"#graphic.elements-text.style.x\">style.x</a>, while <code class=\"codespan\">'right'</code> means the right side of the text block [...]
- "elements-text.style.textVerticalAlign": "<p>Text vertical alignment. Optional values: <code class=\"codespan\">'top'</code>, <code class=\"codespan\">'middle'</code>, <code class=\"codespan\">'bottom'</code>.</p>\n<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attr [...]
- "elements-text.style.fill": "<p>Color filled in this element.</p>\n",
- "elements-text.style.stroke": "<p>Color of stroke.</p>\n",
- "elements-text.style.lineWidth": "<p>Width of stroke.</p>\n",
- "elements-text.style.shadowBlur": "<p>Width of shadow.</p>\n",
- "elements-text.style.shadowOffsetX": "<p>X offset of shadow.</p>\n",
- "elements-text.style.shadowOffsetY": "<p>Y offset of shadow.</p>\n",
- "elements-text.style.shadowColor": "<p>color of shadow.</p>\n",
- "elements-rect": "<p>Rectangle element.</p>\n",
- "elements-rect.type": "<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic [...]
- "elements-rect.id": "<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n",
- "elements-rect.$action": "<p>Specify the operation should be performed to the element when calling <code class=\"codespan\">setOption</code>.\nDefault value is 'merge', other values can be 'replace' or 'remove'.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class=\"codespan\">'merge'</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class=\"codespan\">'replace'</code>: create a new elemen [...]
- "elements-rect.position": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <cod [...]
- "elements-rect.rotation": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <cod [...]
- "elements-rect.scale": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code c [...]
- "elements-rect.origin": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code [...]
- "elements-rect.left": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">'33 [...]
- "elements-rect.right": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">'3 [...]
- "elements-rect.top": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">'33% [...]
- "elements-rect.bottom": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">' [...]
- "elements-rect.bounding": "<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\" ></iframe>\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class=\"codespan\">'all'</code>: (default)\n Use the transformed bounding box of itself and its descent [...]
- "elements-rect.z": "<p>z value of the elements, determine the overlap order.</p>\n",
- "elements-rect.zlevel": "<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n",
- "elements-rect.info": "<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on('click', function (params) {\n console.log(params.info);\n});\n</code></pre>\n",
- "elements-rect.silent": "<p>Whether response to mouse events / touch events.</p>\n",
- "elements-rect.invisible": "<p>Whether the element is visible.</p>\n",
- "elements-rect.ignore": "<p>Whether the element is totally ignored (neither render nor listen events).</p>\n",
- "elements-rect.cursor": "<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n",
- "elements-rect.draggable": "<p>Can be dragged or not.</p>\n",
- "elements-rect.progressive": "<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n",
- "elements-rect.shape.x": "<p>The x value of the left-top corner of the element in the coordinate system of its parent.</p>\n",
- "elements-rect.shape.y": "<p>The y value of the left-top corner of the element in the coordinate system of its parent.</p>\n",
- "elements-rect.shape.width": "<p>The width of the shape of the element.</p>\n",
- "elements-rect.shape.height": "<p>The height of the shape of the element.</p>\n",
- "elements-rect.shape.r": "<p>Specify border radius of the rectangular here. Generally, <code class=\"codespan\">r</code> should be <code class=\"codespan\">[topLeftRadius, topRightRadius, BottomRightRadius, bottomLeftRadius]</code>, where each item is a number.</p>\n<p>Abbreviation is enabled, for example:</p>\n<ul>\n<li><code class=\"codespan\">r</code>: <code class=\"codespan\">1</code> means <code class=\"codespan\">[1, 1, 1, 1]</code></li>\n<li><code class=\"codespan\">r</c [...]
- "elements-rect.style": "<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">st [...]
- "elements-rect.style.fill": "<p>Color filled in this element.</p>\n",
- "elements-rect.style.stroke": "<p>Color of stroke.</p>\n",
- "elements-rect.style.lineWidth": "<p>Width of stroke.</p>\n",
- "elements-rect.style.shadowBlur": "<p>Width of shadow.</p>\n",
- "elements-rect.style.shadowOffsetX": "<p>X offset of shadow.</p>\n",
- "elements-rect.style.shadowOffsetY": "<p>Y offset of shadow.</p>\n",
- "elements-rect.style.shadowColor": "<p>color of shadow.</p>\n",
- "elements-circle": "<p>Circle element.</p>\n",
- "elements-circle.type": "<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graph [...]
- "elements-circle.id": "<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n",
- "elements-circle.$action": "<p>Specify the operation should be performed to the element when calling <code class=\"codespan\">setOption</code>.\nDefault value is 'merge', other values can be 'replace' or 'remove'.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class=\"codespan\">'merge'</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class=\"codespan\">'replace'</code>: create a new elem [...]
- "elements-circle.position": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <c [...]
- "elements-circle.rotation": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <c [...]
- "elements-circle.scale": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code [...]
- "elements-circle.origin": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <cod [...]
- "elements-circle.left": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">' [...]
- "elements-circle.right": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">' [...]
- "elements-circle.top": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">'3 [...]
- "elements-circle.bottom": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\"> [...]
- "elements-circle.bounding": "<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\" ></iframe>\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class=\"codespan\">'all'</code>: (default)\n Use the transformed bounding box of itself and its desce [...]
- "elements-circle.z": "<p>z value of the elements, determine the overlap order.</p>\n",
- "elements-circle.zlevel": "<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n",
- "elements-circle.info": "<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on('click', function (params) {\n console.log(params.info);\n});\n</code></pre>\n",
- "elements-circle.silent": "<p>Whether response to mouse events / touch events.</p>\n",
- "elements-circle.invisible": "<p>Whether the element is visible.</p>\n",
- "elements-circle.ignore": "<p>Whether the element is totally ignored (neither render nor listen events).</p>\n",
- "elements-circle.cursor": "<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n",
- "elements-circle.draggable": "<p>Can be dragged or not.</p>\n",
- "elements-circle.progressive": "<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n",
- "elements-circle.shape.cx": "<p>The x value of the center of the element in the coordinate system of its parent.</p>\n",
- "elements-circle.shape.cy": "<p>The y value of the center of the element in the coordinate system of its parent.</p>\n",
- "elements-circle.shape.r": "<p>Outside radius.</p>\n",
- "elements-circle.style": "<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\"> [...]
- "elements-circle.style.fill": "<p>Color filled in this element.</p>\n",
- "elements-circle.style.stroke": "<p>Color of stroke.</p>\n",
- "elements-circle.style.lineWidth": "<p>Width of stroke.</p>\n",
- "elements-circle.style.shadowBlur": "<p>Width of shadow.</p>\n",
- "elements-circle.style.shadowOffsetX": "<p>X offset of shadow.</p>\n",
- "elements-circle.style.shadowOffsetY": "<p>Y offset of shadow.</p>\n",
- "elements-circle.style.shadowColor": "<p>color of shadow.</p>\n",
- "elements-ring": "<p>Ring element.</p>\n",
- "elements-ring.type": "<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic [...]
- "elements-ring.id": "<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n",
- "elements-ring.$action": "<p>Specify the operation should be performed to the element when calling <code class=\"codespan\">setOption</code>.\nDefault value is 'merge', other values can be 'replace' or 'remove'.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class=\"codespan\">'merge'</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class=\"codespan\">'replace'</code>: create a new elemen [...]
- "elements-ring.position": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <cod [...]
- "elements-ring.rotation": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <cod [...]
- "elements-ring.scale": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code c [...]
- "elements-ring.origin": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code [...]
- "elements-ring.left": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">'33 [...]
- "elements-ring.right": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">'3 [...]
- "elements-ring.top": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">'33% [...]
- "elements-ring.bottom": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">' [...]
- "elements-ring.bounding": "<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\" ></iframe>\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class=\"codespan\">'all'</code>: (default)\n Use the transformed bounding box of itself and its descent [...]
- "elements-ring.z": "<p>z value of the elements, determine the overlap order.</p>\n",
- "elements-ring.zlevel": "<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n",
- "elements-ring.info": "<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on('click', function (params) {\n console.log(params.info);\n});\n</code></pre>\n",
- "elements-ring.silent": "<p>Whether response to mouse events / touch events.</p>\n",
- "elements-ring.invisible": "<p>Whether the element is visible.</p>\n",
- "elements-ring.ignore": "<p>Whether the element is totally ignored (neither render nor listen events).</p>\n",
- "elements-ring.cursor": "<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n",
- "elements-ring.draggable": "<p>Can be dragged or not.</p>\n",
- "elements-ring.progressive": "<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n",
- "elements-ring.shape.cx": "<p>The x value of the center of the element in the coordinate system of its parent.</p>\n",
- "elements-ring.shape.cy": "<p>The y value of the center of the element in the coordinate system of its parent.</p>\n",
- "elements-ring.shape.r": "<p>Outside radius.</p>\n",
- "elements-ring.shape.r0": "<p>Inside radius.</p>\n",
- "elements-ring.style": "<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">st [...]
- "elements-ring.style.fill": "<p>Color filled in this element.</p>\n",
- "elements-ring.style.stroke": "<p>Color of stroke.</p>\n",
- "elements-ring.style.lineWidth": "<p>Width of stroke.</p>\n",
- "elements-ring.style.shadowBlur": "<p>Width of shadow.</p>\n",
- "elements-ring.style.shadowOffsetX": "<p>X offset of shadow.</p>\n",
- "elements-ring.style.shadowOffsetY": "<p>Y offset of shadow.</p>\n",
- "elements-ring.style.shadowColor": "<p>color of shadow.</p>\n",
- "elements-sector": "<p>Sector element.</p>\n",
- "elements-sector.type": "<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graph [...]
- "elements-sector.id": "<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n",
- "elements-sector.$action": "<p>Specify the operation should be performed to the element when calling <code class=\"codespan\">setOption</code>.\nDefault value is 'merge', other values can be 'replace' or 'remove'.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class=\"codespan\">'merge'</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class=\"codespan\">'replace'</code>: create a new elem [...]
- "elements-sector.position": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <c [...]
- "elements-sector.rotation": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <c [...]
- "elements-sector.scale": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code [...]
- "elements-sector.origin": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <cod [...]
- "elements-sector.left": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">' [...]
- "elements-sector.right": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">' [...]
- "elements-sector.top": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">'3 [...]
- "elements-sector.bottom": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\"> [...]
- "elements-sector.bounding": "<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\" ></iframe>\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class=\"codespan\">'all'</code>: (default)\n Use the transformed bounding box of itself and its desce [...]
- "elements-sector.z": "<p>z value of the elements, determine the overlap order.</p>\n",
- "elements-sector.zlevel": "<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n",
- "elements-sector.info": "<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on('click', function (params) {\n console.log(params.info);\n});\n</code></pre>\n",
- "elements-sector.silent": "<p>Whether response to mouse events / touch events.</p>\n",
- "elements-sector.invisible": "<p>Whether the element is visible.</p>\n",
- "elements-sector.ignore": "<p>Whether the element is totally ignored (neither render nor listen events).</p>\n",
- "elements-sector.cursor": "<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n",
- "elements-sector.draggable": "<p>Can be dragged or not.</p>\n",
- "elements-sector.progressive": "<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n",
- "elements-sector.shape.cx": "<p>The x value of the center of the element in the coordinate system of its parent.</p>\n",
- "elements-sector.shape.cy": "<p>The y value of the center of the element in the coordinate system of its parent.</p>\n",
- "elements-sector.shape.r": "<p>Outside radius.</p>\n",
- "elements-sector.shape.r0": "<p>Inside radius.</p>\n",
- "elements-sector.shape.startAngle": "<p>start angle, in radian.</p>\n",
- "elements-sector.shape.endAngle": "<p>end anble, in radian.</p>\n",
- "elements-sector.shape.clockwise": "<p>Whether draw clockwise.</p>\n",
- "elements-sector.style": "<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\"> [...]
- "elements-sector.style.fill": "<p>Color filled in this element.</p>\n",
- "elements-sector.style.stroke": "<p>Color of stroke.</p>\n",
- "elements-sector.style.lineWidth": "<p>Width of stroke.</p>\n",
- "elements-sector.style.shadowBlur": "<p>Width of shadow.</p>\n",
- "elements-sector.style.shadowOffsetX": "<p>X offset of shadow.</p>\n",
- "elements-sector.style.shadowOffsetY": "<p>Y offset of shadow.</p>\n",
- "elements-sector.style.shadowColor": "<p>color of shadow.</p>\n",
- "elements-arc": "<p>Arc element.</p>\n",
- "elements-arc.type": "<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic. [...]
- "elements-arc.id": "<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n",
- "elements-arc.$action": "<p>Specify the operation should be performed to the element when calling <code class=\"codespan\">setOption</code>.\nDefault value is 'merge', other values can be 'replace' or 'remove'.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class=\"codespan\">'merge'</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class=\"codespan\">'replace'</code>: create a new element [...]
- "elements-arc.position": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code [...]
- "elements-arc.rotation": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code [...]
- "elements-arc.scale": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code cl [...]
- "elements-arc.origin": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code c [...]
- "elements-arc.left": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">'33% [...]
- "elements-arc.right": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">'33 [...]
- "elements-arc.top": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">'33%& [...]
- "elements-arc.bottom": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">'3 [...]
- "elements-arc.bounding": "<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\" ></iframe>\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class=\"codespan\">'all'</code>: (default)\n Use the transformed bounding box of itself and its descenta [...]
- "elements-arc.z": "<p>z value of the elements, determine the overlap order.</p>\n",
- "elements-arc.zlevel": "<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n",
- "elements-arc.info": "<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on('click', function (params) {\n console.log(params.info);\n});\n</code></pre>\n",
- "elements-arc.silent": "<p>Whether response to mouse events / touch events.</p>\n",
- "elements-arc.invisible": "<p>Whether the element is visible.</p>\n",
- "elements-arc.ignore": "<p>Whether the element is totally ignored (neither render nor listen events).</p>\n",
- "elements-arc.cursor": "<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n",
- "elements-arc.draggable": "<p>Can be dragged or not.</p>\n",
- "elements-arc.progressive": "<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n",
- "elements-arc.shape.cx": "<p>The x value of the center of the element in the coordinate system of its parent.</p>\n",
- "elements-arc.shape.cy": "<p>The y value of the center of the element in the coordinate system of its parent.</p>\n",
- "elements-arc.shape.r": "<p>Outside radius.</p>\n",
- "elements-arc.shape.r0": "<p>Inside radius.</p>\n",
- "elements-arc.shape.startAngle": "<p>start angle, in radian.</p>\n",
- "elements-arc.shape.endAngle": "<p>end anble, in radian.</p>\n",
- "elements-arc.shape.clockwise": "<p>Whether draw clockwise.</p>\n",
- "elements-arc.style": "<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">sty [...]
- "elements-arc.style.fill": "<p>Color filled in this element.</p>\n",
- "elements-arc.style.stroke": "<p>Color of stroke.</p>\n",
- "elements-arc.style.lineWidth": "<p>Width of stroke.</p>\n",
- "elements-arc.style.shadowBlur": "<p>Width of shadow.</p>\n",
- "elements-arc.style.shadowOffsetX": "<p>X offset of shadow.</p>\n",
- "elements-arc.style.shadowOffsetY": "<p>Y offset of shadow.</p>\n",
- "elements-arc.style.shadowColor": "<p>color of shadow.</p>\n",
- "elements-polygon": "<p>Polygon element.</p>\n",
- "elements-polygon.type": "<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#grap [...]
- "elements-polygon.id": "<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n",
- "elements-polygon.$action": "<p>Specify the operation should be performed to the element when calling <code class=\"codespan\">setOption</code>.\nDefault value is 'merge', other values can be 'replace' or 'remove'.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class=\"codespan\">'merge'</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class=\"codespan\">'replace'</code>: create a new ele [...]
- "elements-polygon.position": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, < [...]
- "elements-polygon.rotation": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, < [...]
- "elements-polygon.scale": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <cod [...]
- "elements-polygon.origin": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <co [...]
- "elements-polygon.left": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">' [...]
- "elements-polygon.right": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\"> [...]
- "elements-polygon.top": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">' [...]
- "elements-polygon.bottom": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&# [...]
- "elements-polygon.bounding": "<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\" ></iframe>\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class=\"codespan\">'all'</code>: (default)\n Use the transformed bounding box of itself and its desc [...]
- "elements-polygon.z": "<p>z value of the elements, determine the overlap order.</p>\n",
- "elements-polygon.zlevel": "<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n",
- "elements-polygon.info": "<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on('click', function (params) {\n console.log(params.info);\n});\n</code></pre>\n",
- "elements-polygon.silent": "<p>Whether response to mouse events / touch events.</p>\n",
- "elements-polygon.invisible": "<p>Whether the element is visible.</p>\n",
- "elements-polygon.ignore": "<p>Whether the element is totally ignored (neither render nor listen events).</p>\n",
- "elements-polygon.cursor": "<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n",
- "elements-polygon.draggable": "<p>Can be dragged or not.</p>\n",
- "elements-polygon.progressive": "<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n",
- "elements-polygon.shape.points": "<p>A list of points, which defines the shape, like <code class=\"codespan\">[[22, 44], [44, 55], [11, 44], ...]</code>.</p>\n",
- "elements-polygon.shape.smooth": "<p>Whether smooth the line.</p>\n<ul>\n<li>If the value is number, bezier interpolation is used, and the value specified the level of smooth, which is in the range of <code class=\"codespan\">[0, 1]</code>.</li>\n<li>If the value is <code class=\"codespan\">'spline'</code>, Catmull-Rom spline interpolation is used.</li>\n</ul>\n",
- "elements-polygon.shape.smoothConstraint": "<p>Whether prevent the smooth process cause the line out of the bounding box.</p>\n<p>Only works when <code class=\"codespan\">smooth</code> is <code class=\"codespan\">number</code> (bezier smooth).</p>\n",
- "elements-polygon.style": "<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\" [...]
- "elements-polygon.style.fill": "<p>Color filled in this element.</p>\n",
- "elements-polygon.style.stroke": "<p>Color of stroke.</p>\n",
- "elements-polygon.style.lineWidth": "<p>Width of stroke.</p>\n",
- "elements-polygon.style.shadowBlur": "<p>Width of shadow.</p>\n",
- "elements-polygon.style.shadowOffsetX": "<p>X offset of shadow.</p>\n",
- "elements-polygon.style.shadowOffsetY": "<p>Y offset of shadow.</p>\n",
- "elements-polygon.style.shadowColor": "<p>color of shadow.</p>\n",
- "elements-polyline": "<p>Polyline element.</p>\n",
- "elements-polyline.type": "<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#gra [...]
- "elements-polyline.id": "<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n",
- "elements-polyline.$action": "<p>Specify the operation should be performed to the element when calling <code class=\"codespan\">setOption</code>.\nDefault value is 'merge', other values can be 'replace' or 'remove'.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class=\"codespan\">'merge'</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class=\"codespan\">'replace'</code>: create a new el [...]
- "elements-polyline.position": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, [...]
- "elements-polyline.rotation": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, [...]
- "elements-polyline.scale": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <co [...]
- "elements-polyline.origin": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <c [...]
- "elements-polyline.left": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\"> [...]
- "elements-polyline.right": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&# [...]
- "elements-polyline.top": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">' [...]
- "elements-polyline.bottom": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">& [...]
- "elements-polyline.bounding": "<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\" ></iframe>\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class=\"codespan\">'all'</code>: (default)\n Use the transformed bounding box of itself and its des [...]
- "elements-polyline.z": "<p>z value of the elements, determine the overlap order.</p>\n",
- "elements-polyline.zlevel": "<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n",
- "elements-polyline.info": "<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on('click', function (params) {\n console.log(params.info);\n});\n</code></pre>\n",
- "elements-polyline.silent": "<p>Whether response to mouse events / touch events.</p>\n",
- "elements-polyline.invisible": "<p>Whether the element is visible.</p>\n",
- "elements-polyline.ignore": "<p>Whether the element is totally ignored (neither render nor listen events).</p>\n",
- "elements-polyline.cursor": "<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n",
- "elements-polyline.draggable": "<p>Can be dragged or not.</p>\n",
- "elements-polyline.progressive": "<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n",
- "elements-polyline.shape.points": "<p>A list of points, which defines the shape, like <code class=\"codespan\">[[22, 44], [44, 55], [11, 44], ...]</code>.</p>\n",
- "elements-polyline.shape.smooth": "<p>Whether smooth the line.</p>\n<ul>\n<li>If the value is number, bezier interpolation is used, and the value specified the level of smooth, which is in the range of <code class=\"codespan\">[0, 1]</code>.</li>\n<li>If the value is <code class=\"codespan\">'spline'</code>, Catmull-Rom spline interpolation is used.</li>\n</ul>\n",
- "elements-polyline.shape.smoothConstraint": "<p>Whether prevent the smooth process cause the line out of the bounding box.</p>\n<p>Only works when <code class=\"codespan\">smooth</code> is <code class=\"codespan\">number</code> (bezier smooth).</p>\n",
- "elements-polyline.style": "<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\ [...]
- "elements-polyline.style.fill": "<p>Color filled in this element.</p>\n",
- "elements-polyline.style.stroke": "<p>Color of stroke.</p>\n",
- "elements-polyline.style.lineWidth": "<p>Width of stroke.</p>\n",
- "elements-polyline.style.shadowBlur": "<p>Width of shadow.</p>\n",
- "elements-polyline.style.shadowOffsetX": "<p>X offset of shadow.</p>\n",
- "elements-polyline.style.shadowOffsetY": "<p>Y offset of shadow.</p>\n",
- "elements-polyline.style.shadowColor": "<p>color of shadow.</p>\n",
- "elements-line": "<p>Line element.</p>\n",
- "elements-line.type": "<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic [...]
- "elements-line.id": "<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n",
- "elements-line.$action": "<p>Specify the operation should be performed to the element when calling <code class=\"codespan\">setOption</code>.\nDefault value is 'merge', other values can be 'replace' or 'remove'.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class=\"codespan\">'merge'</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class=\"codespan\">'replace'</code>: create a new elemen [...]
- "elements-line.position": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <cod [...]
- "elements-line.rotation": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <cod [...]
- "elements-line.scale": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code c [...]
- "elements-line.origin": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code [...]
- "elements-line.left": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">'33 [...]
- "elements-line.right": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">'3 [...]
- "elements-line.top": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">'33% [...]
- "elements-line.bottom": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">' [...]
- "elements-line.bounding": "<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\" ></iframe>\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class=\"codespan\">'all'</code>: (default)\n Use the transformed bounding box of itself and its descent [...]
- "elements-line.z": "<p>z value of the elements, determine the overlap order.</p>\n",
- "elements-line.zlevel": "<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n",
- "elements-line.info": "<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on('click', function (params) {\n console.log(params.info);\n});\n</code></pre>\n",
- "elements-line.silent": "<p>Whether response to mouse events / touch events.</p>\n",
- "elements-line.invisible": "<p>Whether the element is visible.</p>\n",
- "elements-line.ignore": "<p>Whether the element is totally ignored (neither render nor listen events).</p>\n",
- "elements-line.cursor": "<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n",
- "elements-line.draggable": "<p>Can be dragged or not.</p>\n",
- "elements-line.progressive": "<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n",
- "elements-line.shape.x1": "<p>x value of the start point.</p>\n",
- "elements-line.shape.y1": "<p>y value of the start point.</p>\n",
- "elements-line.shape.x2": "<p>x value of the end point.</p>\n",
- "elements-line.shape.y2": "<p>y value of the end point.</p>\n",
- "elements-line.shape.percent": "<p>Specify the percentage of drawing, useful in animation.</p>\n<p>Value range: [0, 1].</p>\n",
- "elements-line.style": "<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">st [...]
- "elements-line.style.fill": "<p>Color filled in this element.</p>\n",
- "elements-line.style.stroke": "<p>Color of stroke.</p>\n",
- "elements-line.style.lineWidth": "<p>Width of stroke.</p>\n",
- "elements-line.style.shadowBlur": "<p>Width of shadow.</p>\n",
- "elements-line.style.shadowOffsetX": "<p>X offset of shadow.</p>\n",
- "elements-line.style.shadowOffsetY": "<p>Y offset of shadow.</p>\n",
- "elements-line.style.shadowColor": "<p>color of shadow.</p>\n",
- "elements-bezierCurve": "<p>Quadratic bezier curve or cubic bezier curve.</p>\n",
- "elements-bezierCurve.type": "<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"# [...]
- "elements-bezierCurve.id": "<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n",
- "elements-bezierCurve.$action": "<p>Specify the operation should be performed to the element when calling <code class=\"codespan\">setOption</code>.\nDefault value is 'merge', other values can be 'replace' or 'remove'.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class=\"codespan\">'merge'</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class=\"codespan\">'replace'</code>: create a new [...]
- "elements-bezierCurve.position": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radia [...]
- "elements-bezierCurve.rotation": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radia [...]
- "elements-bezierCurve.scale": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, [...]
- "elements-bezierCurve.origin": "<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, [...]
- "elements-bezierCurve.left": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\"> [...]
- "elements-bezierCurve.right": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\" [...]
- "elements-bezierCurve.top": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">& [...]
- "elements-bezierCurve.bottom": "<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\ [...]
- "elements-bezierCurve.bounding": "<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\" ></iframe>\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class=\"codespan\">'all'</code>: (default)\n Use the transformed bounding box of itself and its [...]
- "elements-bezierCurve.z": "<p>z value of the elements, determine the overlap order.</p>\n",
- "elements-bezierCurve.zlevel": "<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n",
- "elements-bezierCurve.info": "<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on('click', function (params) {\n console.log(params.info);\n});\n</code></pre>\n",
- "elements-bezierCurve.silent": "<p>Whether response to mouse events / touch events.</p>\n",
- "elements-bezierCurve.invisible": "<p>Whether the element is visible.</p>\n",
- "elements-bezierCurve.ignore": "<p>Whether the element is totally ignored (neither render nor listen events).</p>\n",
- "elements-bezierCurve.cursor": "<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n",
- "elements-bezierCurve.draggable": "<p>Can be dragged or not.</p>\n",
- "elements-bezierCurve.progressive": "<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n",
- "elements-bezierCurve.shape.x1": "<p>x value of the start point.</p>\n",
- "elements-bezierCurve.shape.y1": "<p>y value of the start point.</p>\n",
- "elements-bezierCurve.shape.x2": "<p>x value of the end point.</p>\n",
- "elements-bezierCurve.shape.y2": "<p>y value of the end point.</p>\n",
- "elements-bezierCurve.shape.cpx1": "<p>x of control point.</p>\n",
- "elements-bezierCurve.shape.cpy1": "<p>y of control point.</p>\n",
- "elements-bezierCurve.shape.cpx2": "<p>x of the second control point. If specified, cubic bezier is used.</p>\n<p>If both <code class=\"codespan\">cpx2</code> and <code class=\"codespan\">cpy2</code> are not set, quatratic bezier is used.</p>\n",
- "elements-bezierCurve.shape.cpy2": "<p>y of the second control point. If specified, cubic bezier is used.</p>\n<p>If both <code class=\"codespan\">cpx2</code> and <code class=\"codespan\">cpy2</code> are not set, quatratic bezier is used.</p>\n",
- "elements-bezierCurve.shape.percent": "<p>Specify the percentage of drawing, useful in animation.</p>\n<p>Value range: [0, 1].</p>\n",
- "elements-bezierCurve.style": "<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codesp [...]
- "elements-bezierCurve.style.fill": "<p>Color filled in this element.</p>\n",
- "elements-bezierCurve.style.stroke": "<p>Color of stroke.</p>\n",
- "elements-bezierCurve.style.lineWidth": "<p>Width of stroke.</p>\n",
- "elements-bezierCurve.style.shadowBlur": "<p>Width of shadow.</p>\n",
- "elements-bezierCurve.style.shadowOffsetX": "<p>X offset of shadow.</p>\n",
- "elements-bezierCurve.style.shadowOffsetY": "<p>Y offset of shadow.</p>\n",
- "elements-bezierCurve.style.shadowColor": "<p>color of shadow.</p>\n"
-}
\ No newline at end of file
diff --git a/public/en/documents/option-parts/option.grid.json b/public/en/documents/option-parts/option.grid.json
deleted file mode 100644
index bb5d3ee..0000000
--- a/public/en/documents/option-parts/option.grid.json
+++ /dev/null
@@ -1,110 +0,0 @@
-{
- "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>Whether to show the grid in rectangular coordinate.</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 grid 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 [...]
- "top": "<p>Distance between grid 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 [...]
- "right": "<p>Distance between grid 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",
- "bottom": "<p>Distance between grid 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",
- "width": "<p>Width of grid component. Adaptive by default.</p>\n",
- "height": "<p>Height of grid component. Adaptive by default.</p>\n",
- "containLabel": "<p>Whether the grid region contains <a href=\"#yAxis.axisLabel\">axis tick label</a> of axis.</p>\n<ul>\n<li>When containLabel is <code class=\"codespan\">false</code>:<ul>\n<li><code class=\"codespan\">grid.left</code> <code class=\"codespan\">grid.right</code> <code class=\"codespan\">grid.top</code> <code class=\"codespan\">grid.bottom</code> <code class=\"codespan\">grid.width</code> <code class=\"codespan\">grid.height</code> decide the location and size of the re [...]
- "backgroundColor": "<p>Background color of grid, which is transparent by default.</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>.</p>\n</blockquote>\n<p><strong>Attention</strong>: Works [...]
- "borderColor": "<p>Border color of grid. Support the same color format as backgroundColor.</p>\n<p><strong>Attention</strong>: Works only if <code class=\"codespan\">show: true</code> is set.</p>\n",
- "borderWidth": "<p>Border width of grid.</p>\n<p><strong>Attention</strong>: Works only if <code class=\"codespan\">show: true</code> is set.</p>\n",
- "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<p><strong>Attention</strong>: This property works only if <code class=\"codespan\">show: true</code> [...]
- "shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n<p><strong>Attention</strong>: This property works only if <code class=\"codespan\">show: true</code> configured.</p>\n",
- "shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n<p><strong>Attention</strong>: This property works only if <code class=\"codespan\">show: true</code> configured.</p>\n",
- "shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n<p><strong>Attention</strong>: This property works only if <code class=\"codespan\">show: true</code> configured.</p>\n",
- "tooltip": "<p>tooltip settings in the coordinate system component.</p>\n<hr>\n<p><strong>General Introduction:</strong></p>\n<p>tooltip can be configured on different places:</p>\n<ul>\n<li><p>Configured on global: <a href=\"#tooltip\">tooltip</a></p>\n</li>\n<li><p>Configured in a coordinate system: <a href=\"#grid.tooltip\">grid.tooltip</a>, <a href=\"#polar.tooltip\">polar.tooltip</a>, <a href=\"#single.tooltip\">single.tooltip</a></p>\n</li>\n<li><p>Configured in a series: <a href [...]
- "tooltip.show": "<p>Whether to show the tooltip component, including tooltip floating layer and <a href=\"#tooltip.axisPointer\">axisPointer</a>.</p>\n",
- "tooltip.trigger": "<p>Type of triggering.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">'item'</code></p>\n<p> Triggered by data item, which is mainly used for charts that don't have a category axis like scatter charts or pie charts.</p>\n</li>\n<li><p><code class=\"codespan\">'axis'</code></p>\n<p> Triggered by axes, which is mainly used for charts that have category axes, like bar charts or line charts.</p>\n<p> ECharts 2.x only supports axis trig [...]
- "tooltip.axisPointer": "<p>Configuration item for axisPointer.</p>\n<p><code class=\"codespan\">tooltip.axisPointer</code> is like syntactic sugar of axisPointer settings on axes (for example, <a href=\"#xAxis.axisPointer\">xAxis.axisPointer</a> or <a href=\"#angleAxis.axisPointer\">angleAxis.axisPointer</a>). More detailed features can be configured on <code class=\"codespan\">someAxis.axisPointer</code>. But in common cases, using <code class=\"codespan\">tooltip.axisPinter</code> is [...]
- "tooltip.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<li><p><code class=\"codespan\">'cross'</code> crosshair indicator, which is actually the shortcut of enable two axisPointers of two ortho [...]
- "tooltip.axisPointer.axis": "<p>The coordinate axis, which could be <code class=\"codespan\">'x'</code>, <code class=\"codespan\">'y'</code>, <code class=\"codespan\">'radius'</code>, or <code class=\"codespan\">'angle'</code>. By default, each coordinate system will automatically chose the axes whose will display its axisPointer (category axis or time axis is used by default).</p>\n",
- "tooltip.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",
- "tooltip.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",
- "tooltip.axisPointer.label": "<p>label of axisPointer</p>\n",
- "tooltip.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",
- "tooltip.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",
- "tooltip.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 [...]
- "tooltip.axisPointer.label.margin": "<p>Distance between label and axis.</p>\n",
- "tooltip.axisPointer.label.color": "<p> text color.</p>\n",
- "tooltip.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",
- "tooltip.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",
- "tooltip.axisPointer.label.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "tooltip.axisPointer.label.fontSize": "<p> font size</p>\n",
- "tooltip.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",
- "tooltip.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 [...]
- "tooltip.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=\ [...]
- "tooltip.axisPointer.label.textBorderColor": "<p>Storke color of the text.</p>\n",
- "tooltip.axisPointer.label.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "tooltip.axisPointer.label.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "tooltip.axisPointer.label.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "tooltip.axisPointer.label.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "tooltip.axisPointer.label.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "tooltip.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 [...]
- "tooltip.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",
- "tooltip.axisPointer.label.borderColor": "<p>Border color of label.</p>\n",
- "tooltip.axisPointer.label.borderWidth": "<p>Border width of label.</p>\n",
- "tooltip.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",
- "tooltip.axisPointer.label.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "tooltip.axisPointer.label.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "tooltip.axisPointer.label.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "tooltip.axisPointer.lineStyle": "<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">'line'</code>.</p>\n",
- "tooltip.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><co [...]
- "tooltip.axisPointer.lineStyle.width": "<p> line width.</p>\n",
- "tooltip.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",
- "tooltip.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",
- "tooltip.axisPointer.lineStyle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "tooltip.axisPointer.lineStyle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "tooltip.axisPointer.lineStyle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "tooltip.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",
- "tooltip.axisPointer.shadowStyle": "<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">'shadow'</code>.</p>\n",
- "tooltip.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>< [...]
- "tooltip.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",
- "tooltip.axisPointer.shadowStyle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "tooltip.axisPointer.shadowStyle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "tooltip.axisPointer.shadowStyle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "tooltip.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",
- "tooltip.axisPointer.crossStyle": "<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">'cross'</code>.</p>\n",
- "tooltip.axisPointer.crossStyle.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><c [...]
- "tooltip.axisPointer.crossStyle.width": "<p> line width.</p>\n",
- "tooltip.axisPointer.crossStyle.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",
- "tooltip.axisPointer.crossStyle.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",
- "tooltip.axisPointer.crossStyle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "tooltip.axisPointer.crossStyle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "tooltip.axisPointer.crossStyle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "tooltip.axisPointer.crossStyle.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",
- "tooltip.axisPointer.animation": "<p>Whether to enable animation.</p>\n",
- "tooltip.axisPointer.animationThreshold": "<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n",
- "tooltip.axisPointer.animationDuration": "<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n",
- "tooltip.axisPointer.animationEasing": "<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n",
- "tooltip.axisPointer.animationDelay": "<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n",
- "tooltip.axisPointer.animationDurationUpdate": "<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n",
- "tooltip.axisPointer.animationEasingUpdate": "<p>Easing method used for animation.</p>\n",
- "tooltip.axisPointer.animationDelayUpdate": "<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more informatio [...]
- "tooltip.position": "<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.</p>\n<p> Example:</p>\n<pre><code class=\"lang-js\"> // absolute position, which is 10px to the left side and 10px to the top side of the container\n p [...]
- "tooltip.formatter": "<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.tr [...]
- "tooltip.backgroundColor": "<p>The background color of tooltip's floating layer.</p>\n",
- "tooltip.borderColor": "<p>The border color of tooltip's floating layer.</p>\n",
- "tooltip.borderWidth": "<p>The border width of tooltip's floating layer.</p>\n",
- "tooltip.padding": "<p>The floating layer of tooltip 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 [...]
- "tooltip.textStyle": "<p>The text syle of tooltip's floating layer.</p>\n",
- "tooltip.textStyle.color": "<p> text color.</p>\n",
- "tooltip.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",
- "tooltip.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",
- "tooltip.textStyle.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "tooltip.textStyle.fontSize": "<p> font size</p>\n",
- "tooltip.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",
- "tooltip.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 [...]
- "tooltip.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=\"codespa [...]
- "tooltip.textStyle.textBorderColor": "<p>Storke color of the text.</p>\n",
- "tooltip.textStyle.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "tooltip.textStyle.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "tooltip.textStyle.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "tooltip.textStyle.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "tooltip.textStyle.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "tooltip.extraCssText": "<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"
-}
\ No newline at end of file
diff --git a/public/en/documents/option-parts/option.json b/public/en/documents/option-parts/option.json
deleted file mode 100644
index 019747c..0000000
--- a/public/en/documents/option-parts/option.json
+++ /dev/null
@@ -1,65 +0,0 @@
-{
- "title": "<p>Title component, including main title and subtitle.</p>\n<p>In ECharts 2.x, a single instance of ECharts could contains one title component at most. However, in ECharts 3, there could be one or more than one title components. It is more useful when multiple diagrams in one instance all need titles.</p>\n<p><strong>Here are some instances of different animation easing functions, among which every instance has a title component: </strong></p>\n<iframe data-src=\"https://www. [...]
- "legend": "<p>Legend component.</p>\n<p>Legend component shows symbol, color and name of different series. You can click legends to toggle displaying series in the chart.</p>\n<p>In ECharts 3, a single echarts instance may contain multiple legend components, which makes it easier for the layout of multiple legend components.</p>\n<p>If there have to be too many legend items, <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blan [...]
- "grid": "<p>Drawing grid in rectangular coordinate. In a single grid, at most two X and Y axes each is allowed. <a href=\"#series-line\">Line chart</a>, <a href=\"#series-bar\">bar chart</a>, and <a href=\"#series-scatter\">scatter chart (bubble chart)</a> can be drawn in grid.</p>\n<p>In ECharts 2.x, there could only be one single grid component at most in a single echarts instance. But in ECharts 3, there is no limitation.</p>\n<p><strong>Following is an example of Anscombe Quartet:< [...]
- "xAxis": "<p>The x axis in cartesian(rectangular) coordinate. Usually a single grid component can place at most 2 x axis, one on the bottom and another on the top. <a href=\"#xAxis.offset\">offset</a> can be used to avoid overlap when you need to put more than two x axis.</p>\n",
- "yAxis": "<p>The y axis in cartesian(rectangular) coordinate. Usually a single grid component can place at most 2 y axis, one on the left and another on the right. <a href=\"#yAxis.offset\">offset</a> can be used to avoid overlap when you need to put more than two y axis.</p>\n",
- "polar": "<p>Polar coordinate can be used in scatter and line chart. Every polar coordinate has an <a href=\"#angleAxis\">angleAxis</a> and a <a href=\"#radiusAxis\">radiusAxis</a>.</p>\n<p><strong>For example: </strong></p>\n<iframe data-src=\"https://www.echartsjs.com/examples/zh/view.html?c=scatter-polar-punchCard&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n\n",
- "radiusAxis": "<p>Radial axis of polar coordinate.</p>\n",
- "angleAxis": "<p>The angle axis in Polar Coordinate.</p>\n",
- "radar": "<p>Coordinate for <a href=\"#series-radar\">radar charts</a>. This component is equal to the polar component in ECharts 2. Because the polar component in the echarts 3 is reconstructed to be the standard polar coordinate component, this component is renamed to be radar to avoid confusion.</p>\n<p>Radar chart coordinate is different from polar coordinate, in that every axis indicator of the radar chart coordinate is an individual dimension. The style of indicator coordinate ax [...]
- "dataZoom": "<p><code class=\"codespan\">dataZoom</code> component is used for zooming a specific area, which enables user to investigate data in detail, or get an overview of the data, or get rid of outlier points.</p>\n<p>These types of <code class=\"codespan\">dataZoom</code> component are supported:</p>\n<ul>\n<li><p><a href=\"#dataZoom-inside\">dataZoomInside</a>: Data zoom functionalities is embeded inside coordinate systems, enable user to zoom or roam coordinate system by mouse [...]
- "dataZoom-inside": "<p><strong>dataZoomInside</strong></p>\n<p>Data zoom component of <em>inside</em> type.</p>\n<p>Refer to <a href=\"#dataZoom\">dataZoom</a> for more information.</p>\n<p>The <em>inside</em> means it's inside the coordinates.</p>\n<ul>\n<li>Translation: data area can be translated when moving in coordinates.</li>\n<li>Scaling:<ul>\n<li>PC: when mouse rolls (similar with touch pad) in coordinates.</li>\n<li>Mobile: when touches and moved with two fingers in coordi [...]
- "dataZoom-slider": "<p><strong>dataZoomSlider</strong></p>\n<p>(Please refer to the <a href=\"#dataZoom\">introduction of dataZoom</a>.)</p>\n<p><br>\n<br></p>\n",
- "visualMap": "<p><code class=\"codespan\">visualMap</code> is a type of component for visual encoding, which maps the data to visual channels, including:</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 [...]
- "visualMap-continuous": "<p><strong>Continuous visualMap component (visualMapContinuous)</strong></p>\n<p> (See <a href=\"#visualMap\">the introduction to visual Map component (visualMap)</a>)</p>\n<p>You can set <a href=\"#visualMap.calculable\">visualMap.calculable</a> to show or hide the hanldes, which is used to change the selected range in <code class=\"codespan\">visualMapContinuous</code>.</p>\n<p><br>\n<br></p>\n",
- "visualMap-piecewise": "<p><strong>Piecewise visualMap component (visualMapPiecewise) </strong></p>\n<p> (Reference to <a href=\"#visualMap\">the introduction of visual Map component (visualMap)</a>)</p>\n<p>Sample:</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/zh/view.html?c=doc-example/scatter-visualMap-piecewise&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n\n<p>Piecewise visualMap component works in one of the three modes:</p>\n<ul>\n<li><strong>CONTINU [...]
- "tooltip": "<p>Tooltip component.</p>\n<hr>\n<p><strong>General Introduction:</strong></p>\n<p>tooltip can be configured on different places:</p>\n<ul>\n<li><p>Configured on global: <a href=\"#tooltip\">tooltip</a></p>\n</li>\n<li><p>Configured in a coordinate system: <a href=\"#grid.tooltip\">grid.tooltip</a>, <a href=\"#polar.tooltip\">polar.tooltip</a>, <a href=\"#single.tooltip\">single.tooltip</a></p>\n</li>\n<li><p>Configured in a series: <a href=\"#series.tooltip\">series.toolti [...]
- "axisPointer": "<p>This is the global configurations of axisPointer.</p>\n<hr>\n<p><code class=\"codespan\">axisPointer</code> is a tool for displaying reference line and axis value under mouse pointer.</p>\n<p>For example:</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/zh/view.html?c=doc-example/candlestick-axisPointer&edit=1&reset=1\" width=\"600\" height=\"450\" ></iframe>\n\n\n<p>In the demo above, <a href=\"#axisPointer.link\">axisPointer.link</a> is used to link axisP [...]
- "toolbox": "<p>A group of utility tools, which includes <a href=\"#toolbox.feature.saveAsImage\">export</a>, <a href=\"#toolbox.feature.dataView\">data view</a>, <a href=\"#toolbox.feature.magicType\">dynamic type switching</a>, <a href=\"#toolbox.feature.dataZoom\">data area zooming</a>, and <a href=\"#toolbox.feature.reset\">reset</a>.</p>\n<p><strong>Example: </strong></p>\n<iframe data-src=\"https://www.echartsjs.com/examples/zh/view.html?c=line-marker&reset=1&edit=1\" width=\"600\ [...]
- "brush": "<p><code class=\"codespan\">brush</code> is an area-selecting component, with which user can select part of data from a chart to display in detail, or doing calculations with them.</p>\n<p><br></p>\n<hr>\n<p><strong>Brush type and triggering button</strong></p>\n<p>Currently, supported <code class=\"codespan\">brush</code> types include: <code class=\"codespan\">scatter</code>, <code class=\"codespan\">bar</code>, <code class=\"codespan\">candlestick</code>. (Note that <code [...]
- "geo": "<p>Geographic coorinate system component.</p>\n<p>Geographic coorinate system component is used to draw maps, which also supports <a href=\"#series-scatter\">scatter series</a>, and <a href=\"#series-lines\">line series</a>.</p>\n<p>From <code class=\"codespan\">3.1.10</code>, geo component also supports mouse events, whose parameters are:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'geo',\n // geo component's index in option\n geoIndex: number,\n [...]
- "parallel": "<p><br></p>\n<hr>\n<p><strong>Introduction about Parallel coordinates</strong></p>\n<p><a href=\"https://en.wikipedia.org/wiki/Parallel_coordinates\" target=\"_blank\">Parallel Coordinates</a> is a common way of visualizing high-dimensional geometry and analyzing multivariate data.</p>\n<p>For example, <a href=\"#series-parallel.data\">series-parallel.data</a> is the following data:</p>\n<pre><code class=\"lang-javascript\">[\n [1, 55, 9, 56, 0.46, 18, 6, 'g [...]
- "parallelAxis": "<p>This component is the coordinate axis for parallel coordinate.</p>\n<p><br></p>\n<hr>\n<p><strong>Introduction about Parallel coordinates</strong></p>\n<p><a href=\"https://en.wikipedia.org/wiki/Parallel_coordinates\" target=\"_blank\">Parallel Coordinates</a> is a common way of visualizing high-dimensional geometry and analyzing multivariate data.</p>\n<p>For example, <a href=\"#series-parallel.data\">series-parallel.data</a> is the following data:</p>\n<pre><code [...]
- "singleAxis": "<p>An axis with a single dimension. It can be used to display data in one dimension. For example:</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/zh/view.html?c=scatter-single-axis&edit=1&reset=1\" width=\"700\" height=\"500\" ></iframe>\n\n\n\n",
- "timeline": "<p><code class=\"codespan\">timeline</code> component, which provides functions like switching and playing between multiple ECharts <code class=\"codespan\">options</code>.</p>\n<p>Here is an example:</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/zh/view.html?c=doc-example/mix-timeline-all&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p>Different from other components, <code class=\"codespan\">timeline</code> component requires multiple option [...]
- "graphic": "<p><code class=\"codespan\">graphic</code> component enable creating graphic elements in echarts.</p>\n<p>Those graphic type are supported.</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\" [...]
- "calendar": "<p>Calendar coordinates.</p>\n<p>In ECharts, we are very creative to achieve the calendar chart, by using the calendar coordinates to achieve the calendar chart,\nas shown in the following example, we can use calendar coordinates in heatmap, scatter, effectScatter, and graph.</p>\n<p>Example of using heatmap in calendar coordinates:</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/zh/view.html?c=calendar-heatmap&edit=1&reset=1\" width=\"800\" height=\"400\" ></if [...]
- "dataset": "<p><code class=\"codespan\">dataset</code> component is published since ECharts 4. <code class=\"codespan\">dataset</code> brings convenience in data management separated with styles and enables data reuse by different series. More importantly, is enables data encoding from data to visual, which brings convenience in some scenarios.</p>\n<p>More details about <code class=\"codespan\">dataset</code> can be checked in the <a href=\"https://echarts.apache.org/en/tutorial.html# [...]
- "aria": "<p>W3C defined the Accessible Rich Internet Applications Suite (<a href=\"https://www.w3.org/WAI/intro/aria\" target=\"_blank\">WAI-ARIA</a>) to make Web content and Web applications more accessible to the disabled. From ECharts 4.0, we support ARIA by generating description for charts automatically.</p>\n<p>By default, ARIA is disabled. To enable it, you should set <a href=\"#aria.show\">aria.show</a> to be <code class=\"codespan\">true</code>. After enabling, it will generat [...]
- "series-line": "<p><strong>broken line chart</strong></p>\n<p>Broken line chart relates all the data points <a href=\"#series-line.symbol\">symbol</a> by broken lines, which is used to show the trend of data changing. It could be used in both <a href=\"#grid\">rectangular coordinate</a> and<a href=\"#polar\">polar coordinate</a>.</p>\n<p><strong>Tip:</strong> When <a href=\"#series-line.areaStyle\">areaStyle</a> is set, area chart will be drew.</p>\n<p><strong>Tip:</strong> With <a hre [...]
- "series-bar": "<p><strong>bar chart</strong></p>\n<p>Bar chart shows different data through the height of a bar, which is used in <a href=\"#grid\">rectangular coordinate</a> with at least 1 category axis.</p>\n",
- "series-pie": "<p><strong>pie chart</strong></p>\n<p>The pie chart is mainly used for showing proportion of different categories. Each arc length represents the proportion of data quantity.</p>\n<p><strong>Tip:</strong> The pie chart is more suitable for illustrating the numerical proportion. If you just to present the numerical differences of various categories, the <a href=\"bar\" target=\"_blank\">bar graph</a> chart is more suggested. Because compared to tiny length difference, pe [...]
- "series-scatter": "<p>Scatter (bubble) chart . The scatter chart in <a href=\"#grid\">rectangular coordinate</a> could be used to present the relation between <code class=\"codespan\">x</code> and <code class=\"codespan\">y</code>. If data have multiple dimensions, the values of the other dimensions can be visualized through <a href=\"#series-scatter.symbol\">symbol</a> with various sizes and colors, which becomes a bubble chart. These can be done by using with <a href=\"#visualMap\"> [...]
- "series-effectScatter": "<p>The scatter (bubble) graph with ripple animation. The special animation effect can visually highlights some data.</p>\n<p><strong>Tip:</strong> The effects of map was achieved through markPoint in ECharts 2.x. However, in ECharts 3, effectScatter on geographic coordinate is recommended for achieving that effects of map.</p>\n",
- "series-radar": "<p><strong>radar chart</strong></p>\n<p>Radar chart is mainly used to show multi-variable data, such as the analysis of a football player's varied attributes. It relies <a href=\"#radar\">radar</a> component.</p>\n<p>Here is the example of AQI data which is presented in radar chart.</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/zh/view.html?c=radar-aqi&edit=1&reset=1\" width=\"600\" height=\"500\" ></iframe>\n\n\n",
- "series-tree": "<p><strong>Tree Diagram</strong></p>\n<p>The tree diagram is mainly used to visualize the tree data structure, which is a special hierarchical type with a unique root node, left subtree, and right subtree.</p>\n<p><strong>Note: Forests are not currently supported directly in a single series, and can be implemented by configuring multiple series in an option</strong></p>\n<p><strong>Tree example：</strong></p>\n<iframe data-src=\"https://www.echartsjs.com/examples/zh/view [...]
- "series-treemap": "<p><a href=\"https://en.wikipedia.org/wiki/Treemapping\" target=\"_blank\">Treemap</a> is a common way to present "hierarchical data" or "tree data".It primarily highlights the important nodes at all hierarchies in 『Tree』with area.</p>\n<p><strong>Example:</strong></p>\n<iframe data-src=\"https://www.echartsjs.com/examples/zh/view.html?c=treemap-obama&edit=1&reset=1\" width=\"700\" height=\"580\" ></iframe>\n\n\n\n<p><br>\n<strong>Visual Mapping:< [...]
- "series-sunburst": "<p><a href=\"https://en.wikipedia.org/wiki/Pie_chart#Ring_chart_/_Sunburst_chart_/_Multilevel_pie_chart\" target=\"_blank\">Sunburst Chart</a> is composed of multiple pie charts. From the view of data structure, inner rings are the parent nodes of outer rings. Therefore, it can show the partial-overall relationship as <a href=\"#series-pie\">Pie</a> charts, and also level relation as <a href=\"#series-treemap\">Treemap</a> charts.</p>\n<p><strong>For example:</stron [...]
- "series-boxplot": "<p><a href=\"https://en.wikipedia.org/wiki/Box_plot\" target=\"_blank\">Boxplot</a> is a convenient way of graphically depicting groups of numerical data through their quartiles.</p>\n<p><strong>Example:</strong></p>\n<iframe data-src=\"https://www.echartsjs.com/examples/zh/view.html?c=boxplot-light-velocity&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p><br>\nMultiple <code class=\"codespan\">series</code> can be displayed in the same coordinate sy [...]
- "series-candlestick": "<p>A <a href=\"https://en.wikipedia.org/wiki/Candlestick_chart\" target=\"_blank\">candlestick</a> chart (also called Japanese candlestick chart) is a style of financial chart used to describe price movements of a security, derivative, or currency.</p>\n<p>ECharts3 supports both <code class=\"codespan\">'candlestick'</code> and <code class=\"codespan\">'k'</code> in <a href=\"#(series.type\">series.type</a> (<code class=\"codespan\">'k'</c [...]
- "series-heatmap": "<p><strong>heat map</strong></p>\n<p>Heat map mainly use colors to represent values, which must be used along with <a href=\"#visualMap\">visualMap</a> component.</p>\n<p>It can be used in either <a href=\"#grid\">rectangular coordinate</a> or <a href=\"#geo\">geographic coordinate</a>. But the behaviour on them are quite different. Rectangular coordinate must have two catagories to use it.</p>\n<p>Here are the examples using it in rectangular coordinate and geograph [...]
- "series-map": "<p><strong>Map.</strong></p>\n<p>Map is maily used in the visulization of geographic area data, which can be used with <a href=\"#visualMap\">visualMap</a> component to visualize the datas such as population distribution density in diffrent areas.</p>\n<p>Series of same <a href=\"#series-map.map\">map type</a> will show in one map. At this point, the configuration of the first series will be used for the map configuration.</p>\n",
- "series-parallel": "<p>The series in parallel coordinate system.</p>\n<p><br></p>\n<hr>\n<p><strong>Introduction about Parallel coordinates</strong></p>\n<p><a href=\"https://en.wikipedia.org/wiki/Parallel_coordinates\" target=\"_blank\">Parallel Coordinates</a> is a common way of visualizing high-dimensional geometry and analyzing multivariate data.</p>\n<p>For example, <a href=\"#series-parallel.data\">series-parallel.data</a> is the following data:</p>\n<pre><code class=\"lang-javas [...]
- "series-lines": "<p><strong>Lines graph</strong></p>\n<p>It is used to draw the line data with the information about "from" and "to"; and it is applied fot drawing the air routes on map, which visualizes these routes.</p>\n<p>ECharts 2.x uses the <code class=\"codespan\">markLine</code> to draw the migrating effect, while in ECharts 3, the <code class=\"codespan\">lines</code> graph is recommended to be used.</p>\n",
- "series-graph": "<p><strong>relation graph</strong></p>\n<p>Graph is a diagram to represent <a href=\"#series-graph.nodes\">nodes</a> and the <a href=\"#series-graph.links\">links</a> connecting nodes.</p>\n<p><strong>Tips: </strong> In ECharts 2.x , the diagram of <code class=\"codespan\">force</code> type will not be available in ECharts 3 any more, which has been changed to use <code class=\"codespan\">graph</code> to show graph data. If you want to use force to lead the layout, you [...]
- "series-sankey": "<p><strong> Sankey diagram </strong></p>\n<p>Sankey diagram is a specific type of streamgraphs(can also be seen as a directed acyclic graph). In which the width of each branch is shown proportionally to the flow quantity. These graphs are typically used to visualize energy or material or cost transfers between processes. They can also visualize the energy accounts, material flow accounts on a regional or national level, and also the breakdown of cost of item or servic [...]
- "series-funnel": "<p><strong>Funnel chart</strong></p>\n<p><strong>sample: </strong></p>\n<iframe data-src=\"https://www.echartsjs.com/examples/zh/view.html?c=funnel&reset=1&edit=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n",
- "series-gauge": "<p><strong>Gauge chart</strong></p>\n<p><strong>Example: </strong></p>\n<iframe data-src=\"https://www.echartsjs.com/examples/zh/view.html?c=gauge-car\" width=\"600\" height=\"500\" ></iframe>\n\n\n",
- "series-pictorialBar": "<p><strong>pictorial bar chart</strong></p>\n<p>Pictorial bar chart is a type of bar chart that custimzed glyph (like images, <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a>) can be used instead of rectangular bar. This kind of chart is usually used in infographic.</p>\n<p>Pictorial bar chart can only be used in <a href=\"#grid\">rectangular coordinate</a> with at least 1 category axis.</p>\n<p><strong>Example:</strong [...]
- "series-themeRiver": "<p><strong> Theme river </strong></p>\n<p>It is a special flow graph which is mainly used to present the changes of an event or theme during a period.</p>\n<p><strong>Sample: </strong></p>\n<iframe data-src=\"https://www.echartsjs.com/examples/zh/view.html?c=themeRiver-lastfm&edit=1&reset=1\" width=\"700\" height=\"580\" ></iframe>\n\n\n\n<p><br>\n<strong>visual encoding: </strong></p>\n<p>The ribbon-shape river branches in different colors in theme river encode v [...]
- "series-custom": "<p><strong>custom series</strong></p>\n<p><code class=\"codespan\">custom series</code> supports customizing graphic elements, and then generate more types of charts.</p>\n<p>echarts manages the creation, deletion, animation and interaction with other components (like <a href=\"#dataZoom\">dataZoom</a>、<a href=\"#visualMap\">visualMap</a>), which frees developers from handle those issue themselves.</p>\n<p><strong>For example, a "x-range" chart is made by cu [...]
- "color": "<p>The color list of palette. If no color is set in series, the colors would be adopted sequentially and circularly from this list as the colors of series.</p>\n<p>Defaults:</p>\n<pre><code class=\"lang-js\">['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']\n</code></pre>\n",
- "backgroundColor": "<p>Background color. Defaults to have no background.</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 colo [...]
- "textStyle": "<p>Global font style.</p>\n",
- "animation": "<p>Whether to enable animation.</p>\n",
- "animationThreshold": "<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n",
- "animationDuration": "<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n",
- "animationEasing": "<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n",
- "animationDelay": "<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n",
- "animationDurationUpdate": "<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n",
- "animationEasingUpdate": "<p>Easing method used for animation.</p>\n",
- "animationDelayUpdate": "<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n",
- "blendMode": "<p>Sets the type of compositing operation to apply when drawing a new shape. See the different type: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation\" target=\"_blank\">https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation</a>.</p>\n<p>The default is <code class=\"codespan\">'source-over'</code>. Support settings for each series.</p>\n<p><code class=\"codespan [...]
- "useUTC": "<p>Whether to use UTC in display.</p>\n<ul>\n<li><code class=\"codespan\">true</code>: When <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">'time'</code>, ticks is determined according to UTC, and <code class=\"codespan\">axisLabel</code> and <code class=\"codespan\">tooltip</code> use UTC by default.</li>\n<li><code class=\"codespan\">false</code>: When <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">'time'</code>, [...]
-}
\ No newline at end of file
diff --git a/public/en/documents/option-parts/option.legend.json b/public/en/documents/option-parts/option.legend.json
deleted file mode 100644
index 3ab287c..0000000
--- a/public/en/documents/option-parts/option.legend.json
+++ /dev/null
@@ -1,177 +0,0 @@
-{
- "type": "<p>Type of legend. Optional values:</p>\n<ul>\n<li><code class=\"codespan\">'plain'</code>: Simple legend. (default)</li>\n<li><code class=\"codespan\">'scroll'</code>: Scrollable legend. It helps when too many legend items needed to be shown.</li>\n</ul>\n<p>See <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://www.echartsjs.com/examples/zh/e [...]
- "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 legend 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< [...]
- "top": "<p>Distance between legend 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>I [...]
- "right": "<p>Distance between legend 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 legend 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>Width of legend component. Adaptive by default.</p>\n",
- "height": "<p>Height of legend component. Adaptive by default.</p>\n",
- "orient": "<p>The layout orientation of legend.</p>\n<p>Options:</p>\n<ul>\n<li>'horizontal'</li>\n<li>'vertical'</li>\n</ul>\n",
- "align": "<p>Legend mrker and text aligning. By default, it automatically calculates from component location and orient. When <a href=\"#legend.left\">left</a> value of this component is 'right', and the vertical layout (<a href=\"#legend.orient\">orient</a> is 'vertical'), it would be aligned to 'right'.</p>\n<p>Option:</p>\n<ul>\n<li>'auto'</li>\n<li>'left'</li>\n<li>'right'</li>\n</ul>\n",
- "padding": "<p>legend 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\n]\ [...]
- "itemGap": "<p>The distance between each legend, horizontal distance in horizontal layout, and vertical distance in vertical layout.</p>\n",
- "itemWidth": "<p>Image width of legend symbol.</p>\n",
- "itemHeight": "<p>Image height of legend symbol.</p>\n",
- "symbolKeepAspect": "<p>Whether to keep aspect for icons (from <code class=\"codespan\">series.symbol</code> or user-defined <code class=\"codespan\">legend.data.icon</code>) in the form of <code class=\"codespan\">path://</code>.</p>\n",
- "formatter": "<p>Formatter is used to format label of legend, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// using string template, the template variable is legend name {name}\nformatter: 'Legend {name}'\n// using callback function\nformatter: function (name) {\n return 'Legend ' + name;\n}\n</code></pre>\n",
- "selectedMode": "<p>Selected mode of legend, which controls whether series can be toggled displaying by clicking legends. It is enabled by default, and you may set it to be <code class=\"codespan\">false</code> to disabled it.</p>\n<p>Besides, it can be set to <code class=\"codespan\">'single'</code> or <code class=\"codespan\">'multiple'</code>, for single selection and multiple selection.</p>\n",
- "inactiveColor": "<p>Legend color when not selected.</p>\n",
- "selected": "<p>State table of selected legend.</p>\n<p>example:</p>\n<pre><code>selected: {\n // selected'series 1'\n 'series 1': true,\n // unselected'series 2'\n 'series 2': false\n}\n</code></pre>",
- "textStyle": "<p>Legend text style.</p>\n",
- "textStyle.color": "<p> text color.</p>\n",
- "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",
- "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",
- "textStyle.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "textStyle.fontSize": "<p> font size</p>\n",
- "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 class=\"l [...]
- "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:</p> [...]
- "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",
- "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 // or H [...]
- "textStyle.borderColor": "<p>Border color of the text fragment.</p>\n",
- "textStyle.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "textStyle.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "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>Notice, < [...]
- "textStyle.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "textStyle.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "textStyle.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "textStyle.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "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 class=\ [...]
- "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\">heig [...]
- "textStyle.textBorderColor": "<p>Storke color of the text.</p>\n",
- "textStyle.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "textStyle.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "textStyle.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "textStyle.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "textStyle.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "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 this sni [...]
- "textStyle.rich.<user defined style name>.color": "<p> text color.</p>\n",
- "textStyle.rich.<user defined 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",
- "textStyle.rich.<user defined 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",
- "textStyle.rich.<user defined style name>.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "textStyle.rich.<user defined style name>.fontSize": "<p> font size</p>\n",
- "textStyle.rich.<user defined 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 exa [...]
- "textStyle.rich.<user defined 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 [...]
- "textStyle.rich.<user defined 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",
- "textStyle.rich.<user defined 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 [...]
- "textStyle.rich.<user defined style name>.borderColor": "<p>Border color of the text fragment.</p>\n",
- "textStyle.rich.<user defined style name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "textStyle.rich.<user defined style name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "textStyle.rich.<user defined 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]</c [...]
- "textStyle.rich.<user defined style name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "textStyle.rich.<user defined style name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "textStyle.rich.<user defined style name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "textStyle.rich.<user defined style name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "textStyle.rich.<user defined 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\">paddin [...]
- "textStyle.rich.<user defined 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> an [...]
- "textStyle.rich.<user defined style name>.textBorderColor": "<p>Storke color of the text.</p>\n",
- "textStyle.rich.<user defined style name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "textStyle.rich.<user defined style name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "textStyle.rich.<user defined style name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "textStyle.rich.<user defined style name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "textStyle.rich.<user defined style name>.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "tooltip": "<p>Tooltip configuration for legend tooltip, which is similar to <a href=\"#tooltip\">tooltip</a>.</p>\n",
- "icon": "<p>Icon of the legend items.</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\">'none'</code></p>\n [...]
- "data": "<p>Data array of legend. An array item is usually a <code class=\"codespan\">name</code> representing string. (If it is a <a href=\"#series-pie\">pie chart</a>, it could also be the <code class=\"codespan\">name</code> of a single data in the pie chart) of a series. Legend component would automatically calculate the color and icon according to series. Special string <code class=\"codespan\">''</code> (null string) or <code class=\"codespan\">'\\n'</code> (new l [...]
- "data.name": "<p>Name of legend, which should be the <code class=\"codespan\">name</code> value of a certain series. If it is a pie chart, legend name can also be the name of a single data item.</p>\n",
- "data.icon": "<p>Icon of the legend.</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\">'none'</code></p>\n< [...]
- "data.textStyle": "<p>Text style of legend.</p>\n",
- "backgroundColor": "<p>Background color of legend, which is transparent by default.</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>.</p>\n</blockquote>\n",
- "borderColor": "<p>Border color of legend. Support the same color format as backgroundColor.</p>\n",
- "borderWidth": "<p>Border width of legend.</p>\n",
- "borderRadius": "<p>The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.</p>\n<p>For example:</p>\n<pre><code>borderRadius: 5, // consistently set the size of 4 rounded corners\nborderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n</code></pre>",
- "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<p><strong>Attention</strong>: This property works only if <code class=\"codespan\">show: true</code> [...]
- "shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n<p><strong>Attention</strong>: This property works only if <code class=\"codespan\">show: true</code> configured.</p>\n",
- "shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n<p><strong>Attention</strong>: This property works only if <code class=\"codespan\">show: true</code> configured.</p>\n",
- "shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n<p><strong>Attention</strong>: This property works only if <code class=\"codespan\">show: true</code> configured.</p>\n",
- "scrollDataIndex": "<p>It works when <a href=\"#legend.type\">legend.type</a> is <code class=\"codespan\">'scroll'</code>.</p>\n<p><code class=\"codespan\">dataIndex</code> of the left top most displayed item.</p>\n<p>Although the scrolling of legend items can be controlled by calling <code class=\"codespan\">setOption</code> and specifying this property, we suggest that do not controll legend in this way unless necessary (<code class=\"codespan\">setOption</code> might be time [...]
- "pageButtonItemGap": "<p>It works when <a href=\"#legend.type\">legend.type</a> is <code class=\"codespan\">'scroll'</code>.</p>\n<p>The gap between page buttons and page info text.</p>\n<p>See <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">horizontally scrollable [...]
- "pageButtonGap": "<p>It works when <a href=\"#legend.type\">legend.type</a> is <code class=\"codespan\">'scroll'</code>.</p>\n<p>The gap between page buttons and legend items.</p>\n<p>See <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">horizontally scrollable legend [...]
- "pageButtonPosition": "<p>It works when <a href=\"#legend.type\">legend.type</a> is <code class=\"codespan\">'scroll'</code>.</p>\n<p>The position of page buttons and page info. Optional values:</p>\n<ul>\n<li><code class=\"codespan\">'start'</code>: on the left or top.</li>\n<li><code class=\"codespan\">'end'</code>: on the right or bottom.</li>\n</ul>\n<p>See <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=pie-legend&edit=1&reset=1\" targ [...]
- "pageFormatter": "<p>It works when <a href=\"#legend.type\">legend.type</a> is <code class=\"codespan\">'scroll'</code>.</p>\n<p>Page info formatter. It is <code class=\"codespan\">'{current}/{total}'</code> by default, where <code class=\"codespan\">{current}</code> is current page number (start from 1), and <code class=\"codespan\">{total}</code> is the total page number.</p>\n<p>If <code class=\"codespan\">pageFormatter</code> is a function, it should return a string [...]
- "pageIcons": "<p>It works when <a href=\"#legend.type\">legend.type</a> is <code class=\"codespan\">'scroll'</code>.</p>\n<p>The icons of page buttons.</p>\n",
- "pageIcons.horizontal": "<p>The icons of page buttons when <a href=\"#legend.orient\">legend.orient</a> is <code class=\"codespan\">'horizontal'</code>.</p>\n<p>It should be an array, <code class=\"codespan\">[previous page button, next page button]</code>, <code class=\"codespan\">['M0,0L12,-10L12,10z', 'M0,0L-12,-10L-12,10z']</code> by default.</p>\n<p>For the each item of the array,</p>\n<p>It can be set to an image with <code class=\"codespan\">'image:// [...]
- "pageIcons.vertical": "<p>The icons of page buttons when <a href=\"#legend.orient\">legend.orient</a> is <code class=\"codespan\">'vertical'</code>.</p>\n<p>It should be an array, <code class=\"codespan\">[previous page button, next page button]</code>, <code class=\"codespan\">['M0,0L20,0L10,-20z', 'M0,0L20,0L10,20z']</code> by default.</p>\n<p>For the each item of the array,</p>\n<p>It can be set to an image with <code class=\"codespan\">'image://url'< [...]
- "pageIconColor": "<p>It works when <a href=\"#legend.type\">legend.type</a> is <code class=\"codespan\">'scroll'</code>.</p>\n<p>The color of page buttons.</p>\n<p>See <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n",
- "pageIconInactiveColor": "<p>It works when <a href=\"#legend.type\">legend.type</a> is <code class=\"codespan\">'scroll'</code>.</p>\n<p>The color of page buttons when they are inactive.</p>\n<p>See <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">horizontally scroll [...]
- "pageIconSize": "<p>It works when <a href=\"#legend.type\">legend.type</a> is <code class=\"codespan\">'scroll'</code>.</p>\n<p>The size of page buttons. It can be a number, or an array, like <code class=\"codespan\">[10, 3]</code>, represents <code class=\"codespan\">[width, height]</code>.</p>\n<p>See <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://www.ech [...]
- "pageTextStyle": "<p>It works when <a href=\"#legend.type\">legend.type</a> is <code class=\"codespan\">'scroll'</code>.</p>\n<p>The text style of page info.</p>\n",
- "pageTextStyle.color": "<p> text color.</p>\n",
- "pageTextStyle.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",
- "pageTextStyle.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",
- "pageTextStyle.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "pageTextStyle.fontSize": "<p> font size</p>\n",
- "pageTextStyle.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",
- "pageTextStyle.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 cla [...]
- "pageTextStyle.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\"> [...]
- "pageTextStyle.textBorderColor": "<p>Storke color of the text.</p>\n",
- "pageTextStyle.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "pageTextStyle.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "pageTextStyle.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "pageTextStyle.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "pageTextStyle.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "animation": "<p>Whether to use animation when page scrolll.</p>\n",
- "animationDurationUpdate": "<p>Duration of the page scroll animation.</p>\n",
- "selector": "<p>The selector button in the legend component. Currently includes both a full selection and an inverse selection. The selector button doesn't display by default, the user can manually configure it.</p>\n<p>Usage:</p>\n<pre><code class=\"lang-js\">selector: [\n {\n type: 'all or inverse',\n // can be any title you like\n title: 'All'\n },\n {\n type: 'inverse',\n title: 'Inv'\n }\n]\n\n// or [...]
- "selectorLabel": "<p>The text label style of the selector button, which is displayed by default.</p>\n",
- "selectorLabel.show": "<p>Whether to show label.</p>\n",
- "selectorLabel.distance": "<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>).</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n",
- "selectorLabel.rotate": "<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n",
- "selectorLabel.offset": "<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n",
- "selectorLabel.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "selectorLabel.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",
- "selectorLabel.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",
- "selectorLabel.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "selectorLabel.fontSize": "<p> font size</p>\n",
- "selectorLabel.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 [...]
- "selectorLabel.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: [...]
- "selectorLabel.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",
- "selectorLabel.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 // [...]
- "selectorLabel.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "selectorLabel.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "selectorLabel.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "selectorLabel.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>Notic [...]
- "selectorLabel.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "selectorLabel.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "selectorLabel.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "selectorLabel.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "selectorLabel.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 cla [...]
- "selectorLabel.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\"> [...]
- "selectorLabel.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "selectorLabel.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "selectorLabel.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "selectorLabel.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "selectorLabel.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "selectorLabel.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "selectorLabel.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 [...]
- "selectorLabel.rich.<user defined style name>.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "selectorLabel.rich.<user defined 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",
- "selectorLabel.rich.<user defined 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",
- "selectorLabel.rich.<user defined style name>.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "selectorLabel.rich.<user defined style name>.fontSize": "<p> font size</p>\n",
- "selectorLabel.rich.<user defined 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 [...]
- "selectorLabel.rich.<user defined 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 l [...]
- "selectorLabel.rich.<user defined 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",
- "selectorLabel.rich.<user defined 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 / [...]
- "selectorLabel.rich.<user defined style name>.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "selectorLabel.rich.<user defined style name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "selectorLabel.rich.<user defined style name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "selectorLabel.rich.<user defined 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 [...]
- "selectorLabel.rich.<user defined style name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "selectorLabel.rich.<user defined style name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "selectorLabel.rich.<user defined style name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "selectorLabel.rich.<user defined style name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "selectorLabel.rich.<user defined 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\">pa [...]
- "selectorLabel.rich.<user defined 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 [...]
- "selectorLabel.rich.<user defined style name>.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "selectorLabel.rich.<user defined style name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "selectorLabel.rich.<user defined style name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "selectorLabel.rich.<user defined style name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "selectorLabel.rich.<user defined style name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "selectorLabel.rich.<user defined style name>.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "selectorPosition": "<p>The position of the selector button, which can be placed at the end or start of the legend component, the corresponding values are <code class=\"codespan\">'end'</code> and <code class=\"codespan\">'start'</code>. By default, when the legend is laid out horizontally, the selector is placed at the end of it, and when the legend is laid out vertically, the selector is placed at the start of it.</p>\n",
- "selectorItemGap": "<p>The gap between the selector button.</p>\n",
- "selectorButtonGap": "<p>The gap between selector button and legend component.</p>\n"
-}
\ No newline at end of file
diff --git a/public/en/documents/option-parts/option.parallel.json b/public/en/documents/option-parts/option.parallel.json
deleted file mode 100644
index b3253d8..0000000
--- a/public/en/documents/option-parts/option.parallel.json
+++ /dev/null
@@ -1,226 +0,0 @@
-{
- "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 parallel 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 parallel 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< [...]
- "right": "<p>Distance between parallel 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",
- "bottom": "<p>Distance between parallel 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",
- "width": "<p>Width of parallel component. Adaptive by default.</p>\n",
- "height": "<p>Height of parallel component. Adaptive by default.</p>\n",
- "layout": "<p>Layout modes, whose optional values are:</p>\n<ul>\n<li><p><code class=\"codespan\">'horizontal'</code>: place each axis horizontally.</p>\n</li>\n<li><p><code class=\"codespan\">'vertical'</code>: place each axis vertically.</p>\n</li>\n</ul>\n",
- "axisExpandable": "<p>When dimension number is extremely large, say, more than 50 dimensions, there will be more than 50 axes, which may hardly display in a page.</p>\n<p>In this case, you may use <a href=\"#parallel.axisExpandable\">parallel.axisExpandable</a> to improve the display. See this example:</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/zh/view.html?c=map-parallel-prices&edit=1&reset=1\" width=\"600\" height=\"460\" ></iframe>\n\n\n\n\n<p>Whether to enable toggl [...]
- "axisExpandCenter": "<p>Index of the axis which is used as the center of expanding initially. It doesn't have a default value, and needs to be assigned manually.</p>\n<p>Please refer to <a href=\"parallel.axisExpandable\" target=\"_blank\">parallel.axisExpandable</a> for more information.</p>\n",
- "axisExpandCount": "<p>Defines how many axes are at expanding state initially. We'd suggest you assign this value manually according to dimensions.</p>\n<p>Please refer to <a href=\"parallel.axisExpandCenter\" target=\"_blank\">parallel.axisExpandCenter</a> and <a href=\"parallel.axisExpandable\" target=\"_blank\">parallel.axisExpandable</a>.</p>\n",
- "axisExpandWidth": "<p>Distance between two axes when at expanding state, in pixels.</p>\n<p>Please refer to <a href=\"parallel.axisExpandable\" target=\"_blank\">parallel.axisExpandable</a> for more information.</p>\n",
- "axisExpandTriggerOn": "<p>Optional values:</p>\n<ul>\n<li><code class=\"codespan\">'click'</code>: Trigger expanding when mouse clicking.</li>\n<li><code class=\"codespan\">'mousemove'</code>: Trigger expanding when mouse hovering.</li>\n</ul>\n",
- "parallelAxisDefault": "<p>When configuring multiple <a href=\"#parallelAxis\">parallelAxis</a>, there might be some common attributes in each axis configuration. To avoid writing them repeatly, they can be put under <a href=\"#parallel.parallelAxisDefault\">parallel.parallelAxisDefault</a>. Before initializing axis, configurations in <a href=\"#parallel.parallelAxisDefault\">parallel.parallelAxisDefault</a> will be merged into <a href=\"#parallelAxis\">parallelAxis</a> to generate the [...]
- "parallelAxisDefault.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. Data should only be set via <a href=\"#parallelAxis.data\">data</a> for this type.</p>\n</li>\n<li><p><code class=\"codespan\">'time'</code>\n Time axis, suitable for continuous ti [...]
- "parallelAxisDefault.name": "<p>Name of axis.</p>\n",
- "parallelAxisDefault.nameLocation": "<p>Location of axis name.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><code class=\"codespan\">'start'</code></li>\n<li><code class=\"codespan\">'middle'</code> or <code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'end'</code></li>\n</ul>\n",
- "parallelAxisDefault.nameTextStyle": "<p>Text style of axis name.</p>\n",
- "parallelAxisDefault.nameTextStyle.color": "<p>Color of axis name uses <a href=\"#parallelAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n",
- "parallelAxisDefault.nameTextStyle.fontStyle": "<p>axis name 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",
- "parallelAxisDefault.nameTextStyle.fontWeight": "<p>axis name 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",
- "parallelAxisDefault.nameTextStyle.fontFamily": "<p>axis name font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "parallelAxisDefault.nameTextStyle.fontSize": "<p>axis name font size</p>\n",
- "parallelAxisDefault.nameTextStyle.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:</ [...]
- "parallelAxisDefault.nameTextStyle.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 b [...]
- "parallelAxisDefault.nameTextStyle.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",
- "parallelAxisDefault.nameTextStyle.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 HTMLIm [...]
- "parallelAxisDefault.nameTextStyle.borderColor": "<p>Border color of the text fragment.</p>\n",
- "parallelAxisDefault.nameTextStyle.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "parallelAxisDefault.nameTextStyle.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "parallelAxisDefault.nameTextStyle.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>.</ [...]
- "parallelAxisDefault.nameTextStyle.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "parallelAxisDefault.nameTextStyle.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "parallelAxisDefault.nameTextStyle.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "parallelAxisDefault.nameTextStyle.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "parallelAxisDefault.nameTextStyle.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 [...]
- "parallelAxisDefault.nameTextStyle.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 [...]
- "parallelAxisDefault.nameTextStyle.textBorderColor": "<p>Storke color of the text.</p>\n",
- "parallelAxisDefault.nameTextStyle.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "parallelAxisDefault.nameTextStyle.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "parallelAxisDefault.nameTextStyle.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "parallelAxisDefault.nameTextStyle.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "parallelAxisDefault.nameTextStyle.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "parallelAxisDefault.nameTextStyle.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" [...]
- "parallelAxisDefault.nameTextStyle.rich.<user defined style name>.color": "<p> text color.</p>\n",
- "parallelAxisDefault.nameTextStyle.rich.<user defined 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",
- "parallelAxisDefault.nameTextStyle.rich.<user defined 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",
- "parallelAxisDefault.nameTextStyle.rich.<user defined style name>.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "parallelAxisDefault.nameTextStyle.rich.<user defined style name>.fontSize": "<p> font size</p>\n",
- "parallelAxisDefault.nameTextStyle.rich.<user defined 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 lev [...]
- "parallelAxisDefault.nameTextStyle.rich.<user defined 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\">verticalAlig [...]
- "parallelAxisDefault.nameTextStyle.rich.<user defined 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",
- "parallelAxisDefault.nameTextStyle.rich.<user defined 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 / [...]
- "parallelAxisDefault.nameTextStyle.rich.<user defined style name>.borderColor": "<p>Border color of the text fragment.</p>\n",
- "parallelAxisDefault.nameTextStyle.rich.<user defined style name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "parallelAxisDefault.nameTextStyle.rich.<user defined style name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "parallelAxisDefault.nameTextStyle.rich.<user defined 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\"> [...]
- "parallelAxisDefault.nameTextStyle.rich.<user defined style name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "parallelAxisDefault.nameTextStyle.rich.<user defined style name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "parallelAxisDefault.nameTextStyle.rich.<user defined style name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "parallelAxisDefault.nameTextStyle.rich.<user defined style name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "parallelAxisDefault.nameTextStyle.rich.<user defined 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 c [...]
- "parallelAxisDefault.nameTextStyle.rich.<user defined 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=\"co [...]
- "parallelAxisDefault.nameTextStyle.rich.<user defined style name>.textBorderColor": "<p>Storke color of the text.</p>\n",
- "parallelAxisDefault.nameTextStyle.rich.<user defined style name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "parallelAxisDefault.nameTextStyle.rich.<user defined style name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "parallelAxisDefault.nameTextStyle.rich.<user defined style name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "parallelAxisDefault.nameTextStyle.rich.<user defined style name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "parallelAxisDefault.nameTextStyle.rich.<user defined style name>.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n<!-- Overwrite color -->\n",
- "parallelAxisDefault.nameGap": "<p>Gap between axis name and axis line.</p>\n",
- "parallelAxisDefault.nameRotate": "<p>Rotation of axis name.</p>\n",
- "parallelAxisDefault.inverse": "<p>Set this to <code class=\"codespan\">true</code> to invert the axis.\nThis is a new option available from Echarts 3 and newer.</p>\n",
- "parallelAxisDefault.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=\"#parallelAxis.axisTick\">axisTick</a> is served only as a [...]
- "parallelAxisDefault.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', 'categ [...]
- "parallelAxisDefault.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', 'categ [...]
- "parallelAxisDefault.scale": "<p>It is available only in numerical axis, i.e., <a href=\"#parallelAxis.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=\"#parallelAxis.min\">min</a> and <a href=\"#paralle [...]
- "parallelAxisDefault.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",
- "parallelAxisDefault.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=\"#parallelAxis.type\">type</a> 'value' or 'time'.</p>\n",
- "parallelAxisDefault.maxInterval": "<p>Maximum gap between split lines.</p>\n<p>For example, in time axis (<a href=\"#parallelAxis.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=\"#parallelAxis.type\">type</a> 'val [...]
- "parallelAxisDefault.interval": "<p>Compulsively set segmentation interval for axis.</p>\n<p>As <a href=\"#parallelAxis.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=\"#parallelAxis.min\">min</a> and <a href=\"#parallelAxis.max\">max</a> to compulsively set tickings. But in most cases, we do not suggest using this, out automatic calculation is enough for most situati [...]
- "parallelAxisDefault.logBase": "<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#parallelAxis.type\">type</a>: 'log'.</p>\n",
- "parallelAxisDefault.silent": "<p>Set this to <code class=\"codespan\">true</code>, to prevent interaction with the axis.</p>\n",
- "parallelAxisDefault.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 [...]
- "parallelAxisDefault.axisLine": "<p>Settings related to axis line.</p>\n",
- "parallelAxisDefault.axisLine.show": "<p>Set this to <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n",
- "parallelAxisDefault.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 < [...]
- "parallelAxisDefault.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",
- "parallelAxisDefault.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",
- "parallelAxisDefault.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 co [...]
- "parallelAxisDefault.axisLine.lineStyle.width": "<p>line style line width.</p>\n",
- "parallelAxisDefault.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",
- "parallelAxisDefault.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",
- "parallelAxisDefault.axisLine.lineStyle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "parallelAxisDefault.axisLine.lineStyle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "parallelAxisDefault.axisLine.lineStyle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "parallelAxisDefault.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",
- "parallelAxisDefault.axisTick": "<p>Settings related to axis tick.</p>\n",
- "parallelAxisDefault.axisTick.show": "<p>Set this to <code class=\"codespan\">false</code> to prevent the axis tick from showing.</p>\n",
- "parallelAxisDefault.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",
- "parallelAxisDefault.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",
- "parallelAxisDefault.axisTick.length": "<p>The length of the axis tick.</p>\n",
- "parallelAxisDefault.axisTick.lineStyle.color": "<p>Color of axis label is set to be <a href=\"#parallelAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n",
- "parallelAxisDefault.axisTick.lineStyle.width": "<p>axisTick line width.</p>\n",
- "parallelAxisDefault.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",
- "parallelAxisDefault.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",
- "parallelAxisDefault.axisTick.lineStyle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "parallelAxisDefault.axisTick.lineStyle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "parallelAxisDefault.axisTick.lineStyle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "parallelAxisDefault.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",
- "parallelAxisDefault.axisLabel": "<p>Settings related to axis label.</p>\n",
- "parallelAxisDefault.axisLabel.show": "<p>Set this to <code class=\"codespan\">false</code> to prevent the axis label from appearing.</p>\n",
- "parallelAxisDefault.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",
- "parallelAxisDefault.axisLabel.rotate": "<p>Rotation degree of axis label, which is especially useful when there is no enough space for category axis.</p>\n<p>Rotation degree is from -90 to 90.</p>\n",
- "parallelAxisDefault.axisLabel.margin": "<p>The margin between the axis label and the axis line.</p>\n",
- "parallelAxisDefault.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(va [...]
- "parallelAxisDefault.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",
- "parallelAxisDefault.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",
- "parallelAxisDefault.axisLabel.color": "<p>Color of axis label is set to be <a href=\"#parallelAxis.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 re [...]
- "parallelAxisDefault.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",
- "parallelAxisDefault.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",
- "parallelAxisDefault.axisLabel.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "parallelAxisDefault.axisLabel.fontSize": "<p> font size</p>\n",
- "parallelAxisDefault.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 [...]
- "parallelAxisDefault.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 us [...]
- "parallelAxisDefault.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",
- "parallelAxisDefault.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 HTMLImageE [...]
- "parallelAxisDefault.axisLabel.borderColor": "<p>Border color of the text fragment.</p>\n",
- "parallelAxisDefault.axisLabel.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "parallelAxisDefault.axisLabel.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "parallelAxisDefault.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>\ [...]
- "parallelAxisDefault.axisLabel.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "parallelAxisDefault.axisLabel.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "parallelAxisDefault.axisLabel.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "parallelAxisDefault.axisLabel.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "parallelAxisDefault.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>.</ [...]
- "parallelAxisDefault.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 cla [...]
- "parallelAxisDefault.axisLabel.textBorderColor": "<p>Storke color of the text.</p>\n",
- "parallelAxisDefault.axisLabel.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "parallelAxisDefault.axisLabel.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "parallelAxisDefault.axisLabel.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "parallelAxisDefault.axisLabel.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "parallelAxisDefault.axisLabel.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "parallelAxisDefault.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 [...]
- "parallelAxisDefault.axisLabel.rich.<user defined style name>.color": "<p> text color.</p>\n",
- "parallelAxisDefault.axisLabel.rich.<user defined 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",
- "parallelAxisDefault.axisLabel.rich.<user defined 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",
- "parallelAxisDefault.axisLabel.rich.<user defined style name>.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "parallelAxisDefault.axisLabel.rich.<user defined style name>.fontSize": "<p> font size</p>\n",
- "parallelAxisDefault.axisLabel.rich.<user defined 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 w [...]
- "parallelAxisDefault.axisLabel.rich.<user defined 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</c [...]
- "parallelAxisDefault.axisLabel.rich.<user defined 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",
- "parallelAxisDefault.axisLabel.rich.<user defined 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 [...]
- "parallelAxisDefault.axisLabel.rich.<user defined style name>.borderColor": "<p>Border color of the text fragment.</p>\n",
- "parallelAxisDefault.axisLabel.rich.<user defined style name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "parallelAxisDefault.axisLabel.rich.<user defined style name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "parallelAxisDefault.axisLabel.rich.<user defined 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\">padd [...]
- "parallelAxisDefault.axisLabel.rich.<user defined style name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "parallelAxisDefault.axisLabel.rich.<user defined style name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "parallelAxisDefault.axisLabel.rich.<user defined style name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "parallelAxisDefault.axisLabel.rich.<user defined style name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "parallelAxisDefault.axisLabel.rich.<user defined 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 [...]
- "parallelAxisDefault.axisLabel.rich.<user defined 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=\"codesp [...]
- "parallelAxisDefault.axisLabel.rich.<user defined style name>.textBorderColor": "<p>Storke color of the text.</p>\n",
- "parallelAxisDefault.axisLabel.rich.<user defined style name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "parallelAxisDefault.axisLabel.rich.<user defined style name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "parallelAxisDefault.axisLabel.rich.<user defined style name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "parallelAxisDefault.axisLabel.rich.<user defined style name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "parallelAxisDefault.axisLabel.rich.<user defined style name>.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n<!-- Overwrite color -->\n",
- "parallelAxisDefault.data": "<p>Category data, available in <a href=\"#parallelAxis.type\">type</a>: 'category' axis.</p>\n<p>If <a href=\"#parallelAxis.type\">type</a> is not specified, but <code class=\"codespan\">axis.data</code> is specified, the <a href=\"#parallelAxis.type\">type</a> is auto set as <code class=\"codespan\">'category'</code>.</p>\n<p>If <a href=\"#parallelAxis.type\">type</a> is specified as <code class=\"codespan\">'category'</code>, but < [...]
- "parallelAxisDefault.data.value": "<p>Name of a category.</p>\n",
- "parallelAxisDefault.data.textStyle": "<p>Text style of the category.</p>\n",
- "parallelAxisDefault.data.textStyle.color": "<p> text color.</p>\n",
- "parallelAxisDefault.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",
- "parallelAxisDefault.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",
- "parallelAxisDefault.data.textStyle.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "parallelAxisDefault.data.textStyle.fontSize": "<p> font size</p>\n",
- "parallelAxisDefault.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:< [...]
- "parallelAxisDefault.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 [...]
- "parallelAxisDefault.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",
- "parallelAxisDefault.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 HTMLI [...]
- "parallelAxisDefault.data.textStyle.borderColor": "<p>Border color of the text fragment.</p>\n",
- "parallelAxisDefault.data.textStyle.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "parallelAxisDefault.data.textStyle.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "parallelAxisDefault.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>.< [...]
- "parallelAxisDefault.data.textStyle.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "parallelAxisDefault.data.textStyle.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "parallelAxisDefault.data.textStyle.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "parallelAxisDefault.data.textStyle.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "parallelAxisDefault.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</cod [...]
- "parallelAxisDefault.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 <cod [...]
- "parallelAxisDefault.data.textStyle.textBorderColor": "<p>Storke color of the text.</p>\n",
- "parallelAxisDefault.data.textStyle.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "parallelAxisDefault.data.textStyle.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "parallelAxisDefault.data.textStyle.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "parallelAxisDefault.data.textStyle.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "parallelAxisDefault.data.textStyle.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "parallelAxisDefault.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&quo [...]
- "parallelAxisDefault.data.textStyle.rich.<user defined style name>.color": "<p> text color.</p>\n",
- "parallelAxisDefault.data.textStyle.rich.<user defined 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",
- "parallelAxisDefault.data.textStyle.rich.<user defined 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",
- "parallelAxisDefault.data.textStyle.rich.<user defined style name>.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "parallelAxisDefault.data.textStyle.rich.<user defined style name>.fontSize": "<p> font size</p>\n",
- "parallelAxisDefault.data.textStyle.rich.<user defined 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 le [...]
- "parallelAxisDefault.data.textStyle.rich.<user defined 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\">verticalAli [...]
- "parallelAxisDefault.data.textStyle.rich.<user defined 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",
- "parallelAxisDefault.data.textStyle.rich.<user defined 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 [...]
- "parallelAxisDefault.data.textStyle.rich.<user defined style name>.borderColor": "<p>Border color of the text fragment.</p>\n",
- "parallelAxisDefault.data.textStyle.rich.<user defined style name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "parallelAxisDefault.data.textStyle.rich.<user defined style name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "parallelAxisDefault.data.textStyle.rich.<user defined 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\" [...]
- "parallelAxisDefault.data.textStyle.rich.<user defined style name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "parallelAxisDefault.data.textStyle.rich.<user defined style name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "parallelAxisDefault.data.textStyle.rich.<user defined style name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "parallelAxisDefault.data.textStyle.rich.<user defined style name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "parallelAxisDefault.data.textStyle.rich.<user defined 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 [...]
- "parallelAxisDefault.data.textStyle.rich.<user defined 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=\"c [...]
- "parallelAxisDefault.data.textStyle.rich.<user defined style name>.textBorderColor": "<p>Storke color of the text.</p>\n",
- "parallelAxisDefault.data.textStyle.rich.<user defined style name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "parallelAxisDefault.data.textStyle.rich.<user defined style name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "parallelAxisDefault.data.textStyle.rich.<user defined style name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "parallelAxisDefault.data.textStyle.rich.<user defined style name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "parallelAxisDefault.data.textStyle.rich.<user defined style name>.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n<p>{ target: partial-axis-interval }}\nInterval of , which is available in category axis. is set to be the same as <a href=\"#parallelAxis.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, [...]
-}
\ No newline at end of file
diff --git a/public/en/documents/option-parts/option.parallelAxis.json b/public/en/documents/option-parts/option.parallelAxis.json
deleted file mode 100644
index 28229bc..0000000
--- a/public/en/documents/option-parts/option.parallelAxis.json
+++ /dev/null
@@ -1,220 +0,0 @@
-{
- "id": "<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n",
- "dim": "<p>Dimension index of coordinate axis.</p>\n<p>For example, <a href=\"#series-parallel.data\">series-parallel.data</a> is the following data:</p>\n<pre><code class=\"lang-javascript\">[\n [1, 55, 9, 56, 0.46, 18, 6, 'good'],\n [2, 25, 11, 21, 0.65, 34, 9, 'excellent'],\n [3, 56, 7, 63, 0.3, 14, 5, 'good'],\n [4, 33, 7, 29, 0.33, 16, 6, 'excellent'],\n { // Data item can also be an Object, so that per [...]
- "parallelIndex": "<p>It is used to define which <em>coordinate</em> the <em>axis</em> should map to.</p>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">myChart.setOption({\n parallel: [\n {...}, // the first parallel coordinate\n {...} // the second parallel coordinate\n ],\n parallelAxis: [\n {parallelIndex: 1, ...}, // the first coordinate axis, mapping to the second parallel coordinate\n { [...]
- "realtime": "<p>Whether to refresh view when brush-selecting axis. If is set to be <code class=\"codespan\">false</code>, view is updated after brush-selecting action ends.</p>\n<p>When data amount is large, it is suggested to set to be <code class=\"codespan\">false</code> to avoid efficiency problems.</p>\n",
- "areaSelectStyle": "<p>Area selecting is available on axes. Here is some configurations.</p>\n<p><br></p>\n",
- "areaSelectStyle.width": "<p>Width of selecting box.</p>\n",
- "areaSelectStyle.borderWidth": "<p>Border width of the select box.</p>\n",
- "areaSelectStyle.borderColor": "<p>Border color of the select box.</p>\n",
- "areaSelectStyle.color": "<p>Border fill color of the select box.</p>\n",
- "areaSelectStyle.opacity": "<p>Opacity of the select box.</p>\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. Data should only be set via <a href=\"#parallelAxis.data\">data</a> for this type.</p>\n</li>\n<li><p><code class=\"codespan\">'time'</code>\n Time axis, suitable for continuous time series data. As c [...]
- "name": "<p>Name of axis.</p>\n",
- "nameLocation": "<p>Location of axis name.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><code class=\"codespan\">'start'</code></li>\n<li><code class=\"codespan\">'middle'</code> or <code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'end'</code></li>\n</ul>\n",
- "nameTextStyle": "<p>Text style of axis name.</p>\n",
- "nameTextStyle.color": "<p>Color of axis name uses <a href=\"#parallelAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n",
- "nameTextStyle.fontStyle": "<p>axis name 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",
- "nameTextStyle.fontWeight": "<p>axis name 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",
- "nameTextStyle.fontFamily": "<p>axis name font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "nameTextStyle.fontSize": "<p>axis name font size</p>\n",
- "nameTextStyle.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 [...]
- "nameTextStyle.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: [...]
- "nameTextStyle.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",
- "nameTextStyle.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 // [...]
- "nameTextStyle.borderColor": "<p>Border color of the text fragment.</p>\n",
- "nameTextStyle.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "nameTextStyle.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "nameTextStyle.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>Notic [...]
- "nameTextStyle.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "nameTextStyle.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "nameTextStyle.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "nameTextStyle.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "nameTextStyle.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 cla [...]
- "nameTextStyle.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\"> [...]
- "nameTextStyle.textBorderColor": "<p>Storke color of the text.</p>\n",
- "nameTextStyle.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "nameTextStyle.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "nameTextStyle.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "nameTextStyle.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "nameTextStyle.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "nameTextStyle.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 [...]
- "nameTextStyle.rich.<user defined style name>.color": "<p> text color.</p>\n",
- "nameTextStyle.rich.<user defined 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",
- "nameTextStyle.rich.<user defined 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",
- "nameTextStyle.rich.<user defined style name>.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "nameTextStyle.rich.<user defined style name>.fontSize": "<p> font size</p>\n",
- "nameTextStyle.rich.<user defined 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 [...]
- "nameTextStyle.rich.<user defined 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 l [...]
- "nameTextStyle.rich.<user defined 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",
- "nameTextStyle.rich.<user defined 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 / [...]
- "nameTextStyle.rich.<user defined style name>.borderColor": "<p>Border color of the text fragment.</p>\n",
- "nameTextStyle.rich.<user defined style name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "nameTextStyle.rich.<user defined style name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "nameTextStyle.rich.<user defined 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 [...]
- "nameTextStyle.rich.<user defined style name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "nameTextStyle.rich.<user defined style name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "nameTextStyle.rich.<user defined style name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "nameTextStyle.rich.<user defined style name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "nameTextStyle.rich.<user defined 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\">pa [...]
- "nameTextStyle.rich.<user defined 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 [...]
- "nameTextStyle.rich.<user defined style name>.textBorderColor": "<p>Storke color of the text.</p>\n",
- "nameTextStyle.rich.<user defined style name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "nameTextStyle.rich.<user defined style name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "nameTextStyle.rich.<user defined style name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "nameTextStyle.rich.<user defined style name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "nameTextStyle.rich.<user defined style name>.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n<!-- Overwrite color -->\n",
- "nameGap": "<p>Gap between axis name and axis line.</p>\n",
- "nameRotate": "<p>Rotation of axis name.</p>\n",
- "inverse": "<p>Set this to <code class=\"codespan\">true</code> to invert the axis.\nThis is a new option available from Echarts 3 and newer.</p>\n",
- "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=\"#parallelAxis.axisTick\">axisTick</a> is served only as a separation line, an [...]
- "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=\"#parallelAxis.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=\"#parallelAxis.min\">min</a> and <a href=\"#parallelAxis.max\">max</a> [...]
- "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=\"#parallelAxis.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=\"#parallelAxis.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=\"#parallelAxis.type\">type</a> 'value' or 'time [...]
- "interval": "<p>Compulsively set segmentation interval for axis.</p>\n<p>As <a href=\"#parallelAxis.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=\"#parallelAxis.min\">min</a> and <a href=\"#parallelAxis.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 [...]
- "logBase": "<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#parallelAxis.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.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=\"#parallelAxis.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",
- "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.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.rotate": "<p>Rotation degree of axis label, which is especially useful when there is no enough space for category axis.</p>\n<p>Rotation degree is from -90 to 90.</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=\"#parallelAxis.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.<user defined style name>.color": "<p> text color.</p>\n",
- "axisLabel.rich.<user defined 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.<user defined 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.<user defined style name>.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "axisLabel.rich.<user defined style name>.fontSize": "<p> font size</p>\n",
- "axisLabel.rich.<user defined 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 exa [...]
- "axisLabel.rich.<user defined 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 [...]
- "axisLabel.rich.<user defined 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.<user defined 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 [...]
- "axisLabel.rich.<user defined style name>.borderColor": "<p>Border color of the text fragment.</p>\n",
- "axisLabel.rich.<user defined style name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "axisLabel.rich.<user defined style name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "axisLabel.rich.<user defined 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]</c [...]
- "axisLabel.rich.<user defined style name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "axisLabel.rich.<user defined style name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "axisLabel.rich.<user defined style name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "axisLabel.rich.<user defined style name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "axisLabel.rich.<user defined 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\">paddin [...]
- "axisLabel.rich.<user defined 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> an [...]
- "axisLabel.rich.<user defined style name>.textBorderColor": "<p>Storke color of the text.</p>\n",
- "axisLabel.rich.<user defined style name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "axisLabel.rich.<user defined style name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "axisLabel.rich.<user defined style name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "axisLabel.rich.<user defined style name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "axisLabel.rich.<user defined style name>.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n<!-- Overwrite color -->\n",
- "data": "<p>Category data, available in <a href=\"#parallelAxis.type\">type</a>: 'category' axis.</p>\n<p>If <a href=\"#parallelAxis.type\">type</a> is not specified, but <code class=\"codespan\">axis.data</code> is specified, the <a href=\"#parallelAxis.type\">type</a> is auto set as <code class=\"codespan\">'category'</code>.</p>\n<p>If <a href=\"#parallelAxis.type\">type</a> is specified as <code class=\"codespan\">'category'</code>, but <code class=\"codespa [...]
- "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.<user defined style name>.color": "<p> text color.</p>\n",
- "data.textStyle.rich.<user defined 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.<user defined 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.<user defined style name>.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "data.textStyle.rich.<user defined style name>.fontSize": "<p> font size</p>\n",
- "data.textStyle.rich.<user defined 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. Fo [...]
- "data.textStyle.rich.<user defined 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 [...]
- "data.textStyle.rich.<user defined 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.<user defined 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 [...]
- "data.textStyle.rich.<user defined style name>.borderColor": "<p>Border color of the text fragment.</p>\n",
- "data.textStyle.rich.<user defined style name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "data.textStyle.rich.<user defined style name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "data.textStyle.rich.<user defined 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, [...]
- "data.textStyle.rich.<user defined style name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "data.textStyle.rich.<user defined style name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "data.textStyle.rich.<user defined style name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "data.textStyle.rich.<user defined style name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "data.textStyle.rich.<user defined 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\">p [...]
- "data.textStyle.rich.<user defined 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</cod [...]
- "data.textStyle.rich.<user defined style name>.textBorderColor": "<p>Storke color of the text.</p>\n",
- "data.textStyle.rich.<user defined style name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "data.textStyle.rich.<user defined style name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "data.textStyle.rich.<user defined style name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "data.textStyle.rich.<user defined style name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "data.textStyle.rich.<user defined style name>.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n<p>{ target: partial-axis-interval }}\nInterval of , which is available in category axis. is set to be the same as <a href=\"#parallelAxis.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 label [...]
-}
\ No newline at end of file
diff --git a/public/en/documents/option-parts/option.polar.json b/public/en/documents/option-parts/option.polar.json
deleted file mode 100644
index d555253..0000000
--- a/public/en/documents/option-parts/option.polar.json
+++ /dev/null
@@ -1,97 +0,0 @@
-{
- "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",
- "center": "<p>Center position of Polar coordinate, the first of which is the horizontal position, and the second is the vertical position.</p>\n<p>Percentage is supported. When set in percentage, the item is relative to the container width, and the second item to the height.</p>\n<p><strong>Example: </strong></p>\n<pre><code>// Set to absolute pixel values\ncenter: [400, 300]\n// Set to relative percent\ncenter: ['50%', '50%']\n</code></pre>",
- "radius": "<p>Radius of Polar coordinate. Value can be:</p>\n<ul>\n<li><code class=\"codespan\">number</code>: Specify outside radius directly.</li>\n<li><p><code class=\"codespan\">string</code>: For example, <code class=\"codespan\">'20%'</code>, means that the outside radius is 20% of the viewport size (the little one between width and height of the chart container).</p>\n</li>\n<li><p><code class=\"codespan\">Array.<number|string></code>: The first item specifies the [...]
- "tooltip": "<p>tooltip settings in the coordinate system component.</p>\n<hr>\n<p><strong>General Introduction:</strong></p>\n<p>tooltip can be configured on different places:</p>\n<ul>\n<li><p>Configured on global: <a href=\"#tooltip\">tooltip</a></p>\n</li>\n<li><p>Configured in a coordinate system: <a href=\"#grid.tooltip\">grid.tooltip</a>, <a href=\"#polar.tooltip\">polar.tooltip</a>, <a href=\"#single.tooltip\">single.tooltip</a></p>\n</li>\n<li><p>Configured in a series: <a href [...]
- "tooltip.show": "<p>Whether to show the tooltip component, including tooltip floating layer and <a href=\"#tooltip.axisPointer\">axisPointer</a>.</p>\n",
- "tooltip.trigger": "<p>Type of triggering.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">'item'</code></p>\n<p> Triggered by data item, which is mainly used for charts that don't have a category axis like scatter charts or pie charts.</p>\n</li>\n<li><p><code class=\"codespan\">'axis'</code></p>\n<p> Triggered by axes, which is mainly used for charts that have category axes, like bar charts or line charts.</p>\n<p> ECharts 2.x only supports axis trig [...]
- "tooltip.axisPointer": "<p>Configuration item for axisPointer.</p>\n<p><code class=\"codespan\">tooltip.axisPointer</code> is like syntactic sugar of axisPointer settings on axes (for example, <a href=\"#xAxis.axisPointer\">xAxis.axisPointer</a> or <a href=\"#angleAxis.axisPointer\">angleAxis.axisPointer</a>). More detailed features can be configured on <code class=\"codespan\">someAxis.axisPointer</code>. But in common cases, using <code class=\"codespan\">tooltip.axisPinter</code> is [...]
- "tooltip.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<li><p><code class=\"codespan\">'cross'</code> crosshair indicator, which is actually the shortcut of enable two axisPointers of two ortho [...]
- "tooltip.axisPointer.axis": "<p>The coordinate axis, which could be <code class=\"codespan\">'x'</code>, <code class=\"codespan\">'y'</code>, <code class=\"codespan\">'radius'</code>, or <code class=\"codespan\">'angle'</code>. By default, each coordinate system will automatically chose the axes whose will display its axisPointer (category axis or time axis is used by default).</p>\n",
- "tooltip.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",
- "tooltip.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",
- "tooltip.axisPointer.label": "<p>label of axisPointer</p>\n",
- "tooltip.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",
- "tooltip.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",
- "tooltip.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 [...]
- "tooltip.axisPointer.label.margin": "<p>Distance between label and axis.</p>\n",
- "tooltip.axisPointer.label.color": "<p> text color.</p>\n",
- "tooltip.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",
- "tooltip.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",
- "tooltip.axisPointer.label.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "tooltip.axisPointer.label.fontSize": "<p> font size</p>\n",
- "tooltip.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",
- "tooltip.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 [...]
- "tooltip.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=\ [...]
- "tooltip.axisPointer.label.textBorderColor": "<p>Storke color of the text.</p>\n",
- "tooltip.axisPointer.label.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "tooltip.axisPointer.label.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "tooltip.axisPointer.label.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "tooltip.axisPointer.label.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "tooltip.axisPointer.label.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "tooltip.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 [...]
- "tooltip.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",
- "tooltip.axisPointer.label.borderColor": "<p>Border color of label.</p>\n",
- "tooltip.axisPointer.label.borderWidth": "<p>Border width of label.</p>\n",
- "tooltip.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",
- "tooltip.axisPointer.label.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "tooltip.axisPointer.label.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "tooltip.axisPointer.label.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "tooltip.axisPointer.lineStyle": "<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">'line'</code>.</p>\n",
- "tooltip.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><co [...]
- "tooltip.axisPointer.lineStyle.width": "<p> line width.</p>\n",
- "tooltip.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",
- "tooltip.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",
- "tooltip.axisPointer.lineStyle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "tooltip.axisPointer.lineStyle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "tooltip.axisPointer.lineStyle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "tooltip.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",
- "tooltip.axisPointer.shadowStyle": "<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">'shadow'</code>.</p>\n",
- "tooltip.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>< [...]
- "tooltip.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",
- "tooltip.axisPointer.shadowStyle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "tooltip.axisPointer.shadowStyle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "tooltip.axisPointer.shadowStyle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "tooltip.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",
- "tooltip.axisPointer.crossStyle": "<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">'cross'</code>.</p>\n",
- "tooltip.axisPointer.crossStyle.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><c [...]
- "tooltip.axisPointer.crossStyle.width": "<p> line width.</p>\n",
- "tooltip.axisPointer.crossStyle.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",
- "tooltip.axisPointer.crossStyle.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",
- "tooltip.axisPointer.crossStyle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "tooltip.axisPointer.crossStyle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "tooltip.axisPointer.crossStyle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "tooltip.axisPointer.crossStyle.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",
- "tooltip.axisPointer.animation": "<p>Whether to enable animation.</p>\n",
- "tooltip.axisPointer.animationThreshold": "<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n",
- "tooltip.axisPointer.animationDuration": "<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n",
- "tooltip.axisPointer.animationEasing": "<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n",
- "tooltip.axisPointer.animationDelay": "<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n",
- "tooltip.axisPointer.animationDurationUpdate": "<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n",
- "tooltip.axisPointer.animationEasingUpdate": "<p>Easing method used for animation.</p>\n",
- "tooltip.axisPointer.animationDelayUpdate": "<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more informatio [...]
- "tooltip.position": "<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.</p>\n<p> Example:</p>\n<pre><code class=\"lang-js\"> // absolute position, which is 10px to the left side and 10px to the top side of the container\n p [...]
- "tooltip.formatter": "<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.tr [...]
- "tooltip.backgroundColor": "<p>The background color of tooltip's floating layer.</p>\n",
- "tooltip.borderColor": "<p>The border color of tooltip's floating layer.</p>\n",
- "tooltip.borderWidth": "<p>The border width of tooltip's floating layer.</p>\n",
- "tooltip.padding": "<p>The floating layer of tooltip 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 [...]
- "tooltip.textStyle": "<p>The text syle of tooltip's floating layer.</p>\n",
- "tooltip.textStyle.color": "<p> text color.</p>\n",
- "tooltip.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",
- "tooltip.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",
- "tooltip.textStyle.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "tooltip.textStyle.fontSize": "<p> font size</p>\n",
- "tooltip.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",
- "tooltip.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 [...]
- "tooltip.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=\"codespa [...]
- "tooltip.textStyle.textBorderColor": "<p>Storke color of the text.</p>\n",
- "tooltip.textStyle.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "tooltip.textStyle.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "tooltip.textStyle.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "tooltip.textStyle.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "tooltip.textStyle.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "tooltip.extraCssText": "<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"
-}
\ No newline at end of file
diff --git a/public/en/documents/option-parts/option.radar.json b/public/en/documents/option-parts/option.radar.json
deleted file mode 100644
index 80c8ea7..0000000
--- a/public/en/documents/option-parts/option.radar.json
+++ /dev/null
@@ -1,172 +0,0 @@
-{
- "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",
- "center": "<p>Center position of , the first of which is the horizontal position, and the second is the vertical position.</p>\n<p>Percentage is supported. When set in percentage, the item is relative to the container width, and the second item to the height.</p>\n<p><strong>Example: </strong></p>\n<pre><code>// Set to absolute pixel values\ncenter: [400, 300]\n// Set to relative percent\ncenter: ['50%', '50%']\n</code></pre>",
- "radius": "<p>Radius of . Value can be:</p>\n<ul>\n<li><code class=\"codespan\">number</code>: Specify outside radius directly.</li>\n<li><p><code class=\"codespan\">string</code>: For example, <code class=\"codespan\">'20%'</code>, means that the outside radius is 20% of the viewport size (the little one between width and height of the chart container).</p>\n</li>\n<li><p><code class=\"codespan\">Array.<number|string></code>: The first item specifies the inside radius, a [...]
- "startAngle": "<p>The start angle of coordinate, which is the angle of the first indicator axis.</p>\n",
- "name": "<p>Name of radar chart.</p>\n",
- "name.show": "<p>Whether to display the indicator's name.</p>\n",
- "name.formatter": "<p>The formatter of indicator's name, in which the string and callback function are supported. See the following example:</p>\n<pre><code class=\"lang-js\">// using string template, the template variable should be the indicator's name {value}\nformatter: '【{value}】'\n// using callback function, the first parameter is the indicator's name, and the second parameter id the indicator's cinfiguration item\nformatter: function (value, indicator) {\n [...]
- "name.color": "<p> text color.</p>\n",
- "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",
- "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",
- "name.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "name.fontSize": "<p> font size</p>\n",
- "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",
- "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 HTMLImageElement,\n // or HTMLCa [...]
- "name.borderColor": "<p>Border color of the text fragment.</p>\n",
- "name.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "name.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "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</ul>\n<p>Notice, <code [...]
- "name.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "name.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "name.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "name.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "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>\n<p><code class=\"code [...]
- "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=\"codespan\">height</c [...]
- "name.textBorderColor": "<p>Storke color of the text.</p>\n",
- "name.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "name.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "name.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "name.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "name.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "name.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 snippet} [...]
- "name.rich.<user defined style name>.color": "<p> text color.</p>\n",
- "name.rich.<user defined 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",
- "name.rich.<user defined 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",
- "name.rich.<user defined style name>.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "name.rich.<user defined style name>.fontSize": "<p> font size</p>\n",
- "name.rich.<user defined 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: [...]
- "name.rich.<user defined 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 [...]
- "name.rich.<user defined 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",
- "name.rich.<user defined 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 HTML [...]
- "name.rich.<user defined style name>.borderColor": "<p>Border color of the text fragment.</p>\n",
- "name.rich.<user defined style name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "name.rich.<user defined style name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "name.rich.<user defined 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>. [...]
- "name.rich.<user defined style name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "name.rich.<user defined style name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "name.rich.<user defined style name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "name.rich.<user defined style name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "name.rich.<user defined 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</co [...]
- "name.rich.<user defined 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 <co [...]
- "name.rich.<user defined style name>.textBorderColor": "<p>Storke color of the text.</p>\n",
- "name.rich.<user defined style name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "name.rich.<user defined style name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "name.rich.<user defined style name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "name.rich.<user defined style name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "name.rich.<user defined style name>.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "nameGap": "<p>Distance between the indicator's name and axis.</p>\n",
- "splitNumber": "<p>Segments of indicator axis.</p>\n",
- "shape": "<p>Radar render type, in which <code class=\"codespan\">'polygon'</code> and <code class=\"codespan\">'circle'</code> are supported.</p>\n",
- "scale": "<p>Whether to prevent calculating the scaling relative to zero. If it is set to be <code class=\"codespan\">true</code>, the coordinate tick would not compulsorily contain zero value, which is usually useful in scatter diagram of double numerical values axis.</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.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.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",
- "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.rotate": "<p>Rotation degree of axis label, which is especially useful when there is no enough space for category axis.</p>\n<p>Rotation degree is from -90 to 90.</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=\"#.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.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.<user defined style name>.color": "<p> text color.</p>\n",
- "axisLabel.rich.<user defined 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.<user defined 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.<user defined style name>.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "axisLabel.rich.<user defined style name>.fontSize": "<p> font size</p>\n",
- "axisLabel.rich.<user defined 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 exa [...]
- "axisLabel.rich.<user defined 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 [...]
- "axisLabel.rich.<user defined 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.<user defined 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 [...]
- "axisLabel.rich.<user defined style name>.borderColor": "<p>Border color of the text fragment.</p>\n",
- "axisLabel.rich.<user defined style name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "axisLabel.rich.<user defined style name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "axisLabel.rich.<user defined 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]</c [...]
- "axisLabel.rich.<user defined style name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "axisLabel.rich.<user defined style name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "axisLabel.rich.<user defined style name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "axisLabel.rich.<user defined style name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "axisLabel.rich.<user defined 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\">paddin [...]
- "axisLabel.rich.<user defined 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> an [...]
- "axisLabel.rich.<user defined style name>.textBorderColor": "<p>Storke color of the text.</p>\n",
- "axisLabel.rich.<user defined style name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "axisLabel.rich.<user defined style name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "axisLabel.rich.<user defined style name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "axisLabel.rich.<user defined style name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "axisLabel.rich.<user defined style name>.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n<!-- Overwrite color -->\n",
- "splitLine": "<p>SplitLine 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.show.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.show.width": "<p>splitLine line width.</p>\n",
- "splitLine.show.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.show.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.show.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "splitLine.show.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "splitLine.show.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "splitLine.show.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",
- "splitArea": "<p>Split area of axis in <a href=\"#grid\">grid</a> area, not shown by default.</p>\n",
- "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",
- "indicator": "<p>Indicator of radar chart, which is used to assign multiple variables(dimensions) in radar chart. Here is the example.</p>\n<pre><code class=\"lang-js\">indicator: [\n { name: 'Sales (sales) ', max: 6500},\n { name: 'Administration (Administration) ', max: 16000, color: 'red'}, // Set the indicator as 'red'\n { name: 'Information Technology (Information Technology) ', max: 30000},\n { name: 'Customer Support (Customer [...]
- "indicator.name": "<p>Indicator's name.</p>\n",
- "indicator.max": "<p>The maximum value of indicator. It is an optional configuration, but we recommend to set it manually.</p>\n",
- "indicator.min": "<p>The minimum value of indicator. It it an optional configuration, with default value of 0.</p>\n",
- "color": "<p>Specfy a color the the indicator.</p>\n"
-}
\ No newline at end of file
diff --git a/public/en/documents/option-parts/option.radiusAxis.json b/public/en/documents/option-parts/option.radiusAxis.json
deleted file mode 100644
index bfbc656..0000000
--- a/public/en/documents/option-parts/option.radiusAxis.json
+++ /dev/null
@@ -1,295 +0,0 @@
-{
- "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>Index of radial axis in polor coordinate. It's the first axis by default.</p>\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. Data should only be set via <a href=\"#radiusAxis.data\">data</a> for this type.</p>\n</li>\n<li><p><code class=\"codespan\">'time'</code>\n Time axis, suitable for continuous time series data. As com [...]
- "name": "<p>Name of axis.</p>\n",
- "nameLocation": "<p>Location of axis name.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><code class=\"codespan\">'start'</code></li>\n<li><code class=\"codespan\">'middle'</code> or <code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'end'</code></li>\n</ul>\n",
- "nameTextStyle": "<p>Text style of axis name.</p>\n",
- "nameTextStyle.color": "<p>Color of axis name uses <a href=\"#radiusAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n",
- "nameTextStyle.fontStyle": "<p>axis name 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",
- "nameTextStyle.fontWeight": "<p>axis name 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",
- "nameTextStyle.fontFamily": "<p>axis name font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "nameTextStyle.fontSize": "<p>axis name font size</p>\n",
- "nameTextStyle.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 [...]
- "nameTextStyle.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: [...]
- "nameTextStyle.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",
- "nameTextStyle.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 // [...]
- "nameTextStyle.borderColor": "<p>Border color of the text fragment.</p>\n",
- "nameTextStyle.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "nameTextStyle.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "nameTextStyle.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>Notic [...]
- "nameTextStyle.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "nameTextStyle.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "nameTextStyle.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "nameTextStyle.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "nameTextStyle.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 cla [...]
- "nameTextStyle.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\"> [...]
- "nameTextStyle.textBorderColor": "<p>Storke color of the text.</p>\n",
- "nameTextStyle.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "nameTextStyle.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "nameTextStyle.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "nameTextStyle.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "nameTextStyle.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "nameTextStyle.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 [...]
- "nameTextStyle.rich.<user defined style name>.color": "<p> text color.</p>\n",
- "nameTextStyle.rich.<user defined 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",
- "nameTextStyle.rich.<user defined 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",
- "nameTextStyle.rich.<user defined style name>.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "nameTextStyle.rich.<user defined style name>.fontSize": "<p> font size</p>\n",
- "nameTextStyle.rich.<user defined 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 [...]
- "nameTextStyle.rich.<user defined 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 l [...]
- "nameTextStyle.rich.<user defined 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",
- "nameTextStyle.rich.<user defined 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 / [...]
- "nameTextStyle.rich.<user defined style name>.borderColor": "<p>Border color of the text fragment.</p>\n",
- "nameTextStyle.rich.<user defined style name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "nameTextStyle.rich.<user defined style name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "nameTextStyle.rich.<user defined 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 [...]
- "nameTextStyle.rich.<user defined style name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "nameTextStyle.rich.<user defined style name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "nameTextStyle.rich.<user defined style name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "nameTextStyle.rich.<user defined style name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "nameTextStyle.rich.<user defined 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\">pa [...]
- "nameTextStyle.rich.<user defined 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 [...]
- "nameTextStyle.rich.<user defined style name>.textBorderColor": "<p>Storke color of the text.</p>\n",
- "nameTextStyle.rich.<user defined style name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "nameTextStyle.rich.<user defined style name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "nameTextStyle.rich.<user defined style name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "nameTextStyle.rich.<user defined style name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "nameTextStyle.rich.<user defined style name>.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n<!-- Overwrite color -->\n",
- "nameGap": "<p>Gap between axis name and axis line.</p>\n",
- "nameRotate": "<p>Rotation of axis name.</p>\n",
- "inverse": "<p>Set this to <code class=\"codespan\">true</code> to invert the axis.\nThis is a new option available from Echarts 3 and newer.</p>\n",
- "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=\"#radiusAxis.axisTick\">axisTick</a> is served only as a separation line, and [...]
- "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=\"#radiusAxis.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=\"#radiusAxis.min\">min</a> and <a href=\"#radiusAxis.max\">max</a> are se [...]
- "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=\"#radiusAxis.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=\"#radiusAxis.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=\"#radiusAxis.type\">type</a> 'value' or 'time' [...]
- "interval": "<p>Compulsively set segmentation interval for axis.</p>\n<p>As <a href=\"#radiusAxis.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=\"#radiusAxis.min\">min</a> and <a href=\"#radiusAxis.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 unava [...]
- "logBase": "<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#radiusAxis.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.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=\"#radiusAxis.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",
- "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.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.rotate": "<p>Rotation degree of axis label, which is especially useful when there is no enough space for category axis.</p>\n<p>Rotation degree is from -90 to 90.</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=\"#radiusAxis.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.<user defined style name>.color": "<p> text color.</p>\n",
- "axisLabel.rich.<user defined 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.<user defined 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.<user defined style name>.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "axisLabel.rich.<user defined style name>.fontSize": "<p> font size</p>\n",
- "axisLabel.rich.<user defined 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 exa [...]
- "axisLabel.rich.<user defined 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 [...]
- "axisLabel.rich.<user defined 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.<user defined 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 [...]
- "axisLabel.rich.<user defined style name>.borderColor": "<p>Border color of the text fragment.</p>\n",
- "axisLabel.rich.<user defined style name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "axisLabel.rich.<user defined style name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "axisLabel.rich.<user defined 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]</c [...]
- "axisLabel.rich.<user defined style name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "axisLabel.rich.<user defined style name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "axisLabel.rich.<user defined style name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "axisLabel.rich.<user defined style name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "axisLabel.rich.<user defined 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\">paddin [...]
- "axisLabel.rich.<user defined 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> an [...]
- "axisLabel.rich.<user defined style name>.textBorderColor": "<p>Storke color of the text.</p>\n",
- "axisLabel.rich.<user defined style name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "axisLabel.rich.<user defined style name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "axisLabel.rich.<user defined style name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "axisLabel.rich.<user defined style name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "axisLabel.rich.<user defined style name>.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n<!-- Overwrite color -->\n",
- "splitLine": "<p>SplitLine 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.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",
- "splitArea": "<p>Split area of axis in <a href=\"#grid\">grid</a> area, not shown by default.</p>\n",
- "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=\"#radiusAxis.type\">type</a>: 'category' axis.</p>\n<p>If <a href=\"#radiusAxis.type\">type</a> is not specified, but <code class=\"codespan\">axis.data</code> is specified, the <a href=\"#radiusAxis.type\">type</a> is auto set as <code class=\"codespan\">'category'</code>.</p>\n<p>If <a href=\"#radiusAxis.type\">type</a> is specified as <code class=\"codespan\">'category'</code>, but <code class=\"codespan\">axis [...]
- "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.<user defined style name>.color": "<p> text color.</p>\n",
- "data.textStyle.rich.<user defined 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.<user defined 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.<user defined style name>.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "data.textStyle.rich.<user defined style name>.fontSize": "<p> font size</p>\n",
- "data.textStyle.rich.<user defined 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. Fo [...]
- "data.textStyle.rich.<user defined 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 [...]
- "data.textStyle.rich.<user defined 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.<user defined 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 [...]
- "data.textStyle.rich.<user defined style name>.borderColor": "<p>Border color of the text fragment.</p>\n",
- "data.textStyle.rich.<user defined style name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "data.textStyle.rich.<user defined style name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "data.textStyle.rich.<user defined 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, [...]
- "data.textStyle.rich.<user defined style name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "data.textStyle.rich.<user defined style name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "data.textStyle.rich.<user defined style name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "data.textStyle.rich.<user defined style name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "data.textStyle.rich.<user defined 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\">p [...]
- "data.textStyle.rich.<user defined 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</cod [...]
- "data.textStyle.rich.<user defined style name>.textBorderColor": "<p>Storke color of the text.</p>\n",
- "data.textStyle.rich.<user defined style name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "data.textStyle.rich.<user defined style name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "data.textStyle.rich.<user defined style name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "data.textStyle.rich.<user defined style name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "data.textStyle.rich.<user defined 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://www.echartsjs.com/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<p>{ target: partial-axis-interval }}\nInterval of , which is available in category axis. is set to be the same as <a href=\"#radiusAxis.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 [...]
- "zlevel": "<p><code class=\"codespan\">zlevel</code> value of all graphical elements in Radial 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 ma [...]
- "z": "<p><code class=\"codespan\">z</code> value of all graphical elements in Radial 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/public/en/documents/option-parts/option.series-bar.json b/public/en/documents/option-parts/option.series-bar.json
deleted file mode 100644
index 770e176..0000000
--- a/public/en/documents/option-parts/option.series-bar.json
+++ /dev/null
@@ -1,1187 +0,0 @@
-{
- "id": "<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n",
- "name": "<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n",
- "legendHoverLink": "<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n",
- "coordinateSystem": "<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class=\"codespan\">'cartesian2d'</code></p>\n<p> Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-bar.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-bar.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n",
- "xAxisIndex": "<p>Index of <a href=\"#xAxis\">x axis</a> to combine with, which is useful for multiple x axes in one chart.</p>\n",
- "yAxisIndex": "<p>Index of <a href=\"#yAxis\">y axis</a> to combine with, which is useful for multiple y axes in one chart.</p>\n",
- "roundCap": "<p>If to add round caps at the end of the bar sectors. Valid only for bar series on polar coordinates.</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/zh/view.html?c=polar-roundCap&reset=1&edit=1\" width=\"800\" height=\"500\" ></iframe>\n\n\n",
- "label": "<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code [...]
- "label.show": "<p>Whether to show label.</p>\n",
- "label.position": "<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'le [...]
- "label.distance": "<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>).</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n",
- "label.rotate": "<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n",
- "label.offset": "<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n",
- "label.formatter": "<p>Data label formatter, which supports string template and 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>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code [...]
- "label.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series 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.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=\"lang- [...]
- "label.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>\n<p [...]
- "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.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 HTMLC [...]
- "label.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "label.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "label.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "label.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, <code [...]
- "label.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "label.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "label.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "label.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\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<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</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.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 snippet [...]
- "label.rich.<user defined style name>.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "label.rich.<user defined 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",
- "label.rich.<user defined 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",
- "label.rich.<user defined style name>.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "label.rich.<user defined style name>.fontSize": "<p> font size</p>\n",
- "label.rich.<user defined 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 [...]
- "label.rich.<user defined 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 wil [...]
- "label.rich.<user defined 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",
- "label.rich.<user defined 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 HTM [...]
- "label.rich.<user defined style name>.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "label.rich.<user defined style name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "label.rich.<user defined style name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "label.rich.<user defined 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> [...]
- "label.rich.<user defined style name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "label.rich.<user defined style name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "label.rich.<user defined style name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "label.rich.<user defined style name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "label.rich.<user defined 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</c [...]
- "label.rich.<user defined 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 <c [...]
- "label.rich.<user defined style name>.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "label.rich.<user defined style name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "label.rich.<user defined style name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "label.rich.<user defined style name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "label.rich.<user defined style name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "label.rich.<user defined style name>.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "itemStyle": "<p>Graphic style of , <code class=\"codespan\">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n",
- "itemStyle.color": "<p>Bar color. defaults to acquire colors from global palette <a href=\"#color\">option.color</a> .</p>\n",
- "itemStyle.barBorderColor": "<p>The border color of bar.</p>\n",
- "itemStyle.barBorderWidth": "<p>The border width of bar. defaults to have no border.</p>\n",
- "itemStyle.barBorderRadius": "<p>The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.</p>\n<p>For example:</p>\n<pre><code>barBorderRadius: 5, // consistently set the size of 4 rounded corners\nbarBorderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n</code></pre>",
- "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",
- "emphasis.label.show": "<p>Whether to show label.</p>\n",
- "emphasis.label.position": "<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<l [...]
- "emphasis.label.distance": "<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>).</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n",
- "emphasis.label.rotate": "<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n",
- "emphasis.label.offset": "<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n",
- "emphasis.label.formatter": "<p>Data label formatter, which supports string template and 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>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n< [...]
- "emphasis.label.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "emphasis.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",
- "emphasis.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",
- "emphasis.label.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "emphasis.label.fontSize": "<p> font size</p>\n",
- "emphasis.label.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 [...]
- "emphasis.label.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 [...]
- "emphasis.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",
- "emphasis.label.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 // [...]
- "emphasis.label.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "emphasis.label.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "emphasis.label.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "emphasis.label.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 [...]
- "emphasis.label.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "emphasis.label.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "emphasis.label.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "emphasis.label.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "emphasis.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 cl [...]
- "emphasis.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\" [...]
- "emphasis.label.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "emphasis.label.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "emphasis.label.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "emphasis.label.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "emphasis.label.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "emphasis.label.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "emphasis.label.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 [...]
- "emphasis.label.rich.<user defined style name>.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "emphasis.label.rich.<user defined 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",
- "emphasis.label.rich.<user defined 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",
- "emphasis.label.rich.<user defined style name>.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "emphasis.label.rich.<user defined style name>.fontSize": "<p> font size</p>\n",
- "emphasis.label.rich.<user defined 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. Fo [...]
- "emphasis.label.rich.<user defined 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 [...]
- "emphasis.label.rich.<user defined 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",
- "emphasis.label.rich.<user defined 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 [...]
- "emphasis.label.rich.<user defined style name>.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "emphasis.label.rich.<user defined style name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "emphasis.label.rich.<user defined style name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "emphasis.label.rich.<user defined 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, [...]
- "emphasis.label.rich.<user defined style name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "emphasis.label.rich.<user defined style name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "emphasis.label.rich.<user defined style name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "emphasis.label.rich.<user defined style name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "emphasis.label.rich.<user defined 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\">p [...]
- "emphasis.label.rich.<user defined 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</cod [...]
- "emphasis.label.rich.<user defined style name>.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "emphasis.label.rich.<user defined style name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "emphasis.label.rich.<user defined style name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "emphasis.label.rich.<user defined style name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "emphasis.label.rich.<user defined style name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "emphasis.label.rich.<user defined style name>.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "emphasis.itemStyle.color": "<p>Bar color..</p>\n",
- "emphasis.itemStyle.barBorderColor": "<p>The border color of bar.</p>\n",
- "emphasis.itemStyle.barBorderWidth": "<p>The border width of bar. defaults to have no border.</p>\n",
- "emphasis.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",
- "emphasis.itemStyle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "emphasis.itemStyle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "emphasis.itemStyle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "emphasis.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",
- "stack": "<p>Name of stack. On the same category axis, the series with the same <code class=\"codespan\">stack</code> name would be put on top of each other.</p>\n",
- "cursor": "<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n",
- "barWidth": "<p>The width of the bar. Adaptive when not specified.</p>\n<p>Can be an absolute value like <code class=\"codespan\">40</code> or a percent value like <code class=\"codespan\">'60%'</code>. The percent is based on the calculated category width.</p>\n<p>In a single coodinate system, this attribute is shared by multiple <code class=\"codespan\">'bar'</code> series. This attribute should be set on the last <code class=\"codespan\">'bar'</code> series i [...]
- "barMaxWidth": "<p>The maximum width of the bar.</p>\n<p>Has higer priority than <a href=\"#series-bar.barWidth\">barWidth</a>.</p>\n<p>Can be an absolute value like <code class=\"codespan\">40</code> or a percent value like <code class=\"codespan\">'60%'</code>. The percent is based on the calculated category width.</p>\n<p>In a single coodinate system, this attribute is shared by multiple <code class=\"codespan\">'bar'</code> series. This attribute should be set on th [...]
- "barMinWidth": "<p>The minimum width of the bar. In cartesian the default value is <code class=\"codespan\">1</code>, otherwise the default value if <code class=\"codespan\">null</code>.</p>\n<p>Has higer priority than <a href=\"#series-bar.barWidth\">barWidth</a>.</p>\n<p>Can be an absolute value like <code class=\"codespan\">40</code> or a percent value like <code class=\"codespan\">'60%'</code>. The percent is based on the calculated category width.</p>\n<p>In a single coodi [...]
- "barMinHeight": "<p>The minimum width of bar. It could be used to avoid the following situation: the interaction would be affected when the value of some data item is too small.</p>\n",
- "barGap": "<p>The gap between bars between different series, is a percent value like <code class=\"codespan\">'30%'</code>, which means <code class=\"codespan\">30%</code> of the bar width.</p>\n<p>Set barGap as <code class=\"codespan\">'-100%'</code> can overlap bars that belong to different series, which is useful when making a series of bar be background.</p>\n<p>In a single coodinate system, this attribute is shared by multiple <code class=\"codespan\">'bar' [...]
- "barCategoryGap": "<p>The bar gap of a single series, defaults to be <code class=\"codespan\">20%</code> of the category gap, can be set as a fixed value.</p>\n<p>In a single coodinate system, this attribute is shared by multiple <code class=\"codespan\">'bar'</code> series. This attribute should be set on the last <code class=\"codespan\">'bar'</code> series in the coodinate system, then it will be adopted by all <code class=\"codespan\">'bar'</code> series in [...]
- "large": "<p>Whether to enable the optimization of large-scale data. It could be set when large data causes performance problem.</p>\n<p>After being enabled, <code class=\"codespan\">largeThreshold</code> can be used to indicate the minimum number for turning on the optimization.</p>\n<p>But when the optimization enabled, the style of single data item can't be customized any more.</p>\n",
- "largeThreshold": "<p>The threshold enabling the drawing optimization.</p>\n",
- "progressive": "<p><code class=\"codespan\">progressive</code> specifies the amount of graphic elements that can be rendered within a frame (about 16ms) if "progressive rendering" enabled.</p>\n<p>When data amount is from thousand to more than 10 million, it will take too long time to render all of the graphic elements. Since ECharts 4, "progressive rendering" is supported in its workflow, which processes and renders data chunk by chunk alone with each frame, avoidi [...]
- "progressiveThreshold": "<p>If current data amount is over the threshold, "progressive rendering" is enabled.</p>\n",
- "progressiveChunkMode": "<p>Chunk approach, optional values:</p>\n<ul>\n<li><code class=\"codespan\">'sequential'</code>: slice data by data index.</li>\n<li><code class=\"codespan\">'mod'</code>: slice data by mod, which make the data items of each chunk coming from all over the data, bringing better visual effect while progressive rendering.</li>\n</ul>\n",
- "dimensions": "<p><code class=\"codespan\">dimensions</code> can be used to define dimension info for <code class=\"codespan\">series.data</code> or <code class=\"codespan\">dataset.source</code>.</p>\n<p>Notice: if <a href=\"#dataset\">dataset</a> is used, we can provide dimension names in the first column/row of <a href=\"#dataset.source\">dataset.source</a>, and not need to specify <code class=\"codespan\">dimensions</code> here. But if <code class=\"codespan\">dimensions</code> is [...]
- "encode": "<p>Define what is encoded to for each dimension of <code class=\"codespan\">data</code>. For example:</p>\n<pre><code class=\"lang-js\">option = {\n dataset: {\n source: [\n // Each column is called a dimension.\n // There are five dimensions: 0, 1, 2, 3, 4.\n [12, 44, 55, 66, 2],\n [23, 6, 16, 23, 1],\n ...\n ]\n },\n series: {\n type: 'xxx',\n encode: {\n x: [3, 1 [...]
- "seriesLayoutBy": "<p>When <a href=\"#dataset\">dataset</a> is used, <code class=\"codespan\">seriesLayoutBy</code> specifies whether the column or the row of <code class=\"codespan\">dataset</code> is mapped to the series, namely, the series is "layout" on columns or rows. Optional values:</p>\n<ul>\n<li>'column': by default, the columns of <code class=\"codespan\">dataset</code> are mapped the series. In this case, each column represents a dimension.</li>\n<li>' [...]
- "datasetIndex": "<p>If <a href=\"#series.data\">series.data</a> is not specified, and <a href=\"#dataset\">dataset</a> exists, the series will use <code class=\"codespan\">dataset</code>. <code class=\"codespan\">datasetIndex</code> specifies which dataset will be used.</p>\n",
- "data": "<p>Data array of series, which can be in the following forms:</p>\n<p>Notice, if no <code class=\"codespan\">data</code> specified in series, and there is <a href=\"#dataset\">dataset</a> in option, series will use the first <a href=\"#dataset\">dataset</a> as its datasource. If <code class=\"codespan\">data</code> has been specified, <a href=\"#dataset\">dataset</a> will not used.</p>\n<p><code class=\"codespan\">series.datasetIndex</code> can be used to specify other <a href [...]
- "data.name": "<p>The name of data item.</p>\n",
- "data.value": "<p>The value of a single data item.</p>\n",
- "data.label": "<p>The style setting of the text label in a single bar.</p>\n",
- "data.label.show": "<p>Whether to show label.</p>\n",
- "data.label.position": "<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>&# [...]
- "data.label.distance": "<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>).</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n",
- "data.label.rotate": "<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n",
- "data.label.offset": "<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n",
- "data.label.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "data.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",
- "data.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",
- "data.label.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "data.label.fontSize": "<p> font size</p>\n",
- "data.label.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=\" [...]
- "data.label.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 [...]
- "data.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",
- "data.label.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 [...]
- "data.label.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "data.label.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "data.label.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "data.label.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, [...]
- "data.label.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "data.label.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "data.label.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "data.label.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "data.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= [...]
- "data.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\">hei [...]
- "data.label.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "data.label.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "data.label.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "data.label.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "data.label.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "data.label.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "data.label.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 [...]
- "data.label.rich.<user defined style name>.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "data.label.rich.<user defined 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.label.rich.<user defined 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.label.rich.<user defined style name>.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "data.label.rich.<user defined style name>.fontSize": "<p> font size</p>\n",
- "data.label.rich.<user defined 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 ex [...]
- "data.label.rich.<user defined 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 leve [...]
- "data.label.rich.<user defined 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.label.rich.<user defined 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 // o [...]
- "data.label.rich.<user defined style name>.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "data.label.rich.<user defined style name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "data.label.rich.<user defined style name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "data.label.rich.<user defined 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]</ [...]
- "data.label.rich.<user defined style name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "data.label.rich.<user defined style name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "data.label.rich.<user defined style name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "data.label.rich.<user defined style name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "data.label.rich.<user defined 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\">paddi [...]
- "data.label.rich.<user defined 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> a [...]
- "data.label.rich.<user defined style name>.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "data.label.rich.<user defined style name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "data.label.rich.<user defined style name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "data.label.rich.<user defined style name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "data.label.rich.<user defined style name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "data.label.rich.<user defined style name>.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "data.label.emphasis.show": "<p>Whether to show label.</p>\n",
- "data.label.emphasis.position": "<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li [...]
- "data.label.emphasis.distance": "<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>).</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n",
- "data.label.emphasis.rotate": "<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n",
- "data.label.emphasis.offset": "<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n",
- "data.label.emphasis.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "data.label.emphasis.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.label.emphasis.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.label.emphasis.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "data.label.emphasis.fontSize": "<p> font size</p>\n",
- "data.label.emphasis.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 [...]
- "data.label.emphasis.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 ex [...]
- "data.label.emphasis.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.label.emphasis.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.label.emphasis.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "data.label.emphasis.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "data.label.emphasis.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "data.label.emphasis.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 [...]
- "data.label.emphasis.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "data.label.emphasis.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "data.label.emphasis.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "data.label.emphasis.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "data.label.emphasis.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><co [...]
- "data.label.emphasis.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=\"codes [...]
- "data.label.emphasis.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "data.label.emphasis.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "data.label.emphasis.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "data.label.emphasis.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "data.label.emphasis.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "data.label.emphasis.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "data.label.emphasis.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 t [...]
- "data.label.emphasis.rich.<user defined style name>.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "data.label.emphasis.rich.<user defined 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.label.emphasis.rich.<user defined 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.label.emphasis.rich.<user defined style name>.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "data.label.emphasis.rich.<user defined style name>.fontSize": "<p> font size</p>\n",
- "data.label.emphasis.rich.<user defined 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 use [...]
- "data.label.emphasis.rich.<user defined 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 pa [...]
- "data.label.emphasis.rich.<user defined 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.label.emphasis.rich.<user defined 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,\ [...]
- "data.label.emphasis.rich.<user defined style name>.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "data.label.emphasis.rich.<user defined style name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "data.label.emphasis.rich.<user defined style name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "data.label.emphasis.rich.<user defined 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 [...]
- "data.label.emphasis.rich.<user defined style name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "data.label.emphasis.rich.<user defined style name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "data.label.emphasis.rich.<user defined style name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "data.label.emphasis.rich.<user defined style name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "data.label.emphasis.rich.<user defined 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=\"codespa [...]
- "data.label.emphasis.rich.<user defined 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 [...]
- "data.label.emphasis.rich.<user defined style name>.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "data.label.emphasis.rich.<user defined style name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "data.label.emphasis.rich.<user defined style name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "data.label.emphasis.rich.<user defined style name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "data.label.emphasis.rich.<user defined style name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "data.label.emphasis.rich.<user defined style name>.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "data.itemStyle.color": "<p>Bar color..</p>\n",
- "data.itemStyle.barBorderColor": "<p>The border color of bar.</p>\n",
- "data.itemStyle.barBorderWidth": "<p>The border width of bar. defaults to have no border.</p>\n",
- "data.itemStyle.barBorderRadius": "<p>The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.</p>\n<p>For example:</p>\n<pre><code>barBorderRadius: 5, // consistently set the size of 4 rounded corners\nbarBorderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n</code></pre>",
- "data.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",
- "data.itemStyle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "data.itemStyle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "data.itemStyle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "data.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",
- "data.itemStyle.emphasis.color": "<p>Bar color..</p>\n",
- "data.itemStyle.emphasis.barBorderColor": "<p>The border color of bar.</p>\n",
- "data.itemStyle.emphasis.barBorderWidth": "<p>The border width of bar. defaults to have no border.</p>\n",
- "data.itemStyle.emphasis.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",
- "data.itemStyle.emphasis.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "data.itemStyle.emphasis.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "data.itemStyle.emphasis.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "data.itemStyle.emphasis.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.tooltip": "<p>tooltip settings in this series data.</p>\n",
- "data.tooltip.position": "<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">'item'</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which [...]
- "data.tooltip.formatter": "<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">'item'</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code> [...]
- "data.tooltip.backgroundColor": "<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">'item'</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip's floating layer.</p>\n",
- "data.tooltip.borderColor": "<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">'item'</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip's floating layer.</p>\n",
- "data.tooltip.borderWidth": "<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">'item'</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip's floating layer.</p>\n",
- "data.tooltip.padding": "<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">'item'</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip 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\np [...]
- "data.tooltip.textStyle": "<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">'item'</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip's floating layer.</p>\n",
- "data.tooltip.textStyle.color": "<p> text color.</p>\n",
- "data.tooltip.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.tooltip.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.tooltip.textStyle.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "data.tooltip.textStyle.fontSize": "<p> font size</p>\n",
- "data.tooltip.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.tooltip.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> [...]
- "data.tooltip.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=\"co [...]
- "data.tooltip.textStyle.textBorderColor": "<p>Storke color of the text.</p>\n",
- "data.tooltip.textStyle.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "data.tooltip.textStyle.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "data.tooltip.textStyle.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "data.tooltip.textStyle.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "data.tooltip.textStyle.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "data.tooltip.extraCssText": "<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">'item'</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n",
- "markPoint": "<p>Mark point in a chart.</p>\n",
- "markPoint.symbol": "<p>Symbol of .</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\">'none'</code></p>\n<p [...]
- "markPoint.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, p [...]
- "markPoint.symbolRotate": "<p>Rotate degree of symbol. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">'arrow'</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n",
- "markPoint.symbolKeepAspect": "<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n",
- "markPoint.symbolOffset": "<p>Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, '50%']</code> means to move upside side positi [...]
- "markPoint.silent": "<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n",
- "markPoint.label": "<p>Label of mark point.</p>\n",
- "markPoint.label.show": "<p>Whether to show label.</p>\n",
- "markPoint.label.position": "<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n< [...]
- "markPoint.label.distance": "<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>).</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n",
- "markPoint.label.rotate": "<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n",
- "markPoint.label.offset": "<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n",
- "markPoint.label.formatter": "<p>Data label formatter, which supports string template and 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>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n [...]
- "markPoint.label.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.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",
- "markPoint.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",
- "markPoint.label.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "markPoint.label.fontSize": "<p> font size</p>\n",
- "markPoint.label.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 cla [...]
- "markPoint.label.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 exampl [...]
- "markPoint.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",
- "markPoint.label.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 / [...]
- "markPoint.label.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.label.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "markPoint.label.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "markPoint.label.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>Not [...]
- "markPoint.label.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "markPoint.label.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "markPoint.label.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "markPoint.label.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "markPoint.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 c [...]
- "markPoint.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\ [...]
- "markPoint.label.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.label.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "markPoint.label.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "markPoint.label.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "markPoint.label.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "markPoint.label.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "markPoint.label.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 th [...]
- "markPoint.label.rich.<user defined style name>.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.label.rich.<user defined 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",
- "markPoint.label.rich.<user defined 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",
- "markPoint.label.rich.<user defined style name>.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "markPoint.label.rich.<user defined style name>.fontSize": "<p> font size</p>\n",
- "markPoint.label.rich.<user defined 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. F [...]
- "markPoint.label.rich.<user defined 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 [...]
- "markPoint.label.rich.<user defined 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",
- "markPoint.label.rich.<user defined 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 [...]
- "markPoint.label.rich.<user defined style name>.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.label.rich.<user defined style name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "markPoint.label.rich.<user defined style name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "markPoint.label.rich.<user defined 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, [...]
- "markPoint.label.rich.<user defined style name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "markPoint.label.rich.<user defined style name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "markPoint.label.rich.<user defined style name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "markPoint.label.rich.<user defined style name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "markPoint.label.rich.<user defined 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\"> [...]
- "markPoint.label.rich.<user defined 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</co [...]
- "markPoint.label.rich.<user defined style name>.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.label.rich.<user defined style name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "markPoint.label.rich.<user defined style name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "markPoint.label.rich.<user defined style name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "markPoint.label.rich.<user defined style name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "markPoint.label.rich.<user defined style name>.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "markPoint.label.emphasis.show": "<p>Whether to show label.</p>\n",
- "markPoint.label.emphasis.position": "<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\ [...]
- "markPoint.label.emphasis.distance": "<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>).</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n",
- "markPoint.label.emphasis.rotate": "<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n",
- "markPoint.label.emphasis.offset": "<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n",
- "markPoint.label.emphasis.formatter": "<p>Data label formatter, which supports string template and 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>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 [...]
- "markPoint.label.emphasis.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.label.emphasis.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",
- "markPoint.label.emphasis.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",
- "markPoint.label.emphasis.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "markPoint.label.emphasis.fontSize": "<p> font size</p>\n",
- "markPoint.label.emphasis.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> [...]
- "markPoint.label.emphasis.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. F [...]
- "markPoint.label.emphasis.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",
- "markPoint.label.emphasis.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 HTMLImageElemen [...]
- "markPoint.label.emphasis.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.label.emphasis.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "markPoint.label.emphasis.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "markPoint.label.emphasis.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 [...]
- "markPoint.label.emphasis.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "markPoint.label.emphasis.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "markPoint.label.emphasis.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "markPoint.label.emphasis.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "markPoint.label.emphasis.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< [...]
- "markPoint.label.emphasis.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=\" [...]
- "markPoint.label.emphasis.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.label.emphasis.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "markPoint.label.emphasis.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "markPoint.label.emphasis.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "markPoint.label.emphasis.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "markPoint.label.emphasis.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "markPoint.label.emphasis.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 appl [...]
- "markPoint.label.emphasis.rich.<user defined style name>.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.label.emphasis.rich.<user defined 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",
- "markPoint.label.emphasis.rich.<user defined 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",
- "markPoint.label.emphasis.rich.<user defined style name>.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "markPoint.label.emphasis.rich.<user defined style name>.fontSize": "<p> font size</p>\n",
- "markPoint.label.emphasis.rich.<user defined 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 b [...]
- "markPoint.label.emphasis.rich.<user defined 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> [...]
- "markPoint.label.emphasis.rich.<user defined 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",
- "markPoint.label.emphasis.rich.<user defined 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 data [...]
- "markPoint.label.emphasis.rich.<user defined style name>.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.label.emphasis.rich.<user defined style name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "markPoint.label.emphasis.rich.<user defined style name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "markPoint.label.emphasis.rich.<user defined 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: [...]
- "markPoint.label.emphasis.rich.<user defined style name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "markPoint.label.emphasis.rich.<user defined style name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "markPoint.label.emphasis.rich.<user defined style name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "markPoint.label.emphasis.rich.<user defined style name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "markPoint.label.emphasis.rich.<user defined 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=\"co [...]
- "markPoint.label.emphasis.rich.<user defined 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\"> [...]
- "markPoint.label.emphasis.rich.<user defined style name>.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.label.emphasis.rich.<user defined style name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "markPoint.label.emphasis.rich.<user defined style name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "markPoint.label.emphasis.rich.<user defined style name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "markPoint.label.emphasis.rich.<user defined style name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "markPoint.label.emphasis.rich.<user defined style name>.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "markPoint.itemStyle": "<p>Mark point style.</p>\n",
- "markPoint.itemStyle.color": "<p> 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=\"lan [...]
- "markPoint.itemStyle.borderColor": "<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n",
- "markPoint.itemStyle.borderWidth": "<p> border width. No border when it is set to be 0.</p>\n",
- "markPoint.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",
- "markPoint.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",
- "markPoint.itemStyle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "markPoint.itemStyle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "markPoint.itemStyle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "markPoint.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",
- "markPoint.itemStyle.emphasis.color": "<p> 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 cl [...]
- "markPoint.itemStyle.emphasis.borderColor": "<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n",
- "markPoint.itemStyle.emphasis.borderWidth": "<p> border width. No border when it is set to be 0.</p>\n",
- "markPoint.itemStyle.emphasis.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",
- "markPoint.itemStyle.emphasis.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",
- "markPoint.itemStyle.emphasis.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "markPoint.itemStyle.emphasis.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "markPoint.itemStyle.emphasis.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "markPoint.itemStyle.emphasis.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",
- "markPoint.data": "<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-bar.markPoint.data.x\">x</a>, <a href=\"#series-bar.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-bar.markPoint.data.coord\">coord</a> attribute, in which <code class=\" [...]
- "markPoint.data.name": "<p>Mark point name.</p>\n",
- "markPoint.data.type": "<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">'min'</code> maximum value.</li>\n<li><code class=\"codespan\">'max'</code> minimum value.</li>\n<li><code class=\"codespan\">'average'</code> average value.</li>\n</ul>\n",
- "markPoint.data.valueIndex": "<p>Available when using <a href=\"#series-bar.markPoint.data.type\">type</a> it is used to assign maximum value and minimum value in dimensions, it could be <code class=\"codespan\">0</code> (xAxis, radiusAxis), <code class=\"codespan\">1</code> (yAxis, angleAxis), and use the first value axis dimension by default.</p>\n",
- "markPoint.data.valueDim": "<p>Works only when <a href=\"#series-bar.markPoint.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n",
- "markPoint.data.coord": "<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code c [...]
- "markPoint.data.x": "<p>X position according to container, in pixel.</p>\n",
- "markPoint.data.y": "<p>Y position according to container, in pixel.</p>\n",
- "markPoint.data.value": "<p>Label value, which can be ignored.</p>\n",
- "markPoint.data.symbol": "<p>Symbol of .</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\">'none'</code></p [...]
- "markPoint.data.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",
- "markPoint.data.symbolRotate": "<p>Rotate degree of symbol. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">'arrow'</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n",
- "markPoint.data.symbolKeepAspect": "<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n",
- "markPoint.data.symbolOffset": "<p>Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, '50%']</code> means to move upside side p [...]
- "markPoint.data.itemStyle": "<p>Mark point style.</p>\n",
- "markPoint.data.itemStyle.color": "<p> 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= [...]
- "markPoint.data.itemStyle.borderColor": "<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n",
- "markPoint.data.itemStyle.borderWidth": "<p> border width. No border when it is set to be 0.</p>\n",
- "markPoint.data.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",
- "markPoint.data.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",
- "markPoint.data.itemStyle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "markPoint.data.itemStyle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "markPoint.data.itemStyle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "markPoint.data.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",
- "markPoint.data.itemStyle.emphasis.color": "<p> 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><co [...]
- "markPoint.data.itemStyle.emphasis.borderColor": "<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n",
- "markPoint.data.itemStyle.emphasis.borderWidth": "<p> border width. No border when it is set to be 0.</p>\n",
- "markPoint.data.itemStyle.emphasis.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",
- "markPoint.data.itemStyle.emphasis.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",
- "markPoint.data.itemStyle.emphasis.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "markPoint.data.itemStyle.emphasis.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "markPoint.data.itemStyle.emphasis.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "markPoint.data.itemStyle.emphasis.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",
- "markPoint.data.label.show": "<p>Whether to show label.</p>\n",
- "markPoint.data.label.position": "<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</l [...]
- "markPoint.data.label.distance": "<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>).</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n",
- "markPoint.data.label.rotate": "<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n",
- "markPoint.data.label.offset": "<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n",
- "markPoint.data.label.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.data.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",
- "markPoint.data.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",
- "markPoint.data.label.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "markPoint.data.label.fontSize": "<p> font size</p>\n",
- "markPoint.data.label.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><cod [...]
- "markPoint.data.label.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 e [...]
- "markPoint.data.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",
- "markPoint.data.label.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 [...]
- "markPoint.data.label.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.data.label.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "markPoint.data.label.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "markPoint.data.label.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< [...]
- "markPoint.data.label.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "markPoint.data.label.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "markPoint.data.label.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "markPoint.data.label.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "markPoint.data.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><c [...]
- "markPoint.data.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=\"code [...]
- "markPoint.data.label.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.data.label.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "markPoint.data.label.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "markPoint.data.label.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "markPoint.data.label.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "markPoint.data.label.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "markPoint.data.label.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 [...]
- "markPoint.data.label.rich.<user defined style name>.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.data.label.rich.<user defined 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",
- "markPoint.data.label.rich.<user defined 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",
- "markPoint.data.label.rich.<user defined style name>.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "markPoint.data.label.rich.<user defined style name>.fontSize": "<p> font size</p>\n",
- "markPoint.data.label.rich.<user defined 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 us [...]
- "markPoint.data.label.rich.<user defined 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 p [...]
- "markPoint.data.label.rich.<user defined 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",
- "markPoint.data.label.rich.<user defined 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, [...]
- "markPoint.data.label.rich.<user defined style name>.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.data.label.rich.<user defined style name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "markPoint.data.label.rich.<user defined style name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "markPoint.data.label.rich.<user defined 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, [...]
- "markPoint.data.label.rich.<user defined style name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "markPoint.data.label.rich.<user defined style name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "markPoint.data.label.rich.<user defined style name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "markPoint.data.label.rich.<user defined style name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "markPoint.data.label.rich.<user defined 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=\"codesp [...]
- "markPoint.data.label.rich.<user defined 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\">widt [...]
- "markPoint.data.label.rich.<user defined style name>.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.data.label.rich.<user defined style name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "markPoint.data.label.rich.<user defined style name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "markPoint.data.label.rich.<user defined style name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "markPoint.data.label.rich.<user defined style name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "markPoint.data.label.rich.<user defined style name>.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "markPoint.data.label.emphasis.show": "<p>Whether to show label.</p>\n",
- "markPoint.data.label.emphasis.position": "<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top' [...]
- "markPoint.data.label.emphasis.distance": "<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>).</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n",
- "markPoint.data.label.emphasis.rotate": "<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n",
- "markPoint.data.label.emphasis.offset": "<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n",
- "markPoint.data.label.emphasis.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.data.label.emphasis.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",
- "markPoint.data.label.emphasis.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",
- "markPoint.data.label.emphasis.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "markPoint.data.label.emphasis.fontSize": "<p> font size</p>\n",
- "markPoint.data.label.emphasis.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 [...]
- "markPoint.data.label.emphasis.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 us [...]
- "markPoint.data.label.emphasis.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",
- "markPoint.data.label.emphasis.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 HTMLImageE [...]
- "markPoint.data.label.emphasis.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.data.label.emphasis.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "markPoint.data.label.emphasis.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "markPoint.data.label.emphasis.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>\ [...]
- "markPoint.data.label.emphasis.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "markPoint.data.label.emphasis.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "markPoint.data.label.emphasis.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "markPoint.data.label.emphasis.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "markPoint.data.label.emphasis.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>.</ [...]
- "markPoint.data.label.emphasis.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 cla [...]
- "markPoint.data.label.emphasis.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.data.label.emphasis.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "markPoint.data.label.emphasis.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "markPoint.data.label.emphasis.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "markPoint.data.label.emphasis.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "markPoint.data.label.emphasis.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "markPoint.data.label.emphasis.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 [...]
- "markPoint.data.label.emphasis.rich.<user defined style name>.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.data.label.emphasis.rich.<user defined 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",
- "markPoint.data.label.emphasis.rich.<user defined 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",
- "markPoint.data.label.emphasis.rich.<user defined style name>.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "markPoint.data.label.emphasis.rich.<user defined style name>.fontSize": "<p> font size</p>\n",
- "markPoint.data.label.emphasis.rich.<user defined 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 w [...]
- "markPoint.data.label.emphasis.rich.<user defined 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</c [...]
- "markPoint.data.label.emphasis.rich.<user defined 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",
- "markPoint.data.label.emphasis.rich.<user defined 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 [...]
- "markPoint.data.label.emphasis.rich.<user defined style name>.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.data.label.emphasis.rich.<user defined style name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "markPoint.data.label.emphasis.rich.<user defined style name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "markPoint.data.label.emphasis.rich.<user defined 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\">padd [...]
- "markPoint.data.label.emphasis.rich.<user defined style name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "markPoint.data.label.emphasis.rich.<user defined style name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "markPoint.data.label.emphasis.rich.<user defined style name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "markPoint.data.label.emphasis.rich.<user defined style name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "markPoint.data.label.emphasis.rich.<user defined 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 [...]
- "markPoint.data.label.emphasis.rich.<user defined 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=\"codesp [...]
- "markPoint.data.label.emphasis.rich.<user defined style name>.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.data.label.emphasis.rich.<user defined style name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "markPoint.data.label.emphasis.rich.<user defined style name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "markPoint.data.label.emphasis.rich.<user defined style name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "markPoint.data.label.emphasis.rich.<user defined style name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "markPoint.data.label.emphasis.rich.<user defined style name>.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "markPoint.animation": "<p>Whether to enable animation.</p>\n",
- "markPoint.animationThreshold": "<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n",
- "markPoint.animationDuration": "<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n",
- "markPoint.animationEasing": "<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n",
- "markPoint.animationDelay": "<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n",
- "markPoint.animationDurationUpdate": "<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n",
- "markPoint.animationEasingUpdate": "<p>Easing method used for animation.</p>\n",
- "markPoint.animationDelayUpdate": "<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p [...]
- "markLine": "<p>Use a line in the chart to illustrate.</p>\n",
- "markLine.silent": "<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n",
- "markLine.symbol": "<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-bar.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n",
- "markLine.symbolSize": "<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class=\"codespan\">symbolSize</code>.</p>\n",
- "markLine.precision": "<p>Precison of marking line value, which is useful when displaying average value mark line.</p>\n",
- "markLine.label": "<p>Mark line text.</p>\n",
- "markLine.label.show": "<p>Whether show label or not.</p>\n",
- "markLine.label.position": "<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">'start'</code> starting point of the line.</li>\n<li><code class=\"codespan\">'middle'</code> middle point of the line.</li>\n<li><code class=\"codespan\">'end'</code> ending point of the line.</li>\n</ul>\n",
- "markLine.label.formatter": "<p>Data label formatter, which supports string template and 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>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n< [...]
- "markLine.label.emphasis.show": "<p>Whether show label or not.</p>\n",
- "markLine.label.emphasis.position": "<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">'start'</code> starting point of the line.</li>\n<li><code class=\"codespan\">'middle'</code> middle point of the line.</li>\n<li><code class=\"codespan\">'end'</code> ending point of the line.</li>\n</ul>\n",
- "markLine.label.emphasis.formatter": "<p>Data label formatter, which supports string template and 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>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item [...]
- "markLine.lineStyle": "<p>Mark line style.</p>\n",
- "markLine.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=\" [...]
- "markLine.lineStyle.width": "<p> line width.</p>\n",
- "markLine.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",
- "markLine.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",
- "markLine.lineStyle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "markLine.lineStyle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "markLine.lineStyle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "markLine.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",
- "markLine.lineStyle.curveness": "<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n",
- "markLine.lineStyle.emphasis.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 [...]
- "markLine.lineStyle.emphasis.width": "<p> line width.</p>\n",
- "markLine.lineStyle.emphasis.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",
- "markLine.lineStyle.emphasis.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",
- "markLine.lineStyle.emphasis.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "markLine.lineStyle.emphasis.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "markLine.lineStyle.emphasis.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "markLine.lineStyle.emphasis.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",
- "markLine.data": "<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-bar.markLine.data.0.x\">x</a>, <a href=\"#series-bar.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n [...]
- "markLine.data.0": "<p>Data of the starting point.</p>\n",
- "markLine.data.0.type": "<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">'min'</code> minimum value.</li>\n<li><code class=\"codespan\">'max'</code> maximum value.</li>\n<li><code class=\"codespan\">'average'</code> average value.</li>\n</ul>\n",
- "markLine.data.0.valueIndex": "<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class=\"codespan\">0</code> (for xAxis, or radiusAxis), or <code class=\"codespan\">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n",
- "markLine.data.0.valueDim": "<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n",
- "markLine.data.0.coord": "<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code [...]
- "markLine.data.0.name": "<p>Name of the marker, which will display as a label.</p>\n",
- "markLine.data.0.x": "<p>X position according to container, in pixel.</p>\n",
- "markLine.data.0.y": "<p>Y position according to container, in pixel.</p>\n",
- "markLine.data.0.value": "<p>Label value, which can be ignored.</p>\n",
- "markLine.data.0.symbol": "<p>Symbol of starting point.</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\">'none [...]
- "markLine.data.0.symbolSize": "<p>starting point 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",
- "markLine.data.0.symbolRotate": "<p>Rotate degree of starting point symbol. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">'arrow'</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n",
- "markLine.data.0.symbolKeepAspect": "<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n",
- "markLine.data.0.symbolOffset": "<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, '50%']</code> means to mov [...]
- "markLine.data.0.lineStyle": "<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n",
- "markLine.data.0.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 c [...]
- "markLine.data.0.lineStyle.width": "<p> line width.</p>\n",
- "markLine.data.0.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",
- "markLine.data.0.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",
- "markLine.data.0.lineStyle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "markLine.data.0.lineStyle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "markLine.data.0.lineStyle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "markLine.data.0.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",
- "markLine.data.0.lineStyle.curveness": "<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n",
- "markLine.data.0.lineStyle.emphasis.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<pr [...]
- "markLine.data.0.lineStyle.emphasis.width": "<p> line width.</p>\n",
- "markLine.data.0.lineStyle.emphasis.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",
- "markLine.data.0.lineStyle.emphasis.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",
- "markLine.data.0.lineStyle.emphasis.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "markLine.data.0.lineStyle.emphasis.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "markLine.data.0.lineStyle.emphasis.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "markLine.data.0.lineStyle.emphasis.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",
- "markLine.data.0.lineStyle.emphasis.curveness": "<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n",
- "markLine.data.0.label": "<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n",
- "markLine.data.0.label.show": "<p>Whether show label or not.</p>\n",
- "markLine.data.0.label.position": "<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">'start'</code> starting point of the line.</li>\n<li><code class=\"codespan\">'middle'</code> middle point of the line.</li>\n<li><code class=\"codespan\">'end'</code> ending point of the line.</li>\n</ul>\n",
- "markLine.data.0.label.formatter": "<p>Data label formatter, which supports string template and 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>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.< [...]
- "markLine.data.0.label.emphasis.show": "<p>Whether show label or not.</p>\n",
- "markLine.data.0.label.emphasis.position": "<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">'start'</code> starting point of the line.</li>\n<li><code class=\"codespan\">'middle'</code> middle point of the line.</li>\n<li><code class=\"codespan\">'end'</code> ending point of the line.</li>\n</ul>\n",
- "markLine.data.0.label.emphasis.formatter": "<p>Data label formatter, which supports string template and 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>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 da [...]
- "markLine.data.1": "<p>Data of the ending point.</p>\n",
- "markLine.data.1.type": "<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">'min'</code> minimum value.</li>\n<li><code class=\"codespan\">'max'</code> maximum value.</li>\n<li><code class=\"codespan\">'average'</code> average value.</li>\n</ul>\n",
- "markLine.data.1.valueIndex": "<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class=\"codespan\">0</code> (for xAxis, or radiusAxis), or <code class=\"codespan\">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n",
- "markLine.data.1.valueDim": "<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n",
- "markLine.data.1.coord": "<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code [...]
- "markLine.data.1.name": "<p>Name of the marker, which will display as a label.</p>\n",
- "markLine.data.1.x": "<p>X position according to container, in pixel.</p>\n",
- "markLine.data.1.y": "<p>Y position according to container, in pixel.</p>\n",
- "markLine.data.1.value": "<p>Label value, which can be ignored.</p>\n",
- "markLine.data.1.symbol": "<p>Symbol of ending point.</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\">'none&# [...]
- "markLine.data.1.symbolSize": "<p>ending point 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",
- "markLine.data.1.symbolRotate": "<p>Rotate degree of ending point symbol. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">'arrow'</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n",
- "markLine.data.1.symbolKeepAspect": "<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n",
- "markLine.data.1.symbolOffset": "<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, '50%']</code> means to move [...]
- "markLine.data.1.lineStyle": "<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n",
- "markLine.data.1.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 c [...]
- "markLine.data.1.lineStyle.width": "<p> line width.</p>\n",
- "markLine.data.1.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",
- "markLine.data.1.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",
- "markLine.data.1.lineStyle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "markLine.data.1.lineStyle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "markLine.data.1.lineStyle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "markLine.data.1.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",
- "markLine.data.1.lineStyle.curveness": "<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n",
- "markLine.data.1.lineStyle.emphasis.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<pr [...]
- "markLine.data.1.lineStyle.emphasis.width": "<p> line width.</p>\n",
- "markLine.data.1.lineStyle.emphasis.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",
- "markLine.data.1.lineStyle.emphasis.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",
- "markLine.data.1.lineStyle.emphasis.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "markLine.data.1.lineStyle.emphasis.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "markLine.data.1.lineStyle.emphasis.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "markLine.data.1.lineStyle.emphasis.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",
- "markLine.data.1.lineStyle.emphasis.curveness": "<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n",
- "markLine.data.1.label": "<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n",
- "markLine.data.1.label.show": "<p>Whether show label or not.</p>\n",
- "markLine.data.1.label.position": "<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">'start'</code> starting point of the line.</li>\n<li><code class=\"codespan\">'middle'</code> middle point of the line.</li>\n<li><code class=\"codespan\">'end'</code> ending point of the line.</li>\n</ul>\n",
- "markLine.data.1.label.formatter": "<p>Data label formatter, which supports string template and 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>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.< [...]
- "markLine.data.1.label.emphasis.show": "<p>Whether show label or not.</p>\n",
- "markLine.data.1.label.emphasis.position": "<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">'start'</code> starting point of the line.</li>\n<li><code class=\"codespan\">'middle'</code> middle point of the line.</li>\n<li><code class=\"codespan\">'end'</code> ending point of the line.</li>\n</ul>\n",
- "markLine.data.1.label.emphasis.formatter": "<p>Data label formatter, which supports string template and 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>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 da [...]
- "markLine.animation": "<p>Whether to enable animation.</p>\n",
- "markLine.animationThreshold": "<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n",
- "markLine.animationDuration": "<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n",
- "markLine.animationEasing": "<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n",
- "markLine.animationDelay": "<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n",
- "markLine.animationDurationUpdate": "<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n",
- "markLine.animationEasingUpdate": "<p>Easing method used for animation.</p>\n",
- "markLine.animationDelayUpdate": "<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n",
- "markArea": "<p>Used to mark an area in chart. For example, mark a time interval.</p>\n",
- "markArea.silent": "<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n",
- "markArea.label": "<p>Label in mark area.</p>\n",
- "markArea.label.show": "<p>Whether to show label.</p>\n",
- "markArea.label.position": "<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<l [...]
- "markArea.label.distance": "<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>).</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n",
- "markArea.label.rotate": "<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n",
- "markArea.label.offset": "<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n",
- "markArea.label.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.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",
- "markArea.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",
- "markArea.label.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "markArea.label.fontSize": "<p> font size</p>\n",
- "markArea.label.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 [...]
- "markArea.label.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 [...]
- "markArea.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",
- "markArea.label.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 // [...]
- "markArea.label.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.label.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "markArea.label.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "markArea.label.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 [...]
- "markArea.label.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "markArea.label.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "markArea.label.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "markArea.label.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "markArea.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 cl [...]
- "markArea.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\" [...]
- "markArea.label.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.label.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "markArea.label.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "markArea.label.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "markArea.label.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "markArea.label.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "markArea.label.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 [...]
- "markArea.label.rich.<user defined style name>.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.label.rich.<user defined 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",
- "markArea.label.rich.<user defined 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",
- "markArea.label.rich.<user defined style name>.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "markArea.label.rich.<user defined style name>.fontSize": "<p> font size</p>\n",
- "markArea.label.rich.<user defined 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. Fo [...]
- "markArea.label.rich.<user defined 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 [...]
- "markArea.label.rich.<user defined 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",
- "markArea.label.rich.<user defined 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 [...]
- "markArea.label.rich.<user defined style name>.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.label.rich.<user defined style name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "markArea.label.rich.<user defined style name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "markArea.label.rich.<user defined 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, [...]
- "markArea.label.rich.<user defined style name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "markArea.label.rich.<user defined style name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "markArea.label.rich.<user defined style name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "markArea.label.rich.<user defined style name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "markArea.label.rich.<user defined 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\">p [...]
- "markArea.label.rich.<user defined 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</cod [...]
- "markArea.label.rich.<user defined style name>.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.label.rich.<user defined style name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "markArea.label.rich.<user defined style name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "markArea.label.rich.<user defined style name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "markArea.label.rich.<user defined style name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "markArea.label.rich.<user defined style name>.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "markArea.label.emphasis.show": "<p>Whether to show label.</p>\n",
- "markArea.label.emphasis.position": "<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n [...]
- "markArea.label.emphasis.distance": "<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>).</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n",
- "markArea.label.emphasis.rotate": "<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n",
- "markArea.label.emphasis.offset": "<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n",
- "markArea.label.emphasis.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.label.emphasis.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",
- "markArea.label.emphasis.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",
- "markArea.label.emphasis.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "markArea.label.emphasis.fontSize": "<p> font size</p>\n",
- "markArea.label.emphasis.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>< [...]
- "markArea.label.emphasis.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. Fo [...]
- "markArea.label.emphasis.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",
- "markArea.label.emphasis.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 [...]
- "markArea.label.emphasis.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.label.emphasis.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "markArea.label.emphasis.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "markArea.label.emphasis.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> [...]
- "markArea.label.emphasis.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "markArea.label.emphasis.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "markArea.label.emphasis.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "markArea.label.emphasis.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "markArea.label.emphasis.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 [...]
- "markArea.label.emphasis.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=\"c [...]
- "markArea.label.emphasis.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.label.emphasis.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "markArea.label.emphasis.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "markArea.label.emphasis.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "markArea.label.emphasis.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "markArea.label.emphasis.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "markArea.label.emphasis.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 appli [...]
- "markArea.label.emphasis.rich.<user defined style name>.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.label.emphasis.rich.<user defined 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",
- "markArea.label.emphasis.rich.<user defined 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",
- "markArea.label.emphasis.rich.<user defined style name>.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "markArea.label.emphasis.rich.<user defined style name>.fontSize": "<p> font size</p>\n",
- "markArea.label.emphasis.rich.<user defined 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 [...]
- "markArea.label.emphasis.rich.<user defined 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> i [...]
- "markArea.label.emphasis.rich.<user defined 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",
- "markArea.label.emphasis.rich.<user defined 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 dataU [...]
- "markArea.label.emphasis.rich.<user defined style name>.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.label.emphasis.rich.<user defined style name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "markArea.label.emphasis.rich.<user defined style name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "markArea.label.emphasis.rich.<user defined 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: [ [...]
- "markArea.label.emphasis.rich.<user defined style name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "markArea.label.emphasis.rich.<user defined style name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "markArea.label.emphasis.rich.<user defined style name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "markArea.label.emphasis.rich.<user defined style name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "markArea.label.emphasis.rich.<user defined 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=\"cod [...]
- "markArea.label.emphasis.rich.<user defined 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\">w [...]
- "markArea.label.emphasis.rich.<user defined style name>.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.label.emphasis.rich.<user defined style name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "markArea.label.emphasis.rich.<user defined style name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "markArea.label.emphasis.rich.<user defined style name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "markArea.label.emphasis.rich.<user defined style name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "markArea.label.emphasis.rich.<user defined style name>.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "markArea.itemStyle": "<p>Style of the mark area.</p>\n",
- "markArea.itemStyle.color": "<p> 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 [...]
- "markArea.itemStyle.borderColor": "<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n",
- "markArea.itemStyle.borderWidth": "<p> border width. No border when it is set to be 0.</p>\n",
- "markArea.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",
- "markArea.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",
- "markArea.itemStyle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "markArea.itemStyle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "markArea.itemStyle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "markArea.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",
- "markArea.itemStyle.emphasis.color": "<p> 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 [...]
- "markArea.itemStyle.emphasis.borderColor": "<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n",
- "markArea.itemStyle.emphasis.borderWidth": "<p> border width. No border when it is set to be 0.</p>\n",
- "markArea.itemStyle.emphasis.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",
- "markArea.itemStyle.emphasis.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",
- "markArea.itemStyle.emphasis.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "markArea.itemStyle.emphasis.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "markArea.itemStyle.emphasis.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "markArea.itemStyle.emphasis.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",
- "markArea.data": "<p>The scope of the area is defined by <code class=\"codespan\">data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li><p>Specify the coordinate in screen coordinate system using <a href=\"#series-bar.markArea.data.0.x\">x</a>, <a href=\"#series-bar.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code class=\"codespan\">5</co [...]
- "markArea.data.0": "<p>Specify the left-top point.</p>\n",
- "markArea.data.0.type": "<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class=\"codespan\">'min'</code> max value.</li>\n<li><code class=\"codespan\">'max'</code> min value.</li>\n<li><code class=\"codespan\">'average'</code> average value.</li>\n</ul>\n",
- "markArea.data.0.valueIndex": "<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-.markArea.data.type\">type</a> used.\nThe value can be <code class=\"codespan\">0</code> (means xAxis, radiusAxis) or <code class=\"codespan\">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n",
- "markArea.data.0.valueDim": "<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class=\"codespan\">x</code>, <code class=\"codespan\">angle</code> in line chart, and <code class=\"codespan\">open</code>, <code class=\"codespan\">close</code> in candlestick).</p>\n",
- "markArea.data.0.coord": "<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code> on <a href=\"#grid\">cartesian</a>, or <code class=\"codespan\">radius</code>, <code class=\"codespan\">angle</code> on <a href=\"#polar\">polar</a>.</p>\n",
- "markArea.data.0.name": "<p>Name of the marker, which will display as a label.</p>\n",
- "markArea.data.0.x": "<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">'20%'</code>).</p>\n",
- "markArea.data.0.y": "<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">'20%'</code>).</p>\n",
- "markArea.data.0.value": "<p>value of the item, not necessary.</p>\n",
- "markArea.data.0.itemStyle": "<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n",
- "markArea.data.0.itemStyle.color": "<p> 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 [...]
- "markArea.data.0.itemStyle.borderColor": "<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n",
- "markArea.data.0.itemStyle.borderWidth": "<p> border width. No border when it is set to be 0.</p>\n",
- "markArea.data.0.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",
- "markArea.data.0.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",
- "markArea.data.0.itemStyle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "markArea.data.0.itemStyle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "markArea.data.0.itemStyle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "markArea.data.0.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",
- "markArea.data.0.itemStyle.emphasis.color": "<p> 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><c [...]
- "markArea.data.0.itemStyle.emphasis.borderColor": "<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n",
- "markArea.data.0.itemStyle.emphasis.borderWidth": "<p> border width. No border when it is set to be 0.</p>\n",
- "markArea.data.0.itemStyle.emphasis.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",
- "markArea.data.0.itemStyle.emphasis.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",
- "markArea.data.0.itemStyle.emphasis.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "markArea.data.0.itemStyle.emphasis.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "markArea.data.0.itemStyle.emphasis.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "markArea.data.0.itemStyle.emphasis.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",
- "markArea.data.0.label": "<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n",
- "markArea.data.0.label.show": "<p>Whether to show label.</p>\n",
- "markArea.data.0.label.position": "<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</ [...]
- "markArea.data.0.label.distance": "<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>).</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n",
- "markArea.data.0.label.rotate": "<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n",
- "markArea.data.0.label.offset": "<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n",
- "markArea.data.0.label.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.data.0.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",
- "markArea.data.0.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",
- "markArea.data.0.label.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "markArea.data.0.label.fontSize": "<p> font size</p>\n",
- "markArea.data.0.label.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><co [...]
- "markArea.data.0.label.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 [...]
- "markArea.data.0.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",
- "markArea.data.0.label.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,\ [...]
- "markArea.data.0.label.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.data.0.label.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "markArea.data.0.label.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "markArea.data.0.label.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 [...]
- "markArea.data.0.label.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "markArea.data.0.label.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "markArea.data.0.label.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "markArea.data.0.label.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "markArea.data.0.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>< [...]
- "markArea.data.0.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=\"cod [...]
- "markArea.data.0.label.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.data.0.label.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "markArea.data.0.label.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "markArea.data.0.label.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "markArea.data.0.label.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "markArea.data.0.label.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "markArea.data.0.label.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 [...]
- "markArea.data.0.label.rich.<user defined style name>.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.data.0.label.rich.<user defined 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",
- "markArea.data.0.label.rich.<user defined 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",
- "markArea.data.0.label.rich.<user defined style name>.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "markArea.data.0.label.rich.<user defined style name>.fontSize": "<p> font size</p>\n",
- "markArea.data.0.label.rich.<user defined 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 u [...]
- "markArea.data.0.label.rich.<user defined 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 [...]
- "markArea.data.0.label.rich.<user defined 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",
- "markArea.data.0.label.rich.<user defined 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 [...]
- "markArea.data.0.label.rich.<user defined style name>.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.data.0.label.rich.<user defined style name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "markArea.data.0.label.rich.<user defined style name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "markArea.data.0.label.rich.<user defined 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, [...]
- "markArea.data.0.label.rich.<user defined style name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "markArea.data.0.label.rich.<user defined style name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "markArea.data.0.label.rich.<user defined style name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "markArea.data.0.label.rich.<user defined style name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "markArea.data.0.label.rich.<user defined 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=\"codes [...]
- "markArea.data.0.label.rich.<user defined 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\">wid [...]
- "markArea.data.0.label.rich.<user defined style name>.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.data.0.label.rich.<user defined style name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "markArea.data.0.label.rich.<user defined style name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "markArea.data.0.label.rich.<user defined style name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "markArea.data.0.label.rich.<user defined style name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "markArea.data.0.label.rich.<user defined style name>.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "markArea.data.0.label.emphasis.show": "<p>Whether to show label.</p>\n",
- "markArea.data.0.label.emphasis.position": "<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top' [...]
- "markArea.data.0.label.emphasis.distance": "<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>).</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n",
- "markArea.data.0.label.emphasis.rotate": "<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n",
- "markArea.data.0.label.emphasis.offset": "<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n",
- "markArea.data.0.label.emphasis.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.data.0.label.emphasis.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",
- "markArea.data.0.label.emphasis.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",
- "markArea.data.0.label.emphasis.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "markArea.data.0.label.emphasis.fontSize": "<p> font size</p>\n",
- "markArea.data.0.label.emphasis.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>\ [...]
- "markArea.data.0.label.emphasis.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 u [...]
- "markArea.data.0.label.emphasis.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",
- "markArea.data.0.label.emphasis.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 HTMLImage [...]
- "markArea.data.0.label.emphasis.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.data.0.label.emphasis.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "markArea.data.0.label.emphasis.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "markArea.data.0.label.emphasis.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> [...]
- "markArea.data.0.label.emphasis.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "markArea.data.0.label.emphasis.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "markArea.data.0.label.emphasis.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "markArea.data.0.label.emphasis.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "markArea.data.0.label.emphasis.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>.< [...]
- "markArea.data.0.label.emphasis.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 cl [...]
- "markArea.data.0.label.emphasis.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.data.0.label.emphasis.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "markArea.data.0.label.emphasis.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "markArea.data.0.label.emphasis.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "markArea.data.0.label.emphasis.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "markArea.data.0.label.emphasis.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "markArea.data.0.label.emphasis.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" i [...]
- "markArea.data.0.label.emphasis.rich.<user defined style name>.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.data.0.label.emphasis.rich.<user defined 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",
- "markArea.data.0.label.emphasis.rich.<user defined 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",
- "markArea.data.0.label.emphasis.rich.<user defined style name>.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "markArea.data.0.label.emphasis.rich.<user defined style name>.fontSize": "<p> font size</p>\n",
- "markArea.data.0.label.emphasis.rich.<user defined 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 [...]
- "markArea.data.0.label.emphasis.rich.<user defined 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</ [...]
- "markArea.data.0.label.emphasis.rich.<user defined 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",
- "markArea.data.0.label.emphasis.rich.<user defined 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 // o [...]
- "markArea.data.0.label.emphasis.rich.<user defined style name>.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.data.0.label.emphasis.rich.<user defined style name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "markArea.data.0.label.emphasis.rich.<user defined style name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "markArea.data.0.label.emphasis.rich.<user defined 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\">pad [...]
- "markArea.data.0.label.emphasis.rich.<user defined style name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "markArea.data.0.label.emphasis.rich.<user defined style name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "markArea.data.0.label.emphasis.rich.<user defined style name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "markArea.data.0.label.emphasis.rich.<user defined style name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "markArea.data.0.label.emphasis.rich.<user defined 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 clas [...]
- "markArea.data.0.label.emphasis.rich.<user defined 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=\"codes [...]
- "markArea.data.0.label.emphasis.rich.<user defined style name>.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.data.0.label.emphasis.rich.<user defined style name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "markArea.data.0.label.emphasis.rich.<user defined style name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "markArea.data.0.label.emphasis.rich.<user defined style name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "markArea.data.0.label.emphasis.rich.<user defined style name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "markArea.data.0.label.emphasis.rich.<user defined style name>.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "markArea.data.1": "<p>Specify the right-bottom point.</p>\n",
- "markArea.data.1.type": "<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class=\"codespan\">'min'</code> max value.</li>\n<li><code class=\"codespan\">'max'</code> min value.</li>\n<li><code class=\"codespan\">'average'</code> average value.</li>\n</ul>\n",
- "markArea.data.1.valueIndex": "<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-.markArea.data.type\">type</a> used.\nThe value can be <code class=\"codespan\">0</code> (means xAxis, radiusAxis) or <code class=\"codespan\">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n",
- "markArea.data.1.valueDim": "<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class=\"codespan\">x</code>, <code class=\"codespan\">angle</code> in line chart, and <code class=\"codespan\">open</code>, <code class=\"codespan\">close</code> in candlestick).</p>\n",
- "markArea.data.1.coord": "<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code> on <a href=\"#grid\">cartesian</a>, or <code class=\"codespan\">radius</code>, <code class=\"codespan\">angle</code> on <a href=\"#polar\">polar</a>.</p>\n",
- "markArea.data.1.name": "<p>Name of the marker, which will display as a label.</p>\n",
- "markArea.data.1.x": "<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">'20%'</code>).</p>\n",
- "markArea.data.1.y": "<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">'20%'</code>).</p>\n",
- "markArea.data.1.value": "<p>value of the item, not necessary.</p>\n",
- "markArea.data.1.itemStyle": "<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n",
- "markArea.data.1.itemStyle.color": "<p> 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 [...]
- "markArea.data.1.itemStyle.borderColor": "<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n",
- "markArea.data.1.itemStyle.borderWidth": "<p> border width. No border when it is set to be 0.</p>\n",
- "markArea.data.1.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",
- "markArea.data.1.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",
- "markArea.data.1.itemStyle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "markArea.data.1.itemStyle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "markArea.data.1.itemStyle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "markArea.data.1.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",
- "markArea.data.1.itemStyle.emphasis.color": "<p> 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><c [...]
- "markArea.data.1.itemStyle.emphasis.borderColor": "<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n",
- "markArea.data.1.itemStyle.emphasis.borderWidth": "<p> border width. No border when it is set to be 0.</p>\n",
- "markArea.data.1.itemStyle.emphasis.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",
- "markArea.data.1.itemStyle.emphasis.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",
- "markArea.data.1.itemStyle.emphasis.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "markArea.data.1.itemStyle.emphasis.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "markArea.data.1.itemStyle.emphasis.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "markArea.data.1.itemStyle.emphasis.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",
- "markArea.data.1.label": "<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n",
- "markArea.data.1.label.show": "<p>Whether to show label.</p>\n",
- "markArea.data.1.label.position": "<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</ [...]
- "markArea.data.1.label.distance": "<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>).</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n",
- "markArea.data.1.label.rotate": "<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n",
- "markArea.data.1.label.offset": "<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n",
- "markArea.data.1.label.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.data.1.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",
- "markArea.data.1.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",
- "markArea.data.1.label.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "markArea.data.1.label.fontSize": "<p> font size</p>\n",
- "markArea.data.1.label.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><co [...]
- "markArea.data.1.label.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 [...]
- "markArea.data.1.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",
- "markArea.data.1.label.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,\ [...]
- "markArea.data.1.label.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.data.1.label.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "markArea.data.1.label.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "markArea.data.1.label.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 [...]
- "markArea.data.1.label.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "markArea.data.1.label.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "markArea.data.1.label.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "markArea.data.1.label.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "markArea.data.1.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>< [...]
- "markArea.data.1.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=\"cod [...]
- "markArea.data.1.label.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.data.1.label.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "markArea.data.1.label.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "markArea.data.1.label.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "markArea.data.1.label.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "markArea.data.1.label.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "markArea.data.1.label.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 [...]
- "markArea.data.1.label.rich.<user defined style name>.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.data.1.label.rich.<user defined 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",
- "markArea.data.1.label.rich.<user defined 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",
- "markArea.data.1.label.rich.<user defined style name>.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "markArea.data.1.label.rich.<user defined style name>.fontSize": "<p> font size</p>\n",
- "markArea.data.1.label.rich.<user defined 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 u [...]
- "markArea.data.1.label.rich.<user defined 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 [...]
- "markArea.data.1.label.rich.<user defined 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",
- "markArea.data.1.label.rich.<user defined 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 [...]
- "markArea.data.1.label.rich.<user defined style name>.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.data.1.label.rich.<user defined style name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "markArea.data.1.label.rich.<user defined style name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "markArea.data.1.label.rich.<user defined 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, [...]
- "markArea.data.1.label.rich.<user defined style name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "markArea.data.1.label.rich.<user defined style name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "markArea.data.1.label.rich.<user defined style name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "markArea.data.1.label.rich.<user defined style name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "markArea.data.1.label.rich.<user defined 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=\"codes [...]
- "markArea.data.1.label.rich.<user defined 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\">wid [...]
- "markArea.data.1.label.rich.<user defined style name>.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.data.1.label.rich.<user defined style name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "markArea.data.1.label.rich.<user defined style name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "markArea.data.1.label.rich.<user defined style name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "markArea.data.1.label.rich.<user defined style name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "markArea.data.1.label.rich.<user defined style name>.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "markArea.data.1.label.emphasis.show": "<p>Whether to show label.</p>\n",
- "markArea.data.1.label.emphasis.position": "<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top' [...]
- "markArea.data.1.label.emphasis.distance": "<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>).</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n",
- "markArea.data.1.label.emphasis.rotate": "<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n",
- "markArea.data.1.label.emphasis.offset": "<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n",
- "markArea.data.1.label.emphasis.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.data.1.label.emphasis.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",
- "markArea.data.1.label.emphasis.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",
- "markArea.data.1.label.emphasis.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "markArea.data.1.label.emphasis.fontSize": "<p> font size</p>\n",
- "markArea.data.1.label.emphasis.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>\ [...]
- "markArea.data.1.label.emphasis.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 u [...]
- "markArea.data.1.label.emphasis.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",
- "markArea.data.1.label.emphasis.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 HTMLImage [...]
- "markArea.data.1.label.emphasis.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.data.1.label.emphasis.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "markArea.data.1.label.emphasis.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "markArea.data.1.label.emphasis.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> [...]
- "markArea.data.1.label.emphasis.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "markArea.data.1.label.emphasis.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "markArea.data.1.label.emphasis.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "markArea.data.1.label.emphasis.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "markArea.data.1.label.emphasis.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>.< [...]
- "markArea.data.1.label.emphasis.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 cl [...]
- "markArea.data.1.label.emphasis.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.data.1.label.emphasis.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "markArea.data.1.label.emphasis.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "markArea.data.1.label.emphasis.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "markArea.data.1.label.emphasis.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "markArea.data.1.label.emphasis.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "markArea.data.1.label.emphasis.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" i [...]
- "markArea.data.1.label.emphasis.rich.<user defined style name>.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.data.1.label.emphasis.rich.<user defined 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",
- "markArea.data.1.label.emphasis.rich.<user defined 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",
- "markArea.data.1.label.emphasis.rich.<user defined style name>.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "markArea.data.1.label.emphasis.rich.<user defined style name>.fontSize": "<p> font size</p>\n",
- "markArea.data.1.label.emphasis.rich.<user defined 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 [...]
- "markArea.data.1.label.emphasis.rich.<user defined 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</ [...]
- "markArea.data.1.label.emphasis.rich.<user defined 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",
- "markArea.data.1.label.emphasis.rich.<user defined 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 // o [...]
- "markArea.data.1.label.emphasis.rich.<user defined style name>.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.data.1.label.emphasis.rich.<user defined style name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "markArea.data.1.label.emphasis.rich.<user defined style name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "markArea.data.1.label.emphasis.rich.<user defined 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\">pad [...]
- "markArea.data.1.label.emphasis.rich.<user defined style name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "markArea.data.1.label.emphasis.rich.<user defined style name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "markArea.data.1.label.emphasis.rich.<user defined style name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "markArea.data.1.label.emphasis.rich.<user defined style name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "markArea.data.1.label.emphasis.rich.<user defined 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 clas [...]
- "markArea.data.1.label.emphasis.rich.<user defined 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=\"codes [...]
- "markArea.data.1.label.emphasis.rich.<user defined style name>.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.data.1.label.emphasis.rich.<user defined style name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "markArea.data.1.label.emphasis.rich.<user defined style name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "markArea.data.1.label.emphasis.rich.<user defined style name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "markArea.data.1.label.emphasis.rich.<user defined style name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "markArea.data.1.label.emphasis.rich.<user defined style name>.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "markArea.animation": "<p>Whether to enable animation.</p>\n",
- "markArea.animationThreshold": "<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n",
- "markArea.animationDuration": "<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n",
- "markArea.animationEasing": "<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n",
- "markArea.animationDelay": "<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n",
- "markArea.animationDurationUpdate": "<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n",
- "markArea.animationEasingUpdate": "<p>Easing method used for animation.</p>\n",
- "markArea.animationDelayUpdate": "<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n",
- "clip": "<blockquote>\n<p>Since 4.4.0</p>\n</blockquote>\n<p>If clip the overflow on the coordinate system. Clip results varies between series:</p>\n<ul>\n<li>Scatter：Ignore the symbols exceeds the coordinate system. Not clip the graphics.</li>\n<li>Bar：Clip all the overflowed. With bar width kept.</li>\n<li>Line：Clip the overflowed line.</li>\n<li>Lines: Clip all the overflowed.</li>\n<li>Custom: Clip all the olverflowed.</li>\n</ul>\n<p>All these series have default value <code class [...]
- "zlevel": "<p><code class=\"codespan\">zlevel</code> value of all graphical elements in bar chart.</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 [...]
- "z": "<p><code class=\"codespan\">z</code> value of all graphical elements in bar chart, 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",
- "animation": "<p>Whether to enable animation.</p>\n",
- "animationThreshold": "<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n",
- "animationDuration": "<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n",
- "animationEasing": "<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n",
- "animationDelay": "<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n",
- "animationDurationUpdate": "<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n",
- "animationEasingUpdate": "<p>Easing method used for animation.</p>\n",
- "animationDelayUpdate": "<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n",
- "tooltip": "<p>tooltip settings in this series.</p>\n",
- "tooltip.position": "<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">'item'</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p> Display the position of tooltip's floating layer through array, whi [...]
- "tooltip.formatter": "<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">'item'</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</co [...]
- "tooltip.backgroundColor": "<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">'item'</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip's floating layer.</p>\n",
- "tooltip.borderColor": "<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">'item'</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip's floating layer.</p>\n",
- "tooltip.borderWidth": "<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">'item'</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip's floating layer.</p>\n",
- "tooltip.padding": "<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">'item'</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip 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 [...]
- "tooltip.textStyle": "<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">'item'</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip's floating layer.</p>\n",
- "tooltip.textStyle.color": "<p> text color.</p>\n",
- "tooltip.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",
- "tooltip.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",
- "tooltip.textStyle.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "tooltip.textStyle.fontSize": "<p> font size</p>\n",
- "tooltip.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",
- "tooltip.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 [...]
- "tooltip.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=\"codespa [...]
- "tooltip.textStyle.textBorderColor": "<p>Storke color of the text.</p>\n",
- "tooltip.textStyle.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "tooltip.textStyle.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "tooltip.textStyle.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "tooltip.textStyle.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "tooltip.textStyle.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "tooltip.extraCssText": "<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">'item'</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"
-}
\ No newline at end of file
diff --git a/public/en/documents/option-parts/option.series-boxplot.json b/public/en/documents/option-parts/option.series-boxplot.json
deleted file mode 100644
index d529f69..0000000
--- a/public/en/documents/option-parts/option.series-boxplot.json
+++ /dev/null
@@ -1,942 +0,0 @@
-{
- "id": "<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n",
- "coordinateSystem": "<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class=\"codespan\">'cartesian2d'</code></p>\n<p> Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-cartesian2d.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-cartesian2d.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n",
- "xAxisIndex": "<p>Index of <a href=\"#xAxis\">x axis</a> to combine with, which is useful for multiple x axes in one chart.</p>\n",
- "yAxisIndex": "<p>Index of <a href=\"#yAxis\">y axis</a> to combine with, which is useful for multiple y axes in one chart.</p>\n",
- "name": "<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n",
- "legendHoverLink": "<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n",
- "hoverAnimation": "<p>Whether to enable the animation when hovering on box.</p>\n",
- "layout": "<p>Layout methods, whose optional values are:</p>\n<ul>\n<li><p><code class=\"codespan\">'horizontal'</code>: horizontally layout all boxes.</p>\n</li>\n<li><p><code class=\"codespan\">'vertical'</code>: vertically layout all boxes.</p>\n</li>\n</ul>\n<p>The default value is decided by:</p>\n<ul>\n<li>if there is a <code class=\"codespan\">category</code> axis:<ul>\n<li>if it is horizontal, use <code class=\"codespan\">'horizontal'</code>;</li>\n<li>o [...]
- "boxWidth": "<p>Up and bottom boundary of box width. The array is in the form of <code class=\"codespan\">[min, max]</code>.</p>\n<p>It could be absolute value in pixel, such as <code class=\"codespan\">[7, 50]</code>, or percentage, such as <code class=\"codespan\">['40%', '90%']</code>. The percentage means the percentage to the maximum possible width.</p>\n",
- "itemStyle.color": "<p>boxplot color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </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 tex [...]
- "itemStyle.borderColor": "<p>boxplot border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n",
- "itemStyle.borderWidth": "<p>boxplot 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",
- "emphasis.itemStyle.color": "<p>boxplot color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </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 colo [...]
- "emphasis.itemStyle.borderColor": "<p>boxplot border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n",
- "emphasis.itemStyle.borderWidth": "<p>boxplot border width. No border when it is set to be 0.</p>\n",
- "emphasis.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",
- "emphasis.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",
- "emphasis.itemStyle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "emphasis.itemStyle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "emphasis.itemStyle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "emphasis.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",
- "dimensions": "<p><code class=\"codespan\">dimensions</code> can be used to define dimension info for <code class=\"codespan\">series.data</code> or <code class=\"codespan\">dataset.source</code>.</p>\n<p>Notice: if <a href=\"#dataset\">dataset</a> is used, we can provide dimension names in the first column/row of <a href=\"#dataset.source\">dataset.source</a>, and not need to specify <code class=\"codespan\">dimensions</code> here. But if <code class=\"codespan\">dimensions</code> is [...]
- "encode": "<p>Define what is encoded to for each dimension of <code class=\"codespan\">data</code>. For example:</p>\n<pre><code class=\"lang-js\">option = {\n dataset: {\n source: [\n // Each column is called a dimension.\n // There are five dimensions: 0, 1, 2, 3, 4.\n [12, 44, 55, 66, 2],\n [23, 6, 16, 23, 1],\n ...\n ]\n },\n series: {\n type: 'xxx',\n encode: {\n x: [3, 1 [...]
- "data": "<p>Data should be the two-dimensional array shown as follow.</p>\n<pre><code class=\"lang-javascript\">[\n [655, 850, 940, 980, 1175],\n [672.5, 800, 845, 885, 1012.5],\n [780, 840, 855, 880, 940],\n [621.25, 767.5, 815, 865, 1011.25],\n { // the data item could also be an Object, so that it could contains special settings for this data item.\n value: [713.75, 807.5, 810, 870, 963.75],\n itemStyle: {...}\n },\n ...\n]\n</code></pre>\n<p>Every [...]
- "data.name": "<p>Name of data item.</p>\n",
- "data.value": "<p>Value of data item.</p>\n<pre><code class=\"lang-javascript\">[min, Q1, median (or Q2), Q3, max]\n</code></pre>\n",
- "data.itemStyle.color": "<p>boxplot color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </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 an [...]
- "data.itemStyle.borderColor": "<p>boxplot border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n",
- "data.itemStyle.borderWidth": "<p>boxplot border width. No border when it is set to be 0.</p>\n",
- "data.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",
- "data.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",
- "data.itemStyle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "data.itemStyle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "data.itemStyle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "data.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",
- "data.emphasis.itemStyle.color": "<p>boxplot color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </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 [...]
- "data.emphasis.itemStyle.borderColor": "<p>boxplot border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n",
- "data.emphasis.itemStyle.borderWidth": "<p>boxplot border width. No border when it is set to be 0.</p>\n",
- "data.emphasis.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",
- "data.emphasis.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",
- "data.emphasis.itemStyle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "data.emphasis.itemStyle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "data.emphasis.itemStyle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "data.emphasis.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",
- "data.tooltip": "<p>tooltip settings in this series data.</p>\n",
- "data.tooltip.position": "<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">'item'</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which [...]
- "data.tooltip.formatter": "<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">'item'</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code> [...]
- "data.tooltip.backgroundColor": "<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">'item'</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip's floating layer.</p>\n",
- "data.tooltip.borderColor": "<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">'item'</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip's floating layer.</p>\n",
- "data.tooltip.borderWidth": "<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">'item'</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip's floating layer.</p>\n",
- "data.tooltip.padding": "<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">'item'</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip 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\np [...]
- "data.tooltip.textStyle": "<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">'item'</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip's floating layer.</p>\n",
- "data.tooltip.textStyle.color": "<p> text color.</p>\n",
- "data.tooltip.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.tooltip.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.tooltip.textStyle.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "data.tooltip.textStyle.fontSize": "<p> font size</p>\n",
- "data.tooltip.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.tooltip.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> [...]
- "data.tooltip.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=\"co [...]
- "data.tooltip.textStyle.textBorderColor": "<p>Storke color of the text.</p>\n",
- "data.tooltip.textStyle.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "data.tooltip.textStyle.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "data.tooltip.textStyle.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "data.tooltip.textStyle.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "data.tooltip.textStyle.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "data.tooltip.extraCssText": "<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">'item'</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n",
- "markPoint": "<p>Mark point in a chart.</p>\n",
- "markPoint.symbol": "<p>Symbol of .</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\">'none'</code></p>\n<p [...]
- "markPoint.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, p [...]
- "markPoint.symbolRotate": "<p>Rotate degree of symbol. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">'arrow'</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n",
- "markPoint.symbolKeepAspect": "<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n",
- "markPoint.symbolOffset": "<p>Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, '50%']</code> means to move upside side positi [...]
- "markPoint.silent": "<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n",
- "markPoint.label": "<p>Label of mark point.</p>\n",
- "markPoint.label.show": "<p>Whether to show label.</p>\n",
- "markPoint.label.position": "<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n< [...]
- "markPoint.label.distance": "<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>).</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n",
- "markPoint.label.rotate": "<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n",
- "markPoint.label.offset": "<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n",
- "markPoint.label.formatter": "<p>Data label formatter, which supports string template and 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>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n [...]
- "markPoint.label.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.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",
- "markPoint.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",
- "markPoint.label.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "markPoint.label.fontSize": "<p> font size</p>\n",
- "markPoint.label.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 cla [...]
- "markPoint.label.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 exampl [...]
- "markPoint.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",
- "markPoint.label.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 / [...]
- "markPoint.label.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.label.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "markPoint.label.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "markPoint.label.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>Not [...]
- "markPoint.label.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "markPoint.label.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "markPoint.label.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "markPoint.label.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "markPoint.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 c [...]
- "markPoint.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\ [...]
- "markPoint.label.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.label.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "markPoint.label.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "markPoint.label.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "markPoint.label.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "markPoint.label.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "markPoint.label.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 th [...]
- "markPoint.label.rich.<user defined style name>.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.label.rich.<user defined 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",
- "markPoint.label.rich.<user defined 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",
- "markPoint.label.rich.<user defined style name>.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "markPoint.label.rich.<user defined style name>.fontSize": "<p> font size</p>\n",
- "markPoint.label.rich.<user defined 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. F [...]
- "markPoint.label.rich.<user defined 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 [...]
- "markPoint.label.rich.<user defined 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",
- "markPoint.label.rich.<user defined 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 [...]
- "markPoint.label.rich.<user defined style name>.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.label.rich.<user defined style name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "markPoint.label.rich.<user defined style name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "markPoint.label.rich.<user defined 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, [...]
- "markPoint.label.rich.<user defined style name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "markPoint.label.rich.<user defined style name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "markPoint.label.rich.<user defined style name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "markPoint.label.rich.<user defined style name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "markPoint.label.rich.<user defined 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\"> [...]
- "markPoint.label.rich.<user defined 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</co [...]
- "markPoint.label.rich.<user defined style name>.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.label.rich.<user defined style name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "markPoint.label.rich.<user defined style name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "markPoint.label.rich.<user defined style name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "markPoint.label.rich.<user defined style name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "markPoint.label.rich.<user defined style name>.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "markPoint.label.emphasis.show": "<p>Whether to show label.</p>\n",
- "markPoint.label.emphasis.position": "<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\ [...]
- "markPoint.label.emphasis.distance": "<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>).</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n",
- "markPoint.label.emphasis.rotate": "<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n",
- "markPoint.label.emphasis.offset": "<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n",
- "markPoint.label.emphasis.formatter": "<p>Data label formatter, which supports string template and 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>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 [...]
- "markPoint.label.emphasis.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.label.emphasis.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",
- "markPoint.label.emphasis.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",
- "markPoint.label.emphasis.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "markPoint.label.emphasis.fontSize": "<p> font size</p>\n",
- "markPoint.label.emphasis.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> [...]
- "markPoint.label.emphasis.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. F [...]
- "markPoint.label.emphasis.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",
- "markPoint.label.emphasis.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 HTMLImageElemen [...]
- "markPoint.label.emphasis.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.label.emphasis.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "markPoint.label.emphasis.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "markPoint.label.emphasis.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 [...]
- "markPoint.label.emphasis.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "markPoint.label.emphasis.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "markPoint.label.emphasis.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "markPoint.label.emphasis.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "markPoint.label.emphasis.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< [...]
- "markPoint.label.emphasis.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=\" [...]
- "markPoint.label.emphasis.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.label.emphasis.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "markPoint.label.emphasis.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "markPoint.label.emphasis.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "markPoint.label.emphasis.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "markPoint.label.emphasis.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "markPoint.label.emphasis.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 appl [...]
- "markPoint.label.emphasis.rich.<user defined style name>.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.label.emphasis.rich.<user defined 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",
- "markPoint.label.emphasis.rich.<user defined 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",
- "markPoint.label.emphasis.rich.<user defined style name>.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "markPoint.label.emphasis.rich.<user defined style name>.fontSize": "<p> font size</p>\n",
- "markPoint.label.emphasis.rich.<user defined 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 b [...]
- "markPoint.label.emphasis.rich.<user defined 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> [...]
- "markPoint.label.emphasis.rich.<user defined 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",
- "markPoint.label.emphasis.rich.<user defined 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 data [...]
- "markPoint.label.emphasis.rich.<user defined style name>.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.label.emphasis.rich.<user defined style name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "markPoint.label.emphasis.rich.<user defined style name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "markPoint.label.emphasis.rich.<user defined 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: [...]
- "markPoint.label.emphasis.rich.<user defined style name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "markPoint.label.emphasis.rich.<user defined style name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "markPoint.label.emphasis.rich.<user defined style name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "markPoint.label.emphasis.rich.<user defined style name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "markPoint.label.emphasis.rich.<user defined 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=\"co [...]
- "markPoint.label.emphasis.rich.<user defined 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\"> [...]
- "markPoint.label.emphasis.rich.<user defined style name>.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.label.emphasis.rich.<user defined style name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "markPoint.label.emphasis.rich.<user defined style name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "markPoint.label.emphasis.rich.<user defined style name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "markPoint.label.emphasis.rich.<user defined style name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "markPoint.label.emphasis.rich.<user defined style name>.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "markPoint.itemStyle": "<p>Mark point style.</p>\n",
- "markPoint.itemStyle.color": "<p> 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=\"lan [...]
- "markPoint.itemStyle.borderColor": "<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n",
- "markPoint.itemStyle.borderWidth": "<p> border width. No border when it is set to be 0.</p>\n",
- "markPoint.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",
- "markPoint.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",
- "markPoint.itemStyle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "markPoint.itemStyle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "markPoint.itemStyle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "markPoint.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",
- "markPoint.itemStyle.emphasis.color": "<p> 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 cl [...]
- "markPoint.itemStyle.emphasis.borderColor": "<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n",
- "markPoint.itemStyle.emphasis.borderWidth": "<p> border width. No border when it is set to be 0.</p>\n",
- "markPoint.itemStyle.emphasis.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",
- "markPoint.itemStyle.emphasis.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",
- "markPoint.itemStyle.emphasis.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "markPoint.itemStyle.emphasis.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "markPoint.itemStyle.emphasis.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "markPoint.itemStyle.emphasis.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",
- "markPoint.data": "<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-boxplot.markPoint.data.x\">x</a>, <a href=\"#series-boxplot.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-boxplot.markPoint.data.coord\">coord</a> attribute, in which <c [...]
- "markPoint.data.name": "<p>Mark point name.</p>\n",
- "markPoint.data.type": "<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">'min'</code> maximum value.</li>\n<li><code class=\"codespan\">'max'</code> minimum value.</li>\n<li><code class=\"codespan\">'average'</code> average value.</li>\n</ul>\n",
- "markPoint.data.valueIndex": "<p>Available when using <a href=\"#series-boxplot.markPoint.data.type\">type</a> it is used to assign maximum value and minimum value in dimensions, it could be <code class=\"codespan\">0</code> (xAxis, radiusAxis), <code class=\"codespan\">1</code> (yAxis, angleAxis), and use the first value axis dimension by default.</p>\n",
- "markPoint.data.valueDim": "<p>Works only when <a href=\"#series-boxplot.markPoint.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n",
- "markPoint.data.coord": "<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code c [...]
- "markPoint.data.x": "<p>X position according to container, in pixel.</p>\n",
- "markPoint.data.y": "<p>Y position according to container, in pixel.</p>\n",
- "markPoint.data.value": "<p>Label value, which can be ignored.</p>\n",
- "markPoint.data.symbol": "<p>Symbol of .</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\">'none'</code></p [...]
- "markPoint.data.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",
- "markPoint.data.symbolRotate": "<p>Rotate degree of symbol. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">'arrow'</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n",
- "markPoint.data.symbolKeepAspect": "<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n",
- "markPoint.data.symbolOffset": "<p>Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, '50%']</code> means to move upside side p [...]
- "markPoint.data.itemStyle": "<p>Mark point style.</p>\n",
- "markPoint.data.itemStyle.color": "<p> 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= [...]
- "markPoint.data.itemStyle.borderColor": "<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n",
- "markPoint.data.itemStyle.borderWidth": "<p> border width. No border when it is set to be 0.</p>\n",
- "markPoint.data.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",
- "markPoint.data.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",
- "markPoint.data.itemStyle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "markPoint.data.itemStyle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "markPoint.data.itemStyle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "markPoint.data.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",
- "markPoint.data.itemStyle.emphasis.color": "<p> 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><co [...]
- "markPoint.data.itemStyle.emphasis.borderColor": "<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n",
- "markPoint.data.itemStyle.emphasis.borderWidth": "<p> border width. No border when it is set to be 0.</p>\n",
- "markPoint.data.itemStyle.emphasis.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",
- "markPoint.data.itemStyle.emphasis.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",
- "markPoint.data.itemStyle.emphasis.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "markPoint.data.itemStyle.emphasis.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "markPoint.data.itemStyle.emphasis.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "markPoint.data.itemStyle.emphasis.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",
- "markPoint.data.label.show": "<p>Whether to show label.</p>\n",
- "markPoint.data.label.position": "<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</l [...]
- "markPoint.data.label.distance": "<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>).</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n",
- "markPoint.data.label.rotate": "<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n",
- "markPoint.data.label.offset": "<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n",
- "markPoint.data.label.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.data.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",
- "markPoint.data.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",
- "markPoint.data.label.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "markPoint.data.label.fontSize": "<p> font size</p>\n",
- "markPoint.data.label.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><cod [...]
- "markPoint.data.label.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 e [...]
- "markPoint.data.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",
- "markPoint.data.label.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 [...]
- "markPoint.data.label.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.data.label.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "markPoint.data.label.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "markPoint.data.label.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< [...]
- "markPoint.data.label.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "markPoint.data.label.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "markPoint.data.label.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "markPoint.data.label.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "markPoint.data.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><c [...]
- "markPoint.data.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=\"code [...]
- "markPoint.data.label.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.data.label.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "markPoint.data.label.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "markPoint.data.label.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "markPoint.data.label.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "markPoint.data.label.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "markPoint.data.label.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 [...]
- "markPoint.data.label.rich.<user defined style name>.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.data.label.rich.<user defined 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",
- "markPoint.data.label.rich.<user defined 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",
- "markPoint.data.label.rich.<user defined style name>.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "markPoint.data.label.rich.<user defined style name>.fontSize": "<p> font size</p>\n",
- "markPoint.data.label.rich.<user defined 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 us [...]
- "markPoint.data.label.rich.<user defined 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 p [...]
- "markPoint.data.label.rich.<user defined 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",
- "markPoint.data.label.rich.<user defined 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, [...]
- "markPoint.data.label.rich.<user defined style name>.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.data.label.rich.<user defined style name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "markPoint.data.label.rich.<user defined style name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "markPoint.data.label.rich.<user defined 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, [...]
- "markPoint.data.label.rich.<user defined style name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "markPoint.data.label.rich.<user defined style name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "markPoint.data.label.rich.<user defined style name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "markPoint.data.label.rich.<user defined style name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "markPoint.data.label.rich.<user defined 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=\"codesp [...]
- "markPoint.data.label.rich.<user defined 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\">widt [...]
- "markPoint.data.label.rich.<user defined style name>.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.data.label.rich.<user defined style name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "markPoint.data.label.rich.<user defined style name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "markPoint.data.label.rich.<user defined style name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "markPoint.data.label.rich.<user defined style name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "markPoint.data.label.rich.<user defined style name>.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "markPoint.data.label.emphasis.show": "<p>Whether to show label.</p>\n",
- "markPoint.data.label.emphasis.position": "<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top' [...]
- "markPoint.data.label.emphasis.distance": "<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>).</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n",
- "markPoint.data.label.emphasis.rotate": "<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n",
- "markPoint.data.label.emphasis.offset": "<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n",
- "markPoint.data.label.emphasis.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.data.label.emphasis.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",
- "markPoint.data.label.emphasis.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",
- "markPoint.data.label.emphasis.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "markPoint.data.label.emphasis.fontSize": "<p> font size</p>\n",
- "markPoint.data.label.emphasis.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 [...]
- "markPoint.data.label.emphasis.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 us [...]
- "markPoint.data.label.emphasis.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",
- "markPoint.data.label.emphasis.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 HTMLImageE [...]
- "markPoint.data.label.emphasis.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.data.label.emphasis.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "markPoint.data.label.emphasis.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "markPoint.data.label.emphasis.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>\ [...]
- "markPoint.data.label.emphasis.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "markPoint.data.label.emphasis.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "markPoint.data.label.emphasis.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "markPoint.data.label.emphasis.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "markPoint.data.label.emphasis.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>.</ [...]
- "markPoint.data.label.emphasis.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 cla [...]
- "markPoint.data.label.emphasis.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.data.label.emphasis.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "markPoint.data.label.emphasis.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "markPoint.data.label.emphasis.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "markPoint.data.label.emphasis.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "markPoint.data.label.emphasis.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "markPoint.data.label.emphasis.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 [...]
- "markPoint.data.label.emphasis.rich.<user defined style name>.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.data.label.emphasis.rich.<user defined 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",
- "markPoint.data.label.emphasis.rich.<user defined 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",
- "markPoint.data.label.emphasis.rich.<user defined style name>.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "markPoint.data.label.emphasis.rich.<user defined style name>.fontSize": "<p> font size</p>\n",
- "markPoint.data.label.emphasis.rich.<user defined 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 w [...]
- "markPoint.data.label.emphasis.rich.<user defined 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</c [...]
- "markPoint.data.label.emphasis.rich.<user defined 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",
- "markPoint.data.label.emphasis.rich.<user defined 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 [...]
- "markPoint.data.label.emphasis.rich.<user defined style name>.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.data.label.emphasis.rich.<user defined style name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "markPoint.data.label.emphasis.rich.<user defined style name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "markPoint.data.label.emphasis.rich.<user defined 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\">padd [...]
- "markPoint.data.label.emphasis.rich.<user defined style name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "markPoint.data.label.emphasis.rich.<user defined style name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "markPoint.data.label.emphasis.rich.<user defined style name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "markPoint.data.label.emphasis.rich.<user defined style name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "markPoint.data.label.emphasis.rich.<user defined 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 [...]
- "markPoint.data.label.emphasis.rich.<user defined 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=\"codesp [...]
- "markPoint.data.label.emphasis.rich.<user defined style name>.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markPoint.data.label.emphasis.rich.<user defined style name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "markPoint.data.label.emphasis.rich.<user defined style name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "markPoint.data.label.emphasis.rich.<user defined style name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "markPoint.data.label.emphasis.rich.<user defined style name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "markPoint.data.label.emphasis.rich.<user defined style name>.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "markPoint.animation": "<p>Whether to enable animation.</p>\n",
- "markPoint.animationThreshold": "<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n",
- "markPoint.animationDuration": "<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n",
- "markPoint.animationEasing": "<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n",
- "markPoint.animationDelay": "<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n",
- "markPoint.animationDurationUpdate": "<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n",
- "markPoint.animationEasingUpdate": "<p>Easing method used for animation.</p>\n",
- "markPoint.animationDelayUpdate": "<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p [...]
- "markLine": "<p>Use a line in the chart to illustrate.</p>\n",
- "markLine.silent": "<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n",
- "markLine.symbol": "<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-boxplot.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n",
- "markLine.symbolSize": "<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class=\"codespan\">symbolSize</code>.</p>\n",
- "markLine.precision": "<p>Precison of marking line value, which is useful when displaying average value mark line.</p>\n",
- "markLine.label": "<p>Mark line text.</p>\n",
- "markLine.label.show": "<p>Whether show label or not.</p>\n",
- "markLine.label.position": "<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">'start'</code> starting point of the line.</li>\n<li><code class=\"codespan\">'middle'</code> middle point of the line.</li>\n<li><code class=\"codespan\">'end'</code> ending point of the line.</li>\n</ul>\n",
- "markLine.label.formatter": "<p>Data label formatter, which supports string template and 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>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n< [...]
- "markLine.label.emphasis.show": "<p>Whether show label or not.</p>\n",
- "markLine.label.emphasis.position": "<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">'start'</code> starting point of the line.</li>\n<li><code class=\"codespan\">'middle'</code> middle point of the line.</li>\n<li><code class=\"codespan\">'end'</code> ending point of the line.</li>\n</ul>\n",
- "markLine.label.emphasis.formatter": "<p>Data label formatter, which supports string template and 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>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item [...]
- "markLine.lineStyle": "<p>Mark line style.</p>\n",
- "markLine.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=\" [...]
- "markLine.lineStyle.width": "<p> line width.</p>\n",
- "markLine.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",
- "markLine.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",
- "markLine.lineStyle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "markLine.lineStyle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "markLine.lineStyle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "markLine.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",
- "markLine.lineStyle.curveness": "<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n",
- "markLine.lineStyle.emphasis.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 [...]
- "markLine.lineStyle.emphasis.width": "<p> line width.</p>\n",
- "markLine.lineStyle.emphasis.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",
- "markLine.lineStyle.emphasis.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",
- "markLine.lineStyle.emphasis.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "markLine.lineStyle.emphasis.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "markLine.lineStyle.emphasis.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "markLine.lineStyle.emphasis.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",
- "markLine.data": "<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-boxplot.markLine.data.0.x\">x</a>, <a href=\"#series-boxplot.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supporte [...]
- "markLine.data.0": "<p>Data of the starting point.</p>\n",
- "markLine.data.0.type": "<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">'min'</code> minimum value.</li>\n<li><code class=\"codespan\">'max'</code> maximum value.</li>\n<li><code class=\"codespan\">'average'</code> average value.</li>\n</ul>\n",
- "markLine.data.0.valueIndex": "<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class=\"codespan\">0</code> (for xAxis, or radiusAxis), or <code class=\"codespan\">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n",
- "markLine.data.0.valueDim": "<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n",
- "markLine.data.0.coord": "<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code [...]
- "markLine.data.0.name": "<p>Name of the marker, which will display as a label.</p>\n",
- "markLine.data.0.x": "<p>X position according to container, in pixel.</p>\n",
- "markLine.data.0.y": "<p>Y position according to container, in pixel.</p>\n",
- "markLine.data.0.value": "<p>Label value, which can be ignored.</p>\n",
- "markLine.data.0.symbol": "<p>Symbol of starting point.</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\">'none [...]
- "markLine.data.0.symbolSize": "<p>starting point 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",
- "markLine.data.0.symbolRotate": "<p>Rotate degree of starting point symbol. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">'arrow'</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n",
- "markLine.data.0.symbolKeepAspect": "<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n",
- "markLine.data.0.symbolOffset": "<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, '50%']</code> means to mov [...]
- "markLine.data.0.lineStyle": "<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n",
- "markLine.data.0.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 c [...]
- "markLine.data.0.lineStyle.width": "<p> line width.</p>\n",
- "markLine.data.0.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",
- "markLine.data.0.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",
- "markLine.data.0.lineStyle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "markLine.data.0.lineStyle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "markLine.data.0.lineStyle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "markLine.data.0.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",
- "markLine.data.0.lineStyle.curveness": "<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n",
- "markLine.data.0.lineStyle.emphasis.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<pr [...]
- "markLine.data.0.lineStyle.emphasis.width": "<p> line width.</p>\n",
- "markLine.data.0.lineStyle.emphasis.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",
- "markLine.data.0.lineStyle.emphasis.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",
- "markLine.data.0.lineStyle.emphasis.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "markLine.data.0.lineStyle.emphasis.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "markLine.data.0.lineStyle.emphasis.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "markLine.data.0.lineStyle.emphasis.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",
- "markLine.data.0.lineStyle.emphasis.curveness": "<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n",
- "markLine.data.0.label": "<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n",
- "markLine.data.0.label.show": "<p>Whether show label or not.</p>\n",
- "markLine.data.0.label.position": "<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">'start'</code> starting point of the line.</li>\n<li><code class=\"codespan\">'middle'</code> middle point of the line.</li>\n<li><code class=\"codespan\">'end'</code> ending point of the line.</li>\n</ul>\n",
- "markLine.data.0.label.formatter": "<p>Data label formatter, which supports string template and 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>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.< [...]
- "markLine.data.0.label.emphasis.show": "<p>Whether show label or not.</p>\n",
- "markLine.data.0.label.emphasis.position": "<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">'start'</code> starting point of the line.</li>\n<li><code class=\"codespan\">'middle'</code> middle point of the line.</li>\n<li><code class=\"codespan\">'end'</code> ending point of the line.</li>\n</ul>\n",
- "markLine.data.0.label.emphasis.formatter": "<p>Data label formatter, which supports string template and 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>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 da [...]
- "markLine.data.1": "<p>Data of the ending point.</p>\n",
- "markLine.data.1.type": "<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">'min'</code> minimum value.</li>\n<li><code class=\"codespan\">'max'</code> maximum value.</li>\n<li><code class=\"codespan\">'average'</code> average value.</li>\n</ul>\n",
- "markLine.data.1.valueIndex": "<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class=\"codespan\">0</code> (for xAxis, or radiusAxis), or <code class=\"codespan\">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n",
- "markLine.data.1.valueDim": "<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n",
- "markLine.data.1.coord": "<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code [...]
- "markLine.data.1.name": "<p>Name of the marker, which will display as a label.</p>\n",
- "markLine.data.1.x": "<p>X position according to container, in pixel.</p>\n",
- "markLine.data.1.y": "<p>Y position according to container, in pixel.</p>\n",
- "markLine.data.1.value": "<p>Label value, which can be ignored.</p>\n",
- "markLine.data.1.symbol": "<p>Symbol of ending point.</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\">'none&# [...]
- "markLine.data.1.symbolSize": "<p>ending point 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",
- "markLine.data.1.symbolRotate": "<p>Rotate degree of ending point symbol. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">'arrow'</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n",
- "markLine.data.1.symbolKeepAspect": "<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n",
- "markLine.data.1.symbolOffset": "<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, '50%']</code> means to move [...]
- "markLine.data.1.lineStyle": "<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n",
- "markLine.data.1.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 c [...]
- "markLine.data.1.lineStyle.width": "<p> line width.</p>\n",
- "markLine.data.1.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",
- "markLine.data.1.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",
- "markLine.data.1.lineStyle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "markLine.data.1.lineStyle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "markLine.data.1.lineStyle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "markLine.data.1.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",
- "markLine.data.1.lineStyle.curveness": "<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n",
- "markLine.data.1.lineStyle.emphasis.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<pr [...]
- "markLine.data.1.lineStyle.emphasis.width": "<p> line width.</p>\n",
- "markLine.data.1.lineStyle.emphasis.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",
- "markLine.data.1.lineStyle.emphasis.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",
- "markLine.data.1.lineStyle.emphasis.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "markLine.data.1.lineStyle.emphasis.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "markLine.data.1.lineStyle.emphasis.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "markLine.data.1.lineStyle.emphasis.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",
- "markLine.data.1.lineStyle.emphasis.curveness": "<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n",
- "markLine.data.1.label": "<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n",
- "markLine.data.1.label.show": "<p>Whether show label or not.</p>\n",
- "markLine.data.1.label.position": "<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">'start'</code> starting point of the line.</li>\n<li><code class=\"codespan\">'middle'</code> middle point of the line.</li>\n<li><code class=\"codespan\">'end'</code> ending point of the line.</li>\n</ul>\n",
- "markLine.data.1.label.formatter": "<p>Data label formatter, which supports string template and 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>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.< [...]
- "markLine.data.1.label.emphasis.show": "<p>Whether show label or not.</p>\n",
- "markLine.data.1.label.emphasis.position": "<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">'start'</code> starting point of the line.</li>\n<li><code class=\"codespan\">'middle'</code> middle point of the line.</li>\n<li><code class=\"codespan\">'end'</code> ending point of the line.</li>\n</ul>\n",
- "markLine.data.1.label.emphasis.formatter": "<p>Data label formatter, which supports string template and 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>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 da [...]
- "markLine.animation": "<p>Whether to enable animation.</p>\n",
- "markLine.animationThreshold": "<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n",
- "markLine.animationDuration": "<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n",
- "markLine.animationEasing": "<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n",
- "markLine.animationDelay": "<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n",
- "markLine.animationDurationUpdate": "<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n",
- "markLine.animationEasingUpdate": "<p>Easing method used for animation.</p>\n",
- "markLine.animationDelayUpdate": "<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n",
- "markArea": "<p>Used to mark an area in chart. For example, mark a time interval.</p>\n",
- "markArea.silent": "<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n",
- "markArea.label": "<p>Label in mark area.</p>\n",
- "markArea.label.show": "<p>Whether to show label.</p>\n",
- "markArea.label.position": "<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<l [...]
- "markArea.label.distance": "<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>).</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n",
- "markArea.label.rotate": "<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n",
- "markArea.label.offset": "<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n",
- "markArea.label.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.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",
- "markArea.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",
- "markArea.label.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "markArea.label.fontSize": "<p> font size</p>\n",
- "markArea.label.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 [...]
- "markArea.label.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 [...]
- "markArea.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",
- "markArea.label.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 // [...]
- "markArea.label.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.label.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "markArea.label.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "markArea.label.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 [...]
- "markArea.label.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "markArea.label.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "markArea.label.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "markArea.label.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "markArea.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 cl [...]
- "markArea.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\" [...]
- "markArea.label.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.label.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "markArea.label.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "markArea.label.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "markArea.label.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "markArea.label.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "markArea.label.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 [...]
- "markArea.label.rich.<user defined style name>.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.label.rich.<user defined 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",
- "markArea.label.rich.<user defined 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",
- "markArea.label.rich.<user defined style name>.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "markArea.label.rich.<user defined style name>.fontSize": "<p> font size</p>\n",
- "markArea.label.rich.<user defined 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. Fo [...]
- "markArea.label.rich.<user defined 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 [...]
- "markArea.label.rich.<user defined 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",
- "markArea.label.rich.<user defined 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 [...]
- "markArea.label.rich.<user defined style name>.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.label.rich.<user defined style name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "markArea.label.rich.<user defined style name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "markArea.label.rich.<user defined 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, [...]
- "markArea.label.rich.<user defined style name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "markArea.label.rich.<user defined style name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "markArea.label.rich.<user defined style name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "markArea.label.rich.<user defined style name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "markArea.label.rich.<user defined 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\">p [...]
- "markArea.label.rich.<user defined 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</cod [...]
- "markArea.label.rich.<user defined style name>.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.label.rich.<user defined style name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "markArea.label.rich.<user defined style name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "markArea.label.rich.<user defined style name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "markArea.label.rich.<user defined style name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "markArea.label.rich.<user defined style name>.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "markArea.label.emphasis.show": "<p>Whether to show label.</p>\n",
- "markArea.label.emphasis.position": "<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n [...]
- "markArea.label.emphasis.distance": "<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>).</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n",
- "markArea.label.emphasis.rotate": "<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://www.echartsjs.com/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n",
- "markArea.label.emphasis.offset": "<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n",
- "markArea.label.emphasis.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.label.emphasis.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",
- "markArea.label.emphasis.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",
- "markArea.label.emphasis.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "markArea.label.emphasis.fontSize": "<p> font size</p>\n",
- "markArea.label.emphasis.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>< [...]
- "markArea.label.emphasis.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. Fo [...]
- "markArea.label.emphasis.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",
- "markArea.label.emphasis.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 [...]
- "markArea.label.emphasis.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.label.emphasis.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "markArea.label.emphasis.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "markArea.label.emphasis.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> [...]
- "markArea.label.emphasis.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "markArea.label.emphasis.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "markArea.label.emphasis.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "markArea.label.emphasis.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "markArea.label.emphasis.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 [...]
- "markArea.label.emphasis.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=\"c [...]
- "markArea.label.emphasis.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.label.emphasis.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "markArea.label.emphasis.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "markArea.label.emphasis.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "markArea.label.emphasis.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "markArea.label.emphasis.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "markArea.label.emphasis.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 appli [...]
- "markArea.label.emphasis.rich.<user defined style name>.color": "<p> text color.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.label.emphasis.rich.<user defined 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",
- "markArea.label.emphasis.rich.<user defined 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",
- "markArea.label.emphasis.rich.<user defined style name>.fontFamily": "<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n",
- "markArea.label.emphasis.rich.<user defined style name>.fontSize": "<p> font size</p>\n",
- "markArea.label.emphasis.rich.<user defined 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 [...]
- "markArea.label.emphasis.rich.<user defined 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> i [...]
- "markArea.label.emphasis.rich.<user defined 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",
- "markArea.label.emphasis.rich.<user defined 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 dataU [...]
- "markArea.label.emphasis.rich.<user defined style name>.borderColor": "<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.label.emphasis.rich.<user defined style name>.borderWidth": "<p>Border width of the text fragment.</p>\n",
- "markArea.label.emphasis.rich.<user defined style name>.borderRadius": "<p>Border radius of the text fragment.</p>\n",
- "markArea.label.emphasis.rich.<user defined 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: [ [...]
- "markArea.label.emphasis.rich.<user defined style name>.shadowColor": "<p>Shadow color of the text block.</p>\n",
- "markArea.label.emphasis.rich.<user defined style name>.shadowBlur": "<p>Show blur of the text block.</p>\n",
- "markArea.label.emphasis.rich.<user defined style name>.shadowOffsetX": "<p>Shadow X offset of the text block.</p>\n",
- "markArea.label.emphasis.rich.<user defined style name>.shadowOffsetY": "<p>Shadow Y offset of the text block.</p>\n",
- "markArea.label.emphasis.rich.<user defined 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=\"cod [...]
- "markArea.label.emphasis.rich.<user defined 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\">w [...]
- "markArea.label.emphasis.rich.<user defined style name>.textBorderColor": "<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'auto'</code>, the color will assigned as visual color, such as series color.</p>\n",
- "markArea.label.emphasis.rich.<user defined style name>.textBorderWidth": "<p>Storke line width of the text.</p>\n",
- "markArea.label.emphasis.rich.<user defined style name>.textShadowColor": "<p>Shadow color of the text itself.</p>\n",
- "markArea.label.emphasis.rich.<user defined style name>.textShadowBlur": "<p>Shadow blue of the text itself.</p>\n",
- "markArea.label.emphasis.rich.<user defined style name>.textShadowOffsetX": "<p>Shadow X offset of the text itself.</p>\n",
- "markArea.label.emphasis.rich.<user defined style name>.textShadowOffsetY": "<p>Shadow Y offset of the text itself.</p>\n",
- "markArea.itemStyle": "<p>Style of the mark area.</p>\n",
- "markArea.itemStyle.color": "<p> 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 [...]
- "markArea.itemStyle.borderColor": "<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n",
- "markArea.itemStyle.borderWidth": "<p> border width. No border when it is set to be 0.</p>\n",
- "markArea.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",
- "markArea.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",
- "markArea.itemStyle.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "markArea.itemStyle.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "markArea.itemStyle.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "markArea.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",
- "markArea.itemStyle.emphasis.color": "<p> 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 [...]
- "markArea.itemStyle.emphasis.borderColor": "<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n",
- "markArea.itemStyle.emphasis.borderWidth": "<p> border width. No border when it is set to be 0.</p>\n",
- "markArea.itemStyle.emphasis.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",
- "markArea.itemStyle.emphasis.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",
- "markArea.itemStyle.emphasis.shadowColor": "<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n",
- "markArea.itemStyle.emphasis.shadowOffsetX": "<p>Offset distance on the horizontal direction of shadow.</p>\n",
- "markArea.itemStyle.emphasis.shadowOffsetY": "<p>Offset distance on the vertical direction of shadow.</p>\n",
- "markArea.itemStyle.emphasis.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",
- "markArea.data": "<p>The scope of the area is defined by <code class=\"codespan\">data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li><p>Specify the coordinate in screen coordinate system using <a href=\"#series-boxplot.markArea.data.0.x\">x</a>, <a href=\"#series-boxplot.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code class=\"codespan [...]
- "markArea.data.0": "<p>Specify the left-top point.</p>\n",
- "markArea.data.0.type": "<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class=\"codespan\">'min'</code> max value.</li>\n<li><code class=\"codespan\">'max'</code> min value.</li>\n<li><code class=\"codespan\">'average'</code> average value.</li>\n</ul>\n",
- "markArea.data.0.valueIndex": "<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-.markArea.data.type\">type</a> used.\nThe value can be <code class=\"codespan\">0</code> (means xAxis, radiusAxis) or <code class=\"codespan\">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n",
- "markArea.data.0.valueDim": "<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class=\"codespan\">x</code>, <code class=\"codespan\">angle</code> in line chart, and <code class=\"codespan\">open</code>, <code class=\"codespan\">close</code> in candlestick).</p>\n",
- "markArea.data.0.coord": "<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code> on <a href=\"#grid\">cartesian</a>, or <code class=\"codespan\">radius</code>, <code class=\"codespan\">angle</code> on <a href=\"#polar\">polar</a>.</p>\n",
- "markArea.data.0.name": "<p>Name of the marker, which will display as a label.</p>\n",
- "markArea.data.0.x": "<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">'20%'</code>).</p>\n",
- "markArea.data.0.y": "<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">'20%'</code>).</p>\n",
- "markArea.data.0.value": "<p>value of the item, not necessary.</p>\n",
... 49348 lines suppressed ...
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org