Angular2使用G2画图表

安装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();

    }





}

效果图

在这里插入图片描述