G2 图表示例
源码
g2-react
​x
 
1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="utf-8">
5
    <title>Wind rose</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 data = [
13
        {direction: 'N', level: '< 0.5 m/s', value: 1.81},
14
        {direction: 'N', level: '0.5-2 m/s', value: 1.78},
15
        {direction: 'N', level: '2-4 m/s', value: 0.16},
16
        {direction: 'N', level: '4-6 m/s', value: 0.00},
17
        {direction: 'N', level: '6-8 m/s', value: 0.00},
18
        {direction: 'N', level: '8-10 m/s', value: 0.00},
19
        {direction: 'N', level: '> 10 m/s', value: 0.00},
20
        {direction: 'NNE', level: '< 0.5 m/s', value: 0.62},
21
        {direction: 'NNE', level: '0.5-2 m/s', value: 1.09},
22
        {direction: 'NNE', level: '2-4 m/s', value: 0.00},
23
        {direction: 'NNE', level: '4-6 m/s', value: 0.00},
24
        {direction: 'NNE', level: '6-8 m/s', value: 0.00},
25
        {direction: 'NNE', level: '8-10 m/s', value: 0.00},
26
        {direction: 'NNE', level: '> 10 m/s', value: 0.00},
27
        {direction: 'NE', level: '< 0.5 m/s', value: 0.82},
28
        {direction: 'NE', level: '0.5-2 m/s', value: 0.82},
29
        {direction: 'NE', level: '2-4 m/s', value: 0.07},
30
        {direction: 'NE', level: '4-6 m/s', value: 0.00},
31
        {direction: 'NE', level: '6-8 m/s', value: 0.00},
32
        {direction: 'NE', level: '8-10 m/s', value: 0.00},
33
        {direction: 'NE', level: '> 10 m/s', value: 0.00},
34
        {direction: 'ENE', level: '< 0.5 m/s', value: 0.59},
35
        {direction: 'ENE', level: '0.5-2 m/s', value: 1.22},
36
        {direction: 'ENE', level: '2-4 m/s', value: 0.07},
37
        {direction: 'ENE', level: '4-6 m/s', value: 0.00},
38
        {direction: 'ENE', level: '6-8 m/s', value: 0.00},
39
        {direction: 'ENE', level: '8-10 m/s', value: 0.00},
40
        {direction: 'ENE', level: '> 10 m/s', value: 0.00},
41
        {direction: 'E', level: '< 0.5 m/s', value: 0.62},
42
        {direction: 'E', level: '0.5-2 m/s', value: 2.20},
43
        {direction: 'E', level: '2-4 m/s', value: 0.49},
44
        {direction: 'E', level: '4-6 m/s', value: 0.00},
45
        {direction: 'E', level: '6-8 m/s', value: 0.00},
46
        {direction: 'E', level: '8-10 m/s', value: 0.00},
47
        {direction: 'E', level: '> 10 m/s', value: 0.00},
48
        {direction: 'ESE', level: '< 0.5 m/s', value: 1.22},
49
        {direction: 'ESE', level: '0.5-2 m/s', value: 2.01},
50
        {direction: 'ESE', level: '2-4 m/s', value: 1.55},
51
        {direction: 'ESE', level: '4-6 m/s', value: 0.30},
52
        {direction: 'ESE', level: '6-8 m/s', value: 0.13},
53
        {direction: 'ESE', level: '8-10 m/s', value: 0.00},
54
        {direction: 'ESE', level: '> 10 m/s', value: 0.00},
55
        {direction: 'SE', level: '< 0.5 m/s', value: 1.61},
56
        {direction: 'SE', level: '0.5-2 m/s', value: 3.06},
57
        {direction: 'SE', level: '2-4 m/s', value: 2.37},
58
        {direction: 'SE', level: '4-6 m/s', value: 2.14},
59
        {direction: 'SE', level: '6-8 m/s', value: 1.74},
60
        {direction: 'SE', level: '8-10 m/s', value: 0.39},
61
        {direction: 'SE', level: '> 10 m/s', value: 0.13},
62
        {direction: 'SSE', level: '< 0.5 m/s', value: 2.04},
63
        {direction: 'SSE', level: '0.5-2 m/s', value: 3.42},
64
        {direction: 'SSE', level: '2-4 m/s', value: 1.97},
65
        {direction: 'SSE', level: '4-6 m/s', value: 0.86},
66
        {direction: 'SSE', level: '6-8 m/s', value: 0.53},
67
        {direction: 'SSE', level: '8-10 m/s', value: 0.49},
68
        {direction: 'SSE', level: '> 10 m/s', value: 0.00},
69
        {direction: 'S', level: '< 0.5 m/s', value: 2.66},
70
        {direction: 'S', level: '0.5-2 m/s', value: 4.74},
71
        {direction: 'S', level: '2-4 m/s', value: 0.64},
72
        {direction: 'S', level: '4-6 m/s', value: 0.00},
73
        {direction: 'S', level: '6-8 m/s', value: 0.00},
74
        {direction: 'S', level: '8-10 m/s', value: 0.49},
75
        {direction: 'S', level: '> 10 m/s', value: 0.00},
76
        {direction: 'SSW', level: '< 0.5 m/s', value: 2.96},
77
        {direction: 'SSW', level: '0.5-2 m/s', value: 4.23},
78
        {direction: 'SSW', level: '2-4 m/s', value: 0.34},
79
        {direction: 'SSW', level: '4-6 m/s', value: 1.03},
80
        {direction: 'SSW', level: '6-8 m/s', value: 0.30},
81
        {direction: 'SSW', level: '8-10 m/s', value: 0.00},
82
        {direction: 'SSW', level: '> 10 m/s', value: 0.00},
83
        {direction: 'SW', level: '< 0.5 m/s', value: 2.53},
84
        {direction: 'SW', level: '0.5-2 m/s', value: 4.01},
85
        {direction: 'SW', level: '2-4 m/s', value: 1.22},
86
        {direction: 'SW', level: '4-6 m/s', value: 0.49},
87
        {direction: 'SW', level: '6-8 m/s', value: 0.13},
88
        {direction: 'SW', level: '8-10 m/s', value: 0.00},
89
        {direction: 'SW', level: '> 10 m/s', value: 0.00},
90
        {direction: 'WSW', level: '< 0.5 m/s', value: 1.97},
91
        {direction: 'WSW', level: '0.5-2 m/s', value: 2.66},
92
        {direction: 'WSW', level: '2-4 m/s', value: 1.97},
93
        {direction: 'WSW', level: '4-6 m/s', value: 0.79},
94
        {direction: 'WSW', level: '6-8 m/s', value: 0.30},
95
        {direction: 'WSW', level: '8-10 m/s', value: 0.00},
96
        {direction: 'WSW', level: '> 10 m/s', value: 0.00},
97
        {direction: 'W', level: '< 0.5 m/s', value: 1.64},
98
        {direction: 'W', level: '0.5-2 m/s', value: 1.71},
99
        {direction: 'W', level: '2-4 m/s', value: 0.92},
100
        {direction: 'W', level: '4-6 m/s', value: 1.45},
101
        {direction: 'W', level: '6-8 m/s', value: 0.26},
102
        {direction: 'W', level: '8-10 m/s', value: 0.10},
103
        {direction: 'W', level: '> 10 m/s', value: 0.00},
104
        {direction: 'WNW', level: '< 0.5 m/s', value: 1.32},
105
        {direction: 'WNW', level: '0.5-2 m/s', value: 2.40},
106
        {direction: 'WNW', level: '2-4 m/s', value: 0.99},
107
        {direction: 'WNW', level: '4-6 m/s', value: 1.61},
108
        {direction: 'WNW', level: '6-8 m/s', value: 0.33},
109
        {direction: 'WNW', level: '8-10 m/s', value: 0.00},
110
        {direction: 'WNW', level: '> 10 m/s', value: 0.00},
111
        {direction: 'NW', level: '< 0.5 m/s', value: 1.58},
112
        {direction: 'NW', level: '0.5-2 m/s', value: 4.28},
113
        {direction: 'NW', level: '2-4 m/s', value: 1.28},
114
        {direction: 'NW', level: '4-6 m/s', value: 0.76},
115
        {direction: 'NW', level: '6-8 m/s', value: 0.66},
116
        {direction: 'NW', level: '8-10 m/s', value: 0.69},
117
        {direction: 'NW', level: '> 10 m/s', value: 0.03},
118
        {direction: 'NNW', level: '< 0.5 m/s', value: 1.51},
119
        {direction: 'NNW', level: '0.5-2 m/s', value: 5.00},
120
        {direction: 'NNW', level: '2-4 m/s', value: 1.32},
121
        {direction: 'NNW', level: '4-6 m/s', value: 0.13},
122
        {direction: 'NNW', level: '6-8 m/s', value: 0.23},
123
        {direction: 'NNW', level: '8-10 m/s', value: 0.13},
124
        {direction: 'NNW', level: '> 10 m/s', value: 0.07}
125
      ];
126
      var colors = ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354'];
127
      var chart = new G2.Chart({
128
        id: 'c1',
129
        forceFit: true,
130
        height: 450,
131
        plotCfg: {
132
          margin: [40, 100, 80, 80]
133
        }
134
      });
135
      chart.source(data);
136
      chart.coord('polar');
137
      chart.axis('value',{
138
        grid: {
139
          line: {
140
            lineDash: [0, 0]
141
          }
142
        }// 设置坐标系栅格样式
143
      });
144
      chart.intervalStack().position('direction*value').color('level', colors).size(35);
145
      chart.render();
146
    </script>
147
  </body>
148
</html>
149
​

Wind rose

极坐标下的层叠柱状图。用于展示不同方向的风力水平。 了解更多