style: 美化气泡图表现 by interstellarmt · Pull Request #89 · antvis/chart-visualization-skills

interstellarmt · 2026-06-25T12:09:43Z

gemini-code-assist

Code Review

This pull request updates the AntV G2 bubble chart documentation and examples across several files to promote best practices, such as using sqrt scales for bubble sizes, applying radial gradients and shadows for a 3D effect, and avoiding white strokes. The review feedback correctly identifies a bug where datum.color is accessed directly in style callbacks instead of retrieving the mapped color from column.color[index], which causes the color channel mapping to fail. Additionally, there is a recommendation to remove an unused helper function darken in the bubble chart example.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

gemini-code-assist · 2026-06-25T12:11:24Z

+  style: {
+    fillOpacity: 0.85,
+    lineWidth: 0,
+    fill: (datum) => `radial-gradient(circle at 35% 35%, rgb(255,255,255) 0%, ${datum.color || '#5B8FF9'} 80%, #2D5BFF 100%)`,


在 G2 v5 中，style 的回调函数接收的 datum 是原始数据对象。由于数据源中并没有 color 字段（分类字段是 region），因此 datum.color 将始终为 undefined，导致所有气泡都退化为使用默认的蓝色渐变，从而使 color: 'region' 的颜色通道映射失效。

为了正确获取经过 Scale 映射后的颜色，应该使用回调函数的第四个参数 column，通过 column.color[index] 来获取当前数据点对应的映射颜色。

Suggested change

fill: (datum) => `radial-gradient(circle at 35% 35%, rgb(255,255,255) 0%, ${datum.color || '#5B8FF9'} 80%, #2D5BFF 100%)`,

fill: (datum, index, data, column) => 'radial-gradient(circle at 35% 35%, rgb(255,255,255) 0%, ' + (column.color[index] || '#5B8FF9') + ' 80%, #2D5BFF 100%)',

gemini-code-assist · 2026-06-25T12:11:24Z

+  style: {
+    fillOpacity: 0.85,
+    lineWidth: 0,
+    fill: (datum) => `radial-gradient(circle at 35% 35%, rgb(255,255,255) 0%, ${datum.color || '#5B8FF9'} 80%, #2D5BFF 100%)`,


在 G2 v5 中，style 的回调函数接收的 datum 是原始数据对象。由于数据源中并没有 color 字段（分类字段是 Region），因此 datum.color 将始终为 undefined，导致所有气泡都退化为使用默认的蓝色渐变，从而使 color: 'Region' 的颜色通道映射失效。

为了正确获取经过 Scale 映射后的颜色，应该使用回调函数的第四个参数 column，通过 column.color[index] 来获取当前数据点对应的映射颜色。

Suggested change

fill: (datum) => `radial-gradient(circle at 35% 35%, rgb(255,255,255) 0%, ${datum.color || '#5B8FF9'} 80%, #2D5BFF 100%)`,

fill: (datum, index, data, column) => 'radial-gradient(circle at 35% 35%, rgb(255,255,255) 0%, ' + (column.color[index] || '#5B8FF9') + ' 80%, #2D5BFF 100%)',

gemini-code-assist · 2026-06-25T12:11:24Z

+    fill: (datum) => {
+      // 径向渐变：模拟 3D 球体质感
+      return `radial-gradient(circle at 35% 35%, rgb(255,255,255) 0%, ${datum.color || '#5B8FF9'} 80%, #2D5BFF 100%)`;
+    },


在 G2 v5 中，style 的回调函数接收的 datum 是原始数据对象。由于数据源中并没有 color 字段（分类字段是 country），因此 datum.color 将始终为 undefined，导致所有气泡都退化为使用默认的蓝色渐变，从而使 color: 'country' 的颜色通道映射失效。

为了正确获取经过 Scale 映射后的颜色，应该使用回调函数的第四个参数 column，通过 column.color[index] 来获取当前数据点对应的映射颜色。

Suggested change

fill: (datum) => {

// 径向渐变：模拟 3D 球体质感

return `radial-gradient(circle at 35% 35%, rgb(255,255,255) 0%, ${datum.color || '#5B8FF9'} 80%, #2D5BFF 100%)`;

},

fill: (datum, index, data, column) => {

// 径向渐变：模拟 3D 球体质感

return 'radial-gradient(circle at 35% 35%, rgb(255,255,255) 0%, ' + (column.color[index] || '#5B8FF9') + ' 80%, #2D5BFF 100%)';

},

gemini-code-assist · 2026-06-25T12:11:24Z

+// 辅助函数：加深颜色，用于渐变终点
+function darken(hex, amount = 60) {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgb(${Math.max(0, r - amount)}, ${Math.max(0, g - amount)}, ${Math.max(0, b - amount)})`;
+}


在当前示例代码中，定义了辅助函数 darken，但在下方的图表配置中并没有被实际调用（渐变终点使用的是硬编码的 color1990Dark 和 color2015Dark）。为了保持文档代码的简洁性，建议将此未使用的辅助函数删除。

Copilot

Pull request overview

该 PR 主要面向 G2 气泡图/散点图的“视觉样式最佳实践”，在多个参考文档中补充了更现代的气泡样式方案（sqrt 比例尺、径向渐变、阴影、虚线网格、隐藏 size 图例等），并用更完整的数据示例替换了原先较简化的示例，以提升可读性与最终呈现效果。

Changes:

在散点图与气泡图参考文档中补充“气泡图样式要点”，并更新示例为双年份对比（1990 vs 2015）的更完整数据。
在气泡图文档中新增“最佳实践/避免项/常见错误”章节，强调 sqrt 比例尺、渐变与阴影等设计建议。
在 encode/channel 与概念类文档中补充气泡图相关的 sqrt + 样式示例片段。

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
skills/antv-g2-chart/references/marks/g2-mark-point-scatter.md	为“三维数据散点/气泡图”示例补充更完整数据与推荐样式（sqrt、渐变、阴影、网格、标签防重叠等）。
skills/antv-g2-chart/references/marks/g2-mark-point-bubble.md	扩展气泡图文档：新增样式要点、最佳实践/避免项/常见错误，并更新为双系列对比示例。
skills/antv-g2-chart/references/core/g2-core-encode-channel.md	在多通道映射示例中加入 sqrt 与气泡样式配置片段。
skills/antv-g2-chart/references/concepts/g2-concept-visual-channels.md	在“气泡图：通道组合示例”中加入 sqrt 与气泡样式配置片段。
skills/antv-g2-chart/references/concepts/g2-concept-chart-selection.md	在“相关性/气泡图”示例中加入 sqrt 与气泡样式配置片段。

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

+// 辅助函数：加深颜色，用于渐变终点
+function darken(hex, amount = 60) {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgb(${Math.max(0, r - amount)}, ${Math.max(0, g - amount)}, ${Math.max(0, b - amount)})`;
+}


@@ -5,6 +5,13 @@ description: |
  气泡图是散点图的扩展，用第三个通道 size（气泡大小）编码额外的数值维度。
  通过 encode.size 绑定数值字段，G2 自动将数值映射为圆的面积（而非半径）。


+    fill: (datum) => {
+      // 径向渐变：模拟 3D 球体质感
+      return `radial-gradient(circle at 35% 35%, rgb(255,255,255) 0%, ${datum.color || '#5B8FF9'} 80%, #2D5BFF 100%)`;
+    },


+  style: {
+    fillOpacity: 0.85,
+    lineWidth: 0,
+    fill: (datum) => `radial-gradient(circle at 35% 35%, rgb(255,255,255) 0%, ${datum.color || '#5B8FF9'} 80%, #2D5BFF 100%)`,


+  style: {
+    fillOpacity: 0.85,
+    lineWidth: 0,
+    fill: (datum) => `radial-gradient(circle at 35% 35%, rgb(255,255,255) 0%, ${datum.color || '#5B8FF9'} 80%, #2D5BFF 100%)`,


style: 美化气泡图表现

9dfc47a

Copilot AI review requested due to automatic review settings June 25, 2026 12:09

Copilot started reviewing on behalf of interstellarmt June 25, 2026 12:10 View session

gemini-code-assist Bot reviewed Jun 25, 2026

View reviewed changes

Copilot AI reviewed Jun 25, 2026

View reviewed changes

fix: 优化写法

8a3b8b3

lxfu1 approved these changes Jun 26, 2026

View reviewed changes

lxfu1 merged commit 62ea33c into master Jun 26, 2026
4 checks passed

lxfu1 deleted the style-bubble branch June 26, 2026 08:53

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

style: 美化气泡图表现#89

style: 美化气泡图表现#89
lxfu1 merged 2 commits into
masterfrom
style-bubble

interstellarmt commented Jun 25, 2026

Uh oh!

gemini-code-assist Bot left a comment

Uh oh!

gemini-code-assist Bot Jun 25, 2026

Uh oh!

gemini-code-assist Bot Jun 25, 2026

Uh oh!

gemini-code-assist Bot Jun 25, 2026

Uh oh!

gemini-code-assist Bot Jun 25, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	fill: (datum) => `radial-gradient(circle at 35% 35%, rgb(255,255,255) 0%, ${datum.color \|\| '#5B8FF9'} 80%, #2D5BFF 100%)`,
	fill: (datum, index, data, column) => 'radial-gradient(circle at 35% 35%, rgb(255,255,255) 0%, ' + (column.color[index] \|\| '#5B8FF9') + ' 80%, #2D5BFF 100%)',

		@@ -5,6 +5,13 @@ description: \|
		气泡图是散点图的扩展，用第三个通道 size（气泡大小）编码额外的数值维度。
		通过 encode.size 绑定数值字段，G2 自动将数值映射为圆的面积（而非半径）。

Uh oh!

Conversation

interstellarmt commented Jun 25, 2026

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist Bot Jun 25, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Jun 25, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Jun 25, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Jun 25, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants