coupon-admin/view/manager/statistical/sign.html

{layout name="manager/layout" /}
<div class="layui-row layui-col-space12">
    <div class="layui-col-xs12 layui-col-md12">
        <div style="background-color:#ffffff;min-height:600px;">
            <div class="layuimini-container location-index-page">
                <div class="layuimini-main">
                    <fieldset class="table-search-fieldset">
                        <legend>搜索信息</legend>
                        <div style="margin: 10px 10px 10px 10px">
                            <form class="layui-form layui-form-pane" action="">
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        时间段:
                                        <div class="layui-inline">
                                            <input type="text" class="layui-input" value="{$startTime}" id="start_time">
                                        </div>
                                        -
                                        <div class="layui-inline">
                                            <input class="layui-input" type="text" value="{$endTime}"  id="end_time">
                                        </div>
                                    </div>

                                    <div class="layui-inline">
                                        <label class="layui-form-label">平台商</label>
                                        <div class="layui-input-block">
                                            <select name="agency">
                                                <option value=""></option>

                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-inline layui-hide" >
                                        <label class="layui-form-label">类型</label>
                                        <div class="layui-input-block">
                                            <select name="agency">
                                                <option value="release" selected>发布数量</option>
                                                <option value="sign">签到数量</option>
                                                <option value="receive">领取数量</option>
                                            </select>
                                        </div>
                                    </div>


                                    <div class="layui-inline">
                                        <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </fieldset>
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-xs12 layui-col-md12">
                            <div id="echarts-dataset" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>
                        </div>
                        <div class="layui-col-xs12 layui-col-md12">
                            <div id="echarts-map" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['echarts', 'jquery', 'form', 'laydate'], function () {
        var laydate = layui.laydate,
            $  =  layui.jquery,
            echarts  =  layui.echarts
        ;
        //日期时间选择器
        laydate.render({
            elem: '#start_time'
            ,type: 'date'
        });
        laydate.render({
            elem: '#end_time'
            ,type: 'date'
        });

        /**
         * 中国地图
         */
        var echartsMap = echarts.init(document.getElementById('echarts-map'), 'walden');

        //console.log( JSON.parse('{$x|raw}'));
        var x = JSON.parse('{$x|raw}');//X轴
        var release = JSON.parse('{$releaseDataArray|raw}');//发布
        var signDataArray = JSON.parse('{$signDataArray|raw}');//发布
        var receiveDataArray = JSON.parse('{$receiveDataArray|raw}');//发布
        // console.log( JSON.parse('{$releaseDataArray|raw}'));
        // console.log( JSON.parse('{$signDataArray|raw}'));
        var optionMap = {
            legend: {},
            tooltip: {
                trigger: 'axis',
                showContent: false
            },
            dataset: {
                source: [

                    x,//X轴
                    // ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
                    release,//发布数量
                    signDataArray,//签到数量
                    receiveDataArray,//领取数量
                    //折线图
                    // ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
                    // ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
                    // ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
                    // ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
                ]
            },
            xAxis: {type: 'category'},
            yAxis: {gridIndex: 0},
            grid: {top: '55%'},
            series: [
                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                {
                    type: 'pie',
                    id: 'pie',
                    radius: '30%',
                    center: ['50%', '25%'],
                    label: {
                        formatter: '{b}: {@2012} ({d}%)'
                    },
                    encode: {
                        itemName: 'x',
                        value: '2012',
                        tooltip: '2012'
                    }
                }
            ]
        };

        echartsMap.setOption(optionMap);


        // echarts 窗口缩放自适应
        window.onresize = function () {
            echartsMap.resize();
        }

    })
</script>