jfinal框架中从后台获取数据，并使用echarts折线图渲染到页面上

最新推荐文章于 2022-11-10 16:34:07 发布

iamlzjoco

最新推荐文章于 2022-11-10 16:34:07 发布

阅读量665

点赞数 1

文章标签： jfinal echarts ajax 折线图选项卡

本文链接：https://blog.csdn.net/iamlzyoco/article/details/93975154

版权

1.dao层：

public List<ZkltSjjl> findTrendYB(){
       String sql = "select a.jfdd, a.jflx,b.name, count(1) as total"
               +" from zklt_sjjl a left join"
               +" zklt_area b on b.id = a.jfdd"
               +" where a.yxbs = '1' and a.jflx = '2'"
               +" group by a.jfdd, a.jflx,b.name";
       return ZkltSjjl.dao.find(sql);
   }

public List<ZkltSjjl> findTrendYL(){
       String sql = "select a.jfdd, a.jflx,b.name, count(1) as total"
               +" from zklt_sjjl a left join"
               +" zklt_area b on b.id = a.jfdd"
               +" where a.yxbs = '1' and a.jflx = '1'"
               +" group by a.jfdd, a.jflx,b.name";
       return ZkltSjjl.dao.find(sql);
   }

2.controller层：

public void getTrendYB() {
       List<ZkltSjjl> findTrendYB = ZkltSjjl.dao.findTrendYB();
       renderJson(findTrendYB);
   }

public void getTrendYL() {
       List<ZkltSjjl> findTrendYL = ZkltSjjl.dao.findTrendYL();
       renderJson(findTrendYL);
   }

3.HTML页面：

</style>
<script>

//定义四个空数组，用来存放X轴和Y轴的数据

var ylx=[];var yly=[];var ybx=[];var yby=[];

//页面默认加载

$(document).ready(function () {

$.ajax({
   type : "get",
   url : ctx + "/admin/zklt/payInfo/getTrendYL",
   dataType: "json",
   success : function(result) {

   for(var i =0;i<result.length;i++){
       if(null == result[i].name){
           ylx.push("其他");
       }else{
           ylx.push(result[i].name);
       }

       yly.push(result[i].total);
   }

   myChart4.hideLoading();
   myChart4.setOption({
   xAxis:{
   data:ylx
   },
   series:[{
   data:yly
   }]
   });

   },
       error:function(){
           alert("error");
       }
   });

   $.ajax({
   type : "get",
   url : ctx + "/admin/zklt/payInfo/getTrendYB",
   dataType: "json",
   success : function(data) {
//把从后台获取到的数据存放到对应的数组中
   for(var i =0;i<data.length;i++){
       ybx.push(data[i].name);
       yby.push(data[i].total);
   }
//隐藏loading动画
   myChart5.hideLoading();

//设置折线图的X轴和Y轴的数据，即把从后台获取到数据赋值给折线图的横纵轴
   myChart5.setOption({
   xAxis:{
   data:ybx
   },
   series:[{
   data:yby
   }]
   });
   },
       error:function(){
           alert("error");
       }
   });
   });

</script>

<ul class="nav nav-tabs">
               <li class="active">
                   <a data-toggle="tab" href="#yl">养老保险缴纳趋势</a>
               </li>
               <li>
                   <a data-toggle="tab" href="#yb">医保保险缴纳趋势</a>
               </li>
           </ul>

<div class="tab-content">

<div id="yl" class="tab-pane fade active in">
                   <div id="chart4"></div>
               </div>

<div id="yb" class="tab-pane fade">
                   <div id="chart5"></div>
               </div>
           </div>
       </div>
   </div>
</div>
<script src="#(ctx)/common/plugins/echart/echarts.min.js"></script>

//初始化折线图

var myChart4 = echarts.init(document.getElementById('chart4'));
var myChart5 = echarts.init(document.getElementById('chart5'));

//加载到数据之前，显示loading动画
   myChart4.showLoading();
   myChart5.showLoading();

   $('a[href="#yl"]').on('shown.bs.tab', function(e) {
       e.preventDefault();
       myChart4.resize();
       myChart5.resize();
   });
   $('a[href="#yb"]').on('shown.bs.tab', function(e) {
       e.preventDefault();
       myChart4.resize();
       myChart5.resize();
   });

</script>

iamlzjoco

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
jfinal框架中从后台获取数据，并使用echarts折线图渲染到页面上

1.dao层： public List<ZkltSjjl> findTrendYB(){ String sql = "select a.jfdd, a.jflx,b.name, count(1) as total" +" from zklt_sjjl a left join" +...
复制链接

扫一扫