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的计算结果为基础得到实际需要的物理量,一部分则是为特定的计…

Zama TFHE-rs

1. 引言 前序博客见: 基于[Discretized] Torus的全同态加密指引(1)基于[Discretized] Torus的全同态加密指引(2)TFHE——基于[Discretized] Torus的全同态加密 代码解析 开源代码见: https://github.co…

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.点击出现的这个层 现在就可以正常的使用画图板啦 如果想要取消右边的那一栏,…

c#生成临时文件

/// <summary> /// 生成临时文件 /// </summary> /// <param name"tmpDirectory">临时文件目录</param> /// <param name"fs">临时文件流&#xff08;该流会被关闭&#xff09;</param&…

git上传代码到新建的空白项目

git上传代码到新建的空白项目 打开命令行终端或者Git Bash 进入到项目目录 初始化一个新的git仓库&#xff1a;git init 将代码添加到git仓库 4.1 使用 git add命令将代码文件添加到暂存区: git add . (. 表示添加当前目录下的所有文件&#xff0c;也可以指定具体的文件名)4…

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

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

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

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

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

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

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

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

一盒晶圆只有25片吗?

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

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

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

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

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

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

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

SpringMVC核心处理流程梳理

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

BUUCTF——Reverse——内涵的软件

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

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

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

uni-app附件下载预览 并解决打开附件时黑屏

// 预览附件perviewFile(file) {console.log(点击附件, file)var strfile.previewUrlvar filTypestr.split(.)console.log(filType,filType)uni.downloadFile({url: success: function(res) {console.log(打开文档成功, res);if (res.statusCode 200) {uni.saveFile({tempFile…