G2 - 双 Y 轴

   <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>双 Y 轴</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 data = [
  {'time': '10:10', 'call': 4, 'waiting': 2, 'people': 2},
  {'time': '10:15', 'call': 2, 'waiting': 6, 'people': 3},
  {'time': '10:20', 'call': 13, 'waiting': 2, 'people': 5},
  {'time': '10:25', 'call': 9, 'waiting': 9, 'people': 1},
  {'time': '10:30', 'call': 5, 'waiting': 2, 'people': 3},
  {'time': '10:35', 'call': 8, 'waiting': 2, 'people': 1},
  {'time': '10:40', 'call': 13, 'waiting': 1, 'people': 2}
];

var Frame = G2.Frame;
var frame = new Frame(data);
frame = Frame.combinColumns(frame, ['call','waiting'],'count','type',['time', 'people']);

var chart = new G2.Chart({
  id: 'c1',
  forceFit: true,
  height: 450
});
chart.source(frame, {
  'count': {alias: '话务量（通）', min: 0},
  'people': {alias: '人数（人）', min: 0}
});
// 去除 X 轴标题
chart.axis('time', {
  title: null
});

chart.legend(false);// 不显示图例
chart.intervalStack().position('time*count').color('type', ['#348cd1', '#43b5d8']); // 绘制层叠柱状图
chart.line().position('time*people').color('#5ed470').size(2).shape('smooth'); // 绘制曲线图
chart.point().position('time*people').color('#5ed470'); // 绘制点图
chart.render();
</script>


      </body>
    </html>
          

双 Y 轴

当两个图层的横轴数据维度相同，纵轴维度不同时，即可绘制双 Y 轴。

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>双 Y 轴</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 => {
      chart.col('count', {alias: '话务量（通）', min: 0});
      chart.col('people', {alias: '人数（人）', min: 0});
      // 去除 X 轴标题
      chart.axis('time', {
        title: null
      });

chart.legend(false);// 不显示图例
      chart.intervalStack().position('time*count').color('type', ['#348cd1', '#43b5d8']); // 绘制层叠柱状图
      chart.line().position('time*people').color('#5ed470').size(2).shape('smooth'); // 绘制曲线图
      chart.point().position('time*people').color('#5ed470'); // 绘制点图
      chart.render();
    });

const MyComponent = React.createClass({
      getInitialState() {
        const data = [
          {'time': '10:10', 'call': 4, 'waiting': 2, 'people': 2},
          {'time': '10:15', 'call': 2, 'waiting': 6, 'people': 3},
          {'time': '10:20', 'call': 13, 'waiting': 2, 'people': 5},
          {'time': '10:25', 'call': 9, 'waiting': 9, 'people': 1},
          {'time': '10:30', 'call': 5, 'waiting': 2, 'people': 3},
          {'time': '10:35', 'call': 8, 'waiting': 2, 'people': 1},
          {'time': '10:40', 'call': 13, 'waiting': 1, 'people': 2}
        ];

const Frame = G2.Frame;
        let frame = new Frame(data);
        frame = Frame.combinColumns(frame, ['call','waiting'],'count','type',['time', 'people']);
        return {
          data: frame,
          forceFit: true,
          height: 450
        };
      },
      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>