使用Echarts制作动态嵌套饼图

最新推荐文章于 2024-06-21 16:31:42 发布

advant211

最新推荐文章于 2024-06-21 16:31:42 发布

阅读量9.7k

点赞数 1

分类专栏：前端文章标签： echarts 嵌套饼图

本文链接：https://blog.csdn.net/advant211/article/details/78234929

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

笔者最近因为使用Echarts制作报表，参考了官方文档及某些博客，使用过程中有些想法，想将其中的一些记录下来，也希望能帮助到需要的人。
本例以嵌套的饼图为例。嵌套的饼图即为双层饼图，相比普通的饼图多了一组二级数据，可以很好地显示二级关系，适合较为复杂的数据显示。
关于嵌套饼图，百度echarts有官方文档：嵌套饼图可以进行比对。
1.下载echarts.js。百度echarts官网下载，目前新版本为3.7.2。
2.引入echarts.js。将echarts.js放入项目中，并在页面中引入。

<script src="${pageContext.request.contextPath}/js/echarts.js"></script>

3.页面中为饼图布置空间。

<body>
<div id="graphs" style="width:1000px;height:600px;">    
</div>
</body>

4.后台传入数据。本例采用spring框架，为更好地展现数据来源，数据虚拟。

@Controller
@RequestMapping(value = "${adminPath}/sys/echarts")

…

@RequestMapping(value = "nestedPie")
    @ResponseBody
    public Map<String, Object> nestedPie(){
        Map<String, Object> resultMap = new HashMap<String, Object>();
        List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
        Map<String, Object> map;
        map = new HashMap<String, Object>();
        map.put("title", "英雄联盟");
        map.put("totalCount", 350);
        map.put("name1", "LOL");
        map.put("name2", "王者荣耀");
        map.put("count1", 200);
        map.put("count2", 150);
        list.add(map);
        map = new HashMap<String, Object>();
        map.put("title", "DOTA");
        map.put("totalCount", 280);
        map.put("name1", "刀塔");
        map.put("name2", "炉石传说");
        map.put("count1", 180);
        map.put("count2", 100);
        list.add(map);
        resultMap.put("list", list);
        return resultMap;
    }

5.前端解析展示

<script type="text/javascript">
    $(function(){
        drawEchart();
    });         

    function drawEchart(){      
        var graphs = echarts.init(document.getElementById("graphs"));
        $.post('${ctx}/sys/echarts/nestedPie', {}, function(data){      
            var list = data.list;
            option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        data:[]
                    },
                    series: [
                        {
                            name:'多人在线对战',
                            type:'pie',
                            selectedMode: 'single',
                            radius: [0, '30%'],

                            label: {
                                normal: {
                                    position: 'inner'
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data:[]
                        },
                        {
                            name:'分类',
                            type:'pie',
                            radius: ['40%', '55%'],
                            label: {
                                normal: {
                                    formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                                    backgroundColor: '#eee',
                                    borderColor: '#aaa',
                                    borderWidth: 1,
                                    borderRadius: 4,
                                    rich: {
                                        a: {
                                            color: '#999',
                                            lineHeight: 22,
                                            align: 'center'
                                        },                                     
                                        hr: {
                                            borderColor: '#aaa',
                                            width: '100%',
                                            borderWidth: 0.5,
                                            height: 0
                                        },
                                        b: {
                                            fontSize: 16,
                                            lineHeight: 33
                                        },
                                        per: {
                                            color: '#eee',
                                            backgroundColor: '#334455',
                                            padding: [2, 4],
                                            borderRadius: 2
                                        }
                                    }
                                }
                            },
                            data:[]
                        }
                    ]
                };
            for(var i = 0; i < list.length; i++){
                option.legend.data.push(list[i].name1);
                option.legend.data.push(list[i].name2);
                option.series[0].data.push({name:list[i].title, value:list[i].totalCount});
                option.series[1].data.push({name:list[i].name1, value:list[i].count1});
                option.series[1].data.push({name:list[i].name2, value:list[i].count2});
            }
            graphs.setOption(option);
        });
    }
</script>

6.最终效果
这里写图片描述
ps：嵌套饼图需要设计好数据结构，才能便于前端解析展示。

advant211

关注

1
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
使用Echarts制作动态嵌套饼图

笔者最近因为使用Echarts制作报表，参考了官方文档及某些博客，使用过程中有些想法，想将其中的一些记录下来，也希望能帮助到需要的人。本例以嵌套的饼图为例。嵌套的饼图即为双层饼图，相比普通的饼图多了一组二级数据，可以很好地显示二级关系，适合较为复杂的数据显示。关于嵌套饼图，百度echarts有官方文档：嵌套饼图可以进行比对。 1.下载echarts.js。百度echarts官网下载，目前
复制链接

扫一扫

专栏目录