Echarts饼图图例常见样式的设置方法

我要冲啦个人网站建设2024-12-19web前端

  echarts 中 图例文字的颜色默认是黑色,通常我们配置图例文字颜色有两种方式:

  一、在lengend 中配置data属性,data里面定义各图例的文本,以及该文本对应的样式,这里的文本就与option中的series中的data 重复了,【echart实际上的图例数据是根据series中的data来的】,而一般series中的data数据是从接口获取的,不固定。所以不建议用这种方式

在这里插入图片描述

  二、在lengend 中通过formmatter函数配合textStyle中的属性rich富文本来格式化处理样式或者内容等

在这里插入图片描述

  1)如果要设置图例文字颜色与图例一致的话,直接设置textStyle的 color为’auto’即可

在这里插入图片描述

  2)注:使用 color为’auto’需要注意的是,如果需要对文字样式进行格式化处理的话,必须把自定义样式rich放在后面,否侧color为’auto’会被覆盖

  如图所示:

在这里插入图片描述

在这里插入图片描述

  3)在lengend 中配置data属性,data里面定义各图例的文本,以及该文本对应的样式:

在这里插入图片描述

  4)在farmatter中做if判断处理,当然这种不好的地方就是要一个个判断并对每一个图例进行富文本样式处理:

在这里插入图片描述

  柱状图实现每个bar的不同颜色

在这里插入图片描述

文章关键词
Echarts
饼图图例