/**
* A recreation of this demo: https://nivo.rocks/pie/
*/
import { Chart } from '@antv/g2';
const chart = new Chart({
container: 'container',
autoFit: true
// width: 500,
// height: 400,
});
chart.coordinate({ type: 'theta'});
chart
.interval()
.data([
{ id: '分类一', value: 526 },
{ id: '分类二', value: 220 },
{ id: '分类三', value: 325 },
{ id: '分类四', value: 561 },
{ id: '分类五', value: 54 },
{ id: '其他', value: 54 },
])
.transform({ type: 'stackY' })
.encode('y', 'value')
.encode('color', 'id')
.scale('color', {
range: ['#e8c1a0', '#f47560', '#f1e15b', '#e8a838', '#61cdbb'],
})
.label({
position: 'spider',
text: (d) => `${d.id}\n ${d.value}`
})
// .label({
// text: 'value',
// fontWeight: 'bold',
// offset: 14,
// })
// .label({
// text: 'id',
// position: 'spider',
// connectorDistance: 0,
// fontWeight: 'bold',
// textBaseline: 'bottom',
// textAlign: (d) => (['c', 'sass'].includes(d.id) ? 'end' : 'start'),
// dy: -4,
// })
// .style('radius', 4)
// .style('stroke', '#fff')
// .style('lineWidth', 2)
// .animate('enter', { type: 'waveIn' })
// .legend(false);
chart.render();
这个问题我看看哈