微客导航 » 文章资讯 » SpringBoot+Echarts实现请求后台数据显示饼状图

SpringBoot+Echarts实现请求后台数据显示饼状图

2023-08-04 08:26:08 206

场景

SpringBoot搭建后台获取数据，前端可视化使用echarts的饼状图。

Echarts3官网

获取Echarts

从官网下载界面选择你需要的版本下载，根据开发者功能和体积上的需求，我们提供了不同打包的下载，如果你在体积上没有要求，可以直接下载完整版本。开发环境建议下载源代码版本，包含了常见的错误提示和警告。

在ECharts的GitHub上下载最新的release版本，解压出来的文件夹里的dist目录里可以找到最新版本的echarts库。

通过npm获取echarts，npminstallecharts--save，详见“在webpack中使用echarts”

cdn引入，你可以在cdnjs，npmcdn或者国内的bootcdn上找到ECharts的最新版本。

引入ECharts

ECharts3开始不再强制使用AMD的方式按需引入，代码里也不再内置AMD加载器。因此引入方式简单了很多，只需要像普通的JavaScript库一样用script标签引入。

绘制一个简单的图表

在绘图前我们需要为ECharts准备一个具备高宽的DOM容器。

然后就可以通过echarts.init方法初始化一个echarts实例并通过setOption方法生成一个简单的柱状图，下面是完整代码。





ECharts

//基于准备好的dom，初始化echarts实例 varmyChart=echarts.init(document.getElementById('main')); //指定图表的配置项和数据 varoption={ title:{ text:'ECharts入门示例' }, tooltip:{}, legend:{ data:['销量'] }, xAxis:{ data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis:{}, series:[{ name:'销量', type:'bar', data:[5,20,36,10,10,20] }] }; //使用刚指定的配置项和数据显示图表。 myChart.setOption(option);

这样你的第一个图表就诞生了！

以上是官网示例。

实现

html中引入echarts

在模板中已经引入jquery，这里不再引入。

编写js

$(document).ready(function(){

//基于准备好的dom，初始化echarts实例
varmyChart=echarts.init(document.getElementById('main'));
//指定图表的配置项和数据
varnames=[];
varvalues=[];
//数据加载完之前先显示一段简单的loading动画
myChart.showLoading();
$.ajax({
type:"post",
async:true,//异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url:"/wmsLogisticMonitoring/EcharsShow",//请求发送到dataActiont处
data:{},
dataType:"json",//返回数据形式为json
success:function(result){
//请求成功时执行该函数内容，result即为服务器返回的json对象
if(result){
for(vari=0;i{b}:{c}({d}%)"
},
legend:{
orient:'vertical',
left:'left',
data:names
},
series:[
{
name:'物料来源',
type:'pie',
radius:'55%',
center:['50%','60%'],
data:result,
itemStyle:{
emphasis:{
shadowBlur:10,
shadowOffsetX:0,
shadowColor:'rgba(0,0,0,0.5)'
}
}
}
]
}
);
}
},
error:function(errorMsg){
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
});//endajax

});//刷新方法结束

SpringBoot后台编写

编写实体类Echarts

packagecom.ws.bus.sys.vo.LogisticsMonitoring;

importlombok.Data;

/**
*Createdbybadaoon2019/5/7.
*/
@Data
publicclassEcharts{
privateStringname;
privateIntegervalue;

publicEcharts(Stringname,Integervalue){
this.name=name;
this.value=value;
}

publicEcharts(){
}
}

编写后台Controller

@Description("获取Echarts数据")
@RequestMapping("/EcharsShow")
@ResponseBody
publicListechartsShow(Modelmodel){
Listlist=newArrayList();
list.add(newEcharts("正极车间",100));
list.add(newEcharts("负极车间",200));
list.add(newEcharts("立体仓库",300));
list.add(newEcharts("清洁车间",400));
returnlist;
}

效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

SpringBoot+Echarts实现请求后台数据显示饼状图

热门推荐

随机推荐