ng-alain之G2图表

shared.module.ts

• 导入G2

import {G2BarModule} from '@delon/chart/bar';
const DIRECTIVES = [G2BarModule];

方法一

• 先定义G2图表，然后在进行修饰

  dataa = [
        {time: '1951 年', type: '异常', value: 3},
        {time: '1951 年', type: '完成', value: 3},
        {time: '1951 年', type: '3', value: 3},
        {time: '1951 年', type: '4', value: 3},
        {time: '1952 年', type: '异常', value: 5},
        {time: '1952 年', type: '完成', value: 2},
        {time: '1953 年', type: '异常', value: 4},
        {time: '1954 年', type: '完成', value: 4},
        {time: '1955 年', type: '异常', value: 4},
        {time: '1956 年', type: '完成', value: 3},
        {time: '1957 年', type: '异常', value: 2},
    ];

    barChart;

ngAfterViewInit() {

        this.barChart = new G2.Chart({
            container: 'container',
            height: 500,
        });
        this.DrawChat()
    }

DrawChat() {
        this.barChart.source(this.dataa, {
            value: {
                max: 10,
                min: 0,
                nice: true,
            },
        });
        this.barChart.axis('time', {
            label: {
                textStyle: {
                    fill: '#aaaaaa',
                },
            },
            tickLine: {
                alignWithLabel: false,
                length: 0,
            },
        });

        this.barChart.axis('value', false);
        this.barChart.legend({
            position: 'top-center',
        });
        this.barChart.intervalStack().position('time*value').color('type', ['#FA0303', '#3AA1FF'])
            .opacity(1)
            .label('value', val => {
                if (val < 2) {
                    return false;
                }
                return {
                    position: 'middle',
                    offset: 0,
                    textStyle: {
                        fill: '#fff',
                        fontSize: 12,
                        shadowBlur: 2,
                        shadowColor: 'rgba(0, 0, 0, .45)',
                    },
                    formatter: text => {
                        return text;
                    },
                };
            });

        this.barChart.render();
    }

方法二 （推荐）

• G2 DEMO中的代码可直接使用
  DEMO链接

dataa = [
        {time: '1951 年', type: '异常', value: 3},
        {time: '1951 年', type: '完成', value: 3},
        {time: '1951 年', type: '3', value: 3},
        {time: '1951 年', type: '4', value: 3},
        {time: '1952 年', type: '异常', value: 5},
        {time: '1952 年', type: '完成', value: 2},
        {time: '1953 年', type: '异常', value: 4},
        {time: '1954 年', type: '完成', value: 4},
        {time: '1955 年', type: '异常', value: 4},
        {time: '1956 年', type: '完成', value: 3},
        {time: '1957 年', type: '异常', value: 2},
    ];
    
  ngAfterViewInit() {
        this.drawBarChart()
    }
    
drawBarChart() {
        const chart = new G2.Chart({
            container: 'g2_c1',
            width : 1000,
            height : 500
        });

        chart.source(this.dataa);
        chart.interval().position('time*value').color('type', ['#FA0303', '#3AA1FF']).opacity(1)
            .label('value', val => {
                if (val < 2) {
                    return false;
                }
                return {
                    position: 'middle',
                    offset: 0,
                    textStyle: {
                        fill: '#fff',
                        fontSize: 12,
                        shadowBlur: 2,
                        shadowColor: 'rgba(0, 0, 0, .45)',
                    },
                    formatter: text => {
                        return text;
                    },
                };
            });
        chart.render();
    }