|
@@ -156,7 +156,7 @@
|
|
<div class="col-sm-12">
|
|
<div class="col-sm-12">
|
|
<div class="ibox float-e-margins ">
|
|
<div class="ibox float-e-margins ">
|
|
<div class="ibox-title">
|
|
<div class="ibox-title">
|
|
- <h5>日调用频次</h5>
|
|
|
|
|
|
+ <h5>月度申请频次统计</h5>
|
|
<div class="pull-right">
|
|
<div class="pull-right">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -164,125 +164,131 @@
|
|
<div class="row">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<div class="col-sm-12">
|
|
<div class="flot-chart">
|
|
<div class="flot-chart">
|
|
- <div class="flot-chart-content" id="flot-dashboard-chart"></div>
|
|
|
|
|
|
+ <div class="flot-chart-content" id="container"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
-
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
-
|
|
|
|
-
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script th:src="@{/js/jquery.min.js}"></script>
|
|
<script th:src="@{/js/jquery.min.js}"></script>
|
|
<script th:src="@{/js/bootstrap.min.js}"></script>
|
|
<script th:src="@{/js/bootstrap.min.js}"></script>
|
|
<script th:src="@{/js/toast.script.js}"></script>
|
|
<script th:src="@{/js/toast.script.js}"></script>
|
|
<script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>
|
|
<script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>
|
|
|
|
+<script type="text/javascript" th:src="@{/visualization/js/echarts.min.js}"></script>
|
|
|
|
|
|
<th:block th:include="include :: sparkline-js"/>
|
|
<th:block th:include="include :: sparkline-js"/>
|
|
<script type="text/javascript">
|
|
<script type="text/javascript">
|
|
-
|
|
|
|
-
|
|
|
|
- function drawPlot(d2){
|
|
|
|
- // var data2 = [
|
|
|
|
- // [gd(2012, 1, 1), 7], [gd(2012, 1, 2), 6], [gd(2012, 1, 3), 4], [gd(2012, 1, 4), 8],
|
|
|
|
- // [gd(2012, 1, 5), 9], [gd(2012, 1, 6), 7], [gd(2012, 1, 7), 5], [gd(2012, 1, 8), 4],
|
|
|
|
- // [gd(2012, 1, 9), 7], [gd(2012, 1, 10), 8], [gd(2012, 1, 11), 9], [gd(2012, 1, 12), 6],
|
|
|
|
- // [gd(2012, 1, 13), 4], [gd(2012, 1, 14), 5], [gd(2012, 1, 15), 11], [gd(2012, 1, 16), 8],
|
|
|
|
- // [gd(2012, 1, 17), 8], [gd(2012, 1, 18), 11], [gd(2012, 1, 19), 11], [gd(2012, 1, 20), 6],
|
|
|
|
- // [gd(2012, 1, 21), 6], [gd(2012, 1, 22), 8], [gd(2012, 1, 23), 11], [gd(2012, 1, 24), 13],
|
|
|
|
- // [gd(2012, 1, 25), 7], [gd(2012, 1, 26), 9], [gd(2012, 1, 27), 9], [gd(2012, 1, 28), 8],
|
|
|
|
- // [gd(2012, 1, 29), 5], [gd(2012, 1, 30), 8], [gd(2012, 1, 31), 25]
|
|
|
|
- // ];
|
|
|
|
- var data2 = d2;
|
|
|
|
-
|
|
|
|
- var data3 = d2;
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- var dataset = [
|
|
|
|
- {
|
|
|
|
- label: "调用频次",
|
|
|
|
- data: data2,
|
|
|
|
- color: "#1ab394",
|
|
|
|
- bars: {
|
|
|
|
- show: true,
|
|
|
|
- align: "center",
|
|
|
|
- barWidth: 24 * 60 * 60 * 600,
|
|
|
|
- lineWidth: 0
|
|
|
|
|
|
+ let dom = document.getElementById('container');
|
|
|
|
+ let myChart = echarts.init(dom, null, {
|
|
|
|
+ renderer: 'canvas',
|
|
|
|
+ useDirtyRect: false
|
|
|
|
+ });
|
|
|
|
+ let app = {};
|
|
|
|
+
|
|
|
|
+ let option;
|
|
|
|
+
|
|
|
|
+ const categories = (function () {
|
|
|
|
+ let res = ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"];
|
|
|
|
+ return res;
|
|
|
|
+ })();
|
|
|
|
+ const categories2 = (function () {
|
|
|
|
+ let res = ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"];
|
|
|
|
+ return res;
|
|
|
|
+ })();
|
|
|
|
+ //省数据
|
|
|
|
+ const data = (function () {
|
|
|
|
+ let data = "";
|
|
|
|
+ let res = [[${province}]];
|
|
|
|
+ return res;
|
|
|
|
+ })();
|
|
|
|
+ //市数据
|
|
|
|
+ const data2 = (function () {
|
|
|
|
+ let data = "[[${city}]]";
|
|
|
|
+ let res = [[${city}]];
|
|
|
|
+ return res;
|
|
|
|
+ })();
|
|
|
|
+ option = {
|
|
|
|
+ title: {},
|
|
|
|
+ tooltip: {
|
|
|
|
+ trigger: 'axis',
|
|
|
|
+ axisPointer: {
|
|
|
|
+ type: 'cross',
|
|
|
|
+ label: {
|
|
|
|
+ backgroundColor: '#283b56'
|
|
}
|
|
}
|
|
-
|
|
|
|
- }, {
|
|
|
|
- label: "",
|
|
|
|
- data: data2,
|
|
|
|
- yaxis: 2,
|
|
|
|
- color: "#464f88",
|
|
|
|
- lines: {
|
|
|
|
- lineWidth: 1,
|
|
|
|
- show: true,
|
|
|
|
- fill: true,
|
|
|
|
- fillColor: {
|
|
|
|
- colors: [{
|
|
|
|
- opacity: 0.2
|
|
|
|
- }, {
|
|
|
|
- opacity: 0.2
|
|
|
|
- }]
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- splines: {
|
|
|
|
- show: false,
|
|
|
|
- tension: 0.6,
|
|
|
|
- lineWidth: 1,
|
|
|
|
- fill: 0.1
|
|
|
|
- },
|
|
|
|
}
|
|
}
|
|
- ];
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- var options = {
|
|
|
|
- xaxis: {
|
|
|
|
- mode: "time",
|
|
|
|
- tickSize: [1000, "day"],
|
|
|
|
- tickLength: 0,
|
|
|
|
- axisLabel: "Date",
|
|
|
|
- axisLabelUseCanvas: true,
|
|
|
|
- axisLabelFontSizePixels: 12,
|
|
|
|
- axisLabelFontFamily: 'Arial',
|
|
|
|
- axisLabelPadding: 10,
|
|
|
|
- color: "#838383"
|
|
|
|
|
|
+ },
|
|
|
|
+ legend: {},
|
|
|
|
+ toolbox: {
|
|
|
|
+ show: true,
|
|
|
|
+ feature: {
|
|
|
|
+ dataView: { readOnly: false },
|
|
|
|
+ restore: {},
|
|
|
|
+ saveAsImage: {}
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ dataZoom: {
|
|
|
|
+ show: false,
|
|
|
|
+ start: 0,
|
|
|
|
+ end: 100
|
|
|
|
+ },
|
|
|
|
+ xAxis: [
|
|
|
|
+ {
|
|
|
|
+ type: 'category',
|
|
|
|
+ boundaryGap: true,
|
|
|
|
+ data: categories
|
|
},
|
|
},
|
|
- yaxes: [{
|
|
|
|
- position: "left",
|
|
|
|
- max: 1070,
|
|
|
|
- color: "#838383",
|
|
|
|
- axisLabelUseCanvas: true,
|
|
|
|
- axisLabelFontSizePixels: 12,
|
|
|
|
- axisLabelFontFamily: 'Arial',
|
|
|
|
- axisLabelPadding: 3
|
|
|
|
- }, {
|
|
|
|
- position: "right",
|
|
|
|
- clolor: "#838383",
|
|
|
|
- axisLabelUseCanvas: true,
|
|
|
|
- axisLabelFontSizePixels: 12,
|
|
|
|
- axisLabelFontFamily: ' Arial',
|
|
|
|
- axisLabelPadding: 67
|
|
|
|
|
|
+ {
|
|
|
|
+ type: 'category',
|
|
|
|
+ boundaryGap: true,
|
|
|
|
+ data: categories2
|
|
}
|
|
}
|
|
- ],
|
|
|
|
- legend: {
|
|
|
|
- noColumns: 1,
|
|
|
|
- labelBoxBorderColor: "#000000",
|
|
|
|
- position: "nw"
|
|
|
|
|
|
+ ],
|
|
|
|
+ yAxis: [
|
|
|
|
+ {
|
|
|
|
+ type: 'value',
|
|
|
|
+ scale: true,
|
|
|
|
+ name: '市接口',
|
|
|
|
+ min: 0,
|
|
|
|
+ boundaryGap: [0.2, 0.2]
|
|
},
|
|
},
|
|
- grid: {
|
|
|
|
- hoverable: false,
|
|
|
|
- borderWidth: 0,
|
|
|
|
- color: '#838383'
|
|
|
|
|
|
+ {
|
|
|
|
+ type: 'value',
|
|
|
|
+ scale: true,
|
|
|
|
+ name: '省接口',
|
|
|
|
+ min: 0,
|
|
|
|
+ boundaryGap: [0.2, 0.2]
|
|
}
|
|
}
|
|
- };
|
|
|
|
- $.plot($("#flot-dashboard-chart"), dataset, options);
|
|
|
|
|
|
+ ],
|
|
|
|
+ series: [
|
|
|
|
+ {
|
|
|
|
+ name: '省接口申请频次',
|
|
|
|
+ type: 'bar',
|
|
|
|
+ xAxisIndex: 1,
|
|
|
|
+ yAxisIndex: 1,
|
|
|
|
+ data: data
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '市接口申请频次',
|
|
|
|
+ type: 'line',
|
|
|
|
+ data: data2
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+ };
|
|
|
|
+ app.count = 11;
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ if (option && typeof option === 'object') {
|
|
|
|
+ myChart.setOption(option);
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+ window.addEventListener('resize', myChart.resize);
|
|
|
|
+
|
|
|
|
+
|
|
function gd(year, month, day) {
|
|
function gd(year, month, day) {
|
|
return new Date(year, month - 1, day).getTime();
|
|
return new Date(year, month - 1, day).getTime();
|
|
}
|
|
}
|