SpringBoot+Echarts实现一次ajax请求返回并显示多个饼状图
2024-05-25 19:01:15
场景
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")@ResponseBodypublic 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", //返回数据形式为jsonsuccess : 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});//刷新方法结束效果
SpringBoot+Echarts实现一次ajax请求返回并显示多个饼状图相关推荐
- ECharts的学习（二）：制作一个简单的饼状图，并对其设置样式
这是学习ECharts的练手之作,中文学习网址:http://echarts.baidu.com/index.html 实现效果图如下: <!DOCTYPE html> <html& ...
- echarts柱状图显示百分比_Echarts 饼状图显示信息,内容,值,百分比都显示的代码 更改图例等问题汇总...
增加了显示比例,显示内容 显示比例代码显示完整代码: series: [{name:'访问来源',type:'pie',radius: ['50%', '70%'],avoidLabelOverlap ...
- vue+elementui+echarts饼状图内部显示百分比
<!--饼状图--><div id="main" style="width: 400px;height: 350px;"></di ...
- SpringBoot+Echarts实现请求后台数据显示饼状图
场景 SpringBoot搭建后台获取数据,前端可视化使用echarts的饼状图. Echarts3官网: https://www.echartsjs.com/index.html 获取Echarts ...
- IE bug:ajax请求返回304解决方案
IE bug:ajax请求返回304解决方案 参考文章: (1)IE bug:ajax请求返回304解决方案 (2)https://www.cnblogs.com/fanyx/p/6773256.ht ...
- ajax failed啥意思,AJAX请求返回200 OK，但是一个错误事件被触发而不是成功。
AJAX请求返回200 OK,但是一个错误事件被触发而不是成功. 我已经在我的网站上实现了一个Ajax请求,我正在从一个网页调用端点.它总是回来200 OK,但是jQuery执行错误事件.我试了很多东 ...
- ajax返回request,WordPress的Ajax请求返回0(Wordpress ajax request return 0)
WordPress的Ajax请求返回0(Wordpress ajax request return 0) 你好,我有一个WordPress的问题我无法获得ajax电话,我找不到原因. 我的查询一直返回 ...
- ajax绑值,AJAX请求,返回json进行页面绑值
前台代码: index.html 去往含有ajax的页面 点我! queryList.html AJAX请求,返回json进行页面绑值 var name = "测试"; //测试与 ...
- ajax返回字符串怎么处理,ajax请求返回json字符串/json对象 处理
1. 返回json字符串如何处理 $.ajax({ url:xxx, success:function(date){ }, error:function(){ } }); 通过最原始的返回: Prin ...
最新文章
- tomcat中server.xml文件详解
- IT服务台来电分配技术——ACD介绍
- 什么是EEG以及如何解释EEG?
- python 命令行参数-Python 命令行参数解析
- struts2的OGNL表达式理解(一)
- LifseaOS 悄然来袭，一款为云原生而生的 OS
- (视频+图文)机器学习入门系列-第15章
- mac电脑开机键盘和鼠标失灵
- 第七届(16年)蓝桥杯java B组决赛真题及前四题解析
- dbeaver 设置编码_初学者必须知道的idea设置
- 今天跟某个投了社区团购的资本合伙人聊，发现对于社区团购的认知，还是太肤浅
- 已经发车的票还能取出来吗_网上预订汽车票不知道怎么退票？
- ST-Link驱动安装不正确,设备管理器黄色感叹号,win10安装stlink驱动
- W3school离线手册最新版下载
- 供应商管理系统SRM
- 用LabVIEW开发简仪USB101数据采集卡会是怎样的？
- android:style/theme.holo.light,Galaxy Nexus上的Android Theme.Holo.Light在模拟器没有的时候有灰色背景...
- Windows Kits（Windows 工具包）
- 百子作业 —— 中国邮递员问题
- 学习笔记：运算放大器（OPA）超详细讲解（内含运用电路仿真）