【无标题】

echars 两列展示图例

思路：将图例拆分两个独立的图列展示

效果图展示

代码

 legend: [{
                orient: 'vertical',
                top: '60%',
                icon:"circle",
                itemWidth: 12,
                itemHeight: 12,
                right: 340,
                itemGap: 20,
                textStyle:{
                    rich: {
                        a: {
                            align: 'left',
                            color: '#555555',
                            fontSize: 14,
                            fontWeight: 500,
                            padding: [0, 0, 0, 0],
                        },
                        b0: {
                            align: 'left',
                            color: '#000000',
                            fontSize: 14,
                            fontWeight: 'bold',
                            padding: [0, 0, 0, 2],
                        },

                    },
                },
                data: data.slice(0,Math.ceil(data.length/2)),
                formatter: function (name) {
                    let title = '';
                    var total = 0;
                    var target;
                    var index;
                    var number;
                    for (var i = 0, l = data.length; i < l; i++) {
                        if (data[i].name == name) {
                            target = data[i].value;
                            number = data[i].number;
                            title = data[i].label;
                            index = i < 6 ? i : 5;
                        }
                    }
                    //return `{a| ${name}}    {b0| ${target}    ${number}}`;
                    return '{a| ' + name + '}      {b0|  ' + target + '        ' + number + '}';
                },
            },{
                orient: 'vertical',
                top: '60%',
                icon:"circle",
                itemWidth: 12,
                itemHeight: 12,
                right: 100,
                itemGap: 20,
                selectedMode: 'multiple',
                textStyle:{
                    rich: {
                        a: {
                            align: 'left',
                            color: '#555555',
                            fontSize: 14,
                            fontWeight: 500,
                            padding: [0, 0, 0, 0],
                        },
                        b0: {
                            align: 'left',
                            color: '#000000',
                            fontSize: 14,
                            fontWeight: 'bold',
                            padding: [0, 0, 0, 2],
                        },

                    },
                },
                data: data.slice(Math.ceil(data.length/2) ,data.length),
                formatter: function (name) {
                    let title = '';
                    var total = 0;
                    var target;
                    var index;
                    var number;
                    for (var i = 0, l = data.length; i < l; i++) {
                        if (data[i].name == name) {
                            target = data[i].value;
                            number = data[i].number;
                            title = data[i].label;
                            index = i < 6 ? i : 5;
                        }
                    }
                    //return `{a| ${name}}    {b0| ${target}    ${number}}`;
                    return '{a| ' + name + '}      {b0|  ' + target + '        ' + number + '}';
                },
            }],

四级标题

五级标题

六级标题echarts