<style> <!-- 必须定义高度,用来设置画布的大小,否则,折线图在页面上不显示 --> #chart5 { height: 400px; } </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> <div class="row"> <div class="col-md-12"> <div class="tab-base"> <!--Nav Tabs 设置选项卡,通过选项卡显示对应标题的折线图--> <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> <!--Tabs Content--> <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> <script> //初始化折线图 var myChart4 = echarts.init(document.getElementById('chart4')); var myChart5 = echarts.init(document.getElementById('chart5')); var option4 = { tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'category', data:[], axisTick: { alignWithLabel: true }, //设置字体倾斜 axisLabel: { interval:0, rotate:40 } } ], yAxis: [ { type: 'value', name: '单位:人' //设置Y轴的单位 } ], series: [ { name: '养老', type: 'line', // barWidth: '30%', //data: [10, 52, 200, 334, 390, 330, 220] //data: yly data: [] } ] }; var option5 = { tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'category', //data: ['区域1', '区域2', '区域3', '区域4', '区域5', '区域6', '区域7'], data: [], axisTick: { alignWithLabel: true }, axisLabel: { interval:0, rotate:40 } } ], yAxis: [ { type: 'value', name: '单位:人' } ], series: [ { name: '医保', type: 'line', // barWidth: '30%', //data: [3, 82, 400, 234, 350, 300, 120] data: [] } ] }; myChart4.setOption(option4); myChart5.setOption(option5); //加载到数据之前,显示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> |