图表堆积的条形图如何处理数据

Question

Using echarts how can I have a horizontal stack bar chart taking in consideration the following scenario, I have groups and group has employees of different categories: freelance, permanent, student...

I want to show per group: divided stacks of employee categories but is not clear in this case how do I handle the code

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
    })

and here is my codepen

Answer 1

I'm not sure but is this you want? here is jsFiddle

get data of each series by :

    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)
        }
    })

and if you want stack on each category, the series.stack should remain the same, you can use any string like below:

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