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
      // 自定义 shape, 支持图片形式的气泡
13
      var Shape = G2.Shape;
14
      Shape.registShape('interval', 'borderRadius', {
15
        drawShape(cfg, container) {
16
          var points = cfg.points;
17
          var path = [];
18
          path.push(['M', points[0].x, points[0].y]);
19
          path.push(['L', points[1].x, points[1].y]);
20
          path.push(['L', points[2].x, points[2].y]);
21
          path.push(['L', points[3].x, points[3].y]);
22
          path.push('Z');
23
          path = this.parsePath(path); // 将 0 - 1 转化为画布坐标
24
          return container.addShape('rect', {
25
            attrs: {
26
              x: path[1][1], // 矩形起始点为左上角
27
              y: path[1][2],
28
              width: path[2][1] - path[1][1],
29
              height: path[0][2] - path[1][2],
30
              fill: cfg.color,
31
              radius: (path[2][1] - path[1][1]) / 2,
32
            },
33
          });
34
        },
35
      });
36
      var activeData = [
37
        { date: '2017年3月2日', actual: 175, expected: 900 },
38
        { date: '2017年3月3日', actual: 137, expected: 900 },
39
        { date: '2017年3月4日', actual: 240, expected: 900 },
40
        { date: '2017年3月5日', actual: 726, expected: 900 },
41
        { date: '2017年3月6日', actual: 968, expected: 900 },
42
        { date: '2017年3月7日', actual: 702, expected: 900 },
43
        { date: '2017年3月8日', actual: 655, expected: 900 },
44
        { date: '2017年3月9日', actual: 463, expected: 900 },
45
        { date: '2017年3月10日', actual: 464, expected: 900 },
46
        { date: '2017年3月12日', actual: 0, expected: 900 },
47
        { date: '2017年3月13日', actual: 638, expected: 900 },
48
        { date: '2017年3月14日', actual: 0, expected: 900 },
49
        { date: '2017年3月15日', actual: 0, expected: 900 },
50
        { date: '2017年3月16日', actual: 509, expected: 900 },
51
        { date: '2017年3月17日', actual: 269, expected: 900 },
52
        { date: '2017年3月18日', actual: 321, expected: 900 },
53
        { date: '2017年3月19日', actual: 0, expected: 900 },
54
        { date: '2017年3月20日', actual: 399, expected: 900 },
55
        { date: '2017年3月21日', actual: 662, expected: 900 },
56
        { date: '2017年3月22日', actual: 689, expected: 900 },
57
        { date: '2017年3月23日', actual: 347, expected: 900 },
58
        { date: '2017年3月24日', actual: 0, expected: 900 },
59
        { date: '2017年3月26日', actual: 428, expected: 900 },
60
        { date: '2017年3月27日', actual: 749, expected: 900 },
61
        { date: '2017年3月28日', actual: 0, expected: 900 },
62
        { date: '2017年3月29日', actual: 0, expected: 900 },
63
        { date: '2017年3月30日', actual: 69.1, expected: 900 },
64
      ];
65
      var chart = new G2.Chart({
66
        id: 'c1',
67
        forceFit: true,
68
        height: 250,
69
        plotCfg: {
70
          margin: [50, 80],
71
          border: {
72
            fill: '#2c2c2c',
73
            radius: 20
74
          }
75
        }
76
      });
77
      chart.source(activeData, {
78
        expected: {
79
          ticks: [0, 900, 1200]
80
        }
81
      });
82
      chart.axis('date', false);
83
      chart.axis('actual', false);
84
      chart.axis('expected', {
85
        line: null,
86
        title: null,
87
        tickLine: null,
88
        labels: {
89
          label: {
90
            stroke: '#ccc'
91
          }
92
        },
93
        grid: {
94
          line: {
95
            stroke:'#ccc',
96
            lineDash: [6, 4]
97
          }
98
        },
99
        position: 'right',
100
        formatter: function(val) {
101
          if (val === '1200') {
102
            return '';
103
          }
104
          return val;
105
        }
106
      });
107
      chart.legend(false);
108
      chart.interval().position('date*expected').color('#752136').shape('borderRadius').opacity(0.6);
109
      chart.interval().position('date*actual').color('#db0d2d').shape('date*actual', function(date, val) {
110
        if (val === 0) {
111
          return;
112
        } else {
113
          return 'borderRadius';
114
        }
115
      });
116
      chart.guide().text([0, 950], '活动', {
117
        fill: '#ff2c55',
118
        fontSize: 20,
119
        fontWeight: 'bold'
120
      });
121
      chart.guide().text([activeData.length - 8, 950], '67 / 900 千卡', {
122
        fill: '#fff',
123
        fontSize: 20
124
      });
125
      chart.render();
126
    </script>
127
  </body>
128
</html>
129
​

圆角柱状图