How to define the shape of the picture?

I need to draw a pie chart with a legend, and I want the legend items to be in the shape of a sector. How can I achieve this? Also, how can I set the position of the legend?

The shape of the legend item can be configured through legends.item.shape.style.symbolType. The content of symbolType can be a vchart built-in shape, such as ‘rect’, ‘circle’, etc. At the same time, users can also set a custom svg path to achieve any shape.

 legends: { visible: true, item: { shape: { style: { symbolType: 'rect' // symbolType: 'M -1 1 L 0 0 L 1 1' } } } }

Enter fullscreen mode
Exit fullscreen mode

The position of the legend is configured by legends.orient , and the optional positions include: left, right, top, bottom:

 legends: { visible: true, orient: 'right' }

Enter fullscreen mode
Exit fullscreen mode

const data = [ { value: 10, category: 'One' }, { value: 9, category: 'Two' }, { value: 6, category: 'Three' }, { value: 5, category: 'Four' }, { value: 4, category: 'Five' }, { value: 3, category: 'Six' }, { value: 1, category: 'Seven' }
];
let totalValue = 0;
data.forEach(obj => (totalValue += obj.value));
const map = {};
data.forEach(obj => { map[obj.category] = `${((obj.value / totalValue) * 100).toFixed(2)}%`;
}); const spec = { type: 'pie', data: [ { id: 'pie', values: data } ], categoryField: 'category', valueField: 'value', legends: { visible: true, orient: 'right', item: { shape: { style: { symbolType: 'rect' } } } }
}; const vchart = new VChart(spec, { dom: CONTAINER_ID }); vchart.renderSync();
// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;