ECharts饼图系列数据添加动态数组

Question

我有一个对象的动态数组 arr，它产生以下结果：

{value:0, name:'Safety'},{value:0, name:'Environmental'},{value:0, name:'Finance'},{value:0, name:'Health'},{value:1, name:'Quality'}

我想用在下面JavaScript:

                        series: [
                        {
                            name: 'Pie Chart',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: [arr]
                            //data: [{value:0, name:'Safety'},{value:0, name:'Environmental'},{value:0, name:'Finance'},{value:0, name:'Health'},{value:1, name:'Quality'}]
                        }
                    ]

但是，当我使用 data: [arr] 时，没有显示任何图表。但是，如果我粘贴原始数组输出，它就会起作用。

有什么办法可以解决这个问题？

编辑：调试器结果如下：

["{value:0, name:'Safety'}", "{value:0, name:'Environmental'}", "{value:0, name:'Finance'}", 2 more...]

当我 alert(arr) 时显示没有双引号。

编辑 2. 下面是完整代码

<script type="text/javascript">

            window.onload = function () {
                $.ajax({
                    dataType: "json",
                    url: "/Home/GetDataPie",
                    type: "POST",
                    data: JSON,
                    success: function (data) {
                        PieChart(data);

                    },
                    error: function () {
                        alert("err!");
                    }
                });

            }

            function PieChart(data) {

                var arr = [];

                var arrayLength = data.value.length;
                for (var i = 0; i < arrayLength; i++) {
                    var item = "{value:" + parseInt(data.value[i]) + ",name:'" + data.name[i] + "'}";
                    arr.push(item);
                }
                //shows correct array list
                //alert(arr);

                var myChart = echarts.init(document.getElementById('main'));

                option = {
                    title: {
                        text: 'My Chart',
                        subtext: '',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        data: data.name
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: true },
                            magicType: {
                                show: true,
                                type: ['pie'],
                                option: {
                                    funnel: {
                                        x: '25%',
                                        width: '50%',
                                        funnelAlign: 'left',
                                        max: 1548
                                    }
                                }
                            },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    calculable: false,
                    series: [
                        {
                            name: 'Pie Chart',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: arr

                        }
                    ]
                };


                myChart.setOption(option);
            }


        </script>

这是结果：

谢谢。

已解决

用户@AshishMalhotra 在下面的评论中给出的正确答案

替换

var item = "{value:" + parseInt(data.value[i]) + ",name:'" + data.name[i] + "'}";

和

var item = {value: data.value[i] ,name:data.name[i]};

Answer 1

尝试替换

data: [arr]

和

data: arr

因为arr本身就是一个数组，arr = [{value:0, name:'Safety'},{value:0, name:'Environmental'},{value:0, name: 'Finance'},{值:0, 名称:'Health'},{值:1, 名称:'Quality'}].

这意味着您的数据属性当前设置为读取 [[{value:0, name:'Safety'},{value:0, name:'Environmental'}, {value:0, name:'Finance'},{value:0, name:'Health'},{value:1, name:'Quality'}]], 或者一个只有一个值的数组, 即 arr.

Answer 2

您好，希望对您有所帮助：

首先尝试构建数据和数据系列：

try building the data for legend and data series first as:

var groupChartData=[];
var groupEmployeeDataSeries=[];

// build from dynamic data (json or array) 
<for data: datalist>
      groupChartData.push(data.name);
      groupEmployeeDataSeries.push({value:data.value,name:data.name+"("+ data.value+")"});
</for>
echartPie.setOption({
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
       legend: {
        x: 'center',
        y: 'bottom',
        data: groupChartData
      }, 
      toolbox: {
        show: true,
        feature: {
          magicType: {
            show: true,
            type: ['pie', 'funnel'],
            option: {
              funnel: {
                x: '25%',
                width: '50%',
                funnelAlign: 'left',
                max: 1548
              }
            }
          },
          saveAsImage: {
            show: true,
            title: "Save Distribution"
          }
        }
      },
      calculable: true,
      series: [{
        name: 'Employee Distribution ('+type+' Wise)',
        type: 'pie',
        radius: '55%',
        center: ['50%', '48%'],
        data:groupEmployeeDataSeries
      }]
    });

它对我有用。

Answer 3

用户@AshishMalhotra 在评论中给出的正确答案

替换

var item = "{value:" + parseInt(data.value[i]) + ",name:'" + data.name[i] + "'}";

和

var item = {value: data.value[i] ,name:data.name[i]};

ECharts饼图系列数据添加动态数组

Add dynamic array to ECharts Pie Chart series data

javascript

arrays

echarts