Loop Using Javascript in chart / Echart

i have this object and i need to convert to pie chart (i’am using echart apache)

var data = [
    {
        "Key": "Test1",
        "value": 2
    },
    {
        "Key": "Test2",
        "value": 1
    }
]

and this my script to create a chart with real data but always show me the first value from data object (Test1 , 2) i don’t now the problem 🙂

var chartDom = document.getElementById('chart');
            var myChart = echarts.init(chartDom);
            var option;
            //console.log(UserSourceData);
            jQuery.each(UserSourceData, function (i, val) {
                    option = {
                        title: {
                            text: '某站点用户访问来源',
                            subtext: '纯属虚构',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                        },

                        series: [
                            {
                                name: '访问来源',
                                type: 'pie',
                                radius: ['30%', '60%'],
                                data: [
                                    { value: val['value'] , name:  val['Key'] }
                                ],
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                });

            option && myChart.setOption(option);

        }

Answer

I don’t know what UserSourceData represents but if you want the datapoints from the data object,you need to run the loop only for the data property within the options object.A map function would do the trick.

var chartDom = document.getElementById('chart');
var myChart = echarts.init(chartDom);
const option = {
                        title: {
                            text: '某站点用户访问来源',
                            subtext: '纯属虚构',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                        },

                        series: [
                            {
                                name: '访问来源',
                                type: 'pie',
                                radius: ['30%', '60%'],
                                data: data.map(obj => ({value:obj['value'],name:obj['Key']})),
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };

 option && myChart.setOption(option)