G2 - 对比漏斗图

             <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>对比漏斗图</title>
<script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
<script src="https://gw.alipayobjects.com/as/g/datavis/g2/2.3.13/index.js"></script>
      </head>
      <body>
          <div id="c1"></div>
 <script>
var expectData = [
  {value: 100, name: '展现'},
  {value: 80, name: '点击'},
  {value: 60, name: '访问'},
  {value: 40, name: '咨询'},
  {value: 20, name: '订单'}
];
var actualData = [
  {value: 80, name: '展现'},
  {value: 50, name: '点击'},
  {value: 30, name: '访问'},
  {value: 10, name: '咨询'},
  {value: 5, name: '订单'}
];
var chart = new G2.Chart({
  id: 'c1',
  forceFit: true,
  height: 450,
  plotCfg: {
    margin: [0, 80]
  }
});

chart.source(expectData, {
  name: {
    formatter: function(val) {
      return '预期' + val;
    }
  }
});
chart.coord('rect').transpose().scale(1,-1);
chart.axis(false);
chart.legend(false);
chart.tooltip({
  title: null
});
chart.intervalSymmetric()
  .position('name*value')
  .color('name')
  .shape('pyramid')
  .label('name')
  .opacity(0.65);
var view = chart.createView();
view.source(actualData, {
  name: {
    formatter: function(val) {
      return '实际' + val;
    }
  }
});
view.coord('rect').transpose().scale(1,-1);
view.axis(false);
view.intervalSymmetric()
  .position('name*value')
  .color('name')
  .shape('pyramid')
  .style({
    lineWidth: 2,
    stroke: '#fff'
  }).animate({
        appear:{
           animation:'zoomIn'
        },
        enter:{
           animation:'fadeIn',
           easing:'easeInQuart'
        }
      });
chart.render();
</script>


      </body>
    </html>
          
        

对比漏斗图

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

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>对比漏斗图</title>
        <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
        <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
        <script src="https://a.alipayobjects.com/g/datavis/g2/2.3.13/g2.js"></script>
        <script src="https://unpkg.com/g2-react@1.2.0/dist/index.js"></script>
        <script src="https://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
      </head>
      <body>
          <div id="c1"></div>
 <script type="text/babel">
    const Chart = createG2(chart => {
      var actualData = [
        {value: 80, name: '展现'},
        {value: 50, name: '点击'},
        {value: 30, name: '访问'},
        {value: 10, name: '咨询'},
        {value: 5, name: '订单'}
      ];
      chart.col('name', {
        formatter: function(val) {
          return '预期' + val;
        }
      });
      chart.coord('rect').transpose().scale(1,-1);
      chart.axis(false);
      chart.legend(false);
      chart.tooltip({
        title: null
      });
      chart.intervalSymmetric()
        .position('name*value')
        .color('name')
        .shape('pyramid')
        .label('name')
        .opacity(0.65);

var view = chart.createView();
      view.source(actualData, {
        name: {
          formatter: function(val) {
            return '实际' + val;
          }
        }
      });
      view.coord('rect').transpose().scale(1,-1);
      view.axis(false);
      view.intervalSymmetric()
        .position('name*value')
        .color('name')
        .shape('pyramid')
        .style({
          lineWidth: 2,
          stroke: '#fff'
        });
      chart.render();
    });

const MyComponent = React.createClass({
      getInitialState() {
        return {
          data: [
            {value: 100, name: '展现'},
            {value: 80, name: '点击'},
            {value: 60, name: '访问'},
            {value: 40, name: '咨询'},
            {value: 20, name: '订单'}
          ],
          forceFit: true,
          width: 500,
          height: 450,
          plotCfg: {
            margin: [0, 80]
          },
        };
      },
      render() {
        return (
          <div>
            <Chart
              data={this.state.data}
              width={this.state.width}
              height={this.state.height}
              plotCfg={this.state.plotCfg}
              forceFit={this.state.forceFit} />
          </div>
        );
      },
    });
    ReactDOM.render(<MyComponent />, document.getElementById('c1'));
</script>

</body>
    </html>