javascript - Echarts堆积条形图如何处理数据

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
    }