新增echarts2文件

investment/investHome2.html

@@ -12,7 +12,7 @@
   <!-- 引入js -->
   <script src="./libs/vue@2.7.10.js"></script>
   <script src="./libs/datav.min.js"></script>
-  <script src="./libs/echarts.min.js"></script>
+  <script src="./libs/echarts.min2.js"></script>
   <script src="./libs/element-ui@2.15.9.js"></script>
   <script src="./libs/axios.min.js"></script>
   <script src="./js/request.js"></script>
@@ -180,23 +180,6 @@
                 <div class="content-con">
                   <div ref="echartL7" style="width: 100%; height: 100%;"></div>
                 </div>
-                <div class="content-con">
-                  <div ref="echartL6" style="width: 100%; height: 100%;"></div>
-                </div>
-                <div class="content-con">
-                  <div ref="echartL7" style="width: 100%; height: 100%;"></div>
-                </div>
-              </div>
-            </div>
-          </dv-border-box-8>
-          <dv-border-box-8 :dur="10" style="flex: 1;">
-            <div class="title">
-              <span class="text">投前项目阶段分析</span>
-              <!-- <span class="tip-window">省重点项目</span> -->
-            </div>
-            <div class="content" style="flex-direction: column;">
-              <div class="content-top" style="margin-bottom: 0;">
-                <div ref="echartR3" style="width: 100%; height: 100%;"></div>
               </div>
             </div>
           </dv-border-box-8>

investment/investHome3compound.html

@@ -78,34 +78,43 @@
               </div>
             </dv-border-box-8>
           </div>
-          <div class="center-center">
-            <dv-border-box-8>
+          <dv-border-box-8>
+            <div class="center-center">
               <div class="panel-title">
                 <span class="text">重点项目进度</span>
               </div>
               <div class="center-center-bottom">
-                <div>
+                <div style="height:100%;width: 100%;">
                   <div><span style="color:#3AF7FE;margin-right: 10px;">按进度排序</span><span
                       style="color:#B889EA">偏差率排序</span></div>
                   <div class="center-center-bottom-list">
-                    <p>煤焦化矿井升级改造项目</p>
-                    <el-progress percentage="80" color="#FBE139" :show-text="true"></el-progress>
-                    <p>煤焦化矿井升级改造项目</p>
-                    <el-progress percentage="30" color="#FBE139" :show-text="true"></el-progress>
-                    <p>煤焦化矿井升级改造项目</p>
-                    <el-progress percentage="60" color="#FBE139" :show-text="true"></el-progress>
+                    <p>重点隧道工程项目</p>
+                    <el-progress percentage=" 56" color="#FBE139" :show-text="true"></el-progress>
+                    <p>智能高端装备产业园区项目</p>
+                    <el-progress percentage="14" color="#FBE139" :show-text="true"></el-progress>
+                    <p>矿井及选煤厂项目</p>
+                    <el-progress percentage="25" color="#FBE139" :show-text="true"></el-progress>
+                    <p>重点实验室仪器设备采购项目</p>
+                    <el-progress percentage="45" color="#FBE139" :show-text="true"></el-progress>
+                    <p>林果苗木繁育基地项目</p>
+                    <el-progress percentage="29" color="#FBE139" :show-text="true"></el-progress>
+                    <p>智慧农机装备园项目</p>
+                    <el-progress percentage="8" color="#FBE139" :show-text="true"></el-progress>
                   </div>
                 </div>
                 <div class="center-center-bottom-right" style="margin-right: 10px;">
                   <div></div>
                   <div>总体偏离度</div>
-                  <div>+12%</div>
-                  <div>-5%</div>
-                  <div>+18%</div>
+                  <div>+9%</div>
+                  <div>+7%</div>
+                  <div>+5%</div>
+                  <div>+4%</div>
+                  <div>+3%</div>
+                  <div>+1%</div>
                 </div>
               </div>
-            </dv-border-box-8>
-          </div>
+            </div>
+          </dv-border-box-8>
           <div class="center-left">
             <dv-border-box-8>
               <div class="panel-title">

investment/js/investHome2.js

@@ -1,6 +1,6 @@
 let app = new Vue({
   el: '#app',
-  data() {
+  data () {
     return {
       showTip2: false,
       year: '2022',
@@ -53,18 +53,18 @@ let app = new Vue({
       ],
     }
   },
-  created() {
+  created () {
     this.time = formatDate()
     this.timer = setInterval(() => {
       this.time = formatDate()
     }, 1000)
   },
-  beforeDestroy() {
+  beforeDestroy () {
     if (this.timer) {
       clearInterval(this.timer);
     }
   },
-  mounted() {
+  mounted () {
     // 左侧图表
     setTimeout(() => {
       this.initChartL1()
@@ -80,7 +80,7 @@ let app = new Vue({
     },)
   },
   methods: {
-    convertData(data) {
+    convertData (data) {
       var res = []
       for (var i = 0; i < data.length; i++) {
         var geoCoord = this.geoCoordMap[data[i].name]
@@ -93,7 +93,7 @@ let app = new Vue({
       }
       return res
     },
-    initChinaChart() {
+    initChinaChart () {
       var data = [
         { name: '吕梁市', value: 150 },
         { name: '大同市', value: 190 },
@@ -529,7 +529,7 @@ let app = new Vue({
         ],
       })
     },
-    initChartL1() {
+    initChartL1 () {
       let myChart = echarts.init(document.getElementById("echartL1"));
       let option = {
         grid: {
@@ -680,7 +680,7 @@ let app = new Vue({
       })
       myChart.setOption(option);
     },
-    initChartL2() {
+    initChartL2 () {
       let myChart = echarts.init(this.$refs['echartL2'])
       var value = 0.45;
       var data = [value];
@@ -751,7 +751,7 @@ let app = new Vue({
       }
       myChart.setOption(option)
     },
-    initChartL3() {
+    initChartL3 () {
       let myChart = echarts.init(this.$refs['echartL3'])
       let option = {
         tooltip: {
@@ -876,7 +876,7 @@ let app = new Vue({
         loopSeries: true,
       })
     },
-    initChartL4() {
+    initChartL4 () {
       let myChart = echarts.init(this.$refs['echartL4'])
       let option = {
         title: {
@@ -933,7 +933,7 @@ let app = new Vue({
         loopSeries: true,
       })
     },
-    initChartL5() {
+    initChartL5 () {
       let myChart = echarts.init(this.$refs['echartL5'])
       let option = {
         title: {
@@ -989,7 +989,7 @@ let app = new Vue({
         nterval: 2000,
         loopSeries: true,
       })
-    }, initChartL6() {
+    }, initChartL6 () {
       let myChart = echarts.init(this.$refs['echartL6'])
       let option = {
         title: {
@@ -1045,7 +1045,7 @@ let app = new Vue({
         nterval: 2000,
         loopSeries: true,
       })
-    }, initChartL7() {
+    }, initChartL7 () {
       let myChart = echarts.init(this.$refs['echartL7'])
       let option = {
         title: {
@@ -1102,7 +1102,7 @@ let app = new Vue({
         loopSeries: true,
       })
     },
-    initChartR4() {
+    initChartR4 () {
       let myChart = echarts.init(this.$refs['echartR4'])
       let option = {
         title: {
@@ -1180,7 +1180,7 @@ let app = new Vue({
         loopSeries: true,
       })
     },
-    initChartR5() {
+    initChartR5 () {
       let myChart = echarts.init(this.$refs['echartR5'])
       let option = {
         title: {
@@ -1259,7 +1259,7 @@ let app = new Vue({
         loopSeries: true,
       })
     },
-    initChartR1() {
+    initChartR1 () {
       let myChart = echarts.init(this.$refs['echartR1'])
       let option = {
         title: {
@@ -1316,7 +1316,7 @@ let app = new Vue({
         loopSeries: true,
       })
     },
-    initChartR2() {
+    initChartR2 () {
       let myChart = echarts.init(this.$refs['echartR2'])
       let option = {
         title: {
@@ -1373,7 +1373,7 @@ let app = new Vue({
         loopSeries: true,
       })
     },
-    initChartR3() {
+    initChartR3 () {
       let myChart = echarts.init(this.$refs['echartR3'])
       let option = {
         title: {

investment/js/investHome3compound.js

@@ -377,7 +377,7 @@ let app = new Vue({
           text: ''
         },
         legend: {
-          data: ['类型1', '类型2', '类型3', '类型4', '类型5'],
+          data: ['进度', '质量', '预算', '证照', '合同'],
           bottom: 0,
           left: 'center',
           textStyle: {
@@ -396,11 +396,11 @@ let app = new Vue({
           center: ['50%', '50%'],
           radius: 60,
           indicator: [
-            { name: '类型1', max: 100000 },
-            { name: '类型2', max: 100000 },
-            { name: '类型3', max: 100000 },
-            { name: '类型4', max: 100000 },
-            { name: '类型5', max: 100000 },
+            { name: '进度', max: 100000 },
+            { name: '质量', max: 100000 },
+            { name: '预算', max: 100000 },
+            { name: '证照', max: 100000 },
+            { name: '合同', max: 100000 },
           ],
           axisLine: {  // 设置雷达图中间射线的颜色
             lineStyle: {
@@ -436,7 +436,7 @@ let app = new Vue({
             symbolSize: 0, // 数值点的大小
             data: [
               {
-                value: [4200, 3000, 20000, 35000, 50000, 18000],
+                value: [1],
                 name: '类型1',
                 itemStyle: { //该数值区域样式设置
                   normal: {
@@ -462,7 +462,7 @@ let app = new Vue({
                 },
               },
               {
-                value: [8000, 3000, 38000, 76000, 32000, 71000],
+                value: [8000],
                 name: '类型2',
                 itemStyle: { //该数值区域样式设置
                   normal: {
@@ -548,9 +548,9 @@ let app = new Vue({
           },
           // y轴的字体颜色
           axisLabel: {
+            // formatter: '{value} %',
             textStyle: {
               color: "white",
-              formatter: '{value} %',
             },
           },
           splitLine: {
@@ -572,14 +572,11 @@ let app = new Vue({
               color: "#18416F",
             },
           },
-          //y轴线的颜色以及宽度
-          axisLine: {
-            show: true,
+          // y轴的字体颜色
+          axisLabel: {
             formatter: '{value} %',
-            lineStyle: {
-              color: "#fff",
-              width: 1,
-              type: "solid",
+            textStyle: {
+              color: "white",
             },
           },
           splitLine: {
@@ -589,8 +586,9 @@ let app = new Vue({
               width: 1,
               type: "dotted",
             },
-          }
-        }],
+          },
+        },
+        ],
         series: [
           {
             name: "",
@@ -640,7 +638,7 @@ let app = new Vue({
           },
           {
             name: "",
-            type: "bar",
+            type: "line",
             yAxisIndex: 1,
             data: [1.08, 0.66, 0.79, 0.19, 0.55, 0.51, 0.58, 1.15, 0.64, 0.56, 0.86, 0.53, 0.36, 1.04, 0.15, 0.4, 0.51, 0.97],
             showBackground: false,
@@ -657,7 +655,7 @@ let app = new Vue({
                 }, //柱图渐变色
                 {
                   offset: 1,
-                  color: "#897DFF",
+                  color: "blue",
                 },
               ]),
             },

investment/styles/investHome2.css

@@ -10,8 +10,8 @@ body {
   height: 100%;
   font-size: 14px;
   background-color: #ecffff;
-  font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, "PingFang SC",
-    "Hiragino Sans GB", Arial, sans-serif;
+  font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, 'PingFang SC',
+    'Hiragino Sans GB', Arial, sans-serif;
 }
 
 .flex {
@@ -70,7 +70,7 @@ a {
   display: none;
 }
 #app {
-  background: url("../images/page-bg.png") center center no-repeat;
+  background: url('../images/page-bg.png') center center no-repeat;
   background-size: 100% 100%;
   padding-top: 10px;
   height: 100vh;
@@ -81,7 +81,7 @@ a {
   position: relative;
   height: 70px;
   line-height: 70px;
-  background: url("../images/header-bg.png") center center no-repeat;
+  background: url('../images/header-bg.png') center center no-repeat;
   background-size: 100% 100%;
   text-align: center;
   font-weight: bold;
@@ -103,7 +103,7 @@ a {
   padding: 15px;
   display: flex;
   height: calc(100vh - 25px);
-  background: url("../images/content-bg2.png") no-repeat center bottom;
+  background: url('../images/content-bg2.png') no-repeat center bottom;
   display: flex;
   padding-bottom: 65px;
 }
@@ -117,7 +117,7 @@ a {
   flex-direction: column;
 }
 .dv-border-box-8 {
-  background: url("../images/left-border2.png") no-repeat;
+  background: url('../images/left-border2.png') no-repeat;
   background-size: 100% 100%;
 }
 .left .title {
@@ -138,21 +138,21 @@ a {
 }
 .left .title .text::before {
   position: absolute;
-  content: " ";
+  content: ' ';
   top: 10px;
   left: -40px;
   width: 30px;
   height: 10px;
-  background: url("../images/title-left.png") no-repeat;
+  background: url('../images/title-left.png') no-repeat;
 }
 .left .title .text::after {
   position: absolute;
-  content: " ";
+  content: ' ';
   top: 10px;
   right: -40px;
   width: 30px;
   height: 10px;
-  background: url("../images/title-right.png") no-repeat;
+  background: url('../images/title-right.png') no-repeat;
 }
 .left .content {
   height: calc(100% - 60px);
@@ -245,7 +245,7 @@ a {
   margin-top: 10px;
 }
 .item4 .item4-title::before {
-  content: "";
+  content: '';
   position: absolute;
   left: 0;
   top: 50%;
@@ -328,21 +328,21 @@ a {
 }
 .right .title .text::before {
   position: absolute;
-  content: " ";
+  content: ' ';
   top: 10px;
   left: -40px;
   width: 30px;
   height: 10px;
-  background: url("../images/title-left.png") no-repeat;
+  background: url('../images/title-left.png') no-repeat;
 }
 .right .title .text::after {
   position: absolute;
-  content: " ";
+  content: ' ';
   top: 10px;
   right: -40px;
   width: 30px;
   height: 10px;
-  background: url("../images/title-right.png") no-repeat;
+  background: url('../images/title-right.png') no-repeat;
 }
 .right .content {
   height: calc(100% - 60px);
@@ -471,7 +471,7 @@ a {
   height: 56vh;
   top: calc(50% - 26vh);
   left: calc(50% - 450px);
-  background: url("../images/popup.png") no-repeat center;
+  background: url('../images/popup.png') no-repeat center;
   background-color: #133b65;
   background-size: 100% 100%;
   padding: 100px 60px 50px;

investment/styles/investHome3compound.css

@@ -118,6 +118,7 @@ a {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 10px;
+  overflow: hidden;
 }
 .top-left,
 .top-right {
@@ -170,6 +171,7 @@ a {
   height: calc(100% - 50px);
   width: 100%;
   padding: 10px;
+  overflow: hidden;
 }
 .top-left-bottom-left {
   height: 100%;
@@ -257,10 +259,11 @@ a {
   padding-bottom: 10px;
 }
 .center-center-bottom-list {
-  height: 80%;
+  height: 180px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  overflow-y: auto;
 }
 .center-center-bottom-list .el-progress-bar__inner {
   background: linear-gradient(to right, #092854, #00aeff);
@@ -279,6 +282,7 @@ a {
   justify-content: center;
   align-items: center;
   position: relative;
+  overflow-y: auto;
 }
 .center-center-bottom-right > div:nth-child(1) {
   border: 1px dashed #00ffff;
@@ -307,12 +311,15 @@ a {
   line-height: 20px;
   text-align: center;
 }
+.center-center {
+  height: 100%;
+}
 .center-center-bottom-right > div:nth-child(4) {
   position: absolute;
-  top: 100px;
-  left: 55px;
+  top: 90px;
+  left: 117px;
   background-color: #416d63;
-  color: #ffd802;
+  color: #2cc6ff;
   width: 60px;
   height: 20px;
   line-height: 20px;
@@ -320,7 +327,40 @@ a {
 }
 .center-center-bottom-right > div:nth-child(5) {
   position: absolute;
-  top: 140px;
+  top: 120px;
+  left: 117px;
+  background-color: #166592;
+  color: #2cc6ff;
+  width: 60px;
+  height: 20px;
+  line-height: 20px;
+  text-align: center;
+}
+.center-center-bottom-right > div:nth-child(6) {
+  position: absolute;
+  top: 150px;
+  left: 117px;
+  background-color: #166592;
+  color: #2cc6ff;
+  width: 60px;
+  height: 20px;
+  line-height: 20px;
+  text-align: center;
+}
+.center-center-bottom-right > div:nth-child(7) {
+  position: absolute;
+  top: 180px;
+  left: 117px;
+  background-color: #166592;
+  color: #2cc6ff;
+  width: 60px;
+  height: 20px;
+  line-height: 20px;
+  text-align: center;
+}
+.center-center-bottom-right > div:nth-child(8) {
+  position: absolute;
+  top: 210px;
   left: 117px;
   background-color: #166592;
   color: #2cc6ff;
@@ -775,3 +815,10 @@ a {
 .capitalize {
   text-transform: capitalize;
 }
+::-webkit-scrollbar {
+  width: 8px;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background: #6face0;
+}