AntV G2 使用踩坑

近期做项目用到图形库,使用了AntV的G2,按着官方getting start
)来了一发

analysis.component.html

<h2>今年业务量</h2>
<hr />
<div id="c1" style="height:280px;"></div>

analysis.component.ts

import { Component, OnInit } from '@angular/core';
import G2 from '@antv/g2';

@Component({
  selector: 'app-analysis',
  templateUrl: './analysis.component.html',
  styleUrls: ['./analysis.component.css']
})
export class AnalysisComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    const data = [{
      year: '1',
      value: 3
  }, {
      year: '2',
      value: 4
  }, {
      year: '3',
      value: 3.5
  }, {
      year: '4',
      value: 5
  }, {
      year: '5',
      value: 4.9
  }, {
      year: '6',
      value: 6
  }, {
      year: '7',
      value: 7
  }, {
      year: '8',
      value: 9
  }, {
      year: '9',
      value: 13
  }];
    const chart = new G2.Chart({
      container: 'c1',
      forceFit: true,
      height: 320
  });
    chart.source(data);
    chart.scale('value', {
      min: 0
  });
    chart.scale('year', {
      range: [0, 1]
  });
    chart.tooltip({
      crosshairs: {
          type: 'line'
      }
  });
    chart.line().position('year*value');
    chart.point().position('year*value').size(4).shape('circle').style({
      stroke: '#fff',
      lineWidth: 1
  });
    chart.render();
  }

}

效果

效果倒是有了,但编译时报了一个错。

ERROR in src/app/home/analysis/analysis.component.ts(2,8): error TS1192: Module '"D:/Angular/ejgrz/node_modules/@antv/g2/lib/index"' has no default export.

原因就是G2没有default export。所以要用这种:

import * as G2 from '@antv/g2';

错误消失 ,大功告成。