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 --><p id="main" ></p><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>

看完上述内容，你们掌握springboot中怎么动态加载Echarts柱状图的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！