style: 美化气泡图表现 (#89)

* style: 美化气泡图表现

* fix: 优化写法

Author: interstellarmt

skills/antv-g2-chart/references/concepts/g2-concept-chart-selection.md

@@ -133,6 +133,9 @@ chart.options({
 
 ```javascript
 // 气泡图
+// 颜色映射表：scale.color.range 和 fill 回调共用
+const COLOR_MAP = { 'Asia': '#fb7678', 'Europe': '#81e7ee', 'Americas': '#5B8FF9' };
+
 chart.options({
   type: 'point',
   data,
@@ -141,8 +144,26 @@ chart.options({
     y: 'happiness',
     size: 'population',  // 第三数值维度
     color: 'region',
+    shape: 'point',
+  },
+  scale: {
+    size: { type: 'sqrt', range: [4, 40] },    // sqrt 比例尺 + 合适的气泡范围
+    color: { range: Object.values(COLOR_MAP) },
+  },
+  style: {
+    fillOpacity: 0.85,
+    lineWidth: 0,
+    // 径向渐变：从白色中心到映射色边缘，模拟 3D 球体质感
+    // 通过 COLOR_MAP[datum.region] 获取颜色，与 scale.color.range 保持一致
+    fill: (datum) => {
+      const color = COLOR_MAP[datum.region];
+      return `radial-gradient(circle at 35% 35%, rgb(255,255,255) 0%, ${color} 100%)`;
+    },
+    shadowBlur: 10,
+    shadowColor: 'rgba(0, 0, 0, 0.15)',
+    shadowOffsetY: 5,
   },
-  scale: { size: { range: [4, 30] } },
+  legend: { size: false },
 });
 ```
 

skills/antv-g2-chart/references/concepts/g2-concept-visual-channels.md

@@ -88,6 +88,9 @@ chart.options({
 
 ```javascript
 // x位置 + y位置 + 大小（size） = 三维数值编码
+// 颜色映射表：scale.color.range 和 fill 回调共用
+const COLOR_MAP = { 'Asia': '#fb7678', 'Europe': '#81e7ee', 'Americas': '#5B8FF9' };
+
 chart.options({
   type: 'point',
   data,
@@ -96,10 +99,26 @@ chart.options({
     y: 'LifeExpectancy',// 定量 → 位置
     size: 'Population', // 定量 → 大小（第三维度）
     color: 'Region',    // 分类 → 颜色色相（第四维度）
+    shape: 'point',
   },
   scale: {
-    size: { range: [4, 40] },   // 气泡大小范围
+    size: { type: 'sqrt', range: [4, 40] },   // sqrt 比例尺，确保面积与数值成正比
+    color: { range: Object.values(COLOR_MAP) },
   },
+  style: {
+    fillOpacity: 0.85,
+    lineWidth: 0,
+    // 径向渐变：从白色中心到映射色边缘，模拟 3D 球体质感
+    // 通过 COLOR_MAP[datum.Region] 获取颜色，与 scale.color.range 保持一致
+    fill: (datum) => {
+      const color = COLOR_MAP[datum.Region];
+      return `radial-gradient(circle at 35% 35%, rgb(255,255,255) 0%, ${color} 100%)`;
+    },
+    shadowBlur: 10,
+    shadowColor: 'rgba(0, 0, 0, 0.15)',
+    shadowOffsetY: 5,
+  },  // 不要用 stroke:'#fff'
+  legend: { size: false },
 });
 ```
 

skills/antv-g2-chart/references/core/g2-core-encode-channel.md

@@ -104,6 +104,9 @@ chart.options({
 ### 双数值轴 + 气泡图（多通道映射）
 
 ```javascript
+// 颜色映射表：scale.color.range 和 fill 回调共用
+const COLOR_MAP = { 'China': '#5B8FF9', 'USA': '#fb7678', 'Japan': '#81e7ee' };
+
 chart.options({
   type: 'point',
   data: [
@@ -119,8 +122,23 @@ chart.options({
     shape: 'point',
   },
   scale: {
-    size: { range: [10, 60] },
+    size: { type: 'sqrt', range: [4, 40] },    // sqrt 比例尺 + 合适的气泡范围
+    color: { range: Object.values(COLOR_MAP) },
+  },
+  style: {
+    fillOpacity: 0.85,            // 不要用 stroke: '#fff'，浅色主题下像错误图表
+    lineWidth: 0,
+    // 径向渐变：从白色中心到映射色边缘，模拟 3D 球体质感
+    // 通过 COLOR_MAP[datum.country] 获取颜色，与 scale.color.range 保持一致
+    fill: (datum) => {
+      const color = COLOR_MAP[datum.country];
+      return `radial-gradient(circle at 35% 35%, rgb(255,255,255) 0%, ${color} 100%)`;
+    },
+    shadowBlur: 10,
+    shadowColor: 'rgba(0, 0, 0, 0.15)',
+    shadowOffsetY: 5,
   },
+  legend: { size: false },        // size 图例意义不大，建议隐藏
 });
 ```