docs: 增加放大镜&饼图标签文档 #2133
docs: 增加放大镜&饼图标签文档 #2133
Conversation
Summary of ChangesHello @tangying1027, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 本次拉取请求主要致力于完善图表组件的文档。它新增了放大镜和饼图标签组件的详细说明，更新了图例组件的布局模式属性，并对仪表盘、旭日图和矩形树图的文档路径进行了调整，以优化文档结构和可发现性。 Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
本次 PR 主要增加了放大镜（Magnifier）和饼图标签（PieLabel）的组件文档，并对部分现有文档进行了重构和更新。整体上提升了文档的覆盖面，做得不错。
我在评审中发现了一些可以改进的地方，主要集中在新文档中：
magnifier.zh.md中存在两个功能相似但默认值冲突的属性show和visible，可能会让用户感到困惑。pieLabel.zh.md的代码示例中使用了未定义的变量，会导致用户直接复制使用时出错。gauge.zh.md中有空的章节和描述不够清晰的属性。legend.zh.md中有一个小的标点格式问题。
建议在合并前修复这些问题，以提高文档的质量和准确性。
| fontWeight: 500, | ||
| })} | ||
| label2={(data) => ({ | ||
| text: data.value + ' (' + ((data.value / total) * 100).toFixed(1) + '%)', |
There was a problem hiding this comment.
在“自定义样式”的示例代码中，计算百分比时使用了变量 total，但是该变量在代码片段中并未定义。这会导致用户直接复制代码运行时出错。建议在示例中补充 total 变量的定义，例如在 <Chart> 组件之前加上 const total = data.reduce((sum, item) => sum + item.value, 0);。
| <Chart data={allData}> | ||
| <Pie x="name" y="value" /> | ||
| <PieLabel | ||
| type="spider" | ||
| records={allData.filter((d) => d.value > 10)} // 只显示值大于10的标签 | ||
| label1={(data) => ({ text: data.name })} | ||
| label2={(data) => ({ text: data.value + '%' })} | ||
| /> | ||
| </Chart> |
There was a problem hiding this comment.
在“自定义显示记录”的示例中，使用了 allData 变量，但它没有在代码块中定义。这同样会导致用户复制代码后无法直接运行。请提供 allData 的定义，例如 const allData = [...]。
| ### show: boolean | ||
|
|
||
| 是否显示放大镜，默认为 `false` | ||
|
|
||
| ### x: number | ||
|
|
||
| 放大镜中心点的 x 坐标，默认为 `0` | ||
|
|
||
| ### y: number | ||
|
|
||
| 放大镜中心点的 y 坐标，默认为 `0` | ||
|
|
||
| ### width: number | ||
|
|
||
| 放大镜的宽度，默认为 `100` | ||
|
|
||
| ### height: number | ||
|
|
||
| 放大镜的高度，默认为 `80` | ||
|
|
||
| ### scale: number | ||
|
|
||
| 放大倍数，默认为 `2` | ||
|
|
||
| ### radius: number | ||
|
|
||
| 放大镜圆角半径，默认为 `10` | ||
|
|
||
| ### borderWidth: number | ||
|
|
||
| 边框宽度，默认为 `1` | ||
|
|
||
| ### borderColor: string | ||
|
|
||
| 边框颜色，默认为 `#e8e8e8` | ||
|
|
||
| ### backgroundColor: string | ||
|
|
||
| 背景颜色，默认为 `rgba(255, 255, 255, 0.9)` | ||
|
|
||
| ### shadowBlur: number | ||
|
|
||
| 阴影模糊程度，默认为 `10` | ||
|
|
||
| ### shadowColor: string | ||
|
|
||
| 阴影颜色，默认为 `rgba(0, 0, 0, 0.3)` | ||
|
|
||
| ### visible: boolean | ||
|
|
||
| 是否显示，默认为 `true` |
There was a problem hiding this comment.
文档中同时存在 show 和 visible 两个属性来控制可见性，这可能会让使用者感到困惑。show 的默认值是 false，而 visible 的默认值是 true。建议统一为一个属性，或者详细说明这两个属性之间的关系和优先级。例如，如果 show 是控制组件是否渲染，而 visible 是控制已渲染组件的显示/隐藏，需要明确说明。
|
|
||
| ### layoutMode: 'uniform' | 'adaptive' | ||
|
|
||
| 可选值为：`'uniform' | 'adaptive'` , 默认为 `'uniform'` |
There was a problem hiding this comment.
建议将这里的逗号修改为中文逗号（，），并移除前面的空格，以符合中文排版规范。
| 可选值为：`'uniform' | 'adaptive'` , 默认为 `'uniform'` | |
| 可选值为：`'uniform' | 'adaptive'`，默认为 `'uniform'` |
| ### field: string | ||
|
|
||
| 数据字段名 |
There was a problem hiding this comment.
field 属性的描述“数据字段名”过于简单，没有说明它的具体用途和使用场景。从组件的使用示例来看，Gauge 组件似乎是直接通过 percent 属性来控制进度，而不是通过数据绑定。请详细说明 field 属性的作用，或者提供一个使用该属性的代码示例。
|
|
||
| 数据字段名 | ||
|
|
||
| ## 常见问题 |
There was a problem hiding this comment.
“常见问题”章节目前是空的。如果暂时没有内容，建议先移除该章节，以避免给用户带来困惑。或者可以根据旧版文档或常见场景补充一些内容，例如“如何设置颜色区间？”或“如何显示百分比？”。
Critical size changesIncludes critical production bundles, as well as any change greater than 2%:
Significant size changesIncludes any change greater than 0.2%: |
Checklist
npm testpassesDescription of change