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
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.0.1") }}

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
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).
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.0.1") }}

指定多个系列及其对应的维度映射关系。当配置了 `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
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)。