Echarts饼图legend位置调整

发布时间：2023-05-20

一、基本概念

Echarts是一个开源的可视化图表库，可以用来制作各种类型的图表。其中，饼图是Echarts中最为常见和重要的一种图表之一。在饼图中，legend指的是图例，即标记每个扇形所代表的数据的方框或其他符号。 legend通常位于饼图的左侧、右侧、上方或下方。Echarts提供了丰富的配置选项，可以调整legend的位置、大小、颜色、字体、边框等多种样式。

二、修改legend位置的方法

1. legend.center

legend.center是一个数组，包含两个数字或百分数。当设置了legend.center时，legend将会居中显示。在这种情况下，legend.left和legend.right参数不起作用。

option = {
    series: [{
        type: 'pie',
        name: 'pie',
        data: [
            {value: 335, name: 'A'},
            {value: 310, name: 'B'},
            {value: 234, name: 'C'},
            {value: 135, name: 'D'},
            {value: 1548, name: 'E'}
        ],
        center: ['50%', '50%'],
        radius: ['40%', '60%']
    }],
    legend: {
        orient: 'vertical',
        left: 'left'
    }
};

2. legend.left和legend.right

当legend.width不为'auto'时，使用left和right参数可以将legend定位到画布的左侧或右侧。当left参数为'left'时，legend将位于画布的左侧。当right参数为'right'时，legend将位于画布的右侧。

option = {
    series: [{
        type: 'pie',
        name: 'pie',
        data: [
            {value: 335, name: 'A'},
            {value: 310, name: 'B'},
            {value: 234, name: 'C'},
            {value: 135, name: 'D'},
            {value: 1548, name: 'E'}
        ],
        center: ['50%', '50%'],
        radius: ['40%', '60%']
    }],
    legend: {
        orient: 'vertical',
        width: 'auto',
        left: 'left',
        data:['A','B','C','D','E']
    }
};

3. legend.top和legend.bottom

当legend.height不为'auto'时，使用top和bottom参数可以将legend定位到画布的上方或下方。当top参数为'top'时，legend将位于画布的上方。当bottom参数为'bottom'时，legend将位于画布的下方。

option = {
    series: [{
        type: 'pie',
        name: 'pie',
        data: [
            {value: 335, name: 'A'},
            {value: 310, name: 'B'},
            {value: 234, name: 'C'},
            {value: 135, name: 'D'},
            {value: 1548, name: 'E'}
        ],
        center: ['50%', '50%'],
        radius: ['40%', '60%']
    }],
    legend: {
        orient: 'horizontal',
        height: 'auto',
        top: 'top',
        data:['A','B','C','D','E']
    }
};

三、修改legend样式的方法

1. legend.textStyle

legend.textStyle可以用来设置legend中文本的样式，例如字体、字号、颜色等。

option = {
    series: [{
        type: 'pie',
        name: 'pie',
        data: [
            {value: 335, name: 'A'},
            {value: 310, name: 'B'},
            {value: 234, name: 'C'},
            {value: 135, name: 'D'},
            {value: 1548, name: 'E'}
        ],
        center: ['50%', '50%'],
        radius: ['40%', '60%']
    }],
    legend: {
        orient: 'horizontal',
        height: 'auto',
        top: 'top',
        textStyle: {
            color: 'red',
            fontSize: 14,
            fontWeight: 'bold'
        },
        data:['A','B','C','D','E']
    }
};

2. legend.itemGap

legend.itemGap可以用来设置legend中每个图例之间的距离。

option = {
    series: [{
        type: 'pie',
        name: 'pie',
        data: [
            {value: 335, name: 'A'},
            {value: 310, name: 'B'},
            {value: 234, name: 'C'},
            {value: 135, name: 'D'},
            {value: 1548, name: 'E'}
        ],
        center: ['50%', '50%'],
        radius: ['40%', '60%']
    }],
    legend: {
        orient: 'horizontal',
        height: 'auto',
        top: 'top',
        itemGap: 20,
        data:['A','B','C','D','E']
    }
};

3. legend.itemWidth和legend.itemHeight

legend.itemWidth和legend.itemHeight可以用来设置legend中每个图例的宽度和高度。

option = {
    series: [{
        type: 'pie',
        name: 'pie',
        data: [
            {value: 335, name: 'A'},
            {value: 310, name: 'B'},
            {value: 234, name: 'C'},
            {value: 135, name: 'D'},
            {value: 1548, name: 'E'}
        ],
        center: ['50%', '50%'],
        radius: ['40%', '60%']
    }],
    legend: {
        orient: 'horizontal',
        height: 'auto',
        top: 'top',
        itemGap: 20,
        itemWidth: 20,
        itemHeight: 10,
        data:['A','B','C','D','E']
    }
};

四、修改legend背景的方法

1. legend.backgroundColor

legend.backgroundColor可以用来设置legend的背景颜色。

option = {
    series: [{
        type: 'pie',
        name: 'pie',
        data: [
            {value: 335, name: 'A'},
            {value: 310, name: 'B'},
            {value: 234, name: 'C'},
            {value: 135, name: 'D'},
            {value: 1548, name: 'E'}
        ],
        center: ['50%', '50%'],
        radius: ['40%', '60%']
    }],
    legend: {
        orient: 'horizontal',
        height: 'auto',
        top: 'top',
        itemGap: 20,
        backgroundColor: '#f4f4f4',
        data:['A','B','C','D','E']
    }
};

2. legend.borderWidth和legend.borderColor

legend.borderWidth和legend.borderColor可以用来设置legend的边框宽度和边框颜色。

option = {
    series: [{
        type: 'pie',
        name: 'pie',
        data: [
            {value: 335, name: 'A'},
            {value: 310, name: 'B'},
            {value: 234, name: 'C'},
            {value: 135, name: 'D'},
            {value: 1548, name: 'E'}
        ],
        center: ['50%', '50%'],
        radius: ['40%', '60%']
    }],
    legend: {
        orient: 'horizontal',
        height: 'auto',
        top: 'top',
        itemGap: 20,
        backgroundColor: '#f4f4f4',
        borderWidth: 1,
        borderColor: 'gray',
        data:['A','B','C','D','E']
    }
};

总结

通过上面的介绍，我们了解到了Echarts饼图legend位置调整的一些基本概念、方法和技巧。我们可以使用legend.center、legend.left和legend.right、legend.top和legend.bottom等方法来调整legend的位置；使用legend.textStyle、legend.itemGap、legend.itemWidth和legend.itemHeight等方法来修改legend的样式；使用legend.backgroundColor、legend.borderWidth和legend.borderColor等方法来修改legend的背景和边框。希望这篇文章能给大家带来一些帮助，让大家更好地使用Echarts库制作出更加美观、实用的饼图。

推荐文章