作個獎牌榜！

 話很少說，直接上圖（金牌數量TOP4國家）

在線查看：bw5dc.csb.app/

前言

今天，在2021年舉辦的2020年東京奧運會落下了帷幕，中國表明團最終以38金32銀18銅位列獎牌榜次席，這也追平了中國參加境外奧運會的最好成績。雖然人們都但願中國金牌總數超越美國再次成爲第一，但相信看過比賽的中國人內心也都明白「中國隊已經取得了很是棒的成績，田徑上取得了很大進步，女子標槍和女子鉛球都是第一次奪冠，其餘項目也有不少有突破這一份答卷相信每一位中國人都可以接受。

另外前幾日中國在金牌榜位居第一時，一張來自yahoo體育的獎牌榜真是讓我大爲震驚

25>30🧐?

我願稱之爲：數據可視化的經典應用

因此爲了慶祝🎉中國運動員們的優秀表現，我將基於G2，製做一個金牌🏅️TOP4國家的水平堆疊條形圖。

源碼講解

codesandbox源碼地址：codesandbox.io/s/zuo-ge-ji…

首先這個圖中的難點主要是在於實現條形圖2段的圓角效果，這個咱們能夠經過註冊自定義形狀來實現。

好比實現右邊的銅牌🥉區域帶圓角

// 右邊帶圓角
registerShape("interval", "right", {
  draw(cfg, container) {
    const attrs = getFillAttrs(cfg);
    let path = getRectPath(cfg.points);
    path = this.parsePath(path);
    const radius = (path[1][2] - path[2][2]) / 2;
    const temp = [];
    temp.push(["M", path[0][1], path[0][2]]);
    temp.push(["L", path[1][1] - radius, path[1][2]]);
    temp.push(["A", radius, radius, 90, 0, 0, path[1][1], path[1][2] - radius]);
    temp.push(["A", radius, radius, 90, 0, 0, path[2][1] - radius, path[3][2]]);
    temp.push(["L", path[3][1], path[3][2]]);
    temp.push(["Z"]);

    const group = container.addGroup();
    group.addShape("path", {
      attrs: {
        ...attrs,
        path: temp
      }
    });
    return group;
  }
});
複製代碼

一樣，實現左邊金牌🏅️區域帶圓角

// 左邊帶圓角
registerShape("interval", "left", {
  draw(cfg, container) {
    const attrs = getFillAttrs(cfg);
    let path = getRectPath(cfg.points);
    path = this.parsePath(path); // 將 0 - 1 的值轉換爲畫布座標
    const radius = (path[1][2] - path[2][2]) / 2;
    const temp = [];
    temp.push(["M", path[0][1] + radius, path[0][2]]);
    temp.push(["A", radius, radius, 90, 0, 1, path[0][1], path[0][2] - radius]);
    temp.push(["A", radius, radius, 90, 0, 1, path[3][1] + radius, path[3][2]]);
    temp.push(["L", path[2][1], path[2][2]]);
    temp.push(["L", path[1][1], path[1][2]]);
    temp.push(["Z"]);
    const group = container.addGroup();
    group.addShape("path", {
      attrs: {
        ...attrs,
        path: temp
      }
    });

    return group;
  }
});
複製代碼

最後再加上億點點細節（其餘用法都出自文檔，看不明白的同窗能夠查閱G2官網）✌️就實現啦。

但願3年後的巴黎奧運會中國健兒能衝上金牌第一！最後一句話送給全部朋友們

全力拼搏過的人，永遠均可以昂着頭走下賽場！