# 氣泡圖

<p class="callout info">圖片僅供參考，此點圖會浮動</p>

### 預覽圖

---

#### [![氣泡圖.png](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/gpgc3kbeGTaRRHRY-%E6%B0%A3%E6%B3%A1%E5%9C%96.png)](https://book.gosu.bar/uploads/images/gallery/2019-12/gpgc3kbeGTaRRHRY-%E6%B0%A3%E6%B3%A1%E5%9C%96.png)

### 設定值

---

- #### 資料源 - [AntV](https://g2.antv.vision/zh/examples/point/scatter#bubble)

```
https://g2.antv.vision/zh/examples/data/bubble.json
（ 資料來源：AntV ）
格式：
[
{continent: "Americas",Country: "Argentina",LifeExpectancy: 75.32,GDP: 12779.37964,Population: 40301927,},
{continent: "Americas",Country: "Brazil",LifeExpectancy: 72.39,GDP: 9065.800825,Population: 190010647,},
......
]
```

- #### 內距

```
40, 40, 60, 60
```

- #### 比例尺 Scale

##### <span data-slate-fragment="JTdCJTIyb2JqZWN0JTIyJTNBJTIyZG9jdW1lbnQlMjIlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTJDJTIybm9kZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJibG9jayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJoZWFkaW5nLTMlMjIlMkMlMjJpc1ZvaWQlMjIlM0FmYWxzZSUyQyUyMmRhdGElMjIlM0ElN0IlN0QlMkMlMjJub2RlcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMnRleHQlMjIlMkMlMjJsZWF2ZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMkdEUCUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTVEJTdEJTVEJTdEJTVEJTdEJTVEJTdE">GDP</span>（X軸）

<table border="1" id="bkmrk-%E5%88%97%E8%A1%A8-%E8%A8%AD%E5%AE%9A%E5%80%BC-%E6%AC%84%E4%BD%8D-class-%E9%A1%9E%E5%9E%8B-c" style="border-collapse: collapse; width: 100%; height: 155px;"><tbody><tr style="height: 29px;"><td class="align-center" style="width: 50%; height: 29px;">列表</td><td class="align-center" style="width: 50%; height: 29px;">設定值</td></tr><tr style="height: 29px;"><td style="width: 50%; height: 29px;">欄位</td><td style="width: 50%; height: 29px;"><span data-slate-fragment="JTdCJTIyb2JqZWN0JTIyJTNBJTIyZG9jdW1lbnQlMjIlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTJDJTIybm9kZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJibG9jayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJwYXJhZ3JhcGglMjIlMkMlMjJpc1ZvaWQlMjIlM0FmYWxzZSUyQyUyMmRhdGElMjIlM0ElN0IlN0QlMkMlMjJub2RlcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMnRleHQlMjIlMkMlMjJsZWF2ZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMkdEUCUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTVEJTdEJTVEJTdEJTVEJTdEJTVEJTdE">GDP</span></td></tr><tr style="height: 10px;"><td style="width: 50%; height: 10px;">類型</td><td style="width: 50%; height: 10px;"><span class="text-4505230f--TextH400-3033861f--textContentFamily-49a318e1"><span data-key="91567d3d8a0e4e0abb7876880816c621">linear</span></span>

</td></tr><tr style="height: 29px;"><td style="width: 50%; height: 29px;">優化數據範圍</td><td style="width: 50%; height: 29px;">開啟</td></tr><tr style="height: 29px;"><td style="width: 50%; height: 29px;"><span data-slate-fragment="JTdCJTIyb2JqZWN0JTIyJTNBJTIyZG9jdW1lbnQlMjIlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTJDJTIybm9kZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJibG9jayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJwYXJhZ3JhcGglMjIlMkMlMjJpc1ZvaWQlMjIlM0FmYWxzZSUyQyUyMmRhdGElMjIlM0ElN0IlN0QlMkMlMjJub2RlcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMnRleHQlMjIlMkMlMjJsZWF2ZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMiVFNiU5QyU4MCVFNSVCMCU4RiVFNSU4MCVCQyUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTVEJTdEJTVEJTdEJTVEJTdEJTVEJTdE">最小值</span></td><td style="width: 50%; height: 29px;">0</td></tr><tr style="height: 29px;"><td style="width: 50%; height: 29px;"><span data-slate-fragment="JTdCJTIyb2JqZWN0JTIyJTNBJTIyZG9jdW1lbnQlMjIlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTJDJTIybm9kZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJibG9jayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJwYXJhZ3JhcGglMjIlMkMlMjJpc1ZvaWQlMjIlM0FmYWxzZSUyQyUyMmRhdGElMjIlM0ElN0IlN0QlMkMlMjJub2RlcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMnRleHQlMjIlMkMlMjJsZWF2ZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMiVFNiVBMCVCQyVFNSVCQyU4RiVFNSU4QyU5NiVFNSU4NyVCRCVFNiU5NSVCOCUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTVEJTdEJTVEJTdEJTVEJTdEJTVEJTdE">格式化函數</span></td><td style="width: 50%; height: 29px;">```
function formatter(value) {<br></br>return (value / 1000).toFixed(0) + 'k';<br></br>}
```

</td></tr></tbody></table>

- #### 圖 Geom

##### 點圖（point）

<table border="1" id="bkmrk-%E5%88%97%E8%A1%A8-%E8%A8%AD%E5%AE%9A%E5%80%BC-%E6%AC%84%E4%BD%8D-height%2Awei" style="border-collapse: collapse; width: 100%; height: 173px;"><tbody><tr style="height: 29px;"><td class="align-center" style="width: 50%; height: 29px;">列表</td><td class="align-center" style="width: 50%; height: 29px;">設定值</td></tr><tr style="height: 29px;"><td style="width: 50%; height: 30px;">欄位</td><td style="width: 50%; height: 30px;"><span data-slate-fragment="JTdCJTIyb2JqZWN0JTIyJTNBJTIyZG9jdW1lbnQlMjIlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTJDJTIybm9kZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJibG9jayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJwYXJhZ3JhcGglMjIlMkMlMjJpc1ZvaWQlMjIlM0FmYWxzZSUyQyUyMmRhdGElMjIlM0ElN0IlN0QlMkMlMjJub2RlcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMnRleHQlMjIlMkMlMjJsZWF2ZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMkdEUCpMaWZlRXhwZWN0YW5jeSUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTVEJTdEJTVEJTdEJTVEJTdEJTVEJTdE">GDP\*LifeExpectancy</span>

</td></tr><tr style="height: 29px;"><td style="width: 50%; height: 29px;">類型</td><td style="width: 50%; height: 29px;"><span data-slate-fragment="JTdCJTIyb2JqZWN0JTIyJTNBJTIyZG9jdW1lbnQlMjIlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTJDJTIybm9kZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJibG9jayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJwYXJhZ3JhcGglMjIlMkMlMjJpc1ZvaWQlMjIlM0FmYWxzZSUyQyUyMmRhdGElMjIlM0ElN0IlN0QlMkMlMjJub2RlcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMnRleHQlMjIlMkMlMjJsZWF2ZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMiVFOSVCQiU5RSVFNSU5QyU5NiUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTVEJTdEJTVEJTdEJTVEJTdEJTVEJTdE">點圖</span></td></tr><tr style="height: 29px;"><td style="width: 50%; height: 29px;"><span data-slate-fragment="JTdCJTIyb2JqZWN0JTIyJTNBJTIyZG9jdW1lbnQlMjIlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTJDJTIybm9kZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJibG9jayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJwYXJhZ3JhcGglMjIlMkMlMjJpc1ZvaWQlMjIlM0FmYWxzZSUyQyUyMmRhdGElMjIlM0ElN0IlN0QlMkMlMjJub2RlcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMnRleHQlMjIlMkMlMjJsZWF2ZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMiVFOSVBMSU4RiVFOCU4OSVCMiVFNiVBQyU4NCVFNCVCRCU4RCUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTVEJTdEJTVEJTdEJTVEJTdEJTVEJTdE">顏色欄位</span></td><td style="width: 50%; height: 29px;"><span data-slate-fragment="JTdCJTIyb2JqZWN0JTIyJTNBJTIyZG9jdW1lbnQlMjIlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTJDJTIybm9kZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJibG9jayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJwYXJhZ3JhcGglMjIlMkMlMjJpc1ZvaWQlMjIlM0FmYWxzZSUyQyUyMmRhdGElMjIlM0ElN0IlN0QlMkMlMjJub2RlcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMnRleHQlMjIlMkMlMjJsZWF2ZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMmNvbnRpbmVudCUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTVEJTdEJTVEJTdEJTVEJTdEJTVEJTdE">continent</span></td></tr><tr style="height: 28px;"><td style="width: 50%; height: 28px;">形狀</td><td style="width: 50%; height: 28px;"><span data-slate-fragment="JTdCJTIyb2JqZWN0JTIyJTNBJTIyZG9jdW1lbnQlMjIlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTJDJTIybm9kZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJibG9jayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJwYXJhZ3JhcGglMjIlMkMlMjJpc1ZvaWQlMjIlM0FmYWxzZSUyQyUyMmRhdGElMjIlM0ElN0IlN0QlMkMlMjJub2RlcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMnRleHQlMjIlMkMlMjJsZWF2ZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMmNpcmNsZSUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTVEJTdEJTVEJTdEJTVEJTdEJTVEJTdE">circle</span></td></tr><tr><td style="width: 50%;">大小欄位</td><td style="width: 50%;"><span class="text-4505230f--TextH400-3033861f--textContentFamily-49a318e1"><span data-key="c5b9bf4e7c6349b8bcfdda648398617f">Population</span></span>

</td></tr><tr style="height: 29px;"><td style="width: 50%; height: 28px;"><span data-slate-fragment="JTdCJTIyb2JqZWN0JTIyJTNBJTIyZG9jdW1lbnQlMjIlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTJDJTIybm9kZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJibG9jayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJwYXJhZ3JhcGglMjIlMkMlMjJpc1ZvaWQlMjIlM0FmYWxzZSUyQyUyMmRhdGElMjIlM0ElN0IlN0QlMkMlMjJub2RlcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMnRleHQlMjIlMkMlMjJsZWF2ZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMiVFNSVBNCVBNyVFNSVCMCU4RiUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTVEJTdEJTVEJTdEJTVEJTdEJTVEJTdE">大小參數</span></td><td style="width: 50%; height: 28px;"><span data-slate-fragment="JTdCJTIyb2JqZWN0JTIyJTNBJTIyZG9jdW1lbnQlMjIlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTJDJTIybm9kZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJibG9jayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJwYXJhZ3JhcGglMjIlMkMlMjJpc1ZvaWQlMjIlM0FmYWxzZSUyQyUyMmRhdGElMjIlM0ElN0IlN0QlMkMlMjJub2RlcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMnRleHQlMjIlMkMlMjJsZWF2ZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMmNpcmNsZSUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTVEJTdEJTVEJTdEJTVEJTdEJTVEJTdE">4,65</span></td></tr><tr><td style="width: 50%;">調整欄位</td><td style="width: 50%;">擾動 | Jitter</td></tr></tbody></table>

- #### 圖示 Legend

<table border="1" id="bkmrk-%E5%88%97%E8%A1%A8-%E8%A8%AD%E5%AE%9A%E5%80%BC-%E5%95%9F%E7%94%A8-%E9%96%8B%E5%95%9F-%E6%AC%84%E4%BD%8D-clas" style="border-collapse: collapse; width: 100%; height: 187px;"><tbody><tr style="height: 29px;"><td class="align-center" style="width: 50%; height: 29px;">列表</td><td class="align-center" style="width: 50%; height: 29px;">設定值</td></tr><tr style="height: 29px;"><td style="width: 50%; height: 29px;">啟用</td><td style="width: 50%; height: 29px;">開啟</td></tr><tr style="height: 29px;"><td style="width: 50%; height: 29px;">欄位</td><td style="width: 50%; height: 29px;"><span data-slate-fragment="JTdCJTIyb2JqZWN0JTIyJTNBJTIyZG9jdW1lbnQlMjIlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTJDJTIybm9kZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJibG9jayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJwYXJhZ3JhcGglMjIlMkMlMjJpc1ZvaWQlMjIlM0FmYWxzZSUyQyUyMmRhdGElMjIlM0ElN0IlN0QlMkMlMjJub2RlcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMnRleHQlMjIlMkMlMjJsZWF2ZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMlBvcHVsYXRpb24lMjIlMkMlMjJtYXJrcyUyMiUzQSU1QiU1RCU3RCU1RCU3RCU1RCU3RCU1RCU3RA==">Population</span></td></tr><tr style="height: 29px;"><td style="width: 50%; height: 29px;">位置</td><td style="width: 50%; height: 29px;">下</td></tr><tr style="height: 29px;"><td style="width: 50%; height: 29px;">排版</td><td style="width: 50%; height: 29px;">水平</td></tr><tr style="height: 26px;"><td style="width: 50%; height: 26px;">水平偏移量</td><td style="width: 50%; height: 26px;">140

</td></tr><tr style="height: 16px;"><td style="width: 50%; height: 16px;">水平間距</td><td style="width: 50%; height: 16px;">80

</td></tr></tbody></table>