diff --git a/README.md b/README.md index 165cdca7..1ae56658 100644 --- a/README.md +++ b/README.md @@ -51,6 +51,10 @@ Marking "since version" indicates when a new feature was introduced. For example, ``` {{ use: partial-version(version = "6.0.0") }} + +{{ use: partial-version(version = ${version|minVersion('6.0.0')}) }} + That is, if the ${version} is empty or smaller than '6.0.0', use '6.0.0'. + Follow the version comparison rules in Semver 2.0 . ``` ### Global Variables @@ -197,6 +201,15 @@ The template syntax follows [etpl](https://github.com/ecomfe/etpl/blob/master/do Summary of the commonly used syntax: ```template +--- TEMPLATE EXPRESSION --- +The template syntax and expressions are encolsed by delimiters `{{` and `}}`. +For example, +{{ if: condition_expression }} xxx {{ /if }} +The expressoin within `{{` and `}}` can be considered a (restricted) JS expression. +For example, +{{ if: ${someVar1} + 'abc' === '123abc' }} ... {{ /if }} +{{ if: !${someVar2} }} ... {{ /if }} + --- TEMPLATE VARIABLE --- Use a variable: some text ${someVariable} some text @@ -210,7 +223,8 @@ Declaration or assignment of a target-local variable: {{ var: myVar = 'some' }} {{ var: myVar = 123 }} {{ var: myVar = ${someOtherStr} + 'some_str' }} - +NOTICE: + Within a `{{` `}}` pair, DO NOT write {{ if: '${some}_abc' }}{{ /if }}. It should be {{ if: ${some} + '_abc' }}{{ /if }}, as the sentence within `{{` `}}` pair is treated like a normal JS expression. --- IF ELSE --- {{ if: ${number1} > 0 }} @@ -220,6 +234,11 @@ some text yyy {{ else }} some text zzz {{ /if }} +Logical operators can be used in the conditional expression: +{{ if: ${componentNameInLink} == null && ${seriesType} }} +This componentNameInLink is null or undefined +{{ var: componentNameInLink = 'series-' + ${seriesType} }} +{{ /if }} --- FOR LOOP --- diff --git a/en/option/component/data-zoom-slider.md b/en/option/component/data-zoom-slider.md index 6117cd0e..b2d679fb 100644 --- a/en/option/component/data-zoom-slider.md +++ b/en/option/component/data-zoom-slider.md @@ -239,6 +239,16 @@ Whether to update view while dragging. If it is set as `false`, the view will be componentName = 'dataZoom-slider' ) }} +{{ use: partial-coord-sys( + version = '6.0.0', + nonSeriesComponentMainType = "dataZoom", + nonSeriesComponentSubType = "slider", + coordSysDefault = "'none'", + calendar = true, + matrix = true, + none = true +) }} + ## width(string|number) diff --git a/en/option/component/geo-common.md b/en/option/component/geo-common.md index 2b6bfa5e..ab9ea90c 100644 --- a/en/option/component/geo-common.md +++ b/en/option/component/geo-common.md @@ -1,6 +1,12 @@ {{ target: geo-common }} +{{ if: ${inMap} }} +{{ var: componentNameInLink = 'series-map' }} +{{ else }} +{{ var: componentNameInLink = 'geo' }} +{{ /if }} + #${prefix} map(string) = '' Map name registered in [registerMap](api.html#echarts.registerMap). @@ -173,9 +179,13 @@ center: project([115.97, 29.71]) #${prefix} aspectScale(number) = 0.75 -Used to scale aspect of geo. Will be ignored if `projection` is set. +Used to scale aspect of geo. It will be ignored if [proejction](~${componentNameInLink}.projection) is set. + +The final calculated `pixelWidth` and `pixelHeight` of the map will satisfy `pixelWidth / pixelHeight = lngSpan / latSpan * aspectScale` (assume [proejction](~${componentNameInLink}.projection) is not specified, and [preserveAspect](~${componentNameInLink}.preserveAspect) is truthy). + +If no [proejction](~${componentNameInLink}.projection) is applied, the latitudes and longitudes in GeoJSON are linearly mapped to pixel coordinates diarectly. `aspectScale` offers a simple way to visually compensates for the distortion caused by the fact that the longitudinal spacing shrinks as latitude increases. For example, an `aspectScale` can be roughly calculated as `aspectScale = Math.cos(center_latitude * Maht.PI / 180)`, which is similar to a sinusoidal projection. -The final aspect is calculated by: `geoBoundingRect.width / geoBoundingRect.height * aspectScale`. +See [example](${galleryEditorPath}geo-graph&edit=1&reset=1). #${prefix} boundingCoords(Array) = null diff --git a/en/option/component/geo.md b/en/option/component/geo.md index 54ef5a97..93589a35 100644 --- a/en/option/component/geo.md +++ b/en/option/component/geo.md @@ -37,6 +37,15 @@ Whether to show the geo component. prefix = '#' ) }} +{{ use: partial-coord-sys( + version = '6.0.0', + nonSeriesComponentMainType = "geo", + coordSysDefault = "'none'", + calendar = true, + matrix = true, + none = true +) }} + ## regions(Array) Configure style for specified regions. diff --git a/en/option/component/grid.md b/en/option/component/grid.md index 0b502e33..48f2d399 100644 --- a/en/option/component/grid.md +++ b/en/option/component/grid.md @@ -3,9 +3,15 @@ # grid(Object) -Drawing grid in rectangular coordinate. In a single grid, at most two X and Y axes each is allowed. [Line chart](~series-line), [bar chart](~series-bar), and [scatter chart (bubble chart)](~series-scatter) can be drawn in grid. +The `grid component` is a rectangular container, used to lay out two-dimensional rectangular coordinate system (also known as `cartesian2d` coordinate system). -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. +A `cartesian2d` coordinate system is composed fo an [xAxis](~xAixs) and a [yAxis](~yAxis). Multiple `cartesian2d` coordinate systems can be arranged within a single `grid component` - that is, multiple [xAxis](~xAixs) and multiple [yAxis](~yAxis) instances can be configured within one `grid component`. + +An [xAxis](~xAixs) or a [yAxis](~yAxis) can be shared by multiple `cartesian2d` coordinate systems. For example, one [xAxis](~xAixs) and two [yAxis](~yAxis) form two `cartesian2d` coordinate systems. + +[Line chart](~series-line), [bar chart](~series-bar), and [scatter chart (bubble chart)](~series-scatter), etc., can be drawn in `grid component`. + +> In ECharts 2.x, there could only be one single grid component at most in a single echarts instance. But since ECharts 3, there is no limitation. **Following is an example of Anscombe Quartet:** @@ -82,6 +88,7 @@ See also [outerBounds example](${galleryEditorPath}doc-example/grid-outerBounds& {{ use: partial-rect-layout-width-height( hostName = "`outerBounds`", + version = "6.0.0", noZ = true, prefix = '##', defaultLeft = 0, @@ -113,3 +120,11 @@ See also [outerBounds example](${galleryEditorPath}doc-example/grid-outerBounds& {{ use: partial-tooltip-in-coords() }} +{{ use: partial-coord-sys( + version = '6.0.0', + nonSeriesComponentMainType = "grid", + coordSysDefault = "'none'", + matrix = true, + calendar = true, + none = true +) }} diff --git a/en/option/component/legend.md b/en/option/component/legend.md index ac97dae3..209d2697 100644 --- a/en/option/component/legend.md +++ b/en/option/component/legend.md @@ -49,6 +49,15 @@ When `'scroll'` used, these options below can be used for detailed configuration componentName = "legend" ) }} +{{ use: partial-coord-sys( + version = '6.0.0', + nonSeriesComponentMainType = "legend", + coordSysDefault = "'none'", + matrix = true, + calendar = true, + none = true +) }} + ## orient(string) = 'horizontal' diff --git a/en/option/component/parallel.md b/en/option/component/parallel.md index defb4156..084c84c0 100644 --- a/en/option/component/parallel.md +++ b/en/option/component/parallel.md @@ -20,6 +20,16 @@ defaultBottom = 60 ) }} +{{ use: partial-coord-sys( + version = '6.0.0', + nonSeriesComponentMainType = "parallel", + coordSysDefault = "'none'", + matrix = true, + calendar = true, + none = true +) }} + + ## layout(string) = 'horizontal' diff --git a/en/option/component/polar.md b/en/option/component/polar.md index ab22e0e8..846a5201 100644 --- a/en/option/component/polar.md +++ b/en/option/component/polar.md @@ -18,5 +18,14 @@ Polar coordinate can be used in scatter and line chart. Every polar coordinate h disableArray = false ) }} +{{ use: partial-coord-sys( + version = '6.0.0', + nonSeriesComponentMainType = "polar", + coordSysDefault = "'none'", + matrix = true, + calendar = true, + none = true +) }} + {{ use: partial-tooltip-in-coords() }} diff --git a/en/option/component/radar.md b/en/option/component/radar.md index 1df480b5..16430515 100644 --- a/en/option/component/radar.md +++ b/en/option/component/radar.md @@ -20,6 +20,15 @@ Here is a custom example of radar component. defaultRadius = "75%" ) }} +{{ use: partial-coord-sys( + version = '6.0.0', + nonSeriesComponentMainType = "radar", + coordSysDefault = "'none'", + matrix = true, + calendar = true, + none = true +) }} + ## startAngle(number) = 90 The start angle of coordinate, which is the angle of the first indicator axis. diff --git a/en/option/component/timeline.md b/en/option/component/timeline.md index a908b9a9..8116e97c 100644 --- a/en/option/component/timeline.md +++ b/en/option/component/timeline.md @@ -181,6 +181,15 @@ Position of the play button, whose valid values are `'left'` and `'right'`. componentName = 'timeline' ) }} +{{ use: partial-coord-sys( + version = '6.0.0', + nonSeriesComponentMainType = "timeline", + coordSysDefault = "'none'", + matrix = true, + calendar = true, + none = true +) }} + ## padding(number|Array) = 5 diff --git a/en/option/component/title.md b/en/option/component/title.md index 69df32f3..f448dacb 100644 --- a/en/option/component/title.md +++ b/en/option/component/title.md @@ -116,6 +116,15 @@ The gap between the main title and subtitle. componentName = "title" ) }} +{{ use: partial-coord-sys( + version = '6.0.0', + nonSeriesComponentMainType = "title", + coordSysDefault = "'none'", + matrix = true, + calendar = true, + none = true +) }} + {{ use: partial-component-common-style( componentName = "title", prefix = '#', diff --git a/en/option/component/toolbox.md b/en/option/component/toolbox.md index 626bf9bc..caf1b23e 100644 --- a/en/option/component/toolbox.md +++ b/en/option/component/toolbox.md @@ -489,6 +489,15 @@ Title. componentName = "toolbox" ) }} +{{ use: partial-coord-sys( + version = '6.0.0', + nonSeriesComponentMainType = "toolbox", + coordSysDefault = "'none'", + matrix = true, + calendar = true, + none = true +) }} + ## tooltip(Object) Tooltip configuration for toolbox tooltip, which is similar to [tooltip](~tooltip). It is not shown by default. If you wish to set special style for toolbox icon label (especially when using CSS to control text style), you may set as the following example: diff --git a/en/option/component/visual-map-continuous.md b/en/option/component/visual-map-continuous.md index 89ecad2e..835d42f6 100644 --- a/en/option/component/visual-map-continuous.md +++ b/en/option/component/visual-map-continuous.md @@ -170,7 +170,8 @@ You can understand the order of items in `text` array just by a simple trial. Se The distance between the ends of the main bar and the label, with unit px. See [visualMap-continuous.text](~visualMap-continuous.text) {{ use: partial-visual-map-common( - visualMapName = 'visualMap-continuous' + visualMapName = 'visualMap-continuous', + visualMapSubType = 'continuous' ) }} ## formatter(string|Function) diff --git a/en/option/component/visual-map-piecewise.md b/en/option/component/visual-map-piecewise.md index 42b634f7..7586401a 100644 --- a/en/option/component/visual-map-piecewise.md +++ b/en/option/component/visual-map-piecewise.md @@ -218,7 +218,8 @@ The setting of visual channel `symbol` can refer to [visualMap-piecewise.inRange When they are not specified, `itemSymbol` is adopted as the default value (but just used in visualMap component itself, not in chart). {{ use: partial-visual-map-common( - visualMapName = 'visualMap-piecewise' + visualMapName = 'visualMap-piecewise', + visualMapSubType = 'piecewise' ) }} ## formatter(string|Function) diff --git a/en/option/component/visual-map.md b/en/option/component/visual-map.md index bb2baf7a..414416ab 100644 --- a/en/option/component/visual-map.md +++ b/en/option/component/visual-map.md @@ -366,6 +366,16 @@ See available configurations in [${visualMapName}.inRange](~${visualMapName}.inR defaultBottom = "0" ) }} +{{ use: partial-coord-sys( + version = '6.0.0', + nonSeriesComponentMainType = "visualMap", + nonSeriesComponentSubType = ${visualMapSubType}, + coordSysDefault = "'none'", + matrix = true, + calendar = true, + none = true +) }} + ## orient(string) = 'vertical' How to layout the visualMap component, `'horizontal'` or `'vertical'`. diff --git a/en/option/partial/coord-sys.md b/en/option/partial/coord-sys.md index f8d5da3f..1377ec9a 100644 --- a/en/option/partial/coord-sys.md +++ b/en/option/partial/coord-sys.md @@ -1,125 +1,330 @@ {{ target: partial-coord-sys }} +{{ if: ${seriesType} }} +{{ var: componentNameInLink = 'series-' + ${seriesType} }} +{{ elif: ${nonSeriesComponentSubType} }} +{{ var: componentNameInLink = ${nonSeriesComponentMainType} + '-' + ${nonSeriesComponentSubType} }} +{{ else }} +{{ var: componentNameInLink = ${nonSeriesComponentMainType} }} +{{ /if }} + +{{ if: ${coordSysUsageSupportData} == null }} +{{ if: ${seriesType} }} +{{ var: coordSysUsageSupportData = true }} +{{ /if }} +{{ /if }} + +{{ if: ${coordSysUsageSupportBox} == null }} +{{ if: ${nonSeriesComponentMainType} }} +{{ var: coordSysUsageSupportBox = true }} +{{ /if }} +{{ /if }} + +{{ if: ${coordSysUsageDefault} == null }} +{{ if: ${coordSysUsageSupportData} }} +{{ var: coordSysUsageDefault = "'data'" }} +{{ else }} +{{ var: coordSysUsageDefault = "'box'" }} +{{ /if }} +{{ /if }} + + ## coordinateSystem(string) = ${coordSysDefault} {{ if: ${version} }} -{{ use: partial-version( - version = ${version} -) }} +{{ use: partial-version(version = ${version}) }} {{ /if }} -The coordinate used in the series, whose options are: +Specifies another coordinate system component on which this `${componentNameInLink}` is laid out. + +Options: {{ if: ${none} }} -+ `null` or `'none'` ++ `null`/`undefined`/`'none'` - No coordinate. + Not laid out in any coordinate system; instead, laid out independently. {{ /if }} {{ if: ${cartesian2d} }} + `'cartesian2d'` - Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with [xAxisIndex](~series-${seriesType}.xAxisIndex) and [yAxisIndex](~series-${seriesType}.yAxisIndex) to assign the corresponding axis component. + Lay out based on a two-dimensional [rectangular coordinate system (also known as Cartesian coordinate system)](~grid). When multiple `xAxis` or multiple `yAxis` exist within an ECharts instance, the corresponding axes should be specified using [xAxisIndex](~${componentNameInLink}.xAxisIndex) and [yAxisIndex](~${componentNameInLink}.yAxisIndex) or [xAxisId](~${componentNameInLink}.xAxisId) and [yAxisId](~${componentNameInLink}.yAxisId). + + Note: some commonly used series, such as [series-line](~series-line), [series-bar](~series-bar), etc., can not be laid out directly based on [matrix coordinate system](~matrix) or [calendar coordinate system](~calendar), but they can be laid out on a [grid(Cartesian)](~grid), and that [grid](~grid) can be laid out on a [matrix](~matrix) or [calendar](~calendar). {{ /if }} {{ if: ${polar} }} + `'polar'` - Use polar coordinates, with [polarIndex](~series-${seriesType}.polarIndex) to assign the corresponding polar coordinate component. + Lay out based on a [polar coordinate system](~polar). When multiple polar coordinate systems exist within an ECharts instance, the corresponding system should be specified using [polarIndex](~${componentNameInLink}.polarIndex) or [polarId](~${componentNameInLink}.polarId). {{ /if }} {{ if: ${geo} }} + `'geo'` - Use geographic coordinate, with [geoIndex](~series-${seriesType}.geoIndex) to assign the corresponding geographic coordinate components. + Lay out based on a [geographic coordinate system](~geo). When multiple geographic coordinate systems exist within an ECharts instance, the corresponding system should be specified using [geoIndex](~${componentNameInLink}.geoIndex) or [geoId](~${componentNameInLink}.geoId).{{ if: ${seriesType} === 'pie' }} + + See example [pie in geo](${galleryEditorPath}map-iceland-pie&edit=1&reset=1).{{ /if }} +{{ /if }} + +{{ if: ${singleAxis} }} ++ `'singleAxis'` + + Lay out based on a [singleAxis coordinate system](~singleAxis). When multiple singleAxis coordinate systems exist within an ECharts instance, the corresponding system should be specified using [singleAxisIndex](~${componentNameInLink}.polarIndex) or [singleAxisId](~${componentNameInLink}.polarId). {{ /if }} {{ if: ${parallel} }} + `'parallel'` - Use parallel coordinates, with [parallelIndex](~series-${seriesType}.parallelIndex) to assign the corresponding parallel coordinate components. + Lay out based on a [parallel coordinate system](~parallel). When multiple parallel coordinate systems exist within an ECharts instance, the corresponding system should be specified using [parallelIndex](~${componentNameInLink}.parallelIndex) or [parallelId](~${componentNameInLink}.parallelId). {{ /if }} {{ if: ${calendar} }} + `'calendar'` - Use calendar coordinates, with [calendarIndex](~series-${seriesType}.calendarIndex) to assign the corresponding calendar coordinate components. + Lay out based on a [calendar coordinate system](~calendar). When multiple calendar coordinate systems exist within an ECharts instance, the corresponding system should be specified using [calendarIndex](~${componentNameInLink}.calendarIndex) or [calendarId](~${componentNameInLink}.calendarId). {{ /if }} -{{ if: ${none} }} -+ `'none'` +{{ if: ${matrix} }} ++ `'matrix'` + + Lay out based on a [matrix coordinate system](~matrix). When multiple matrix coordinate systems exist within an ECharts instance, the corresponding system should be specified using [matrixIndex](~${componentNameInLink}.matrixIndex) or [matrixId](~${componentNameInLink}.matrixId).{{if: ${nonSeriesComponentMainType} === 'grid' }} + + See example [tiny Cartesians in matrix](${galleryEditorPath}matrix-cartesian-tiny&edit=1&reset=1). + {{ /if }} +{{ /if }} + + +**Support for series and component layout on coordinate systems:** + +The leftmost column lists the series and components that will be laid out (coordinate systems themselves are also components), and the topmost row lists the coordinate systems that can be laid out on. - Do not use coordinate system. +| | no coord sys | [grid](~grid) (cartesian2d) | [polar](~polar) | [geo](~geo) | [singleAxis](~singleAxis) | [radar](~radar) | [parallel](~parallel) | [calendar](~calendar) | [matrix](~matrix) | +|------------------------------------------------|----------|----------|---------|----------|----------|----------|----------| +| [grid](~grid) (cartesian2d) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | +| [polar](~polar) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | +| [geo](~geo) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | +| [singleAxis](~singleAxis) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | +| [calendar](~calendar) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | +| [matrix](~matrix) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | +| [series-line](~series-line) | ❌ | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ (✅ if via another coord sys like [grid](~grid)) | ❌ (✅ if via another coord sys like [grid](~grid)) | +| [series-bar](~series-bar) | ❌ | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ (✅ if via another coord sys like [grid](~grid)) | ❌ (✅ if via another coord sys like [grid](~grid)) | +| [series-pie](~series-pie) | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ✅ | ✅ | +| [series-scatter](~series-scatter) | ❌ | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ✅ | ✅ | +| [series-effectScatter](~series-effectScatter) | ❌ | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ✅ | ✅ | +| [series-radar](~series-radar) | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ❌ | ❌ (✅ if via [radar](~radar) coord sys) | ❌ (✅ if via [radar](~radar) coord sys) | +| [series-tree](~series-tree) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | +| [series-treemap](~series-treemap) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | +| [series-sunburst](~series-sunburst) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | +| [series-boxplot](~series-boxplot) | ❌ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ (✅ if via another coord sys like [grid](~grid)) | ❌ (✅ if via another coord sys like [grid](~grid)) | +| [series-candlestick](~series-candlestick) | ❌ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ (✅ if via another coord sys like [grid](~grid)) | ❌ (✅ if via another coord sys like [grid](~grid)) | +| [series-heatmap](~series-heatmap) | ❌ | ✅ | ❌ | ✅ | ❌ | ❌ | ❌ | ✅ | ✅ | +| [series-map](~series-map) | ✅ (create a geo coord sys exclusively) | ❌ | ❌ | ✅ | ❌ | ❌ | ❌ | ✅ | ✅ | +| [series-parallel](~series-parallel) | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ❌ (✅ if via [parallel](~parallel) coord sys) | ❌ (✅ if via [parallel](~parallel) coord sys) | +| [series-lines](~series-lines) | ❌ | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ (✅ if via another coord sys like [geo](~geo)) | ❌ (✅ if via another coord sys like [geo](~geo)) | +| [series-graph](~series-graph) | ✅ (create a "view" coord sys exclusively) | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | ✅ | ✅ | +| [series-sankey](~series-sankey) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | +| [series-funnel](~series-funnel) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | +| [series-gauge](~series-gauge) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | +| [series-pictorialBar](~series-pictorialBar) | ❌ | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ (✅ if via another coord sys like [grid](~grid)) | ❌ (✅ if via another coord sys like [grid](~grid)) | +| [series-themeRiver](~series-themeRiver) | ❌ | ❌ | ❌ | ❌ | ✅ | ❌ | ❌ | ❌ (✅ if via another coord sys like [singleAxis](~singleAxis)) | ❌ (✅ if via another coord sys like [singleAxis](~singleAxis)) | +| [series-chord](~series-chord) | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ✅ | ✅ | +| [title](~title) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | +| [legend](~legend) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | +| [dataZoom](~dataZoom) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | +| [visualMap](~visualMap) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | +| [toolbox](~toolbox) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | +| [timeline](~timeline) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | +| [thumbnail](~thumbnail) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | + +See also [${componentNameInLink}.coordinateSystemUsage](~${componentNameInLink}.coordinateSystemUsage). + + +## coordinateSystemUsage(string) = ${coordSysUsageDefault} + +{{ use: partial-version(version = ${version|minVersion('6.0.0')}) }} + +Specify how to lay out this `${componentNameInLink}` based on the specified [coordinateSystem](~${componentNameInLink}.coordinateSystem). + +In most cases, there is no need to specify `coordinateSystemUsage`, unless the default behavior is unexpected. + +Options: +- `'data'`: {{ if: !${coordSysUsageSupportData} }}**(Not applicable in [${componentNameInLink}](~${componentNameInLink}))**{{ /if }} + + Each data item of a series (e.g., each `series.data[i]`) is laid out separately based on the specified coordinate system. Currently no non-series component supports `coordinateSystemUsage: 'data'`. + +- `'box'`: {{ if: !${coordSysUsageSupportBox} }}**(Not applicable in [${componentNameInLink}](~${componentNameInLink}))**{{ /if }} + + The entire series or component is laid out as a whole based on the specified coordinate system - that is, the overall bounding rect or basic anchor point is calculated relative to the system. + + - For example, a [grid component](~grid) can be laid out in a [matrix coordinate system](~matrix) or a [calendar coordinate system](~calendar), where its layout rectangle is calculated by the specified [${componentNameInLink}.coords](~${componentNameInLink}.coords) in that system. See example [tiny Cartesians in matrix](${galleryEditorPath}matrix-cartesian-tiny&edit=1&reset=1). + - For example, a [pie series](~series-pie) or a [chord series](~series-chord) can be laid out in a [geo coordinate system](~geo) or a [cartesian2d coordinate system](~grid), where the center is calculated by the specified [series-pie.coords](~series-pie.coords) or [series-pie.center](~series-pie.center) in that system. See example [pie in geo](${galleryEditorPath}map-iceland-pie&edit=1&reset=1). + +{{ if: ${seriesType} }} +Only a few series support both `coordinateSystemUsage: 'data'` and `coordinateSystemUsage: 'box'`, such as [series-graph](~series-graph), [series-map](~series-map). For examle, in [this example (coordinateSystemUsage: 'data')](${galleryEditorPath}matrix-graph&edit=1&reset=1), each node of a graph series is laid out on a matrix coordinate system, while in [this example (coordinateSystemUsage: 'box')](${galleryEditorPath}doc-example/matrix-graph-box&edit=1&reset=1), the entire graph series is laid out within a matrix cell. + +Most series only support `coordinateSystemUsage: 'data'` - such as [series-line](~series-line), [series-bar](~series-bar), [series-scatter](~series-scatter), etc. Meanwhile, some series only support `coordinateSystemUsage: 'box'` - such as [series-pie](~series-pie) ([example: pie in geo](${galleryEditorPath}map-iceland-pie&edit=1&reset=1)), [series-tree](~series-pie), [series-treemap](~series-treemap), [series-sankey](~series-sankey), etc. {{ /if }} +See also [${componentNameInLink}.coordinateSystem](~${componentNameInLink}.coordinateSystem). + +## coord(Array|string) + +{{ use: partial-version(version = ${version|minVersion('6.0.0')}) }} + +When [coordinateSystemUsage](~${componentNameInLink}.coordinateSystemUsage) is `'box'`, `coord` is used as the input to the coordinate system and calculate the layout rectangle or anchor point. + +Examples: [tiny Cartesians in matrix](${galleryEditorPath}matrix-cartesian-tiny&edit=1&reset=1), [grpah in matrix](${galleryEditorPath}doc-example/matrix-graph-box&edit=1&reset=1). + +{{ if: ${seriesType} === 'pie' }} +[series-pie.center](~series-pie.center) and [series-pie.coord](~series-pie.coord) can be used interchangably in this case. + +[example: pie in geo](${galleryEditorPath}map-iceland-pie&edit=1&reset=1) +{{ /if }} + +> Note: when [coordinateSystemUsage](~${componentNameInLink}.coordinateSystemUsage) is `'data'`, the input of coordinate system is `series.data[i]` rather than this `coord`. + + {{ if: ${cartesian2d} }} ## xAxisIndex(number) = 0 {{ if: ${version} }} -{{ use: partial-version( - version = ${version} -) }} +{{ use: partial-version(version = ${version}) }} +{{ /if }} + +The index of the [xAxis](~xAxis) to base on. When mutiple `xAxis` components exist within an ECharts instance, use this to specify the corresponding `xAxis`. + +## xAxisId(number) = undefined + +{{ if: ${version} }} +{{ use: partial-version(version = ${version}) }} {{ /if }} -Index of [x axis](~xAxis) to combine with, which is useful for multiple x axes in one chart. +The id of the [xAxis](~xAxis) to base on. When mutiple `xAxis` components exist within an ECharts instance, use this to specify the corresponding `xAxis`. ## yAxisIndex(number) = 0 {{ if: ${version} }} -{{ use: partial-version( - version = ${version} -) }} +{{ use: partial-version(version = ${version}) }} {{ /if }} -Index of [y axis](~yAxis) to combine with, which is useful for multiple y axes in one chart. +The index of the [yAxis](~yAxis) to base on. When mutiple `yAxis` components exist within an ECharts instance, use this to specify the corresponding `yAxis`. + +## yAxisId(number) = undefined + +{{ if: ${version} }} +{{ use: partial-version(version = ${version}) }} +{{ /if }} + +The index of the [yAxis](~yAxis) to base on. When mutiple `yAxis` components exist within an ECharts instance, use this to specify the corresponding `yAxis`. {{ /if }} {{ if: ${polar} }} ## polarIndex(number) = 0 {{ if: ${version} }} -{{ use: partial-version( - version = ${version} -) }} +{{ use: partial-version(version = ${version}) }} +{{ /if }} + +The index of the [polar coordinate system](~polar) to base on. When mutiple `polar` exist within an ECharts instance, use this to specify the corresponding `polar`. + +## polarId(number) = undefined + +{{ if: ${version} }} +{{ use: partial-version(version = ${version}) }} {{ /if }} -Index of [polar coordinate](~polar) to combine with, which is useful for multiple polar axes in one chart. +The id of the [polar coordinate system](~polar) to base on. When mutiple `polar` exist within an ECharts instance, use this to specify the corresponding `polar`. +{{ /if }} + +{{ if: ${singleAxis} }} +## singleAxisIndex(number) = 0 + +{{ if: ${version} }} +{{ use: partial-version(version = ${version}) }} +{{ /if }} + +The index of the [singleAxis coordinate system](~singleAxis) to base on. When mutiple `singleAxis` exist within an ECharts instance, use this to specify the corresponding `singleAxis`. + +## singleAxisId(number) = undefined + +{{ if: ${version} }} +{{ use: partial-version(version = ${version}) }} +{{ /if }} + +The id of the [singleAxis coordinate system](~singleAxis) to base on. When mutiple `singleAxis` exist within an ECharts instance, use this to specify the corresponding `singleAxis`. {{ /if }} {{ if: ${geo} }} ## geoIndex(number) = 0 {{ if: ${version} }} -{{ use: partial-version( - version = ${version} -) }} +{{ use: partial-version(version = ${version}) }} +{{ /if }} + +The index of the [geographic coordinate system](~geo) to base on. When mutiple `geographic` exist within an ECharts instance, use this to specify the corresponding `geographic`. + +## geoId(number) = undefined + +{{ if: ${version} }} +{{ use: partial-version(version = ${version}) }} {{ /if }} -Index of [geographic coordinate](~geo) to combine with, which is useful for multiple geographic axes in one chart. +The id of the [geographic coordinate system](~geo) to base on. When mutiple `geographic` exist within an ECharts instance, use this to specify the corresponding `geographic`. {{ /if }} {{ if: ${parallel} }} ## parallelIndex(number) = 0 {{ if: ${version} }} -{{ use: partial-version( - version = ${version} -) }} +{{ use: partial-version(version = ${version}) }} {{ /if }} -Index of [parallel coordinates](~parallel) to combine with, which is useful for multiple parallel axes in one chart. +The index of the [parallel coordinate system](~parallel) to base on. When mutiple `parallel` exist within an ECharts instance, use this to specify the corresponding `parallel`. + +## parallelId(number) = undefined + +{{ if: ${version} }} +{{ use: partial-version(version = ${version}) }} +{{ /if }} + +The id of the [parallel coordinate system](~parallel) to base on. When mutiple `parallel` exist within an ECharts instance, use this to specify the corresponding `parallel`. {{ /if }} {{ if: ${calendar} }} ## calendarIndex(number) = 0 {{ if: ${version} }} -{{ use: partial-version( - version = ${version} -) }} +{{ use: partial-version(version = ${version}) }} +{{ /if }} + +The index of the [calendar coordinate system](~calendar) to base on. When mutiple `calendar` exist within an ECharts instance, use this to specify the corresponding `calendar`. + +## calendarId(number) = undefined + +{{ if: ${version} }} +{{ use: partial-version(version = ${version}) }} +{{ /if }} + +The id of the [calendar coordinate system](~calendar) to base on. When mutiple `calendar` exist within an ECharts instance, use this to specify the corresponding `calendar`. +{{ /if }} + +{{ if: ${matrix} }} +## matrixIndex(number) = 0 + +{{ if: ${version} }} +{{ use: partial-version(version = ${version}) }} +{{ /if }} + +The index of the [matrix coordinate system](~matrix) to base on. When mutiple `matrix` exist within an ECharts instance, use this to specify the corresponding `matrix`. + +## matrixId(number) = undefined + +{{ if: ${version} }} +{{ use: partial-version(version = ${version}) }} {{ /if }} -Index of [calendar coordinates](~calendar) to combine with, which is useful for multiple calendar coordinates in one chart. +The id of the [matrix coordinate system](~matrix) to base on. When mutiple `matrix` exist within an ECharts instance, use this to specify the corresponding `matrix`. {{ /if }} diff --git a/en/option/partial/rect-layout-width-height.md b/en/option/partial/rect-layout-width-height.md index 463c388a..bdc8ff1c 100644 --- a/en/option/partial/rect-layout-width-height.md +++ b/en/option/partial/rect-layout-width-height.md @@ -9,6 +9,7 @@ {{ use: partial-rect-layout( hostName = ${hostName}, + version = ${version}, noZ = ${noZ}, prefix = ${prefix}, defaultLeft = ${defaultLeft}, @@ -19,9 +20,17 @@ #${prefix|default("#")} width(string|number) = ${defaultWidth|default("'auto'")} +{{ if: ${version} }} +{{ use: partial-version(version = ${version}) }} +{{ /if }} + Width of ${hostNameStr}. {{ if: !${defaultWidth} }}Adaptive by default.{{ /if }} #${prefix|default("#")} height(string|number) = ${defaultHeight|default("'auto'")} +{{ if: ${version} }} +{{ use: partial-version(version = ${version}) }} +{{ /if }} + Height of ${hostNameStr}. {{ if: !${defaultHeight} }}Adaptive by default.{{ /if }} diff --git a/en/option/partial/rect-layout.md b/en/option/partial/rect-layout.md index c0c70501..986fa56b 100644 --- a/en/option/partial/rect-layout.md +++ b/en/option/partial/rect-layout.md @@ -17,6 +17,10 @@ #${prefix|default("#")} left(string|number) = ${defaultLeft|default("'auto'")} +{{ if: ${version} }} +{{ use: partial-version(version = ${version}) }} +{{ /if }} + Distance between ${hostNameStr} and the left side of the container. `left` can be a pixel value like `20`; it can also be a percentage value relative to container width like `'20%'`; and it can also be `'left'`, `'center'`, or `'right'`. @@ -25,6 +29,10 @@ If the `left` value is set to be `'left'`, `'center'`, or `'right'`, then the co #${prefix|default("#")} top(string|number) = ${defaultTop|default("'auto'")} +{{ if: ${version} }} +{{ use: partial-version(version = ${version}) }} +{{ /if }} + Distance between ${hostNameStr} and the top side of the container. `top` can be a pixel value like `20`; it can also be a percentage value relative to container width like `'20%'`; and it can also be `'top'`, `'middle'`, or `'bottom'`. @@ -33,6 +41,10 @@ If the `top` value is set to be `'top'`, `'middle'`, or `'bottom'`, then the com #${prefix|default("#")} right(string|number) = ${defaultRight|default("'auto'")} +{{ if: ${version} }} +{{ use: partial-version(version = ${version}) }} +{{ /if }} + Distance between ${hostNameStr} and the right side of the container. `right` can be a pixel value like `20`; it can also be a percentage value relative to container width like `'20%'`. @@ -41,6 +53,10 @@ Distance between ${hostNameStr} and the right side of the container. #${prefix|default("#")} bottom(string|number) = ${defaultBottom|default("'auto'")} +{{ if: ${version} }} +{{ use: partial-version(version = ${version}) }} +{{ /if }} + Distance between ${hostNameStr} and the bottom side of the container. `bottom` can be a pixel value like `20`; it can also be a percentage value relative to container width like `'20%'`. diff --git a/en/option/series/bar.md b/en/option/series/bar.md index 4853db62..e19ad161 100644 --- a/en/option/series/bar.md +++ b/en/option/series/bar.md @@ -23,8 +23,7 @@ Bar chart shows different data through the height of a bar, which is used in [re seriesType = "bar", coordSysDefault = "'cartesian2d'", cartesian2d = true, - polar = true, - geo = false + polar = true ) }} ## roundCap(boolean) = false diff --git a/en/option/series/custom.md b/en/option/series/custom.md index 19a02808..d9fbfa91 100644 --- a/en/option/series/custom.md +++ b/en/option/series/custom.md @@ -108,8 +108,10 @@ chart.on('click', {element: 'aaa'}, function (params) { coordSysDefault = "'cartesian2d'", cartesian2d = true, polar = true, + singleAxis = true, geo = true, calendar = true, + matrix = true, none = true ) }} diff --git a/en/option/series/effectScatter.md b/en/option/series/effectScatter.md index 297824b1..360acc91 100644 --- a/en/option/series/effectScatter.md +++ b/en/option/series/effectScatter.md @@ -82,8 +82,10 @@ The brush type for ripples. options: `'stroke'` and `'fill'`. coordSysDefault = "'cartesian2d'", cartesian2d = true, polar = true, + singleAxis = true, geo = true, - calendar = true + calendar = true, + matrix = true ) }} {{ use: partial-symbol( diff --git a/en/option/series/funnel.md b/en/option/series/funnel.md index e8a54e84..fc5648ca 100644 --- a/en/option/series/funnel.md +++ b/en/option/series/funnel.md @@ -20,6 +20,17 @@ defaultColorBy = "'data'" ) }} +{{ use: partial-coord-sys( + version = '6.0.0', + seriesType = "funnel", + coordSysDefault = "'none'", + coordSysUsageDefault = "'box'", + none = true, + calendar = true, + matrix = true, + version = "6.0.0" +) }} + ## min(number) = 0 diff --git a/en/option/series/gauge.md b/en/option/series/gauge.md index c7b540df..10123642 100644 --- a/en/option/series/gauge.md +++ b/en/option/series/gauge.md @@ -22,6 +22,17 @@ {{ use: component-circular-layout() }} +{{ use: partial-coord-sys( + version = '6.0.0', + seriesType = "gauge", + coordSysDefault = "'none'", + coordSysUsageDefault = "'box'", + none = true, + calendar = true, + matrix = true, + version = "6.0.0" +) }} + ## radius(number|string) = '75%' diff --git a/en/option/series/graph.md b/en/option/series/graph.md index 0e335554..26639d17 100644 --- a/en/option/series/graph.md +++ b/en/option/series/graph.md @@ -23,12 +23,14 @@ Graph is a diagram to represent [nodes](~series-graph.nodes) and the [links](~se {{ use: partial-coord-sys( seriesType = "graph", - coordSysDefault = "null", + coordSysDefault = "'none'", none = true, cartesian2d = true, polar = true, + singleAxis = true, geo = true, - calendar = true + calendar = true, + matrix = true, ) }} ## center(Array) diff --git a/en/option/series/heatmap.md b/en/option/series/heatmap.md index fe2b6e11..52f07f9a 100644 --- a/en/option/series/heatmap.md +++ b/en/option/series/heatmap.md @@ -28,7 +28,8 @@ Here are the examples using it in rectangular coordinate and geographic coordina cartesian2d = true, polar = false, geo = true, - calendar = true + calendar = true, + matrix = true ) }} ## pointSize(number) = 20 diff --git a/en/option/series/line.md b/en/option/series/line.md index 79f16713..2d353163 100644 --- a/en/option/series/line.md +++ b/en/option/series/line.md @@ -28,6 +28,7 @@ Broken line chart relates all the data points [symbol](~series-line.symbol) by b coordSysDefault = "'cartesian2d'", cartesian2d = true, polar = true, + singleAxis = true, geo = false ) }} diff --git a/en/option/series/lines.md b/en/option/series/lines.md index c8b5caaf..84b47260 100644 --- a/en/option/series/lines.md +++ b/en/option/series/lines.md @@ -24,6 +24,7 @@ ECharts 2.x uses the `markLine` to draw the migrating effect, while in ECharts 3 coordSysDefault = "'geo'", cartesian2d = true, polar = false, + singleAxis = true, geo = true ) }} diff --git a/en/option/series/map.md b/en/option/series/map.md index 0aac1c8a..6615be25 100644 --- a/en/option/series/map.md +++ b/en/option/series/map.md @@ -25,6 +25,12 @@ Series of same [map type](~series-map.map) will show in one map. At this point, labelMargin = true ) }} +{{ use: partial-coord-sys( + seriesType = "map", + coordSysDefault = "'geo'", + geo = true +) }} + ## center(Array) Center of current view-port. It can be an array containing two `number`s in pixels or `string`s in percentage relative to the container width/height. diff --git a/en/option/series/pie.md b/en/option/series/pie.md index 140a04e8..0e7d6778 100644 --- a/en/option/series/pie.md +++ b/en/option/series/pie.md @@ -33,10 +33,12 @@ Since ECharts v4.6.0, we provide `'labelLine'` and `'edge'` two extra layouts. C {{ use: partial-coord-sys( seriesType = "pie", - coordSysDefault = "null", + coordSysDefault = "'none'", + coordSysUsageDefault = "'box'", none = true, geo = true, calendar = true, + matrix = true, version = "5.4.0" ) }} diff --git a/en/option/series/radar.md b/en/option/series/radar.md index 51c58b1f..6050528f 100644 --- a/en/option/series/radar.md +++ b/en/option/series/radar.md @@ -25,7 +25,7 @@ Here is the example of AQI data which is presented in radar chart. ## radarIndex(number) -Index of [radar](~radar) component that radar chart uses. +Index of [radar](~radar) (coordinate system) component that radar chart uses. {{ use: partial-symbol( seriesType = "radar", diff --git a/en/option/series/sankey.md b/en/option/series/sankey.md index 4ad79a43..bd99a0fa 100644 --- a/en/option/series/sankey.md +++ b/en/option/series/sankey.md @@ -36,6 +36,15 @@ In addition, the edge between two small rectangles in the diagram encodes the `l defaultHeight = 'null' ) }} +{{ use: partial-coord-sys( + version = '6.0.0', + seriesType = "sankey", + coordSysDefault = "'none'", + calendar = true, + matrix = true, + none = true +) }} + ## nodeWidth(number) = 20 diff --git a/en/option/series/scatter.md b/en/option/series/scatter.md index 80342da7..0d429036 100644 --- a/en/option/series/scatter.md +++ b/en/option/series/scatter.md @@ -23,7 +23,9 @@ It could be used with [rectangular coordinate](~grid) and [polar coordinate](~po coordSysDefault = "'cartesian2d'", cartesian2d = true, polar = true, + singleAxis = true, geo = true, + matrix = true, calendar = true ) }} diff --git a/en/option/series/sunburst.md b/en/option/series/sunburst.md index 1642da08..600e45ba 100644 --- a/en/option/series/sunburst.md +++ b/en/option/series/sunburst.md @@ -151,6 +151,15 @@ The sunburst chart supports data drilling by default, which means when a user cl defaultRadius = "[0, '75%']" ) }} +{{ use: partial-coord-sys( + version = '6.0.0', + seriesType = "sunburst", + coordSysDefault = "'none'", + calendar = true, + matrix = true, + none = true +) }} + ## data(Array) The data structure of [series-sunburst.data](~series-sunburst.data) is like tree. For example: diff --git a/en/option/series/themeRiver.md b/en/option/series/themeRiver.md index fde8ec7a..197f4012 100644 --- a/en/option/series/themeRiver.md +++ b/en/option/series/themeRiver.md @@ -44,9 +44,11 @@ What's more, the time attribute of the orinigal dataset would map to a single ti ** Notes: ** The positional information of the whole theme river view reuses the positional information of a single time axis, which are left, top, right and bottom. -## coordinateSystem(string) = "single" - -coordinate. The theme river adopts single time axis. +{{ use: partial-coord-sys( + seriesType = "themeRiver", + coordSysDefault = "'singleAxis'", + singleAxis = true, +) }} ## boundaryGap(Array) = ["10%", "10%"] diff --git a/en/option/series/tree.md b/en/option/series/tree.md index 2767600f..50c85c48 100644 --- a/en/option/series/tree.md +++ b/en/option/series/tree.md @@ -35,6 +35,15 @@ The tree diagram is mainly used to visualize the tree data structure, which is a defaultHeight = 'null' ) }} +{{ use: partial-coord-sys( + version = '6.0.0', + seriesType = "tree", + coordSysDefault = "'none'", + calendar = true, + matrix = true, + none = true +) }} + ## center(Array) Center of current view-port. It can be an array containing two `number`s in pixels or `string`s in percentage relative to the container width/height. diff --git a/en/option/series/treemap.md b/en/option/series/treemap.md index 47885af7..5516ada3 100644 --- a/en/option/series/treemap.md +++ b/en/option/series/treemap.md @@ -59,6 +59,15 @@ Notice: There are some difference in treemap configuration between ECharts3 and defaultHeight = '80%' ) }} +{{ use: partial-coord-sys( + version = '6.0.0', + seriesType = "treemap", + coordSysDefault = "'none'", + calendar = true, + matrix = true, + none = true +) }} + ## squareRatio(number) diff --git a/src/components/DocContent.vue b/src/components/DocContent.vue index 677414b1..accdc5e0 100644 --- a/src/components/DocContent.vue +++ b/src/components/DocContent.vue @@ -381,6 +381,15 @@ export default { margin: 0; padding: 5px 0; + thead th { + position: sticky; + top: 0; + background: #fffbea; + } + th, td { + font-size: 14px; + } + @include description-html-formatter; } diff --git a/tool/helper/compareVersions.js b/tool/helper/compareVersions.js new file mode 100644 index 00000000..41e93374 --- /dev/null +++ b/tool/helper/compareVersions.js @@ -0,0 +1,153 @@ + +/** + * Version format and comparison rules are based on Semver 2.0, + * but allow `1.1.1.1` (more than 3 parts), useful in practice. + * + * @return + * - `-1` if v1 < v2; + * - `0` if v1 == v2; + * - `1` if v1 > v2; + * - `null` if v1 or v2 is invalid. + * + * --- Test Cases --- + * expect(compareVersions('6.0', '6.0.1')).toEqual(-1); + * expect(compareVersions('6', '6.0.1')).toEqual(-1); + * expect(compareVersions(6, '6.0.1')).toEqual(-1); + * expect(compareVersions('6.1', '6.0.1')); // 1 + * expect(compareVersions('7', '6.0.1')).toEqual(1); + * expect(compareVersions(7, '6.0.1')).toEqual(1); + * expect(compareVersions('6.1', '6.1')).toEqual(0); + * expect(compareVersions('6.0', '6.1.0')).toEqual(-1); + * expect(compareVersions('6.2.9', '6.2.12')).toEqual(-1); + * expect(compareVersions('6.2.9', '6.2.90')).toEqual(-1); + * expect(compareVersions('6.12.1', '6.9.1')).toEqual(1); + * expect(compareVersions('6.90.1', '6.9.1')).toEqual(1); + * expect(compareVersions('6.1.1.3', '6.1.1.4')).toEqual(-1); + * expect(compareVersions('6.0.0-beta.1', '6.0.0-beta.2')).toEqual(-1); + * expect(compareVersions('6.0.0-beta.1', '6.1')).toEqual(-1); + * expect(compareVersions('6.0.0-beta.1', '6.0.0-1.0')).toEqual(1); // when pre-release mixed compare: numeric < alphanumeric + * expect(compareVersions('6.0.0.1-beta.1', '6.0.0.1-beta.2')).toEqual(-1); + * expect(compareVersions('6.1-beta.1', '6.1-beta.2')).toEqual(-1); + * expect(compareVersions('6.1-beta-.1', '6.1-beta-.2')).toEqual(-1); + * expect(compareVersions('6.1-beta-d.1', '6.1-beta-d.2')).toEqual(-1); + * expect(compareVersions('6-beta.1', '6-beta.2')).toEqual(-1); + * expect(compareVersions('6.0.0', '6.0.0-beta.1')).toEqual(1); + * expect(compareVersions('6.0.0-alpha', '6.0.0-beta')).toEqual(-1); + * expect(compareVersions('6.0.0-alpha', '6.0.0-alpha')).toEqual(0); + * expect(compareVersions('6.0.0-alpha', '6.0.0-beta')).toEqual(-1); + * expect(compareVersions('6.0.0-beta', '6.0.0-rc')).toEqual(-1); + * expect(compareVersions('1.0.0-zeta', '1.0.0-rc')).toEqual(1); // pre-release is compared in ASCII Lexical Order.); + * expect(compareVersions('6.0.0-a.b.c', '6.0.0-a.b.d')).toEqual(-1); + * expect(compareVersions('6.0.0-9', '6.0.0-12')).toEqual(-1); + * expect(compareVersions('6.0.0-9.b', '6.0.0-12.a')).toEqual(-1); + * expect(compareVersions('1.2.3+build.123', '1.2.3+build.125')).toEqual(0); + * expect(compareVersions('1.2.4+build.123', '1.2.3+build.125')).toEqual(1); + * expect(compareVersions('1.2.3-alpha.1+build.123', '1.2.3-alpha.1+build.125')).toEqual(0); + * expect(compareVersions('1.2.3-alpha.2+build.123', '1.2.3-alpha.1+build.125')).toEqual(1); + * expect(compareVersions('1.2.4-alpha.2+build.123', '1.2.3-alpha.3+build.125')).toEqual(1); + * expect(compareVersions('6.0.0', '6.0.0')).toEqual(0); + * expect(compareVersions('6.0.0-beta.1', '6.0.0-rc.1')).toEqual(-1); + * expect(compareVersions(null, '6.0.1')).toEqual(null); // any invalid, return null/undefined + * expect(compareVersions('abc', '6.0.0-abc.1')).toEqual(null); + * expect(compareVersions(true, '6.0.0-abc.1')).toEqual(null); + * expect(compareVersions('6.0.0-abc.01', '6.0.0-abc.01')).toEqual(null); // invalid pre-release part + * expect(compareVersions('6.a.b', '6.0.0')).toEqual(null); + * expect(compareVersions('6.a.b', '6.a.b')).toEqual(null); + * expect(compareVersions('6.0.1a', '6.0.1a')).toEqual(null); + * expect(compareVersions('6.0.1-', '6.0.1-')).toEqual(null); + * expect(compareVersions('06', '6')).toEqual(null); + * expect(compareVersions('6 .0.1', '6 .0.1')).toEqual(null); + * expect(compareVersions('6..1', '6..1')).toEqual(null); + * expect(compareVersions(' 6.0.1 ', '6.0.1')).toEqual(0); + */ +exports.compareVersions = function (v1, v2) { + if (typeof v1 === 'number') { + v1 += ''; + } + if (typeof v2 === 'number') { + v2 += ''; + } + // PENDING: use String#trim() at the start and end? + // Note: a `1.0-abc-d.1` is also a valid semver version, therefore, use regexp, rather than simply split by `-`. + const semverExtReg = /^\s*((?:0|[1-9]\d*)(?:\.(?:0|[1-9]\d*))*)(?:-((?:0|[1-9A-Za-z-][0-9A-Za-z-]*)(?:\.(?:0|[1-9A-Za-z-][0-9A-Za-z-]*))*))?(?:\+([0-9A-Za-z-]+(?:\.[0-9A-Za-z-]+)*))?\s*$/; + + function parse(versionInput) { + if (typeof versionInput === 'number') { // Only tolerate numbers. + versionInput += ''; + } + if (typeof versionInput !== 'string') { + return null; // Invalid input + } + const matched = versionInput.match(semverExtReg); + if (!matched) { + return null; // Invalid format + } + const main = matched[1].split('.'); + const preRelease = matched[2] ? matched[2].split('.') : []; + // The "build meta part" should be ignored in comparison. + return {main, preRelease}; + } + + function preReleasePartNumOrAlpha(part) { + // By semver, numeric < alphanumeric. + return /^\d+$/.test(part) ? 1 : 2; + } + + const parsed1 = parse(v1); + const parsed2 = parse(v2); + if (!parsed1 || !parsed2) { + return null; // Invalid input + } + + const main1 = parsed1.main; + const main2 = parsed2.main; + const main1Len = main1.length; + const main2Len = main2.length; + // Compare main parts + let count = Math.min(main1Len, main2Len); + for (let i = 0; i < count; i++) { + const main1Part = Number(main1[i]); + const main2Part = Number(main2[i]); + if (main1Part !== main2Part) { + return main1Part < main2Part ? -1 : 1; + } + } + if (main1Len !== main2Len) { + return main1Len < main2Len ? -1 : 1; + } + + const pre1 = parsed1.preRelease; + const pre2 = parsed2.preRelease; + const pre1Len = pre1.length; + const pre2Len = pre2.length; + if (!pre1Len && pre2Len) { // normal > pre-release + return 1; + } + if (pre1Len && !pre2Len) { // pre-release < normal + return -1; + } + + count = Math.min(pre1Len, pre2Len); + for (let i = 0; i < count; i++) { + let prePart1 = pre1[i]; + let prePart2 = pre2[i]; + const numOrAlpha1 = preReleasePartNumOrAlpha(prePart1); + const numOrAlpha2 = preReleasePartNumOrAlpha(prePart2); + if (numOrAlpha1 !== numOrAlpha2) { + return numOrAlpha1 - numOrAlpha2; + } + if (numOrAlpha1 === 1) { + prePart1 = Number(prePart1); + prePart2 = Number(prePart2); + } + // If both numeric, compare as numbers. + // else if both alphanumeric, compare as ASCII lexical order. + if (prePart1 !== prePart2) { + return prePart1 < prePart2 ? -1 : 1; + } + } + if (pre1Len !== pre2Len) { + return pre1Len < pre2Len ? -1 : 1; + } + return 0; +} diff --git a/tool/md2json.js b/tool/md2json.js index ec332373..35bc755e 100644 --- a/tool/md2json.js +++ b/tool/md2json.js @@ -3,6 +3,7 @@ const marked = require('marked'); const etpl = require('../dep/etpl'); const globby = require('globby'); const htmlparser2 = require('htmlparser2'); +const {compareVersions} = require('./helper/compareVersions'); async function convert(opts) { // globby does not support '\' yet @@ -20,6 +21,10 @@ async function convert(opts) { etplEngine.addFilter('default', function (source, defaultVal) { return (source === '' || source == null) ? defaultVal : source; }); + etplEngine.addFilter('minVersion', function (source, minVersionValue) { + const result = compareVersions(source, minVersionValue); + return (result == null || result < 0) ? minVersionValue : source; + }); const files = (await globby([mdPath])).filter(function (fileName) { return fileName.indexOf('__') !== 0; diff --git a/zh/option/component/data-zoom-slider.md b/zh/option/component/data-zoom-slider.md index 06ae2969..fd2c5eca 100644 --- a/zh/option/component/data-zoom-slider.md +++ b/zh/option/component/data-zoom-slider.md @@ -269,6 +269,16 @@ labelFormatter: function (value) { componentName = 'dataZoom-slider' ) }} +{{ use: partial-coord-sys( + version = '6.0.0', + nonSeriesComponentMainType = "dataZoom", + nonSeriesComponentSubType = "slider", + coordSysDefault = "'none'", + calendar = true, + matrix = true, + none = true +) }} + ## width(string|number) diff --git a/zh/option/component/geo-common.md b/zh/option/component/geo-common.md index 97cf07b2..28590a87 100644 --- a/zh/option/component/geo-common.md +++ b/zh/option/component/geo-common.md @@ -1,6 +1,12 @@ {{ target: geo-common }} +{{ if: ${inMap} }} +{{ var: componentNameInLink = 'series-map' }} +{{ else }} +{{ var: componentNameInLink = 'geo' }} +{{ /if }} + #${prefix} map(string) = '' 使用 [registerMap](api.html#echarts.registerMap) 注册的地图名称。 @@ -171,9 +177,13 @@ center: project([115.97, 29.71]) #${prefix} aspectScale(number) = 0.75 -这个参数用于 scale 地图的长宽比，如果设置了`projection`则无效。 +这个参数用于 scale 地图的长宽比。如果设置了 [proejction](~${componentNameInLink}.projection) 则无效。 + +地图最终计算得到的 `pixelWidth` 和 `pixelHeight` 将满足以下关系：`pixelWidth / pixelHeight = lngSpan / latSpan * aspectScale`（假设未指定 [proejction](~${componentNameInLink}.projection)，且 [preserveAspect](~${componentNameInLink}.preserveAspect) 设为保持长宽比）。 + +当不使用真正的投影公式（[proejction](~${componentNameInLink}.projection)）时，GeoJSON 里的经纬度会被线性映射到像素坐标。`aspectScale` 提供了一种简单方式，用于视觉上补偿这种映射所造成的形变（由于地球是球形，经度对应的物理尺寸在高纬度地区会收缩）。例如，`aspectScale` 可以通过以下公式粗略计算：`aspectScale = Math.cos(center_latitude * Math.PI / 180)`，这与正弦投影（sinusoidal projection）相似。 -最终的 `aspect` 的计算方式是：`geoBoundingRect.width / geoBoundingRect.height * aspectScale`。 +参见 [示例](${galleryEditorPath}geo-graph&edit=1&reset=1)。 #${prefix} boundingCoords(Array) = null diff --git a/zh/option/component/geo.md b/zh/option/component/geo.md index ae5f4b71..3eabf38c 100644 --- a/zh/option/component/geo.md +++ b/zh/option/component/geo.md @@ -35,6 +35,15 @@ geo 区域的颜色也可以被 map series 所控制，参见 [series-map.geoInd prefix = '#' ) }} +{{ use: partial-coord-sys( + version = '6.0.0', + nonSeriesComponentMainType = "geo", + coordSysDefault = "'none'", + calendar = true, + matrix = true, + none = true +) }} + ## regions(Array) 在地图中对特定的区域配置样式。 diff --git a/zh/option/component/grid.md b/zh/option/component/grid.md index a46fa252..46360a95 100644 --- a/zh/option/component/grid.md +++ b/zh/option/component/grid.md @@ -3,9 +3,13 @@ # grid(Object) -直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制[折线图](~series-line)，[柱状图](~series-bar)，[散点图（气泡图）](~series-scatter)。 +`grid 组件` 是一个矩形容器，用于绘制二维直角坐标系（`cartesian2d`）。一个 `cartesian2d` 坐标系由一个 [xAxis](~xAixs) 和一个 [yAxis](~yAxis) 构成。一个 `grid 组件` 中可以存在多个 `cartesian2d` 坐标系。即，一个 `grid 组件` 可以配置多个 [xAxis](~xAixs) 和多个 [yAxis](~yAxis)。 -在 ECharts 2.x 里单个 echarts 实例中最多只能存在一个 grid 组件，在 ECharts 3 中可以存在任意个 grid 组件。 +[xAxis](~xAixs) 和 [yAxis](~yAxis) 可以被多个 `cartesian2d` 坐标系共享。例如，一个 [xAxis](~xAixs) 和两个 [yAxis](~yAxis) 构成两个 `cartesian2d` 坐标系。 + +可以在 `grid 组件` 中绘制例如 [折线图](~series-line)，[柱状图](~series-bar)，[散点图（气泡图）](~series-scatter) 等等。 + +> 在 ECharts 2.x 里单个 echarts 实例中最多只能存在一个 grid 组件，自从 ECharts 3 开始可以存在任意多个 `grid 组件`。 **例如下面这个 Anscombe Quartet 的示例：** @@ -120,6 +124,7 @@ grid 区域是否包含坐标轴的[刻度标签](~yAxis.axisLabel)。 {{ use: partial-rect-layout-width-height( hostName = "外边界（`outerBounds`）", + version = "6.0.0", noZ = true, prefix = '##', defaultLeft = 0, @@ -151,3 +156,11 @@ grid 区域是否包含坐标轴的[刻度标签](~yAxis.axisLabel)。 {{ use: partial-tooltip-in-coords() }} +{{ use: partial-coord-sys( + version = '6.0.0', + nonSeriesComponentMainType = "grid", + coordSysDefault = "'none'", + matrix = true, + calendar = true, + none = true +) }} diff --git a/zh/option/component/legend.md b/zh/option/component/legend.md index 998c095e..85e2c64e 100644 --- a/zh/option/component/legend.md +++ b/zh/option/component/legend.md @@ -132,6 +132,15 @@ const option = { componentName = "图例（legend）" ) }} +{{ use: partial-coord-sys( + version = '6.0.0', + nonSeriesComponentMainType = "legend", + coordSysDefault = "'none'", + matrix = true, + calendar = true, + none = true +) }} + ## orient(string) = 'horizontal' diff --git a/zh/option/component/parallel.md b/zh/option/component/parallel.md index 97e15d65..c143a78d 100644 --- a/zh/option/component/parallel.md +++ b/zh/option/component/parallel.md @@ -452,6 +452,15 @@ const option = { defaultBottom = 60 ) }} +{{ use: partial-coord-sys( + version = '6.0.0', + nonSeriesComponentMainType = "parallel", + coordSysDefault = "'none'", + matrix = true, + calendar = true, + none = true +) }} + ## layout(string) = 'horizontal' diff --git a/zh/option/component/polar.md b/zh/option/component/polar.md index a8ac7946..3d5b2b4c 100644 --- a/zh/option/component/polar.md +++ b/zh/option/component/polar.md @@ -76,5 +76,14 @@ const option = { disableArray = false ) }} +{{ use: partial-coord-sys( + version = '6.0.0', + nonSeriesComponentMainType = "polar", + coordSysDefault = "'none'", + matrix = true, + calendar = true, + none = true +) }} + {{ use: partial-tooltip-in-coords() }} diff --git a/zh/option/component/radar.md b/zh/option/component/radar.md index ea58d769..7998a9e8 100644 --- a/zh/option/component/radar.md +++ b/zh/option/component/radar.md @@ -56,6 +56,15 @@ const option = { defaultRadius = "75%" ) }} +{{ use: partial-coord-sys( + version = '6.0.0', + nonSeriesComponentMainType = "radar", + coordSysDefault = "'none'", + matrix = true, + calendar = true, + none = true +) }} + ## startAngle(number) = 90 坐标系起始角度，也就是第一个指示器轴的角度。 diff --git a/zh/option/component/timeline.md b/zh/option/component/timeline.md index 99a961ee..e03b98e4 100644 --- a/zh/option/component/timeline.md +++ b/zh/option/component/timeline.md @@ -543,6 +543,15 @@ const option = { componentName = '时间轴（timeline）' ) }} +{{ use: partial-coord-sys( + version = '6.0.0', + nonSeriesComponentMainType = "timeline", + coordSysDefault = "'none'", + matrix = true, + calendar = true, + none = true +) }} + ## padding(number|Array) = 5 diff --git a/zh/option/component/title.md b/zh/option/component/title.md index 5fa0b625..4520c13b 100644 --- a/zh/option/component/title.md +++ b/zh/option/component/title.md @@ -133,6 +133,15 @@ const option = { componentName = "标题（title）" ) }} +{{ use: partial-coord-sys( + version = '6.0.0', + nonSeriesComponentMainType = "title", + coordSysDefault = "'none'", + matrix = true, + calendar = true, + none = true +) }} + {{ use: partial-component-common-style( componentName = "标题", prefix = '#', diff --git a/zh/option/component/toolbox.md b/zh/option/component/toolbox.md index 4c199364..b05af9f2 100644 --- a/zh/option/component/toolbox.md +++ b/zh/option/component/toolbox.md @@ -563,6 +563,15 @@ feature: { componentName = "工具栏（toolbox）" ) }} +{{ use: partial-coord-sys( + version = '6.0.0', + nonSeriesComponentMainType = "toolbox", + coordSysDefault = "'none'", + matrix = true, + calendar = true, + none = true +) }} + ## tooltip(Object) 工具箱的 tooltip 配置，配置项同 [tooltip](~tooltip)。默认不显示，可以在需要特殊定制文字样式（尤其是想用自定义 CSS 控制文字样式）的时候开启 tooltip，如下示例： diff --git a/zh/option/component/visual-map-continuous.md b/zh/option/component/visual-map-continuous.md index b2f64bab..5c2e60d7 100644 --- a/zh/option/component/visual-map-continuous.md +++ b/zh/option/component/visual-map-continuous.md @@ -172,7 +172,8 @@ chart.setOption({visualMap: {range: null}}); // 再把 range 设为 null。 两端文字主体之间的距离，单位为px。参见 [visualMap-continuous.text](~visualMap-continuous.text) {{ use: partial-visual-map-common( - visualMapName = 'visualMap-continuous' + visualMapName = 'visualMap-continuous', + visualMapSubType = 'continuous' ) }} ## formatter(string|Function) diff --git a/zh/option/component/visual-map-piecewise.md b/zh/option/component/visual-map-piecewise.md index d478d292..e672b253 100644 --- a/zh/option/component/visual-map-piecewise.md +++ b/zh/option/component/visual-map-piecewise.md @@ -233,7 +233,8 @@ symbol的设置参见 [visualMap-piecewise.inRange](~visualMap-piecewise.inRange 当他们没有进行指定时，取此 `itemSymbol` 为默认值（但是只在 visualMap 组件上使用，不在 chart 中使用）。 {{ use: partial-visual-map-common( - visualMapName = 'visualMap-piecewise' + visualMapName = 'visualMap-piecewise', + visualMapSubType = 'piecewise' ) }} ## formatter(string|Function) diff --git a/zh/option/component/visual-map.md b/zh/option/component/visual-map.md index 15c89b4e..be536530 100644 --- a/zh/option/component/visual-map.md +++ b/zh/option/component/visual-map.md @@ -340,6 +340,16 @@ visualMap 组件中，`控制器` 的 `inRange` `outOfRange` 设置。如果没 defaultBottom = "0" ) }} +{{ use: partial-coord-sys( + version = '6.0.0', + nonSeriesComponentMainType = "visualMap", + nonSeriesComponentSubType = ${visualMapSubType}, + coordSysDefault = "'none'", + matrix = true, + calendar = true, + none = true +) }} + ## orient(string) = 'vertical' 如何放置 visualMap 组件，水平（`'horizontal'`）或者竖直（`'vertical'`）。 diff --git a/zh/option/partial/coord-sys.md b/zh/option/partial/coord-sys.md index 9111c248..c6d18428 100644 --- a/zh/option/partial/coord-sys.md +++ b/zh/option/partial/coord-sys.md @@ -1,125 +1,333 @@ {{ target: partial-coord-sys }} +{{ if: ${seriesType} }} +{{ var: componentNameInLink = 'series-' + ${seriesType} }} +{{ elif: ${nonSeriesComponentSubType} }} +{{ var: componentNameInLink = ${nonSeriesComponentMainType} + '-' + ${nonSeriesComponentSubType} }} +{{ else }} +{{ var: componentNameInLink = ${nonSeriesComponentMainType} }} +{{ /if }} + +{{ if: ${coordSysUsageSupportData} == null }} +{{ if: ${seriesType} }} +{{ var: coordSysUsageSupportData = true }} +{{ /if }} +{{ /if }} + +{{ if: ${coordSysUsageSupportBox} == null }} +{{ if: ${nonSeriesComponentMainType} }} +{{ var: coordSysUsageSupportBox = true }} +{{ /if }} +{{ /if }} + +{{ if: ${coordSysUsageDefault} == null }} +{{ if: ${coordSysUsageSupportData} }} +{{ var: coordSysUsageDefault = "'data'" }} +{{ else }} +{{ var: coordSysUsageDefault = "'box'" }} +{{ /if }} +{{ /if }} + + ## coordinateSystem(string) = ${coordSysDefault} {{ if: ${version} }} -{{ use: partial-version( - version = ${version} -) }} +{{ use: partial-version(version = ${version}) }} {{ /if }} -该系列使用的坐标系，可选： +指定另一个坐标系组件，本 `${componentNameInLink}` 布局在那个坐标系中。 + +可选值： {{ if: ${none} }} -+ `null` 或者 `'none'` ++ `null`、`undefined` 或者 `'none'` - 无坐标系。 + 不布局在任何坐标系中。自己独立完成布局。 {{ /if }} {{ if: ${cartesian2d} }} + `'cartesian2d'` - 使用二维的直角坐标系（也称笛卡尔坐标系），通过 [xAxisIndex](~series-${seriesType}.xAxisIndex), [yAxisIndex](~series-${seriesType}.yAxisIndex)指定相应的坐标轴组件。 + 布局在一个二维 [直角坐标系（也称笛卡尔坐标系）](~grid) 中。当一个 ECharts 实例中存在多个 x 坐标轴（`xAxis`）时或者多个 y 坐标轴（`yAxis`）时，须通过 [xAxisIndex](~${componentNameInLink}.xAxisIndex) 和 [yAxisIndex](~${componentNameInLink}.yAxisIndex) 或者 [xAxisId](~${componentNameInLink}.xAxisId) 和 [yAxisId](~${componentNameInLink}.yAxisId) 指定所使用的坐标轴。 + + 注：一些常用的系列，例如 [折线图（series-line）](~series-line), [柱状图（series-bar）](~series-bar) 等，不能直接布局于 [矩阵坐标系（matrix）](~matrix) 或者 [日历坐标系（calendar）](~calendar) 中，但是他们能布局在 [直角坐标系（grid）](~grid) 中，然后这个 [直角坐标系（grid）](~grid) 可以布局在 [矩阵坐标系（matrix）](~matrix) 或 [日历坐标系（calendar）](~calendar) 中。 {{ /if }} {{ if: ${polar} }} + `'polar'` - 使用极坐标系，通过 [polarIndex](~series-${seriesType}.polarIndex) 指定相应的极坐标组件 + 布局在一个 [极坐标系](~polar) 中。当一个 ECharts 实例中存在多个极坐标系时，须通过 [polarIndex](~${componentNameInLink}.polarIndex) 或 [polarId](~${componentNameInLink}.polarId) 指定所使用的极坐标系。 {{ /if }} {{ if: ${geo} }} + `'geo'` - 使用地理坐标系，通过 [geoIndex](~series-${seriesType}.geoIndex) 指定相应的地理坐标系组件。 + 布局在一个 [地理坐标系](~geo) 中。当一个 ECharts 实例中存在多个地理坐标系时，须通过 [geoIndex](~${componentNameInLink}.geoIndex) 或 [geoId](~${componentNameInLink}.geoId) 指定所使用的地理坐标系。{{ if: ${seriesType} === 'pie' }} + + 参见示例 [地理坐标系中的饼图](${galleryEditorPath}map-iceland-pie&edit=1&reset=1)。{{ /if }} +{{ /if }} + +{{ if: ${singleAxis} }} ++ `'singleAxis'` + + 布局在一个 [单轴坐标系](~singleAxis) 中。当一个 ECharts 实例中存在多个单轴坐标系时，须通过 [singleAxisIndex](~${componentNameInLink}.singleAxisIndex) 或 [singleAxisId](~${componentNameInLink}.singleAxisId) 指定所使用的单轴标系。 {{ /if }} {{ if: ${parallel} }} + `'parallel'` - 使用平行坐标系，通过 [parallelIndex](~series-${seriesType}.parallelIndex) 指定相应的平行坐标系组件。 + 布局在一个 [平行坐标系](~parallel) 中。当一个 ECharts 实例中存在多个平行坐标系时，须通过 [parallelIndex](~${componentNameInLink}.parallelIndex) 或 [parallelId](~${componentNameInLink}.parallelId) 指定所使用的平行坐标系。 {{ /if }} {{ if: ${calendar} }} + `'calendar'` - 使用日历坐标系，通过 [calendarIndex](~series-${seriesType}.calendarIndex) 指定相应的日历坐标系组件。 + 布局在一个 [日历坐标系](~calendar) 中。当一个 ECharts 实例中存在多个日历坐标系时，须通过 [calendarIndex](~${componentNameInLink}.calendarIndex) 或 [calendarId](~${componentNameInLink}.calendarId) 指定所使用的日历坐标系。 {{ /if }} -{{ if: ${none} }} -+ `'none'` +{{ if: ${matrix} }} ++ `'matrix'` + + 布局在一个 [矩阵坐标系](~matrix)中。当一个 ECharts 实例中存在多个矩阵坐标系时，须通过 [matrixIndex](~${componentNameInLink}.matrixIndex) 或 [matrixId](~${componentNameInLink}.matrixId) 指定所使用的矩阵坐标系。{{if: ${nonSeriesComponentMainType} === 'grid' }} - 不使用坐标系。 + 参见示例 [矩阵坐标系中直角坐标系](${galleryEditorPath}matrix-cartesian-tiny&edit=1&reset=1)。 + {{ /if }} {{ /if }} + +**下表总结了“某系列或组件是否支持布局在某坐标系上”：** + +最左列列出了要布局的系列和组件（坐标系本身也是组件），最上行列出了所基于的坐标系。 + +| | no coord sys | [grid](~grid) (cartesian2d) | [polar](~polar) | [geo](~geo) | [singleAxis](~singleAxis) | [radar](~radar) | [parallel](~parallel) | [calendar](~calendar) | [matrix](~matrix) | +|------------------------------------------------|----------|----------|---------|----------|----------|----------|----------| +| [grid](~grid) (cartesian2d) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | +| [polar](~polar) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | +| [geo](~geo) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | +| [singleAxis](~singleAxis) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | +| [calendar](~calendar) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | +| [matrix](~matrix) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | +| [series-line](~series-line) | ❌ | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ (✅ 如果通过其他坐标系，如 [grid](~grid)) | ❌ (✅ 如果通过其他坐标系，如 [grid](~grid)) | +| [series-bar](~series-bar) | ❌ | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ (✅ 如果通过其他坐标系，如 [grid](~grid)) | ❌ (✅ 如果通过其他坐标系，如 [grid](~grid)) | +| [series-pie](~series-pie) | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ✅ | ✅ | +| [series-scatter](~series-scatter) | ❌ | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ✅ | ✅ | +| [series-effectScatter](~series-effectScatter) | ❌ | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ✅ | ✅ | +| [series-radar](~series-radar) | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ❌ | ❌ (✅ 如果通过 [radar](~radar) 坐标系) | ❌ (✅ 如果通过 [radar](~radar) 坐标系) | +| [series-tree](~series-tree) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | +| [series-treemap](~series-treemap) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | +| [series-sunburst](~series-sunburst) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | +| [series-boxplot](~series-boxplot) | ❌ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ (✅ 如果通过其他坐标系，如 [grid](~grid)) | ❌ (✅ 如果通过其他坐标系，如 [grid](~grid)) | +| [series-candlestick](~series-candlestick) | ❌ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ (✅ 如果通过其他坐标系，如 [grid](~grid)) | ❌ (✅ 如果通过其他坐标系，如 [grid](~grid)) | +| [series-heatmap](~series-heatmap) | ❌ | ✅ | ❌ | ✅ | ❌ | ❌ | ❌ | ✅ | ✅ | +| [series-map](~series-map) | ✅ (create a geo coord sys exclusively) | ❌ | ❌ | ✅ | ❌ | ❌ | ❌ | ✅ | ✅ | +| [series-parallel](~series-parallel) | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ❌ (✅ 如果通过 [parallel](~parallel) 坐标系) | ❌ (✅ 如果通过 [parallel](~parallel) 坐标系) | +| [series-lines](~series-lines) | ❌ | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ (✅ 如果通过其他坐标系，如 [geo](~geo)) | ❌ (✅ 如果通过其他坐标系，如 [geo](~geo)) | +| [series-graph](~series-graph) | ✅ (create a "view" coord sys exclusively) | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | ✅ | ✅ | +| [series-sankey](~series-sankey) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | +| [series-funnel](~series-funnel) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | +| [series-gauge](~series-gauge) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | +| [series-pictorialBar](~series-pictorialBar) | ❌ | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ (✅ 如果通过其他坐标系，如 [grid](~grid)) | ❌ (✅ 如果通过其他坐标系，如 [grid](~grid)) | +| [series-themeRiver](~series-themeRiver) | ❌ | ❌ | ❌ | ❌ | ✅ | ❌ | ❌ | ❌ (✅ 如果通过其他坐标系，如 [singleAxis](~singleAxis)) | ❌ (✅ 如果通过其他坐标系，如 [singleAxis](~singleAxis)) | +| [series-chord](~series-chord) | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ✅ | ✅ | +| [title](~title) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | +| [legend](~legend) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | +| [dataZoom](~dataZoom) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | +| [visualMap](~visualMap) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | +| [toolbox](~toolbox) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | +| [timeline](~timeline) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | +| [thumbnail](~thumbnail) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | + +也参见 [${componentNameInLink}.coordinateSystemUsage](~${componentNameInLink}.coordinateSystemUsage)。 + + +## coordinateSystemUsage(string) = ${coordSysUsageDefault} + +{{ use: partial-version(version = ${version|minVersion('6.0.0')}) }} + +如何在指定的 [坐标系](~${componentNameInLink}.coordinateSystem) 上布局本 `${componentNameInLink}`。 + +在大多数情况下，无需显式指定 `coordinateSystemUsage`，除非默认行为不符合预期。 + +可选值： +- `'data'`：{{ if: !${coordSysUsageSupportData} }}**（不适用于 [${componentNameInLink}](~${componentNameInLink})）**{{ /if }} + + 此系列的每个数据项（例如，每个 `series.data[i]`）将独立地在指定的坐标系进行布局。 + 注：当前没有任何“非系列组件”支持 `coordinateSystemUsage: 'data'`。 + +- `'box'`：{{ if: !${coordSysUsageSupportBox} }}**（不适用于 [${componentNameInLink}](~${componentNameInLink})）**{{ /if }} + + 此系列或组件作为一个整体，在指定的坐标系中进行布局——即根据坐标系计算整体的包围盒或基础锚点。 + + - 例如，[grid 组件](~grid) 可以布局在 [matrix 坐标系](~matrix) 或 [calendar 坐标系](~calendar) 中，这时其布局矩形是由 [${componentNameInLink}.coords](~${componentNameInLink}.coords) 在坐标系中计算出来的。参见示例：[矩阵中的小型直角坐标系](${galleryEditorPath}matrix-cartesian-tiny&edit=1&reset=1)。 + - 又如，[饼图系列](~series-pie) 或 [和弦图系列](~series-chord) 可以布局在 [geo 坐标系](~geo) 或 [cartesian2d 坐标系](~grid) 中，这时其中心点是由 [series-pie.coords](~series-pie.coords) 或 [series-pie.center](~series-pie.center) 在坐标系中计算出来的。参见示例：[地理坐标系中的饼图](${galleryEditorPath}map-iceland-pie&edit=1&reset=1)。 + +{{ if: ${seriesType} }} +只有少数系列同时支持 `coordinateSystemUsage: 'data'` 和 `coordinateSystemUsage: 'box'`，如：[series-graph](~series-graph)、[series-map](~series-map)。例如，在 [例子 coordinateSystemUsage: 'data'](${galleryEditorPath}matrix-graph&edit=1&reset=1) 中，关系图每个节点分别布局在矩阵坐标系中，而在 [例子 coordinateSystemUsage: 'box'](${galleryEditorPath}doc-example/matrix-graph-box&edit=1&reset=1) 中，关系图系列整体被布局在一个单元格中。 + +大多数系列仅支持 `coordinateSystemUsage: 'data'`，例如：[series-line](~series-line)、[series-bar](~series-bar)、[series-scatter](~series-scatter)。 + +同时，一些系列仅支持 `coordinateSystemUsage: 'box'`，例如：[series-pie](~series-pie)（示例：[地理坐标系中的饼图](${galleryEditorPath}map-iceland-pie&edit=1&reset=1)）、[series-tree](~series-tree)、[series-treemap](~series-treemap)、[series-sankey](~series-sankey)。 +{{ /if }} + +另参考：[${componentNameInLink}.coordinateSystem](~${componentNameInLink}.coordinateSystem)。 + +## coord(Array|string) + +{{ use: partial-version(version = ${version|minVersion('6.0.0')}) }} + +当 [coordinateSystemUsage](~${componentNameInLink}.coordinateSystemUsage) 为 `'box'` 时, `coord` 被输入给坐标系，计算得到布局位置（布局盒或者中心点）。 + +例子：[微型直角坐标系矩阵](${galleryEditorPath}matrix-cartesian-tiny&edit=1&reset=1), [矩阵中的关系图](${galleryEditorPath}doc-example/matrix-graph-box&edit=1&reset=1). + +{{ if: ${seriesType} === 'pie' }} +在此场景下，[series-pie.center](~series-pie.center) 和 [series-pie.coord](~series-pie.coord) 起同样作用。 + +[例子：地理坐标系中的饼图](${galleryEditorPath}map-iceland-pie&edit=1&reset=1) +{{ /if }} + +> 注：当 [coordinateSystemUsage](~${componentNameInLink}.coordinateSystemUsage) 为 `'data'` 时，输入给坐标系的是 `series.data[i]` 而非此 `coord`。 + + {{ if: ${cartesian2d} }} ## xAxisIndex(number) = 0 {{ if: ${version} }} -{{ use: partial-version( - version = ${version} -) }} +{{ use: partial-version(version = ${version}) }} {{ /if }} -使用的 [x 轴](~xAxis)的 index，在单个图表实例中存在多个 x 轴的时候有用。 +布局时所基于的 [x 轴](~xAxis) 的 index。当一个 ECharts 实例中存在多个 x 轴时，用其指定所使用的 x 轴。 + +## xAxisId(number) = undefined + +{{ if: ${version} }} +{{ use: partial-version(version = ${version}) }} +{{ /if }} + +布局时所基于的 [x 轴](~xAxis) 的 id。当一个 ECharts 实例中存在多个 x 轴时，用其指定所使用的 x 轴。 ## yAxisIndex(number) = 0 {{ if: ${version} }} -{{ use: partial-version( - version = ${version} -) }} +{{ use: partial-version(version = ${version}) }} {{ /if }} -使用的 [y 轴](~yAxis)的 index，在单个图表实例中存在多个 y轴的时候有用。 +布局时所基于的 [y 轴](~yAxis) 的 index。当一个 ECharts 实例中存在多个 y轴时，用其指定所使用的 y 轴。 + +## yAxisId(number) = undefined + +{{ if: ${version} }} +{{ use: partial-version(version = ${version}) }} +{{ /if }} + +布局时所基于的 [y 轴](~yAxis) 的 id。当一个 ECharts 实例中存在多个 y轴时，用其指定所使用的 x 轴。 {{ /if }} {{ if: ${polar} }} ## polarIndex(number) = 0 {{ if: ${version} }} -{{ use: partial-version( - version = ${version} -) }} +{{ use: partial-version(version = ${version}) }} +{{ /if }} + +布局时所基于的 [极坐标系](~polar) 的 index。当一个 ECharts 实例中存在多个极坐标系时，用其指定所使用的坐标系。 + +## polarId(number) = undefined + +{{ if: ${version} }} +{{ use: partial-version(version = ${version}) }} {{ /if }} -使用的[极坐标系](~polar)的 index，在单个图表实例中存在多个极坐标系的时候有用。 +布局时所基于的 [极坐标系](~polar) 的 id。当一个 ECharts 实例中存在多个极坐标系时，用其指定所使用的坐标系。 +{{ /if }} + +{{ if: ${singleAxis} }} +## singleAxisIndex(number) = 0 + +{{ if: ${version} }} +{{ use: partial-version(version = ${version}) }} +{{ /if }} + +布局时所基于的 [单轴标系](~singleAxis) 的 index。当一个 ECharts 实例中存在多个单轴坐标系时，用其指定所使用的坐标系。 + +## singleAxisId(number) = undefined + +{{ if: ${version} }} +{{ use: partial-version(version = ${version}) }} +{{ /if }} + +布局时所基于的 [单轴标系](~singleAxis) 的 id。当一个 ECharts 实例中存在多个单轴坐标系时，用其指定所使用的坐标系。 {{ /if }} {{ if: ${geo} }} ## geoIndex(number) = 0 {{ if: ${version} }} -{{ use: partial-version( - version = ${version} -) }} +{{ use: partial-version(version = ${version}) }} +{{ /if }} + +布局时所基于的 [地理坐标系](~geo) 的 index。当一个 ECharts 实例中存在多个地理坐标系时，用其指定所使用的坐标系。 + +## geoId(number) = undefined + +{{ if: ${version} }} +{{ use: partial-version(version = ${version}) }} {{ /if }} -使用的[地理坐标系](~geo)的 index，在单个图表实例中存在多个地理坐标系的时候有用。 +布局时所基于的 [地理坐标系](~geo) 的 id。当一个 ECharts 实例中存在多个地理坐标系时，用其指定所使用的坐标系。 {{ /if }} {{ if: ${parallel} }} ## parallelIndex(number) = 0 {{ if: ${version} }} -{{ use: partial-version( - version = ${version} -) }} +{{ use: partial-version(version = ${version}) }} {{ /if }} -使用的[平行坐标系](~parallel)的 index，在单个图表实例中存在多个平行坐标系的时候有用。 +布局时所基于的 [平行坐标系](~parallel) 的 index。当一个 ECharts 实例中存在多个平行坐标系时，用其指定所使用的坐标系。 + +## parallelId(number) = undefined + +{{ if: ${version} }} +{{ use: partial-version(version = ${version}) }} +{{ /if }} + +布局时所基于的 [平行坐标系](~parallel) 的 id。当一个 ECharts 实例中存在多个平行坐标系时，用其指定所使用的坐标系。 {{ /if }} {{ if: ${calendar} }} ## calendarIndex(number) = 0 {{ if: ${version} }} -{{ use: partial-version( - version = ${version} -) }} +{{ use: partial-version(version = ${version}) }} +{{ /if }} + +布局时所基于的 [日历坐标系](~calendar) 的 index。当一个 ECharts 实例中存在多个日历坐标系时，用其指定所使用的坐标系。 + +## calendarId(number) = undefined + +{{ if: ${version} }} +{{ use: partial-version(version = ${version}) }} +{{ /if }} + +布局时所基于的 [日历坐标系](~calendar) 的 id。当一个 ECharts 实例中存在多个日历坐标系时，用其指定所使用的坐标系。 +{{ /if }} + +{{ if: ${matrix} }} +## matrixIndex(number) = 0 + +{{ if: ${version} }} +{{ use: partial-version(version = ${version}) }} +{{ /if }} + +布局时所基于的 [矩阵坐标系](~matrix) 的 index。当一个 ECharts 实例中存在多个矩阵坐标系时，用其指定所使用的坐标系。 + +## matrixId(number) = undefined + +{{ if: ${version} }} +{{ use: partial-version(version = ${version}) }} {{ /if }} -使用的[日历坐标系](~calendar)的 index，在单个图表实例中存在多个日历坐标系的时候有用。 +布局时所基于的 [矩阵坐标系](~matrix) 的 id。当一个 ECharts 实例中存在多个矩阵坐标系时，用其指定所使用的坐标系。 {{ /if }} diff --git a/zh/option/partial/rect-layout-width-height.md b/zh/option/partial/rect-layout-width-height.md index 0594a455..1594075f 100644 --- a/zh/option/partial/rect-layout-width-height.md +++ b/zh/option/partial/rect-layout-width-height.md @@ -9,6 +9,7 @@ {{ use: partial-rect-layout( hostName = ${hostName}, + version = ${version}, noZ = ${noZ}, prefix = ${prefix}, defaultLeft = ${defaultLeft}, @@ -21,11 +22,19 @@ +{{ if: ${version} }} +{{ use: partial-version(version = ${version}) }} +{{ /if }} + ${hostNameStr}的宽度。{{ if: !${defaultWidth} }}默认自适应。{{ /if }} #${prefix|default("#")} height(string|number) = ${defaultHeight|default("'auto'")} +{{ if: ${version} }} +{{ use: partial-version(version = ${version}) }} +{{ /if }} + ${hostNameStr}的高度。{{ if: !${defaultHeight} }}默认自适应。{{ /if }} diff --git a/zh/option/partial/rect-layout.md b/zh/option/partial/rect-layout.md index 1b58267e..987473d1 100644 --- a/zh/option/partial/rect-layout.md +++ b/zh/option/partial/rect-layout.md @@ -19,6 +19,10 @@ +{{ if: ${version} }} +{{ use: partial-version(version = ${version}) }} +{{ /if }} + ${hostNameStr}离容器左侧的距离。 `left` 的值可以是像 `20` 这样的具体像素值，可以是像 `'20%'` 这样相对于容器高宽的百分比，也可以是 `'left'`, `'center'`, `'right'`。 @@ -29,6 +33,10 @@ ${hostNameStr}离容器左侧的距离。 +{{ if: ${version} }} +{{ use: partial-version(version = ${version}) }} +{{ /if }} + ${hostNameStr}离容器上侧的距离。 `top` 的值可以是像 `20` 这样的具体像素值，可以是像 `'20%'` 这样相对于容器高宽的百分比，也可以是 `'top'`, `'middle'`, `'bottom'`。 @@ -39,6 +47,10 @@ ${hostNameStr}离容器上侧的距离。 +{{ if: ${version} }} +{{ use: partial-version(version = ${version}) }} +{{ /if }} + ${hostNameStr}离容器右侧的距离。 `right` 的值可以是像 `20` 这样的具体像素值，可以是像 `'20%'` 这样相对于容器高宽的百分比。 @@ -49,6 +61,10 @@ ${hostNameStr}离容器右侧的距离。 +{{ if: ${version} }} +{{ use: partial-version(version = ${version}) }} +{{ /if }} + ${hostNameStr}离容器下侧的距离。 bottom 的值可以是像 `20` 这样的具体像素值，可以是像 `'20%'` 这样相对于容器高宽的百分比。 diff --git a/zh/option/series/custom.md b/zh/option/series/custom.md index ec4cd59e..83d71a12 100644 --- a/zh/option/series/custom.md +++ b/zh/option/series/custom.md @@ -97,8 +97,10 @@ chart.on('click', {element: 'aaa'}, function (params) { coordSysDefault = "'cartesian2d'", cartesian2d = true, polar = true, + singleAxis = true, geo = true, calendar = true, + matrix = true, none = true ) }} diff --git a/zh/option/series/effectScatter.md b/zh/option/series/effectScatter.md index 8cfa392d..cba83a27 100644 --- a/zh/option/series/effectScatter.md +++ b/zh/option/series/effectScatter.md @@ -99,8 +99,10 @@ const option = { coordSysDefault = "'cartesian2d'", cartesian2d = true, polar = true, + singleAxis = true, geo = true, - calendar = true + calendar = true, + matrix = true ) }} {{ use: partial-symbol( diff --git a/zh/option/series/funnel.md b/zh/option/series/funnel.md index f7262bc6..1049dbf4 100644 --- a/zh/option/series/funnel.md +++ b/zh/option/series/funnel.md @@ -42,6 +42,17 @@ option = { defaultColorBy = "'data'" ) }} +{{ use: partial-coord-sys( + version = '6.0.0', + seriesType = "funnel", + coordSysDefault = "'none'", + coordSysUsageDefault = "'box'", + none = true, + calendar = true, + matrix = true, + version = "6.0.0" +) }} + ## min(number) = 0 diff --git a/zh/option/series/gauge.md b/zh/option/series/gauge.md index 186d505b..d235567c 100644 --- a/zh/option/series/gauge.md +++ b/zh/option/series/gauge.md @@ -35,6 +35,17 @@ const option = { {{ use: component-circular-layout() }} +{{ use: partial-coord-sys( + version = '6.0.0', + seriesType = "gauge", + coordSysDefault = "'none'", + coordSysUsageDefault = "'box'", + none = true, + calendar = true, + matrix = true, + version = "6.0.0" +) }} + ## radius(number|string) = '75%' diff --git a/zh/option/series/graph.md b/zh/option/series/graph.md index f7ebb50b..3b8a6136 100644 --- a/zh/option/series/graph.md +++ b/zh/option/series/graph.md @@ -32,12 +32,14 @@ option.series[0].data.forEach(function (item) { {{ use: partial-coord-sys( seriesType = "graph", - coordSysDefault = "null", + coordSysDefault = "'none'", none = true, cartesian2d = true, polar = true, + singleAxis = true, geo = true, - calendar = true + calendar = true, + matrix = true ) }} ## center(Array) diff --git a/zh/option/series/heatmap.md b/zh/option/series/heatmap.md index a43f26a8..53c233a1 100644 --- a/zh/option/series/heatmap.md +++ b/zh/option/series/heatmap.md @@ -79,7 +79,8 @@ option = { cartesian2d = true, polar = false, geo = true, - calendar = true + calendar = true, + matrix = true ) }} ## pointSize(number) = 20 diff --git a/zh/option/series/line.md b/zh/option/series/line.md index e456bf79..4df15daf 100644 --- a/zh/option/series/line.md +++ b/zh/option/series/line.md @@ -56,6 +56,7 @@ const option = { coordSysDefault = "'cartesian2d'", cartesian2d = true, polar = true, + singleAxis = true, geo = false ) }} diff --git a/zh/option/series/lines.md b/zh/option/series/lines.md index fe5d0803..9ccb9e3c 100644 --- a/zh/option/series/lines.md +++ b/zh/option/series/lines.md @@ -24,6 +24,7 @@ ECharts 2.x 里会用地图上的 `markLine` 去绘制迁徙效果，在 ECharts coordSysDefault = "'geo'", cartesian2d = true, polar = false, + singleAxis = true, geo = true ) }} diff --git a/zh/option/series/map.md b/zh/option/series/map.md index 4c3d9fbb..33ee0079 100644 --- a/zh/option/series/map.md +++ b/zh/option/series/map.md @@ -27,6 +27,12 @@ labelMargin = true ) }} +{{ use: partial-coord-sys( + seriesType = "map", + coordSysDefault = "'geo'", + geo = true +) }} + ## center(Array) 当前视角的中心点。可以是包含两个 `number` 类型（表示像素值）或 `string` 类型（表示相对容器的百分比）的数组。 diff --git a/zh/option/series/pie.md b/zh/option/series/pie.md index d3291174..d92c3a64 100644 --- a/zh/option/series/pie.md +++ b/zh/option/series/pie.md @@ -54,10 +54,12 @@ const option = { {{ use: partial-coord-sys( seriesType = "pie", - coordSysDefault = "null", + coordSysDefault = "'none'", + coordSysUsageDefault = "'box'", none = true, geo = true, calendar = true, + matrix = true, version = "5.4.0" ) }} diff --git a/zh/option/series/sankey.md b/zh/option/series/sankey.md index 4caf5be7..a74c5730 100644 --- a/zh/option/series/sankey.md +++ b/zh/option/series/sankey.md @@ -45,6 +45,15 @@ const option = {"tooltip":{"trigger":"item","triggerOn":"mousemove"},"series":[{ defaultHeight = 'null' ) }} +{{ use: partial-coord-sys( + version = '6.0.0', + seriesType = "sankey", + coordSysDefault = "'none'", + calendar = true, + matrix = true, + none = true +) }} + ## nodeWidth(number) = 20 diff --git a/zh/option/series/scatter.md b/zh/option/series/scatter.md index 608282b9..01b3ae8d 100644 --- a/zh/option/series/scatter.md +++ b/zh/option/series/scatter.md @@ -92,8 +92,10 @@ const option = { coordSysDefault = "'cartesian2d'", cartesian2d = true, polar = true, + singleAxis = true, geo = true, - calendar = true + calendar = true, + matrix = true ) }} {{ use: partial-legend-hover-link() }} diff --git a/zh/option/series/sunburst.md b/zh/option/series/sunburst.md index d94f9cb4..020ca31c 100644 --- a/zh/option/series/sunburst.md +++ b/zh/option/series/sunburst.md @@ -303,6 +303,15 @@ const option = { defaultRadius = "[0, '75%']" ) }} +{{ use: partial-coord-sys( + version = '6.0.0', + seriesType = "sunburst", + coordSysDefault = "'none'", + calendar = true, + matrix = true, + none = true +) }} + ## data(Array) [series-sunburst.data](~series-sunburst.data) 的数据格式是树状的，例如： diff --git a/zh/option/series/themeRiver.md b/zh/option/series/themeRiver.md index 7a8c2d5d..a2f23048 100644 --- a/zh/option/series/themeRiver.md +++ b/zh/option/series/themeRiver.md @@ -117,9 +117,11 @@ const option = { ** 注意：** 整个主题河流view的位置信息复用了单个时间轴的位置信息，即left，top，right，bottom。 -## coordinateSystem(string) = "single" - -坐标系统，主题河流用的是单个的时间轴。 +{{ use: partial-coord-sys( + seriesType = "themeRiver", + coordSysDefault = "'singleAxis'", + singleAxis = true, +) }} ## boundaryGap(Array) = ["10%", "10%"] diff --git a/zh/option/series/tree.md b/zh/option/series/tree.md index 25052247..660a4ef7 100644 --- a/zh/option/series/tree.md +++ b/zh/option/series/tree.md @@ -78,6 +78,15 @@ const option = { defaultHeight = 'null' ) }} +{{ use: partial-coord-sys( + version = '6.0.0', + seriesType = "tree", + coordSysDefault = "'none'", + calendar = true, + matrix = true, + none = true +) }} + ## center(Array) 当前视角的中心点。可以是包含两个 `number` 类型（表示像素值）或 `string` 类型（表示相对容器的百分比）的数组。 diff --git a/zh/option/series/treemap.md b/zh/option/series/treemap.md index 1339b292..97201428 100644 --- a/zh/option/series/treemap.md +++ b/zh/option/series/treemap.md @@ -212,6 +212,15 @@ const option = { defaultHeight = '80%' ) }} +{{ use: partial-coord-sys( + version = '6.0.0', + seriesType = "treemap", + coordSysDefault = "'none'", + calendar = true, + matrix = true, + none = true +) }} + ## squareRatio(number)