feat(visualMap): add seriesTargets to mapping different series -> dimension

Author: Justin-ZS

src/component/visualMap/ContinuousModel.ts

@@ -221,7 +221,7 @@ class ContinuousModel extends VisualMapModel<ContinousVisualMapOption> {
             const dataIndices: number[] = [];
             const data = seriesModel.getData();
 
-            data.each(this.getDataDimensionIndex(data, seriesModel.seriesIndex), function (value: number, dataIndex) {
+            data.each(this.getDataDimensionIndex(data), function (value: number, dataIndex) {
                 range[0] <= value && value <= range[1] && dataIndices.push(dataIndex);
             }, this);
 

src/component/visualMap/ContinuousView.ts

@@ -856,7 +856,7 @@ class ContinuousView extends VisualMapView {
 
         const data = dataModel.getData(ecData.dataType);
         const value = data.getStore()
-            .get(visualMapModel.getDataDimensionIndex(data, dataModel.seriesIndex), ecData.dataIndex) as number;
+            .get(visualMapModel.getDataDimensionIndex(data), ecData.dataIndex) as number;
 
         if (!isNaN(value)) {
             this._showIndicator(value, value);

src/component/visualMap/PiecewiseModel.ts

@@ -314,7 +314,7 @@ class PiecewiseModel extends VisualMapModel<PiecewiseVisualMapOption> {
             const data = seriesModel.getData();
 
             data.each(
-                this.getDataDimensionIndex(data, seriesModel.seriesIndex),
+                this.getDataDimensionIndex(data),
                 function (value: number, dataIndex: number) {
                     // Should always base on model pieceList, because it is order sensitive.
                     const pIdx = VisualMapping.findPieceIndex(value, pieceList);

src/component/visualMap/VisualMapModel.ts

@@ -33,9 +33,9 @@ import {
     OptionDataValue,
     BuiltinVisualProperty,
     DimensionIndex,
-    OptionId,
     ComponentOnCalendarOptionMixin,
-    ComponentOnMatrixOptionMixin
+    ComponentOnMatrixOptionMixin,
+    OptionId,
 } from '../../util/types';
 import ComponentModel from '../../model/Component';
 import Model from '../../model/Model';
@@ -91,7 +91,17 @@ export interface VisualMapOption<T extends VisualOptionBase = VisualOptionBase>
     /**
      * Dimension to be encoded
      */
-    dimension?: number | number[]
+    dimension?: number
+
+    /**
+     * Series targets with specific dimensions
+     * When provided, seriesIndex, seriesId, and dimension are ignored
+     */
+    seriesTargets?: {
+        seriesIndex?: number
+        seriesId?: OptionId
+        dimension: number
+    }[]
 
     /**
      * Visual configuration for the data in selection
@@ -247,6 +257,30 @@ class VisualMapModel<Opts extends VisualMapOption = VisualMapOption> extends Com
      * @return An array of series indices.
      */
     protected getTargetSeriesIndices(): number[] {
+        const seriesTargets = this.option.seriesTargets;
+        if (seriesTargets) {
+            // When seriesTargets is provided, collect all target series indices
+            const indices: number[] = [];
+            for (const target of seriesTargets) {
+                if (target.seriesIndex != null) {
+                    indices.push(target.seriesIndex);
+                }
+                else if (target.seriesId != null) {
+                    // Find series by ID
+                    let seriesModel: SeriesModel;
+                    this.ecModel.eachSeries(function (series) {
+                        if (series.id === target.seriesId) {
+                            seriesModel = series;
+                        }
+                    });
+                    if (seriesModel) {
+                        indices.push(seriesModel.componentIndex);
+                    }
+                }
+            }
+            return indices;
+        }
+
         const optionSeriesId = this.option.seriesId;
         let optionSeriesIndex = this.option.seriesIndex;
         if (optionSeriesIndex == null && optionSeriesId == null) {
@@ -407,15 +441,21 @@ class VisualMapModel<Opts extends VisualMapOption = VisualMapOption> extends Com
     // }
 
     getDimension(seriesIndex: number): number {
-        const optDim = this.option.dimension;
-        if (isArray(optDim) && seriesIndex != null) {
-            const idx = this.getTargetSeriesIndices().indexOf(seriesIndex);
-            return optDim[idx] ?? optDim[optDim.length - 1];
+        const seriesTargets = this.option.seriesTargets;
+        if (seriesTargets) {
+            const target = seriesTargets.find(target =>
+                (target.seriesIndex != null && target.seriesIndex === seriesIndex)
+                || (target.seriesId != null && target.seriesId === this.ecModel.getSeriesByIndex(seriesIndex).id)
+            );
+            if (target) {
+                return target.dimension;
+            }
         }
-        return [].concat(optDim)[0];
+        return this.option.dimension;
     }
 
-    getDataDimensionIndex(data: SeriesData, seriesIndex: number): DimensionIndex {
+    getDataDimensionIndex(data: SeriesData): DimensionIndex {
+        const seriesIndex = (data.hostModel as any).seriesIndex;
         const optDim = this.getDimension(seriesIndex);
 
         if (optDim != null) {

src/component/visualMap/preprocessor.ts

@@ -53,6 +53,23 @@ export default function visualMapPreprocessor(option) {
                 }
             });
         }
+
+        // Validate seriesTargets
+        const seriesTargets = opt.seriesTargets;
+        if (seriesTargets && zrUtil.isArray(seriesTargets)) {
+            each(seriesTargets, function (target) {
+                if (!zrUtil.isObject(target) || target.dimension == null) {
+                    if (__DEV__) {
+                        console.warn('Each seriesTarget should have a dimension property');
+                    }
+                }
+                if (target.seriesIndex == null && target.seriesId == null) {
+                    if (__DEV__) {
+                        console.warn('Each seriesTarget should have either seriesIndex or seriesId');
+                    }
+                }
+            });
+        }
     });
 }
 

src/component/visualMap/visualEncoding.ts

@@ -42,7 +42,7 @@ export const visualMapEncodingHandlers: StageHandler[] = [
                     visualMapModel.stateList,
                     visualMapModel.targetVisuals,
                     zrUtil.bind(visualMapModel.getValueState, visualMapModel),
-                    visualMapModel.getDataDimensionIndex(seriesModel.getData(), seriesModel.seriesIndex)
+                    visualMapModel.getDataDimensionIndex(seriesModel.getData())
                 ));
             });
 
@@ -65,7 +65,7 @@ export const visualMapEncodingHandlers: StageHandler[] = [
                         outerColors: []
                     } as VisualMeta;
 
-                    const dimIdx = visualMapModel.getDataDimensionIndex(data, seriesModel.seriesIndex);
+                    const dimIdx = visualMapModel.getDataDimensionIndex(data);
                     if (dimIdx >= 0) {
                         // visualMeta.dimension should be dimension index, but not concrete dimension.
                         visualMeta.dimension = dimIdx;