Эх сурвалжийг харах

雷达图完善,区间对应算法完成

zhbyyy 2 жил өмнө
parent
commit
9c3d4f1921

+ 16 - 16
investmentNew/index.html

@@ -215,70 +215,70 @@
                 <div class="text-center">{{projecList[0][0].value2}}亿</div>
                 <img src="./img/left-blue.png" class="" style="width: 104px; height: 112px" alt="" />
               </div>
-              <div style="width: 104px; top: 51%; left: 9%; animation-delay: 1s">
+              <div style="width: 104px; left: 9%; animation-delay: 1s" :style="{top:`${projecList[0][1].top}%`}">
                 <img src="./img/left-green.png" class="" style="width: 104px; height: 112px" alt="" />
                 <div class="text-center">{{projecList[0][1].value2}}亿</div>
               </div>
               <!-- 第二列 -->
-              <div style="width: 104px; top: 30%; left: 19%">
+              <div style="width: 104px; left: 19%" :style="{top:`${projecList[1][0].top}%`}">
                 <div class="text-center">{{projecList[1][0].value2}}亿</div>
                 <img src="./img/left-blue.png" class="" style="width: 104px; height: 112px" alt="" />
               </div>
-              <div style="width: 104px; top: 62%; left: 19%">
+              <div style="width: 104px;  left: 19%" :style="{top:`${projecList[1][1].top}%`}">
                 <img src="./img/left-green.png" class="" style="width: 104px; height: 112px" alt="" />
                 <div class="text-center">{{projecList[1][1].value2}}亿</div>
               </div>
               <!-- 第三列 -->
-              <div style="width: 104px; top: 35%; left: 29%; animation-delay: 1s">
+              <div style="width: 104px;  left: 29%; animation-delay: 1s" :style="{top:`${projecList[2][0].top}%`}">
                 <div class="text-center">{{projecList[2][0].value2}}亿</div>
                 <img src="./img/left-blue.png" class="" style="width: 104px; height: 112px" alt="" />
               </div>
-              <div style="width: 104px; top: 60%; left: 29%; animation-delay: 1s">
+              <div style="width: 104px;  left: 29%; animation-delay: 1s" :style="{top:`${projecList[2][1].top}%`}">
                 <img src="./img/left-green.png" class="" style="width: 104px; height: 112px" alt="" />
                 <div class="text-center">{{projecList[2][1].value2}}亿</div>
               </div>
               <!-- 第四列 -->
-              <div style="width: 104px; top: 31%; left: 39%">
+              <div style="width: 104px;left: 39%" :style="{top:`${projecList[3][0].top}%`}">
                 <div class="text-center">{{projecList[3][0].value2}}亿</div>
                 <img src="./img/left-blue.png" class="" style="width: 104px; height: 112px" alt="" />
               </div>
-              <div style="width: 104px; top: 61%; left: 39%">
+              <div style="width: 104px;  left: 39%" :style="{top:`${projecList[3][1].top}%`}">
                 <img src="./img/left-green.png" class="" style="width: 104px; height: 112px" alt="" />
                 <div class="text-center">{{projecList[3][1].value2}}亿</div>
               </div>
               <!-- 第五列 -->
-              <div style="width: 104px; top: 41%; left: 58%; animation-delay: 1s">
+              <div style="width: 104px; left: 58%; animation-delay: 1s" :style="{top:`${projecList[4][0].top}%`}">
                 <div class="text-center">{{projecList[4][0].value2}}亿</div>
                 <img src="./img/left-blue.png" class="" style="width: 104px; height: 112px" alt="" />
               </div>
-              <div style="width: 104px; top: 65%; left: 58%; animation-delay: 1s">
+              <div style="width: 104px; left: 58%; animation-delay: 1s" :style="{top:`${projecList[4][1].top}%`}">
                 <img src="./img/left-green.png" class="" style="width: 104px; height: 112px" alt="" />
                 <div class="text-center">{{projecList[4][1].value2}}亿</div>
               </div>
               <!-- 第六列 -->
-              <div style="width: 104px; top: 35%; left: 68%">
+              <div style="width: 104px; left: 68%" :style="{top:`${projecList[5][0].top}%`}">
                 <div class="text-center">{{projecList[5][0].value2}}亿</div>
                 <img src="./img/left-blue.png" class="" style="width: 104px; height: 112px" alt="" />
               </div>
-              <div style="width: 104px; top: 63%; left: 68%">
+              <div style="width: 104px; left: 68%" :style="{top:`${projecList[5][1].top}%`}">
                 <img src="./img/left-green.png" class="" style="width: 104px; height: 112px" alt="" />
                 <div class="text-center">{{projecList[5][1].value2}}亿</div>
               </div>
               <!-- 第七列 -->
-              <div style="width: 104px; top: 21%; left: 78%; animation-delay: 1s">
+              <div style="width: 104px; left: 78%; animation-delay: 1s" :style="{top:`${projecList[6][0].top}%`}">
                 <div class="text-center">{{projecList[6][0].value2}}亿</div>
                 <img src="./img/left-blue.png" class="" style="width: 104px; height: 112px" alt="" />
               </div>
-              <div style="width: 104px; top: 51%; left: 78%; animation-delay: 1s">
+              <div style="width: 104px; left: 78%; animation-delay: 1s" :style="{top:`${projecList[6][1].top}%`}">
                 <img src="./img/left-green.png" class="" style="width: 104px; height: 112px" alt="" />
                 <div class="text-center">{{projecList[6][1].value2}}亿</div>
               </div>
               <!-- 第八列 -->
-              <div style="width: 104px; top: 31%; left: 88%">
+              <div style="width: 104px; left: 88%" :style="{top:`${projecList[7][0].top}%`}">
                 <div class="text-center">{{projecList[7][0].value2}}亿</div>
                 <img src="./img/left-blue.png" class="" style="width: 104px; height: 112px" alt="" />
               </div>
-              <div style="width: 104px; top: 61%; left: 88%">
+              <div style="width: 104px; left: 88%" :style="{top:`${projecList[7][1].top}%`}">
                 <img src="./img/left-green.png" class="" style="width: 104px; height: 112px" alt="" />
                 <div class="text-center">{{projecList[7][1].value2}}亿</div>
               </div>
@@ -441,7 +441,7 @@
             <div>
               <div class="title">省级重点项目监控</div>
               <div class="content">
-                <dv-scroll-board :config="storageRecordConfig2" class="h-full w-full"  />
+                <dv-scroll-board :config="storageRecordConfig2" class="h-full w-full" />
               </div>
             </div>
           </div>

+ 40 - 23
investmentNew/js/index.js

@@ -45,43 +45,43 @@ let app = new Vue({
       radarNum: '', // 雷达图样式
       projecList: [ //项目阶段分析内容距离 特别监管15~35 备案类50~70
         [
-          { name: '特别监管', value: '14', value2: '12.05', top: 21 },
-          { name: '备案', value: '27', value2: '23.86', top: 51 },
+          { name: '特别监管', value: '14', value2: '12.05', top: 0 },
+          { name: '备案', value: '27', value2: '23.86', top: 0 },
           { name: '项目储备', distance: '250px' }
         ],
         [
-          { name: '特别监管', value: '2', value2: '1.25', top: 21 },
-          { name: '备案', value: '1', value2: '1.05', top: 21 },
+          { name: '特别监管', value: '2', value2: '1.25', top: 22 },
+          { name: '备案', value: '1', value2: '1.05', top: 23 },
           { name: '项目立项', distance: '370px' }
         ],
         [
-          { name: '特别监管', value: '10', value2: '32.69', top: 21 },
-          { name: '备案', value: '14', value2: '18.46', top: 21 },
+          { name: '特别监管', value: '10', value2: '32.69', top: 24 },
+          { name: '备案', value: '14', value2: '18.46', top: 25 },
           { name: '可研论证', distance: '490px' }
         ],
         [
-          { name: '特别监管', value: '15', value2: '28.53', top: 21 },
-          { name: '备案', value: '40', value2: '38.86', top: 21 },
+          { name: '特别监管', value: '15', value2: '28.53', top: 26 },
+          { name: '备案', value: '40', value2: '38.86', top: 27 },
           { name: '投资决策', distance: '610px' }
         ],
         [
-          { name: '特别监管', value: '9', value2: '6.49', top: 21 },
-          { name: '备案', value: '39', value2: '8.08', top: 21 },
+          { name: '特别监管', value: '9', value2: '6.49', top: 28 },
+          { name: '备案', value: '39', value2: '8.08', top: 29 },
           { name: '项目储备', distance: '350px' }
         ],
         [
-          { name: '特别监管', value: '12', value2: '12.63', top: 21 },
-          { name: '备案', value: '7', value2: '1.83', top: 21 },
+          { name: '特别监管', value: '12', value2: '12.63', top: 30 },
+          { name: '备案', value: '7', value2: '1.83', top: 31 },
           { name: '项目立项', distance: '470px' }
         ],
         [
-          { name: '特别监管', value: '2', value2: '0.10', top: 21 },
-          { name: '备案', value: '19', value2: '1.01', top: 21 },
+          { name: '特别监管', value: '2', value2: '0.10', top: 32 },
+          { name: '备案', value: '19', value2: '1.01', top: 33 },
           { name: '可研论证', distance: '590px' }
         ],
         [
-          { name: '特别监管', value: '27', value2: '15.52', top: 21 },
-          { name: '备案', value: '73', value2: '17.65', top: 21 },
+          { name: '特别监管', value: '27', value2: '15.52', top: 34 },
+          { name: '备案', value: '73', value2: '17.65', top: 35 },
           { name: '投资决策', distance: '710px' }
         ],
       ],
@@ -483,6 +483,27 @@ let app = new Vue({
     this.countYear()
   },
   methods: {
+    // 计算项目阶段分析对应区间
+    countSection () {
+      let topList = []
+      let bottomList = []
+      this.projecList.forEach(item => {
+        topList.push(item[0].value2)
+        bottomList.push(item[1].value2)
+      })
+      let minTop = Math.min(...topList)
+      let maxTop = Math.max(...topList)
+      let minTop2 = Math.min(...bottomList)
+      let maxTop2 = Math.max(...bottomList)
+      let res  = ''
+      let res2  = ''
+      this.projecList.forEach(item => {
+        res = (Number(item[0].value2) - minTop)/(maxTop - minTop) * 20 + 15
+        res2 = (Number(item[1].value2) - minTop2)/(maxTop2 - minTop2) * 20 + 50
+        this.$set(item[0],'top',Math.round(50-res))
+        this.$set(item[1],'top',Math.round(120-res2))
+      })
+    },
     // 获取地址栏参数
     getUrlParams (id) {
       let url = window.location.href
@@ -553,6 +574,7 @@ let app = new Vue({
         this.leftEcharts7Fun();
         this.leftEcharts8Fun();
         this.leftEcharts10Fun();
+        this.countSection();
         // this.leftEcharts11Fun();
         this.rightEcharts1Fun();
         this.initChartR2();
@@ -4592,15 +4614,10 @@ let app = new Vue({
         value: 12,
         radio: 0.13
       }, {
-        name: '备案类投资完成金额',
+        name: '备案类',
         value: 52,
         radio: 0.01
       },
-      {
-        name: '项目数量',
-        value: 52,
-        radio: 0.01
-      }
       ];
 
       var data = [];
@@ -4710,7 +4727,7 @@ let app = new Vue({
         legend: {
           icon: "circle",
           orient: 'vertical',
-          data: ['特别监管类', '备案类投资完成金额', '项目数量'],
+          data: ['特别监管类', '备案类'],
           right: 0,
           bottom: 0,
           align: 'left',

Файлын зөрүү хэтэрхий том тул дарагдсан байна
+ 0 - 0
investmentNew/libs/echarts.min2.js


Энэ ялгаанд хэт олон файл өөрчлөгдсөн тул зарим файлыг харуулаагүй болно