| | |
| | | </button> |
| | | </div> |
| | | </div> |
| | | <div class="form-group mr-20" id="timeBox"> |
| | | <div class="form-group mr-20 mt-20" id="timeBox"> |
| | | |
| | | <label>统计范围</label> |
| | | |
| | | <input name="beginTime" type="text" autocomplete="off" |
| | |
| | | name="endTime" type="text" class="form-control datetimepicker" autocomplete="off" |
| | | id="endTime"> |
| | | </div> |
| | | <div class="form-group mr-20"> |
| | | <div class="form-group mr-20 "> |
| | | <label>统计单位</label> |
| | | <select name="statisticsUnit" class=" form-control " id="unitSelect" |
| | | style="width: 80px"> |
| | |
| | | </form> |
| | | <!-- 搜索框部分en --> |
| | | |
| | | <div class="row chartsBox"> |
| | | <div class="row chartsBox " style="margin-top: 40px"> |
| | | <div class=" col-md-12"> |
| | | <div class="echarts" id="echarts-line-chart2"></div> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- <div class="row chartsBox " style="margin-top: 40px"> |
| | | <div class=" col-md-12" id="table"> |
| | | <table class="table table-striped" > |
| | | <thead> |
| | | <tr> |
| | | <th>时间</th> |
| | | <th v-for="name in legend" >{{name}}</th> |
| | | </tr> |
| | | </thead> |
| | | <tbody> |
| | | <tr v-for="(item,index) in xAxis"> |
| | | <td>{{item}}</td> |
| | | |
| | | <td v-for="data in series[index].data" >{{data}}</td> |
| | | </tr> |
| | | </tbody> |
| | | </table> |
| | | </div> |
| | | </div> |
| | | --> |
| | | |
| | | </div> |
| | | <script type="text/javascript" th:src="@{/js/systools/MJsBase.js}"></script> |
| | |
| | | <script type="text/javascript" th:src="@{/plugin/StringUtil.js}"></script> |
| | | <script type="text/javascript" th:src="@{/plugin/moment.min.js}"></script> |
| | | <script type="text/javascript" th:src="@{/js/systools/ChartsUtils.js}"></script> |
| | | <script type="text/javascript" th:src="@{/js/plugin/vue.js}"></script> |
| | | |
| | | <script> |
| | | |
| | |
| | | |
| | | // 基于准备好的dom,初始化echarts实例 |
| | | var myChart2 = echarts.init(document.getElementById('echarts-line-chart2'), 'macarons'); |
| | | |
| | | myChart2.on('click', function (params) { |
| | | console.log(params); |
| | | }); |
| | | |
| | | // 指定图表的配置项和数据 |
| | | function getption(title) { |
| | |
| | | yAxis: { |
| | | type: 'value' |
| | | }, |
| | | series: [{ |
| | | name: '人头数', |
| | | type: 'line', |
| | | smooth: true, |
| | | data: [1,2] |
| | | }], |
| | | dataZoom: [ |
| | | { |
| | | id: 'dataZoomX', |
| | |
| | | filterMode: 'filter' |
| | | } |
| | | ], |
| | | series: [{ |
| | | name: '客流量', |
| | | type: 'line', |
| | | smooth: true, |
| | | data: [], |
| | | markLine: { |
| | | data: [ |
| | | {type: 'average', name: '平均值'} |
| | | ] |
| | | }, |
| | | markPoint: { |
| | | data: [ |
| | | {type: 'max', name: '最大值'}, |
| | | {type: 'min', name: '最小值'} |
| | | ] |
| | | }, |
| | | }], |
| | | animation: true, |
| | | animationDuration: 1000, |
| | | animationDurationUpdate: 1000, |
| | |
| | | |
| | | //加载数据 |
| | | function loadData() { |
| | | |
| | | |
| | | |
| | | //加载门店客流对比 |
| | | myChart2.showLoading(); |
| | | $.AjaxProxy({ |
| | | p: MForm.toJson("#serchform"), |
| | | c: false, |
| | | }).invoke(basePath+"/admin/analysis/vipVisitTendency", |
| | | }).invoke(basePath+"/admin/analysis/customerHeadCompare", |
| | | function (loj) { |
| | | var map = loj.getValue("mapInfo"); |
| | | var option = getption("门店客流趋势对比"); |
| | | console.log(map); |
| | | var option = getption("门店人头数对比"); |
| | | option.series = map.series; |
| | | console.log("option.series",option.series); |
| | | option.legend.data = map.legendData; |
| | | option.xAxis.data = map.xAxis; |
| | | console.log(option); |
| | |
| | | myChart2.setOption(option); |
| | | myChart2.hideLoading(); |
| | | |
| | | |
| | | |
| | | }); |
| | | |
| | | |
| | | } |
| | | |
| | | var ChartsUtils = new ChartsUtils(loadData); |
| | | ChartsUtils.setDataPackTimeValue(); |
| | | ChartsUtils.loadChartData(); |
| | | |
| | | |
| | | |
| | | function buildTable(map){ |
| | | console.log(buildTable,map); |
| | | var app = new Vue({ |
| | | el: '#table', |
| | | data: { |
| | | series : map.series, |
| | | legend : map.legendData, |
| | | xAxis : map.xAxis |
| | | } |
| | | } ); |
| | | } |
| | | |
| | | |
| | | |
| | | </script> |
| | | |
| | | </body> |