美文网首页
Angular2使用G2画图表

Angular2使用G2画图表

作者: Will_板凳 | 来源:发表于2020-03-09 22:32 被阅读0次

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

    效果图

    在这里插入图片描述

    相关文章

      网友评论

          本文标题:Angular2使用G2画图表

          本文链接:https://www.haomeiwen.com/subject/cwtvdhtx.html