[如何设置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

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属性
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]
        },

ECharts
不能单独动态修改legend某个属性，
let data:string[]= ['信息','测试']
option.legend.data = data

这样达不到你想要的结果
想要修改data属性需要给legend重新赋值，而不是给legend的data属性赋值

正确写法：
let legend = {
	type:'bar',
	data:[]
	...
}
option.legend = legend;

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