legend: { formatter: function(name) { // 如果是第三项，则在名称后添加换行符 console.log("name",name) if(name === 'JHA') { return name + '\n'; } else { return name; } },请修改这段代码，这段代码只能让JHA往上移动，我想要JHA后边的图例换到下一行

要实现JHA后面的图例换到下一行，可以在 `formatter` 函数中对图例名称进行处理，将需要换行的图例名称添加一个特定的标记（例如“#”），然后在 CSS 样式中对这个标记进行处理，使其在页面中显示为换行符。

修改后的代码如下所示：

option = {
  legend: {
    width: '50%',
    formatter: function(name) {
      // 如果是第三项或第四项，则在名称后添加标记“#”
      if(name === 'JHA' || name === 'XXX') {
        return name + '#';
      } else {
        return name;
      }
    },
    ...
  },
  ...
}

// 在 CSS 样式中对标记“#”进行处理，使其换行
<style>
  .echarts-legend-item:nth-child(3):after,
  .echarts-legend-item:nth-child(4):after {
    content: "\A";
    white-space: pre;
  }
</style>

在这个代码中，我们对图例中的第三项和第四项进行了处理，将它们的名称后面添加了一个 “#” 标记。然后使用 CSS 样式将这个标记转换为换行符，使图例中的第四项换到下一行。需要注意的是，在这个样式中，我们使用了 `:after` 选择器来添加换行符，使用了 `white-space: pre` 属性来保留空格和换行符的显示效果。