Echarts legend属性使用

Echarts的legend属性是对图例组件的相关配置
而legend就是Echarts图表中对图形的解释部分:

其中legend自身常用的配置属性如下: 

orient

设置图例的朝向

属性值:

vertical // 垂直显示
或者
horizontal // 水平显示

legend: {orient: 'vertical'}

 

	legend: {orient: 'horizontal'}

 

x/y(left/top)

设置图例在X轴方向上的位置以及在Y轴方向上的位置

位置

取值

x/left

left/center/right

y /top

top/center/bottom

例子:

legend: {orient: 'vertical',x:'right',y:'center'}

样式设置

属性

说明

backgroundColor

背景颜色

borderColor

边框颜色

borderWidth

边框宽度

padding

内边距

注意:边框宽度和内边距属性值为数值,不加单位。

legend: {orient: 'vertical',x:'center',y:'top',backgroundColor: '#fac858',borderColor: '#5470c6',borderWidth: '200',}

itemGap

控制每一项的间距,也就是图例之间的距离
属性值为数值,不带单位

legend: {orient: 'horizontal',x:'center',y:'top',itemGap: 40}

 

itemHeight

控制图例图形的高度
属性值为数字,不加单位

legend: {orient: 'horizontal',x:'center',y:'top',itemHeight: 5}

textStyle

设置图例文字样式
属性值为一个对象

legend: {orient: 'horizontal',x:'center',y:'top',textStyle: {color: 'red',fontSize: '20px',fontWeight: 700}}

selected

设置图例的某个选项的数据默认是显示还是隐藏。
false: 隐藏
属性值:对象,属性值内容:图例上的数据与boolean构成键值对

如果某选项设置为false,那么图标上的数据也会默认不显示,而图例会以灰色样式显示

legend: {orient: 'horizontal',x:'center',y:'top',selected:{'搜索引擎': false,'联盟广告': false}}

 

data 

图例上显示的文字信息,如果不设置该项,默认会以series设置的信息作为图例信息。如果设置该项,必须与series设置的信息一致,才会生效。
而该属性的作用:可以单独对图例中某个选项进行单独设置样式
比如:

legend: {orient: 'horizontal',x:'center',y:'top',data:[{name: '搜索引擎',icon: 'circle', textStyle: {fontWeight: 'bold', color: 'orange'}},'直接访问','邮件营销','联盟广告','视频广告']}

以上单独设置中
name:指定该项的名称,必填
icon:指定图例项的icon,可以为内置的图形7个图形,或者自定义图标的形式:'image://url'
textStyle::设置文本样式 

参考文章 大佬文章

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/576720.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Pandas有了平替Polars

Polars是一个Python数据处理库,旨在提供高性能、易用且功能丰富的数据操作和分析工具。它的设计灵感来自于Pandas,但在性能上更加出色。 Polars具有以下主要特点: 强大的数据操作功能:Polars提供了类似于Pandas的数据操作接口&am…

涵盖多种功能,龙讯旷腾Module第七期:超快动力学过程

Module是什么 在PWmat的基础功能上,我们针对用户的使用需求开发了一些顶层模块(Module)。这些Module中的一部分是与已有的优秀工具的接口,一部分是以PWmat的计算结果为基础得到实际需要的物理量,一部分则是为特定的计…

ctf web赛道基础 万字笔记

一、SQL注入(mysql): 基本语法 判断列数 order by 3 查询所有数据库: select group_concat(schema_name) from information_schema.schemata 查询当前数据库的所有表: select group_concat(table_name) from informa…

12.鸿蒙HarmonyOS App(JAVA) page的隐式跳转

跳转到指定Page的指定AbilitySlice MainAbilitySlice按钮触发事件: btn.setClickedListener(component -> { Intent _intent new Intent(); Operation operation new Intent.OperationBuilder() .withBundleName(…

关于Windows11画图板出现马赛克问题

参考博客链接: Win11新版画图板问题 一、问题描述 新版win11画图板使用橡皮擦,或者框选图片会出现这种马赛克的问题 二、问题解决 1.先点击 “层” 2.点击 “” 3.点击出现的这个层 现在就可以正常的使用画图板啦 如果想要取消右边的那一栏,…

git集成github(二)-- 遇见的问题与解决方法

1、share project on github时,弹出Cannot load information for github.com/zouxiaoya:Connection reset问题。 解决方法:pycharm-->setting-->version control-->github中,删除掉当前用户,点击reset重置即可。 2、 pus…

JavaScript中的prototype和_proto_的关系是什么

JavaScript中的prototype和_proto_的关系是什么 __proto__ 是 JavaScript 中对象的一个内部属性,它指向该对象的原型。JavaScript 中每个对象都有一个 __proto__ 属性,通过它可以访问对象的原型。prototype 是函数对象特有的属性,每个函数都…

深入了解 Git 分支合并冲突解决步骤

目录 前言1 检测合并冲突2 手动解决冲突2.1 打开冲突文件2.2 手动解决冲突 3 标记解决后的文件4 完成合并5 提交合并后的内容6 验证合并结语 前言 在协作开发中,当不同分支对同一文件的相同位置进行修改时,往往会出现合并冲突。这些冲突需要开发者手动介…

使用四层for循环求得1、2、3、4组成的互不相关的三位数

一、思想 使用四层for循环进行循环遍历,进行判断,然后根据规则在最里侧的for循环输出这些三位数。 二、代码 public class ThreeDigit {public static void main(String[] args){int[] a {1,2,3,4};System.out.println("满足条件的三位数是&…

一盒晶圆只有25片吗?

没有答案,可能是实践的标准。后来在工作过程中发现还有13片的,个人认为研究这个问题不如多看看foup! 晶圆载具用于硅片生产、晶圆制造以及工厂之间晶圆的储存、传送、运输以及防护。晶圆载具种类很多,如FOUP用于晶圆制造工厂中晶圆…

【MySQL】数据库索引(简单明了)

🍎个人博客:个人主页 🏆个人专栏: 数 据 库 ⛳️ 功不唐捐,玉汝于成 目录 前言: 正文: 索引的类型 创建索引 1. 创建单列索引 2. 创建复合索引 索引的优势 索引的劣势 示例 注意…

软考高项通过人数增加70%!改为机考难度降低了?

最近,河北省人事考试网陆续发布了“2023年度上半年和下半年计算机技术与软件专业技术资格(水平)考试河北省合格人员公示名单”。从名单来看,2023年度下半年软考通过人数较上半年有显著增加。 一、河北软考合格人数统计 2023年上半…

mysql原理--基于成本的优化

1.什么是成本 我们之前老说 MySQL 执行一个查询可以有不同的执行方案,它会选择其中成本最低,或者说代价最低的那种方案去真正的执行查询。不过我们之前对 成本 的描述是非常模糊的,其实在 MySQL 中一条查询语句的执行成本是由下边这两个方面组…

SpringMVC核心处理流程梳理

1、处理流程图展示 当我拿出这张图,阁下又该如何应对呢?执行流程是不是一目了然了。 2、DispatcherServlet:中央处理器或者中央调度器 下图官方的解释应该最完善了。 3、SpringMVC三大核心组件 HandlerMapping 处理器映射器,…

BUUCTF——Reverse——内涵的软件

1、题目 2、工具 Exeinfo PE:查壳工具。IDA:是一款功能强大的反汇编工具,用于分析和逆向工程二进制文件。 3、方法 下载文件,得到一个.exe文件。 打开该文件,尝试输入Y和N。 用Exeinfo PE查询该文件是否加了壳。 可…

基于图搜索的自动驾驶规划算法 - BFS,Dijstra,A*

本文将讲解BFS,Dijstra,A*,动态规划的算法原理,不正之处望读者指正,希望有兴趣的读者能在评论区提出一些这些算法的面试考点,共同学习,一起进步 0 图论基础 图有三种:无向图、有向…

11.Go 列表

列表是一种非连续的存储容器,由多个节点组成,节点通过一些变量记录彼此之间的关系,列表有多种实现方法,如单链表、双链表等。 在Go语言中,列表使用container/list包来实现,内部的实现原理是双链表&#xf…

物理模拟重力 斜抛运动计算 抛物线计算

物理模拟重力 斜抛运动计算 抛物线计算 一、介绍二、原理三、实现如下PhysicsUtil.cs 工具类Missile.cs 四、资源分享 一、介绍 模拟Unity原始重力系统进行重写,可是实现发射到指定目标位置并能继续当前力进行自身的弹力与摩擦继续运动 二、原理 将Unity原始不受控…

​一个人成长最快的方式

一个人成长最快的方式就是:保持阅读,向行业的专家学习,在实践中不断的复盘总结,循环这三点,没有学不好的东西。基于此,推荐一些在产品、设计领域的专家,关注他们,学习他们&#xff0…

springcloud 服务网关Zuul实战(二)路由访问映射规则

上篇文中已经讲完基本的路由配置,但是我们如何对访问的微服务做映射 访问的地址:http://myzuul.com:9527/microservicecloud-dept/dept/get/2 从访问地址可以分析出我们真实的微服务名字,我们为了安全起见将真实的微服务名字隐藏&#xff0…