2016 年全球十大转基因作物种植面积和耕地总面积对比

分组条形图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>2016 年全球十大转基因作物种植面积和耕地总面积对比</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>
  var data = [{
    country: '乌拉圭',
    type: '2016 年转基因种植面积',
    value: 1.3
  }, {
    country: '乌拉圭',
    type: '2016 年耕地总面积',
    value: 1.8
  }, {
    country: '巴拉圭',
    type: '2016 年转基因种植面积',
    value: 3.6
  }, {
    country: '巴拉圭',
    type: '2016 年耕地总面积',
    value: 5.5
  }, {
    country: '南非',
    type: '2016 年转基因种植面积',
    value: 3.7
  }, {
    country: '南非',
    type: '2016 年耕地总面积',
    value: 12.1
  }, {
    country: '巴基斯坦',
    type: '2016 年转基因种植面积',
    value: 2.9
  }, {
    country: '巴基斯坦',
    type: '2016 年耕地总面积',
    value: 22.0
  }, {
    country: '阿根廷',
    type: '2016 年转基因种植面积',
    value: 23.8
  }, {
    country: '阿根廷',
    type: '2016 年耕地总面积',
    value: 38.6
  }, {
    country: '加拿大',
    type: '2016 年转基因种植面积',
    value: 11.6
  }, {
    country: '加拿大',
    type: '2016 年耕地总面积',
    value: 46.9
  }, {
    country: '巴西',
    type: '2016 年转基因种植面积',
    value: 49.1
  }, {
    country: '巴西',
    type: '2016 年耕地总面积',
    value: 73.2
  }, {
    country: '中国',
    type: '2016 年转基因种植面积',
    value: 2.8
  }, {
    country: '中国',
    type: '2016 年耕地总面积',
    value: 108.4
  }, {
    country: '美国',
    type: '2016 年转基因种植面积',
    value: 72.9
  }, {
    country: '美国',
    type: '2016 年耕地总面积',
    value: 165.2
  }, {
    country: '印度',
    type: '2016 年转基因种植面积',
    value: 49.1
  }, {
    country: '印度',
    type: '2016 年耕地总面积',
    value: 175.4
  }];

var chart = new G2.Chart({
    container: 'mountNode',
    forceFit: true,
    height: window.innerHeight,
    padding: 'auto'
  });
  chart.source(data, {
    value: {
      nice: false,
      alias: '销售额（万）'
    }
  });

chart.axis('value', false);
  chart.legend({
    position: 'top-center'
  });
  chart.coord().transpose();
  chart.facet('mirror', {
    fields: ['type'],
    autoSetAxis: false,
    transpose: true,
    showTitle: false,
    padding: [0, 10, 0, 0],
    eachView: function eachView(view, facet) {
      var facetIndex = facet.colIndex;
      if (facetIndex === 0) {
        view.axis('country', {
          position: 'top',
          label: {
            textStyle: {
              fill: '#aaaaaa',
              fontSize: 12
            }
          },
          tickLine: {
            alignWithLabel: false,
            length: 0
          },
          line: {
            lineWidth: 0
          }
        });
      } else {
        view.axis('country', false);
      }
      var color = facetIndex === 0 ? '#1890ff' : '#2fc25b';
      view.interval().position('country*value').color(color).size(30).opacity(1).label('value', function(val) {
        var offset = -4;
        var shadowBlur = 2;
        var textAlign = facetIndex === 1 ? 'end' : 'start';
        var fill = 'white';
        if (val < 15) {
          offset = 4;
          textAlign = facetIndex === 1 ? 'start' : 'end';
          fill = '#666666';
          shadowBlur = 0;
        }
        return {
          //position: 'middle',
          offset: offset,
          textStyle: {
            fill: fill,
            shadowBlur: shadowBlur,
            shadowColor: 'rgba(0, 0, 0, .45)',
            textAlign: textAlign
          }
        };
      });
    }
  });

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>2016 年全球十大转基因作物种植面积和耕地总面积对比</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>
  var data = [{
    country: '乌拉圭',
    type: '2016 年转基因种植面积',
    value: 1.3
  }, {
    country: '乌拉圭',
    type: '2016 年耕地总面积',
    value: 1.8
  }, {
    country: '巴拉圭',
    type: '2016 年转基因种植面积',
    value: 3.6
  }, {
    country: '巴拉圭',
    type: '2016 年耕地总面积',
    value: 5.5
  }, {
    country: '南非',
    type: '2016 年转基因种植面积',
    value: 3.7
  }, {
    country: '南非',
    type: '2016 年耕地总面积',
    value: 12.1
  }, {
    country: '巴基斯坦',
    type: '2016 年转基因种植面积',
    value: 2.9
  }, {
    country: '巴基斯坦',
    type: '2016 年耕地总面积',
    value: 22.0
  }, {
    country: '阿根廷',
    type: '2016 年转基因种植面积',
    value: 23.8
  }, {
    country: '阿根廷',
    type: '2016 年耕地总面积',
    value: 38.6
  }, {
    country: '加拿大',
    type: '2016 年转基因种植面积',
    value: 11.6
  }, {
    country: '加拿大',
    type: '2016 年耕地总面积',
    value: 46.9
  }, {
    country: '巴西',
    type: '2016 年转基因种植面积',
    value: 49.1
  }, {
    country: '巴西',
    type: '2016 年耕地总面积',
    value: 73.2
  }, {
    country: '中国',
    type: '2016 年转基因种植面积',
    value: 2.8
  }, {
    country: '中国',
    type: '2016 年耕地总面积',
    value: 108.4
  }, {
    country: '美国',
    type: '2016 年转基因种植面积',
    value: 72.9
  }, {
    country: '美国',
    type: '2016 年耕地总面积',
    value: 165.2
  }, {
    country: '印度',
    type: '2016 年转基因种植面积',
    value: 49.1
  }, {
    country: '印度',
    type: '2016 年耕地总面积',
    value: 175.4
  }];

chart.render();
</script>
</body>
</html>

图表用法

数据来源：demo数据

折线图

条形图

柱状图

饼图

点图

面积图

箱形图

烛形图

热力图

仪表盘

漏斗图

地图

雷达图

分面

关系图

其他图表

组件使用

图表用法

相关链接