Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 66 additions & 1 deletion docs/assets/option/en/series/pie.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
68 changes: 67 additions & 1 deletion docs/assets/option/zh/series/pie.md
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,73 @@ pie: {

#${prefix} cornerRadius(number)

饼图扇区圆角半径。默认值为 0。
饼图扇区的圆角半径配置,用于控制扇区边缘的圆滑程度。取值范围为 [0-1],默认值为 0。
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里的文案看起来像是大模型生成的,请按照理解用大家比较能够理解的语言,简洁的补充文档
重点说明 这里的cornerRadius 是0-1 的百分比值,根据代码逻辑说清楚计算逻辑

一、取值说明
- `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

Expand Down