某产品在各设备上的用户来源

迷你图

某产品在各设备上的用户来源

<!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>
.g2-table {
            width: 100%;
            border-collapse: collapse;
            text-align: left;
            border-radius: 4px 4px 0 0;
            table-layout: fixed;
        }
        .g2-thead {
            display: table-header-group;
            vertical-align: middle;
            border-bottom-color: #e8e8e8;
            border-bottom-style: solid;
            border-bottom-width: 1px;
            background-color: #fafafa;
        }
        .th-index {
            width: 30px;
        }
        .g2-thead th {
            text-align: center;
            height: 50px;
            font-size: 12px;
        }
        .th-index {
            width: 50px;
        }
        .th-id {
            width: 20%;
        }
        .g2-table-row {
            height: 60px;
            vertical-align: middle;
            border-bottom-style: solid;
            border-bottom-width: 1px;
            border-bottom-color: #e8e8e8;
        }
        .g2-table-column {
            font-size: 12px;
            color: #8c8c8c;
            text-align: center;
        }
        canvas {
            position: relative;
            float: left;
        }
        .top-class {
            width: 20px;
            height: 20px;
            border-radius: 100px;
            background-color: #314659;
            text-align: center;
            vertical-align: middle;
            margin-left: 15px;
            color: white;
            font-weight: bold;
        }
        .top-class:after {
            display: inline-block;
            width: 0;
            height: 100%;
            vertical-align: middle;
            content: '';
        }
        .normal-class {
            width: 20px;
            height: 20px;
            border-radius: 100px;
            background-color: #f0f2f5;
            text-align: center;
            vertical-align: middle;
            margin-left: 15px;
            color: #717274;
            font-weight: bold;
        }
        .normal-class:after {
            display: inline-block;
            width: 0;
            height: 100%;
            vertical-align: middle;
            content: '';
        }
</style>

<table class="g2-table">
        
        <thead class="g2-thead">
            <tr>
                <th class="th-index">排序</th>
                <th class="th-id">来源</th>
                <th>用户数（万）</th>
            </tr>
        </thead>
        
        <tbody>
        </tbody>
    </table>
<script>
  var data = [{
    index: 1,
    source: 'Iphone',
    data: [{
      'value': 25
    }]
  }, {
    index: 2,
    source: 'Galxy S5',
    data: [{
      'value': 18
    }]
  }, {
    index: 3,
    source: 'Sony',
    data: [{
      'value': 6
    }]
  }, {
    index: 4,
    source: 'Mac OS',
    data: [{
      'value': 3
    }]
  }, {
    index: 5,
    source: 'HUAWEI',
    data: [{
      'value': 2
    }]
  }];
  //append data
  var $tbody = $('.g2-table').children('tbody');
  data.forEach(function(d, index) {
    //create container
    var $tr = $('<tr class="g2-table-row"></tr>');
    $tbody.append($tr);
    //index
    var indexClass = index < 3 ? 'top-class' : 'normal-class';
    var $index = $('<td class="g2-table-column g2-table-column-index"><div class="' + indexClass + '">' + d.index + '</div></td>');
    $tr.append($index);
    //source
    var $source = $('<td class="g2-table-column">' + d.source + '</td>');
    $tr.append($source);
    //data
    var dataID = 'bar-chart-' + index;
    var $data = $('<td class="g2-table-column"><div class="chartContainer" id="' + dataID + '"></div></td>');
    $tr.append($data);
    createSingleBarChart(dataID, d.data);
  });

<!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>
.g2-table {
            width: 100%;
            border-collapse: collapse;
            text-align: left;
            border-radius: 4px 4px 0 0;
            table-layout: fixed;
        }
        .g2-thead {
            display: table-header-group;
            vertical-align: middle;
            border-bottom-color: #e8e8e8;
            border-bottom-style: solid;
            border-bottom-width: 1px;
            background-color: #fafafa;
        }
        .th-index {
            width: 30px;
        }
        .g2-thead th {
            text-align: center;
            height: 50px;
            font-size: 12px;
        }
        .th-index {
            width: 50px;
        }
        .th-id {
            width: 20%;
        }
        .g2-table-row {
            height: 60px;
            vertical-align: middle;
            border-bottom-style: solid;
            border-bottom-width: 1px;
            border-bottom-color: #e8e8e8;
        }
        .g2-table-column {
            font-size: 12px;
            color: #8c8c8c;
            text-align: center;
        }
        canvas {
            position: relative;
            float: left;
        }
        .top-class {
            width: 20px;
            height: 20px;
            border-radius: 100px;
            background-color: #314659;
            text-align: center;
            vertical-align: middle;
            margin-left: 15px;
            color: white;
            font-weight: bold;
        }
        .top-class:after {
            display: inline-block;
            width: 0;
            height: 100%;
            vertical-align: middle;
            content: '';
        }
        .normal-class {
            width: 20px;
            height: 20px;
            border-radius: 100px;
            background-color: #f0f2f5;
            text-align: center;
            vertical-align: middle;
            margin-left: 15px;
            color: #717274;
            font-weight: bold;
        }
        .normal-class:after {
            display: inline-block;
            width: 0;
            height: 100%;
            vertical-align: middle;
            content: '';
        }
</style>

<table class="g2-table">
        
        <thead class="g2-thead">
            <tr>
                <th class="th-index">排序</th>
                <th class="th-id">来源</th>
                <th>用户数（万）</th>
            </tr>
        </thead>
        
        <tbody>
        </tbody>
    </table>
<script>
  var data = [{
    index: 1,
    source: 'Iphone',
    data: [{
      'value': 25
    }]
  }, {
    index: 2,
    source: 'Galxy S5',
    data: [{
      'value': 18
    }]
  }, {
    index: 3,
    source: 'Sony',
    data: [{
      'value': 6
    }]
  }, {
    index: 4,
    source: 'Mac OS',
    data: [{
      'value': 3
    }]
  }, {
    index: 5,
    source: 'HUAWEI',
    data: [{
      'value': 2
    }]
  }];
  //append data
  var $tbody = $('.g2-table').children('tbody');
  data.forEach(function(d, index) {
    //create container
    var $tr = $('<tr class="g2-table-row"></tr>');
    $tbody.append($tr);
    //index
    var indexClass = index < 3 ? 'top-class' : 'normal-class';
    var $index = $('<td class="g2-table-column g2-table-column-index"><div class="' + indexClass + '">' + d.index + '</div></td>');
    $tr.append($index);
    //source
    var $source = $('<td class="g2-table-column">' + d.source + '</td>');
    $tr.append($source);
    //data
    var dataID = 'bar-chart-' + index;
    var $data = $('<td class="g2-table-column"><div class="chartContainer" id="' + dataID + '"></div></td>');
    $tr.append($data);
    createSingleBarChart(dataID, d.data);
  });

图表用法

数据来源：demo数据

折线图

条形图

柱状图

饼图

点图

面积图

箱形图

烛形图

热力图

仪表盘

漏斗图

地图

雷达图

分面

关系图

其他图表

组件使用

图表用法

相关链接