饼图图例联动在data是单个object时，鼠标悬浮在图形上会出现闪烁bug #3334

<!-- Thank you for reporting an issue. 1. It's RECOMMENDED to submit PR for typo or tiny bug fix. 2. If this's a FEATURE request, please provide: details, pseudo codes if necessary. 3. If this's a BUG, please provide: course repetition, error log and configuration. Fill in as much of the template below as you're able. 4. It will be nice to use to provide a CodePen Link which can reproduce the issue, we provide a CodePen template g2-github-issue. 感谢您向我们反馈问题。 1. 提交问题前，请先阅读 https://antv.alipay.com/zh-cn/g2/3.x/index.html 上的文档。 2. 我们推荐如果是小问题（错别字修改，小的 bug fix）直接提交 PR。 3. 如果是一个新需求，请提供：详细需求描述，最好是有伪代码实现。 4. 如果是一个 BUG，请提供：复现步骤，错误日志以及相关配置，并尽量填写下面的模板中的条目。 5. 如果可以，请提供尽可能精简的 CodePen 链接，可使用 CodePen 模板 https://codepen.io/leungwensen/pen/WXJgox，方便我们排查问题。 6. 扩展阅读：如何向开源项目提交无法解答的问题 -->

• G2 Version: 4.2.2
• Platform:
• Mini Showcase(like screenshots):
• CodePen Link: https://codesandbox.io/s/red-resonance-f785f?file=/index.ts

<!-- Enter your issue details below this comment. -->

config example:

import { Chart } from '@antv/g2';

const data = [
  { item: '事例一', count: 40, percent: 0.4 }, // 重点，只保留1个对象数据
  // { item: '事例二', count: 21, percent: 0.21 },
  // { item: '事例三', count: 17, percent: 0.17 },
  // { item: '事例四', count: 13, percent: 0.13 },
  // { item: '事例五', count: 9, percent: 0.09 },
];

const chart = new Chart({
  container: 'container',
  autoFit: true,
  // width: 500,
  height: 500,
});

chart.coordinate('theta', {
  radius: 0.75,
  innerRadius: 0.5,
});

chart.data(data);

chart.scale('percent', {
  formatter: val => {
    val = val * 100 + '%';
    return val;
  },
});

chart.tooltip(false);

// 声明需要进行自定义图例字段： 'item'
chart.legend('item', {
  position: 'right',                                  // 配置图例显示位置
  custom: true,                                       // 关键字段，告诉 G2，要使用自定义的图例
  items: data.map((obj, index) => {
    return {
      name: obj.item,                                 // 对应 itemName
      value: obj.percent,                             // 对应 itemValue
      marker: {
        symbol: 'square',                             // marker 的形状
        style: {
          r: 5,                                       // marker 图形半径
          fill: chart.getTheme().colors10[index],     // marker 颜色，使用默认颜色，同图形对应
        },
      },                                              // marker 配置
    };
  }),
  itemValue: {
    style: {
      fill: '#999',
    },                                               // 配置 itemValue 样式
    formatter: val => `${val * 100}%`                // 格式化 itemValue 内容
  },
});

chart
  .interval()
  .adjust('stack')
  .position('percent')
  .color('item')
  .style({
    fillOpacity: 1,
  })
  .state({
    active: {
      style: element => {
        const shape = element.shape;
        return {
          lineWidth: 10,
          stroke: shape.attr('fill'),
          strokeOpacity: shape.attr('fillOpacity'),
        };
      },
    },
  });

// 移除图例点击过滤交互
chart.removeInteraction('legend-filter');
chart.interaction('element-active');

chart.render();

// 监听 element 上状态的变化来动态更新 Annotation 信息
chart.on('element:statechange', (ev) => {
  const { state, stateStatus, element } = ev.gEvent.originalEvent;

  // 本示例只需要监听 active 的状态变化
  if (state === 'active') {
    const data = element.getData();
    if (stateStatus) {
      // 更新 Annotation
      updateAnnotation(data);
    } else {
      // 隐藏 Annotation
      clearAnnotation();
    }
  }
});

// 绘制 annotation
let lastItem;
function updateAnnotation(data) {
  if (data.item !== lastItem) {
    chart.annotation().clear(true);
    chart
      .annotation()
      .text({
        position: ['50%', '50%'],
        content: data.item,
        style: {
          fontSize: 20,
          fill: '#8c8c8c',
          textAlign: 'center',
        },
        offsetY: -20,
      })
      .text({
        position: ['50%', '50%'],
        content: data.count,
        style: {
          fontSize: 28,
          fill: '#8c8c8c',
          textAlign: 'center',
        },
        offsetX: -10,
        offsetY: 20,
      })
      .text({
        position: ['50%', '50%'],
        content: '台',
        style: {
          fontSize: 20,
          fill: '#8c8c8c',
          textAlign: 'center',
        },
        offsetY: 20,
        offsetX: 20,
      });
    chart.render(true);
    lastItem = data.item;
  }
}

// 清空 annotation
function clearAnnotation() {
  chart.annotation().clear(true);
  chart.render(true);
  lastItem = null;
}

bug：当data里只有一个object时，鼠标浮动在圆环上时会出现闪烁的错位问题，如下图；