From 1ab5597af64d650fe047a6fc7f1384ee6039f764 Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Fri, 20 Oct 2023 15:26:37 +0800
Subject: [PATCH 1/2] feat(label): support align for min/max labels

---
 src/component/axis/AxisBuilder.ts |  36 +++++--
 src/coord/axisCommonTypes.ts      |   9 ++
 test/axis-align-lastLabel.html    | 150 ++++++++++++++++++++++++++++++
 3 files changed, 189 insertions(+), 6 deletions(-)
 create mode 100644 test/axis-align-lastLabel.html

diff --git a/src/component/axis/AxisBuilder.ts b/src/component/axis/AxisBuilder.ts
index c7b48dcafd..f9837df4eb 100644
--- a/src/component/axis/AxisBuilder.ts
+++ b/src/component/axis/AxisBuilder.ts
@@ -17,7 +17,7 @@
 * under the License.
 */
 
-import {retrieve, defaults, extend, each, isObject, map, isString, isNumber, isFunction} from 'zrender/src/core/util';
+import {retrieve, defaults, extend, each, isObject, map, isString, isNumber, isFunction, retrieve2} from 'zrender/src/core/util';
 import * as graphic from '../../util/graphic';
 import {getECData} from '../../util/innerStore';
 import {createTextStyle} from '../../label/labelStyle';
@@ -776,6 +776,29 @@ function buildAxisLabel(
 
         const tickCoord = axis.dataToCoord(tickValue);
 
+        const align = itemLabelModel.getShallow('align', true)
+            || labelLayout.textAlign;
+        const alignMin = retrieve2(
+            itemLabelModel.getShallow('alignMinLabel', true),
+            align
+        );
+        const alignMax = retrieve2(
+            itemLabelModel.getShallow('alignMaxLabel', true),
+            align
+        );
+
+        const verticalAlign = itemLabelModel.getShallow('verticalAlign', true)
+            || itemLabelModel.getShallow('baseline', true)
+            || labelLayout.textVerticalAlign;
+        const verticalAlignMin = retrieve2(
+            itemLabelModel.getShallow('verticalAlignMinLabel', true),
+            verticalAlign
+        );
+        const verticalAlignMax = retrieve2(
+            itemLabelModel.getShallow('verticalAlignMaxLabel', true),
+            verticalAlign
+        );
+
         const textEl = new graphic.Text({
             x: tickCoord,
             y: opt.labelOffset + opt.labelDirection * labelMargin,
@@ -784,11 +807,12 @@ function buildAxisLabel(
             z2: 10 + (labelItem.level || 0),
             style: createTextStyle(itemLabelModel, {
                 text: formattedLabel,
-                align: itemLabelModel.getShallow('align', true)
-                    || labelLayout.textAlign,
-                verticalAlign: itemLabelModel.getShallow('verticalAlign', true)
-                    || itemLabelModel.getShallow('baseline', true)
-                    || labelLayout.textVerticalAlign,
+                align: index === 0
+                    ? alignMin
+                    : index === labels.length - 1 ? alignMax : align,
+                verticalAlign: index === 0
+                    ? verticalAlignMin
+                    : index === labels.length - 1 ? verticalAlignMax : verticalAlign,
                 fill: isFunction(textColor)
                     ? textColor(
                         // (1) In category axis with data zoom, tick is not the original
diff --git a/src/coord/axisCommonTypes.ts b/src/coord/axisCommonTypes.ts
index bb4d1b7bf1..aa92868e3e 100644
--- a/src/coord/axisCommonTypes.ts
+++ b/src/coord/axisCommonTypes.ts
@@ -17,6 +17,7 @@
 * under the License.
 */
 
+import { TextAlign, TextVerticalAlign } from 'zrender/src/core/types';
 import {
     TextCommonOption, LineStyleOption, OrdinalRawValue, ZRColor,
     AreaStyleOption, ComponentOption, ColorString,
@@ -223,6 +224,14 @@ interface AxisLabelBaseOption extends Omit<TextCommonOption, 'color'> {
     showMinLabel?: boolean,
     // true | false | null/undefined (auto)
     showMaxLabel?: boolean,
+    // 'left' | 'center' | 'right' | null/undefined (auto)
+    alignMinLabel?: TextAlign,
+    // 'left' | 'center' | 'right' | null/undefined (auto)
+    alignMaxLabel?: TextAlign,
+    // 'top' | 'middle' | 'bottom' | null/undefined (auto)
+    verticalAlignMinLabel?: TextVerticalAlign,
+    // 'top' | 'middle' | 'bottom' | null/undefined (auto)
+    verticalAlignMaxLabel?: TextVerticalAlign,
     margin?: number,
     rich?: Dictionary<TextCommonOption>
     /**
diff --git a/test/axis-align-lastLabel.html b/test/axis-align-lastLabel.html
new file mode 100644
index 0000000000..559f3b8365
--- /dev/null
+++ b/test/axis-align-lastLabel.html
@@ -0,0 +1,150 @@
+<!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>
+
+
+
+
+
+
+        <script>
+        require([
+            'echarts',
+            // 'map/js/china',
+            // './data/nutrients.json'
+        ], function (echarts) {
+            var option;
+
+            var data = [];
+            for (let i = 0; i < 200; ++i) {
+                data.push([i, Math.floor(Math.random() * 100)]);
+            }
+
+            option = {
+                xAxis: {
+                    axisLabel: {
+                        formatter: 'label of {value}',
+                        showMinLabel: true,
+                        showMaxLabel: true,
+                        alignMinLabel: 'left',
+                        alignMaxLabel: 'right'
+                    }
+                },
+                yAxis: {},
+                series: {
+                    type: 'line',
+                    data
+                },
+                dataZoom: {
+                    type: 'slider',
+                    start: 20,
+                    end: 42
+                }
+            };
+
+            var chart = testHelper.create(echarts, 'main0', {
+                title: [
+                    'alignMinLabel: left, alignMaxLabel: right'
+                ],
+                option: option
+                // height: 300,
+                // buttons: [{text: 'btn-txt', onclick: function () {}}],
+                // recordCanvas: true,
+            });
+        });
+        </script>
+
+
+
+        <script>
+        require([
+            'echarts',
+            // 'map/js/china',
+            // './data/nutrients.json'
+        ], function (echarts) {
+            var option;
+
+            var data = [];
+            for (let i = 0; i < 200; ++i) {
+                data.push([i, Math.floor(Math.random() * 100)]);
+            }
+
+            option = {
+                yAxis: {
+                    axisLabel: {
+                        formatter: 'label of {value}',
+                        showMinLabel: true,
+                        showMaxLabel: true,
+                        verticalAlignMinLabel: 'bottom',
+                        verticalAlignMaxLabel: 'top'
+                    }
+                },
+                xAxis: {},
+                series: {
+                    type: 'line',
+                    data
+                },
+                dataZoom: {
+                    type: 'slider',
+                    start: 20,
+                    end: 42,
+                    yAxisIndex: 0
+                }
+            };
+
+            var chart = testHelper.create(echarts, 'main1', {
+                title: [
+                    'verticalAlignMinLabel: bottom, verticalAlignMaxLabel: top'
+                ],
+                option: option
+                // height: 300,
+                // buttons: [{text: 'btn-txt', onclick: function () {}}],
+                // recordCanvas: true,
+            });
+        });
+        </script>
+
+
+    </body>
+</html>
+

From 3ea19707cab43fb006dab8c5a5ad926dd58c6438 Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Fri, 20 Oct 2023 15:36:40 +0800
Subject: [PATCH 2/2] feat(label): fix lint problems

---
 src/component/axis/AxisBuilder.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/component/axis/AxisBuilder.ts b/src/component/axis/AxisBuilder.ts
index f9837df4eb..a3773a823c 100644
--- a/src/component/axis/AxisBuilder.ts
+++ b/src/component/axis/AxisBuilder.ts
@@ -17,7 +17,9 @@
 * under the License.
 */
 
-import {retrieve, defaults, extend, each, isObject, map, isString, isNumber, isFunction, retrieve2} from 'zrender/src/core/util';
+import {
+    retrieve, defaults, extend, each, isObject, map, isString, isNumber, isFunction, retrieve2
+} from 'zrender/src/core/util';
 import * as graphic from '../../util/graphic';
 import {getECData} from '../../util/innerStore';
 import {createTextStyle} from '../../label/labelStyle';