//html页面需要的结果 <!-------流量报告------------> <div class="acounts flow-report"> <div class="search-banner"> <form> <ul class="agent-info" style="height:50px;" > <li style="width:90%;"> <div class="time-in left" data-i18n="base:report.4"></div> <div class="input-datepicker left"> <input id="starttime2" type="text" class="date_picker"> </div> <div class="separator left">—</div> <div class="input-datepicker left"> <input id="endtime2" type="text" class="date_picker"> </div> </li> <li class="fast_query"> <div class="time-in left" data-i18n="base:report.17"></div> <div class="left"><input type="radio" name="date" id="today"> <label for="today" data-i18n="base:report.18"></label></div> <div class="left"><input type="radio" name="date" id="thisWeek"> <label for="thisWeek" data-i18n="base:report.19"></label></div> <div class="left"><input type="radio" name="date" id="thisMonth"> <label for="thisMonth" data-i18n="base:report.20"></label></div> <div class="left"><input type="radio" name="date" id="lastMonth"> <label for="lastMonth" data-i18n="base:report.21"></label></div> </li> <li> <button class="btn-blue-2 left" type="button" id="info_img" data-i18n="base:report.5"></button> </li> <li style="clear:both;"></li> </ul> </form> </div> <div id="main" style="width: 980px;height:650px;"></div> </div> //后台返回的数据格式:{"obj":[{"name":"IANA","value":1},{"name":"水蜜桃","value":11},{"name":"黄桃","value":3}],"code":"200","msg":"sid-success_SID_SUC_07"} //js中需要的东西// 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title : { text: '流量报告分析', subtext: '', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: 'left', data: [] }, series : [ { name: '访问来源', type: 'pie', radius : '55%', center: ['50%', '60%'], data:[], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] };//计算月份var now = new Date(); var nowDayOfWeek = now.getDay(); //今天本周的第几天 var nowDay = now.getDate(); //当前日 var nowMonth = now.getMonth(); //当前月 var nowYear = now.getYear(); //当前年 nowYear += (nowYear < 2000) ? 1900 : 0; // var lastMonthDate = new Date(); //上月日期 lastMonthDate.setDate(1); lastMonthDate.setMonth(lastMonthDate.getMonth()-1); var lastYear = lastMonthDate.getYear(); var lastMonth = lastMonthDate.getMonth(); //今天 var getCurrentDate = new Date(nowYear, nowMonth, nowDay); getCurrentDate = formatDate(getCurrentDate); //获得本周的开始日期 var getWeekStartDate = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek + 1); getWeekStartDate = formatDate(getWeekStartDate); //获得本月的开始日期 var getMonthStartDate = new Date(nowYear, nowMonth, 1); getMonthStartDate = formatDate(getMonthStartDate); //获得上月开始时间 var getLastMonthStartDate = new Date(nowYear, lastMonth, 1); getLastMonthStartDate = formatDate(getLastMonthStartDate); //获得上月结束时间 var getLastMonthEndDate = new Date(nowYear, lastMonth, getMonthDays(lastMonth)); getLastMonthEndDate = formatDate(getLastMonthEndDate); $("#today").click(function(){ $("#starttime2").val(getCurrentDate); $("#endtime2").val(getCurrentDate); }) $("#thisWeek").click(function(){ $("#starttime2").val(getWeekStartDate); $("#endtime2").val(getCurrentDate); }) $("#thisMonth").click(function(){ $("#starttime2").val(getMonthStartDate); $("#endtime2").val(getCurrentDate); }) $("#lastMonth").click(function(){ $("#starttime2").val(getLastMonthStartDate); $("#endtime2").val(getLastMonthEndDate); }) //点击查询$("body").on("click", "#info_img", function () { // alert(getCurrentDate); loadImg(); }); function loadImg(){ var params = { startTime : $("#starttime2").val(), endTime : $("#endtime2").val() } var num = 0; $.get("/ipCount", params, function (a) { return resultHandle(a, function () { if(a.code=='200'){ for(var i=0; i< a.obj.length; i++){ option.legend.data.push(a.obj[i].name); num += a.obj[i].value; } option.title.subtext = "总注册量 : " + num; option.series[0].data = a.obj; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); } }); }); } //格式化日期:yyyy-MM-dd function formatDate(date) { var myyear = date.getFullYear(); var mymonth = date.getMonth()+1; var myweekday = date.getDate(); return (myyear+"-"+mymonth + "-" + myweekday); } //获得某月的天数 function getMonthDays(myMonth){ var monthStartDate = new Date(nowYear, myMonth, 1); var monthEndDate = new Date(nowYear, myMonth + 1, 1); var days = (monthEndDate - monthStartDate)/(1000 * 60 * 60 * 24); return days; } })
js使用echarts实现饼图报表
最新推荐文章于 2024-06-26 11:09:42 发布