| | |
| | | <script type="text/javascript" |
| | | th:src="@{/js/plugin/jquery-2.1.4.min.js}"></script> |
| | | <script type="text/javascript" th:src="@{/js/systools/MBase.js}"></script> |
| | | <style> |
| | | .echarts { |
| | | height: 400px |
| | | } |
| | | |
| | | </style> |
| | | </head> |
| | | <body class=" container-fluid"> |
| | | |
| | |
| | | |
| | | <div class="row chartsBox " style="margin-top: 40px"> |
| | | <div class=" col-md-12"> |
| | | <div class="echarts" id="echarts-line-chart1"></div> |
| | | </div> |
| | | </div> |
| | | |
| | | |
| | | <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 myChart1 = echarts.init(document.getElementById('echarts-line-chart1'), 'macarons'); |
| | | var myChart2 = echarts.init(document.getElementById('echarts-line-chart2'), 'macarons'); |
| | | myChart2.on('click', function (params) { |
| | | /* |
| | | 点击事件 |
| | | myChart1.on('click', function (params) { |
| | | console.log(params); |
| | | }); |
| | | |
| | | */ |
| | | // 指定图表的配置项和数据 |
| | | function getption(title) { |
| | | return { |
| | |
| | | yAxis: { |
| | | type: 'value' |
| | | }, |
| | | series: [{ |
| | | name: '人头数', |
| | | type: 'line', |
| | | smooth: true, |
| | | data: [1,2] |
| | | }], |
| | | dataZoom: [ |
| | | { |
| | | id: 'dataZoomX', |
| | |
| | | } |
| | | ], |
| | | animation: true, |
| | | animationDuration: 1000, |
| | | animationDurationUpdate: 1000, |
| | | animationDuration: 500, |
| | | animationDurationUpdate: 500, |
| | | animationEasing: 'linear', |
| | | animationEasingUpdate: 'linear', |
| | | } |
| | |
| | | //加载数据 |
| | | function loadData() { |
| | | //加载门店客流对比 |
| | | myChart2.showLoading(); |
| | | myChart1.showLoading(); |
| | | $.AjaxProxy({ |
| | | p: MForm.toJson("#serchform"), |
| | | c: false, |
| | |
| | | option.xAxis.data = map.xAxis; |
| | | console.log(option); |
| | | // 使用刚指定的配置项和数据显示图表。 |
| | | myChart1.setOption(option); |
| | | myChart1.hideLoading(); |
| | | |
| | | }); |
| | | } |
| | | |
| | | var chartsUtils1 = new ChartsUtils(loadData); |
| | | chartsUtils1.setDataPackTimeValue(); |
| | | chartsUtils1.loadChartData(); |
| | | |
| | | //加载数据2 |
| | | function loadData2() { |
| | | //加载门店客流对比 |
| | | myChart2.showLoading(); |
| | | $.AjaxProxy({ |
| | | p: MForm.toJson("#serchform"), |
| | | c: false, |
| | | }).invoke(basePath+"/admin/analysis/customerEnterCountCompare", |
| | | function (loj) { |
| | | var map = loj.getValue("mapInfo"); |
| | | var option = getption("门店人次对比"); |
| | | option.series = map.series; |
| | | option.legend.data = map.legendData; |
| | | option.xAxis.data = map.xAxis; |
| | | // 使用刚指定的配置项和数据显示图表。 |
| | | myChart2.setOption(option); |
| | | myChart2.hideLoading(); |
| | | |
| | | }); |
| | | } |
| | | var ChartsUtils = new ChartsUtils(loadData); |
| | | ChartsUtils.setDataPackTimeValue(); |
| | | ChartsUtils.loadChartData(); |
| | | |
| | | var chartsUtils2 = new ChartsUtils(loadData2); |
| | | chartsUtils2.setDataPackTimeValue(); |
| | | chartsUtils2.loadChartData(); |
| | | |
| | | |
| | | function buildTable(map){ |
| | | console.log(buildTable,map); |
| | | var app = new Vue({ |
| | | el: '#table', |
| | | data: { |
| | | series : map.series, |
| | | legend : map.legendData, |
| | | xAxis : map.xAxis |
| | | } |
| | | } ); |
| | | } |
| | | |
| | | |
| | | |