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); } }
其他字段定义
html
<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>
效果