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::设置文本样式
Echarts legend属性使用相关推荐
- echarts legend修改形状
legend: {icon: "circle", // 字段控制形状 类型包括 circle,rect,line,roundRect,triangle,diamond,pin,ar ...
- echarts饼图属性
1.标题移动到右边 原本 legend: {data:['同龄普通孩子','已具备技能','已泛化技能','已掌握技能','学习中'] }, 改 legend: {data:['同龄普通孩子','已具 ...
- echarts legend文字配置多个颜色(转)
困扰很久的问题终于解决了 oh yea! echarts legend文字配置多个颜色 legend: { data: [ { name:'直接访问', icon : 'circle', textSt ...
- Echarts visualMap属性记录
Echarts visualMap属性记录 //视觉映射组件,用于进行『视觉编码』,也就是将数据映射到视觉元素.视觉元素可以是:symbol: 图元的图形类别. visualMap = [symbol ...
- Echarts - legend、tooltip、xAxis属性设置
目录 legend: tooltip: xAxis: legend: legend: {show: true, //是否显示type: "plain", // 图例的类型 'pla ...
- 【前端统计图】echarts实现属性修改
原图: 图片.png 原代码: <!DOCTYPE html> <html><head><meta charset="UTF-8"> ...
- echarts legend位置_一起读 ECharts 配置项手册之 series[i]-line(上)
之前的文章写得都比较杂,还总是想不到要写点什么-- 所以最近打算把 ECharts 所有系列挨个聊一遍,写一个 series 系列的简单介绍,解决一大段时间的难选题问题- -b,顺便方便比我还新的新手 ...
- ECharts Map 属性详解
$(function() { // 路径配置 require.config({paths : {// echarts: 'http://echarts.baidu.com/build/dist'ech ...
- 动态修改legend属性
ECharts 不能单独动态修改legend某个属性, let data:string[]= ['信息','测试'] option.legend.data = data 这样达不到你想要的结果 想要修 ...
最新文章
- lwip之数据收发流程_2
- 产品治理体系:产品顶层框架
- PYG教程【三】对Cora数据集进行半监督节点分类
- Spring5参考指南:AOP代理
- 世界上第一个程序员竟然是女性,难以置信......
- 一念心动,一生绵延——如何修复min pulse width?
- 【CIKM2020】如何更为合适地评测推荐算法? Top-N物品推荐算法评测设置回顾
- 数据库问题6-將系統資料表對應至系統檢視
- Ubuntu14.04桌面版 apt-get 方式安装LNMP
- html5 小车动画_HTML5 实现小车动画效果(Canvas/CSS3/JQuery)
- JAVA 仿QQ聊天程序
- matlab otsu算法代码,OTSU算法matlab程序代码
- postgresql磁盘空间清理
- 手机设备唯一标识相关概念
- 集成学习——BAGGING和随机森林
- 大学生前端,毕业面试知道这几点,offter拿到手软
- canvas制作圆型印章
- 一元函数积分学2_不定积分的分部积分法
- 操作系统春招面试复习之:文件管理
- Java基础笔记_6_类和对象_成员变量