圖表堆積的條形圖如何處理數據

Question

使用echarts ，考慮以下情況，我如何才能得到水平堆疊條形圖，我有一些小組，而小組有不同類別的雇員：自由職業者，永久雇員，學生...

我想按組顯示：划分的員工類別堆棧，但在這種情況下尚不清楚，我如何處理代碼

import echarts from 'echarts';
let groupChart = echarts.init(document.getElementById('chartGroups'));


axios.get('/chart')
    .then(function (response) {
        // handle success

        let stack = {}
        let re = response.data
        let categories = Object.keys(re.stacks).map(function(key, index) {
            return key
        })

        let arr = re.labels.map(item => ({
            name: item,
            type: 'bar',
            stack: item,
            label: {
            normal: {
                show: true,
                    position: 'insideRight'
                }
            },

            data: []
        }))

        console.log(arr)
        let app = {}
        app.title = 'Employees';

        let option = {
            tooltip : {
                trigger: 'axis',
                axisPointer : {
                    type : 'shadow'
                }
            },
            legend: {
                data: re.labels
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis:  {
                type: 'value'
            },
            yAxis: {
                type: 'category',
                data: categories
            },
            series: arr
        }

        groupChart.setOption(option, true);
    })
    .catch(function (error) {
        // handle error
        console.log(error);
    })
    .then(function () {
        // always executed
    })

這是我的codepen

Answer 1

我不確定，但是你想要這個嗎？ 這是jsFiddle

通過以下方式獲取每個系列的數據：

    let data = [];
    categories.forEach((category) => {
        let index = re.stacks[category].findIndex(item => {
            return item[label];
        })
        if (index !== -1) {
            data.push(re.stacks[category][index][label]);
        } else {
            data.push(null)
        }
    })

如果要在每個類別上堆疊， series.stack應該保持不變，則可以使用以下任何字符串：

   {
        name: label,
        type: 'bar',
        stack: 'anyString',
        label: {
            normal: {
                show: true,
                position: 'insideRight'
            }
        },
        data: data
    }