js使用echarts实现饼图报表

男娘i 2022-07-15 05:40 261阅读 0赞

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