场景
SpringBoot+Echarts实现请求后台数据显示饼状图：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/89921101
实现
在上面实现一次ajax请求数据返回并显示一个饼状图的基础上。
html页面修改
<script src=" href='https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.js">https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.js"></script>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<table>
<tr>
<td><div id="main1" style="width: 600px;height:400px;border:1px dashed #000;"></div></td>
<td> </td>
<td><div id="main2" style="width: 600px;height:400px;border:1px dashed #000;"></div></td>
</tr>
<tr><br/></tr>
<tr>
<td><div id="main3" style="width: 600px;height:400px;border:1px dashed #000;"></div></td>
<td> </td>
<td> <div id="main4" style="width: 600px;height:400px;border:1px dashed #000;"></div></td>
</tr>
</table>后台Controller修改
@Description("获取Echarts数据")
@RequestMapping("/EcharsShow")
@ResponseBody
public Map<String,List<Echarts>> echartsShow(Model model) {
Map<String,List<Echarts>> map = new HashMap<>();
List<Echarts> list1 = new ArrayList<Echarts>();
list1.add(new Echarts("正极车间",100));
list1.add(new Echarts("负极车间",200));
list1.add(new Echarts("立体仓库",300));
list1.add(new Echarts("清洁车间",400));
List<Echarts> list2 = new ArrayList<Echarts>();
list2.add(new Echarts("正极车间",100));
list2.add(new Echarts("负极车间",200));
list2.add(new Echarts("立体仓库",300));
list2.add(new Echarts("清洁车间",400));
List<Echarts> list3 = new ArrayList<Echarts>();
list3.add(new Echarts("正极车间",100));
list3.add(new Echarts("负极车间",200));
list3.add(new Echarts("立体仓库",300));
list3.add(new Echarts("清洁车间",400));
List<Echarts> list4 = new ArrayList<Echarts>();
list4.add(new Echarts("正极车间",100));
list4.add(new Echarts("负极车间",200));
list4.add(new Echarts("立体仓库",300));
list4.add(new Echarts("清洁车间",400));
map.put("list1",list1);
map.put("list2",list2);
map.put("list3",list3);
map.put("list4",list4);
return map;
}
js代码修改
$(document).ready(function() {
// 基于准备好的dom，初始化echarts实例
var myChart1 = echarts.init(document.getElementById('main1'));
var myChart2 = echarts.init(document.getElementById('main2'));
var myChart3 = echarts.init(document.getElementById('main3'));
var myChart4 = echarts.init(document.getElementById('main4'));
// 指定图表的配置项和数据
var names1=[];
var values1=[];
var names2=[];
var values2=[];
var names3=[];
var values3=[];
var names4=[];
var values4=[];
//数据加载完之前先显示一段简单的loading动画
myChart1.showLoading();
myChart2.showLoading();
myChart3.showLoading();
myChart4.showLoading();
$.ajax({
type : "post",
async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url : "/wmsLogisticMonitoring/EcharsShow", //请求发送到dataActiont处
data : {},
dataType : "json", //返回数据形式为json
success : function(result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (result) {
var list1 = result["list1"]
var list2 = result["list2"]
var list3 = result["list3"]
var list4 = result["list4"]
for(var i=0;i<list1.length;i++){
names1.push(list1[i].name);
values1.push(list1[i].num);
}
for(var i=0;i<list2.length;i++){
names2.push(list2[i].name);
values2.push(list2[i].num);
}
for(var i=0;i<list3.length;i++){
names3.push(list3[i].name);
values3.push(list3[i].num);
}
for(var i=0;i<list4.length;i++){
names4.push(list4[i].name);
values4.push(list4[i].num);
}
myChart1.hideLoading(); //隐藏加载动画
myChart1.setOption(
{
title: {
text: '物料运输件数',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: names1
},
series: [
{
name: '物料来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: list1,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
);
myChart2.hideLoading(); //隐藏加载动画
myChart2.setOption(
{
title: {
text: '物流单执行时长',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: names2
},
series: [
{
name: '物料来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: list2,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
);
myChart3.hideLoading(); //隐藏加载动画
myChart3.setOption(
{
title: {
text: '物流队列',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: names3
},
series: [
{
name: '物料来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: list3,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
);
myChart4.hideLoading(); //隐藏加载动画
myChart4.setOption(
{
title: {
text: '队列等待时长',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: names4
},
series: [
{
name: '物料来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: list4,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
);
}
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
});//end ajax
});//刷新方法结束效果
