From 70f0b5a580347685d8a903c83fac5e910a9d083b Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Wed, 26 Jun 2024 18:31:44 +0800
Subject: [PATCH 1/3] feat(dataZoom): handle labels can be configured when to
 show #19676

---
 src/component/dataZoom/SliderZoomModel.ts |  5 +++++
 src/component/dataZoom/SliderZoomView.ts  | 22 ++++++++++++++--------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/component/dataZoom/SliderZoomModel.ts b/src/component/dataZoom/SliderZoomModel.ts
index a6d051e1b4..26d755fe32 100644
--- a/src/component/dataZoom/SliderZoomModel.ts
+++ b/src/component/dataZoom/SliderZoomModel.ts
@@ -79,6 +79,8 @@ export interface SliderDataZoomOption extends DataZoomOption, BoxLayoutOptionMix
 
     handleIcon?: string
 
+    handleLabelShow?: boolean
+
     /**
      * number: height of icon. width will be calculated according to the aspect of icon.
      * string: percent of the slider height. width will be calculated according to the aspect of icon.
@@ -117,6 +119,7 @@ export interface SliderDataZoomOption extends DataZoomOption, BoxLayoutOptionMix
     brushStyle?: ItemStyleOption
 
     emphasis?: {
+        handleLabelShow?: boolean
         handleStyle?: ItemStyleOption
         moveHandleStyle?: ItemStyleOption
     }
@@ -171,6 +174,7 @@ class SliderZoomModel extends DataZoomModel<SliderDataZoomOption> {
         // Color of selected window.
         fillerColor: 'rgba(135,175,274,0.2)',
         handleIcon: 'path://M-9.35,34.56V42m0-40V9.5m-2,0h4a2,2,0,0,1,2,2v21a2,2,0,0,1-2,2h-4a2,2,0,0,1-2-2v-21A2,2,0,0,1-11.35,9.5Z',
+        handleLabelShow: false,
         // Percent of the slider height
         handleSize: '100%',
 
@@ -201,6 +205,7 @@ class SliderZoomModel extends DataZoomModel<SliderDataZoomOption> {
         },
 
         emphasis: {
+            handleLabelShow: true,
             handleStyle: {
                 borderColor: '#8FB0F7'
             },
diff --git a/src/component/dataZoom/SliderZoomView.ts b/src/component/dataZoom/SliderZoomView.ts
index a6545fdb3e..cf3908b901 100644
--- a/src/component/dataZoom/SliderZoomView.ts
+++ b/src/component/dataZoom/SliderZoomView.ts
@@ -619,11 +619,12 @@ class SliderZoomView extends DataZoomView {
             sliderGroup.add(handles[handleIndex] = path);
 
             const textStyleModel = dataZoomModel.getModel('textStyle');
+            const handleLabelShow = dataZoomModel.get('handleLabelShow');
 
             thisGroup.add(
                 handleLabels[handleIndex] = new graphic.Text({
                 silent: true,
-                invisible: true,
+                invisible: !handleLabelShow,
                 style: createTextStyle(textStyleModel, {
                     x: 0, y: 0, text: '',
                     verticalAlign: 'middle',
@@ -885,19 +886,24 @@ class SliderZoomView extends DataZoomView {
     }
 
     /**
-     * @param showOrHide true: show, false: hide
+     * @param isEmphasis true: show, false: hide
      */
-    private _showDataInfo(showOrHide?: boolean) {
-        // Always show when drgging.
-        showOrHide = this._dragging || showOrHide;
+    private _showDataInfo(isEmphasis?: boolean) {
+        const normalShow = this.dataZoomModel.get('handleLabelShow');
+        const emphasisShow = this.dataZoomModel.getModel('emphasis')
+            .get('handleLabelShow');
+        // Dragging is considered as emphasis
+        const toShow = isEmphasis
+            ? (emphasisShow || this._dragging)
+            : normalShow;
         const displayables = this._displayables;
         const handleLabels = displayables.handleLabels;
-        handleLabels[0].attr('invisible', !showOrHide);
-        handleLabels[1].attr('invisible', !showOrHide);
+        handleLabels[0].attr('invisible', !toShow);
+        handleLabels[1].attr('invisible', !toShow);
 
         // Highlight move handle
         displayables.moveHandle
-            && this.api[showOrHide ? 'enterEmphasis' : 'leaveEmphasis'](displayables.moveHandle, 1);
+            && this.api[toShow ? 'enterEmphasis' : 'leaveEmphasis'](displayables.moveHandle, 1);
     }
 
     private _onDragMove(handleIndex: 0 | 1 | 'all', dx: number, dy: number, event: ZRElementEvent) {

From dd5d624cd9131b6281542a4b92461820f246b108 Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Thu, 27 Jun 2024 15:38:59 +0800
Subject: [PATCH 2/3] test(dataZoom): add test cases

---
 src/component/dataZoom/SliderZoomView.ts |   6 +-
 test/dataZoom-handleLabelShow.html       | 208 +++++++++++++++++++++++
 2 files changed, 211 insertions(+), 3 deletions(-)
 create mode 100644 test/dataZoom-handleLabelShow.html

diff --git a/src/component/dataZoom/SliderZoomView.ts b/src/component/dataZoom/SliderZoomView.ts
index cf3908b901..5647ffdeb5 100644
--- a/src/component/dataZoom/SliderZoomView.ts
+++ b/src/component/dataZoom/SliderZoomView.ts
@@ -892,9 +892,9 @@ class SliderZoomView extends DataZoomView {
         const normalShow = this.dataZoomModel.get('handleLabelShow');
         const emphasisShow = this.dataZoomModel.getModel('emphasis')
             .get('handleLabelShow');
-        // Dragging is considered as emphasis
-        const toShow = isEmphasis
-            ? (emphasisShow || this._dragging)
+        // Dragging is considered as emphasis, unless emphasisShow is false
+        const toShow = (isEmphasis || this._dragging)
+            ? emphasisShow
             : normalShow;
         const displayables = this._displayables;
         const handleLabels = displayables.handleLabels;
diff --git a/test/dataZoom-handleLabelShow.html b/test/dataZoom-handleLabelShow.html
new file mode 100644
index 0000000000..2454c5a373
--- /dev/null
+++ b/test/dataZoom-handleLabelShow.html
@@ -0,0 +1,208 @@
+<!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>
+        </style>
+
+
+
+<div id="main0"></div>
+<div id="main1"></div>
+<div id="main2"></div>
+<div id="main3"></div>
+
+
+
+
+
+
+        <script>
+        require([
+            'echarts',
+            // 'map/js/china',
+            // './data/nutrients.json'
+        ], function (echarts) {
+            var option;
+
+            option = {
+                xAxis: {},
+                yAxis: {},
+                series: {
+                    type: 'line',
+                    data: [[11, 22], [33, 44]]
+                },
+                dataZoom: [{
+                    type: 'slider',
+                    handleLabelShow: true
+                }, {
+                    type: 'slider',
+                    yAxisIndex: 0,
+                    handleLabelShow: true,
+                    right: 30
+                }]
+            };
+
+            var chart = testHelper.create(echarts, 'main0', {
+                title: [
+                    'handleLabelShow: true, (emphasis.handleLabelShow: true)',
+                    'Always show the handle label.'
+                ],
+                option: option
+            });
+        });
+        </script>
+
+<script>
+    require([
+        'echarts',
+        // 'map/js/china',
+        // './data/nutrients.json'
+    ], function (echarts) {
+        var option;
+
+        option = {
+            xAxis: {},
+            yAxis: {},
+            series: {
+                type: 'line',
+                data: [[11, 22], [33, 44]]
+            },
+            dataZoom: [{
+                type: 'slider',
+                handleLabelShow: true,
+                emphasis: {
+                    handleLabelShow: false
+                },
+            }, {
+                type: 'slider',
+                yAxisIndex: 0,
+                handleLabelShow: true,
+                emphasis: {
+                    handleLabelShow: false
+                },
+                right: 30
+            }]
+        };
+
+        var chart = testHelper.create(echarts, 'main1', {
+            title: [
+                'handleLabelShow: true, emphasis.handleLabelShow: false',
+                'Hide the handle label when mouse over, which may be useful to hide information when dragging so that user is more focused.'
+            ],
+            option: option
+        });
+    });
+    </script>
+
+
+<script>
+    require([
+        'echarts',
+        // 'map/js/china',
+        // './data/nutrients.json'
+    ], function (echarts) {
+        var option;
+
+        option = {
+            xAxis: {},
+            yAxis: {},
+            series: {
+                type: 'line',
+                data: [[11, 22], [33, 44]]
+            },
+            dataZoom: [{
+                type: 'slider',
+                handleLabelShow: false,
+            }, {
+                type: 'slider',
+                yAxisIndex: 0,
+                handleLabelShow: false,
+                right: 30
+            }]
+        };
+
+        var chart = testHelper.create(echarts, 'main2', {
+            title: [
+                'handleLabelShow: false, (emphasis.handleLabelShow: true)',
+                'Handle label is displayed whem hovering, which is the same as default.'
+            ],
+            option: option
+        });
+    });
+    </script>
+
+<script>
+    require([
+        'echarts',
+        // 'map/js/china',
+        // './data/nutrients.json'
+    ], function (echarts) {
+        var option;
+
+        option = {
+            xAxis: {},
+            yAxis: {},
+            series: {
+                type: 'line',
+                data: [[11, 22], [33, 44]]
+            },
+            dataZoom: [{
+                type: 'slider',
+                handleLabelShow: false,
+                emphasis: {
+                    handleLabelShow: false
+                },
+            }, {
+                type: 'slider',
+                yAxisIndex: 0,
+                handleLabelShow: false,
+                emphasis: {
+                    handleLabelShow: false
+                },
+                right: 30
+            }]
+        };
+
+        var chart = testHelper.create(echarts, 'main3', {
+            title: [
+                'handleLabelShow: false, emphasis.handleLabelShow: false',
+                'Never show the handle labels.'
+            ],
+            option: option
+        });
+    });
+    </script>
+    </body>
+</html>
+

From c3ce6e0fc39ff5fe830f7b5a5e6b1c7eb0168daf Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Wed, 6 Nov 2024 15:03:18 +0800
Subject: [PATCH 3/3] fix(dataZoom): use handleLabel.show

---
 src/component/dataZoom/SliderZoomModel.ts |  13 +-
 src/component/dataZoom/SliderZoomView.ts  |  10 +-
 test/dataZoom-handleLabelShow.html        | 270 ++++++++++++----------
 3 files changed, 162 insertions(+), 131 deletions(-)

diff --git a/src/component/dataZoom/SliderZoomModel.ts b/src/component/dataZoom/SliderZoomModel.ts
index 26d755fe32..e5b1e85724 100644
--- a/src/component/dataZoom/SliderZoomModel.ts
+++ b/src/component/dataZoom/SliderZoomModel.ts
@@ -28,6 +28,10 @@ import {
 } from '../../util/types';
 import { inheritDefaultOption } from '../../util/component';
 
+interface SliderHandleLabelOption {
+    show?: boolean
+}
+
 export interface SliderDataZoomOption extends DataZoomOption, BoxLayoutOptionMixin {
 
     show?: boolean
@@ -79,7 +83,7 @@ export interface SliderDataZoomOption extends DataZoomOption, BoxLayoutOptionMix
 
     handleIcon?: string
 
-    handleLabelShow?: boolean
+    handleLabel?: SliderHandleLabelOption
 
     /**
      * number: height of icon. width will be calculated according to the aspect of icon.
@@ -119,7 +123,7 @@ export interface SliderDataZoomOption extends DataZoomOption, BoxLayoutOptionMix
     brushStyle?: ItemStyleOption
 
     emphasis?: {
-        handleLabelShow?: boolean
+        handleLabel: SliderHandleLabelOption
         handleStyle?: ItemStyleOption
         moveHandleStyle?: ItemStyleOption
     }
@@ -174,7 +178,6 @@ class SliderZoomModel extends DataZoomModel<SliderDataZoomOption> {
         // Color of selected window.
         fillerColor: 'rgba(135,175,274,0.2)',
         handleIcon: 'path://M-9.35,34.56V42m0-40V9.5m-2,0h4a2,2,0,0,1,2,2v21a2,2,0,0,1-2,2h-4a2,2,0,0,1-2-2v-21A2,2,0,0,1-11.35,9.5Z',
-        handleLabelShow: false,
         // Percent of the slider height
         handleSize: '100%',
 
@@ -205,7 +208,9 @@ class SliderZoomModel extends DataZoomModel<SliderDataZoomOption> {
         },
 
         emphasis: {
-            handleLabelShow: true,
+            handleLabel: {
+                show: true
+            },
             handleStyle: {
                 borderColor: '#8FB0F7'
             },
diff --git a/src/component/dataZoom/SliderZoomView.ts b/src/component/dataZoom/SliderZoomView.ts
index 5647ffdeb5..4c1a66e83a 100644
--- a/src/component/dataZoom/SliderZoomView.ts
+++ b/src/component/dataZoom/SliderZoomView.ts
@@ -619,7 +619,8 @@ class SliderZoomView extends DataZoomView {
             sliderGroup.add(handles[handleIndex] = path);
 
             const textStyleModel = dataZoomModel.getModel('textStyle');
-            const handleLabelShow = dataZoomModel.get('handleLabelShow');
+            const handleLabel = dataZoomModel.get('handleLabel') || {};
+            const handleLabelShow = handleLabel.show || false;
 
             thisGroup.add(
                 handleLabels[handleIndex] = new graphic.Text({
@@ -889,9 +890,10 @@ class SliderZoomView extends DataZoomView {
      * @param isEmphasis true: show, false: hide
      */
     private _showDataInfo(isEmphasis?: boolean) {
-        const normalShow = this.dataZoomModel.get('handleLabelShow');
-        const emphasisShow = this.dataZoomModel.getModel('emphasis')
-            .get('handleLabelShow');
+        const handleLabel = this.dataZoomModel.get('handleLabel') || {};
+        const normalShow = handleLabel.show || false;
+        const emphasisHandleLabel = this.dataZoomModel.getModel(['emphasis', 'handleLabel']);
+        const emphasisShow = emphasisHandleLabel.get('show') || false;
         // Dragging is considered as emphasis, unless emphasisShow is false
         const toShow = (isEmphasis || this._dragging)
             ? emphasisShow
diff --git a/test/dataZoom-handleLabelShow.html b/test/dataZoom-handleLabelShow.html
index 2454c5a373..f37b72be02 100644
--- a/test/dataZoom-handleLabelShow.html
+++ b/test/dataZoom-handleLabelShow.html
@@ -64,18 +64,22 @@
                 },
                 dataZoom: [{
                     type: 'slider',
-                    handleLabelShow: true
+                    handleLabel: {
+                        show: true
+                    }
                 }, {
                     type: 'slider',
                     yAxisIndex: 0,
-                    handleLabelShow: true,
+                    handleLabel: {
+                        show: true
+                    },
                     right: 30
                 }]
             };
 
             var chart = testHelper.create(echarts, 'main0', {
                 title: [
-                    'handleLabelShow: true, (emphasis.handleLabelShow: true)',
+                    'handleLabel.show: true, (emphasis.handleLabel.show: true)',
                     'Always show the handle label.'
                 ],
                 option: option
@@ -83,126 +87,146 @@
         });
         </script>
 
-<script>
-    require([
-        'echarts',
-        // 'map/js/china',
-        // './data/nutrients.json'
-    ], function (echarts) {
-        var option;
-
-        option = {
-            xAxis: {},
-            yAxis: {},
-            series: {
-                type: 'line',
-                data: [[11, 22], [33, 44]]
-            },
-            dataZoom: [{
-                type: 'slider',
-                handleLabelShow: true,
-                emphasis: {
-                    handleLabelShow: false
-                },
-            }, {
-                type: 'slider',
-                yAxisIndex: 0,
-                handleLabelShow: true,
-                emphasis: {
-                    handleLabelShow: false
-                },
-                right: 30
-            }]
-        };
-
-        var chart = testHelper.create(echarts, 'main1', {
-            title: [
-                'handleLabelShow: true, emphasis.handleLabelShow: false',
-                'Hide the handle label when mouse over, which may be useful to hide information when dragging so that user is more focused.'
-            ],
-            option: option
-        });
-    });
-    </script>
-
-
-<script>
-    require([
-        'echarts',
-        // 'map/js/china',
-        // './data/nutrients.json'
-    ], function (echarts) {
-        var option;
-
-        option = {
-            xAxis: {},
-            yAxis: {},
-            series: {
-                type: 'line',
-                data: [[11, 22], [33, 44]]
-            },
-            dataZoom: [{
-                type: 'slider',
-                handleLabelShow: false,
-            }, {
-                type: 'slider',
-                yAxisIndex: 0,
-                handleLabelShow: false,
-                right: 30
-            }]
-        };
-
-        var chart = testHelper.create(echarts, 'main2', {
-            title: [
-                'handleLabelShow: false, (emphasis.handleLabelShow: true)',
-                'Handle label is displayed whem hovering, which is the same as default.'
-            ],
-            option: option
-        });
-    });
-    </script>
-
-<script>
-    require([
-        'echarts',
-        // 'map/js/china',
-        // './data/nutrients.json'
-    ], function (echarts) {
-        var option;
-
-        option = {
-            xAxis: {},
-            yAxis: {},
-            series: {
-                type: 'line',
-                data: [[11, 22], [33, 44]]
-            },
-            dataZoom: [{
-                type: 'slider',
-                handleLabelShow: false,
-                emphasis: {
-                    handleLabelShow: false
-                },
-            }, {
-                type: 'slider',
-                yAxisIndex: 0,
-                handleLabelShow: false,
-                emphasis: {
-                    handleLabelShow: false
-                },
-                right: 30
-            }]
-        };
-
-        var chart = testHelper.create(echarts, 'main3', {
-            title: [
-                'handleLabelShow: false, emphasis.handleLabelShow: false',
-                'Never show the handle labels.'
-            ],
-            option: option
-        });
-    });
-    </script>
+        <script>
+            require([
+                'echarts',
+                // 'map/js/china',
+                // './data/nutrients.json'
+            ], function (echarts) {
+                var option;
+
+                option = {
+                    xAxis: {},
+                    yAxis: {},
+                    series: {
+                        type: 'line',
+                        data: [[11, 22], [33, 44]]
+                    },
+                    dataZoom: [{
+                        type: 'slider',
+                        handleLabel: {
+                            show: true
+                        },
+                        emphasis: {
+                            handleLabel: {
+                                show: false
+                            },
+                        },
+                    }, {
+                        type: 'slider',
+                        yAxisIndex: 0,
+                        handleLabel: {
+                            show: true
+                        },
+                        emphasis: {
+                            handleLabel: {
+                                show: false
+                            },
+                        },
+                        right: 30
+                    }]
+                };
+
+                var chart = testHelper.create(echarts, 'main1', {
+                    title: [
+                        'handleLabel.show: true, emphasis.handleLabel.show: false',
+                        'Hide the handle label when mouse over, which may be useful to hide information when dragging so that user is more focused.'
+                    ],
+                    option: option
+                });
+            });
+            </script>
+
+
+        <script>
+            require([
+                'echarts',
+                // 'map/js/china',
+                // './data/nutrients.json'
+            ], function (echarts) {
+                var option;
+
+                option = {
+                    xAxis: {},
+                    yAxis: {},
+                    series: {
+                        type: 'line',
+                        data: [[11, 22], [33, 44]]
+                    },
+                    dataZoom: [{
+                        type: 'slider',
+                        handleLabel: {
+                            show: false
+                        }
+                    }, {
+                        type: 'slider',
+                        yAxisIndex: 0,
+                        handleLabel: {
+                            show: false
+                        },
+                        right: 30
+                    }]
+                };
+
+                var chart = testHelper.create(echarts, 'main2', {
+                    title: [
+                        'handleLabel.show: false, (emphasis.handleLabel.show: true)',
+                        'Handle label is displayed whem hovering, which is the same as default.'
+                    ],
+                    option: option
+                });
+            });
+        </script>
+
+        <script>
+            require([
+                'echarts',
+                // 'map/js/china',
+                // './data/nutrients.json'
+            ], function (echarts) {
+                var option;
+
+                option = {
+                    xAxis: {},
+                    yAxis: {},
+                    series: {
+                        type: 'line',
+                        data: [[11, 22], [33, 44]]
+                    },
+                    dataZoom: [{
+                        type: 'slider',
+                        handleLabel: {
+                            show: false
+                        },
+                        emphasis: {
+                            handleLabel: {
+                                show: false
+                            },
+                        },
+                    }, {
+                        type: 'slider',
+                        yAxisIndex: 0,
+                        handleLabel: {
+                            show: false
+                        },
+                        emphasis: {
+                            handleLabel: {
+                                show: false
+                            },
+                        },
+                        right: 30
+                    }]
+                };
+
+                var chart = testHelper.create(echarts, 'main3', {
+                    title: [
+                        'handleLabel.show: false, emphasis.handleLabel.show: false',
+                        'Never show the handle labels.'
+                    ],
+                    option: option
+                });
+            });
+        </script>
     </body>
 </html>