跟大家分享下基础饼图的绘制
import 'zone.js';
import 'reflect-metadata';
import { Component, enableProdMode, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ViserModule } from 'viser-ng';
const DataSet = require('@antv/data-set');
const sourceData = [
{ item: '事例一', count: 40 },
{ item: '事例二', count: 21 },
{ item: '事例三', count: 17 },
{ item: '事例四', count: 13 },
{ item: '事例五', count: 9 }
];
const scale = [{
dataKey: 'percent',
min: 0,
formatter: '.0%',
}];
const dv = new DataSet.View().source(sourceData);
dv.transform({
type: 'percent',
field: 'count',
dimension: 'item',
as: 'percent'
});
const data = dv.rows;
@Component({
selector: '#mount',
template: `
<div>
<v-chart [forceFit]="forceFit" [height]="height" [data]="data" [scale]="scale">
<v-tooltip></v-tooltip>
<v-axis></v-axis>
<v-coord type="theta"></v-coord>
<v-pie position="percent" color="item" [style]="pieStyle" [label]="labelConfig"></v-pie>
<v-legend dataKey="item"></v-legend>
</v-chart>
</div>
`
})
class AppComponent {
forceFit: boolean = true;
height: number = 400;
data = data;
scale = scale;
pieStyle = {
stroke: "#fff",
lineWidth: 1
};
labelConfig = ['percent', {
formatter: (val, item) => {
return item.point.item + ': ' + val;
},
}];
}
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ViserModule
],
providers: [],
bootstrap: [
AppComponent
]
})
export default class AppModule { }