Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 60 additions & 0 deletions en/option/component/axis-common.md
Original file line number Diff line number Diff line change
Expand Up @@ -932,6 +932,66 @@ max: function (value) {

`value` is an object, containing the `min` value and `max` value of the data. This function should return the max value of axis, or return `null`/`undefined` to make echarts use the auto calculated max value (`null`/`undefined` return is only supported since `v4.8.0`).

#${prefix} dataMin(number)

<ExampleUIControlNumber />

{{ use: partial-version(
version = '6.1.0'
) }}

Specify the data minimum value to extend the axis range while preserving the nice scale algorithm.

It is available only for value, logarithmic, and time axes, i.e., [type](~${componentType}.type): 'value', 'log', or 'time'.

**How it works:**

`dataMin` works like inserting a virtual data point into your dataset, but this point only participates in axis range calculation and won't be displayed in the chart.

- When `dataMin` is **less than** the actual data minimum: The axis extends to include this value, using a nice scale value no greater than `dataMin` as the axis minimum
- When `dataMin` is **greater than or equal to** the actual data minimum: No effect, the axis is calculated using the original logic

**Use cases:**

- Ensure the axis includes a reference value (like passing line, target value, etc.)
- Reserve visual space for data

**The difference from [min](~${componentType}.min):**
- `min` fixes the axis minimum value and disables the nice scale algorithm
- `dataMin` only affects the axis range while preserving the nice scale algorithm



#${prefix} dataMax(number)

<ExampleUIControlNumber />

{{ use: partial-version(
version = '6.1.0'
) }}

Specify the data maximum value to extend the axis range while preserving the nice scale algorithm.

It is available only for value, logarithmic, and time axes, i.e., [type](~${componentType}.type): 'value', 'log', or 'time'.

**How it works:**

`dataMax` works like inserting a virtual data point into your dataset, but this point only participates in axis range calculation and won't be displayed in the chart.

- When `dataMax` is **greater than** the actual data maximum: The axis extends to include this value, using a nice scale value no less than `dataMax` as the axis maximum
- When `dataMax` is **less than or equal to** the actual data maximum: No effect, the axis is calculated using the original logic

**Use cases:**

- Ensure the Y-axis includes a target value or ceiling
- Reserve visual space above the data for better presentation
- Maintain consistent axis ranges across multiple charts

**The difference from [max](~${componentType}.max):**
- `max` fixes the axis maximum value and disables the nice scale algorithm
- `dataMax` only affects the axis range while preserving the nice scale algorithm


#${prefix} scale(boolean) = false

<ExampleUIControlBoolean />
Expand Down
8 changes: 8 additions & 0 deletions en/option/component/radar.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,14 @@ Here is a custom example of radar component.
none = true
) }}

## clockwise(boolean) = false

{{ use: partial-version(version = "6.1.0") }}

<ExampleUIControlBoolean default="false" />

Whether to clockwise layout indicator axis.

## startAngle(number) = 90

The start angle of coordinate, which is the angle of the first indicator axis.
Expand Down
49 changes: 49 additions & 0 deletions en/option/component/visual-map.md
Original file line number Diff line number Diff line change
Expand Up @@ -325,6 +325,55 @@ Specify visual mapping should be performed on which series, from which
Can be a id or a list of ids.
All series are used by default.

## seriesTargets(Array)

{{ use: partial-version(version = "6.1.0") }}

Specify multiple series with their corresponding dimension mappings. When `seriesTargets` is configured, `seriesIndex`, `seriesId`, and `dimension` will be ignored.

This option allows a single `visualMap` component to control different dimensions of multiple series simultaneously, which is particularly useful when working with datasets.

Each target object should contain the following properties:
- `seriesIndex` or `seriesId`: Specify the series (choose one)
- `dimension`: Specify the data dimension for that series

Example:
```javascript
option = {
dataset: {
source: [
['product', 'sales', 'price', 'year'],
['A', 100, 20, 2020],
['B', 200, 30, 2021],
['C', 150, 25, 2022]
]
},
visualMap: {
type: 'continuous',
min: 0,
max: 100,
// Configure different series to use different dimensions
seriesTargets: [
{
seriesIndex: 0,
dimension: 1 // First series uses 'sales' dimension
},
{
seriesIndex: 1,
dimension: 2 // Second series uses 'price' dimension
}
],
inRange: {
color: ['#50a3ba', '#eac736', '#d94e5d']
}
},
series: [
{ type: 'bar' },
{ type: 'line' }
]
};
```

## hoverLink(boolean) = true

`hoverLink` enable highlight certain graphical elements of chart when mouse hovers on some place of `visualMap` component that is corresponding to those graphical elements by visual mapping.
Expand Down
1 change: 1 addition & 0 deletions en/option/series/pie.md
Original file line number Diff line number Diff line change
Expand Up @@ -531,6 +531,7 @@ Label rotation.

+ If `true` or `'radial'`, the labels are rotated radially. (The `'radial'` literal is supported since `v5.2.0`)
+ If `'tangential'`, the labels are rotated tangentially. (Since `v5.2.0`)
+ If `'tangential-noflip'`, the arrangement will be tangential and will not flip. (Since `v6.1.0`)
+ If `number`, the labels are rotated in degrees (-90° - 90°). The negative value represents clockwise.

{{ use: partial-text-style(
Expand Down
42 changes: 42 additions & 0 deletions en/tutorial/visual-map.md
Original file line number Diff line number Diff line change
Expand Up @@ -145,4 +145,46 @@ option = {
};
```

Example C (Using `seriesTargets` to map different dimensions for different series):

```javascript
option = {
dataset: {
source: [
['product', 'sales', 'price', 'year'],
['A', 100, 20, 2020],
['B', 200, 30, 2021],
['C', 150, 25, 2022]
]
},
visualMap: [
{
type: 'continuous',
min: 0,
max: 100,
// seriesTargets allows specifying different mapping dimensions for different series
// When seriesTargets is configured, dimension, seriesIndex, and seriesId are ignored
seriesTargets: [
{
seriesIndex: 0,
dimension: 1 // First series maps to 'sales' dimension
},
{
seriesIndex: 1,
dimension: 2 // Second series maps to 'price' dimension
}
],
inRange: {
color: ['#50a3ba', '#eac736', '#d94e5d']
}
},
...
],
series: [
{ type: 'bar' },
{ type: 'line' }
]
};
```

For more information, please refer to [visualMap.inRange](option.html#visualMap.inRange) and [visualMap.outOfRange](option.html#visualMap.outOfRange).
58 changes: 58 additions & 0 deletions zh/option/component/axis-common.md
Original file line number Diff line number Diff line change
Expand Up @@ -929,6 +929,64 @@ max: function (value) {

其中 `value` 是一个包含 `min` 和 `max` 的对象,分别表示数据的最大最小值,这个函数可返回坐标轴的最大值,也可返回 `null`/`undefined` 来表示“自动计算最大值”(返回 `null`/`undefined` 从 `v4.8.0` 开始支持)。

#${prefix} dataMin(number)

<ExampleUIControlNumber />

{{ use: partial-version(
version = '6.1.0'
) }}

指定数据最小值,用于扩展坐标轴范围同时保持自动刻度优化。

只在数值轴、对数轴、时间轴中([type](~${componentType}.type): 'value'、'log' 或 'time')有效。

**工作原理:**

`dataMin` 的效果好似在数据中插入了一个虚拟的数据点,但这个点只参与坐标轴范围的计算,不会实际显示在图表中。

- 当 `dataMin` **小于**实际数据最小值时:坐标轴会扩展以包含这个值,使用一个不大于 `dataMin` 的整齐刻度值作为坐标轴最小值
- 当 `dataMin` **大于等于**实际数据最小值时:不产生任何影响,按原有逻辑计算

**适用场景:**

- 确保坐标轴包含某个参考值(如及格线、目标值等)
- 需要为数据留出一定的视觉空间

**与 [min](~${componentType}.min) 的区别:**
- `min` 会固定坐标轴最小值,禁用自动刻度优化
- `dataMin` 只影响坐标轴范围,仍保持自动刻度优化

#${prefix} dataMax(number)

<ExampleUIControlNumber />

{{ use: partial-version(
version = '6.1.0'
) }}

指定数据最大值,用于扩展坐标轴范围同时保持自动刻度优化。

只在数值轴、对数轴、时间轴中([type](~${componentType}.type): 'value'、'log' 或 'time')有效。

**工作原理:**

`dataMax` 的效果好似在数据中插入了一个虚拟的数据点,但这个点只参与坐标轴范围的计算,不会实际显示在图表中。

- 当 `dataMax` **大于**实际数据最大值时:坐标轴会扩展以包含这个值,使用一个不小于 `dataMax` 的整齐刻度值作为坐标轴最大值
- 当 `dataMax` **小于等于**实际数据最大值时:不产生任何影响,按原有逻辑计算

**适用场景:**

- 确保坐标轴包含目标值或上限值
- 为数据预留视觉空间,使图表更美观
- 使多个相似的图表保持一致的坐标轴范围

**与 [max](~${componentType}.max) 的区别:**
- `max` 会固定坐标轴最大值,禁用自动刻度优化
- `dataMax` 只影响坐标轴范围,仍保持自动刻度优化


#${prefix} scale(boolean) = false

<ExampleUIControlBoolean />
Expand Down
8 changes: 8 additions & 0 deletions zh/option/component/radar.md
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,14 @@ const option = {
none = true
) }}

## clockwise(boolean) = false

{{ use: partial-version(version = "6.1.0") }}

<ExampleUIControlBoolean default="false" />

是否以顺时针排布指示器轴。

## startAngle(number) = 90

坐标系起始角度,也就是第一个指示器轴的角度。
Expand Down
49 changes: 49 additions & 0 deletions zh/option/component/visual-map.md
Original file line number Diff line number Diff line change
Expand Up @@ -295,6 +295,55 @@ chart.setOption(option); // option设置回 ${componentMainType}
可以是一个 id 或者一个 id 数组。
默认取所有系列。

## seriesTargets(Array)

{{ use: partial-version(version = "6.1.0") }}

指定多个系列及其对应的维度映射关系。当配置了 `seriesTargets` 时,`seriesIndex`、`seriesId` 和 `dimension` 将被忽略。

这个选项允许单个 `visualMap` 组件同时控制多个系列的不同维度,特别适用于使用 dataset 的场景。

每个目标对象应包含以下属性:
- `seriesIndex` 或 `seriesId`:指定系列(二者选其一)
- `dimension`:指定该系列使用的数据维度

示例:
```javascript
option = {
dataset: {
source: [
['product', 'sales', 'price', 'year'],
['A', 100, 20, 2020],
['B', 200, 30, 2021],
['C', 150, 25, 2022]
]
},
visualMap: {
type: 'continuous',
min: 0,
max: 100,
// 配置不同系列使用不同维度
seriesTargets: [
{
seriesIndex: 0,
dimension: 1 // 第一个系列使用 'sales' 维度
},
{
seriesIndex: 1,
dimension: 2 // 第二个系列使用 'price' 维度
}
],
inRange: {
color: ['#50a3ba', '#eac736', '#d94e5d']
}
},
series: [
{ type: 'bar' },
{ type: 'line' }
]
};
```

## hoverLink(boolean) = true

打开 `hoverLink` 功能时,鼠标悬浮到 `visualMap` 组件上时,鼠标位置对应的数值 在 图表中对应的图形元素,会高亮。
Expand Down
1 change: 1 addition & 0 deletions zh/option/series/pie.md
Original file line number Diff line number Diff line change
Expand Up @@ -547,6 +547,7 @@ const option = {

+ 如果为 `true` 或 `'radial'`,则为径向排布。(`'radial'` 字面量从 `v5.2.0` 开始支持)
+ 如果为 `'tangential'`,则为切向排布。(从 `v5.2.0` 开始支持)
+ 如果为 `'tangential-noflip'`,则为切向排布,不反转。(从 `v6.1.0` 开始支持)
+ 如果为 `number` ,旋转指定角度,从 -90 度到 90 度。正值是逆时针。


Expand Down
41 changes: 41 additions & 0 deletions zh/tutorial/visual-map.md
Original file line number Diff line number Diff line change
Expand Up @@ -146,4 +146,45 @@ option = {
};
```

例三(使用 `seriesTargets` 映射不同系列的不同维度):
```javascript
option = {
dataset: {
source: [
['product', 'sales', 'price', 'year'],
['A', 100, 20, 2020],
['B', 200, 30, 2021],
['C', 150, 25, 2022]
]
},
visualMap: [
{
type: 'continuous',
min: 0,
max: 100,
// 使用 seriesTargets 可以为不同系列指定不同的映射维度
// 当配置 seriesTargets 后,dimension、seriesIndex、seriesId 将被忽略
seriesTargets: [
{
seriesIndex: 0,
dimension: 1 // 第一个系列映射 'sales' 维度
},
{
seriesIndex: 1,
dimension: 2 // 第二个系列映射 'price' 维度
}
],
inRange: {
color: ['#50a3ba', '#eac736', '#d94e5d']
}
},
...
],
series: [
{ type: 'bar' },
{ type: 'line' }
]
};
```

更多详情,参见 [visualMap.inRange](option.html#visualMap.inRange) 和 [visualMap.outOfRange](option.html#visualMap.outOfRange)。
Loading