From aaad484aa397b45a156080442b3c295da455ec8f Mon Sep 17 00:00:00 2001 From: Jay Zhou <190699450+jayzhou2309@users.noreply.github.com> Date: Fri, 2 Oct 2026 11:38:03 +0800 Subject: [PATCH 1/2] test(polar): cover radiusAxis axisTick.inside and axisLabel.inside --- .../ut/spec/component/axis/radiusAxis.test.ts | 67 +++++++++++++++++++ 1 file changed, 67 insertions(+) create mode 100644 test/ut/spec/component/axis/radiusAxis.test.ts diff --git a/test/ut/spec/component/axis/radiusAxis.test.ts b/test/ut/spec/component/axis/radiusAxis.test.ts new file mode 100644 index 0000000000..996cdd601f --- /dev/null +++ b/test/ut/spec/component/axis/radiusAxis.test.ts @@ -0,0 +1,67 @@ +/* +* 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. +*/ + + +import { EChartsType } from '../../../../../src/echarts'; +import { createChart, getGraphicElements } from '../../../core/utHelper'; +import { Line, Text } from '../../../../../src/util/graphic'; + +describe('radiusAxis', function () { + + let chart: EChartsType; + beforeEach(function () { + chart = createChart({ width: 400, height: 400 }); + }); + afterEach(function () { + chart.dispose(); + }); + + // The radius axis runs from the polar center (200, 200) along +x when + // angleAxis.startAngle is 0, so ticks and labels sit above (y < 200) + // or below (y > 200) it. + function render(inside: boolean) { + chart.setOption({ + animation: false, + angleAxis: { startAngle: 0 }, + radiusAxis: { + type: 'category', + data: ['Mon', 'Tue', 'Wed', 'Thu'], + axisTick: { inside }, + axisLabel: { inside } + }, + polar: { center: ['50%', '50%'] }, + series: [{ type: 'bar', data: [1, 2, 3, 4], coordinateSystem: 'polar' }] + }); + const els = getGraphicElements(chart, 'radiusAxis'); + const tick = els.find(el => el.anid && el.anid.startsWith('ticks_')) as Line; + const label = els.find(el => el instanceof Text && el.style.text === 'Mon') as Text; + return { + tickEndY: tick.shape.y2 - tick.shape.y1, + labelSide: Math.sign(label.y - 200) + }; + } + + it('should draw ticks and labels on the default side', function () { + expect(render(false)).toEqual({ tickEndY: -5, labelSide: -1 }); + }); + + it('should flip ticks and labels with axisTick.inside and axisLabel.inside', function () { + expect(render(true)).toEqual({ tickEndY: 5, labelSide: 1 }); + }); +}); From 3075024e983d978fb017713be99696a51193a596 Mon Sep 17 00:00:00 2001 From: Jay Zhou <190699450+jayzhou2309@users.noreply.github.com> Date: Fri, 2 Oct 2026 11:38:35 +0800 Subject: [PATCH 2/2] fix(polar): respect radiusAxis axisTick.inside and axisLabel.inside. close #17434 --- src/component/axis/RadiusAxisView.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/component/axis/RadiusAxisView.ts b/src/component/axis/RadiusAxisView.ts index f1c3f464c3..92e3101790 100644 --- a/src/component/axis/RadiusAxisView.ts +++ b/src/component/axis/RadiusAxisView.ts @@ -223,8 +223,8 @@ function layoutAxis(polar: Polar, radiusAxisModel: RadiusAxisModel, axisAngle: n return { position: [polar.cx, polar.cy], rotation: axisAngle / 180 * Math.PI, - labelDirection: -1 as const, - tickDirection: -1 as const, + labelDirection: radiusAxisModel.get(['axisLabel', 'inside']) ? 1 as const : -1 as const, + tickDirection: radiusAxisModel.get(['axisTick', 'inside']) ? 1 as const : -1 as const, nameDirection: 1 as const, labelRotate: radiusAxisModel.getModel('axisLabel').get('rotate'), // Over splitLine and splitArea