Skip to content

[Feature] Optimize default pie label layout algorithm #3789

@xiaoluoHe

Description

@xiaoluoHe

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

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions