安装G2包
npm install @antv/g2 --save
在使用的组件中import
import * as G2 from '@antv/g2';
HTML
<div id="barChartContainer" ></div>
TS
import { Component, OnInit, Input, ElementRef } from "@angular/core";
import * as G2 from '@antv/g2';
@Component({
selector: 'barChart-component',
templateUrl: './bar-chart.component.html',
})
export class BarChartComponent implements OnInit {
chartOption: any;
private chart: G2.Chart;
constructor(private el: ElementRef) {
}
ngOnInit(): void {
this.chartOption = [
{ genre: '肺部', sold: 275 },
{ genre: '肾脏', sold: 115 },
{ genre: '心脏', sold: 120 },
{ genre: '肝脏', sold: 350 },
{ genre: '胃部', sold: 150 }
];
const chartContainer = this.el.nativeElement.querySelector('#barChartContainer');
var data = this.chartOption;
this.chart = new G2.Chart({
container: chartContainer, //Sets chart container
width: 600, // 指定图表宽度
height: 400 // 指定图表高度
});
this.chart.source(data);
this.chart.interval().position('genre*sold').color('genre');
// 渲染图表
this.chart.render();
}
}
效果图
在这里插入图片描述
网友评论