使用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")@ResponseBodypublic 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：嵌套饼图需要设计好数据结构，才能便于前端解析展示。

使用Echarts制作动态嵌套饼图相关推荐

echarts嵌套饼图自动动画_使用百度echarts制作可视化大屏——制作一个双层饼图...
使用百度echarts制作可视化大屏--制作一个双层饼图发布时间:2018-06-12 16:24, 浏览次数:745 , 标签: echarts 实现一个两层嵌套的环形图,展示三个分类下各个品牌车 ...
echarts笔记-2，嵌套饼图
嵌套饼图和单个饼图差别不大,需要之一的是,如果使用嵌套饼图,只能有一个标题和一个图例,因为虽然是两个饼图,但是是一个echarts实例需要注意的地方: 1. 注意外外部饼图和内部饼图的关系,如果外部 ...
Echarts --- 可视化练习（pie06 --- 环形嵌套饼图）
Echarts - 可视化练习(pie06 - 环形嵌套饼图) 别人想什么,我们控制不了:别人做什么,我们也强求不了.唯一可以做的,就是尽心尽力做好自己的事,走自己的路,按自己的原则,好好生活.即使有 ...
使用百度echarts制作可视化大屏——最终效果和动态数据刷新
最终效果如下图: 接下来就是数据动态刷新了,这个没什么好说的,就是一个$.post的事,传递一个json给自定义的refresh函数就行了. $.post(url,null,function(d){ ...
在jsp中使用ECharts制作图表
ECharts插件的下载地址http://echarts.baidu.com/download.html 先来看看我们要达到的效果!后面直接上代码,如下图: 下面直接贴上代码我们这里写的都是些死的数 ...
数据可视化：利用Python和Echarts制作“用户消费行为分析”可视化大屏
数据可视化:利用Python和Echarts制作"用户消费行为分析"可视化大屏前言实验目的: 准备工作: 一.创建项目: 二.建立数据库连接获取数据: 三.页面布局: 四.下载 ...
利用Echarts制作地图（一）
Echarts作为一个前端可视化工具,支持地图图表的展示.从本篇开始,将用三篇文章说明如何利用echats制作自定义区域的单图例.多图例及动态加载地图所需数据. Echarts支持 js 格式与 g ...
vue中使用echarts实现动态数据绑定、获取后端接口数据
之前几篇echarts的文章是实现了静态的柱状图.折线图.饼状图.地图,在项目中我们肯定是需要获取后端接口,将后端返回的数据显示在图表上,所以这次就记录一下如何实现echarts的动态数据绑定. 简单 ...
CSS3 制作动态相册
CSS3 制作动态相册 3D万花筒思路 1) 创建站点在站点里面再新建html文档再新建css文档再新建图片文件夹 ...

使用Echarts制作动态嵌套饼图

使用Echarts制作动态嵌套饼图相关推荐

最新文章

热门文章