echarts legend 使用formatter

ECharts 是一个强大的数据可视化库，其中的 legend 组件用于图例的显示和交互。legend 的 formatter 选项可以用来自定义图例的显示内容。以下是一些常见的用法：

1. 字符串模板：

legend: {
    formatter: 'Legend: {name}'
}

这种格式会将每个图例项的名称替换到 {name} 位置。

2. 函数回调：

legend: {
    formatter: function(name) {
        return 'Category: ' + name;
    }
}

这种格式允许更灵活的定制，可以根据图例名称返回自定义的字符串。

3. 富文本标签：

legend: {
    formatter: [
        '{a|Category}: {b|Name}'
    ].join('\n'),
    textStyle: {
        rich: {
            a: {
                fontWeight: 'bold'
            }
        }
    }
}

这种格式允许使用富文本样式，可以为不同的文本部分设置不同的样式。

4. 结合其他配置：

legend: {
    data: ['Data1', 'Data2', 'Data3'],
    formatter: function(name) {
        var total = 0;
        var target;
        for (var i = 0, l = option.series.length; i < l; i++) {
            total += option.series[i].data[0];
            if (option.series[i].name === name) {
                target = option.series[i].data[0];
            }
        }
        return name + ' ' + ((target / total) * 100).toFixed(2) + '%';
    }
}

这种格式结合了数据计算，可以动态显示图例项的百分比。

使用 formatter 可以极大地增强图例的可读性和美观度，使得图表信息更加清晰和易于理解。