小程序容器助力企业在金融与物联网领域实现高效合规运营,带来的新机遇与挑战如何管理?
398
2023-07-04
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
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;
}
前台代码
$("#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',
boundaryGap: [0, 0.01]
},
//Y轴
yAxis: {
type: 'category',
data: http://categorydata
},
series: [
{
name: result.dwmc,
type: 'bar',
data: valuedata
}
]
})
}
})
});
效果图
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~