产品类别销售额对比

基础柱状图

产品类别销售额对比

该图展示了产品按照类别分组的销售情况。

<!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>
<script>
  var data = [{
    type: '书架',
    value: 48000,
    cat: '家具'
  }, {
    type: '椅子',
    value: 36000,
    cat: '家具'
  }, {
    type: '桌子',
    value: 9000,
    cat: '家具'
  }, {
    type: '复印机',
    value: 30500,
    cat: '技术'
  }, {
    type: '电话',
    value: 22000,
    cat: '技术'
  }, {
    type: '配件',
    value: 12000,
    cat: '技术'
  }, {
    type: '纸张',
    value: 25000,
    cat: '办公用品'
  }, {
    type: '笔',
    value: 17000,
    cat: '办公用品'
  }, {
    type: '美术',
    value: 8000,
    cat: '办公用品'
  }, {
    type: '收纳',
    value: 2000,
    cat: '办公用品'
  }];

chart.axis('value', {
    label: {
      textStyle: {
        fill: '#aaaaaa'
      },
      formatter: function formatter(text) {
        return text.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
      }
    },
    title: {
      offset: 70
    }
  });
  chart.legend(false);
  chart.interval().position('type*value').color('cat').opacity(1);
  //guide
  chart.guide().text({
    top: true,
    position: ['椅子', 'min'],
    content: '家具',
    style: {
      fill: '#c0c0c0', // 文本颜色
      fontSize: 12, // 文本大小
      fontWeight: '300',
      textAlign: 'center'
    },
    offsetY: 40
  });
  chart.guide().text({
    top: true,
    position: ['电话', 'min'],
    content: '技术',
    style: {
      fill: '#c0c0c0', // 文本颜色
      fontSize: 12, // 文本大小
      fontWeight: '300',
      textAlign: 'center'
    },
    offsetY: 40
  });
  chart.guide().text({
    top: true,
    position: ['笔', 'min'],
    content: '办公用品',
    style: {
      fill: '#c0c0c0', // 文本颜色
      fontSize: 12, // 文本大小
      fontWeight: '300'
    },
    offsetY: 40,
    offsetX: 20
  });
  chart.guide().line({
    start: ['30%', '100%'],
    end: ['30%', '120%'],
    lineStyle: {
      stroke: '#d9d9d9',
      lineDash: [0, 0]
    }
  });
  chart.guide().line({
    start: ['60%', '100%'],
    end: ['60%', '120%'],
    lineStyle: {
      stroke: '#d9d9d9',
      lineDash: [0, 0]
    }
  });
  chart.render();
</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>
<script>
  var data = [{
    type: '书架',
    value: 48000,
    cat: '家具'
  }, {
    type: '椅子',
    value: 36000,
    cat: '家具'
  }, {
    type: '桌子',
    value: 9000,
    cat: '家具'
  }, {
    type: '复印机',
    value: 30500,
    cat: '技术'
  }, {
    type: '电话',
    value: 22000,
    cat: '技术'
  }, {
    type: '配件',
    value: 12000,
    cat: '技术'
  }, {
    type: '纸张',
    value: 25000,
    cat: '办公用品'
  }, {
    type: '笔',
    value: 17000,
    cat: '办公用品'
  }, {
    type: '美术',
    value: 8000,
    cat: '办公用品'
  }, {
    type: '收纳',
    value: 2000,
    cat: '办公用品'
  }];

图表简介

该图展示了产品按照类别分组的销售情况。

图表用法

数据来源：demo数据

折线图

条形图

柱状图

饼图

点图

面积图

箱形图

烛形图

热力图

仪表盘

漏斗图

地图

雷达图

分面

关系图

其他图表

组件使用

图表简介

图表用法

相关链接