How to define the shape of the picture?

Title

Problem Description

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?

Solution

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'
        }
      }
    }
  }

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

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

Code Example

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;