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*
3条答案
按热度按时间xuo3flqw1#
@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
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
Any additional comments?
ergxz8rk2#
这应该只是个开发时警告，用来提醒启用
alignTicks时可能出现的一些问题。raogr8fs3#
这应该只是个开发时警告，用来提醒启用
alignTicks时可能出现的一些问题。但是我也没开启这个alignTicks