<!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 date = ['2016/11/1','2016/11/2','2016/11/3','2016/11/4','2016/11/5','2016/11/6','2016/11/7','2016/11/8','2016/11/9','2016/11/10', '2016/11/11','2016/11/12','2016/11/13','2016/11/14','2016/11/15','2016/11/16','2016/11/17','2016/11/18' ,'2016/11/19','2016/11/20','2016/11/21','2016/11/22','2016/11/23','2016/11/24','2016/11/25','2016/11/26','2016/11/27' ,'2016/11/28','2016/11/29','2016/11/30']; function my_data(){ var data = []; for( var i =0; i<30; i++){ data.push(Math.round(Math.random() * (500 - 100) + 100)); }; return data; } var num = my_data(); var bl = '30%'; var axisData = [ "2013/1/24", "2013/1/25", "2013/1/28", "2013/1/29", "2013/1/30", "2013/1/31", "2013/2/1", "2013/2/4", "2013/2/5", "2013/2/6", "2013/2/7", "2013/2/8", "2013/2/18", "2013/2/19", "2013/2/20", "2013/2/21", "2013/2/22", "2013/2/25", "2013/2/26", "2013/2/27", "2013/2/28", "2013/3/1", "2013/3/4", "2013/3/5", "2013/3/6", "2013/3/7", "2013/3/8", "2013/3/11", "2013/3/12", "2013/3/13", "2013/3/14", "2013/3/15", "2013/3/18", "2013/3/19", "2013/3/20", "2013/3/21", "2013/3/22", "2013/3/25", "2013/3/26", "2013/3/27", "2013/3/28", "2013/3/29", "2013/4/1", "2013/4/2", "2013/4/3", "2013/4/8", "2013/4/9", "2013/4/10", "2013/4/11", "2013/4/12", "2013/4/15", "2013/4/16", "2013/4/17", "2013/4/18", "2013/4/19", "2013/4/22", "2013/4/23", "2013/4/24", "2013/4/25", "2013/4/26", "2013/5/2", "2013/5/3", "2013/5/6", "2013/5/7", "2013/5/8", "2013/5/9", "2013/5/10", "2013/5/13", "2013/5/14", "2013/5/15", "2013/5/16", "2013/5/17", "2013/5/20", "2013/5/21", "2013/5/22", "2013/5/23", "2013/5/24", "2013/5/27", "2013/5/28", "2013/5/29", "2013/5/30", "2013/5/31", "2013/6/3", "2013/6/4", "2013/6/5", "2013/6/6", "2013/6/7", "2013/6/13" ]; function GetData(){ var myData = []; for( var i = 0; i < axisData.length; i++ ){ myData.push( Math.round(Math.random() * 10000) ); }; return myData; }; function GetDataHg(){ var myData = []; for( var i = 0; i < axisData.length; i++ ){ myData.push( Math.round(Math.random() * 100) ); }; return myData; }; // 路径配置 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[1].name ; str += '</br>新客户人数:' + data[1].value + ' 占比:' + bl; str += '</br>新客户销售额:' + data[1].value + ' 占比:' + bl; str += '</br>新客户成交笔数:' + data[1].value + ' 占比:' + bl; str += '</br>老客户人数:' + data[1].value + ' 占比:' + bl; str += '</br>老客户销售额:' + data[1].value + ' 占比:' + bl; str += '</br>老客户成交笔数:' + data[1].value + ' 占比:' + bl; 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 : 85, end : 100 }, calculable : true, xAxis : [ { type : 'category', boundaryGap : true, data : date } ], yAxis : [ { name : '人数', type : 'value' } ], series : [ { name:'新客户', type:'bar', //stack: '总量', barMaxWidth : 15, itemStyle:{ normal:{ borderWidth : 3 } }, data:my_data() }, { name:'老客户', type:'bar', //stack: '总量', barMaxWidth : 15, itemStyle:{ normal:{ borderWidth : 3 } }, data:my_data() }, ] }; var option2 = { title:{ text : '普通客户 忠诚客户 骨灰级客户分析', y: '15' }, backgroundColor:'white', tooltip : { trigger: 'axis', formatter : function(data){ var str = data[1].name ; str += '</br>普通客户人数:' + data[1].value + ' 占比:' + bl; str += '</br>普通客户销售额:' + data[1].value + ' 占比:' + bl; str += '</br>普通客户成交笔数:' + data[1].value + ' 占比:' + bl; str += '</br>忠诚客户人数:' + data[1].value + ' 占比:' + bl; str += '</br>忠诚客户销售额:' + data[1].value + ' 占比:' + bl; str += '</br>忠诚客户成交笔数:' + data[1].value + ' 占比:' + bl; str += '</br>骨灰级客户人数:' + data[1].value + ' 占比:' + bl; str += '</br>骨灰级客户销售额:' + data[1].value + ' 占比:' + bl; str += '</br>骨灰级客户成交笔数:' + data[1].value + ' 占比:' + bl; 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 : 70, end : 100 }, calculable : true, xAxis : [ { type : 'category', boundaryGap : true, data : date } ], yAxis : [ { name : '人数', type : 'value' } ], series : [ { name:'普通客户', type:'bar', //stack: '总量', barMaxWidth : 15, itemStyle:{ normal:{ borderWidth : 3 } }, data:my_data() }, { name:'忠诚客户', type:'bar', //stack: '总量', barMaxWidth : 15, itemStyle:{ normal:{ borderWidth : 3 } }, data:my_data() }, { name:'骨灰级客户分析', type:'bar', //stack: '总量', barMaxWidth : 15, itemStyle:{ normal:{ borderWidth : 3 } }, data:my_data() } ] }; var option4 = { title:{ text : '昨日订单来源分析', y: '15' }, backgroundColor:'white', tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient : 'vertical', x : 'right', y : 'center', data:['PC端','移动端','微信'] }, 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:335, name:'PC端'}, {value:310, name:'移动端'}, {value:234, name:'微信'} ] } ] }; 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 : 96, end : 100 }, calculable : true, grid: { x: 80, y: 40, x2:60, }, xAxis : [ { type : 'category', boundaryGap : true, data : axisData } ], yAxis : [ { type : 'value', scale:true, } ], series : [ { name:'回购率', type:'line', //stack: '人数', barWidth : 10, data:GetDataHg() } ] }; 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 : 96, end : 100 }, calculable : true, grid: { x: 80, y: 40, x2:60, }, xAxis : [ { type : 'category', boundaryGap : true, data : axisData } ], yAxis : [ { type : 'value', scale:true, } ], series : [ { name:'活跃度', type:'line', //stack: '人数', barWidth : 10, data:GetDataHg() } ] }; // 为echarts对象加载数据 myChart.setOption(option); myChart2.setOption(option4); myChart4.setOption(option2); myChart10.setOption(option10); myChart11.setOption(option11); } ); }); </script> </body> </html>