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
      var Frame = G2.Frame;
13
      $.getJSON('../../../static/data/page-views.json',function (data) {
14
        var chart = new G2.Chart({
15
          id: 'c1',
16
          forceFit: true,
17
          height: 450,
18
          plotCfg: {
19
            margin: [60, 100]
20
          }
21
        });
22
        chart.source(data, {
23
          views: {
24
            max: 25,
25
            min: 0,
26
            nice: false
27
          },
28
          hour: {
29
            ticks: ['0', '3', '6', '9', '12', '15', '18', '21']
30
          }
31
        });
32
        chart.coord('polar', {
33
          inner: 0.35
34
        });
35
        chart.axis('hour', {
36
          grid: null,
37
          formatter: function(val) {
38
            if (val * 1 >= 12) {
39
              return val + ' pm';
40
            } else {
41
              return val + ' am';
42
            }
43
          }
44
        });
45
        chart.axis('views', {
46
          tickLine: null,
47
          line: null,
48
          grid: {
49
            line: {
50
              lineDash: [0, 0]
51
            }
52
          }
53
        });
54
        chart.legend(false);
55
        chart.area().position('hour*views').color('page', ['#cd57a4', '#b236a3', '#fa6f7f', '#fa7c3b', '#e96b6b']).shape('smooth').opacity(0.15);
56
        chart.render();
57
      });
58
    </script>
59
  </body>
60
</html>
61
​

日冕图

极坐标下的区域图，展示一天内各个时间段内的数据变化，主要用于时变数据的可视化。