如何实现ECharts饼图标题与饼图中心联动或计算饼图中心位置？

我有一个默认的ECharts饼图：

按照文档示例设置标题居中后，标题和饼图能完美对齐：

option = {
  title: {
    text: 'A Case of Doughnut Chart',
    left: 'center',
    top: 'center'
  },
  series: [
    {
      type: 'pie',
      data: [
        {
          value: 335,
          name: 'A'
        },
        {
          value: 234,
          name: 'B'
        },
        {
          value: 1548,
          name: 'C'
        }
      ],
      radius: ['40%', '70%'],
      center: ['50%', '50%']
    }
  ]
};

但修改饼图的center参数后，饼图位置改变，标题却停留在原容器中心，两者不再对齐：

请问能不能把标题和饼图关联起来？或者不使用'center'字符串，而是计算出饼图的实际中心位置？我能算出容器的中心，但它和饼图中心不匹配。

有两种可行方式实现标题与饼图中心的绑定对齐：

1. 直接复用饼图的center参数值 #

如果饼图的center是明确设置的固定值（比如['60%', '40%']），直接将标题的left和top设为相同值即可，确保两者中心完全一致：

const pieCenter = ['60%', '40%'];
option = {
  title: {
    text: 'A Case of Doughnut Chart',
    left: pieCenter[0],
    top: pieCenter[1]
  },
  series: [
    {
      type: 'pie',
      center: pieCenter,
      // 其他饼图配置...
    }
  ]
};

2. 通过ECharts实例获取饼图实际坐标 #

如果饼图的center是动态计算或受其他配置影响的，可以通过ECharts的API获取饼图的实际布局坐标，再同步给标题：

// 初始化图表
const chart = echarts.init(document.getElementById('chart'));
chart.setOption(option);

// 获取饼图系列的布局模型
const pieModel = chart.getModel().getSeries()[0];
const { center } = pieModel.coordinateSystem;

// 更新标题位置，center返回的是像素坐标
chart.setOption({
  title: {
    left: `${center[0]}px`,
    top: `${center[1]}px`
  }
});

若容器大小会发生变化，需要在resize事件中重新执行上述计算逻辑，保证标题始终与饼图中心对齐。

内容的提问来源于stack exchange，提问作者Artur