某中台产品服务器概况一览

迷你图

某中台产品服务器概况一览

<!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: 30px;
            font-size: 12px;
        }
        .th-index {
            width: 10%;
        }
        .th-id {
            width: 15%;
        }
        .th-time {
            width: 20%;
        }
        .th-status {
            width: 20%;
        }
        .g2-table-row {
            height: 30px;
            vertical-align: middle;
            border-bottom-style: solid;
            border-bottom-width: 1px;
            border-bottom-color: #e8e8e8;
        }
        .g2-table-column {
            font-size: 12px;
            color: #8c8c8c;
            padding: 15px;
            text-align: center
        }
        .before-start {
            color: #bfbfbf;
        }
        .in-processing {
            color: #1890ff;
        }
        .fail {
            color: #f5222d;
        }
        .sucess {
            color: #52c41a;
        }
        .abnormal {
            color: #faad14;
        }
        li {
            font-size: 12px;
        }
        li span {
            color: #8c8c8c;
        }
        .g2-guide-html {
            width: 50px;
            height: 30px;
            vertical-align: middle;
            line-height: 0.8
        }
        .g2-guide-html .title {
            font-size: 12px;
            color: #8c8c8c;
            font-weight: 300;
        }
        .g2-guide-html .value {
            font-size: 14px;
            color: #000;
            font-weight: bold;
        }
</style>

<table class="g2-table">
        
        <thead class="g2-thead">
            <tr>
                <th class="th-index">序号</th>
                <th class="th-id">服务器 ID</th>
                <th class="th-time">服务调用次数</th>
                <th>服务调用趋势</th>
                <th class="th-status">状态</th>
            </tr>
        </thead>
        
        <tbody>
        </tbody>
    </table>
<script>
  var data = [{
    index: 1,
    id: 723826463,
    times: 29.6,
    trend: [{
      'timeindex': 1,
      'value': 721
    }, {
      'timeindex': 2,
      'value': 327
    }, {
      'timeindex': 3,
      'value': 982
    }, {
      'timeindex': 4,
      'value': 735
    }, {
      'timeindex': 5,
      'value': 67
    }, {
      'timeindex': 6,
      'value': 123
    }, {
      'timeindex': 7,
      'value': 167
    }, {
      'timeindex': 8,
      'value': 403
    }, {
      'timeindex': 9,
      'value': 741
    }, {
      'timeindex': 10,
      'value': 114
    }, {
      'timeindex': 11,
      'value': 171
    }, {
      'timeindex': 12,
      'value': 330
    }, {
      'timeindex': 13,
      'value': 964
    }, {
      'timeindex': 14,
      'value': 835
    }, {
      'timeindex': 15,
      'value': 12
    }, {
      'timeindex': 16,
      'value': 349
    }, {
      'timeindex': 17,
      'value': 601
    }, {
      'timeindex': 18,
      'value': 230
    }, {
      'timeindex': 19,
      'value': 567
    }, {
      'timeindex': 20,
      'value': 135
    }],
    sum: 8574,
    status: '进行中'
  }, {
    index: 2,
    id: 89584746,
    times: 1.6,
    trend: [{
      'timeindex': 1,
      'value': 90
    }, {
      'timeindex': 2,
      'value': 63
    }, {
      'timeindex': 3,
      'value': 85
    }, {
      'timeindex': 4,
      'value': 43
    }, {
      'timeindex': 5,
      'value': 85
    }, {
      'timeindex': 6,
      'value': 21
    }, {
      'timeindex': 7,
      'value': 24
    }, {
      'timeindex': 8,
      'value': 75
    }, {
      'timeindex': 9,
      'value': 73
    }, {
      'timeindex': 10,
      'value': 82
    }, {
      'timeindex': 11,
      'value': 57
    }, {
      'timeindex': 12,
      'value': 44
    }, {
      'timeindex': 13,
      'value': 35
    }, {
      'timeindex': 14,
      'value': 57
    }, {
      'timeindex': 15,
      'value': 39
    }, {
      'timeindex': 16,
      'value': 45
    }, {
      'timeindex': 17,
      'value': 52
    }, {
      'timeindex': 18,
      'value': 75
    }, {
      'timeindex': 19,
      'value': 35
    }, {
      'timeindex': 20,
      'value': 30
    }],
    sum: 1100,
    status: '未开始'
  }, {
    index: 3,
    id: 90318249,
    times: 10.4,
    trend: [{
      'timeindex': 1,
      'value': 19
    }, {
      'timeindex': 2,
      'value': 37
    }, {
      'timeindex': 3,
      'value': 33
    }, {
      'timeindex': 4,
      'value': 40
    }, {
      'timeindex': 5,
      'value': 25
    }, {
      'timeindex': 6,
      'value': 10
    }, {
      'timeindex': 7,
      'value': 44
    }, {
      'timeindex': 8,
      'value': 31
    }, {
      'timeindex': 9,
      'value': 25
    }, {
      'timeindex': 10,
      'value': 39
    }, {
      'timeindex': 11,
      'value': 34
    }, {
      'timeindex': 12,
      'value': 21
    }, {
      'timeindex': 13,
      'value': 46
    }, {
      'timeindex': 14,
      'value': 33
    }, {
      'timeindex': 15,
      'value': 47
    }, {
      'timeindex': 16,
      'value': 24
    }, {
      'timeindex': 17,
      'value': 11
    }, {
      'timeindex': 18,
      'value': 24
    }, {
      'timeindex': 19,
      'value': 48
    }, {
      'timeindex': 20,
      'value': 34
    }],
    sum: 625,
    status: '失败'
  }, {
    index: 4,
    id: 983927827,
    times: 17.8,
    trend: [{
      'timeindex': 1,
      'value': 13
    }, {
      'timeindex': 2,
      'value': 17
    }, {
      'timeindex': 3,
      'value': 69
    }, {
      'timeindex': 4,
      'value': 42
    }, {
      'timeindex': 5,
      'value': 134
    }, {
      'timeindex': 6,
      'value': 65
    }, {
      'timeindex': 7,
      'value': 130
    }, {
      'timeindex': 8,
      'value': 69
    }, {
      'timeindex': 9,
      'value': 144
    }, {
      'timeindex': 10,
      'value': 83
    }, {
      'timeindex': 11,
      'value': 61
    }, {
      'timeindex': 12,
      'value': 82
    }, {
      'timeindex': 13,
      'value': 40
    }, {
      'timeindex': 14,
      'value': 39
    }, {
      'timeindex': 15,
      'value': 105
    }, {
      'timeindex': 16,
      'value': 86
    }, {
      'timeindex': 17,
      'value': 23
    }, {
      'timeindex': 18,
      'value': 60
    }, {
      'timeindex': 19,
      'value': 55
    }, {
      'timeindex': 20,
      'value': 67
    }],
    sum: 1384,
    status: '成功'
  }, {
    index: 5,
    id: 7362764734,
    times: 19.6,
    trend: [{
      'timeindex': 1,
      'value': 17
    }, {
      'timeindex': 2,
      'value': 84
    }, {
      'timeindex': 3,
      'value': 31
    }, {
      'timeindex': 4,
      'value': 59
    }, {
      'timeindex': 5,
      'value': 69
    }, {
      'timeindex': 6,
      'value': 14
    }, {
      'timeindex': 7,
      'value': 74
    }, {
      'timeindex': 8,
      'value': 56
    }, {
      'timeindex': 9,
      'value': 33
    }, {
      'timeindex': 10,
      'value': 22
    }, {
      'timeindex': 11,
      'value': 79
    }, {
      'timeindex': 12,
      'value': 92
    }, {
      'timeindex': 13,
      'value': 11
    }, {
      'timeindex': 14,
      'value': 9
    }, {
      'timeindex': 15,
      'value': 87
    }, {
      'timeindex': 16,
      'value': 26
    }, {
      'timeindex': 17,
      'value': 29
    }, {
      'timeindex': 18,
      'value': 87
    }, {
      'timeindex': 19,
      'value': 74
    }, {
      'timeindex': 20,
      'value': 89
    }],
    sum: 1042,
    status: '异常'
  }];
  //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 $index = $('<td class="g2-table-column g2-table-column-index">' + d.index + '</td>');
    $tr.append($index);
    //id
    var $id = $('<td class="g2-table-column">' + d.id + '</td>');
    $tr.append($id);
    //time
    var timeID = 'bar-chart-' + index;
    var $time = $('<td class="g2-table-column"><div class="chartContainer" id="' + timeID + '"></div></td>');
    $tr.append($time);
    createSingleBarChart(timeID, [{
      value: d.times
    }]);
    //data
    var dataID = 'line-chart-' + index;
    var $data = $('<td class="g2-table-column"><div class="chartContainer" id="' + dataID + '"></div></td>');
    $tr.append($data);
    createMiniLineChart(dataID, d.trend, d.sum);
    //状态
    var Class = getStatusType(d.status);
    var $status = $('<td class="g2-table-column g2-table-column-index' + Class + '"><li><span>' + d.status + '</span></li></td>');
    $tr.append($status);
  });

function getStatusType(s) {
    if (s === '进行中') return ' in-processing';
    if (s === '未开始') return ' before-start';
    if (s === '失败') return ' fail';
    if (s === '成功') return ' sucess';
    if (s === '异常') return ' abnormal';
  }
</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>
<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: 30px;
            font-size: 12px;
        }
        .th-index {
            width: 10%;
        }
        .th-id {
            width: 15%;
        }
        .th-time {
            width: 20%;
        }
        .th-status {
            width: 20%;
        }
        .g2-table-row {
            height: 30px;
            vertical-align: middle;
            border-bottom-style: solid;
            border-bottom-width: 1px;
            border-bottom-color: #e8e8e8;
        }
        .g2-table-column {
            font-size: 12px;
            color: #8c8c8c;
            padding: 15px;
            text-align: center
        }
        .before-start {
            color: #bfbfbf;
        }
        .in-processing {
            color: #1890ff;
        }
        .fail {
            color: #f5222d;
        }
        .sucess {
            color: #52c41a;
        }
        .abnormal {
            color: #faad14;
        }
        li {
            font-size: 12px;
        }
        li span {
            color: #8c8c8c;
        }
        .g2-guide-html {
            width: 50px;
            height: 30px;
            vertical-align: middle;
            line-height: 0.8
        }
        .g2-guide-html .title {
            font-size: 12px;
            color: #8c8c8c;
            font-weight: 300;
        }
        .g2-guide-html .value {
            font-size: 14px;
            color: #000;
            font-weight: bold;
        }
</style>

<table class="g2-table">
        
        <thead class="g2-thead">
            <tr>
                <th class="th-index">序号</th>
                <th class="th-id">服务器 ID</th>
                <th class="th-time">服务调用次数</th>
                <th>服务调用趋势</th>
                <th class="th-status">状态</th>
            </tr>
        </thead>
        
        <tbody>
        </tbody>
    </table>
<script>
  var data = [{
    index: 1,
    id: 723826463,
    times: 29.6,
    trend: [{
      'timeindex': 1,
      'value': 721
    }, {
      'timeindex': 2,
      'value': 327
    }, {
      'timeindex': 3,
      'value': 982
    }, {
      'timeindex': 4,
      'value': 735
    }, {
      'timeindex': 5,
      'value': 67
    }, {
      'timeindex': 6,
      'value': 123
    }, {
      'timeindex': 7,
      'value': 167
    }, {
      'timeindex': 8,
      'value': 403
    }, {
      'timeindex': 9,
      'value': 741
    }, {
      'timeindex': 10,
      'value': 114
    }, {
      'timeindex': 11,
      'value': 171
    }, {
      'timeindex': 12,
      'value': 330
    }, {
      'timeindex': 13,
      'value': 964
    }, {
      'timeindex': 14,
      'value': 835
    }, {
      'timeindex': 15,
      'value': 12
    }, {
      'timeindex': 16,
      'value': 349
    }, {
      'timeindex': 17,
      'value': 601
    }, {
      'timeindex': 18,
      'value': 230
    }, {
      'timeindex': 19,
      'value': 567
    }, {
      'timeindex': 20,
      'value': 135
    }],
    sum: 8574,
    status: '进行中'
  }, {
    index: 2,
    id: 89584746,
    times: 1.6,
    trend: [{
      'timeindex': 1,
      'value': 90
    }, {
      'timeindex': 2,
      'value': 63
    }, {
      'timeindex': 3,
      'value': 85
    }, {
      'timeindex': 4,
      'value': 43
    }, {
      'timeindex': 5,
      'value': 85
    }, {
      'timeindex': 6,
      'value': 21
    }, {
      'timeindex': 7,
      'value': 24
    }, {
      'timeindex': 8,
      'value': 75
    }, {
      'timeindex': 9,
      'value': 73
    }, {
      'timeindex': 10,
      'value': 82
    }, {
      'timeindex': 11,
      'value': 57
    }, {
      'timeindex': 12,
      'value': 44
    }, {
      'timeindex': 13,
      'value': 35
    }, {
      'timeindex': 14,
      'value': 57
    }, {
      'timeindex': 15,
      'value': 39
    }, {
      'timeindex': 16,
      'value': 45
    }, {
      'timeindex': 17,
      'value': 52
    }, {
      'timeindex': 18,
      'value': 75
    }, {
      'timeindex': 19,
      'value': 35
    }, {
      'timeindex': 20,
      'value': 30
    }],
    sum: 1100,
    status: '未开始'
  }, {
    index: 3,
    id: 90318249,
    times: 10.4,
    trend: [{
      'timeindex': 1,
      'value': 19
    }, {
      'timeindex': 2,
      'value': 37
    }, {
      'timeindex': 3,
      'value': 33
    }, {
      'timeindex': 4,
      'value': 40
    }, {
      'timeindex': 5,
      'value': 25
    }, {
      'timeindex': 6,
      'value': 10
    }, {
      'timeindex': 7,
      'value': 44
    }, {
      'timeindex': 8,
      'value': 31
    }, {
      'timeindex': 9,
      'value': 25
    }, {
      'timeindex': 10,
      'value': 39
    }, {
      'timeindex': 11,
      'value': 34
    }, {
      'timeindex': 12,
      'value': 21
    }, {
      'timeindex': 13,
      'value': 46
    }, {
      'timeindex': 14,
      'value': 33
    }, {
      'timeindex': 15,
      'value': 47
    }, {
      'timeindex': 16,
      'value': 24
    }, {
      'timeindex': 17,
      'value': 11
    }, {
      'timeindex': 18,
      'value': 24
    }, {
      'timeindex': 19,
      'value': 48
    }, {
      'timeindex': 20,
      'value': 34
    }],
    sum: 625,
    status: '失败'
  }, {
    index: 4,
    id: 983927827,
    times: 17.8,
    trend: [{
      'timeindex': 1,
      'value': 13
    }, {
      'timeindex': 2,
      'value': 17
    }, {
      'timeindex': 3,
      'value': 69
    }, {
      'timeindex': 4,
      'value': 42
    }, {
      'timeindex': 5,
      'value': 134
    }, {
      'timeindex': 6,
      'value': 65
    }, {
      'timeindex': 7,
      'value': 130
    }, {
      'timeindex': 8,
      'value': 69
    }, {
      'timeindex': 9,
      'value': 144
    }, {
      'timeindex': 10,
      'value': 83
    }, {
      'timeindex': 11,
      'value': 61
    }, {
      'timeindex': 12,
      'value': 82
    }, {
      'timeindex': 13,
      'value': 40
    }, {
      'timeindex': 14,
      'value': 39
    }, {
      'timeindex': 15,
      'value': 105
    }, {
      'timeindex': 16,
      'value': 86
    }, {
      'timeindex': 17,
      'value': 23
    }, {
      'timeindex': 18,
      'value': 60
    }, {
      'timeindex': 19,
      'value': 55
    }, {
      'timeindex': 20,
      'value': 67
    }],
    sum: 1384,
    status: '成功'
  }, {
    index: 5,
    id: 7362764734,
    times: 19.6,
    trend: [{
      'timeindex': 1,
      'value': 17
    }, {
      'timeindex': 2,
      'value': 84
    }, {
      'timeindex': 3,
      'value': 31
    }, {
      'timeindex': 4,
      'value': 59
    }, {
      'timeindex': 5,
      'value': 69
    }, {
      'timeindex': 6,
      'value': 14
    }, {
      'timeindex': 7,
      'value': 74
    }, {
      'timeindex': 8,
      'value': 56
    }, {
      'timeindex': 9,
      'value': 33
    }, {
      'timeindex': 10,
      'value': 22
    }, {
      'timeindex': 11,
      'value': 79
    }, {
      'timeindex': 12,
      'value': 92
    }, {
      'timeindex': 13,
      'value': 11
    }, {
      'timeindex': 14,
      'value': 9
    }, {
      'timeindex': 15,
      'value': 87
    }, {
      'timeindex': 16,
      'value': 26
    }, {
      'timeindex': 17,
      'value': 29
    }, {
      'timeindex': 18,
      'value': 87
    }, {
      'timeindex': 19,
      'value': 74
    }, {
      'timeindex': 20,
      'value': 89
    }],
    sum: 1042,
    status: '异常'
  }];
  //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 $index = $('<td class="g2-table-column g2-table-column-index">' + d.index + '</td>');
    $tr.append($index);
    //id
    var $id = $('<td class="g2-table-column">' + d.id + '</td>');
    $tr.append($id);
    //time
    var timeID = 'bar-chart-' + index;
    var $time = $('<td class="g2-table-column"><div class="chartContainer" id="' + timeID + '"></div></td>');
    $tr.append($time);
    createSingleBarChart(timeID, [{
      value: d.times
    }]);
    //data
    var dataID = 'line-chart-' + index;
    var $data = $('<td class="g2-table-column"><div class="chartContainer" id="' + dataID + '"></div></td>');
    $tr.append($data);
    createMiniLineChart(dataID, d.trend, d.sum);
    //状态
    var Class = getStatusType(d.status);
    var $status = $('<td class="g2-table-column g2-table-column-index' + Class + '"><li><span>' + d.status + '</span></li></td>');
    $tr.append($status);
  });

图表用法

数据来源：demo数据

折线图

条形图

柱状图

饼图

点图

面积图

箱形图

烛形图

热力图

仪表盘

漏斗图

地图

雷达图

分面

关系图

其他图表

组件使用

图表用法

相关链接