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 src="https://a.alipayobjects.com/g/datavis/china-geojson/1.0.0/index.js"></script>
12
    <script>
13
      $('<div style="position:relative;padding-left:200px;"><div id="china" style="position: absolute;top:5px;left:5px;"></div><div id="province"></div></div>').appendTo('#c1');
14
      function processData(mapData) {
15
        var result = [];
16
        var features = mapData.features;
17
        for (var i = 0; i < features.length; i++) {
18
          var name = features[i].properties.name;
19
          result.push({
20
            "name": name,
21
            "value": Math.round(Math.random() * 1000)
22
          });
23
        }
24
        return result;
25
      }
26
      function renderProvinceChart(provinceChart, name) {
27
        var provinceData = ChinaGeoJSON[name];
28
        provinceChart.clear();
29
        provinceChart.source(processData(provinceData));
30
        provinceChart.legend({
31
          position: 'left'
32
        });
33
        provinceChart.polygon().position(Stat.map.region('name', provinceData))
34
          .label('name', {
35
          label: {
36
            fill: '#333'
37
          }
38
        })
39
          .style({
40
          stroke: '#fff',
41
          lineWidth: 1
42
        })
43
          .color('value', '#e5f5e0-#31a354');
44
        provinceChart.render();
45
      }
46
      var Stat = G2.Stat;
47
      var mapData = ChinaGeoJSON['China'];
48
      var chart = new G2.Chart({
49
        id: 'china',
50
        width: 200,
51
        height: 120,
52
        plotCfg: {
53
          margin: [0, 10]
54
        }
55
      });
56
      chart.source(processData(mapData));
57
      chart.tooltip({
58
        title: null
59
      });
60
      chart.polygon().position(Stat.map.region('name', mapData)).tooltip('name')
61
        .style({
62
        stroke: '#999',
63
        lineWidth: 1,
64
        fill: '#ccc',
65
        globalAlpha: 0.9,
66
        cursor: 'pointer' // 设置鼠标手势
67
      }).selected({ // 设置是否允许选中以及选中样式
68
        mode: 'single', // 多选还是单选
69
        style: {
70
          fill: '#fe9929' // 选中的样式
71
        }
72
      });
73
      chart.render();
74
      var provinceChart = new G2.Chart({
75
        id: 'province',
76
        width: 450,
77
        height: 450,
78
        plotCfg: {
79
          margin: [20, 20, 40, 80]
80
        }
81
      });
82
      var shapeData = chart.getAllGeoms()[0].getData();
83
      for (var i = 0, len = shapeData.length; i < len; i++) {
84
        var item = shapeData[i];
85
        var origin = item['_origin'];
86
        var name = origin.name;
87
        if (name === '浙江') {
88
          renderProvinceChart(provinceChart, name);
89
          chart.getAllGeoms()[0].setSelected(item);
90
        }
91
      }
92
      chart.on('plotclick', function(ev) {
93
        var shape = ev.shape;
94
        if (shape && shape.get('selected')) {
95
          var item = shape.get('origin');
96
          var data = item['_origin'];
97
          var name = data.name;
98
          renderProvinceChart(provinceChart, name);
99
        } else {
100
          provinceChart.clear();
101
        }
102
      });
103
    </script>
104
  </body>
105
</html>
106
​

中国地图-省市下钻

可视化的方法显示地理区域上的数据。 使用地图作为背景，通过图形的位置来表现数据的地理位置， 通常来展示数据在不同地理区域上的分布情况。 了解更多