main.html 8.89 KB
{include file="common/head"/}
<div class="admin-main layui-anim layui-anim-upbit">
    <div class="table-responsive">
        <table class="layui-table" lay-even lay-skin="line">
            <colgroup>
                <col width="40%">
                <col>
            </colgroup>
            <fieldset class="layui-elem-field layui-field-title">
                <legend>预订数据概览</legend>
            </fieldset>
<div id="container" style="width: 60%;height:400px;float:left;"></div>
<div id="container1" style="width: 500px;height:400px;margin-left:65%"></div>

            <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=1iGjZaNqCgMp0vtQ8xB2ilbAcX9zTugj&__ec_v__=20190126"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
             <fieldset class="layui-elem-field layui-field-title">
                <legend>系统信息</legend>
            </fieldset>
            <thead>
            </thead>
            <tbody>
            <tr>
                <td>网站域名</td>
                <td>{$config.url}</td>
            </tr>
            <tr>
                <td>网站目录</td>
                <td>{$config.document_root}</td>
            </tr>
            <tr>
                <td>服务器操作系统</td>
                <td>{$config.server_os}</td>
            </tr>
            <tr>
                <td>服务器端口</td>
                <td>{$config.server_port}</td>
            </tr>
            <tr>
                <td>服务器IP</td>
                <td>{$config.server_ip}</td>
            </tr>
            <tr>
                <td>MySQL数据库版本</td>
                <td>{$config.mysql_version}</td>
            </tr>
            <tr>
                <td>运行PHP版本</td>
                <td>{$config.php_version}</td>
            </tr>

            <tr>
                <td>最大上传限制</td>
                <td>{$config.max_upload_size}</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
{include file="common/foot"/}
<script type="text/javascript">
layui.use(['table', 'layer'], function(){
    var table = layui.table;
    var layer = layui.layer;
    var $ = layui.jquery;
    var endworkdate = null;

    //页面一加载就发送ajax
    $(function(){
        loading = layer.load(1, {shade: [0.1, '#fff']});
        $.ajax({
            url: "/admin/Index/main",
            type: "POST",
            datType: "json",
            success: function(data){
                layer.close(loading);
                var dom = document.getElementById("container");
                var dom1 = document.getElementById("container1");
                var myChart = echarts.init(dom);
                var myChart1 = echarts.init(dom1);
                var app = {};
                option = null;
                option = {
                    title: {
                        text: '一键订近一周预订来源',
                        subtext: '数据来源仅合作店铺',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: ['在线订单', '内部订单'],
                        left: 'left',
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: data.data.time
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                        }
                    ],
                    series: [
                        {
                            name: '在线订单',
                            type: 'line',
                            stack: '总量',
                            smooth: true,
                            areaStyle: {color: '#37a2da'}, 
                            lineStyle: {
                                color: '#2195ae',
                                width: 3
                            },
                            itemStyle: {color: '#2195ae',},
                            data: data.data.online
                        },

                        {
                            name: '内部订单',
                            type: 'line',
                            smooth: true,
                            stack: '总量',
                            areaStyle: {color: '#46b1c3'}, 
                            lineStyle: {
                                color: '#66e0e3',
                                width: 3
                            },
                            itemStyle: {color: '#66e0e3',},
                            data: data.data.unline
                        }
                    ]
                };
                option1 = null;
                option1 = {
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    title: {
                        text: '一键订近一周预订来源',
                        subtext: '数据来源仅合作店铺',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['在线预订', '内部预订']
                    },
                    series: [
                        {
                            name: '数据概览',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '55%'],
                            data: [
                                    {
                                        value:data.data.online_sum,
                                        name:'在线预订',
                                        itemStyle: {
                                            color: '#37a2da'
                                        }
                                    },
                                    {
                                        value:data.data.unline_sum,
                                        name:'内部预订',
                                        itemStyle: {
                                            color: '#46b1c3'
                                        }
                                    }
                            ],
                            clockwise: true,
                            label: {
                                normal: {
                                    textStyle: {
                                        fontSize: 18,
                                        color: '#333333'
                                    }
                                }
                            },
                            itemStyle: {
                                // 设置扇形的颜色
                                shadowBlur: 150,
                                shadowColor: 'rgba(5, 10, 243)'
                            }
                        }
                    ]
                };
                if (option1 && typeof option1 === "object") {
                    myChart1.setOption(option1, true);
                }
                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            }
        });

    })
});
</script>
</body>
</html>