VChart icon indicating copy to clipboard operation
VChart copied to clipboard

[Feature] optimize the pie label layout for few label

Open purpose233 opened this issue 1 year ago • 1 comments

What problem does this feature solve?

  • 目前在饼图标签数据较少同时标签内容较大(多行)的情况下,饼图标签的布局效果不佳,需要优化;
  • 并且在顶部以及底部的标签容易由于空间不足而无法显示。

example:

const spec = {
  type: 'pie',
  data: [
    {
      id: 'id0',
      values: [
        { type: 'oxygen', value: '4600.60' },
        { type: 'silicon', value: '27.72' },
        { type: 'aluminum', value: '8.13' },
        { type: 'iron', value: '5' },
        { type: 'calcium', value: '3.63' },
        { type: 'sodium', value: '2.83' },
        { type: 'potassium', value: '2.59' },
        { type: 'others', value: '3.5' }
      ]
    }
  ],
  outerRadius: 0.9,
  valueField: 'value',
  categoryField: 'type',
  label: {
    visible: true,
    style: {
      text: ['aaa', 'aaa', 'aaa', 'aaa', 'aaa']
    }
  },
  tooltip: {
    mark: {
      content: [
        {
          key: datum => datum['type'],
          value: datum => datum['value'] + '%'
        }
      ]
    }
  }
};

const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();

// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;

What does the proposed API look like?

null

purpose233 avatar Dec 05 '24 10:12 purpose233

@purpose233 可以补充一下case

xile611 avatar Dec 05 '24 10:12 xile611