Echarts сложенные диаграммы, как работать с данными - PullRequest
0 голосов
/ 05 сентября 2018

Используя 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
    })

и вот мой кодовый блок

1 Ответ

0 голосов
/ 19 сентября 2018

Я не уверен, но ты этого хочешь? вот jsFiddle

enter image description here

получить данные каждой серии по:

    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
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...