Functional Antvis/F2 wrapper for Angular
npm i ngx-antv-f2 --save
import {F2Module} from 'ngx-antv-f2'
@NgModule({
imports: [
F2Module
]
})<f2-chart>
<f2-source [data]="data" [colDefs]="colDefs"></f2-source>
<f2-legend [config]="legendConfig"></f2-legend>
<f2-tooltip [disabled]="true"></f2-tooltip>
<f2-coord-polar [config]="{transposed: true,radius: 0.85}"></f2-coord-polar>
<f2-axis [disabled]="true"></f2-axis>
<f2-geometry [type]="'interval'"
[position]="'a*percent'"
[color]="['name',['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0']]"
[adjust]="'stack'"
[style]="{lineWidth: 1,stroke: '#fff',lineJoin: 'round',lineCap: 'round'}"
[animate]="{appear: {duration: 1200,easing: 'bounceOut'}}"
></f2-geometry>
</f2-chart>import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-f2-pie-basic',
templateUrl: './f2-pie-basic.component.html',
styleUrls: ['./f2-pie-basic.component.css']
})
export class F2PieBasicComponent implements OnInit {
map = {
'芳华': '40%',
'妖猫传': '20%',
'机器之血': '18%',
'心理罪': '15%',
'寻梦环游记': '5%',
'其他': '2%'
};
data = [{
name: '芳华',
percent: 0.4,
a: '1'
}, {
name: '妖猫传',
percent: 0.2,
a: '1'
}, {
name: '机器之血',
percent: 0.18,
a: '1'
}, {
name: '心理罪',
percent: 0.15,
a: '1'
}, {
name: '寻梦环游记',
percent: 0.05,
a: '1'
}, {
name: '其他',
percent: 0.02,
a: '1'
}];
colDefs = {
percent: {
formatter: function formatter(val) {
return val * 100 + '%';
}
}
};
legendConfig = {
position: 'right',
itemFormatter: (val) => {
return val + ' ' + this.map[val];
}
};
constructor() {
}
ngOnInit() {
}
}<f2-chart [preventRender]="true" (customRender)="customRender($event)"></f2-chart>import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-custom-render-pie-basic',
templateUrl: './custom-render-pie-basic.component.html',
styleUrls: ['./custom-render-pie-basic.component.css']
})
export class CustomRenderPieBasicComponent implements OnInit {
map = {
'芳华': '40%',
'妖猫传': '20%',
'机器之血': '18%',
'心理罪': '15%',
'寻梦环游记': '5%',
'其他': '2%'
};
data = [{
name: '芳华',
percent: 0.4,
a: '1'
}, {
name: '妖猫传',
percent: 0.2,
a: '1'
}, {
name: '机器之血',
percent: 0.18,
a: '1'
}, {
name: '心理罪',
percent: 0.15,
a: '1'
}, {
name: '寻梦环游记',
percent: 0.05,
a: '1'
}, {
name: '其他',
percent: 0.02,
a: '1'
}];
constructor() {
}
ngOnInit() {
}
customRender(chart: any) {
chart.source(this.data, {
percent: {
formatter: function formatter(val) {
return val * 100 + '%';
}
}
});
chart.legend({
position: 'right',
itemFormatter: (val) => {
return val + ' ' + this.map[val];
}
});
chart.tooltip(false);
chart.coord('polar', {
transposed: true,
radius: 0.85
});
chart.axis(false);
chart.interval()
.position('a*percent')
.color('name', ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0'])
.adjust('stack')
.style({
lineWidth: 1,
stroke: '#fff',
lineJoin: 'round',
lineCap: 'round'
})
.animate({
appear: {
duration: 1200,
easing: 'bounceOut'
}
});
chart.render();
}
}The MIT License (see the LICENSE file for the full text)