mktReportform.html 7.32 KB
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="/union/js/echarts.min.js"></script>
    <script src="/union/js/include.js"></script>
    <script src="/union/admin/echartJs.js"></script>
</head>
<body>
<table>
    <tr>
        <td>
            <div id="exposure" style="width: 800px;height:400px;"></div>
        </td>
        <td>
            <div id="active" style="width: 800px;height:400px;"></div>
        </td>
        <td>
            <div id="newuser" style="width: 800px;height:400px;"></div>
        </td>
    </tr>
    <tr>
        <td>
            <div id="exposure_ios" style="width: 800px;height:400px;"></div>
        </td>
        <td>
            <div id="active_ios" style="width: 800px;height:400px;"></div>
        </td>
        <td>
            <div id="newuser_ios" style="width: 800px;height:400px;"></div>
        </td>

    </tr>
    <tr>
        <td>
            <div id="exposure_android" style="width: 800px;height:400px;"></div>
        </td>
        <td>
            <div id="active_android" style="width: 800px;height:400px;"></div>
        </td>
        <td>
            <div id="newuser_android" style="width: 800px;height:400px;"></div>
        </td>

    </tr>
</table>
<script type="text/javascript">
    $(function(){
        $.ajax({
            type: "POST",
            url: contextPath + "/mktReportForm/getMktReportForm",
//            data: JSON.stringify(json),
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function(data){
                if (data.code == 200) {
                    debugger;
                    // 曝光量
                    var exposureOption = getEchartOption("市场费用/曝光量(CPM)",
                            ['费用','曝光量(CPM)','曝光成本'],
                            data.data.dateIdStrList,
                            data.data.totalActualCostList,
                            data.data.totalExposureNumList,
                            data.data.totalExposureRatioList,
                            data.data.topActualCost,
                            data.data.topExposureActiveNewUdid,
                            data.data.topRatio);
                    drawEchart('exposure',exposureOption);

                    var exposureIosOption = getEchartOption("ios端市场费用/曝光量(CPM)",
                            ['费用','曝光量(CPM)','曝光成本'],
                            data.data.dateIdStrList,
                            data.data.iosActualCostList,
                            data.data.iosExposureNumList,
                            data.data.iosExposureRatioList,
                            data.data.topActualCost,
                            data.data.topExposureActiveNewUdid,data.data.topRatio);
                    drawEchart('exposure_ios',exposureIosOption);

                    var exposureAndroidOption = getEchartOption("android市场费用/曝光量(CPM)",
                            ['费用','曝光量(CPM)','曝光成本'],
                            data.data.dateIdStrList,
                            data.data.androidActualCostList,
                            data.data.androidExposureNumList,
                            data.data.androidExposureRatioList,
                            data.data.topActualCost,
                            data.data.topExposureActiveNewUdid,data.data.topRatio);
                    drawEchart('exposure_android',exposureAndroidOption);

                    // 激活
                    var activeOption = getEchartOption("市场费用/激活量",
                            ['费用','激活量','激活成本'],
                            data.data.dateIdStrList,
                            data.data.totalActualCostList,
                            data.data.totalAppActiveList,
                            data.data.totalActiveRatioList,
                            data.data.topActualCost,
                            data.data.topExposureActiveNewUdid,
                            data.data.topRatio);
                    drawEchart('active',activeOption);

                    var activeIosOption = getEchartOption("ios端市场费用/激活量",
                            ['费用','激活量','激活成本'],
                            data.data.dateIdStrList,
                            data.data.iosActualCostList,
                            data.data.iosAppActiveList,
                            data.data.iosActiveRatioList,
                            data.data.topActualCost,
                            data.data.topExposureActiveNewUdid,data.data.topRatio);
                    drawEchart('active_ios',activeIosOption);

                    var activeAndroidOption = getEchartOption("android端市场费用/激活量",
                            ['费用','激活量','激活成本'],
                            data.data.dateIdStrList,
                            data.data.androidActualCostList,
                            data.data.androidAppActiveList,
                            data.data.androidActiveRatioList,
                            data.data.topActualCost,
                            data.data.topExposureActiveNewUdid,data.data.topRatio);
                    drawEchart('active_android',activeAndroidOption);

                    // 新客
                    var newuserOption = getEchartOption("市场费用/新客量",
                            ['费用','新客量','新客成本'],
                            data.data.dateIdStrList,
                            data.data.totalActualCostList,
                            data.data.totalNewUserList,
                            data.data.totalNewUdidRatioList,
                            data.data.topActualCost,
                            data.data.topExposureActiveNewUdid,data.data.topRatio);
                    drawEchart('newuser',newuserOption);

                    var newuserIosOption = getEchartOption("ios端市场费用/新客量",
                            ['费用','新客量','新客成本'],
                            data.data.dateIdStrList,
                            data.data.iosActualCostList,
                            data.data.iosNewUserList,
                            data.data.iosNewUdidRatioList,
                            data.data.topActualCost,
                            data.data.topExposureActiveNewUdid,data.data.topRatio);
                    drawEchart('newuser_ios',newuserIosOption);

                    var newuserAndroidOption = getEchartOption("android市场费用/新客量",
                            ['费用','新客量','新客成本'],
                            data.data.dateIdStrList,
                            data.data.androidActualCostList,
                            data.data.androidNewUserList,
                            data.data.androidNewUdidRatioList,
                            data.data.topActualCost,
                            data.data.topExposureActiveNewUdid,data.data.topRatio);
                    drawEchart('newuser_android',newuserAndroidOption);
                } else {
                    window.self.$.messager.alert("失败", data.message, "error");
                }
            }
        });
    });

function drawEchart(ele, option){
    var mychart = echarts.init(document.getElementById(ele));
    mychart.setOption(option);
}
</script>
</body>
</html>