超市品类销售数据

基础柱状图

超市品类销售数据

<!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;
    }
    .g2-tooltip-list {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    .g2-tooltip-value {
        margin-left: 30px;
        display: inline;
        float: right;
    }
    .g2-tooltip-tail {
        background-color: #f9f9f9;
        color: #909090;
        font-size: 12px;
        padding-bottom: 10px;
        margin-top: 10px;
        list-style-type: none;
        text-align: center;
        padding-top: 10px;
        cursor: pointer;
    }
    .left-tool-box{position: absolute; top:0px; left: 0px; width: 40px; height:100%; }
    .left-tool-box .sort-button {width: 70%; height:auto; position: absolute; left:25%; top:30%;}
    .breadcrumb{position:absolute; left:0%; bottom:0%; width: 100%; height: 30px; color: #8c8c8c; font-size: 14px; margin-top:20px; z-index: 1000;}
    .breadcrumb .marker {width: auto; height: 100%; float: left; margin-right: 10px;  cursor: pointer;}
</style>
<div class="breadcrumb"></div>
<div class="left-tool-box"><img class="sort-button" src="/assets/image/g2/demo/sortbar.png"></div>
<script>
  var show_labels = ['办公用品', '家具产品', '技术产品', '容器，箱子', '剪刀，尺子，锯', '办公装饰品', '桌子', '电话通信产品', '电脑配件', '笔、美术用品', '橡皮筋', '标签', '纸张', '办公机器', '书架', '夹子及其配件 ', '家用电器', '信封', '椅子', '复印机、传真机'];
  var sortType = 'positive';
  $.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/company_sales.json', function(filedata) {
    var rollupData = {};
    var tem_fileData = filedata;
    var data = combineData(tem_fileData);
    var chart = new G2.Chart({
      container: 'mountNode',
      forceFit: true,
      height: window.innerHeight,
      padding: [20, 20, 80, 100]
    });
    chart.source(data, {
      value: {
        tickCount: 5
      }
    });
    chart.axis('name', {
      label: {
        textStyle: {
          fill: '#aaaaaa'
        },
        formatter: function formatter(text) {
          if (show_labels.indexOf(text) < 0) {
            return '';
          }
          return text;
        }
      },
      tickLine: {
        alignWithLabel: false,
        length: 0
      }
    });
    chart.axis('value', {
      label: {
        textStyle: {
          fill: '#aaaaaa'
        },
        formatter: function formatter(text) {
          return text.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
        }
      }
    });
    chart.tooltip({
      triggerOn: 'click',
      shared: false,
      crosshairs: false,
      htmlContent: function htmlContent(title, items) {
        var dataType = title;
        var container = '<div class="g2-tooltip">';
        var titleDom = '<div class="g2-tooltip-title" style="margin-bottom: 4px;">' + title + '</div>';
        var listDom = '<ul class="g2-tooltip-list">';
        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;
        }
        listDom += '</ul>';
        var tailDom = '<li class="g2-tooltip-tail" data-dimension="' + dataType + '">点击下钻</li>';
        var childrenLength = 0;
        if (tem_fileData[dataType] && tem_fileData[dataType].hasOwnProperty('children')) {
          childrenLength = Object.keys(tem_fileData[dataType].children).length;
        }
        if (childrenLength > 0) {
          return container + titleDom + listDom + tailDom + '</div>';
        } else {
          return container + titleDom + listDom + '</div>';
        }
      }
    });
    chart.interval().position('name*value').opacity(1);
    chart.render();
    $(document).on('click', '.g2-tooltip-tail', function() {
      var target = $(this)[0];
      drillingDown($(target));
    });

function rollingUp(dimension) {
      var selected = rollupData[dimension];
      var data = combineData(selected);
      chart.source(data);
      chart.repaint();
      delete rollupData[dimension];
      tem_fileData = selected;
    }
    $('.sort-button').click(function() {
      var data = chart.get('data');
      sortType = sortType === 'positive' ? 'negative' : 'positive';
      sortData(data, sortType);
      chart.repaint();
    });
  });

function combineData(data) {
    var output = [];
    for (var key in data) {
      var d = data[key];
      if (d.value > 0) {
        output = output.concat(d);
      }
    }
    return output;
  }

<!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;
    }
    .g2-tooltip-list {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    .g2-tooltip-value {
        margin-left: 30px;
        display: inline;
        float: right;
    }
    .g2-tooltip-tail {
        background-color: #f9f9f9;
        color: #909090;
        font-size: 12px;
        padding-bottom: 10px;
        margin-top: 10px;
        list-style-type: none;
        text-align: center;
        padding-top: 10px;
        cursor: pointer;
    }
    .left-tool-box{position: absolute; top:0px; left: 0px; width: 40px; height:100%; }
    .left-tool-box .sort-button {width: 70%; height:auto; position: absolute; left:25%; top:30%;}
    .breadcrumb{position:absolute; left:0%; bottom:0%; width: 100%; height: 30px; color: #8c8c8c; font-size: 14px; margin-top:20px; z-index: 1000;}
    .breadcrumb .marker {width: auto; height: 100%; float: left; margin-right: 10px;  cursor: pointer;}
</style>
<div class="breadcrumb"></div>
<div class="left-tool-box"><img class="sort-button" src="/assets/image/g2/demo/sortbar.png"></div>
<script>
  var show_labels = ['办公用品', '家具产品', '技术产品', '容器，箱子', '剪刀，尺子，锯', '办公装饰品', '桌子', '电话通信产品', '电脑配件', '笔、美术用品', '橡皮筋', '标签', '纸张', '办公机器', '书架', '夹子及其配件 ', '家用电器', '信封', '椅子', '复印机、传真机'];
  var sortType = 'positive';
  $.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/company_sales.json', function(filedata) {
    var rollupData = {};
    var tem_fileData = filedata;
    var data = combineData(tem_fileData);
    var chart = new G2.Chart({
      container: 'mountNode',
      forceFit: true,
      height: window.innerHeight,
      padding: [20, 20, 80, 100]
    });
    chart.source(data, {
      value: {
        tickCount: 5
      }
    });
    chart.axis('name', {
      label: {
        textStyle: {
          fill: '#aaaaaa'
        },
        formatter: function formatter(text) {
          if (show_labels.indexOf(text) < 0) {
            return '';
          }
          return text;
        }
      },
      tickLine: {
        alignWithLabel: false,
        length: 0
      }
    });
    chart.axis('value', {
      label: {
        textStyle: {
          fill: '#aaaaaa'
        },
        formatter: function formatter(text) {
          return text.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
        }
      }
    });
    chart.tooltip({
      triggerOn: 'click',
      shared: false,
      crosshairs: false,
      htmlContent: function htmlContent(title, items) {
        var dataType = title;
        var container = '<div class="g2-tooltip">';
        var titleDom = '<div class="g2-tooltip-title" style="margin-bottom: 4px;">' + title + '</div>';
        var listDom = '<ul class="g2-tooltip-list">';
        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;
        }
        listDom += '</ul>';
        var tailDom = '<li class="g2-tooltip-tail" data-dimension="' + dataType + '">点击下钻</li>';
        var childrenLength = 0;
        if (tem_fileData[dataType] && tem_fileData[dataType].hasOwnProperty('children')) {
          childrenLength = Object.keys(tem_fileData[dataType].children).length;
        }
        if (childrenLength > 0) {
          return container + titleDom + listDom + tailDom + '</div>';
        } else {
          return container + titleDom + listDom + '</div>';
        }
      }
    });
    chart.interval().position('name*value').opacity(1);
    chart.render();
    $(document).on('click', '.g2-tooltip-tail', function() {
      var target = $(this)[0];
      drillingDown($(target));
    });

function combineData(data) {
    var output = [];
    for (var key in data) {
      var d = data[key];
      if (d.value > 0) {
        output = output.concat(d);
      }
    }
    return output;
  }

图表用法

数据来源： demo数据

折线图

条形图

柱状图

饼图

点图

面积图

箱形图

烛形图

热力图

仪表盘

漏斗图

地图

雷达图

分面

关系图

其他图表

组件使用

图表用法

相关链接