Angular2 G2柱状图简单参数设置

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 {

    @Input() chartOption: any;


    private chart: G2.Chart;

    constructor(private el: ElementRef) {

    }


    ngOnInit(): void {

        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,
            animate: false
        });

        this.chart.source(data);
        this.chart.scale(
            {
                type: {
                    alias: '部位'
                },
                value: {
                    alias: '患者数量（个）'
                }
            }
        );

        //Sets coordinate axis.
        this.chart.axis('type', {
            title: {
                textStyle: {
                    textAlign: 'center',
                    fill: '#cfcfcf'
                }
            },
            line: {
                lineWidth: 1,
                stroke: '#000'
            },
            label: {
                offset: 16,
                textStyle: {
                    fill: '#cfcfcf',
                    fontSize: '11'
                }
            }
        });

        this.chart.axis('value', {
            title: {
                textStyle: {
                    textAlign: 'center',
                    fill: '#cfcfcf'
                }
            },
            line: {
                lineWidth: 1,
                stroke: '#000'
            },
            label: {
                offset: 12,
                textStyle: {
                    fill: '#cfcfcf',
                    fontSize: '11'
                }
            }
        });

        this.chart.interval().position('type*value');

        //  渲染图表
        this.chart.render();

    }





}