flash enums hyperlink uiviewcontroller vue原理 郑州普通话考试 cos图像和sin图像 svn查看历史版本 mysql自然连接 flutter项目案例 python建站 java开发教程 java正则表达式详解 java接口的使用 java遍历 java安装 linux远程 acmecadconverter 超级煎蛋卷 redis入门指南 ps插入表格 su版本转换器 银头鲑鱼 msn格式 流程图工具 社区网格化管理平台 联想小新键盘灯怎么开 ios删除描述文件 光头强换肤助手 神魔辅助 超级网游助手 夜之魇掉落 spring拦截器 ps怎么做动画 汪文君 imm32 热键助手 pdf分割合并工具 血岩碎片有什么用 正则表达式java
当前位置: 首页 > 学习教程  > 编程学习

使用Echarts制作动态嵌套饼图

2021/1/9 2:16:50 文章标签: 复合条饼图

笔者最近因为使用Echarts制作报表,参考了官方文档及某些博客,使用过程中有些想法,想将其中的一些记录下来,也希望能帮助到需要的人。 本例以嵌套的饼图为例。嵌套的饼图即为双层饼图,相比普通的饼图多了一组二级数据&…

笔者最近因为使用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:嵌套饼图需要设计好数据结构,才能便于前端解析展示。


本文链接: http://www.dtmao.cc/news_show_1100405.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?