echars legend rich使用

ECharts 是一款基于 JavaScript 的开源可视化库，提供了丰富的图表组件，包括折线图、柱状图、饼图、散点图等。ECharts 中的 legend 组件可以用于在图表中展示图例。而 rich 属性可以用来自定义图例的样式。

下面是一个使用 ECharts 中 legend rich 属性的示例：

option = {
    legend: {
        data: ['男性', '女性'],
        textStyle: {
            color: '#333'
        },
        itemWidth: 14,
        itemHeight: 14,
        itemGap: 20,
        formatter: function (name) {
            return '{' + name + '|}' + name;
        },
        selectedMode: false,
        top: 20,
        right: 20
    },
    series: [{
        name: '性别比例',
        type: 'pie',
        radius: ['40%', '60%'],
        label: {
            show: false
        },
        data: [{
            value: 60,
            name: '男性'
        }, {
            value: 40,
            name: '女性'
        }],
        itemStyle: {
            emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }],
    // 使用 rich 属性自定义图例的样式
    rich: {
        男性: {
            backgroundColor: {
                image: 'image://https://cdn.pixabay.com/photo/2018/10/30/16/06/watercolor-3792389_960_720.png'
            },
            height: 14
        },
        女性: {
            backgroundColor: {
                image: 'image://https://cdn.pixabay.com/photo/2018/10/30/16/06/watercolor-3792389_960_720.png'
            },
            height: 14
        }
    }
};

在上面的代码中，legend 组件的 formatter 属性可以用来自定义图例的显示格式。通过使用 rich 属性，我们可以为图例的每个元素设置不同的样式。在上面的示例中，我们为男性和女性分别设置了不同的背景图片和高度。