-
Echarts图例位置 - legend属性
2019-06-14 16:54:27只需要legend属性中修改如下几个示数即可: legend: { orient: 'vertical', x:'right', //可设定图例在左、右、居中 y:'center', //可设定图例在上、下、居中 padding:[0,50,0,0], //可设定图例[距上方距离,距右方...[如何设置Echarts图例位置]
Echarts可以帮助我们快速构建柱状图、饼图、条形图,这对于多图形化展示数据来说尤其方便,可帮助我们快速开发。
不过我们在使用Echarts过程中经常会遇到如下问题:图例经常不知道如何调节到我们想要的位置。
遇到此情况该如何调节呢?只需要legend属性中修改如下几个示数即可:
legend: { orient: 'vertical', x:'right', //可设定图例在左、右、居中 y:'center', //可设定图例在上、下、居中 padding:[0,50,0,0], //可设定图例[距上方距离,距右方距离,距下方距离,距左方距离] data: ['直接访问','微信','百度','其他文章','网页'] },
①x : 可以设定图例在----左(left)、右(right)、居中(center)、填写数字(如:100px)
②y : 可以设定图例在----上(top)、下(bottom)、居中(center)、填写数字(如:100px)
③另外,可使用padding:
padding:[0,50,0,0] [(距离上方距离),(距离右方距离)、(距离下方距离)、(距离左方距离)]
当前(2020年6月)直接只设置left、right、top、bottom具体像素值或百分比即可:left、right、top、bottom
legend: { orient: 'vertical', right: 10, //当前直接只设置此具体像素值、百分比即可了 data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] },
如此设置完就可以得到自己想要的位置啦。
参考:Echarts官网配置项介绍:https://echarts.apache.org/zh/option.html#legend
-
笔记:Echarts - legend属性设置
2017-11-01 17:45:02echarts - legend属性设置legend: { orient: 'horizontal', // 'vertical' x: 'right', // 'center' | 'left' | {number}, y: 'top', // 'center' | 'bottom' | {number} backgroundColor: '#fff', borderColor: 'rgba(178,34,34,0.8)', borderWidth: 4, padding: 10, // [5, 10, 15, 20] itemGap: 20, textStyle: {color: 'red'}, selected: { '降水量': false }, data: [{ name: '蒸发量', icon: 'circle',//'image://../asset/ico/favicon.png',//标志图形类型,默认自动选择(8种类型循环使用,不显示标志图形可设为'none'),默认循环选择类型有:'circle' | 'rectangle' | 'triangle' | 'diamond' |'emptyCircle' | 'emptyRectangle' | 'emptyTriangle' | 'emptyDiamond'另外,还支持五种更特别的标志图形'heart'(心形)、'droplet'(水滴)、'pin'(标注)、'arrow'(箭头)和'star'(五角星),这并不出现在常规的8类图形中,但无论是在系列级还是数据级上你都可以指定使用,同时,'star' + n(n>=3)可变化出N角星,如指定为'star6'则可以显示6角星 textStyle: {fontWeight: 'bold', color: 'green'} }, '降水量', '最高气温', '最低气温' ] }
-
echarts里的legend属性
2020-05-27 15:16:36echarts里的legend属性 1.图例布局朝向(orient) .默认横向布局,纵向布局值为’vertical’ orient:'horizontal' orient:'vertical' 2.图例组件的宽高(width,height) width:10, height:10 3.left,right,top,...echarts里的legend属性
1.图例布局朝向(orient)
.默认横向布局,纵向布局值为’vertical’orient:'horizontal' orient:'vertical'
2.图例组件的宽高(width,height)
width:10, height:10
3.left,right,top,bottom
图例组件离容器左(右,上,下)侧的距离。
left 的值可以是像 20 这样的具体像素值,可以是像 ‘20%’ 这样相对于容器高宽的百分比,也可以是 ‘left’,‘center’, ‘right’。
如果 left 的值为’left’, ‘center’,‘right’,组件会根据相应的位置自动对齐.
4.图例每项之间的间隔(itemGap)
图例每项之间的间隔。横向布局时为水平间隔,纵向布局时为纵向间隔
5.图例标记的图形的宽度/高度(itemWidth/itemHeight)
6.格式化图例文本(formatter)// 使用字符串模板,模板变量为图例名称 {name} formatter: 'Legend {name}' // 使用回调函数 formatter: function (name) { return 'Legend ' + name; } formatter: name => { for (let i = 0; i < chartData.length; i++) { if (name === chartData[i].name) { return name + ': ' + chartData[i].value; } } }
7.图例配置(tooltip)
点击图例可以显示/隐藏该图例所示图表legend:{ tooltip:{ show:true } }
8.文本样式textStyle
textStyle: { color: '#cccccc', fontSize: 24.12, padding: [0, 0, 0, 10] },
-
动态修改legend属性
2020-08-06 09:08:51不能单独动态修改legend某个属性, let data:string[]= ['信息','测试'] option.legend.data = data 这样达不到你想要的结果 想要修改data属性需要给legend重新赋值,而不是给legend的data属性赋值 正确写法: let ... -
v-charts(echarts)监听legend点击事件bug,动态设置legend属性无效解决办法
2020-07-14 18:15:49需求:折线图上有 一个产品的目标值和实际值 ,通过点击其中一个legend,同时隐藏该产品的实际值和目标值(指折线图上的线) 动态设置legend属性 无效 的解决办法 -
实现echarts的legend属性设置详解以及没有显示问题
2019-07-16 11:08:58如上述例图所示,echarts的legend也有多种属性可以供我们调控。 首先是legend的type: 可能有的人不太懂,legend有哪些type,根据配置项文档可知: type有以下两种: plain\scroll plain scroll ... -
Echarts - legend属性设置
2018-11-30 15:23:31legend: { orient: 'horizontal', // 'vertical' x: 'right', // 'center' | 'left' | {number}, y: 'top', // 'center' | 'bottom' | {number} backgroundColor: '#fff', ... -
legend位置 pyecharts_实现echarts的legend属性设置详解以及没有显示问题
2020-12-18 20:10:07如上述例图所示,echarts的legend也有多种属性可以供我们调控。首先是legend的type:可能有的人不太懂,legend有哪些type,根据配置项文档可知:type有以下两种:plain\scrollplainscroll简单普通样式可滚动翻页,当... -
笔记:Echarts legend 属性设置
2018-11-01 08:43:52在写echarts的过程中,遇到需要改变标志图形的...百度之后,在legend中写入icon: '****',可以改变标志图形。 legend: { itemWidth: 5,// 标志图形的长度 itemHeight: 5,// 标志图形的宽度 bottom: 10, left... -
echarts中的legend属性设置颜色提示
2020-12-02 17:03:12var option1 = { title: {}, tooltip: {}, // legend设置提示 legend: { orient: 'vertical', right: 10, top: 20, }, series: [{ name: '', type: 'pie', // 设置图表 -
转载:Echarts - legend属性设置
2018-01-24 15:53:15legend: { orient: 'horizontal', // 'vertical' x: 'right', // 'center' | 'left' | {number}, y: 'top', // 'center' | 'bottom' | {number} backgroundColor: '#fff', -
Highchart legend属性 实现翻页显示效果,解决legend过长
2014-02-26 06:47:59legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', y: 30, navigation: { activeColor: 'red', animation: t -
Echarts组件legend属性显示数据和icon图片自定义的解决方案
2020-03-02 11:00:36项目需求: 1、自定义icon图片样式; 2、相关数值直接显示; 解决方案: 自定义icon图片样式 data: ['家电', '服装', '数码'], 转为: data: [{name:'家电',icon:'image://lockdatav1.png'}, ...
-
Unity RUST 逆向安全开发
-
基于java的网页内容管理
-
Excel视频教学-百度网盘.txt
-
eclipse启动报错java was started but returned exit code = 13解决
-
MaxScale 实现 MySQL 读写分离与负载均衡
-
毕业设计实验日志2021.0302
-
自动化测试Python3+Selenium3+Unittest
-
HTML标记语言_1W_pro1
-
基于FX系列PLC的计算机串口通信和编程口通信
-
实现 MySQL 读写分离的利器 mysql-proxy
-
流程反模式:如何避免业务流程建模中的常见陷阱,第2部分
-
强化训练4-1.html
-
MySQL 触发器
-
手机客户端UI测试分析
-
跳台阶扩展问题(简单,贪心)
-
计算机相关的外文文献翻译
-
HTTP加密实践
-
面罩检测器:使用卷积神经网络(CNN)的面罩检测器-源码
-
MySQL 主从复制 Replication 详解(Linux 和 W
-
MySQL 四类管理日志(详解及高阶配置)