精华内容
下载资源
问答
  • 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:02
    echarts - 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:36
    echarts里的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 ...

    ECharts

    不能单独动态修改legend某个属性,

    let data:string[]= ['信息','测试']
    option.legend.data = data
    

    这样达不到你想要的结果

    想要修改data属性需要给legend重新赋值,而不是给legenddata属性赋值
    正确写法:

    let legend = {
    	type:'bar',
    	data:[]
    	...
    }
    option.legend = legend;
    

    这样就能实现想要的效果了

    展开全文
  • 需求:折线图上有 一个产品的目标值和实际值 ,通过点击其中一个legend,同时隐藏该产品的实际值和目标值(指折线图上的线) 动态设置legend属性 无效 的解决办法
  • 如上述例图所示,echarts的legend也有多种属性可以供我们调控。 首先是legend的type: 可能有的人不太懂,legend有哪些type,根据配置项文档可知: type有以下两种: plain\scroll plain scroll ...
  • Echarts - legend属性设置

    万次阅读 2018-11-30 15:23:31
    legend: {  orient: 'horizontal', // 'vertical'  x: 'right', // 'center' | 'left' | {number},  y: 'top', // 'center' | 'bottom' | {number}  backgroundColor: '#fff',  ...
  • 如上述例图所示,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...
  • var option1 = { title: {}, tooltip: {}, // legend设置提示 legend: { orient: 'vertical', right: 10, top: 20, }, series: [{ name: '', type: 'pie', // 设置图表
  • 转载:Echarts - legend属性设置

    千次阅读 2018-01-24 15:53:15
    legend: { orient: 'horizontal', // 'vertical' x: 'right', // 'center' | 'left' | {number}, y: 'top', // 'center' | 'bottom' | {number} backgroundColor: '#fff',
  • legend: {  layout: 'vertical',  align: 'right',  verticalAlign: 'top',  y: 30,  navigation: {  activeColor: 'red', animation: t
  • 项目需求: 1、自定义icon图片样式; 2、相关数值直接显示; 解决方案: 自定义icon图片样式 data: ['家电', '服装', '数码'], 转为: data: [{name:'家电',icon:'image://lockdatav1.png'}, ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 580
精华内容 232
关键字:

legend属性