近期做项目用到图形库,使用了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';
错误消失 ,大功告成。