diff --git a/docs/assets/option/en/series/pie.md b/docs/assets/option/en/series/pie.md index cd41cf6c06..7abd7245b5 100644 --- a/docs/assets/option/en/series/pie.md +++ b/docs/assets/option/en/series/pie.md @@ -82,7 +82,72 @@ Pie chart inner sector radius. The default value is 0. #${prefix} cornerRadius(number) -Pie chart sector corner radius. The default value is 0. +I. Value Description +- `0`: No corner radius effect, sector edges remain sharp and angular +- `0.1 - 0.3`: Slight corner radius effect, suitable for most business presentation scenarios +- `0.4 - 0.7`: Pronounced corner radius effect, creates a more modern look +- `0.8 - 1.0`: Maximum corner radius effect, sector edges become almost completely smooth + +II. Differences between cornerRadius and pie.style.cornerRadius +1️⃣ Configuration Level Comparison + +| Config Item | cornerRadius | pie.style.cornerRadius | +|------------|-------------|----------------------| +| Position | Top-level chart config | Inside pie.style config object | +| Syntax | `cornerRadius: number` | `cornerRadius: number \| Function` | + +2️⃣ Feature Comparison + +| Feature | cornerRadius | pie.style.cornerRadius | +|---------|-------------|----------------------| +| Data Type | Numbers only | Supports numbers and callback functions | +| Scope | Global uniform | Can control each sector independently | +| Data Access | Not supported | Can access current sector data | +| Dynamic Calculation | Not supported | Supports data-driven calculation | +| Priority | Low | High (overrides global config) | + +3️⃣ Application Scenarios + +① cornerRadius Suitable Scenarios +- ✨ When all sectors need uniform corner radius +- ✨ For simple and straightforward configuration +- ✨ When performance is a priority + +② pie.style.cornerRadius Suitable Scenarios +- 🎨 Need different corner radius based on data +- 🎨 Need to highlight specific sectors +- 🎨 Need interactive corner radius changes + +4️⃣ Performance Considerations + +① cornerRadius +✅ Low computation overhead +✅ High rendering efficiency +✅ Suitable for large datasets + +② pie.style.cornerRadius +⚠️ Callback functions increase computation +⚠️ Requires calculation for each sector +⚠️ Use cautiously with large datasets + +5️⃣ Usage Recommendations + +① General Scenarios +- Prefer using `cornerRadius` +- Use moderate values (0.1-0.3) +- Balance visual effects and performance + +② Advanced Customization +- Use `pie.style.cornerRadius` judiciously +- Avoid overly complex callback logic +- Be mindful of performance impact + +③ Mixed Usage +- Use `cornerRadius` for base values +- Use `pie.style.cornerRadius` for exceptions +- Combine with `padAngle` for optimal visuals + +>💡 Tip: In practice, it's recommended to use cornerRadius for uniform corner effects and only use pie.style.cornerRadius when differentiated treatment is necessary. #${prefix} startAngle(number) = -90 diff --git a/docs/assets/option/zh/series/pie.md b/docs/assets/option/zh/series/pie.md index 18b92f8863..2f50000ef7 100644 --- a/docs/assets/option/zh/series/pie.md +++ b/docs/assets/option/zh/series/pie.md @@ -83,7 +83,73 @@ pie: { #${prefix} cornerRadius(number) -饼图扇区圆角半径。默认值为 0。 +饼图扇区的圆角半径配置,用于控制扇区边缘的圆滑程度。取值范围为 [0-1],默认值为 0。 +一、取值说明 +- `0`: 完全不应用圆角效果,扇区边缘呈现尖锐的角; +- `0.1 - 0.3`: 轻微的圆角效果,适合大多数商业展示场景; +- `0.4 - 0.7`: 明显的圆角效果,使图表看起来更现代化; +- `0.8 - 1.0`: 最大圆角效果,扇区边缘近似完全圆滑; + +二、cornerRadius 与 pie.style.cornerRadius 的区别 +1️⃣ 配置层级对比 + +| 配置项 | cornerRadius | pie.style.cornerRadius | +|-------|-------------|----------------------| +| 位置 | 图表配置的顶层属性 | pie.style 配置对象内 | +| 语法 | `cornerRadius: number` | `cornerRadius: number \| Function` | + +2️⃣ 功能特性对比 + +| 特性 | cornerRadius | pie.style.cornerRadius | +|-----|-------------|----------------------| +| 数据类型 | 仅支持数值 | 支持数值和回调函数 | +| 作用范围 | 全局统一 | 可独立控制每个扇区 | +| 数据访问 | 不支持 | 可访问当前扇区数据 | +| 动态计算 | 不支持 | 支持根据数据动态计算 | +| 优先级 | 低 | 高(覆盖全局配置) | + +3️⃣ 应用场景方面 + +① cornerRadius 适用场景 +- ✨ 所有扇区需要统一的圆角效果 +- ✨ 追求简单直观的配置方式 +- ✨ 对性能要求较高的场景 + +② pie.style.cornerRadius 适用场景 +- 🎨 需要根据数据设置不同圆角 +- 🎨 需要突出显示特定扇区 +- 🎨 需要实现交互式圆角变化 + +4️⃣ 性能考虑方面 + +① cornerRadius +✅ 计算开销小 +✅ 渲染效率高 +✅ 适合大数据量场景 + +② pie.style.cornerRadius +⚠️ 回调函数会增加计算量 +⚠️ 需要为每个扇区单独计算 +⚠️ 数据量大时需谨慎使用 + +5️⃣ 使用建议方面 + +①一般场景 +- 优先使用 `cornerRadius` +- 设置适中的值(0.1-0.3) +- 确保视觉效果和性能的平衡 + +②高级定制 +- 合理使用 `pie.style.cornerRadius` +- 避免过于复杂的回调逻辑 +- 注意性能影响 + +③混合使用 +- 使用 `cornerRadius` 设置基础值 +- 用 `pie.style.cornerRadius` 处理特例 +- 配合 `padAngle` 优化视觉效果 + +>💡提示:在实际应用中,建议优先使用 cornerRadius 配置统一的圆角效果,只在确实需要差异化处理时才使用 pie.style.cornerRadius。 #${prefix} startAngle(number) = -90