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事件可以通過選中特定的數據項，實現對應數據項的上下排列。