G2 - The Grammar Of Graphics

地图 / 中国地图-省市下钻

选择主题

源码

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>中国地图-省市下钻</title>
      <link rel="stylesheet" href="https://os.alipayobjects.com/s/prod/g2/static/doc-b57e62881a0344ecde9e68c4ce312143.css"/>
      
      <script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>

<script src="https://a.alipayobjects.com/g/datavis/g2/2.2.1/g2.js"></script>
    </head>
    <body>
      <div id="c1"></div>
      
      <script src="https://a.alipayobjects.com/g/datavis/china-geojson/1.0.0/index.js"></script>
<script>
$('<div style="position:relative;padding-left:250px;"><div id="china" style="position: absolute;top:5px;left:5px;"></div><div id="province"></div></div>').appendTo('#c1');

var provinceChart = new G2.Chart({
  id: 'province',
  width: 700,
  height: 500,
  plotCfg: {
    margin: [20, 80, 40, 40]
  }
});

var shapeData = chart.getAllGeoms()[0].getData();
for (var i = 0, len = shapeData.length; i < len; i++) {
  var item = shapeData[i];
  var origin = item['_origin'];
  var name = origin.name;
  if (name === '浙江') {
    renderProvinceChart(provinceChart, name);
    chart.getAllGeoms()[0].setSelected(item);
  }
}

chart.on('plotclick', function(ev) {
  var shape = ev.shape;
  if (!shape) {
    return false;
  }
  if (shape.get('selected')) {
    var item = shape.get('origin');
    var data = item['_origin'];
    var name = data.name;
    renderProvinceChart(provinceChart, name);
  } else {
    provinceChart.clear();
  }
});
</script>

</body>
  </html>

<script src="https://a.alipayobjects.com/g/datavis/g2/2.2.1/g2.js"></script>
      <script>
        G2.Global.setTheme('dark');
      </script>
    </head>
    <body>
      <div id="c1"></div>
      <script src="https://a.alipayobjects.com/g/datavis/china-geojson/1.0.0/index.js"></script>
<script>
$('<div style="position:relative;padding-left:250px;"><div id="china" style="position: absolute;top:5px;left:5px;"></div><div id="province"></div></div>').appendTo('#c1');

var provinceChart = new G2.Chart({
  id: 'province',
  width: 700,
  height: 500,
  plotCfg: {
    margin: [20, 80, 40, 40]
  }
});

</body>
  </html>

var provinceChart = new G2.Chart({
  id: 'province',
  width: 700,
  height: 500,
  plotCfg: {
    margin: [20, 80, 40, 40]
  }
});

中国地图-省市下钻

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