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

用户@AshishMalhotra在评论

中给出的正确答案

替换

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

与

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

Answer 2

尝试替换

data: [arr]

与

data: arr

由于arr本身就是一个数组，因此arr = [{值：0，名称：'安全'}，{值：0，名称：'环境'}，{值：0，名称：'财务'}，{值：0，名称：'健康'}，{值：1，名称：'质量'}]。

这意味着您的数据属性当前设置为读取[[{值：0，名称：'安全'}，{值：0，名称：'环境'}，{值：0，名称：'财务' }，{value：0，name：'Health'}，{value：1，name：'Quality'}]]，或带有一个值的数组，即arr。

Answer 3

您好，我希望这会对您有所帮助：

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

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
      }]
    });

这对我有用。

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

3 个答案: