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

在echarts中,tooltip和label都可以显示文字,并且可以加上相应的样式。

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

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

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

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


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

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

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

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

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 官网 中文版本 好的网站 Content-type: text/htmlBASH Section: User ...
    不排版阅读 4,433评论 0 5
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,281评论 0 3
  • 这篇文章主要讲述Echarts设置字体和线条的颜色相关操作笔记,希望文章对你有所帮助,主要是自己的在线笔记吧。我在...
    蓝色梦想家阅读 10,071评论 1 1
  • 简单记录一下在项目中使用全过程中遇到了的问题以及踩坑了不熟悉的配置项。前期使用发现配置项太多了,一脸懵逼,后来发现...
    家住魔仙堡的大柠阅读 982评论 0 0
  • 今天面试了安心记加班,因为是大小周,所以工资要的范围扩大了些,但是现在想想,但是在回答为什么要调整时,我应该说,有...
    MissSad阅读 148评论 0 0