js使用echarts实现饼图报表

//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;
    }
})



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值