Echarts餅圖legend位置調整

一、基本概念

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庫製作出更加美觀、實用的餅圖。