Echarts饼图圆心偏移问题

Question

初学Echarts，发现Echarts饼图在数据非常小时，图例中两个数据的圆心没有位于同一个位置。series的center:设置为["50%", "50%"]，最后测试的时候发现了圆心偏移的情况，在数据都较大的情况下饼图展示又没问题。
所以想请教一下，这是Echarts本身的问题，还是代码中的一些属性影响的？

上面两张图可以明显看出中间白色的空隙，第二张图是我鼠标放在图例上，饼图中的黑色部分高亮显示了，我发现圆心似乎不与红色部分的圆心重合。具体使用的数据如下：

上面数据是黑色部分的，下面是红色部分的，左边是具体数值，右边是比例。饼图中的data传入的是左边具体数值的绝对值。

Answer 1

引自免费微信小程序：皆我百晓生

看起来你遇到的问题可能是由于ECharts在处理负数时的默认行为导致的。当饼图中有负数时，ECharts会将负数视为独立的一环，并且可能会影响中心点的计算。解决这个问题的一种方法是手动调整每个扇区的位置，使其在视觉上重合。下面是一个示例代码，展示了如何通过修改startAngle和endAngle属性来实现这个效果：

// 假设你的配置对象名为echartsOption

var option = {
  title: {
    text: '饼图示例'
  },
  tooltip: {},
  legend: {
    data: ['基金资产', '现金余额']
  },
  series: [
    {
      name: '资产分布',
      type: 'pie',
      radius: ['50%', '75%'],
      center: ['50%', '50%'],
      data: [
        { value: -4016976.94, name: '基金资产' }, // 负数值
        { value: 10000.00, name: '现金余额' }   // 正数值
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      label: {
        normal: {
          formatter: '{b}: {c} ({d}%)'
        },
        show: true
      },
      labelLine: {
        show: false
      },
      initAngle: 90, // 设置初始角度
      clockwise: false, // 设置逆时针旋转
      roseType: 'radius', // 使用径向玫瑰图类型
      dataEach: function (params, piece) {
        var total = 0;
        for (var i = 0; i < params.data.length; i++) {
          total += Math.abs(params.data[i].value);
        }

        var startAngle = 0;
        var endAngle = 0;
        if (piece.value > 0) {
          startAngle = 0;
          endAngle = 360 * piece.value / total;
        } else {
          startAngle = -360 * piece.value / total;
          endAngle = 0;
        }
        piece.startAngle = startAngle;
        piece.endAngle = endAngle;
      }
    }
  ]
};

// 初始化图表实例
var myChart = echarts.init(document.getElementById('main'));

// 绘制图表
myChart.setOption(option);

在这个示例中，我们使用了一个自定义的"dataEach"函数来动态计算每个扇区的起始角度（startAngle）和结束角度（endAngle）。这样，无论数据是正数还是负数，它们都会按照正确的角度绘制，从而使圆心重合。

请注意，你需要在HTML文件中有一个id为'main'的div来承载图表，例如：

<div id="main" style="width: 800px;height:600px;"></div>

确保已经引入了ECharts库，可以通过CDN方式引入：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>

这段代码应该能解决你的问题，使饼图的圆心对齐。如果你还有其他疑问，欢迎继续提问。