springboot动态加载Echarts柱状图

 更新时间:2019年12月19日 09:56:06   作者:Amustrming  
这篇文章主要为大家详细介绍了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',
          boundaryGap: [0, 0.01]
        },
        //Y轴
        yAxis: {
          type: 'category',
          data: categorydata
        },
        series: [
          {
            name: result.dwmc,
            type: 'bar',
            data: valuedata
          }
        ]
      })
    }
  })
  });
</script>

效果图

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • java实现日历功能

    java实现日历功能

    这篇文章主要为大家详细介绍了java实现日历功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • java截取网页图片的方法

    java截取网页图片的方法

    这篇文章主要介绍了java截取网页图片的方法,涉及java调用第三方控件实现截图的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • java中继承测试代码分析

    java中继承测试代码分析

    这篇文章主要介绍了java中继承测试代码分析,具有一定借鉴价值,需要的朋友可以参考下。
    2017-12-12
  • java使用httpclient 发送请求的示例

    java使用httpclient 发送请求的示例

    HttpClient 是Apache Jakarta Common 下的子项目,可以用来提供高效的、最新的、功能丰富的支持 HTTP 协议的客户端编程工具包,并且它支持 HTTP 协议最新的版本和建议,这篇文章主要介绍了java使用httpclient 发送请求的示例,需要的朋友可以参考下
    2023-10-10
  • 如何在springboot中配置和使用mybatis-plus

    如何在springboot中配置和使用mybatis-plus

    这篇文章主要给大家介绍了关于如何在springboot中配置和使用mybatis-plus的相关资料,MyBatis Plus是MyBatis的增强版,旨在提供更多便捷的特性,减少开发工作,同时保留了MyBatis的灵活性和强大性能,需要的朋友可以参考下
    2023-11-11
  • Spring框架基于注解的AOP之各种通知的使用与环绕通知实现详解

    Spring框架基于注解的AOP之各种通知的使用与环绕通知实现详解

    这篇文章主要介绍了Spring框架基于注解的AOP之各种通知的使用及其环绕通知,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2022-11-11
  • Java中的Map集合简单汇总解析

    Java中的Map集合简单汇总解析

    这篇文章主要介绍了Java中的Map集合简单汇总解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • Java网络编程UDP协议发送接收数据

    Java网络编程UDP协议发送接收数据

    这篇文章主要为大家详细介绍了Java网络编程UDP协议发送接收数据,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • SpringBoot Redis配置多数据源的项目实践

    SpringBoot Redis配置多数据源的项目实践

    springboot中默认的redis配置是只能对单个redis库进行操作的, 那么我们需要多个库操作的时候这个时候就可以采用redis多数据源 ,本文就介绍了SpringBoot Redis配置多数据源,感兴趣的可以了解一下
    2023-07-07
  • Java 处理树形结构数据的过程

    Java 处理树形结构数据的过程

    这篇文章主要介绍了Java 处理树形结构数据的过程,本文给大家分析具体实现过程,结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08

最新评论