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

Posted 2021-04-06

使用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

答案

我不确定，但这是你想要的吗？这是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
    }