VChart icon indicating copy to clipboard operation
VChart copied to clipboard

[Feature] Optimize default pie label layout algorithm

Open xiaoluoHe opened this issue 9 months ago • 0 comments

What problem does this feature solve?

目前饼图外部标签的布局算法,会将标签分类到左右半圆分别布局,会导致如下的 badcase。 即右侧看似有很大空间,但是顶部的部分标签依然被隐藏了。 Image

图表配置如下:

const spec = {
  type: 'pie',
  width: 800,
  height: 500,
  data: [
    {
      id: 'id0',
      values: [
        { type: 'Category1', value: 90 },
        { type: 'Category2', value: 20 },
        { type: 'Category3', value: 18 },
        { type: 'Category4', value: 18 },
        { type: 'Category5', value: 16 },
        { type: 'Category6', value: 14 },
        { type: 'Category7', value: 5 },
        { type: 'Category8', value: 1 },
      ]
    }
  ],
  outerRadius: 0.9,
  innerRadius: 0.5,
  padAngle: 0.6,
  valueField: 'value',
  categoryField: 'type',
  pie: {
    style: {
      cornerRadius: 10
    },
    state: {
      hover: {
        outerRadius: 0.85,
        stroke: '#000',
        lineWidth: 1
      },
      selected: {
        outerRadius: 0.85,
        stroke: '#000',
        lineWidth: 1
      }
    }
  },
  legends: {
    visible: true
  },
  label: {
    visible: true,
    formatMethod: (label, data) => {
      return {
        type: 'rich',
        text: [
          {
            text: `${data.value}%\n`,
            fill: 'rgba(0, 0, 0, 0.92)',
            fontSize: 16,
            fontWeight: 500,
            stroke: false
          },
          {
            text: data.type,
            fill: 'rgba(0, 0, 0, 0.55)',
            fontSize: 12,
            fontWeight: 400,
            stroke: false
          }
        ]
      };
    },
    style: {
      wordBreak: 'break-word',
      maxHeight: 50
    }
  },
  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?

none

xiaoluoHe avatar Mar 10 '25 08:03 xiaoluoHe