[Vuejs]-Incorrect color in the pie chart's slice with vue echarts

by

0👍

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.

Leave a comment