echarts饼图legend详细解析

一、echarts饼图legend显示百分比

默认情况下，echarts饼图legend会显示每个数据项的名称。如果需要显示百分比，可以通过formatter属性来进行设置。例如：

option = {
    ...
    legend: {
        ...
        formatter: '{name} ({d}%)'
    },
    ...
};

其中，{name}会被替换为对应数据项的名称，{d}会被替换为对应的百分比。

二、echarts饼图legend横向

默认情况下，echarts饼图legend是竖向排列的。如果需要横向排列，可以通过orient属性来进行设置。例如：

option = {
    ...
    legend: {
        ...
        orient: 'horizontal'
    },
    ...
};

三、echarts饼图legend设置

除了上述常规配置之外，echarts饼图legend还可以通过其他属性进行设置，例如：

option = {
    ...
    legend: {
        type: 'scroll', // 设置为可滚动的类型
        orient: 'vertical',
        right: 10,
        top: 20,
        bottom: 20,
        data: ['数据项1', '数据项2', '数据项3', '数据项4', '数据项5'],
        selected: {} // 选中状态的设置
    },
    ...
};

四、echarts饼图legend间距

echarts饼图legend默认会根据数据项的个数来进行分行排列。如果需要控制每行的数据项个数，可以通过itemWidth和itemHeight属性来进行设置。例如：

option = {
    ...
    legend: {
        ...
        itemWidth: 30, // 每个数据项的宽度
        itemHeight: 20, // 每个数据项的高度
        padding: 0, // 数据项之间的间距
    },
    ...
};

五、echarts饼图legend点击事件

可以通过legend的点击事件来控制echarts饼图的显示。例如：

option = {
    ...
    legend: {
        ...
        selectedMode: 'single', // 当前只能选中一个数据项
        data: ['数据项1', '数据项2'],
        selected: {
            '数据项1': true // 默认选中数据项1
        },
        ...
        },
        ...
    },
    ...
    series: [{
        name: '系列名称',
        type: 'pie',
        ...
    }]
};
myChart.on('legendselectchanged', function(params) {
    myChart.dispatchAction({
        type: 'pieSelect',
        seriesName: '系列名称',
        name: params.name
    });
});

代码中的'系列名称'要和对应的series的name属性相同。

六、echarts饼图legend太多

当echarts饼图legend中的数据项太多时，可以通过设置legend的type属性为'scroll'来实现滚动效果。例如：

option = {
    ...
    legend: {
        ...
        type: 'scroll', // 设置为可滚动的类型
        data: ['数据项1', '数据项2', '数据项3', '数据项4', '数据项5']
    },
    ...
};

七、echarts饼图legend大小设置

可以通过设置legend的textStyle属性来控制echarts饼图legend中数据项的字体大小。例如：

option = {
    ...
    legend: {
        ...
        textStyle: {
            fontSize: 14 // 设置字体大小
        }
    },
    ...
};

八、echarts饼图legend位置调整

可以通过设置legend的left、right、top和bottom属性来调整echarts饼图legend的位置。例如：

option = {
    ...
    legend: {
        ...
        left: 'right', // 设置legend位于右侧
        top: 'center' // 设置legend位于中心
    },
    ...
};

九、echart饼图icon置顶

echarts饼图legend中显示的图标可以设置为显示在legend上方。例如：

option = {
    ...
    legend: {
        ...
        itemGap: 20,
        itemWidth: 30,
        itemHeight: 20,
        formatter: function(name) {
            return '{icon| }{name|' + name + '}';
        },
        textStyle: {
            rich: {
                icon: {
                    width: 30,
                    height: 20,
                    backgroundColor: '#eee',
                    borderWidth: 1,
                    borderColor: '#000'
                },
                name: {
                    padding: [0, 0, 0, 5]
                }
            }
        }
    },
    ...
    series: [{
        type: 'pie',
        data: [{
            value: 10,
            name: '数据项1'
        }, {
            value: 20,
            name: '数据项2'
        }, {
            value: 30,
            name: '数据项3'
        }, {
            value: 40,
            name: '数据项4'
        }]
    }]
};

代码中通过设置formatter属性，将icon和name分别包裹在两个span元素中，并通过在textStyle中设置rich属性，分别对icon和name进行样式的控制。

十、echarts饼图legend上下排列

当需要在echarts饼图legend中选取多个数据项并且在上下排列时，可以通过选中特定的数据项来实现。例如：

option = {
    ...
    legend: {
        ...
        data: ['数据项1', '数据项2', '数据项3', '数据项4', '数据项5']
    },
    ...
    series: [{
        type: 'pie',
        data: [{
            value: 10,
            name: '数据项1'
        }, {
            value: 20,
            name: '数据项2'
        }, {
            value: 30,
            name: '数据项3'
        }, {
            value: 40,
            name: '数据项4'
        }, {
            value: 50,
            name: '数据项5'
        }]
    }]
};
myChart.dispatchAction({
    type: 'legendSelect',
    name: ['数据项1', '数据项3', '数据项5'] // 选中数据项1、3、5
});

代码中的legendSelect事件可以通过选中特定的数据项，实现对应数据项的上下排列。