成都劳动力大屏集成

2024-02-05 10:16:53 +08:00
parent ca50d9cab0
commit d06101daec
97 changed files with 17341 additions and 197 deletions
--- a/public/chengdu/compared.html
+++ b/public/chengdu/compared.html
@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport"
+    content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
+  <title>市场招聘大数据展示平台</title>
+  <link rel="icon" href="favicon.ico">
+  <link rel="stylesheet" href="css/common.css">
+  <link rel="stylesheet" href="css/bootstrap/css/bootstrap.min.css">
+  <link rel="stylesheet" href="css/theme/default/layer.css">
+  <script type="text/javascript" src="js/common/jquery.min.js"></script>
+  <script type="text/javascript" src="js/common/layer.js"></script>
+  <script type="text/javascript" src="js/common/echarts.min.js"></script>
+
+  <style>
+    .result {
+      position: absolute;
+      left: 20px;
+    }
+
+    .switch {
+      position: absolute;
+      right: 20px;
+    }
+
+    #main {
+      margin-top: 40px;
+    }
+
+    .pop-title {
+      color: #FFFFFF;
+      font-size: 24px;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="container" style="padding: 20px;width: 100%; height: 100%;">
+    <div class="center-block text-center pop-title">历史同比</div>
+    <div class="result">
+      <div id="btn-result" class="btn btn-default" onclick="parent.layer.closeAll()">
+        返回
+      </div>
+    </div>
+    <div class="switch btn-group">
+      <div id="btn-xqs" class="btn btn-default active" onclick="xqsShow()">
+        岗位需求数
+      </div>
+      <div id="btn-qzs" class="btn btn-default" onclick="qzsShow()">
+        求职人数
+      </div>
+    </div>
+    <div id="main" style="width: 100%;height: 580px;">
+
+    </div>
+  </div>
+  <script type="text/javascript">
+    var baseUrl = 'http://39.101.167.152:8088/shekecaiji';
+
+    var chartType = "xq";
+
+    var chartDom = document.getElementById('main');
+    var myChart = echarts.init(chartDom);
+    var option;
+
+    option = {
+      textStyle: {
+        color: '#ccc',
+      },
+      tooltip: {
+        trigger: 'axis'
+      },
+      legend: {
+        data: [],
+        textStyle: {
+          color: '#ccc',
+        },
+        maxWidth: '50%',
+        itemGap: 10,
+        left: 'center', 
+        top: 'top', 
+      },
+      grid: {
+        top: '20%',
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+      },
+      toolbox: {
+        feature: {
+          saveAsImage: {}
+        }
+      },
+      xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        name: '月份',
+        data: []
+      },
+      yAxis: {
+        type: 'value',
+        name: '增长率',
+      },
+      series: []
+    };
+
+    function loadData(type) {
+      let arrData = [];
+
+      $.ajax({
+        type: 'GET',
+        url: baseUrl + '/tongbi/getData8',
+        async: false,
+        data: {},
+        success: function (res) {
+          //console.log(res);
+          if (res.code == '0') {
+            var data = res.data;
+            console.log(data);
+            option.xAxis.data = data.dataList;
+            option.legend.data = data.name;
+            option.legend.selected = {}
+            option.series = [];
+
+            for (let i = 0; i < data.name.length; i++) {
+              let listName = chartType + 'List' + i;
+              console.log(listName);
+              if(i == 0) {
+                option.legend.selected[`${data.name[i]}`] = true
+              } else {
+                option.legend.selected[`${data.name[i]}`] = false
+              }
+              let obj = {
+                name: data.name[i],
+                type: 'line',
+                stack: 'Total',
+                data: data[listName]
+              }
+
+              console.log(data[listName]);
+
+              arrData.push(obj);
+            }
+            option.series = arrData;
+
+            option && myChart.setOption(option);
+          }
+        }
+      });
+    }
+
+    xqsShow();
+
+    function xqsShow() {
+      $("#btn-xqs").addClass("active");
+      $("#btn-qzs").removeClass("active");
+      chartType = "xq";
+      loadData(1);
+    }
+
+    function qzsShow() {
+      $("#btn-xqs").removeClass("active");
+      $("#btn-qzs").addClass("active");
+      chartType = "qz";
+      loadData(1);
+    }
+  </script>
+</body>
+
+</html>