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: 'bottom',
    data: items => {
      return new Array(10).fill(0).reduce((res, entry, idx) => {
        items.forEach(item => {
          res.push({
            ...item,
            label: idx === 0 ? item.label : `${item.label}-${idx}`
          });
        });
​
        return res;
      }, []);
    },
    item: {
      value: {
        alignRight: true,
        style: {
          fill: '#333',
          fillOpacity: 0.8,
          fontSize: 10
        },
        state: {
          unselected: {
            fill: '#d8d8d8'
          }
        }
      }
    },
    pager: {
      type: 'scrollbar',
      railStyle: {
        fill: '#ccc',
        cornerRadius: 5,
      },
      visible: false,
      roamScroll: true,
      scrollMask: {
        visible: true,
        gradientStops: [
          { offset: 0, color: 'rgba(255,255,255,1)' },
          { offset: 0.5, color: 'rgba(255,255,255,0.8)' },
          { offset: 1, color: 'rgba(255,255,255,0)' }
        ]
      }
    }
  }
};
​
const vchart = new VChart(spec, { dom: CONTAINER_ID });
​
vchart.on('legendItemHover', e => {
  const hoveredName = e?.value?.data?.label;
  if (hoveredName) {
    vchart.updateState({
      legend_hover_reverse: {
        filter: d => d.type !== hoveredName
      }
    });
  }
});
vchart.on('legendItemUnHover', e => {
  vchart.updateState({
    legend_hover_reverse: {
      filter: d => false
    }
  });
});
​
vchart.renderSync();
​
// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;