一篇读懂springboot用echarts实现实时柱状图和饼状图查询

1.业务说明

将数据库中的数据分别以柱状图和饼状图呈现出来
gitee项目路径：https://gitee.com/ziac/ls.git

2.1 柱状图需要引入的js

建议去echarts官网直接用方法三定制下载(本人也是如此)
地址：https://echarts.apache.org/zh/builder.html
默认，代码压缩可以不选

 <script src="/echarts.js"></script><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.js"></script>

2.2 柱状图具体实现

我是先在首页上暴露一个跳转的按钮

<input type="button" value="实时柱状图" onclick="location.href='/doColumnar'">

然后用springmvc进行页面跳转以Ajax方式访问

/*跳转到柱状图前端页面*/@RequestMapping("/doColumnar")public String doColumnar() {return "merch-columnar";}

merch-columnar.html页面

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">var myChart = echarts.init(document.getElementById('main'));// 显示标题，图例和空的坐标轴myChart.setOption({title: {text: '商品库存实时柱状图查询'},tooltip: {},legend: {data: ['库存']},xAxis: {data: []},yAxis: {},series: [{name: '库存',type: 'bar',data: []}]});// 一、将data2.json中data的name转化成数组(将名称提取出来并放到一个新数组里)function convertMonthToArray(resule) {let data = resule.data;let arr = [];for (let i = 0; i < data.length; i++) {// 1、获取data中的name属性console.log(data[i].name);// 2、将name属性放到一个新的数组里//debugger;arr.push(data[i].name);}console.log(arr);// 3、返回arr数组return arr;}//二、将data2.json中库存量装换成数组function convertIntervalDaysToArray(resule) {let data = resule.data;let arr = [];for (let i = 0; i < data.length; i++) {arr.push(data[i].stock);}return arr;}// 三、异步请求数据myChart.showLoading();$.get('http://localhost:8080/merch/findAll').done(function (resule) {myChart.hideLoading();// 获的X，函数方法要传参，不然无意义var xAxisMonth = convertMonthToArray(resule);// 获的Yvar yAxisIntervalDays = convertIntervalDaysToArray(resule);myChart.setOption({xAxis: {// 根据data2.json获取需要的值data: xAxisMonth},yAxis: {},series: [{name: '库存',type: 'bar',// 根据data2.json获取需要的值data: yAxisIntervalDays}]});})</script>
</body>

  /*后台查询所有商品，前台展现json(+柱状图)*/@RequestMapping("merch/findAll")@ResponseBodypublic JsonResult findAll(){return new JsonResult().success(merchService.findMerchs());}

这里的JsonResult是个自己写的工具类API(注解方式还要导入lombok依赖)

@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class JsonResult implements Serializable {private Integer status; //200表示成功，201表示失败private String msg;     //服务器返回的提示信息private Object data;    //服务器返回的数据//定义JsonResult封装对象public static JsonResult fail(){return new JsonResult(201,"服务器执行失败",null);}public static JsonResult success(Object data){return new JsonResult(200,"服务器执行成功",data);}public static JsonResult success(String msg, Object data){return new JsonResult(200,msg,data);}
}

service层和dao层数据库都是很简单的语句，会返回一个List<pojo对象>，如果还有点模糊的话可以往上翻翻我的gitee网站

2.3 图片展示

有点小bug，我前端数组里明明有全部的name属性，结果没全部展现，不过鼠标飘过它会显示，希望能有大神指点

3.1 饼状图需要引入的js

其实大致思路同上，我就直接上代码了

 <script src="/jquery.min.js"></script><script src="/echarts.js"></script><script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>

3.2 饼状图具体实现

<input type="button" value="实时饼状图" onclick="location.href='/doPieChart'">

 /*跳转到饼状图页面*/@RequestMapping("/doPieChart")public String doPieChart() {return "merch-pieChart";}

<body style="height: 100%; margin: 0"><div id="container" style="height: 100%"></div><script type="text/javascript">var dom = document.getElementById("container");var myChart = echarts.init(dom);var app = {};var option;option = {title: {text: '商品库存实时饼状图查询',subtext: '纯属虚构(才怪)',left: 'center'},tooltip: {trigger: 'item'},legend: {orient: 'vertical',left: 'left',},series: [{name: '访问来源',type: 'pie',radius: '50%',data: [],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};// 使用刚指定的配置项和数据显示图表if (option && typeof option === 'object') {myChart.setOption(option);}$(function () {var servicedata = [];$.ajax({url: "/merch/findAll2",type: "post",dataType: "json",success: function (data) {if (data) {var obj = eval(data);for (var i = 0; i < obj.length; i++) {var sum = new Object();sum.name = data[i].name;sum.value = data[i].stock;servicedata[i] = sum;}}myChart.setOption({series: [{//根据名字对应到相应的系列name: '访问来源',data: servicedata}]})}})})</script>
</body>

 /*后台查询所有商品,前台展现json(+饼状图)*/@RequestMapping(value = "merch/findAll2",produces = "application/json;charset=utf-8", method = RequestMethod.POST)@ResponseBodypublic List<Merch> findAll2(){List<Merch> merchs = merchService.findMerchs();return merchs;}

3.3 图片展示

OK，至此一个简单的柱状图和饼状图就完成了，如果对你有帮助最好一件三连哈!

一篇读懂springboot用echarts实现实时柱状图和饼状图查询相关推荐

Echarts 柱状图、饼状图等变换颜色、渐变色
Echarts 柱状图.饼状图等变换颜色.渐变色本文只总结了几种用到过的方法,当然,方法远不止这些.以下实测有效.之后如果遇到测试成功的方法,也会对文章进行更新.其中很多参数可以自行测试修改. 方法 ...
SpringBoot+Echarts实现请求后台数据显示饼状图
场景 SpringBoot搭建后台获取数据,前端可视化使用echarts的饼状图. Echarts3官网: https://www.echartsjs.com/index.html 获取Echarts ...
php链接echarts教程,图文详解echarts的使用方法（饼状图实例）
在页面布局时经常需要插入一些图表,比如饼状图,柱状图,地图等等,但是这些代码比较难写,因此我们通常会用借助echarts,那你知道如何使用echarts吗?这篇文章就和大家讲讲echarts的使用方法 ...
echarts 饼状图 java_SpringBoot+Echarts实现请求后台数据显示饼状图
场景 SpringBoot搭建后台获取数据,前端可视化使用echarts的饼状图. Echarts3官网获取Echarts 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供 ...
ECharts 报表事件联动系列三：柱状图，饼状图实现联动
源码如下: <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" co ...
一篇读懂--mybatis的缓存
一篇读懂–mybatis的缓存 MyBatis的缓存指的是缓存查询结果,当以后使用相同的sql语句.传入相同的参数进行查询时,可直接从mybatis本地缓存中获取查询结果,而不必查询数据库. myba ...
SpringBoot+MyBatisPlus+Echarts实现查询并显示平均时长占比饼状图
场景数据库中每个数据都有开始时间以及结束时间两个字段. 需要根据创建时间筛选出当天的四种类型的数据的平均执行时间. SpringBoot+Echarts实现请求后台数据显示饼状图: https:// ...
SpringBoot+Echarts实现一次ajax请求返回并显示多个饼状图
场景 SpringBoot+Echarts实现请求后台数据显示饼状图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/899211 ...
SpringBoot、EasyPoi、Echarts 实现文档导入、出、图表显示 (饼状图、柱状图) 保姆级教程
一.介绍环境 EasyPOI: 现在我们就来介绍下EasyPoi,首先感谢EasyPoi 的开发者.EasyPoi开源 easypoi 是为了让开发者快速的实现excel,word,pdf的导入导出 ...