Incorrect color in the pie chart's slice with vue echarts

Question

I have an issue with my pie chart created with the vue-echarts. The problem is that there is color mismatch with the bar (the legend, too) and the pie chart. I have some polls with different types of questions and the issue seems to be only with the questions of rating type, because the there the answers are with value from 1 to 10. Here is how the pie chart looks like:

As you can see, the most used answer is 4 and it is with color blue. In the bar chart it correctly represents the most chosen answer, the percentage in the pie chart is also fine, but the color in the slice is the yellow one, instead of the blue one. Here is my code:

let newChart = {
    legend: {
        orient: 'horizontal',
        left: 'left',
        textStyle: {
            width: 200,
            overflow: 'truncate'
        },
        formatter: params => this.legendFormatter(params, poll.questionType)
    },
    title: {
        subtext: '',
        left: '50%',
        top: '45%',
        textAlign: 'center'
    },
    tooltip: {
        trigger: 'axis',
        showContent: true,
        formatter: params => this.tooltipFormatter(params, poll.questionType)
    },
    xAxis: { type: 'category', axisLabel: { rotate: 30 } },
    yAxis: { gridIndex: 0 },
    grid: { top: '50%' },
    dataset: {
        source: []
    },
    series: []
}

for (const answer in poll.total) {
    total.push({ name: answer, value: poll.total[answer] })
    newChart.series.push({
        type: 'bar',
        smooth: true,
        stack: 'stack',
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
    })
}

newChart.series.push({
    name: 'Activity',
    type: 'pie',
    radius: '25%',
    center: ['50%', '25%'],
    data: [],
    emphasis: {
        itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
    },
    label: {
        formatter: params => this.pieLabelFormatter(params, poll.questionType),
        rich: {
            percentage: {
                fontWeight: 'bold',
                color: '#000'
            }
        },
        padding: 5
    }
})

newChart.dataset.source = poll.dataset
newChart.series[newChart.series.length - 1].data = total
newChart.title.subtext = poll.questionName
this.charts.push(newChart)

Also, here is the output of the data:

It all looks fine with the code and the data passed into the chart, but cannot find out the problem with the color difference. If someone agree that the problem could be from the library, I can open an issue on their github, but I have some doubts it could be also in my code.

Just for a reference, this is another question type that has text answers and the colors are fine:

Answer 1

I have found the issue for the problem and it can be seen in the screenshot of the backend response. When the backend logic is collecting the answers and how many times the same answer has been chosen, it add it into an object and put the answer (in this case the choice of 1-4) as a property of the object. By default, it orders them in ascending order, thus, in the totals, the order is different. In the image it is as follow:

series: {
    ...
    3: {
        data: Array(3)
            0: { name: '2' , value: 1 },
            1: { name: '3' , value: 4 }
            2: { name: '4' , value: 9 }
    }
}

Which is in exact opposite order than the dataset:

dataset: {
    source: Array {
        1: ['4', ...],
        2: ['3', ...],
        3: ['2', ...]
    }
}

So, initially it orders the colors as follows: the blue for '4', the green for '3' and yellow for '2'. Then, it will order the slices' colors blue for '2', green for '3' and yellow for '4'. The problem comes from that I am using an object as a key-value pair collection and js automatically orders object properties in ascending order if they look like numbers. If I set space prefix like ' 4', it will keep the order correct.

As a conclusion: There are 2 solutions for this:

1. Add a prefix that will be taken into account in the FE when reading the data.
2. Using an array to keep this data instead of object.