ngx-antv-f2
Functional Antvis/F2 wrapper for Angular
Demo
Installation
npm i ngx-antv-f2 --save
@
Use
Use template
f2-pie-basic.component.html
f2-pie-basic.component.ts
; @ implements OnInit map = '芳华': '40%' '妖猫传': '20%' '机器之血': '18%' '心理罪': '15%' '寻梦环游记': '5%' '其他': '2%' ; data = name: '芳华' percent: 04 a: '1' name: '妖猫传' percent: 02 a: '1' name: '机器之血' percent: 018 a: '1' name: '心理罪' percent: 015 a: '1' name: '寻梦环游记' percent: 005 a: '1' name: '其他' percent: 002 a: '1' ; colDefs = percent: { return val * 100 + '%'; } ; legendConfig = position: 'right' { return val + ' ' + thismapval; } ; { } { }
custom Render
custom-render-pie-basic.component.html
custom-render-pie-basic.component.ts
; @ implements OnInit map = '芳华': '40%' '妖猫传': '20%' '机器之血': '18%' '心理罪': '15%' '寻梦环游记': '5%' '其他': '2%' ; data = name: '芳华' percent: 04 a: '1' name: '妖猫传' percent: 02 a: '1' name: '机器之血' percent: 018 a: '1' name: '心理罪' percent: 015 a: '1' name: '寻梦环游记' percent: 005 a: '1' name: '其他' percent: 002 a: '1' ; { } { } { chartsourcethisdata percent: { return val * 100 + '%'; } ; chart; chart; chart; chartaxisfalse; chart color'name' '#1890FF' '#13C2C2' '#2FC25B' '#FACC14' '#F04864' '#8543E0' style lineWidth: 1 stroke: '#fff' lineJoin: 'round' lineCap: 'round' ; chart; }
License
The MIT License (see the LICENSE file for the full text)