Echarts Pie - 没有颜色的碎片答案

【问题标题】：Echarts Pie - pieces without colorEcharts Pie - 没有颜色的碎片
【发布时间】：2019-02-01 14:37:40
【问题描述】：

我的问题似乎接近THIS 帖子（没有解决方案）。

有人可以帮我做一个我们颜色的 Echarts Pie 吗？我有2个版本的Echarts，一个官方的，一个修改的，只有官方版本（最新）才会出现问题。

我正在使用来自 PHP 变量的数据。当我将数据更改为静态数字时，正式版可以工作，但静态数据的颜色会变松。重要提示：我在变量中有正确的数据，因为饼图显示的数据正确，但只有黑白。

感谢任何帮助。

这是我的饼图代码：

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

【问题讨论】：

标签： colors pie-chart echarts

【解决方案1】：

确保数据是动态通过的，在图表完成加载之前加载。您需要完全加载数据，以便图表可以使用它。

【讨论】：

【解决方案2】：

不是在数据中给出名称和值，而是创建一个对象数组并将其定义在一个变量中并将其传递到系列数据中。使用的值仅用于演示您可以使用对象创建数组，例如 objectDemo 或 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

【讨论】：