作个奖牌榜！

 话很少说，直接上图（金牌数量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年后的巴黎奥运会中国健儿能冲上金牌第一！最后一句话送给全部朋友们

全力拼搏过的人，永远均可以昂着头走下赛场！