You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by "i-ce-fish (via GitHub)" <gi...@apache.org> on 2025/06/11 07:48:44 UTC

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

i-ce-fish commented on issue #17763:
URL: https://github.com/apache/echarts/issues/17763#issuecomment-2961599925

   > **Issue Symptom  问题症状** Console warning appears when using `indicator.max: 100` + `alignTicks: true` in radar chart:在雷达图中使用 `indicator.max: 100` + `alignTicks: true` 时出现控制台警告: `[ECharts] The ticks may be not readable when set min: 0, max: 100 and alignTicks: true` Removing `max` directly breaks data proportions.删除 `max` 会直接破坏数据比例。
   > 
   > **Root Cause  根本原因**
   > 
   > * `alignTicks: true` forces ticks alignment across axes but causes conflicts with dense `0-100` ranges`alignTicks: true` 强制跨轴对齐,但会导致与密集的 `0-100` 范围发生冲突
   > * Default `splitNumber` logic may conflict with `max: 100`默认 `splitNumber` 逻辑可能与 `max: 100` 冲突
   > 
   > **Solution  解决方案**
   > 
   > // Problematic config (with warning)
   > radar: {
   >   indicator: skillNames.map(name => ({ name, max: 100 })),
   >   shape: 'polygon',
   >   splitNumber: 4,  // ❌ Mismatched split for 0-100 range
   > }
   > 
   > // Fixed config (warning-free)
   > radar: {
   >   indicator: skillNames.map(name => ({ name, max: 100 })), // ✅ Keep scale
   >   shape: 'polygon',
   >   splitNumber: 5,          // ✅ 100/5=20 for clean ticks
   >   alignTicks: false,       // ✅ Disable forced alignment
   >   axisTick: { show: false },// ✅ Hide crowded ticks
   >   axisLabel: {             // ✅ Optimize labels
   >     interval: 'auto',      // Auto-calculate interval
   >     formatter: (v) => Math.round(v) // Force integer display
   >   }
   > }
   > **Key Config Explanations  关键配置说明**
   > 
   > 1. `splitNumber: 5`
   >    
   >    * Divide 0-100 into 5 segments (20 units each)将 0-100 分成 5 段(每段 20 个单位)
   > 2. `alignTicks: false`
   >    
   >    * Prevent warning by disabling forced tick alignment通过禁用强制刻度对齐来防止警告
   > 3. `axisLabel.formatter`
   >    
   >    * Avoid decimal anomalies like `20.0000000001`避免出现 `20.0000000001` 之类的小数异常
   > 
   > **Best Practices  最佳实践**
   > 
   > * Ensure all data values ≤ `max: 100`确保所有数据值≤ `max: 100`
   > * Add `splitArea` for better visual hierarchy添加 `splitArea` 以获得更好的视觉层次
   > * Use `axisTick.length: 3` if tick lines are needed如果需要刻度线,请使用 `axisTick.length: 3`
   
   Are you AI?  This is not work in my porject


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org