<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css"> <link rel="stylesheet" href="__TMPL__/public/rfm/css/animsition.min.css" /> <link rel="stylesheet" href="__TMPL__/public/rfm/css/drop-down.css" /> <link rel="stylesheet" href="__TMPL__/public/rfm/css/common.css" /> <link rel="stylesheet" href="__TMPL__/public/rfm/css/qk.css" /> <link rel="stylesheet" href="__TMPL__/public/rfm/css/xgzb.css" /> </head> <body> <div class="data_wrap" style="background: #efeff5; width: 1020px; padding: 10px; overflow: hidden;"> <div class="animsition"> <div class="qk_wrap" style=" margin-bottom: 10px;"> <div> <div id="main4" class="my_main" style="width: 1020px;"></div> </div> </div> <div class="xhzb_wrap" style="height: 250px"> <div> <div id="main11" class="my_main3"></div> </div> </div> <div class="xhzb_wrap" style="height: 250px"> <div> <div id="main10" class="my_main3"></div> </div> </div> <div class="qk_wrap" style=" margin-bottom: 10px;"> <div> <div id="main1" class="my_main" style="width: 630px;"></div> </div> <div> <div id="main2" class="my_main" style="width: 380px;"></div> </div> </div> </div> </div> </div> <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> <script src="http://www.jq22.com/jquery/jquery-ui-1.11.0.js"></script> <script src="__TMPL__/public/rfm/js/select-widget-min.js"></script> <script src="__TMPL__/public/rfm/js/jquery.animsition.min.js"></script> <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> <script src="__TMPL__/public/rfm/js/macarons .js"></script> <script src="__TMPL__/public/rfm/js/common.js"></script> <script src="__TMPL__/public/rfm/js/select-widget-min.js"></script> <script src="__TMPL__/public/rfm/js/jquery.animsition.min.js"></script> <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> <script> $(document).ready(function() { //初始化切换 $(".animsition").animsition({ inClass : 'fade-in-right', outClass : 'fade-out', inDuration : 1500, outDuration : 800, linkElement : '.animsition-link', // e.g. linkElement : 'a:not([target="_blank"]):not([href^=#])' loading : true, loadingParentElement : 'body', //animsition wrapper element loadingClass : 'animsition-loading', unSupportCss : [ 'animation-duration', '-webkit-animation-duration', '-o-animation-duration' ], //"unSupportCss" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser. //The default setting is to disable the "animsition" in a browser that does not support "animation-duration". overlay : false, overlayClass : 'animsition-overlay-slide', overlayParentElement : 'body' }); //医院总体时长横坐标数据 var totalDateX = JSON.parse('{$hospital}'); //医院总体时长纵坐标数据 var totalDateY = JSON.parse('{$num}'); //时间段统计数据 var dateX = ['21点-7点','7点-12点','12点-17点','17点-21点']; var dateY = JSON.parse('{$interval}'); var num=0; $.each(dateY,function (i, v) { num+=v }); //周统计数据 var weekDataX = ["第一周","第二周","第三周","第四周","第五周","第六周", "第七周", "第八周","第九周","第十周","第十一周","第十二周","第十三周","第十四周","第十五周"]; var weekDataY = JSON.parse('{$weekData}'); //月统计数据 var monthDataX = ["第一月","第二月","第三月","第四月","第五月","第六月", "第七月", "第八月","第九月","第十月","第十一月","第十二月","第十三月","第十四月","第十五月", "第十六月","第十七月","第十八月","第十九月","第二十月","第二十一月","第二十二月","第二十三月","第二十四月"]; var monthDataY = JSON.parse('{$monthData}'); // 路径配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist' } }); // 使用 require( [ 'echarts', 'echarts/chart/bar', 'echarts/chart/line', 'echarts/chart/pie'// 使用柱状图就加载bar模块,按需加载 ], function (ec) { // 基于准备好的dom,初始化echarts图表 var myChart = ec.init(document.getElementById('main1'),'macarons'); var myChart2 = ec.init(document.getElementById('main2'),'macarons'); var myChart4 = ec.init(document.getElementById('main4'),'macarons'); var myChart10 = ec.init(document.getElementById('main10'),'macarons'); var myChart11 = ec.init(document.getElementById('main11'),'macarons'); //时间段统计(柱形图) var option = { backgroundColor:'white', title:{ text : '时间段统计', y: '15' }, tooltip : { trigger: 'axis', formatter : function(data){ //console.log(data); var str = data[0].name ; str += '</br>总人数:' + data[0].value + ' 占比:' + (data[0].value/num)*100+'%'; return str; } }, grid:{ y:'100' }, toolbox: { show : false, y:'20', feature : { mark : {show: false}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, dataZoom : { show : true, realtime : true, y: 320, height: 20, start : 0, end : 100 }, calculable : true, xAxis : [ { type : 'category', boundaryGap : true, data : dateX } ], yAxis : [ { name : '人数', type : 'value' } ], series : [ { name:'人数', type:'bar', //stack: '总量', barMaxWidth : 15, itemStyle:{ normal:{ borderWidth : 3 } }, data:dateY } ] }; //医院总时长 var option2 = { title:{ text : '医院总体使用时长', y: '15' }, backgroundColor:'white', tooltip : { trigger: 'axis', formatter : function(data){ var str = data[0].name ; str += '</br>普通客户人数:' + data[0].value; return str; } }, legend: { selectedMode : false, data:[], y:'20' }, grid:{ y:'100' }, toolbox: { show : false, y:'20', feature : { mark : {show: false}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, dataZoom : { show : true, realtime : true, y: 320, height: 20, start : 0, end : 100 }, calculable : true, xAxis : [ { type : 'category', boundaryGap : true, data : totalDateX } ], yAxis : [ { name : '人数', type : 'value' } ], series : [ { name:'普通客户', type:'bar', //stack: '总量', barMaxWidth : 15, itemStyle:{ normal:{ borderWidth : 3 } }, data:totalDateY } ] }; //时间段统计(饼状图) var option4 = { backgroundColor:'white', tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient : 'vertical', x : 'right', y : 'center', data:['21点-7点','7点-12点','12点-17点','17点-21点'] }, toolbox: { show : false, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : { show: true, type: ['pie', 'funnel'], option: { funnel: { x: '25%', width: '50%', funnelAlign: 'center', max: 1548 } } }, restore : {show: true}, saveAsImage : {show: true} } }, calculable : false, series : [ { name:'占比', type:'pie', center:['40%','55%'], radius : ['40%', '52%'], itemStyle : { normal : { label : { show : false }, labelLine : { show : false } }, emphasis : { label : { show : true, position : 'center', textStyle : { fontSize : '30', fontWeight : 'bold' } } } }, data:[ {value:dateY[0], name:'21点-7点'}, {value:dateY[1], name:'7点-12点'}, {value:dateY[2], name:'12点-17点'}, {value:dateY[3], name:'17点-21点'} ] } ] }; //月统计 var option10 = { backgroundColor : "white", color : ["#c05050","#59678c"], title : { x : '980', y : 'center', text: '月\n统\n计', textStyle : { fontSize : 16 } }, tooltip : { trigger: 'axis', showDelay: 0, // 显示延迟,添加显示延迟可以避免频繁切换,单位ms formatter: "{b}</br>{a} : {c}次" }, dataZoom : { show : true, realtime: true, y : 220, height: 20, start : 50, end : 100 }, calculable : true, grid: { x: 80, y: 40, x2:60, }, xAxis : [ { type : 'category', boundaryGap : true, data : monthDataX } ], yAxis : [ { type : 'value', scale:true, } ], series : [ { name:'月统计', type:'line', //stack: '人数', barWidth : 10, data:monthDataY } ] }; //周统计 var option11 = { backgroundColor : "white", color : ["#59678c"], title : { x : '980', y : 'center', text: '周\n统\n计', textStyle : { fontSize : 16 } }, tooltip : { trigger: 'axis', showDelay: 0, // 显示延迟,添加显示延迟可以避免频繁切换,单位ms formatter: "{b}</br>{a} : {c}次" }, dataZoom : { show : true, realtime: true, y : 220, height: 20, start : 50, end : 100 }, calculable : true, grid: { x: 80, y: 40, x2:60, }, xAxis : [ { type : 'category', boundaryGap : true, data : weekDataX } ], yAxis : [ { type : 'value', scale:true, } ], series : [ { name:'周统计', type:'line', //stack: '人数', barWidth : 10, data:weekDataY } ] }; // 为echarts对象加载数据 myChart.setOption(option); myChart2.setOption(option4); myChart4.setOption(option2); myChart10.setOption(option10); myChart11.setOption(option11); } ); }); </script> </body> </html>