嘿，我之前也踩过这个坑！Highcharts 里直接给 labels.items 的 style 加 line-height 确实没效果，这是因为它的 label 是通过 SVG 的 foreignObject 渲染的，对这类 CSS 属性的支持不太友好。不过有几个实用的替代方案，帮你搞定行间距问题：

方法1：用块级元素+外边距控制（最直接） #

把每一行内容用 <span> 或 <div> 包裹，设置 display:block 和 margin-bottom 来控制行间距，这种方式兼容性最好：

labels: {
  items: [{
    html: "<span style='display:block; margin-bottom:10px;'>This is first line of the label</span>" +
          "<span style='display:block; margin-bottom:10px;'>this second line of the label</span>" +
          "<span style='display:block;'>this is third line of the label</span>",
    style: { top: 5, left: 30 }
  }, {
    html: "<span style='display:block; margin-bottom:10px;'>This is first line of the second label</span>" +
          "<span style='display:block; margin-bottom:10px;'>this second line of the second label</span>" +
          "<span style='display:block;'>this is third line of the label</span>",
    style: { top: 60, left: 30 }
  }]
}

你可以根据需要调整 margin-bottom 的值，数值越大行间距就越宽。

方法2：通过图表加载事件修改DOM样式 #

如果不想改 HTML 结构，可以在图表加载完成后，直接操作对应的 label DOM 元素，强制设置行高：

chart: {
  events: {
    load: function() {
      // 遍历所有label元素，统一设置行高
      this.labelItems.forEach(item => {
        item.element.style.lineHeight = "1.8";
        // 如果上面的不生效，试试用padding：
        // item.element.style.paddingBottom = "5px";
      });
    }
  }
},
labels: {
  items: [{
    html: "This is first line of the label<br>this second line of the label<br>this is third line of the label",
    style: { top: 5, left: 30 }
  }, {
    html: "This is first line of the second label<br>this second line of the second label<br>this is third line of the label",
    style: { top: 60, left: 30 }
  }]
}

这个方法的优势是不用修改原有 HTML 内容，适合已经写好大量 label 的场景。

方法3：用自定义CSS类统一管理 #

如果有多个 label 需要统一设置行间距，建议定义一个 CSS 类，然后把 label 内容放在容器里：

/* 先在页面里定义CSS */
.highcharts-custom-label {
  line-height: 1.6 !important;
}

然后在 label 的 html 里引用这个类：

labels: {
  items: [{
    html: "<div class='highcharts-custom-label'>This is first line of the label<br>this second line of the label<br>this is third line of the label</div>",
    style: { top: 5, left: 30 }
  }, {
    html: "<div class='highcharts-custom-label'>This is first line of the second label<br>this second line of the second label<br>this is third line of the label</div>",
    style: { top: 60, left: 30 }
  }]
}

用 !important 是为了覆盖 Highcharts 默认的样式，确保自定义行高生效。

总结一下，最推荐方法1，因为它不需要依赖事件或额外CSS，直接在HTML里就能控制，而且兼容性拉满。

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