springboot动态加载Echarts柱状图
5星 · 超过95%的资源 134 浏览量
2020-08-25
06:23:43
上传
评论
收藏 55KB PDF 举报 
springboot动态加载动态加载Echarts柱状图柱状图
主要为大家详细介绍了springboot动态加载Echarts柱状图，文中示例代码介绍的非常详细，具有一定的参考价
值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了springboot动态加载Echarts柱状图的具体代码，供大家参考，具体内容如下
第一次写博客，废话不多说，直接上代码
后台代码
@RequestMapping("/rcbchart")
@ResponseBody
private String dwcb(@RequestParam("scrq1") String scrq1,@RequestParam("scrq2") String scrq2,
@RequestParam("dwmc") String dwmc) throws ParseException {
List category = new ArrayList(); //存放Echart柱状图的category
List value = new ArrayList(); //存放Echart柱状图的data
List<ViewNyDwrcb> list = rcbService.findSearchRcb(scrq1,scrq2,dwmc);
for(ViewNyDwrcb item : list){
category.add(item.getScrq());
value.add(item.getRcb());
}
String categorydata = JSON.toJSONString(category); //将list集合转换为json数组
String valuedata = JSON.toJSONString(value);
JSONObject jsonObject = new JSONObject();
jsonObject.put("categorydata",categorydata);
jsonObject.put("valuedata",valuedata);
jsonObject.put("dwmc",dwmc);
String result = JSON.toJSONString(jsonObject);
return result;
}
前台代码
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 500px; height:400px;"></div>
<script>
$("#mybtn").click(function(){
// 基于准备好的dom，初始化echarts图表
var main = echarts.init(document.getElementById('main'));
//显示加载动画
main.showLoading();
var scrq1 = document.getElementById('scrq1').value;
var scrq2 = document.getElementById('scrq2').value;
var dwmc = document.getElementById('dwmc').value;
$.ajax({
type:"POST",
cache:false,
url:"/rcbchart",
data:{"scrq1": scrq1,"scrq2": scrq2,"dwmc": dwmc},
dataType: "json",
success:function (result) {
var valuedata = JSON.parse(result.valuedata);
var categorydata = JSON.parse(result.categorydata);
//隐藏加载动画
main.hideLoading();
main.setOption({
//提示框组件
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
//直角坐标系内绘图网格，left，right，bottom分别是距离容器左侧，右侧和底部的距离
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
//X轴
xAxis: {
type: 'value',
资源评论
巴蜀明月2023-07-26：通过采用Spring Boot动态加载Echarts柱状图，该文件能够实现数据的快速更新和展示，提升了用户体验，是应用开发中的一大利器。
Jaihwoe2023-07-26：这份文件提供了清晰的步骤和示例代码，对于初学者来说易于理解和上手，是学习使用Spring Boot和Echarts的绝佳教程。
陈莽昆2023-07-26：对于需要展示大量数据的应用场景，这份文件提供了一种简单而高效的解决方案，帮助开发者快速实现数据可视化。
嗨了伐得了2023-07-26：该文件详细介绍了如何使用Spring Boot来展示动态加载的Echarts柱状图，对于开发人员来说是一份非常有价值的资源。
本本纲目2023-07-26：这份文件通过使用Spring Boot动态加载Echarts柱状图，能够实现图表的实时更新，非常实用。
