echarts [Bug] 使用Vue3渲染雷达图，控制台出现The ticks may be not readable

Version

5.4.0

Link to Minimal Reproduction

No response

Steps to Reproduce

{ tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, radar: { radius: '50%', center: ['50%', '42%'], splitNumber: 8, splitArea: { areaStyle: { color: ['rgba(127,95,132,.3)'], opacity: 1, shadowBlur: 45, shadowColor: 'rgba(0,0,0,.5)', shadowOffsetX: 0, shadowOffsetY: 15 } }, indicator: [ { name: 'Sales', max: 10000 }, { name: 'Administration', max: 20000 }, { name: 'Information Technology', max: 20000 }, { name: 'Customer Support', max: 20000 }, { name: 'Development', max: 20000 }, { name: 'Marketing', max: 20000 } ] }, legend: { left: 'center', bottom: '10', data: ['Allocated Budget', 'Expected Spending', 'Actual Spending'] }, series: [ { type: 'radar', symbolSize: 0, areaStyle: { shadowBlur: 13, shadowColor: 'rgba(0,0,0,.2)', shadowOffsetX: 0, shadowOffsetY: 10, opacity: 1 }, data: [ { value: [5000, 7000, 12000, 11000, 15000, 14000], name: 'Allocated Budget' }, { value: [4000, 9000, 15000, 15000, 13000, 11000], name: 'Expected Spending' }, { value: [5500, 11000, 12000, 15000, 12000, 12000], name: 'Actual Spending' } ], animationDuration: 3000 } ] }

Current Behavior

使用vue3渲染雷达图，控制台就会出现⚠️The ticks may be not readable when set min: 0, max: 10000 and alignTicks: true 用官方的例子也会出现

Expected Behavior

我要如何修复它？

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

Oct 13 '22 09:10 LeeYuze

@LeeYuze It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗

TRANSLATED

TITLE

[Bug] Using Vue3 to render a radar map, The ticks may be not readable appears on the console

BODY

Version

5.4.0

Link to Minimal Reproduction

No response

Steps to Reproduce

{ tooltip: { trigger: 'axis', axisPointer: { // Coordinate axis indicator, the axis trigger is valid type: 'shadow' // default is straight line, optional: 'line' | 'shadow' } }, radar: { radius: '50%', center: ['50%', '42%'], splitNumber: 8, splitArea: { areaStyle: { color: ['rgba(127,95,132,.3)'], opacity: 1, shadowBlur: 45, shadowColor: 'rgba(0,0,0,.5)', shadowOffsetX: 0, shadowOffsetY: 15 } }, indicator: [ { name: 'Sales', max: 10000 }, { name: 'Administration', max: 20000 }, { name: 'Information Technology', max: 20000 }, { name: 'Customer Support', max: 20000 }, { name: 'Development', max: 20000 }, { name: 'Marketing', max: 20000 } ] }, legend: { left: 'center', bottom: '10', data: ['Allocated Budget', 'Expected Spending', 'Actual Spending'] }, series: [ { type: 'radar', symbolSize: 0, areaStyle: { shadowBlur: 13, shadowColor: 'rgba(0,0,0,.2)', shadowOffsetX: 0, shadowOffsetY: 10, opacity: 1 }, data: [ { value: [5000, 7000, 12000, 11000, 15000, 14000], name: 'Allocated Budget' }, { value: [4000, 9000, 15000, 15000, 13000, 11000], name: 'Expected Spending' }, { value: [5500, 11000, 12000, 15000, 12000, 12000], name: 'Actual Spending' } ], animationDuration: 3000 } ] }

Current Behavior

Use vue3 to render the radar chart, the console will appear ⚠️The ticks may be not readable when set min: 0, max: 10000 and alignTicks: true Using the official example will also appear