某部门人员星座分布

基础饼图

某部门人员星座分布

内环为星座的四分法，外环为 12 星座。截止到 2017-09，35 个UED中，水瓶、摩羯人数最多，狮子天蝎白羊其次。以四分法来看，火象星座占比 31%，风向星座占 28%。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>某部门人员星座分布</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 = [{
    name: '狮子',
    type: '火象星座',
    value: 11
  }, {
    name: '白羊',
    type: '火象星座',
    value: 10
  }, {
    name: '射手',
    type: '火象星座',
    value: 10
  }, {
    name: '水瓶',
    type: '风向星座',
    value: 14
  }, {
    name: '双子',
    type: '风向星座',
    value: 7
  }, {
    name: '天平',
    type: '风向星座',
    value: 7
  }, {
    name: '摩羯',
    type: '土象星座',
    value: 14
  }, {
    name: '金牛',
    type: '土象星座',
    value: 3
  }, {
    name: '处女',
    type: '土象星座',
    value: 3
  }, {
    name: '天蝎',
    type: '水象星座',
    value: 11
  }, {
    name: '巨蟹',
    type: '水象星座',
    value: 5
  }, {
    name: '双鱼',
    type: '水象星座',
    value: 5
  }];
  var ds = new DataSet();
  var dv = ds.createView();
  dv.source(data).transform({
    type: 'percent',
    field: 'value',
    dimension: 'type',
    as: 'percent'
  });
  var chart = new G2.Chart({
    container: 'mountNode',
    forceFit: true,
    height: window.innerHeight,
    padding: 'auto'
  });
  chart.source(dv);
  chart.legend(false);
  chart.coord('theta', {
    radius: 0.5,
    innerRadius: 0.3
  });
  chart.intervalStack().position('percent').color('type', ['#1890ff', '#13c2c2', '#ffc53d', '#73d13d']).style({
    stroke: 'white',
    lineWidth: 1
  }).label('type', {
    offset: -5,
    textStyle: {
      fill: 'white',
      shadowBlur: 2,
      shadowColor: 'rgba(0, 0, 0, .45)'
    }
  }).opacity(1);
  var outterView = chart.view();
  var ds2 = new DataSet();
  var dv2 = ds2.createView();
  dv2.source(data).transform({
    type: 'percent',
    field: 'value',
    dimension: 'name',
    as: 'percent'
  });
  outterView.source(dv2);
  outterView.coord('theta', {
    innerRadius: 0.5 / 0.8,
    radius: 0.8
  });
  outterView.intervalStack().position('percent').color('type', ['#1890ff', '#13c2c2', '#ffc53d', '#73d13d']).style({
    stroke: 'white',
    lineWidth: 1
  }).label('name', {
    offset: -10,
    textStyle: {
      fill: 'white',
      shadowBlur: 2,
      shadowColor: 'rgba(0, 0, 0, .45)'
    }
  }).opacity(1);
  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>某部门人员星座分布</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 = [{
    name: '狮子',
    type: '火象星座',
    value: 11
  }, {
    name: '白羊',
    type: '火象星座',
    value: 10
  }, {
    name: '射手',
    type: '火象星座',
    value: 10
  }, {
    name: '水瓶',
    type: '风向星座',
    value: 14
  }, {
    name: '双子',
    type: '风向星座',
    value: 7
  }, {
    name: '天平',
    type: '风向星座',
    value: 7
  }, {
    name: '摩羯',
    type: '土象星座',
    value: 14
  }, {
    name: '金牛',
    type: '土象星座',
    value: 3
  }, {
    name: '处女',
    type: '土象星座',
    value: 3
  }, {
    name: '天蝎',
    type: '水象星座',
    value: 11
  }, {
    name: '巨蟹',
    type: '水象星座',
    value: 5
  }, {
    name: '双鱼',
    type: '水象星座',
    value: 5
  }];
  var ds = new DataSet();
  var dv = ds.createView();
  dv.source(data).transform({
    type: 'percent',
    field: 'value',
    dimension: 'type',
    as: 'percent'
  });
  var chart = new G2.Chart({
    container: 'mountNode',
    forceFit: true,
    height: window.innerHeight,
    padding: 'auto'
  });
  chart.source(dv);
  chart.legend(false);
  chart.coord('theta', {
    radius: 0.5,
    innerRadius: 0.3
  });
  chart.intervalStack().position('percent').color('type', ['#1890ff', '#13c2c2', '#ffc53d', '#73d13d']).style({
    stroke: 'white',
    lineWidth: 1
  }).label('type', {
    offset: -5,
    textStyle: {
      fill: 'white',
      shadowBlur: 2,
      shadowColor: 'rgba(0, 0, 0, .45)'
    }
  }).opacity(1);
  var outterView = chart.view();
  var ds2 = new DataSet();
  var dv2 = ds2.createView();
  dv2.source(data).transform({
    type: 'percent',
    field: 'value',
    dimension: 'name',
    as: 'percent'
  });
  outterView.source(dv2);
  outterView.coord('theta', {
    innerRadius: 0.5 / 0.8,
    radius: 0.8
  });
  outterView.intervalStack().position('percent').color('type', ['#1890ff', '#13c2c2', '#ffc53d', '#73d13d']).style({
    stroke: 'white',
    lineWidth: 1
  }).label('name', {
    offset: -10,
    textStyle: {
      fill: 'white',
      shadowBlur: 2,
      shadowColor: 'rgba(0, 0, 0, .45)'
    }
  }).opacity(1);
  chart.render();
</script>
</body>
</html>

图表简介

了解更多

图表用法

数据来源：demo数据

折线图

条形图

柱状图

饼图

点图

面积图

箱形图

烛形图

热力图

仪表盘

漏斗图

地图

雷达图

分面

关系图

其他图表

组件使用

图表简介

图表用法

相关链接