echarts legend formatter写html

在Echarts中，legend的formatter属性可以用于自定义图例的格式。然而，它不支持直接返回HTML样式，因此我们需要使用Echarts配置中的rich选项来代替。通过rich选项，我们可以自定义富文本样式。

例如，我们可以使用formatter属性来定义图例的内容，并通过rich选项来设置不同部分的样式。具体操作如下：

legend: {
  formatter: function(name) {
    return '{a|' + name + '} <b>bold text</b>';
  },
  textStyle: {
    rich: {
      a: {
        color: 'blue',
        fontWeight: 'bold'
      }
    }
  }
}

在上述代码中，我们使用了formatter函数来定义图例的内容，其中通过`{a|}`来设置了名字部分的样式，通过`<b>`标签来设置了粗体文本的样式。同时，在textStyle的rich属性中，我们设置了名为"a"的样式，指定了其颜色和字体粗细。

通过这种方式，我们可以根据需求来灵活地自定义图例的样式，实现更复杂的HTML格式化效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [echarts自定义图例legend文字和样式](https://blog.csdn.net/weixin_39972996/article/details/117974599)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* [echarts部分格式化无法返回html的替代方案](https://blog.csdn.net/weixin_42534421/article/details/125810480)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]