From c6cf2bc531ab392badaf3f230622a8071c3dea02 Mon Sep 17 00:00:00 2001
From: jinzisen <jinzisen@guandata.com>
Date: Mon, 20 Jan 2025 18:15:33 +0800
Subject: [PATCH 1/2] feat(visualMap): able to set the 'dimension' to an array

---
 src/component/visualMap/ContinuousModel.ts |  2 +-
 src/component/visualMap/ContinuousView.ts  |  3 ++-
 src/component/visualMap/PiecewiseModel.ts  | 12 +++++++-----
 src/component/visualMap/VisualMapModel.ts  | 13 +++++++++++--
 src/component/visualMap/visualEncoding.ts  |  4 ++--
 5 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/component/visualMap/ContinuousModel.ts b/src/component/visualMap/ContinuousModel.ts
index d8281bcec8..7b73ba02f0 100644
--- a/src/component/visualMap/ContinuousModel.ts
+++ b/src/component/visualMap/ContinuousModel.ts
@@ -203,7 +203,7 @@ class ContinuousModel extends VisualMapModel<ContinousVisualMapOption> {
             const dataIndices: number[] = [];
             const data = seriesModel.getData();
 
-            data.each(this.getDataDimensionIndex(data), function (value, dataIndex) {
+            data.each(this.getDataDimensionIndex(data, seriesModel.seriesIndex), function (value, dataIndex) {
                 range[0] <= value && value <= range[1] && dataIndices.push(dataIndex);
             }, this);
 
diff --git a/src/component/visualMap/ContinuousView.ts b/src/component/visualMap/ContinuousView.ts
index 17b244be08..501f56f7fe 100644
--- a/src/component/visualMap/ContinuousView.ts
+++ b/src/component/visualMap/ContinuousView.ts
@@ -853,7 +853,8 @@ class ContinuousView extends VisualMapView {
         }
 
         const data = dataModel.getData(ecData.dataType);
-        const value = data.getStore().get(visualMapModel.getDataDimensionIndex(data), ecData.dataIndex) as number;
+        const value = data.getStore()
+            .get(visualMapModel.getDataDimensionIndex(data, dataModel.seriesIndex), ecData.dataIndex) as number;
 
         if (!isNaN(value)) {
             this._showIndicator(value, value);
diff --git a/src/component/visualMap/PiecewiseModel.ts b/src/component/visualMap/PiecewiseModel.ts
index ef5913a62a..b16792d9bf 100644
--- a/src/component/visualMap/PiecewiseModel.ts
+++ b/src/component/visualMap/PiecewiseModel.ts
@@ -313,11 +313,13 @@ class PiecewiseModel extends VisualMapModel<PiecewiseVisualMapOption> {
             const dataIndices: number[] = [];
             const data = seriesModel.getData();
 
-            data.each(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);
-                pIdx === pieceIndex && dataIndices.push(dataIndex);
-            }, this);
+            data.each(
+                this.getDataDimensionIndex(data, seriesModel.seriesIndex),
+                function (value: number, dataIndex: number) {
+                    // Should always base on model pieceList, because it is order sensitive.
+                    const pIdx = VisualMapping.findPieceIndex(value, pieceList);
+                    pIdx === pieceIndex && dataIndices.push(dataIndex);
+                }, this);
 
             result.push({seriesId: seriesModel.id, dataIndex: dataIndices});
         }, this);
diff --git a/src/component/visualMap/VisualMapModel.ts b/src/component/visualMap/VisualMapModel.ts
index 85b3162e51..dad317773c 100644
--- a/src/component/visualMap/VisualMapModel.ts
+++ b/src/component/visualMap/VisualMapModel.ts
@@ -84,7 +84,7 @@ export interface VisualMapOption<T extends VisualOptionBase = VisualOptionBase>
     /**
      * Dimension to be encoded
      */
-    dimension?: number
+    dimension?: number | number[]
 
     /**
      * Visual configuration for the data in selection
@@ -392,8 +392,17 @@ class VisualMapModel<Opts extends VisualMapOption = VisualMapOption> extends Com
     //     }
     // }
 
-    getDataDimensionIndex(data: SeriesData): DimensionIndex {
+    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];
+        }
+        return [].concat(optDim)[0];
+    }
+
+    getDataDimensionIndex(data: SeriesData, seriesIndex: number): DimensionIndex {
+        const optDim = this.getDimension(seriesIndex);
 
         if (optDim != null) {
             return data.getDimensionIndex(optDim);
diff --git a/src/component/visualMap/visualEncoding.ts b/src/component/visualMap/visualEncoding.ts
index 6f090b3694..4a6e4dcbde 100644
--- a/src/component/visualMap/visualEncoding.ts
+++ b/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())
+                    visualMapModel.getDataDimensionIndex(seriesModel.getData(), seriesModel.seriesIndex)
                 ));
             });
 
@@ -65,7 +65,7 @@ export const visualMapEncodingHandlers: StageHandler[] = [
                         outerColors: []
                     } as VisualMeta;
 
-                    const dimIdx = visualMapModel.getDataDimensionIndex(data);
+                    const dimIdx = visualMapModel.getDataDimensionIndex(data, seriesModel.seriesIndex);
                     if (dimIdx >= 0) {
                         // visualMeta.dimension should be dimension index, but not concrete dimension.
                         visualMeta.dimension = dimIdx;

From 57df96704dea59e4def3947799e3e7436ad6ce41 Mon Sep 17 00:00:00 2001
From: jinzisen <jinzisen@guandata.com>
Date: Mon, 20 Jan 2025 18:19:48 +0800
Subject: [PATCH 2/2] test(visualMap): able to set the 'dimension' to an array

---
 test/runTest/actions/__meta__.json            |   1 +
 test/runTest/actions/visualmap-dimension.json |   1 +
 test/visualmap-dimension.html                 | 159 ++++++++++++++++++
 3 files changed, 161 insertions(+)
 create mode 100644 test/runTest/actions/visualmap-dimension.json
 create mode 100644 test/visualmap-dimension.html

diff --git a/test/runTest/actions/__meta__.json b/test/runTest/actions/__meta__.json
index 3a9a4d28cd..1d8200bd08 100644
--- a/test/runTest/actions/__meta__.json
+++ b/test/runTest/actions/__meta__.json
@@ -220,6 +220,7 @@
   "universalTransition2": 3,
   "universalTransition3": 2,
   "visualMap-categories": 1,
+  "visualmap-dimension": 3,
   "visualMap-multi-continuous": 1,
   "visualMap-selectMode": 2
 }
\ No newline at end of file
diff --git a/test/runTest/actions/visualmap-dimension.json b/test/runTest/actions/visualmap-dimension.json
new file mode 100644
index 0000000000..76f661676b
--- /dev/null
+++ b/test/runTest/actions/visualmap-dimension.json
@@ -0,0 +1 @@
+[{"name":"Action 1","ops":[{"type":"screenshot","time":1195}],"scrollY":0,"scrollX":0,"timestamp":1737368248568},{"name":"Action 2","ops":[{"type":"screenshot","time":532}],"scrollY":678,"scrollX":0,"timestamp":1737368258531},{"name":"Action 3","ops":[{"type":"screenshot","time":357}],"scrollY":1334,"scrollX":0,"timestamp":1737368264539}]
\ No newline at end of file
diff --git a/test/visualmap-dimension.html b/test/visualmap-dimension.html
new file mode 100644
index 0000000000..6ecbf77840
--- /dev/null
+++ b/test/visualmap-dimension.html
@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script src="lib/simpleRequire.js"></script>
+    <script src="lib/config.js"></script>
+    <script src="lib/jquery.min.js"></script>
+    <script src="lib/facePrint.js"></script>
+    <script src="lib/testHelper.js"></script>
+    <!-- <script src="ut/lib/canteen.js"></script> -->
+    <link rel="stylesheet" href="lib/reset.css" />
+</head>
+
+<body>
+    <style>
+        .split {
+            line-height: 60px;
+            height: 60px;
+            background: #ddd;
+            text-align: center;
+            font-weight: bold;
+            font-size: 20px;
+        }
+
+        .main {
+            height: 600px;
+        }
+    </style>
+    <script>
+
+        var option;
+
+        require([
+            'echarts'/*, 'map/js/china' */
+        ], function (echarts) {
+
+            function createCase(title, index, caseRenderer) {
+                const caseRoot = document.createElement("div");
+                caseRoot.setAttribute('id', `case${index}`);
+                caseRoot.innerHTML = `
+                        <div class="split">${title}</div>
+                        <div id="main${index}" class="main"></div>
+                    `
+                document.body.appendChild(caseRoot);
+                const main = caseRoot.querySelector('.main');
+                if (!main) {
+                    return;
+                }
+                const chart = echarts.init(main);
+                caseRenderer(chart);
+            }
+
+            createCase('No seriesIndex, Full dimension: map to target series by index', 0, function (chart) {
+                chart.setOption({
+                    tooltip: {},
+                    dataset: {
+                        source: [
+                            ['product', '2015', '2016', '2017'],
+                            ['Matcha Latte', 43.3, 85.8, 93.7],
+                            ['Milk Tea', 83.1, 73.4, 55.1],
+                            ['Cheese Cocoa', 86.4, 65.2, 82.5],
+                            ['Walnut Brownie', 72.4, 53.9, 39.1]
+                        ]
+                    },
+                    xAxis: { type: 'category' },
+                    yAxis: {},
+                    series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }],
+                    visualMap: [
+                        {
+                            type: 'piecewise',
+                            dimension: [1, 2, 3],
+                            min: 30,
+                            max: 100,
+                            outOfRange: { color: '#5470c6' },
+                        },
+                    ],
+                });
+            });
+            createCase('No seriesIndex, Partial dimension: map to target series by index, mismatched series use last dimension', 0, function (chart) {
+                chart.setOption({
+                    tooltip: {},
+                    dataset: {
+                        source: [
+                            ['product', '2015', '2016', '2017'],
+                            ['Matcha Latte', 43.3, 85.8, 93.7],
+                            ['Milk Tea', 83.1, 73.4, 55.1],
+                            ['Cheese Cocoa', 86.4, 65.2, 82.5],
+                            ['Walnut Brownie', 72.4, 53.9, 39.1]
+                        ]
+                    },
+                    xAxis: { type: 'category' },
+                    yAxis: {},
+                    series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }],
+                    visualMap: [
+                        {
+                            type: 'piecewise',
+                            dimension: [1, 2],
+                            min: 30,
+                            max: 100,
+                            outOfRange: { color: '#5470c6' },
+                        },
+                    ],
+                });
+            });
+            createCase('Partial seriesIndex, Partial dimension: map to target series by index', 0, function (chart) {
+                chart.setOption({
+                    tooltip: {},
+                    dataset: {
+                        source: [
+                            ['product', '2015', '2016', '2017'],
+                            ['Matcha Latte', 43.3, 85.8, 93.7],
+                            ['Milk Tea', 83.1, 73.4, 55.1],
+                            ['Cheese Cocoa', 86.4, 65.2, 82.5],
+                            ['Walnut Brownie', 72.4, 53.9, 39.1]
+                        ]
+                    },
+                    xAxis: { type: 'category' },
+                    yAxis: {},
+                    series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }],
+                    visualMap: [
+                        {
+                            type: 'continuous',
+                            seriesIndex: [1, 2],
+                            dimension: [2, 3],
+                            min: 30,
+                            max: 100,
+                            outOfRange: { color: '#5470c6' },
+                        },
+                    ],
+                });
+            });
+        });
+
+    </script>
+</body>
+
+</html>