我来帮你搞定这个环形饼图中间的多行文本样式问题！你之前用<br>拆分文本的方式没法单独控制每行字号，而且居中对齐也没设置到位，试试下面的方案：

核心思路 #

Highcharts的renderer.text()如果直接用<br>换行，没法给每行单独设置样式。我们需要用tspan元素来分别定义每行文本，同时通过设置文本锚点和基线属性实现完全居中。

完整代码实现 #

在图表的load事件里添加以下代码，替换你原来的标题渲染逻辑：

chart: {
  type: 'pie',
  innerSize: '60%', // 保持环形效果
  events: {
    load: function() {
      // 获取饼图中心坐标，加上plotLeft/plotTop确保定位正确
      const center = this.series[0].center;
      const x = center[0] + this.plotLeft;
      const y = center[1] + this.plotTop;
      
      // 创建文本容器，设置整体居中对齐
      const centerText = this.renderer.text('', x, y)
        .attr({
          'text-anchor': 'middle', // 水平居中
          'dominant-baseline': 'middle' // 垂直居中
        })
        .add();
      
      // 添加第一行文本：字号50px，可自定义加粗等样式
      centerText.addTspan('Top')
        .attr({
          'font-size': '50px',
          'font-weight': 'bold',
          'fill': '#333'
        });
      
      // 添加第二行文本：用\n换行，字号25px
      centerText.addTspan('\nBott')
        .attr({
          'font-size': '25px',
          'fill': '#666'
        });
    }
  }
},
// 隐藏默认标题避免重叠
title: {
  text: ''
}

关键细节说明 #

• 居中设置：text-anchor: 'middle'让文本在x轴方向居中，dominant-baseline: 'middle'保证y轴方向垂直居中，两者结合就能让文本完美定位在饼图中心。
• 多行样式控制：通过addTspan()创建独立的文本块，每个tspan可以单独设置字号、颜色、字体粗细等样式，完全满足每行不同的需求。
• 换行方式：用\n实现换行，比<br>更适配Highcharts的文本渲染逻辑，能确保tspan的样式单独生效。

如果需要动态替换文本内容，只需要把'Top'和'Bott'换成对应的变量即可，灵活性拉满！

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