From 06a7e71d451b0f74281569e417cf034bea214e12 Mon Sep 17 00:00:00 2001 From: Justin Jin Date: Sun, 2 Nov 2025 18:02:23 +0800 Subject: [PATCH] doc(visualmap): add doc for seriesTargets --- en/option/component/visual-map.md | 49 +++++++++++++++++++++++++++++++ en/tutorial/visual-map.md | 42 ++++++++++++++++++++++++++ zh/option/component/visual-map.md | 49 +++++++++++++++++++++++++++++++ zh/tutorial/visual-map.md | 41 ++++++++++++++++++++++++++ 4 files changed, 181 insertions(+) diff --git a/en/option/component/visual-map.md b/en/option/component/visual-map.md index e23be60a6..1511e76fe 100644 --- a/en/option/component/visual-map.md +++ b/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. diff --git a/en/tutorial/visual-map.md b/en/tutorial/visual-map.md index 87412594b..359a68dea 100644 --- a/en/tutorial/visual-map.md +++ b/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). diff --git a/zh/option/component/visual-map.md b/zh/option/component/visual-map.md index 249bdf8e1..173db282e 100644 --- a/zh/option/component/visual-map.md +++ b/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` 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮。 diff --git a/zh/tutorial/visual-map.md b/zh/tutorial/visual-map.md index cee605411..de57b8e17 100644 --- a/zh/tutorial/visual-map.md +++ b/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)。