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