饼图双圈圈与图例双行排列布局，上下对齐

刚开始学习echart遇到了许多麻烦,图例组件对不齐，感觉很乱

• 刚接触echart遇到的问题写的学习总结，希望对初学者有所帮助

• 如果不会配置，或者刚学习不知道怎么下手，可以看我上一篇文章

• 链接

• 开始我自学查看文档时，以为是设置图例的间距，结果我错了，我设的itemGap都设到10了，才成了这样，没有上下对齐，第二行还有很多，感觉不匀称。
  

   <script type="text/javascript">
    // c 数据值  b数据名  a 系列名 
            var myApp = echarts.init(document.getElementById('app'));
           var  data1= [
                {value: 335, name: '直达'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1048, name: '百度'},
                {value: 251, name: '谷歌'},
                {value: 147, name: '必应'},
                {value: 102, name: '其他'}
            ]
var option ={
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'horizontal',
        bottom:'bottom',
        textStyle:{
            borderWidth:1,
            borderColor:'gray',
            padding:[10,10],
            color:'red'
        },
        itemGap:10,
        itemHeight:20,
        itemWidth:20,
        left: 'center',
        align:'auto',
        zlevel:2,
        data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他'],
        formatter:  function(name){
                        var res = "";
                        for(var i=0;i<data1.length;i++) {
                           if (data1[i].name == name) {  
                            res=data1[i].value;
                           }
                        }
                        return name+'  '+res;
                    },
    },
 series: [
        {
            name:'llr',
            type:'pie',
            radius:[0,'9%'],
        },
        {
            name: '访问来源1',
            type: 'pie',
            selectedMode: 'single',
            radius: ['10%', '30%'],

            label: {
                position: 'inner'
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 335, name: '直达'},//, selected: true 选中默认变大
                {value: 679, name: '营销广告'},
                {value: 1548, name: '搜索引擎'}
            ]
        },
        {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '55%'],
            label: {
                show:false,//是否显示标签
                position: 'outside',
                formatter: '{a|{a}}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',//引用自定义
                backgroundColor: '#eee',
                borderColor: '#aaa',
                borderWidth: 1,
                borderRadius: 4,
                rich: {//自定义丰富样式
                    a: {
                        color: '#999',
                        lineHeight: 22,
                        align: 'center'
                    },
                    hr: {
                        borderColor: '#aaa',
                        width: '100%',
                        borderWidth: 0.5,
                        height: 0
                    },
                    b: {
                        fontSize: 16,
                        lineHeight: 33
                    },
                    per: {
                        color: '#eee',
                        backgroundColor: '#334455',
                        padding: [2, 4],
                        borderRadius: 2
                    }
                }
            },
            // 很关键  要在label先隐藏标签
            emphasis:{
                            label:{
                                show:true,//是否显示标签
                                fontSize:'30',//默认12
                                fontWidth:'bold'
                            }
                        },
            data: [
                {value: 335, name: '直达'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1048, name: '百度'},
                {value: 251, name: '谷歌'},
                {value: 147, name: '必应'},
                {value: 102, name: '其他'}
            ]
        }
    ]
            }
            myApp.setOption(option);

后来再翻阅文档找到了答案

 legend:[
                {
                    orient: 'horizontal',
                    x : '5%',
                    y : '10%',
                    align: 'left',
                    data: ['直达'],
                    textStyle:{
                        color:'red'
                    }
                },{
                    orient: 'horizontal',
                    x : '30%',
                    y : '10%',
                    align: 'left',
                    data: ['营销广告'],
                    textStyle:{
                        color:'red'
                    }
                },{
                    orient: 'horizontal',
                    x : '55%',
                    y : '10%',
                    align: 'left',
                    data: ['搜索引擎'],
                    textStyle:{
                        color:'red'
                    }
                },{
                    orient: 'horizontal',
                    x : '80%',
                    y : '10%',
                    align: 'left',
                    data: ['邮件营销'],
                    textStyle:{
                        color:'red'
                    }
                },{
                    orient: 'horizontal',
                    x : '5%',
                    y : '15%',
                    align: 'left',
                    data: ['联盟广告'],
                    textStyle:{
                        color:'red'
                    }
                },{
                    orient: 'horizontal',
                    x : '30%',
                    y : '15%',
                    align: 'left',
                    data: ['视频广告'],
                    textStyle:{
                        color:'red'
                    }
                },{
                    orient: 'horizontal',
                    x : '55%',
                    y : '15%',
                    align: 'left',
                    data: ['百度'],
                    textStyle:{
                        color:'red'
                    }
                },{
                    orient: 'horizontal',
                    x : '80%',
                    y : '15%',
                    align: 'left',
                    data: ['百度'],
                    textStyle:{
                        color:'red'
                    }
                }
],

它们都有x和y，修改这个属性就好了,上下左右任你去