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

[LeeYuze]

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

[echarts-bot[bot]]

@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 ### Expected Behavior How do I fix it? ### Environment ````markdown - OS: - Browser: - Framework: ```` ### Any additional comments? _No response_

[plainheart]

这应该只是个开发时警告，用来提醒启用 alignTicks 时可能出现的一些问题。

[LeeYuze]

这应该只是个开发时警告，用来提醒启用 alignTicks 时可能出现的一些问题。

但是我也没开启这个alignTicks

[zhangzhen123hua]

降低echarts版本可解决。

[chesongsong]

我也有这个问题，同时数据不会展示出来

[fyzhu]

1. radar don't have option of alignTicks，but align radar's tick in code
2. haven't check alignTicks' value before alignScaleTicks in radar

[linzhengyang]

你在indicator里面设置的max值修改下应该就可以了

[tyg6]

这bug都多久了还没解决。。

[faintout]

同问题

[suiucat]

同问题

[0kingbob0]

去掉indicator里的max

[magnificent007]

去掉indicator里的max

去掉雷达图就不准确了

[huang858563]

这个问题什么时候解决呢

[VerletKing]

这个问题什么时候解决呢

现在都还没有解决

[yyle88]

同样的问题

[ECharts] The ticks may be not readable when set min: 0, max: 120 and alignTicks: true

代码：

<template>
    <el-row class="cen-row">
        <el-col :span="20" :offset="2">
            <v-chart class="chart" :option="option" />
        </el-col>
    </el-row>
</template>

<script setup lang="ts">
import { provide, ref } from 'vue'
import { THEME_KEY } from 'vue-echarts'
import { graphic } from 'echarts/core'

provide(THEME_KEY, 'dark')

const option = ref({
    color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
    title: {
        text: 'Customized Radar Chart',
    },
    legend: {},
    radar: [
        {
            indicator: [
                { text: 'Indicator1' },
                { text: 'Indicator2' },
                { text: 'Indicator3' },
                { text: 'Indicator4' },
                { text: 'Indicator5' },
            ],
            center: ['25%', '50%'],
            radius: 120,
            startAngle: 90,
            splitNumber: 4,
            shape: 'circle',
            axisName: {
                formatter: '【{value}】',
                color: '#428BD4',
            },
            splitArea: {
                areaStyle: {
                    color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
                    shadowColor: 'rgba(0, 0, 0, 0.2)',
                    shadowBlur: 10,
                },
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(211, 253, 250, 0.8)',
                },
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(211, 253, 250, 0.8)',
                },
            },
        },
        {
            indicator: [
                { text: 'Indicator1', max: 150 },
                { text: 'Indicator2', max: 150 },
                { text: 'Indicator3', max: 150 },
                { text: 'Indicator4', max: 120 },
                { text: 'Indicator5', max: 108 },
                { text: 'Indicator6', max: 72 },
            ],
            center: ['75%', '50%'],
            radius: 120,
            axisName: {
                color: '#fff',
                backgroundColor: '#666',
                borderRadius: 3,
                padding: [3, 5],
            },
        },
    ],
    series: [
        {
            type: 'radar',
            emphasis: {
                lineStyle: {
                    width: 4,
                },
            },
            data: [
                {
                    value: [100, 8, 0.4, -80, 2000],
                    name: 'Data A',
                },
                {
                    value: [60, 5, 0.3, -100, 1500],
                    name: 'Data B',
                    areaStyle: {
                        color: 'rgba(255, 228, 52, 0.6)',
                    },
                },
            ],
        },
        {
            type: 'radar',
            radarIndex: 1,
            data: [
                {
                    value: [120, 118, 130, 100, 99, 70],
                    name: 'Data C',
                    symbol: 'rect',
                    symbolSize: 12,
                    lineStyle: {
                        type: 'dashed',
                    },
                    label: {
                        show: true,
                        formatter: function (params: any) {
                            return params.value as string
                        },
                    },
                },
                {
                    value: [100, 93, 50, 90, 70, 60],
                    name: 'Data D',
                    areaStyle: {
                        color: new graphic.RadialGradient(0.1, 0.6, 1, [
                            {
                                color: 'rgba(255, 145, 124, 0.1)',
                                offset: 0,
                            },
                            {
                                color: 'rgba(255, 145, 124, 0.9)',
                                offset: 1,
                            },
                        ]),
                    },
                },
            ],
        },
    ],
})
</script>

<style scoped>
.cen-row {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 100vh; /* 设置父容器的高度为视口高度 */
}

.chart {
    height: 600px;
    width: 800px;
    background-color: navajowhite;
}
</style>

这个暂时没啥解决方案只能是按照前面说的 “去掉indicator里的max” 因为我只是个demo所以去掉了就去掉了吧。