G2 - The Grammar Of Graphics

漏斗图 / 尖底漏斗图

选择主题

源码

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>尖底漏斗图</title>
      <link rel="stylesheet" href="https://os.alipayobjects.com/s/prod/g2/static/doc-b57e62881a0344ecde9e68c4ce312143.css"/>
      
      <script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>

<script src="https://a.alipayobjects.com/g/datavis/g2/2.2.1/g2.js"></script>
    </head>
    <body>
      <div id="c1"></div>
      
      <script>
var data = [
  {name:"General Public", value: 3500},
  {name:"Recongnizes Brand", value: 3124},
  {name:"Social Media Subscriber", value: 1003},
  {name:"Prospect Customer", value: 252},
  {name:"Customer", value: 200},
  {name:"Loyal/Returning Customer", value: 137},
  {name:"Brand Evangelist", value: 50},
];
var Stat = G2.Stat;
var chart = new G2.Chart({
  id: 'c1',
  width: 1000,
  height: 500,
  plotCfg: {
    margin: [80, 200]
  }
});
chart.source(data);
chart.legend('name', {
  position: 'left'
});
chart.coord('rect').transpose().scale(1,-1);
chart.axis(false);
chart.intervalSymmetric().position('name*value').color('name').shape('pyramid');
chart.render();
</script>

</body>
  </html>

<script src="https://a.alipayobjects.com/g/datavis/g2/2.2.1/g2.js"></script>
      <script>
        G2.Global.setTheme('dark');
      </script>
    </head>
    <body>
      <div id="c1"></div>
      <script>
var data = [
  {name:"General Public", value: 3500},
  {name:"Recongnizes Brand", value: 3124},
  {name:"Social Media Subscriber", value: 1003},
  {name:"Prospect Customer", value: 252},
  {name:"Customer", value: 200},
  {name:"Loyal/Returning Customer", value: 137},
  {name:"Brand Evangelist", value: 50},
];
var Stat = G2.Stat;
var chart = new G2.Chart({
  id: 'c1',
  width: 1000,
  height: 500,
  plotCfg: {
    margin: [80, 200]
  }
});
chart.source(data);
chart.legend('name', {
  position: 'left'
});
chart.coord('rect').transpose().scale(1,-1);
chart.axis(false);
chart.intervalSymmetric().position('name*value').color('name').shape('pyramid');
chart.render();
</script>

</body>
  </html>

尖底漏斗图

漏斗图适用于业务流程比较规范、周期长、环节多的单流程单向分析，通过漏斗各环节业务数据的比较能够直观地发现和说明问题所在的环节，进而做出决策。了解更多