先看一下效果
前端代码:
<script type="text/javascript">
$(top.hangge());
$(function () {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
$.ajax({
type: "POST",
url: '<%=basePath%>chart/carStatus.do',
dataType: 'json',
data: {},
success: function (data) {
debugger;
myChart.hideLoading();
myChart.setOption({
title: {
text: '车辆状态分布状态',
subtext: '',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: data.list
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['60%', '50%'],
data: data.varList,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
});
}
});
});
</script>
我们看一下echarts需要的数据格式
可以看到图例需要一个List,series是一个list里面包含了多个map
Java后台代码
echrts的series里面的键必须全部是小写
由于我是oracle数据库查出来的都是大写,所以我的map我会将大写全部替换成小写
/**
* @Author
* @Description //TODO 车辆状态分布状态饼图
* @Date 2020/5/19 15:43
* @Param page
* @return java.lang.Object
**/
@RequestMapping(value="/carStatus")
@ResponseBody
public Object carStatus(Page page)throws Exception{
PageData pd=new PageData();
HashMap<String, Object> map = new HashMap<>();
List<PageData> varList = adjustCoalDetailManager.carStatusChart(pd);
ArrayList<Object> list = new ArrayList<>();
ArrayList<Object> arrayList = new ArrayList<>();
for (PageData pageData : varList) {
HashMap<Object, Object> hashMap = new HashMap<>();
String name = pageData.getString("NAME");
list.add(name);
String value = pageData.getString("VALUE");
//将map的K大写全部替换为小写
hashMap.put("name",name);
hashMap.put("value",value);
arrayList.add(hashMap);
}
map.put("list",list);
map.put("varList",arrayList);
return map;
}
我们来看一下最终效果