echarts $.ajax返回数据循环添加data[]

最新推荐文章于 2023-12-04 17:43:56 发布

三枪不倒地

最新推荐文章于 2023-12-04 17:43:56 发布

阅读量1.3k

点赞数 1

文章标签： echarts

本文链接：https://blog.youkuaiyun.com/qq_15545909/article/details/81664514

版权

本文介绍如何使用ECharts结合Ajax动态加载数据并显示为饼图。通过具体代码示例展示了初始化ECharts实例、显示加载提示、发送Ajax请求获取数据及设置图表配置项的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        myChart.showLoading();
        $.ajax({
            url:"/regionAccount/selectDownCount",
            dataType:"json",
            type:"post",
            success:function (data) {
                myChart.hideLoading();
                myChart.setOption({
                    series : [
                        {
                            name: '下级数量',
                            type: 'pie',
                            radius: '55%',
                            data:function () {
                                var res=[];
                                $.each(data.data,function(key,vale){
                               res.push({
                                    value:vale.downCount,
                                    name:vale.groupName
                                    });
                                });
                                return res;
                            }()
                        }
                    ]
                })
            }
        })
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);