echarts饼状图从后台传数据的方法

CSDN 永远滴神！
此文章为大二萌新小白记录的学习笔记。
如有什么不足或错误
你你你 你来打我呀（狗头保命）

假数据代码

效果预览图

代码片.

 ArrayList<Map<String,String>> list = new ArrayList<>();
        for (int i = 0; i < service.size(); i++) {  //for循环从JsonArray中取出需要的数据
            JSONObject jsonObject1 = service.getJSONObject(i);
//            System.out.println(jsonObject1);  //json对象

            Integer count = jsonObject1.getInteger("count");  //服务的次数
            total=total+count;  //所有服务的总次数
            String serviceName = jsonObject1.getString("serviceName");
            String serviceUrl = jsonObject1.getString("serviceUrl");

            HashMap<String, String> map = new HashMap<>();
            map.put("name",serviceName);
            map.put("value",count.toString());
            list.add(map);
        }
        String s = JSON.toJSONString(list);
        model.addObject("viService",s);  //封装好对应格式给饼状图
        System.out.println(list);

因为是for循环读出数据，
这里通过HashMap设置了echarts对应格式 name和value ，只需要put把相应的值输入 ，然后把map添加到list集合，转换为String格式数据传到前台就行。

直接取值

效果如下

分割线----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
补充一下后面springboot项目 通过异步点击显示饼状图更简单的方法

这是实体类

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Echarts {

    private String name;
    private String value;
}

异步调用方法

   /**
     * 对类别下面商品进行统计制作echarts柱状图
     */

    @RequestMapping("getCategoryEcharts")
    @ResponseBody
    public List<Echarts> getCategoryEcharts(){
        ArrayList<Echarts> echarts = categoryService.getCategoryEcharts();
        return echarts;
    }

饼状图盒子

<div class="layui-card">
    <div class="layui-card-body">
        <div id="columnChart" style="width: 50%; height: 500px; position: absolute"></div>
        <div id="pieChart" style="width: 50%; height: 500px; position: relative; float: right;"></div>
    </div>
</div>

异步调用方法

if (obj.event === 'getEcharts') {
                $.ajax({
                    url: 'getCategoryEcharts',
                    type: 'post',
                    dataType: 'json',
                    success: function (data) {
                        // console.log(data)
                   
                        var myChart2 = echarts.init(document.getElementById('pieChart'));

                        var option2 = {
                            tooltip: {
                                trigger: 'item'
                            },
                            legend: {
                                top: '5%',
                                left: 'center'
                            },
                            series: [
                                {
                                    name: '商品类别',
                                    type: 'pie',
                                    radius: ['40%', '70%'],
                                    avoidLabelOverlap: false,
                                    itemStyle: {
                                        borderRadius: 10,
                                        borderColor: '#fff',
                                        borderWidth: 2
                                    },
                                    label: {
                                        show: false,
                                        position: 'center'
                                    },
                                    emphasis: {
                                        label: {
                                            show: true,
                                            fontSize: '40',
                                            fontWeight: 'bold'
                                        }
                                    },
                                    labelLine: {
                                        show: false
                                    },
                                    data: data
                                       /* [
                                            {value: 1048, name: '搜索引擎'},
                                            {value: 735, name: '直接访问'},
                                            {value: 580, name: '邮件营销'},
                                            {value: 484, name: '联盟广告'},
                                            {value: 300, name: '视频广告'}
                                        ]*/
                                }
                            ]
                        };

                        myChart2.setOption(option2);
                    }
                })

            }

这样后台封装好 拿过来就可以直接用了。