echarts中label显示的样式设置问题

Posted 2023-03-02

参考技术A 在echarts中，tooltip和label都可以显示文字，并且可以加上相应的样式。

tootip可以传入字符串html进行显示，而label则不行

在目前的最新版本中（4.6.0），label显示需要添加样式则需要借助rich属性。

下面介绍两种使用方式，并且把归纳的结论奉上（目前没有去看源码，属于通过现象归纳用法的过程）。

第一种方式：通过直接给label属性下的formatter赋值字符串，如同下面的配置

这个时候中的b和c会被分别解析为名称和数据，这个地方echarts官方文档有介绍。

此时需要添加样式则需要解析 rich 中设置的样式，写法为 fz| 。

第二种方式：通过formatter的回调函数进行设置，如下图

通过回调函数返回的字符串中，样式的引入没有变化，和直接返回一样，但是数据不再和直接返回时一样可以直接使用，而是需要手动赋值。

总结：官网文档上已经写得比较清楚，这里做个记录，只为方便查询和使用。