This is an automated email from the ASF dual-hosted git repository. ovilia pushed a commit to branch feat-axis-align-lastLabel in repository https://gitbox.apache.org/repos/asf/echarts.git
commit 1ab5597af64d650fe047a6fc7f1384ee6039f764 Author: Ovilia <[email protected]> AuthorDate: Fri Oct 20 15:26:37 2023 +0800 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(-) diff --git a/src/component/axis/AxisBuilder.ts b/src/component/axis/AxisBuilder.ts index c7b48dcaf..f9837df4e 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 bb4d1b7bf..aa92868e3 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 000000000..559f3b836 --- /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> + --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
