全球能源消耗趋势

堆叠面积图

全球能源消耗趋势

能源单位 EJ (Exa-Jules) 为 10 ,CIS 地区指由前苏联大多数共和国组成的进行多边合作的独立国家联合体。

<!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-tooltip {
        position: absolute;
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 3px;
        color: rgb(87, 87, 87);
        font-size: 12px;
        line-height: 20px;
        padding: 10px 10px 6px 10px;
        box-shadow: 0px 0px 10px #aeaeae;
        pointer-events: none;
    }
    .g2-tooltip-list {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    .g2-tooltip-value {
        margin-left: 30px;
        display: inline;
        float: right;
    }
    .g2-tooltip-statistic {
        font-size: 14px;
        padding-bottom: 10px;
        margin-top: 10px;
        list-style-type: none;
    }
    .g2-tooltip-statistic-value {
        font-weight: 'bold';
        display: 'inline-block';
        float: right;
        margin-left: 30px
    }
    #toolbar {
        position: absolute;
        top:0px;
        left: 0px;
        height: 40px;
        width: 100%;
        z-index: 0;
    }
    .toolbox-button {width:60px; height: 27px; border-style: solid; border-color:#d9d9d9; border-width:1px; color:#727272; text-align: center; font-size:12px; float: left; cursor: pointer;}
.toolbox-button:after {
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
    content: '';
}
.button-selected { border-color:#1890ff; color:#1890ff;}
.buttonGroup-left {border-top-left-radius: 5px; border-bottom-left-radius: 5px;}
.buttonGroup-right {border-top-right-radius: 5px; border-bottom-right-radius: 5px;}
</style>
<div id="toolbar"><div class="toolbox-button buttonGroup-left button-selected" data-index="1">绝对值</div><div class="toolbox-button buttonGroup-right" data-index="2">百分比</div></div>
<script>
  var chartType = 1;
  $.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/global-oil-new.json', function(data) {
    var chart = new G2.Chart({
      container: 'mountNode',
      forceFit: true,
      height: window.innerHeight,
      padding: [50, 110, 50, 50]
    });
    var ds = new DataSet();
    var dv = ds.createView().source(data);
    dv.transform({
      type: 'percent',
      field: 'value',
      dimension: 'country',
      groupBy: ['date'],
      as: 'percent'
    });
    chart.source(dv, {
      percent: {
        max: 1.0,
        min: 0.0,
        nice: false,
        formatter: function formatter(value) {
          value = value || 0;
          value = value * 100;
          return parseInt(value);
        }
      }
    });
    chart.scale('date', {
      range: [0, 1],
      tickCount: 10,
      type: 'timeCat'
    });
    chart.tooltip({
      crosshairs: 'y',
      htmlContent: function htmlContent(title, items) {
        var html = '<div class="g2-tooltip">';
        var titleDom = '<div class="g2-tooltip-title" style="margin-bottom: 4px;">' + title + '</div>';
        var listDom = '<ul class="g2-tooltip-list">';
        var sum = 0;
        for (var i = 0; i < items.length; i++) {
          var item = items[i];
          var itemDom = '<li data-index={index}>' + '<span style="background-color:' + item.color + ';width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px;"></span>' + item.name + '<span class="g2-tooltip-value">' + item.value + '</span>' + '</li>';
          listDom += itemDom;
          sum += parseFloat(item.value);
        }
        listDom += '</ul>';
        var sumDom = '<li class="g2-tooltip-statistic">总计：<span class="g2-tooltip-statistic-value">' + sum.toFixed(2) + '</span></li>';
        if (chartType === 1) {
          return html + titleDom + sumDom + listDom + '</div>';
        } else {
          return html + titleDom + listDom + '</div>';
        }
      }
    });
    chart.legend({
      attachLast: true
    });
    chartType1();
    chart.render();
    $('.toolbox-button').click(function(event) {
      var $dom = $(event.target);
      var index = $dom.data().index;
      chartType = index;
      $('.toolbox-button').removeClass('button-selected');
      $dom.addClass('button-selected');
      if (index === 1) {
        chart.clear();
        chartType1();
        chart.repaint();
      } else {
        chart.clear();
        chartType2();
        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>
    .g2-tooltip {
        position: absolute;
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 3px;
        color: rgb(87, 87, 87);
        font-size: 12px;
        line-height: 20px;
        padding: 10px 10px 6px 10px;
        box-shadow: 0px 0px 10px #aeaeae;
        pointer-events: none;
    }
    .g2-tooltip-list {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    .g2-tooltip-value {
        margin-left: 30px;
        display: inline;
        float: right;
    }
    .g2-tooltip-statistic {
        font-size: 14px;
        padding-bottom: 10px;
        margin-top: 10px;
        list-style-type: none;
    }
    .g2-tooltip-statistic-value {
        font-weight: 'bold';
        display: 'inline-block';
        float: right;
        margin-left: 30px
    }
    #toolbar {
        position: absolute;
        top:0px;
        left: 0px;
        height: 40px;
        width: 100%;
        z-index: 0;
    }
    .toolbox-button {width:60px; height: 27px; border-style: solid; border-color:#d9d9d9; border-width:1px; color:#727272; text-align: center; font-size:12px; float: left; cursor: pointer;}
.toolbox-button:after {
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
    content: '';
}
.button-selected { border-color:#1890ff; color:#1890ff;}
.buttonGroup-left {border-top-left-radius: 5px; border-bottom-left-radius: 5px;}
.buttonGroup-right {border-top-right-radius: 5px; border-bottom-right-radius: 5px;}
</style>
<div id="toolbar"><div class="toolbox-button buttonGroup-left button-selected" data-index="1">绝对值</div><div class="toolbox-button buttonGroup-right" data-index="2">百分比</div></div>
<script>
  var chartType = 1;
  $.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/global-oil-new.json', function(data) {
    var chart = new G2.Chart({
      container: 'mountNode',
      forceFit: true,
      height: window.innerHeight,
      padding: [50, 110, 50, 50]
    });
    var ds = new DataSet();
    var dv = ds.createView().source(data);
    dv.transform({
      type: 'percent',
      field: 'value',
      dimension: 'country',
      groupBy: ['date'],
      as: 'percent'
    });
    chart.source(dv, {
      percent: {
        max: 1.0,
        min: 0.0,
        nice: false,
        formatter: function formatter(value) {
          value = value || 0;
          value = value * 100;
          return parseInt(value);
        }
      }
    });
    chart.scale('date', {
      range: [0, 1],
      tickCount: 10,
      type: 'timeCat'
    });
    chart.tooltip({
      crosshairs: 'y',
      htmlContent: function htmlContent(title, items) {
        var html = '<div class="g2-tooltip">';
        var titleDom = '<div class="g2-tooltip-title" style="margin-bottom: 4px;">' + title + '</div>';
        var listDom = '<ul class="g2-tooltip-list">';
        var sum = 0;
        for (var i = 0; i < items.length; i++) {
          var item = items[i];
          var itemDom = '<li data-index={index}>' + '<span style="background-color:' + item.color + ';width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px;"></span>' + item.name + '<span class="g2-tooltip-value">' + item.value + '</span>' + '</li>';
          listDom += itemDom;
          sum += parseFloat(item.value);
        }
        listDom += '</ul>';
        var sumDom = '<li class="g2-tooltip-statistic">总计：<span class="g2-tooltip-statistic-value">' + sum.toFixed(2) + '</span></li>';
        if (chartType === 1) {
          return html + titleDom + sumDom + listDom + '</div>';
        } else {
          return html + titleDom + listDom + '</div>';
        }
      }
    });
    chart.legend({
      attachLast: true
    });
    chartType1();
    chart.render();
    $('.toolbox-button').click(function(event) {
      var $dom = $(event.target);
      var index = $dom.data().index;
      chartType = index;
      $('.toolbox-button').removeClass('button-selected');
      $dom.addClass('button-selected');
      if (index === 1) {
        chart.clear();
        chartType1();
        chart.repaint();
      } else {
        chart.clear();
        chartType2();
        chart.repaint();
      }
    });

设计故事查看更多 >

图表简介

能源单位 EJ (Exa-Jules) 为 10 ,CIS 地区指由前苏联大多数共和国组成的进行多边合作的独立国家联合体。

了解更多

图表用法

数据来源：bp.com

折线图

条形图

柱状图

饼图

点图

面积图

箱形图

烛形图

热力图

仪表盘

漏斗图

地图

雷达图

分面

关系图

其他图表

组件使用

图表简介

图表用法

相关链接