G2 图表示例
源码
g2-react
​x
 
1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="utf-8">
5
    <title>圆角玉珏图</title>
6
    <script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
7
    <script src="https://gw.alipayobjects.com/as/g/datavis/g2/2.3.13/index.js"></script>
8
  </head>
9
  <body>
10
    <div id="c1"></div>
11
    <script>
12
      function getRectPath(points) {
13
        var path = [];
14
        for (var i = 0; i < points.length; i++) {
15
          var point = points[i];
16
          if (point) {
17
            var action = i === 0 ? 'M' : 'L';
18
            path.push([action, point.x, point.y]);
19
          }
20
        }
21
        var first = points[0];
22
        path.push(['L', first.x, first.y]);
23
        path.push(['z']);
24
        return path;
25
      }
26
      G2.Shape.registShape('interval', 'roundedRect', {
27
        drawShape(cfg, container) {
28
          var points = cfg.points;
29
          var path = getRectPath(cfg.points);
30
          var r = (path[2][1] - path[1][1]) / 2;
31
          path = this.parsePath(path); // 将 0 - 1 的值转换为画布坐标
32
          var temp = [];
33
          temp.push(path[0]);
34
          temp.push(path[1]);
35
          temp.push(['A', r, r, 1, 0, 0, path[2][1], path[2][2]]);
36
          temp.push(path[3]);
37
          temp.push(['A', r, r, 1, 0, 0, path[4][1], path[4][2]]);
38
          return container.addShape('path', {
39
            attrs: {
40
              path: temp,
41
              fill: cfg.color,
42
              fillOpacity: cfg.opacity,
43
            },
44
          });
45
        },
46
      });
47
      var data = [
48
        { cate: '活动', value: 100 },
49
        { cate: '锻炼', value: 100 },
50
        { cate: '站立', value: 100 },
51
      ];
52
      var userData = [
53
        { type: '活动', value: 60 },
54
        { type: '锻炼', value: 100 },
55
        { type: '站立', value: 150 },
56
      ];
57
      var chart = new G2.Chart({
58
        id: 'c1',
59
        width: 400,
60
        height: 400,
61
        plotCfg: {
62
          margin: 50,
63
        },
64
      });
65
      chart.coord('polar', {
66
        inner: 0.25,
67
      }).transpose();
68
      chart.legend('cate', false);
69
      chart.legend('type', {
70
        position: 'bottom'
71
      });
72
      var view = chart.createView();
73
      view.source(data);
74
      view.tooltip(false);
75
      view.interval().position('cate*value').color('cate', ['#003732', '#183800', '#37000a']).opacity(0.8).size(33);
76
      var userView = chart.createView();
77
      userView.source(userData, {
78
        value: {
79
          max: 200,
80
        },
81
      });
82
      userView.interval().position('type*value').color('type', ['#00fff1', '#c1ff00', '#ff0078']).opacity(0.7).size(33).shape('roundedRect');
83
      chart.render();
84
    </script>
85
  </body>
86
</html>
87
​

圆角玉珏图