springboot动态加载Echarts柱状图
人气:0第一次写博客,废话不多说,直接上代码
后台代码
@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', boundaryGap: [0, 0.01] }, //Y轴 yAxis: { type: 'category', data: categorydata }, series: [ { name: result.dwmc, type: 'bar', data: valuedata } ] }) } }) }); </script>
效果图
您可能感兴趣的文章:
加载全部内容