Echarts Pie - pieces without color - colors

Question

My problem appears to be close to THIS post (without solution).
Could anybody help me with a Echarts Pie withour colors? I have 2 versions of Echarts, an official and another modified, and the problem occours only with the official version (latest).
I am using data from PHP variables. Official version works when I change data to static numbers, but loose colors with static data. IMPORTANT: I have the correct data in the variables, because the pie appears with correct data, but black & white only.
Thanx any help.
Here is my pie code:
<div id="main2" style="width: 600px;height:400px;"></div></td></tr></table>
<script>
var csimpa = '<?php echo $csimpa[$mescert] ?>';
var cesprega = '<?php echo $cesprega[$mescert] ?>';
var cespdefa = '<?php echo $cespdefa[$mescert] ?>';
var cinta = '<?php echo $cinta[$mescert] ?>';
var cespparta = '<?php echo $cespparta[$mescert] ?>';
// Create a pie chart:
echarts.init(document.getElementById('main2')).setOption({
/*title : {
text: 'CERTID\u00d5ES EXPEDIDAS',
subtext: '2018',
x:'center'
},*/
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
/*legend: {
orient: 'vertical',
left: 'left',
data: ['CS','CI']
},*/
visualMap: {
show: false,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1]
}
},
series : [
{
name: 'CERTID\u00d5ES',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value: csimpa, name:'Simplificada'},
//{value:<? echo $cespoaba[$mescert] ?>, name:'Esp - OAB'},
{value: cesprega, name:'Esp - Existencia'},
{value: cespdefa, name:'Esp - Definir'},
{value: cinta, name:'Inteiro Teor'},
{value: cespparta, name:'Esp - Participa'}
]/*.sort(function (a, b) { return a.value - b.value; }),
roseType: 'radius'*/,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx) {
return Math.random() * 200;
}
}
]
});
</script>

Answer 1

Make sure if the data is coming through dynamically, that it is loaded before the chart finishes loading. You need the data fully loaded so that the chart can use it.

Answer 2

Instead of giving name and value inside the data create an array of objects and define it in a variable and pass it inside series data.
The values used are just for demo
you can use an array of object creation like objectDemo or objectDemo2
let values = [224, 214, 139, 312, 176]
let categories = ['Simplificada', 'Esp - Existencia', 'Esp - Definir', 'Inteiro Teor', 'Esp - Participa']
let objectDemo2 = values.map((d,i) => {
return {
name: categories[i],
value: values[i]
}
})
let objectDemo = [
{value: 224, name:'Simplificada'},
{value: 214, name:'Esp - Existencia'},
{value: 139, name:'Esp - Definir'},
{value: 312, name:'Inteiro Teor'},
{value: 176, name:'Esp - Participa'}
]
option = {
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
visualMap: {
show: true,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1]
}
},
series : [
{
name: 'CERTID\u00d5ES',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data: objectDemo2/*.sort(function (a, b) { return a.value - b.value; }),
roseType: 'radius'*/,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx) {
return Math.random() * 200;
}
}
]
};
You can see the working of the above code