This is an automated email from the ASF dual-hosted git repository. ovilia pushed a commit to branch fix-16189 in repository https://gitbox.apache.org/repos/asf/echarts.git
commit 9ee1a32654aaaed155d9b35d76c7ac9a68ab8275 Author: Ovilia <[email protected]> AuthorDate: Fri Dec 10 14:57:26 2021 +0800 fix(axis): axis label width when overflow is set --- src/chart/treemap/TreemapSeries.ts | 3 +-- src/model/mixin/textStyle.ts | 7 ++++++- src/util/types.ts | 3 +++ test/bar3.html | 6 +++++- 4 files changed, 15 insertions(+), 4 deletions(-) diff --git a/src/chart/treemap/TreemapSeries.ts b/src/chart/treemap/TreemapSeries.ts index 043018c..241837c 100644 --- a/src/chart/treemap/TreemapSeries.ts +++ b/src/chart/treemap/TreemapSeries.ts @@ -54,7 +54,6 @@ interface BreadcrumbItemStyleOption extends ItemStyleOption { } interface TreemapSeriesLabelOption extends SeriesLabelOption { - ellipsis?: boolean formatter?: string | ((params: CallbackDataParams) => string) } @@ -305,7 +304,7 @@ class TreemapSeriesModel extends SeriesModel<TreemapSeriesOption> { upperLabel: { show: true, position: [0, '50%'], - ellipsis: true, + overflow: 'truncate', verticalAlign: 'middle' } }, diff --git a/src/model/mixin/textStyle.ts b/src/model/mixin/textStyle.ts index 6590e86..5647468 100644 --- a/src/model/mixin/textStyle.ts +++ b/src/model/mixin/textStyle.ts @@ -28,6 +28,7 @@ const PATH_COLOR = ['textStyle', 'color'] as const; export type LabelFontOption = Pick<LabelOption, 'fontStyle' | 'fontWeight' | 'fontSize' | 'fontFamily'>; type LabelRectRelatedOption = Pick<LabelOption, 'align' | 'verticalAlign' | 'padding' | 'lineHeight' | 'baseline' | 'rich' + | 'width' | 'height' | 'overflow' | 'ellipsis' > & LabelFontOption; // TODO Performance improvement? @@ -68,7 +69,11 @@ class TextStyleMixin { verticalAlign: this.getShallow('verticalAlign') || this.getShallow('baseline'), padding: this.getShallow('padding') as number[], lineHeight: this.getShallow('lineHeight'), - rich: this.getShallow('rich') + rich: this.getShallow('rich'), + width: this.getShallow('width') as number, + height: this.getShallow('height') as number, + overflow: this.getShallow('overflow'), + ellipsis: this.getShallow('ellipsis') }); tmpRichText.update(); return tmpRichText.getBoundingRect(); diff --git a/src/util/types.ts b/src/util/types.ts index ef9938b..eba0a07 100644 --- a/src/util/types.ts +++ b/src/util/types.ts @@ -1078,6 +1078,9 @@ export interface TextCommonOption extends ShadowOptionMixin { textShadowOffsetY?: number tag?: string + + overflow?: 'break' | 'breakAll' | 'truncate' | 'none' + ellipsis?: string } export interface LabelFormatterCallback<T = CallbackDataParams> { diff --git a/test/bar3.html b/test/bar3.html index f2d6fb3..9b270a2 100644 --- a/test/bar3.html +++ b/test/bar3.html @@ -51,7 +51,7 @@ under the License. var data4 = []; for (var i = 0; i < 10; i++) { - xAxisData.push('类目' + i); + xAxisData.push(i + ' Long label should use ellipsis if width is set'); data0.push(-Math.random().toFixed(2)); data1.push((Math.random() * 5).toFixed(2)); data2.push(-Math.random().toFixed(2)); @@ -127,6 +127,10 @@ under the License. }, splitArea: { show: true + }, + axisLabel: { + width: 100, + overflow: 'truncate', } }, xAxis: { --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
