历年居民人均支出排行

多折线图

历年居民人均支出排行

<!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-legend {
        width: 250px !important;
        height: 100%;
        font-size: 14px !important;
        color: #595959 !important;
    }

.g2-legend-title {
        color: #5a5a5a;
        font-size: 14px;
    }

.g2-legend-list {
        margin-top: 10px !important
    }

.g2-legend-list-item {
        width: 100%;
        height: 30px;
        margin-bottom: 10px
    }

.legend-item-name {
        min-width:60px;
        height: 100%;
        float: left;
        margin-left: 8px;
        font-size: 10px;
        color: #595959;
        text-align: left;
    }

.legend-item-name:after {
        display: inline-block;
        width: 0;
        height: 100%;
        vertical-align: middle;
        content: '';
    }

.legend-item-percent {
        min-width: 30px;
        height: 100%;
        float: left;
        margin-left: 10px;
        font-size: 10px;
        color: #949494;
        text-align: left;
    }

.legend-item-percent:after {
        display: inline-block;
        width: 0;
        height: 100%;
        vertical-align: middle;
        content: '';
    }

.legend-item-value {
        min-width: 80px;
        height: 100%;
        float: left;
        margin-left: 10px;
        font-size: 10px;
        color: #595959;
        text-align: left;
    }

.legend-item-value:after {
        display: inline-block;
        width: 0;
        height: 100%;
        vertical-align: middle;
        content: '';
    }
</style>
<script>
  var data = [{
    year: 2013,
    type: '食品烟酒',
    value: 4127
  }, {
    year: 2013,
    type: '衣着',
    value: 1027
  }, {
    year: 2013,
    type: '居住',
    value: 2999
  }, {
    year: 2013,
    type: '生活用品',
    value: 806
  }, {
    year: 2013,
    type: '交通通行',
    value: 1627
  }, {
    year: 2013,
    type: '文教娱',
    value: 1398
  }, {
    year: 2013,
    type: '医疗保健',
    value: 912
  }, {
    year: 2013,
    type: '其他',
    value: 325
  }, {
    year: 2014,
    type: '食品烟酒',
    value: 4494
  }, {
    year: 2014,
    type: '衣着',
    value: 1099
  }, {
    year: 2014,
    type: '居住',
    value: 3201
  }, {
    year: 2014,
    type: '生活用品',
    value: 890
  }, {
    year: 2014,
    type: '交通通行',
    value: 1869
  }, {
    year: 2014,
    type: '文教娱',
    value: 1536
  }, {
    year: 2014,
    type: '医疗保健',
    value: 1045
  }, {
    year: 2014,
    type: '其他',
    value: 358
  }, {
    year: 2015,
    type: '食品烟酒',
    value: 4814
  }, {
    year: 2015,
    type: '衣着',
    value: 1164
  }, {
    year: 2015,
    type: '居住',
    value: 3419
  }, {
    year: 2015,
    type: '生活用品',
    value: 951
  }, {
    year: 2015,
    type: '交通通行',
    value: 2087
  }, {
    year: 2015,
    type: '文教娱',
    value: 1723
  }, {
    year: 2015,
    type: '医疗保健',
    value: 1165
  }, {
    year: 2015,
    type: '其他',
    value: 389
  }, {
    year: 2016,
    type: '食品烟酒',
    value: 5151
  }, {
    year: 2016,
    type: '衣着',
    value: 1203
  }, {
    year: 2016,
    type: '居住',
    value: 3746
  }, {
    year: 2016,
    type: '生活用品',
    value: 1044
  }, {
    year: 2016,
    type: '交通通行',
    value: 2338
  }, {
    year: 2016,
    type: '文教娱',
    value: 1915
  }, {
    year: 2016,
    type: '医疗保健',
    value: 1307
  }, {
    year: 2016,
    type: '其他',
    value: 406
  }];
  var yearSum = getYearsum();
  var yearPercent = getYearPercent(yearSum);
  var chart = new G2.Chart({
    container: 'mountNode',
    forceFit: true,
    height: window.innerHeight,
    padding: [20, 210, 30, 50]
  });
  chart.source(data, {
    year: {
      type: 'timeCat',
      range: [0, 1]
    }
  });
  chart.axis('year', {
    label: {
      textStyle: {
        fill: '#aaaaaa'
      }
    }
  });
  chart.axis('value', {
    label: {
      textStyle: {
        fill: '#aaaaaa'
      },
      formatter: function formatter(text) {
        return text.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
      }
    }
  });
  chart.legend({
    useHtml: true,
    position: 'right',
    reactive: true,
    legendStyle: {
      MARKER_CLASS: {
        width: '18px',
        height: '18px',
        lineHeight: '18px',
        borderRadius: '50px',
        display: 'inline-block',
        marginRight: '4px',
        textAlign: 'center',
        fontZize: '10px',
        marginTop: '3px',
        color: 'white',
        float: 'left',
        borderStyle: 'solid',
        borderWidth: '1px',
        borderColor: '#ccc'
      }
    },
    containerTpl: '<div class="g2-legend">2016 年支出排行<div class="g2-legend-list"></div></div>',
    itemTpl: function itemTpl(value, color, checked, index) {
      var markerDom = '<div class="g2-legend-marker" style="background-color:' + color + '">' + (index + 1) + '</div>';
      var nameDom = '<div class="legend-item-name">' + value + '</div>';
      var percentDom = '<div class="legend-item-percent">' + yearPercent[value].percent.toFixed(2) + '</div>';
      var valueDom = '<div class="legend-item-value">' + yearPercent[value].value + '</div>';
      return '<div class="g2-legend-list-item" data-value="' + value + '">' + markerDom + nameDom + percentDom + valueDom + '</div>';
    }
  });
  chart.line().position('year*value').color('type', ['#ff4d4f', '#ff7a45', '#ffa940', '#facc14', '#bae637', '#73d13d', '#36cfc9', '#40a9ff']);
  chart.render();

function getYearsum() {
    var sum = 0;
    for (var i = 0; i < data.length; i++) {
      var d = data[i];
      if (d.year === 2016) {
        sum += d.value;
      }
    }
    return sum;
  }

<!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-legend {
        width: 250px !important;
        height: 100%;
        font-size: 14px !important;
        color: #595959 !important;
    }

.g2-legend-title {
        color: #5a5a5a;
        font-size: 14px;
    }

.g2-legend-list {
        margin-top: 10px !important
    }

.g2-legend-list-item {
        width: 100%;
        height: 30px;
        margin-bottom: 10px
    }

.legend-item-name {
        min-width:60px;
        height: 100%;
        float: left;
        margin-left: 8px;
        font-size: 10px;
        color: #595959;
        text-align: left;
    }

.legend-item-name:after {
        display: inline-block;
        width: 0;
        height: 100%;
        vertical-align: middle;
        content: '';
    }

.legend-item-percent {
        min-width: 30px;
        height: 100%;
        float: left;
        margin-left: 10px;
        font-size: 10px;
        color: #949494;
        text-align: left;
    }

.legend-item-percent:after {
        display: inline-block;
        width: 0;
        height: 100%;
        vertical-align: middle;
        content: '';
    }

.legend-item-value {
        min-width: 80px;
        height: 100%;
        float: left;
        margin-left: 10px;
        font-size: 10px;
        color: #595959;
        text-align: left;
    }

function getYearsum() {
    var sum = 0;
    for (var i = 0; i < data.length; i++) {
      var d = data[i];
      if (d.year === 2016) {
        sum += d.value;
      }
    }
    return sum;
  }

图表用法

数据来源：国家统计局

折线图

条形图

柱状图

饼图

点图

面积图

箱形图

烛形图

热力图

仪表盘

漏斗图

地图

雷达图

分面

关系图

其他图表

组件使用

图表用法

相关链接