G2 - 圆角玉珏图

   <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>圆角玉珏图</title>
<script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
<script src="https://gw.alipayobjects.com/as/g/datavis/g2/2.3.13/index.js"></script>
      </head>
      <body>
          <div id="c1"></div>
 <script>
function getRectPath(points) {
  var path = [];
  for (var i = 0; i < points.length; i++) {
    var point = points[i];
    if (point) {
      var action = i === 0 ? 'M' : 'L';
      path.push([action, point.x, point.y]);
    }
  }
  var first = points[0];
  path.push(['L', first.x, first.y]);
  path.push(['z']);
  return path;
}

G2.Shape.registShape('interval', 'roundedRect', {
  drawShape(cfg, container) {
    var points = cfg.points;
    var path = getRectPath(cfg.points);
    var r = (path[2][1] - path[1][1]) / 2;
    path = this.parsePath(path); // 将 0 - 1 的值转换为画布坐标
    var temp = [];
    temp.push(path[0]);
    temp.push(path[1]);
    temp.push(['A', r, r, 1, 0, 0, path[2][1], path[2][2]]);
    temp.push(path[3]);
    temp.push(['A', r, r, 1, 0, 0, path[4][1], path[4][2]]);
    return container.addShape('path', {
      attrs: {
        path: temp,
        fill: cfg.color,
        fillOpacity: cfg.opacity,
      },
    });
  },
});

var data = [
  { cate: '活动', value: 100 },
  { cate: '锻炼', value: 100 },
  { cate: '站立', value: 100 },
];

var userData = [
  { type: '活动', value: 60 },
  { type: '锻炼', value: 100 },
  { type: '站立', value: 150 },
];

var chart = new G2.Chart({
  id: 'c1',
  width: 400,
  height: 400,
  plotCfg: {
    margin: 50,
  },
});

chart.coord('polar', {
  inner: 0.25,
}).transpose();
chart.legend('cate', false);
chart.legend('type', {
  position: 'bottom'
});

var view = chart.createView();
view.source(data);
view.tooltip(false);
view.interval().position('cate*value').color('cate', ['#003732', '#183800', '#37000a']).opacity(0.8).size(33);

var userView = chart.createView();
userView.source(userData, {
  value: {
    max: 200,
  },
});
userView.interval().position('type*value').color('type', ['#00fff1', '#c1ff00', '#ff0078']).opacity(0.7).size(33).shape('roundedRect');
chart.render();
</script>

      </body>
    </html>
          
圆角玉珏图