百度知道回答,使echarts的图例文本与图标顶部对齐echarts 配置项内容和展示

使用回调函数设置legend.formatter,当图例名称能包含'\n'时,在图例名称前面拼接相同数量的‘\n’。

配置项如下
      option = {
    legend: {
        formatter: function(params) {
            tmp = params.split('\n');
            res = '' + params;
            for (var i in tmp) {
                res = res.replace(tmp[i], '');
            }
            return res + params;
        }
    },
    grid: {
        top: '20%'
    },
    tooltip: {},
    dataset: {
        // 提供一份数据。
        source: [
            ['product', '20\n15', '2\n01\n6', '2017'],
            ['Matcha Latte', 43.3, 85.8, 93.7],
            ['Milk Tea', 83.1, 73.4, 55.1],
            ['Cheese Cocoa', 86.4, 65.2, 82.5],
            ['Walnut Brownie', 72.4, 53.9, 39.1]
        ]
    },
    // 声明一个 X 轴,类目轴(category)。默认情况下,类目轴对应到 dataset 第一列。
    xAxis: {
        type: 'category'
    },
    // 声明一个 Y 轴,数值轴。
    yAxis: {},
    // 声明多个 bar 系列,默认情况下,每个系列会自动对应到 dataset 的每一列。
    series: [{
            type: 'bar'
        },
        {
            type: 'bar'
        },
        {
            type: 'bar'
        }
    ]
}
    
截图如下