label-地图

组件

label-地图

地图或其他多边形图的 label 布局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>label-地图</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<body>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script>
  $.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/world.geo.json', function(mapData) {
    var chart = new G2.Chart({
      container: 'mountNode',
      forceFit: true,
      height: window.innerHeight,
      padding: [55, 20]
    });
    chart.tooltip(false);
    chart.axis(false);
    chart.legend('trend', {
      position: 'left'
    });
    // 绘制世界地图背景
    var worldMap = new DataSet.View().source(mapData, {
      type: 'GeoJSON'
    });
    chart.source(worldMap);
    chart.tooltip(false);
    chart.polygon().position('longitude*latitude').label('name', {
      type: 'map',
      offset: 0,
      textStyle: {
        fill: 'black',
        stroke: '#fff',
        lineWidth: 2
      }
    }).style({
      fill: '#CED4D9',
      stroke: '#F2F4F5',
      lineWidth: 0.5
    });
    chart.render();
  });
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>label-地图</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<body style="background: #1f1f1f;">
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script>G2.Global.setTheme('dark');</script>
<script>
  $.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/world.geo.json', function(mapData) {
    var chart = new G2.Chart({
      container: 'mountNode',
      forceFit: true,
      height: window.innerHeight,
      padding: [55, 20]
    });
    chart.tooltip(false);
    chart.axis(false);
    chart.legend('trend', {
      position: 'left'
    });
    // 绘制世界地图背景
    var worldMap = new DataSet.View().source(mapData, {
      type: 'GeoJSON'
    });
    chart.source(worldMap);
    chart.tooltip(false);
    chart.polygon().position('longitude*latitude').label('name', {
      type: 'map',
      offset: 0,
      textStyle: {
        fill: 'black',
        stroke: '#fff',
        lineWidth: 2
      }
    }).style({
      fill: '#CED4D9',
      stroke: '#F2F4F5',
      lineWidth: 0.5
    });
    chart.render();
  });
</script>
</body>
</html>

图表简介

地图或其他多边形图的 label 布局。

图表用法

地图的 label 将会初始定位到地图板块的可视中心，为了防止 label 之间相互覆盖布局，尝试向四周偏移，会剔除放不下的 label。

关联图表

地图

折线图

条形图

柱状图

饼图

点图

面积图

箱形图

烛形图

热力图

仪表盘

漏斗图

地图

雷达图

分面

关系图

其他图表

组件使用

图表简介

图表用法

关联图表

相关链接