ECharts不刷新页面动态加载数据,异步加载报表数据

<include file="Public:head"/>
<script src="./tpl/User/default/common/js/date/WdatePicker.js" type="text/javascript"></script>

<div class="content" >
<div class="cLineB">
  <h4>ECharts不刷新页面动态加载数据,异步加载报表数据<span class="FAQ"></span></h4>
 </div>

  <div class="cLine">
    <div class="pageNavigator r">
  		<div style="float:right">
	  		<table width="700" id="tablesT" border="0">
			  <tr>
				<form action="{awzsr::U('Globalkeywords/index', array('token' => $token))}" method="post" name="formsearch">
				    <td align="right"><span style="font-size: 16px">类型:</span> &nbsp;&nbsp;&nbsp;&nbsp;
                        <select name="searchtype" id="searchtype" style="padding: 8px 4px;">
                            <option value="all_QB">全部</option>
                            <option value="all_QB2 ">全部二维码</option>
                            <option value="all_QT">其他</option>
                            <option value="Sbm">二维码识别码</option>
                        </select>
                        <span class="Findkeyword" style="display: none;"><span style="font-size: 16px"> &nbsp;&nbsp;关键字:</span> &nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="keyword" name="keyword" style=" padding: 8px 4px;"  class="px" placeholder="请输入关键字" ></span>
                    </td>
				    <td align="right"><span style="font-size: 16px"> 报表类型:</span> &nbsp;&nbsp;&nbsp;&nbsp;
                        <select  name="reporttype" id="reporttype" style="padding: 8px 4px;">
                            <option value="">请选择</option>
                            <option value="day">日报表</option>
                            <option value="month">月报表</option>
                            <option value="year">年报表</option>
                        </select>
                    </td>
				    <td align="right"><span style="font-size: 16px"> 时间:</span> &nbsp;&nbsp;&nbsp;&nbsp;<input type="input" class="px" id="statdate" name="starttime" value="" style="width: 70px;padding: 8px 4px;" > 至 <input style="width: 70px;padding: 8px 4px;" type="input" class="px" id="enddate"  name="endtime" value="" ></td>
				    <td align="right"><a class="btnGrayS vm bigbtn" title="查询" href="javascript:void(0)" onclick="formsearchSubmit();" >搜索</a></td>
				    <td align="right"><a class="btnGrayS vm bigbtn" title="下载报表" href="javascript:void(0)" >下载</a></td>
				</form>
			  </tr>
			</table>
  		</div>
    </div>


</div>
<div class="msgWrap form">
<div class="bdrcontent">
<div id="div_ptype">
    <br/>
    <div id="main" class="main" style="height:400px"></div>
    <br/>
    <div id="main1" class="main" style="height:400px"></div>
</div>
</div>

          </div>

        </div>

        <div class="clr"></div>
      </div>
    </div>
  </div>
  <!--底部-->
 </div>

<style>
    .main {
        height: 400px;
        /*width: 778px !important;*/
        overflow: hidden;
        padding : 10px;
        margin-bottom: 10px;
        border: 1px solid #e3e3e3;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
        -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    }
</style>
<script src="http://echarts.baidu.com/doc/example/www/js/echarts.js"></script>
<script type="text/javascript">

    var categories = [];
    var values = [];

    var curTheme;
    var myChart;
    var myChart1;

    var needRefresh = false;
    var initData = true;
    var domMain = document.getElementById('main');
    var domMain1 = document.getElementById('main1');


    var startdate = $("#statdate").val();
    var enddate = $("#endtime").val();
    var reporttype = $("#reporttype").val();
    var keyword = $("#keyword").val();
    var searchtype = $("#searchtype").val();

    var option = {
        title : {
            text: '粉丝数据分析',
            subtext: '',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient : 'vertical',
            x : 'left',
            data:['仅关注粉丝量','注册用户量','注册用户取消关注量','未注册直接取消关注量']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {
                    show: true,
                    type: ['pie', 'funnel']
                },
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : false,
        series : [
            {
                name:'说明',
                type:'pie',
                selectedMode: 'single',
                radius : [0, 70],

                // for funnel
                x: '20%',
                width: '40%',
                funnelAlign: 'right',
                max: 1548,

                itemStyle : {
                    normal : {
                        label : {
                            position : 'inner',
                            formatter: '{c}'
                        },
                        labelLine : {
                            show : false
                        }
                    }
                },
                data:[
                    {value:335, name:'仅关注粉丝量', selected:true},
                    {value:679, name:'注册用户量'},
                    {value:679, name:'注册用户取消关注量'},
                    {value:1548, name:'未注册直接取消关注量'}
                ]
            },
            {
                name:'说明',
                type:'pie',
                radius : [100, 140],

                // for funnel
                x: '60%',
                width: '35%',
                funnelAlign: 'left',
                max: 1048,

                data:[
                    {value:835, name:'粉丝总数'}
                ]
            }
        ]
    };

    var option1 = {
        tooltip : {
            trigger: 'axis'
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        legend: {
            data:['未注册','已注册用户取消关注量','未注册用户取消关注量','注册量']
        },
        xAxis : [
            {
                type : 'category',
                data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            }
        ],
        yAxis : [
            {
                type : 'value',
                name : '人数',
                axisLabel : {
                    formatter: '{value}'
                }
            },
            {
                type : 'value',
                name : '',
                axisLabel : {
                    formatter: ' '
                }
            }
        ],
        series : [
            {
                name:'未注册',
                type:'bar',
                data:[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '{c}'
                        }
                    }
                }
            },
            {
                name:'已注册用户取消关注量',
                type:'bar',
                data:[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '{c}'
                        }
                    }
                }
            },
            {
                name:'未注册用户取消关注量',
                type:'bar',
                data:[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '{c}'
                        }
                    }
                }
            },
            {
                name:'注册量',
                type:'line',
                yAxisIndex: 1,
                data:[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '{c}'
                        }
                    }
                }
            },

        ]
    };


    function formsearchSubmit(){
        startdate = $("#statdate").val();
        enddate = $("#endtime").val();
        reporttype = $("#reporttype").val();
        keyword = $("#keyword").val();
        searchtype = $("#searchtype").val();
        if(reporttype==""){
            alert("请选择报表类型");
            return;
        }
        needRefresh = true;
        refresh(true);
    }


    function focusGraphic() {
        if (needRefresh) {
            myChart.showLoading({
                text: '正在努力加载中...'
            });
            myChart1.showLoading({
                text: '正在努力加载中...'
            });
            setTimeout(refresh, 1000);
        }
    }

    function requireCallback (ec, defaultTheme) {
        curTheme = defaultTheme? defaultTheme:{};
        echarts = ec;
        needRefresh = true;
        refresh();
        window.onresize = myChart.resize;
        window.onresize = myChart1.resize;
    }

    function refreshData(){

    }

    function refresh(isBtnRefresh){
        if (isBtnRefresh) {
            needRefresh = true;
            focusGraphic();
            return;
        }

        if(initData){
            initData = false;
            myChart = echarts.init(domMain,curTheme);
            myChart1 = echarts.init(domMain1,curTheme);
            myChart.showLoading({
                text: '正在努力加载中...'
            });
            myChart1.showLoading({
                text: '正在努力加载中...'
            });
            //return;
        }
        $.ajax({
            dataType: 'json',
            async: true,
            data:{reporttype: reporttype,searchtype:searchtype,startdate:startdate,enddate:enddate,keyword:keyword,searchtype:searchtype},
            type: "POST",
            url: 'index.php?g=User&m=Report&a=index_getData&token&type=={awzsr:$token}',
            complete: function (msg) {
                // alert('complete');
            },
            success: function (data) {
                categories = data.categories;
                startdate  = data.view_starttime;
                enddate  = data.view_endtime;

                option1.xAxis[0]['data']  = categories;
                option1.series[0].data  = data.notMemberList_detail;
                option1.series[1].data  = data.memberUnsubscribeList_detail;
                option1.series[2].data  = data.unsubscribeList_detail;
                option1.series[3].data  = data.memberList_detail;


                option.title.subtext =  startdate+" 至 "+enddate;
                option.series[0].data =  data.data;
                option.series[1].data =  data.data1;
                option.series[0].max  = data.max_data;
                option.series[1].max  = data.max_data1;

                $("#statdate").val(data.view_starttime);
                $("#enddate").val(data.view_endtime);
                $("#reporttype").val(data.view_type);
                $("#searchtype").val(data.searchtype);
                $("#keyword").val(data.keyword);

                needRefresh = false;
                if (myChart && myChart.dispose) {
                    myChart.dispose();
                }
                if (myChart1 && myChart1.dispose) {
                    myChart1.dispose();
                }

                myChart = echarts.init(domMain,curTheme);
                myChart1 = echarts.init(domMain1,curTheme);

                window.onresize = myChart.resize;
                window.onresize = myChart1.resize;

                myChart.setOption(option, true);
                myChart1.setOption(option1, true);
                myChart.hideLoading();
                myChart1.hideLoading();

            },
            error: function (data) {
                alert("数据加载错误");
                myChart.hideLoading();
                myChart1.hideLoading();
            }
        });


    }

    var echarts;
    // 路径配置
    require.config({
        paths: {
            echarts: 'http://echarts.baidu.com/build/dist'
        }
    });

    launch();

    var isExampleLaunched;
    function launch() {
        if (isExampleLaunched) {
            return;
        }

        isExampleLaunched = 1;
        // 使用
        require(
                [
                    'echarts',
                    'echarts/theme/macarons',
                    'echarts/chart/line',
                    'echarts/chart/bar',
                    'echarts/chart/funnel',
                    'echarts/chart/pie'
                ],
                requireCallback


        );

    }




</script>
<script type="text/javascript">

    $(document).ready(function() {

        $("#statdate").click(function(){
            var reporttype = $("#reporttype").val();
            if(reporttype=="") alert('请先选择报表类型');
        });

        $("#enddate").click(function(){
            var reporttype = $("#reporttype").val();
            if(reporttype=="") alert('请先选择报表类型');
        });
        $("#searchtype").change(function(){
            var searchtype = $("#searchtype").val();
            if(searchtype=='Sbm'){
                $(".Findkeyword").show();
                $("#tablesT").width('900px');
            }else{
                $(".Findkeyword").hide();
                $("#tablesT").width('700px');

            }

        });
        $("#reporttype").change(function(){
            var reporttype = $("#reporttype").val();
            $("#statdate").val("");
            $("#enddate").val("");
            if(reporttype=='day'){
                $("#statdate").click(function(){
                    WdatePicker({dateFmt:'yyyy-MM-dd'});
                });
                $("#enddate").click(function(){
                    WdatePicker({dateFmt:'yyyy-MM-dd'});
                });
            }else if(reporttype=='month'){
                $("#statdate").click(function(){
                    WdatePicker({dateFmt:'yyyy-MM'});
                });

                $("#enddate").click(function(){
                    WdatePicker({dateFmt:'yyyy-MM'});
                });
            }else if(reporttype=='year'){
                $("#statdate").click(function(){
                    WdatePicker({dateFmt:'yyyy'});
                });

                $("#enddate").click(function(){
                    WdatePicker({dateFmt:'yyyy'});
                });
            }

        });

    });
</script>
<include file="Public:footer"/>