Merge pull request #485 from Justin-ZS/zisen/20703

doc(visualmap): add doc for seriesTargets

Author: Justin-ZS

en/option/component/visual-map.md

@@ -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.

en/tutorial/visual-map.md

@@ -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).

zh/option/component/visual-map.md

@@ -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` 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮。

zh/tutorial/visual-map.md

@@ -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)。