olddataset/web/Vchart/pie/chart_0018_pie.html

<div id="chart" style="width:100%;height:520px;"></div>
<script src="https://cdn.jsdelivr.net/npm/@visactor/vchart/build/index.min.js"></script>
<script>
  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,
    layout: 'vertical',
    orient: 'right',
    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
      }
    }
  }
};

const vchart = new VChart.default(spec, { dom: "chart" });

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!




// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;
  // 只要记得：dom 要写成 "chart"
</script>