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 data= [
  {"year": "1986", "ACME": 162, "Compitor": 42},
  {"year": "1987", "ACME": 134, "Compitor": 54},
  {"year": "1988", "ACME": 116, "Compitor": 26},
  {"year": "1989", "ACME": 122, "Compitor": 32},
  {"year": "1990", "ACME": 178, "Compitor": 68},
  {"year": "1991", "ACME": 144, "Compitor": 54},
  {"year": "1992", "ACME": 125, "Compitor": 35},
  {"year": "1993", "ACME": 176, "Compitor": 66},
  {"year": "1994", "ACME": 156},
  {"year": "1995", "ACME": 195},
  {"year": "1996", "ACME": 215},
  {"year": "1997", "ACME": 176, "Compitor": 36},
  {"year": "1998", "ACME": 167, "Compitor": 47},
  {"year": "1999", "ACME": 142},
  {"year": "2000", "ACME": 117},
  {"year": "2001", "ACME": 113, "Compitor": 23},
  {"year": "2002", "ACME": 132},
  {"year": "2003", "ACME": 146, "Compitor": 46},
  {"year": "2004", "ACME": 169, "Compitor": 59},
  {"year": "2005", "ACME": 184, "Compitor": 44}
];

var Stat = G2.Stat;
var Frame = G2.Frame;
var frame = new Frame(data);
frame = Frame.combinColumns(frame,['ACME','Compitor'],'value','type','year');

var chart = new G2.Chart({
  id: 'c1',
  forceFit: true,
  height: 450
});
chart.source(frame, {
  'value': {
    alias: 'The Share Price in Dollars',
    formatter: function(val) {
      return '$' + val;
    }
  },
  year: {
    range: [0, 1]
  }
});
chart.tooltip({
  crosshairs: true
});
chart.area().position('year*value').color('type').shape('smooth');
chart.line().position('year*value').color('type').size(2).shape('smooth');
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 Stat = G2.Stat;
    const Frame = G2.Frame;
    const Chart = createG2(chart => {
      chart.col('value', {
        alias: 'The Share Price in Dollars',
        formatter: function(val) {
          return '$' + val;
        }
      });
      chart.col('year', {
        range: [0, 1]
      });
      chart.tooltip({
        crosshairs: true
      });
      chart.area().position('year*value').color('type').shape('smooth');
      chart.line().position('year*value').color('type').size(2).shape('smooth');
      chart.render();
    });

const MyComponent = React.createClass({
      getInitialState() {
        const data = [
          {"year": "1986", "ACME": 162, "Compitor": 42},
          {"year": "1987", "ACME": 134, "Compitor": 54},
          {"year": "1988", "ACME": 116, "Compitor": 26},
          {"year": "1989", "ACME": 122, "Compitor": 32},
          {"year": "1990", "ACME": 178, "Compitor": 68},
          {"year": "1991", "ACME": 144, "Compitor": 54},
          {"year": "1992", "ACME": 125, "Compitor": 35},
          {"year": "1993", "ACME": 176, "Compitor": 66},
          {"year": "1994", "ACME": 156},
          {"year": "1995", "ACME": 195},
          {"year": "1996", "ACME": 215},
          {"year": "1997", "ACME": 176, "Compitor": 36},
          {"year": "1998", "ACME": 167, "Compitor": 47},
          {"year": "1999", "ACME": 142},
          {"year": "2000", "ACME": 117},
          {"year": "2001", "ACME": 113, "Compitor": 23},
          {"year": "2002", "ACME": 132},
          {"year": "2003", "ACME": 146, "Compitor": 46},
          {"year": "2004", "ACME": 169, "Compitor": 59},
          {"year": "2005", "ACME": 184, "Compitor": 44}
        ];
        let frame = new Frame(data);
        frame = Frame.combinColumns(frame,['ACME','Compitor'],'value','type','year');
        return {
          data: frame,
          forceFit: true,
          width: 500,
          height: 450
        };
      },
      render() {
        return (
          <div>
            <Chart
              data={this.state.data}
              width={this.state.width}
              height={this.state.height}
              forceFit={this.state.forceFit} />
          </div>
        );
      },
    });
    ReactDOM.render(<MyComponent />, document.getElementById('c1'));
</script>

</body>
    </html>