首页 前端知识 关于Echarts饼图图例常见样式

关于Echarts饼图图例常见样式

2024-08-18 22:08:55 前端知识 前端哥 875 379 我要收藏

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的不同颜色
在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16124.html
标签
评论
发布的文章

无涯教程-HTML5 - MathML

2024-08-25 23:08:46

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!