echarts自定义legend

要自定义 Echarts 图表的图例 (legend)，可以使用 Echarts 提供的 legend API 进行配置。下面是一些常见的自定义图例的方法：

1. 修改图例的位置和样式：

可以通过设置 `legend` 属性来修改图例的位置和样式。例如，可以通过 `left` 和 `top` 属性来设置图例的左边距和上边距，通过 `itemWidth` 和 `itemHeight` 属性来设置图例项的宽度和高度，通过 `textStyle` 属性来设置图例项的文本样式等。

option = {
    legend: {
        left: 'center',      // 设置图例的左边距
        top: 'bottom',       // 设置图例的上边距
        itemWidth: 10,       // 设置图例项的宽度
        itemHeight: 10,      // 设置图例项的高度
        textStyle: {         // 设置图例项的文本样式
            color: '#333',
            fontSize: 14
        }
    },
    // 其他配置项
};

2. 隐藏图例：

如果不需要图例，可以将 `show` 属性设置为 `false`，或者将 `data` 属性设置为空数组。

option = {
    legend: {
        show: false,   // 隐藏图例
        data: []       // 设置图例数据为空数组
    },
    // 其他配置项
};

3. 自定义图例内容：

可以通过设置 `data` 属性来自定义图例的内容。例如，可以将图例项的文本和图标分别设置为不同的内容。

option = {
    legend: {
        data: [
            { name: '图例1', icon: 'circle' },
            { name: '图例2', icon: 'rect' },
            { name: '图例3', icon: 'triangle' },
            // ...
        ],
        formatter: function (name) {
            // 将图例项的文本和图标分别设置为不同的内容
            return '{icon|' + this.getItemVisual(name, 'icon') + '} {name|' + name + '}';
        },
        textStyle: {
            rich: {   // 设置富文本样式
                icon: {   // 图标样式
                    width: 20,
                    height: 20,
                    lineHeight: 20,
                    backgroundColor: '#ccc',
                    borderRadius: 10,
                    display: 'inline-block',
                    textAlign: 'center',
                    fontSize: 12,
                    color: '#fff'
                },
                name: {   // 文本样式
                    fontSize: 14,
                    color: '#333',
                    padding: [0, 5]
                }
            }
        }
    },
    // 其他配置项
};

以上是一些常用的自定义图例的方法，具体可以根据需求进行调整。