体能指标评分表

基础柱状图

体能指标评分表

<!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>
<style>
    .left-tool-box {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 40px;
        height: 100%;
        z-index: 1000
    }
    .left-tool-box .sort-button {
        width: 70%;
        height: auto;
        position: absolute;
        left: 15%;
        top: 30%;
    }
</style>
<div class="left-tool-box"><img class="sort-button" src="/assets/image/g2/demo/sortbar.png"></div>
<script>
  var sortType = 'positive';
  var data = [{
    name: '张伟',
    value: 95
  }, {
    name: '王秀英',
    value: 94
  }, {
    name: '李明',
    value: 92
  }, {
    name: '王丽',
    value: 89
  }, {
    name: '刘洋',
    value: 80
  }, {
    name: '何勇',
    value: 80
  }, {
    name: '王强',
    value: 78
  }, {
    name: '林杰',
    value: 76
  }, {
    name: '李桂英',
    value: 75
  }, {
    name: '何秀兰',
    value: 73
  }, {
    name: '卢芳',
    value: 68
  }, {
    name: '张德',
    value: 61
  }];
  var chart = new G2.Chart({
    container: 'mountNode',
    forceFit: true,
    height: window.innerHeight,
    padding: [20, 20, 50, 30]
  });
  chart.source(data);
  chart.scale('value', {
    alias: '体能分'
  });
  chart.axis('name', {
    label: {
      textStyle: {
        fill: '#aaaaaa'
      }
    },
    tickLine: {
      alignWithLabel: false,
      length: 0
    }
  });
  chart.axis('value', {
    label: null,
    title: {
      offset: 20
    }
  });
  chart.legend(false);
  chart.guide().region({
    start: ['start', 'max'],
    end: ['end', 80],
    style: {
      lineWidth: 0,
      fill: '#dcdcdc',
      fillOpacity: 0.3,
      stroke: '#ccc'
    }
  });
  chart.guide().text({
    top: true,
    position: ['end', 'max'],
    content: '达标区间',
    style: {
      fill: '#aaaaaa',
      textAlign: 'end',
      textBaseline: 'top',
      fontWeight: 300
    },
    offsetX: -10,
    offsetY: 6
  });
  chart.interval().position('name*value').opacity(1).label('value', {
    offset: 10,
    textStyle: {
      fill: '#595959',
      fontSize: 12
    }
  });
  chart.render();
  $('.sort-button').click(function() {
    sortType = sortType === 'positive' ? 'negative' : 'positive';
    sortData(sortType);
    chart.repaint();
  });

<!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>
<style>
    .left-tool-box {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 40px;
        height: 100%;
        z-index: 1000
    }
    .left-tool-box .sort-button {
        width: 70%;
        height: auto;
        position: absolute;
        left: 15%;
        top: 30%;
    }
</style>
<div class="left-tool-box"><img class="sort-button" src="/assets/image/g2/demo/sortbar.png"></div>
<script>
  var sortType = 'positive';
  var data = [{
    name: '张伟',
    value: 95
  }, {
    name: '王秀英',
    value: 94
  }, {
    name: '李明',
    value: 92
  }, {
    name: '王丽',
    value: 89
  }, {
    name: '刘洋',
    value: 80
  }, {
    name: '何勇',
    value: 80
  }, {
    name: '王强',
    value: 78
  }, {
    name: '林杰',
    value: 76
  }, {
    name: '李桂英',
    value: 75
  }, {
    name: '何秀兰',
    value: 73
  }, {
    name: '卢芳',
    value: 68
  }, {
    name: '张德',
    value: 61
  }];
  var chart = new G2.Chart({
    container: 'mountNode',
    forceFit: true,
    height: window.innerHeight,
    padding: [20, 20, 50, 30]
  });
  chart.source(data);
  chart.scale('value', {
    alias: '体能分'
  });
  chart.axis('name', {
    label: {
      textStyle: {
        fill: '#aaaaaa'
      }
    },
    tickLine: {
      alignWithLabel: false,
      length: 0
    }
  });
  chart.axis('value', {
    label: null,
    title: {
      offset: 20
    }
  });
  chart.legend(false);
  chart.guide().region({
    start: ['start', 'max'],
    end: ['end', 80],
    style: {
      lineWidth: 0,
      fill: '#dcdcdc',
      fillOpacity: 0.3,
      stroke: '#ccc'
    }
  });
  chart.guide().text({
    top: true,
    position: ['end', 'max'],
    content: '达标区间',
    style: {
      fill: '#aaaaaa',
      textAlign: 'end',
      textBaseline: 'top',
      fontWeight: 300
    },
    offsetX: -10,
    offsetY: 6
  });
  chart.interval().position('name*value').opacity(1).label('value', {
    offset: 10,
    textStyle: {
      fill: '#595959',
      fontSize: 12
    }
  });
  chart.render();
  $('.sort-button').click(function() {
    sortType = sortType === 'positive' ? 'negative' : 'positive';
    sortData(sortType);
    chart.repaint();
  });

图表用法

数据来源：demo数据

折线图

条形图

柱状图

饼图

点图

面积图

箱形图

烛形图

热力图

仪表盘

漏斗图

地图

雷达图

分面

关系图

其他图表

组件使用

图表用法

相关链接