微信扫一扫 分享朋友圈

已有 638 人浏览分享

开启左侧

Echarts legend属性怎么使用

[复制链接]
638 0
Echarts的legend属性是对图例组件的相关配置
而legend就是Echarts图表中对图形的解释部分:
image.png
其中legend自身常用的配置属性如下:
orient
设置图例的朝向
属性值:
    vertical // 垂直显示
    或者
    horizontal // 水平显示
image.png
image.png
image.png
image.png
x/y(left/top)
设置图例在X轴方向上的位置以及在Y轴方向上的位置

image.png
image.png
image.png
注意:边框宽度和内边距属性值为数值,不加单位。
image.png
image.png
itemGap
控制每一项的间距,也就是图例之间的距离
属性值为数值,不带单位

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

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

image.png
image.png
selected
设置图例的某个选项的数据默认是显示还是隐藏。
false: 隐藏
属性值:对象,属性值内容:图例上的数据与boolean构成键值对
如果某选项设置为false,那么图标上的数据也会默认不显示,而图例会以灰色样式显示

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

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

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

image.png

免责声明:
1,海欣资源网所发布的资源由网友上传和分享,不保证信息的正确性和完整性,且不对因信息的不正确或遗漏导致的任何损失或损害承担责任。
2,海欣资源网的资源来源于网友分享,仅限用于学习交流和测试研究目的,不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。
3,海欣资源网所发布的资源由网友上传和分享,版权争议与本站无关,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。
4,如果您喜欢,请支持正版,购买正版,得到更好的正版服务,如有侵权,请联系我们删除并予以真诚的道歉,联系方式邮箱 haixinst@qq.com
海欣资源-企业信息化分享平台。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

0

关注

0

粉丝

56

主题
热度排行
回复排行
最新贴子

Archiver|手机版|海欣资源 ( 湘ICP备2021008090号-1 )|网站地图

GMT+8, 2024-4-26 23:36 , Gzip On, MemCached On.

免责声明:本站所发布的资源和文章均来自网络,仅限用于学习交流和测试研究目的,不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。 本站信息来自网络,版权争议与本站无关,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 如果您喜欢,请支持正版,购买正版,得到更好的正版服务,如有侵权,请联系我们删除并予以真诚的道歉。