Ionic +Angular F2 金字塔图

data: any[] = [
        { action: '浏览网站', pv: 50000, percent: 1 },
        { action: '放入购物车', pv: 35000, percent: 0.7 },
        { action: '生成订单', pv: 25000, percent: 0.5 },
        { action: '支付订单', pv: 15000, percent: 0.3 },
        { action: '完成交易', pv: 8000, percent: 0.16 }
    ];

 ngAfterViewInit(): void {
        this.initChart();
    }
 initChart() {
        this.chart = new F2.Chart({
            id: this.id,
            pixelRatio: window.devicePixelRatio, // 指定分辨率
            height: this.height,
            width: screen.width - 35,
            padding: this.padding,
        });
        this.chart.source(this.data);
        this.chart.axis(true);//true显示坐标系
        this.chart.coord({
            transposed: true
        });
        this.chart.legend(false);//false 不显示图例
        //自定义图表文本显示
        this.data.forEach(i => {
            this.chart.guide().text({
                position(xScale, yScales) {
                    return [i.action, 'median']; // 位置信息 'median'表示显示y轴取y轴值中间值，x轴取对应的值

                },
                content: i.action,
                style:{
                    fill:'white'
                },
                // offsetX:20,
                limitInPlot: true
            }).repaint();
            // this.chart.guide().html({
            //     position: [ '41%', i.percent*19+ 2 +'%'],
            //     alignX: 'left',
            //     alignY: 'bottom',
            //     offsetX: 25,
            //     html: `<div style="flex-direction: row;align-items: center;display: flex;"><div style="height:0.5px;background-color:#999999;width:150px;"></div><div style="margin-left:0px;font-size: 12px;color:#666666;text-align: left;white-space:nowrap;flex-direction: row;align-items: center;display: flex;"><div style="margin-left:10px;padding-right: 0px;width:80px">${i.action}</div></div></div>`,
            //   });
         
        })

        this.chart.interval()
            .position('action*percent')
            .color('action', ['#3b4fb4', '#586edc', '#7e91f0', '#9aa9f6', '#a6b3f7', '#dbe0fa'])
            .adjust('symmetric')
            .shape('pyramid');
        this.chart.render();

    }

ngOnChanges(changes: SimpleChanges): void {
        if (this.chart && this.data.length > 0) {
            this.chart.changeData(this.data);
        }
    }

<ng-container *ngIf="_title; else _titleTpl">
    <h4 class="cl_title">{{_title}}</h4>
</ng-container>
<div style="width: 100%;margin-top: 10px;">
    <div [ngClass]="{chartShow: data && data.length>0 && !loading,chartHidden:!(data && data.length>0 && !loading)}">
        <canvas [id]="id"></canvas>
    </div>
    <div style="position: relative;height: 300px;" *ngIf="(!data || data.length===0) && !loading">
        <ion-img src="assets/images/empty.png" style="width: 45%; height: 45%;position: absolute;left: 26%;top: 20%;">
        </ion-img>
        <ion-label style=" position: absolute;left: 40%; top: 70%; color: #999;font-size: 13px;">暂无数据</ion-label>
    </div>
    <ion-spinner style="height: 300px;" style="position: absolute; left: 46%;" color="secondary" *ngIf="loading"></ion-spinner>
</div>