首頁 探索 說明
登入
kingdee_large_screen
/
pc_kingdee_large_screen
2
0
複刻 0
Files 問題管理 0 合併請求 0 Wiki
瀏覽代碼

修改饼图

fanjiaxin 1 年之前
父節點
3afb5e686b
當前提交
68d10f83fd
共有 13 個文件被更改，包括 15138 次插入 和 663 次删除
分割檢視 顯示文件統計
  1. 二進制
      investment/images/foot-back.png
  2. 1 0
      investment/investHome.html
  3. 177 163
      investment/investHome2.html
  4. 219 0
      investment/investHome2compound.html
  5. 55 54
      investment/js/data.js
  6. 506 97
      investment/js/investHome.js
  7. 325 292
      investment/js/investHome2.js
  8. 1330 0
      investment/js/investHome2compound.js
  9. 37 30
      investment/js/investHomeChild.js
  10. 11991 0
      investment/libs/echarts-gl.min.js
  11. 9 1
      investment/libs/echarts.min.js
  12. 80 26
      investment/styles/investHome2.css
  13. 408 0
      investment/styles/investHome2compound.css

二進制
investment/images/foot-back.png
查看文件


+ 1 - 0
investment/investHome.html
查看文件 

@@ -13,6 +13,7 @@
 
   <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-gl.min.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>

+ 177 - 163
investment/investHome2.html
查看文件 

@@ -1,72 +1,46 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
-  <head>
 
-    <meta charset="utf-8" />
 
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-    <!-- 引入样式 -->
 
-    <link rel="stylesheet" href="./styles/element-ui@2.15.9.css" />
 
-    <link rel="stylesheet" href="./styles/normalize.css" />
 
-    <link rel="stylesheet" href="./styles/investHome2.css" />
 
-    <!-- 引入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/element-ui@2.15.9.js"></script>
 
-    <script src="./libs/axios.min.js"></script>
 
-    <script src="./js/request.js"></script>
 
-    <script src="./libs/echarts-liquidfill.min.js"></script>
 
-    <script src="./libs/echarts-tooltip-carousel.js"></script>
 
-  </head>
 
-  <body>
 
-    <div id="app">
 
-      <dv-full-screen-container>
 
-        <header class="my-header">
 
-          <span>投资管理数智中心</span>
 
-          <span class="right">{{time}}</span>
 
-        </header>
 
-        <div class="main">
 
-          <div class="left">
 
-            <dv-border-box-8 :dur="10" style="flex: 1; margin-bottom: 10px;">
 
-              <div class="title">
 
-                <span class="text">储备项目分析</span>
 
-              </div>
 
-              <div class="content">
 
-                <div class="content-left">
 
-                  <div class="item">
 
-                    <div class="item-title">825.60<span>亿</span></div>
 
-                    <div class="item-img">
 
-                      <img style="width: 100%; height: 100%" src="./images/icon-1-home2.png" alt="">
 
-                    </div>
 
-                    <div class="item-text">储备项目总金额</div>
 
-                  </div>
 
-                  <div class="item">
 
-                    <div class="item-title">786<span>个</span></div>
 
-                    <div class="item-img">
 
-                      <img style="width: 100%; height: 100%" src="./images/icon-2-home2.png" alt="">
 
-                    </div>
 
-                    <div class="item-text">储备项目数量</div>
 
-                  </div>
 
-                  <div class="item">
 
-                    <div class="item-title">23.56<span>%</span></div>
 
-                    <div class="item-img">
 
-                      <img style="width: 100%; height: 100%" src="./images/icon-3-home2.png" alt="">
 
-                    </div>
 
-                    <div class="item-text">储备项目准化率</div>
 
-                  </div>
 
-                </div>
 
-                <div class="content-right">
 
-                  <div ref="echartL1" style="width: 100%; height: 100%;"></div>
 
+
 
+<head>
 
+  <meta charset="utf-8" />
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
 
+  <!-- 引入样式 -->
 
+  <link rel="stylesheet" href="./styles/element-ui@2.15.9.css" />
 
+  <link rel="stylesheet" href="./styles/normalize.css" />
 
+  <link rel="stylesheet" href="./styles/investHome2.css" />
 
+  <!-- 引入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/element-ui@2.15.9.js"></script>
 
+  <script src="./libs/axios.min.js"></script>
 
+  <script src="./js/request.js"></script>
 
+  <script src="./libs/echarts-liquidfill.min.js"></script>
 
+  <script src="./libs/echarts-tooltip-carousel.js"></script>
 
+</head>
 
+
 
+<body>
 
+  <div id="app">
 
+    <dv-full-screen-container>
 
+      <header class="my-header">
 
+        <span>投资管理数智中心</span>
 
+        <span class="right">{{time}}</span>
 
+      </header>
 
+      <div class="main">
 
+        <div class="left">
 
+          <dv-border-box-8 :dur="10" style="flex: 1; margin-bottom: 10px;">
 
+            <div class="title">
 
+              <span class="text">投资额度分析</span>
 
+              <span class="tip-window">2023年</span>
 
+            </div>
 
+            <div class="content">
 
+              <div class="content-left" style="flex-wrap: wrap;">
 
+                <div class="topChange0">
 
+                  <div>山西焦煤</div>
 
+                  <img src="./images/foot-back.png" style="width:100%;height:auto" alt="">
 
                 </div>
 
-              </div>
 
-            </dv-border-box-8>
 
-            <dv-border-box-8 :dur="10" style="flex: 1; margin-bottom: 10px;">
 
-              <div class="title">
 
-                <span class="text">投资额度分析</span>
 
-                <span class="tip-window">2023年</span>
 
-              </div>
 
-              <div class="content">
 
-                <div class="content-left" style="flex-wrap: wrap;">
 
+                <div class="topChange1">
 
                   <div class="item2">
 
                     <div class="item2-title" style="color: #15FFA2;">574.12<span>亿</span></div>
 
                     <div class="item2-img">
 
@@ -96,121 +70,161 @@
 
                     <div class="item2-text">上一年度经营业绩</div>
 
                   </div>
 
                 </div>
 
-                <div class="content-right">
 
-                  <div ref="echartL2" style="width: 100%; height: 100%;"></div>
 
-                </div>
 
               </div>
 
-            </dv-border-box-8>
 
-            <dv-border-box-8 :dur="10" style="flex: 1;">
 
-              <div class="title">
 
-                <span class="text">重点项目两线指标</span>
 
+              <div class="content-right">
 
+                <div ref="echartL2" class="topChange2" style="width: 100%; height: 100%;"></div>
 
+                <div class="jt"></div>
 
               </div>
 
-              <div class="content">
 
-                <div class="content-left">
 
-                  <div ref="echartL3" style="width: 100%; height: 100%;"></div>
 
-                </div>
 
-                <div class="content-con">
 
-                  <div ref="echartL4" style="width: 100%; height: 100%;"></div>
 
-                </div>
 
-                <div class="content-right">
 
-                  <div class="item5">
 
-                    <div class="title">山西焦煤集团</div>
 
-                    <dv-scroll-board :config="storageRecordConfig" style="width: 100%; height:calc(100% - 30px)"/>
 
-                  </div>
 
-                </div>
 
+            </div>
 
+          </dv-border-box-8>
 
+          <dv-border-box-8 :dur="10" style="flex: 1; margin-bottom: 10px;">
 
+            <div class="title">
 
+              <span class="text">企业额度分析</span>
 
+              <span class="tip-window">2023年</span>
 
+            </div>
 
+            <div class="content">
 
+              <div id="echartL1" style="width: 100%; height: 100%"></div>
 
+            </div>
 
+          </dv-border-box-8>
 
+          <dv-border-box-8 :dur="10" style="flex: 1;">
 
+            <div class="title">
 
+              <span class="text">重点项目两线指标</span>
 
+            </div>
 
+            <div class="content">
 
+              <div class="content-right" style="margin-right: 10px;">
 
+                <table cellpadding="0" cellspacing="0" border="1">
 
+                  <tr>
 
+                    <td>项目名称</td>
 
+                    <td>所属企业</td>
 
+                    <td>投资总额</td>
 
+                  </tr>
 
+                  <tr>
 
+                    <td>建设工程项目</td>
 
+                    <td>山西建投</td>
 
+                    <td>60.32亿</td>
 
+                  </tr>
 
+                  <tr>
 
+                    <td>建设工程项目</td>
 
+                    <td>山西建投</td>
 
+                    <td>60.32亿</td>
 
+                  </tr>
 
+                  <tr>
 
+                    <td>建设工程项目</td>
 
+                    <td>山西建投</td>
 
+                    <td>60.32亿</td>
 
+                  </tr>
 
+                  <tr>
 
+                    <td>建设工程项目</td>
 
+                    <td>山西建投</td>
 
+                    <td>60.32亿</td>
 
+                  </tr>
 
+                </table>
 
               </div>
 
-            </dv-border-box-8>
 
-          </div>
 
-          <div class="right">
 
-            <dv-border-box-8 :dur="10" style="flex: 1; margin-bottom: 10px;">
 
-              <div class="title">
 
-                <span class="text">投资计划分析</span>
 
-                <span class="tip-window">2023年</span>
 
+              <div class="content-left">
 
+                <div ref="echartL3" style="width: 100%; height: 100%;"></div>
 
               </div>
 
-              <div class="content">
 
-                <div class="content-left">
 
-                  <div class="content-left-l">
 
-                    <div class="item3">
 
-                      <div class="item3-title">450.12<span>亿</span></div>
 
-                      <div class="item3-img">
 
-                        <img style="width: 100%; height: 100%;" src="./images/icon-8-home2.png" alt="">
 
-                      </div>
 
-                      <div class="item4-text">
 
-                        年度投资计划总额
 
-                      </div>
 
+            </div>
 
+          </dv-border-box-8>
 
+        </div>
 
+        <div class="right">
 
+          <dv-border-box-8 :dur="10" style="flex: 1; margin-bottom: 10px;">
 
+            <div class="title">
 
+              <span class="text">投资计划分析</span>
 
+              <span class="tip-window">2023年</span>
 
+            </div>
 
+            <div class="content">
 
+              <div class="content-left">
 
+                <div class="content-left-l">
 
+                  <div class="item3">
 
+                    <div class="item3-title">450.12<span>亿</span></div>
 
+                    <div class="item3-img">
 
+                      <img style="width: 100%; height: 100%;" src="./images/icon-8-home2.png" alt="">
 
+                    </div>
 
+                    <div class="item4-text">
 
+                      年度投资计划总额
 
                     </div>
 
                   </div>
 
-                  <div class="content-left-r">
 
-                    <div class="content-left-r-t">
 
-                      <div class="item4">
 
-                        <div class="item4-title">列入省级项目重点项目</div>
 
-                        <div class="item4-con">
 
-                          <div class="item">
 
-                            <div class="title">200<span>亿</span></div>
 
-                            <div class="text">投资金额</div>
 
-                          </div>
 
-                          <div class="item">
 
-                            <div class="title">20<span>个</span></div>
 
-                            <div class="text">项目数量</div>
 
-                          </div>
 
+                </div>
 
+                <div class="content-left-r">
 
+                  <div class="content-left-r-t">
 
+                    <div class="item4">
 
+                      <div class="item4-title">列入省级项目重点项目</div>
 
+                      <div class="item4-con">
 
+                        <div class="item">
 
+                          <div class="title">200<span>亿</span></div>
 
+                          <div class="text">投资金额</div>
 
+                        </div>
 
+                        <div class="item">
 
+                          <div class="title">20<span>个</span></div>
 
+                          <div class="text">项目数量</div>
 
                         </div>
 
                       </div>
 
                     </div>
 
-                    <div class="content-left-r-b">
 
-                      <div class="item4">
 
-                        <div class="item4-title">国家或省政府决定的重大项目</div>
 
-                        <div class="item4-con">
 
-                          <div class="item">
 
-                            <div class="title">200<span>亿</span></div>
 
-                            <div class="text">投资金额</div>
 
-                          </div>
 
-                          <div class="item">
 
-                            <div class="title">20<span>个</span></div>
 
-                            <div class="text">项目数量</div>
 
-                          </div>
 
+                  </div>
 
+                  <div class="content-left-r-b">
 
+                    <div class="item4">
 
+                      <div class="item4-title">国家或省政府决定的重大项目</div>
 
+                      <div class="item4-con">
 
+                        <div class="item">
 
+                          <div class="title">200<span>亿</span></div>
 
+                          <div class="text">投资金额</div>
 
+                        </div>
 
+                        <div class="item">
 
+                          <div class="title">20<span>个</span></div>
 
+                          <div class="text">项目数量</div>
 
                         </div>
 
                       </div>
 
                     </div>
 
                   </div>
 
                 </div>
 
-                <div class="content-right">
 
-                  <div class="content-right-l">
 
-                    <div ref="echartR1" style="width: 100%; height: 100%;"></div>
 
-                  </div>
 
-                  <div class="content-right-r">
 
-                    <div ref="echartR2" style="width: 100%; height: 100%;"></div>
 
-                  </div>
 
-                </div>
 
               </div>
 
-            </dv-border-box-8>
 
-            <dv-border-box-8 :dur="10" style="flex: 1; margin-bottom: 10px;">
 
-              <div class="title">
 
-                <span class="text">投前项目阶段分析</span>
 
-                <span class="tip-window">省重点项目</span>
 
-              </div>
 
-              <div class="content" style="flex-direction: column;">
 
-                <div class="content-top">
 
-                  <div ref="echartR3" style="width: 100%; height: 100%;"></div>
 
+              <div class="content-right">
 
+                <div class="content-right-l">
 
+                  <div ref="echartR1" style="width: 100%; height: 100%;"></div>
 
+                </div>
 
+                <div class="content-right-r">
 
+                  <div ref="echartR2" style="width: 100%; height: 100%;"></div>
 
                 </div>
 
               </div>
 
-            </dv-border-box-8>
 
-            <dv-border-box-8 :dur="10" style="flex: 1;">
 
-              <div class="title">
 
-                <span class="text">企业后评价分析</span>
 
-              </div>
 
-              <div class="content">
 
-                <div class="content-left">
 
-                  <div ref="echartR4" style="width: 100%; height: 100%;"></div>
 
+            </div>
 
+          </dv-border-box-8>
 
+          <dv-border-box-8 :dur="10" style="flex: 1;margin-bottom: 10px;">
 
+            <div class="title">
 
+              <span class="text">企业后评价分析</span>
 
+            </div>
 
+            <div class="content">
 
+              <div class="fourPie">
 
+                <div class="content-con">
 
+                  <div ref="echartL4" style="width: 100%; height: 100%;"></div>
 
                 </div>
 
-                <div class="content-right">
 
-                  <div ref="echartR5" style="width: 100%; height: 100%;"></div>
 
+                <div class="content-con">
 
+                  <div ref="echartL5" 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>
 
-            </dv-border-box-8>
 
-          </div>
 
+            </div>
 
+          </dv-border-box-8>
 
         </div>
 
-      </dv-full-screen-container>
 
-    </div>
 
-    <script src="./js/investHome2.js"></script>
 
-  </body>
 
-</html>
 
+      </div>
 
+    </dv-full-screen-container>
 
+  </div>
 
+  <script src="./js/investHome2.js"></script>
 
+</body>
 
+
 
+</html>

+ 219 - 0
investment/investHome2compound.html
查看文件 

@@ -0,0 +1,219 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+  <meta charset="utf-8" />
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
 
+  <!-- 引入样式 -->
 
+  <link rel="stylesheet" href="./styles/element-ui@2.15.9.css" />
 
+  <link rel="stylesheet" href="./styles/normalize.css" />
 
+  <link rel="stylesheet" href="./styles/investHome2compound.css" />
 
+  <!-- 引入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/element-ui@2.15.9.js"></script>
 
+  <script src="./libs/axios.min.js"></script>
 
+  <script src="./js/request.js"></script>
 
+  <script src="./libs/echarts-liquidfill.min.js"></script>
 
+  <script src="./libs/echarts-tooltip-carousel.js"></script>
 
+</head>
 
+
 
+<body>
 
+  <div id="app">
 
+    <dv-full-screen-container>
 
+      <header class="my-header">
 
+        <span>投资管理数智中心</span>
 
+        <span class="right">{{time}}</span>
 
+      </header>
 
+      <div class="main">
 
+        <div class="left">
 
+          <dv-border-box-8 :dur="10" style="flex: 1; margin-bottom: 10px;">
 
+            <div class="title">
 
+              <span class="text">储备项目分析</span>
 
+            </div>
 
+            <div class="content">
 
+              <div class="content-left">
 
+                <div class="item">
 
+                  <div class="item-title">825.60<span>亿</span></div>
 
+                  <div class="item-img">
 
+                    <img style="width: 100%; height: 100%" src="./images/icon-1-home2.png" alt="">
 
+                  </div>
 
+                  <div class="item-text">储备项目总金额</div>
 
+                </div>
 
+                <div class="item">
 
+                  <div class="item-title">786<span>个</span></div>
 
+                  <div class="item-img">
 
+                    <img style="width: 100%; height: 100%" src="./images/icon-2-home2.png" alt="">
 
+                  </div>
 
+                  <div class="item-text">储备项目数量</div>
 
+                </div>
 
+                <div class="item">
 
+                  <div class="item-title">23.56<span>%</span></div>
 
+                  <div class="item-img">
 
+                    <img style="width: 100%; height: 100%" src="./images/icon-3-home2.png" alt="">
 
+                  </div>
 
+                  <div class="item-text">储备项目准化率</div>
 
+                </div>
 
+              </div>
 
+              <div class="content-right">
 
+                <div ref="echartL1" style="width: 100%; height: 100%;"></div>
 
+              </div>
 
+            </div>
 
+          </dv-border-box-8>
 
+          <dv-border-box-8 :dur="10" style="flex: 1; margin-bottom: 10px;">
 
+            <div class="title">
 
+              <span class="text">投资额度分析</span>
 
+              <span class="tip-window">2023年</span>
 
+            </div>
 
+            <div class="content">
 
+              <div class="content-left" style="flex-wrap: wrap;">
 
+                <div class="item2">
 
+                  <div class="item2-title" style="color: #15FFA2;">574.12<span>亿</span></div>
 
+                  <div class="item2-img">
 
+                    <img style="width: 100%; height: 100%;" src="./images/icon-4-home2.png" alt="">
 
+                  </div>
 
+                  <div class="item2-text">上一年度经营业绩</div>
 
+                </div>
 
+                <div class="item2">
 
+                  <div class="item2-title" style="color: #DD9CFF;">212.21<span>亿</span></div>
 
+                  <div class="item2-img">
 
+                    <img style="width: 100%; height: 100%;" src="./images/icon-5-home2.png" alt="">
 
+                  </div>
 
+                  <div class="item2-text">上一年度经营业绩</div>
 
+                </div>
 
+                <div class="item2">
 
+                  <div class="item2-title" style="color: #EBC805;">222.31<span>亿</span></div>
 
+                  <div class="item2-img">
 
+                    <img style="width: 100%; height: 100%;" src="./images/icon-6-home2.png" alt="">
 
+                  </div>
 
+                  <div class="item2-text">上一年度经营业绩</div>
 
+                </div>
 
+                <div class="item2">
 
+                  <div class="item2-title" style="color: #08E4FA;">523.32<span>亿</span></div>
 
+                  <div class="item2-img">
 
+                    <img style="width: 100%; height: 100%;" src="./images/icon-7-home2.png" alt="">
 
+                  </div>
 
+                  <div class="item2-text">上一年度经营业绩</div>
 
+                </div>
 
+              </div>
 
+              <div class="content-right">
 
+                <div ref="echartL2" style="width: 100%; height: 100%;"></div>
 
+              </div>
 
+            </div>
 
+          </dv-border-box-8>
 
+          <dv-border-box-8 :dur="10" style="flex: 1;">
 
+            <div class="title">
 
+              <span class="text">重点项目两线指标</span>
 
+            </div>
 
+            <div class="content">
 
+              <div class="content-left">
 
+                <div ref="echartL3" style="width: 100%; height: 100%;"></div>
 
+              </div>
 
+              <div class="content-con">
 
+                <div ref="echartL4" style="width: 100%; height: 100%;"></div>
 
+              </div>
 
+              <div class="content-right">
 
+                <div class="item5">
 
+                  <div class="title">山西焦煤集团</div>
 
+                  <dv-scroll-board :config="storageRecordConfig" style="width: 100%; height:calc(100% - 30px)" />
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </dv-border-box-8>
 
+        </div>
 
+        <div class="right">
 
+          <dv-border-box-8 :dur="10" style="flex: 1; margin-bottom: 10px;">
 
+            <div class="title">
 
+              <span class="text">投资计划分析</span>
 
+              <span class="tip-window">2023年</span>
 
+            </div>
 
+            <div class="content">
 
+              <div class="content-left">
 
+                <div class="content-left-l">
 
+                  <div class="item3">
 
+                    <div class="item3-title">450.12<span>亿</span></div>
 
+                    <div class="item3-img">
 
+                      <img style="width: 100%; height: 100%;" src="./images/icon-8-home2.png" alt="">
 
+                    </div>
 
+                    <div class="item4-text">
 
+                      年度投资计划总额
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+                <div class="content-left-r">
 
+                  <div class="content-left-r-t">
 
+                    <div class="item4">
 
+                      <div class="item4-title">列入省级项目重点项目</div>
 
+                      <div class="item4-con">
 
+                        <div class="item">
 
+                          <div class="title">200<span>亿</span></div>
 
+                          <div class="text">投资金额</div>
 
+                        </div>
 
+                        <div class="item">
 
+                          <div class="title">20<span>个</span></div>
 
+                          <div class="text">项目数量</div>
 
+                        </div>
 
+                      </div>
 
+                    </div>
 
+                  </div>
 
+                  <div class="content-left-r-b">
 
+                    <div class="item4">
 
+                      <div class="item4-title">国家或省政府决定的重大项目</div>
 
+                      <div class="item4-con">
 
+                        <div class="item">
 
+                          <div class="title">200<span>亿</span></div>
 
+                          <div class="text">投资金额</div>
 
+                        </div>
 
+                        <div class="item">
 
+                          <div class="title">20<span>个</span></div>
 
+                          <div class="text">项目数量</div>
 
+                        </div>
 
+                      </div>
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="content-right">
 
+                <div class="content-right-l">
 
+                  <div ref="echartR1" style="width: 100%; height: 100%;"></div>
 
+                </div>
 
+                <div class="content-right-r">
 
+                  <div ref="echartR2" style="width: 100%; height: 100%;"></div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </dv-border-box-8>
 
+          <dv-border-box-8 :dur="10" style="flex: 1; margin-bottom: 10px;">
 
+            <div class="title">
 
+              <span class="text">投前项目阶段分析</span>
 
+              <span class="tip-window">省重点项目</span>
 
+            </div>
 
+            <div class="content" style="flex-direction: column;">
 
+              <div class="content-top">
 
+                <div ref="echartR3" style="width: 100%; height: 100%;"></div>
 
+              </div>
 
+            </div>
 
+          </dv-border-box-8>
 
+          <dv-border-box-8 :dur="10" style="flex: 1;">
 
+            <div class="title">
 
+              <span class="text">企业后评价分析</span>
 
+            </div>
 
+            <div class="content">
 
+              <div class="content-left">
 
+                <div ref="echartR4" style="width: 100%; height: 100%;"></div>
 
+              </div>
 
+              <div class="content-right">
 
+                <div ref="echartR5" style="width: 100%; height: 100%;"></div>
 
+              </div>
 
+            </div>
 
+          </dv-border-box-8>
 
+        </div>
 
+      </div>
 
+    </dv-full-screen-container>
 
+  </div>
 
+  <script src="./js/investHome2compound.js"></script>
 
+</body>
 
+
 
+</html>

+ 55 - 54
investment/js/data.js
查看文件 

@@ -108,58 +108,59 @@ let amountList = [
 
 
 ]
 
 let projectList = [
 
-  { value: 35, name: '山煤河曲2×350MW低热值煤发电项目', status: '决策审批中' },
 
-  { value: 50.09, name: '泊里煤矿项目', status: '决策完成' },
 
-  { value: 50.77, name: '七元煤矿项目', status: '决策完成' },
 
-  { value: 9.83, name: '新源智慧建设运行总部', status: '决策完成' },
 
-  { value: 43.59, name: '潇河国际会展中心', status: '决策完成' },
 
-  { value: 40.3, name: '山西·潇河新城酒店', status: '决策完成' },
 
-  { value: 18.62, name: '平舒铁路专用线项目', status: '决策完成' },
 
-  { value: 9.34, name: '清凉湾温泉康养小镇项目', status: '决策完成' },
 
-  { value: 0.46, name: '山西省马铃薯工程技术研究中心', status: '决策完成' },
 
-  { value: 45, name: '山西省文化产业园（历史遗留）', status: '决策完成' },
 
-  { value: 60.21, name: '吴家峁矿井及选煤厂项目中泰煤业(历史遗留项目)', status: '决策完成' },
 
-  { value: 20.55, name: '孟母养生健康城（历史遗留）', status: '决策完成' },
 
-  { value: 22.07, name: '潇河国际会议中心', status: '决策完成' },
 
-  { value: 8.67, name: '大地控股忻州新店矿业有限公司年产800万吨精品砂石骨料项目', status: '决策完成' },
 
-  { value: 4.01, name: '晋城市万鑫顺达100MW光伏二期项目', status: '决策审批中' },
 
-  { value: 72.67, name: '同热三期2×100万千万项目', status: '已立项' },
 
-  { value: 47.98, name: '山西乡宁矿区谭坪煤矿一期工程项目(历史遗留项目)', status: '决策完成' },
 
-  { value: 15.25, name: '山西焦煤汾西荣欣矿区铁路专用线（一期）工程', status: '决策完成' },
 
-  { value: 39.3, name: '山西（太重）智能液压挖掘机产业园区生产线建设项目', status: '决策完成' },
 
-  { value: 35, name: '山煤河曲2×350MW低热值煤发电项目', status: '决策完成' },
 
-  { value: 60.21, name: '吴家峁矿井及选煤厂项目(历史遗留项目)', status: '决策完成' },
 
-  { value: 0.74, name: '有机旱作农业国家重点实验室仪器设备采购项目', status: '决策完成' },
 
-  { value: 1.72, name: '中国北方林果苗木繁育基地项目', status: '决策完成' },
 
-  { value: 1.53, name: '智慧农机装备园项目', status: '决策完成' },
 
-  { value: 9.34, name: '中部引黄交口县域供水工程', status: '决策完成' },
 
-  { value: 7.88, name: '西范灌区东扩工程', status: '决策完成' },
 
-  { value: 62.27, name: '灵北煤矿矿井及选煤厂项目(历史遗留项目)', status: '决策完成' },
 
-  { value: 16.73, name: '山西北方铜业有限公司铜矿峪矿园子沟尾矿库项目（历史遗留项目）', status: '决策完成' },
 
-  { value: 26.14, name: '山西北铜新材料科技有限公司新建高性能压延铜带箔和覆铜板项目（历史遗留项目）', status: '决策完成' },
 
-  { value: 34.92, name: '侯马北铜铜业有限公司年处理铜精矿150（优化变更 80）万吨综合回收项目(历史遗留项目）', status: '决策完成' },
 
-  { value: 2.03, name: '娘子关景区创建国家AAAA旅游景区建设项目', status: '决策完成' },
 
-  { value: 7.84, name: '平朔矿区150MW农光储氢一体化项目', status: '决策完成' },
 
-  { value: 10.45, name: '山西国际能源和顺综合清洁能源供应（风光储）一体化项目', status: '已立项' },
 
-  { value: 4.99, name: '应县100MW农光储氢一体化项目', status: '决策完成' },
 
-  { value: 4.99, name: '山阴100MW农光储氢一体化项目', status: '决策完成' },
 
-  { value: 5, name: '山西兆光发电有限责任公司100MW农光储一体化项目', status: '决策完成' },
 
-  { value: 13.56, name: '马家岩煤业', status: '决策完成' },
 
-  { value: 3.19, name: '山西省滹沱河重点段河道治理工程', status: '决策完成' },
 
-  { value: 12.39, name: '山西省泽城西安水电站（二期）工程', status: '决策完成' },
 
-  { value: 2.58, name: '万家寨引黄南干线滤沱河连通工程', status: '决策完成' },
 
-  { value: 15, name: '山西省万家寨引黄入晋工程总干线南干线泵站二期扩机工程', status: '决策完成' },
 
-  { value: 40.32, name: '晋中东山供水工程', status: '决策完成' },
 
-  { value: 27.3, name: '山西省小浪底引黄工程（灌区、工业及城镇生活供水部分）', status: '决策完成' },
 
-  { value: 20.21, name: '铂龙煤业', status: '决策完成' },
 
-  { value: 6.34, name: '世行项目煤层气滚动开发续建工程', status: '决策完成' },
 
-  { value: 5.52, name: '山西潇河国际会议中心有限公司', status: '决策完成' },
 
-  { value: 10.08, name: '设立山西潇河新城酒店有限公司', status: '决策完成' },
 
-  { value: 4.98, name: '保健酒园区新增原酒产能项目', status: '决策完成' },
 
-  { value: 80.53, name: '三交一号矿井及选煤厂', status: '决策完成' },
 
-  { value: 2.64, name: '山西省智慧旅游云平台项目（二期）', status: '决策完成' },
 
-  { value: 3.54, name: '吉县-延长输气管道项目', status: '决策完成' },
 
-  { value: 226.21, name: '太原武宿国际机场三期改扩建工程机场工程', status: '决策完成' },
 
-  { value: 60, name: '山西省（太重）智能高端装备产业园区项目', status: '决策完成' },
 
-  { value: 11.68, name: '太忻一体化经济区滹沱河供水工程', status: '决策完成' }
 
+  { value: 8.67, name: '大地控股忻州新店矿业有限公司年产800万吨精品砂石骨料项目', office: '大地控股', status: '决策完成' },
 
+  { value: 4.98, name: '保健酒园区新增原酒产能项目', office: '汾酒集团', status: '决策完成' },
 
+  { value: 5.00, name: '山西兆光发电有限责任公司100MW农光储一体化项目', office: '国际能源', status: '决策完成' },
 
+  { value: 4.99, name: '山阴100MW农光储氢一体化项目', office: '国际能源', status: '决策完成' },
 
+  { value: 4.99, name: '应县100MW农光储氢一体化项目', office: '国际能源', status: '决策完成' },
 
+  { value: 10.45, name: '山西国际能源和顺综合清洁能源供应（风光储）一体化项目', office: '国际能源', status: '已立项' },
 
+  { value: 7.84, name: '平朔矿区150MW农光储氢一体化项目', office: '国际能源', status: '决策完成' },
 
+  { value: 226.21, name: '太原武宿国际机场三期改扩建工程机场工程', office: '航产集团', status: '决策完成' },
 
+  { value: 6.34, name: '世行项目煤层气滚动开发续建工程', office: '华新燃气', status: '决策完成' },
 
+  { value: 3.54, name: '吉县-延长输气管道项目', office: '华新燃气', status: '决策完成' },
 
+  { value: 62.27, name: '灵北煤矿矿井及选煤厂项目(历史遗留项目)', office: '山西焦煤', status: '决策完成' },
 
+  { value: 60.21, name: '吴家峁矿井及选煤厂项目(历史遗留项目)', office: '山西焦煤', status: '决策完成' },
 
+  { value: 15.25, name: '山西焦煤汾西荣欣矿区铁路专用线（一期）工程', office: '山西焦煤', status: '决策完成' },
 
+  { value: 80.53, name: '三交一号矿井及选煤厂', office: '山西焦煤', status: '决策完成' },
 
+  { value: 13.56, name: '马家岩煤业', office: '山西焦煤', status: '决策完成' },
 
+  { value: 35.00, name: '山煤河曲2×350MW低热值煤发电项目', office: '山西焦煤', status: '决策完成' },
 
+  { value: 60.21, name: '吴家峁矿井及选煤厂项目中泰煤业(历史遗留项目)', office: '山西焦煤', status: '决策完成' },
 
+  { value: 20.21, name: '铂龙煤业', office: '山西焦煤', status: '决策完成' },
 
+  { value: 47.98, name: '山西乡宁矿区谭坪煤矿一期工程项目(历史遗留项目)', office: '山西焦煤', status: '决策完成' },
 
+  { value: 72.67, name: '同热三期2×100万千万项目', office: '晋能控股', status: '已立项' },
 
+  { value: 4.01, name: '晋城市万鑫顺达100MW光伏二期项目', office: '晋能控股', status: '决策审批中' },
 
+  { value: 10.08, name: '设立山西潇河新城酒店有限公司', office: '山西建投', status: '决策完成' },
 
+  { value: 5.52, name: '潇河国际会议中心', office: '山西建投', status: '决策完成' },
 
+  { value: 40.30, name: '山西·潇河新城酒店', office: '山西建投', status: '决策完成' },
 
+  { value: 43.59, name: '潇河国际会展中心', office: '山西建投', status: '决策完成' },
 
+  { value: 9.83, name: '新源智慧建设运行总部', office: '山西建投', status: '决策完成' },
 
+  { value: 0.74, name: '有机旱作农业国家重点实验室仪器设备采购项目', office: '神农科技', status: '决策完成' },
 
+  { value: 1.72, name: '中国北方林果苗木繁育基地项目', office: '神农科技', status: '决策完成' },
 
+  { value: 1.53, name: '智慧农机装备园项目', office: '神农科技', status: '决策完成' },
 
+  { value: 0.46, name: '山西省马铃薯工程技术研究中心', office: '神农科技', status: '决策完成' },
 
+  { value: 11.68, name: '太忻一体化经济区滹沱河供水工程', office: '水控集团', status: '决策完成' },
 
+  { value: 3.19, name: '山西省滹沱河重点段河道治理工程', office: '水控集团', status: '决策完成' },
 
+  { value: 27.30, name: '山西省小浪底引黄工程（灌区、工业及城镇生活供水部分）', office: '水控集团', status: '决策完成' },
 
+  { value: 40.32, name: '晋中东山供水工程', office: '水控集团', status: '决策完成' },
 
+  { value: 15.00, name: '山西省万家寨引黄入晋工程总干线南干线泵站二期扩机工程', office: '水控集团', status: '决策完成' },
 
+  { value: 2.58, name: '万家寨引黄南干线滤沱河连通工程', office: '水控集团', status: '决策完成' },
 
+  { value: 12.39, name: '山西省泽城西安水电站（二期）工程', office: '水控集团', status: '决策完成' },
 
+  { value: 7.88, name: '西范灌区东扩工程', office: '水控集团', status: '决策完成' },
 
+  { value: 9.34, name: '中部引黄交口县域供水工程', office: '水控集团', status: '决策完成' },
 
+  { value: 60.00, name: '山西省（太重）智能高端装备产业园区项目', office: '太重集团', status: '决策完成' },
 
+  { value: 39.30, name: '山西（太重）智能液压挖掘机产业园区生产线建设项目', office: '太重集团', status: '决策完成' },
 
+  { value: 2.64, name: '山西省智慧旅游云平台项目（二期）', office: '文旅集团', status: '决策完成' },
 
+  { value: 2.03, name: '娘子关景区创建国家AAAA旅游景区建设项目', office: '文旅集团', status: '决策完成' },
 
+  { value: 20.55, name: '孟母养生健康城（历史遗留）', office: '文旅集团', status: '决策完成' },
 
+  { value: 45.00, name: '山西省文化产业园（历史遗留）', office: '文旅集团', status: '决策完成' },
 
+  { value: 9.34, name: '清凉湾温泉康养小镇项目', office: '文旅集团', status: '决策完成' },
 
+  { value: 18.62, name: '平舒铁路专用线项目', office: '华阳新材', status: '决策完成' },
 
+  { value: 50.77, name: '七元煤矿项目', office: '华阳新材', status: '决策完成' },
 
+  { value: 50.09, name: '泊里煤矿项目', office: '华阳新材', status: '决策完成' },
 
+
 
+  { value: 34.92, name: '侯马北铜铜业有限公司年处理铜精矿150（优化变更 80）万吨综合回收项目(历史遗留项目）', office: '云时代', status: '决策完成' },
 
+  { value: 26.14, name: '山西北铜新材料科技有限公司新建高性能压延铜带箔和覆铜板项目（历史遗留项目）', office: '云时代', status: '决策完成' },
 
+  { value: 16.73, name: '山西北方铜业有限公司铜矿峪矿园子沟尾矿库项目（历史遗留项目）', office: '云时代', status: '决策完成' },
 
+
 
+
 
 ]

+ 506 - 97
investment/js/investHome.js
查看文件 

@@ -1,6 +1,6 @@
 
 let app = new Vue({
 
   el: '#app',
 
-  data () {
 
+  data() {
 
     return {
 
       showTip: false,
 
       showTip2: false,
 
@@ -43,7 +43,7 @@ let app = new Vue({
 
       }
 
     }
 
   },
 
-  created () {
 
+  created() {
 
     this.amountList.map(item => {
 
       this.amountTotal += Number(item.value)
 
     })
 
@@ -52,12 +52,12 @@ let app = new Vue({
 
       this.time = formatDate()
 
     }, 1000)
 
   },
 
-  beforeDestroy () {
 
+  beforeDestroy() {
 
     if (this.timer) {
 
       clearInterval(this.timer);
 
     }
 
   },
 
-  mounted () {
 
+  mounted() {
 
     setTimeout(() => {
 
       // 左侧图表
 
       //this.initChartTip()
 
@@ -72,7 +72,7 @@ let app = new Vue({
 
     }, 0)
 
   },
 
   methods: {
 
-    numFormat (value) {
 
+    numFormat(value) {
 
       if (!value) return '0'
 
       var intPart = Number(value).toFixed(0) // 获取整数部分
 
       var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断
 
@@ -91,7 +91,7 @@ let app = new Vue({
 
         return intPartFormat
 
       }
 
     },
 
-    convertData (data) {
 
+    convertData(data) {
 
       var res = []
 
       for (var i = 0; i < data.length; i++) {
 
         var geoCoord = this.geoCoordMap[data[i].name]
 
@@ -104,19 +104,19 @@ let app = new Vue({
 
       }
 
       return res
 
     },
 
-    initChinaChart () {
 
+    initChinaChart() {
 
       var data = [
 
-        { name: '大同市', value: 190 },
 
-        { name: '朔州市', value: 160 },
 
-        { name: '忻州市', value: 140 },
 
-        { name: '吕梁市', value: 150 },
 
-        { name: '太原市', value: 300 },
 
-        { name: '阳泉市', value: 110 },
 
-        { name: '晋中市', value: 100 },
 
-        { name: '临汾市', value: 190 },
 
-        { name: '长治市', value: 100 },
 
-        { name: '运城市', value: 180 },
 
-        { name: '晋城市', value: 280 }
 
+        { name: '大同市', value: 60.35 },
 
+        { name: '朔州市', value: 33.61 },
 
+        { name: '忻州市', value: 73.35 },
 
+        { name: '吕梁市', value: 109.04 },
 
+        { name: '太原市', value: 251.67 },
 
+        { name: '阳泉市', value: 25.12 },
 
+        { name: '晋中市', value: 148.57 },
 
+        { name: '临汾市', value: 130.55 },
 
+        { name: '长治市', value: 103.00 },
 
+        { name: '运城市', value: 41.06 },
 
+        { name: '晋城市', value: 45.43 }
 
       ]
 
 
       var moveLine = {
 
@@ -625,7 +625,7 @@ let app = new Vue({
 
     //     window.open('https://www.baidu.com')
 
     //   })
 
     // },
 
-    initChartTip2 () {
 
+    initChartTip2() {
 
       let myChart = echarts.init(this.$refs['echartTip2'])
 
       let option = {
 
         tooltip: {
 
@@ -779,7 +779,7 @@ let app = new Vue({
 
       myChart.setOption(option)
 
     },
 
 
-    initChartTip3 () {
 
+    initChartTip3() {
 
       let myChart = echarts.init(this.$refs['echartTip3'])
 
       let option = {
 
         title: {
 
@@ -906,7 +906,7 @@ let app = new Vue({
 
       })
 
     },
 
 
-    initChartTip4 () {
 
+    initChartTip4() {
 
       let myChart = echarts.init(this.$refs['echartTip4'])
 
       let option = {
 
         title: {
 
@@ -1046,90 +1046,499 @@ let app = new Vue({
 
         loopSeries: true,
 
       })
 
     },
 
-
 
-    initChartL1 () {
 
+    initChartL1() {
 
       let myChart = echarts.init(this.$refs['echartR1'])
 
-      let option = {
 
-        tooltip: {
 
-          trigger: 'item',
 
-          formatter: params => {
 
-            return `<span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${params.color}"></span> ${params.name}：${params.value} <br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${params.color}"></span> 投资占比：${params.percent}%`
 
-          },  //+ '<br/>'+ '{a1}：{c1}' + '%',
 
-          axisPointer: {
 
-            type: 'cross',
 
+      function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
 
+
 
+        // 计算
 
+        let midRatio = (startRatio + endRatio) / 2;
 
+
 
+        let startRadian = startRatio * Math.PI * 2;
 
+        let endRadian = endRatio * Math.PI * 2;
 
+        let midRadian = midRatio * Math.PI * 2;
 
+
 
+        // 如果只有一个扇形，则不实现选中效果。
 
+        if (startRatio === 0 && endRatio === 1) {
 
+          isSelected = false;
 
+        }
 
+
 
+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
 
+        k = typeof k !== 'undefined' ? k : 1 / 3;
 
+
 
+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
 
+        let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
 
+        let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
 
+
 
+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
 
+        let hoverRate = isHovered ? 1.15 : 1;
 
+
 
+        // 返回曲面参数方程
 
+        return {
 
+
 
+          u: {
 
+            min: -Math.PI,
 
+            max: Math.PI * 3,
 
+            step: Math.PI / 32
 
           },
 
-        },
 
-        color: ['#6682f5', '#69c0ff', '#43ede3', '#8ba2ff'],
 
-        legend: {
 
-          top: 'center',
 
-          orient: 'vertical',
 
-          right: '2%',
 
-          textStyle: {
 
-            color: '#9DB9EB',
 
+
 
+          v: {
 
+            min: 0,
 
+            max: Math.PI * 2,
 
+            step: Math.PI / 20
 
           },
 
-        },
 
-        series: [
 
 
-          // {
 
-          //   hoverOffset: 0,
 
-          //   startAngle: 90,
 
-          //   type: "pie",
 
-          //   radius: [48, 55],
 
-          //   center: ["50%", "50%"],
 
-          //   itemStyle: {
 
-          //     normal: {
 
-          //         borderColor: 'rgba(1,31,6,0.7)',
 
-          //         borderWidth: 4
 
-          //     }
 
-          //   },
 
-          //   tooltip: {
 
-          //     show: false
 
-          //   },
 
-          //   labelLine: {
 
-          //     show: false
 
-          //   },
 
-          //   label: {
 
-          //     show: false
 
-          //   },
 
-          //   data: industryList
 
-          // },
 
-          {
 
-            name: '',
 
-            type: 'pie',
 
-            radius: ['55%', '80%'],
 
-            itemStyle: {
 
-              normal: {
 
-                borderColor: 'rgba(1,31,64,0.7)',
 
-                borderWidth: 6
 
-              }
 
+          x: function (u, v) {
 
+            if (u < startRadian) {
 
+              return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
 
+            }
 
+            if (u > endRadian) {
 
+              return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
 
+            }
 
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
 
+          },
 
+
 
+          y: function (u, v) {
 
+            if (u < startRadian) {
 
+              return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
 
+            }
 
+            if (u > endRadian) {
 
+              return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
 
+            }
 
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
 
+          },
 
+
 
+          z: function (u, v) {
 
+            if (u < -Math.PI * 0.5) {
 
+              return Math.sin(u);
 
+            }
 
+            if (u > Math.PI * 2.5) {
 
+              return Math.sin(u) * h * .1;
 
+            }
 
+            return Math.sin(v) > 0 ? 1 * h * .1 : -1;
 
+          }
 
+        };
 
+      }
 
+
 
+      // 生成模拟 3D 饼图的配置项
 
+      function getPie3D(pieData, internalDiameterRatio) {
 
+
 
+        let series = [];
 
+        let sumValue = 0;
 
+        let startValue = 0;
 
+        let endValue = 0;
 
+        let legendData = [];
 
+        let k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3;
 
+
 
+        // 为每一个饼图数据，生成一个 series-surface 配置
 
+        for (let i = 0; i < pieData.length; i++) {
 
+
 
+          sumValue += pieData[i].value;
 
+
 
+          let seriesItem = {
 
+            name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
 
+            type: 'surface',
 
+            parametric: true,
 
+            wireframe: {
 
+              show: false
 
+            },
 
+            pieData: pieData[i],
 
+            pieStatus: {
 
+              selected: false,
 
+              hovered: false,
 
+              k: k
 
             },
 
             labelLine: {
 
-              normal: {
 
-                lineStyle: {
 
-                  width: 1,
 
-                },
 
-              },
 
+              color: "#f00",
 
+              emphasis: {
 
+                show: true
 
+              }
 
+            },
 
+          };
 
+
 
+          if (typeof pieData[i].itemStyle != 'undefined') {
 
+
 
+            let itemStyle = {};
 
+
 
+            typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;
 
+            typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null;
 
+            pieData[i].normal = {
 
+              borderColor: 'rgba(1,31,6,0.7)',
 
+              borderWidth: 4
 
+            }
 
+            seriesItem.itemStyle = itemStyle;
 
+          }
 
+          series.push(seriesItem);
 
+
 
+        }
 
+
 
+        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
 
+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
 
+        for (let i = 0; i < series.length; i++) {
 
+          endValue = startValue + series[i].pieData.value;
 
+          series[i].pieData.startRatio = startValue / sumValue;
 
+          series[i].pieData.endRatio = endValue / sumValue;
 
+          series[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio, false, false, k, series[i].pieData.value);
 
+
 
+          startValue = endValue;
 
+
 
+          legendData.push(series[i].name);
 
+        }
 
+
 
+        // 补充一个透明的圆环，用于支撑高亮功能的近似实现。
 
+        series.push({
 
+          name: 'mouseoutSeries',
 
+          type: 'surface',
 
+          parametric: true,
 
+          wireframe: {
 
+            show: false
 
+          },
 
+          itemStyle: {
 
+            opacity: 0
 
+          },
 
+          parametricEquation: {
 
+            u: {
 
+              min: 0,
 
+              max: Math.PI * 2,
 
+              step: Math.PI / 20
 
+            },
 
+            v: {
 
+              min: 0,
 
+              max: Math.PI,
 
+              step: Math.PI / 20
 
+            },
 
+            x: function (u, v) {
 
+              return Math.sin(v) * Math.sin(u) + Math.sin(u);
 
+            },
 
+            y: function (u, v) {
 
+              return Math.sin(v) * Math.cos(u) + Math.cos(u);
 
+            },
 
+            z: function (u, v) {
 
+              return Math.cos(v) > 0 ? 0.1 : -0.1;
 
+            }
 
+          }
 
+        });
 
+        //console.log(pieData)  线条配置
 
+        // series.push({
 
+        //   name: 'pied',
 
+        //   type: 'pie',
 
+        //   label: {
 
+        //     opacity: 1,
 
+        //     fontSize: 13,
 
+        //     lineHeight: 20,
 
+        //     textStyle: {
 
+        //       fontSize: 16,
 
+        //     },
 
+        //     // normal: {
 
+        //     //   formatter: function (params) {
 
+        //     //     console.log('par', params)
 
+        //     //     return params.name
 
+        //     //     //return `<span style="color:${params.itemStyle.color};">${params.name}:${params.value}</span>`;
 
+        //     //   },
 
+        //     // }
 
+        //   },
 
+        //   labelLine: {
 
+        //     length: 30,
 
+        //     length2: 18,
 
+        //   },
 
+        //   startAngle: -30, //起始角度，支持范围[0, 360]。
 
+        //   clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
 
+        //   radius: ['20%', '50%'],
 
+        //   center: ['50%', '50%'],
 
+        //   data: pieData,
 
+        //   itemStyle: {
 
+        //     opacity: 0,
 
+        //   },
 
+        // });
 
+
 
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
 
+        let option = {
 
+          //animation: false,
 
+          legend: {
 
+            data: legendData,
 
+            top: '5%',
 
+            //orient: 'vertical',
 
+            textStyle: {
 
+              color: '#fff',
 
             },
 
-            data: industryList,
 
           },
 
-        ],
 
+          tooltip: {
 
+            formatter: params => {
 
+              if (params.seriesName !== 'mouseoutSeries') {
 
+                return `${params.seriesName}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>${option.series[params.seriesIndex].pieData.value}`;
 
+              }
 
+            }
 
+          },
 
+          xAxis3D: {
 
+            min: -1,
 
+            max: 1
 
+          },
 
+          yAxis3D: {
 
+            min: -1,
 
+            max: 1
 
+          },
 
+          zAxis3D: {
 
+            min: -1,
 
+            max: 1
 
+          },
 
+          grid3D: {
 
+            show: false,
 
+            boxHeight: 0.4,
 
+            viewControl: {//3d效果可以放大、旋转等，请自己去查看官方配置
 
+              alpha: 40,
 
+              // beta: 40,
 
+              rotateSensitivity: 0,
 
+              zoomSensitivity: 0,
 
+              panSensitivity: 1,
 
+              autoRotate: true
 
+            },
 
+            //后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
 
+            postEffect: {//配置这项会出现锯齿，请自己去查看官方配置有办法解决 
+              enable: true,
 
+              bloom: {
 
+                enable: true,
 
+                bloomIntensity: 0.2
 
+              },
 
+              SSAO: {
 
+                enable: true,
 
+                quality: 'medium',
 
+                radius: 1
 
+              }
 
+            }
 
+          },
 
+          series: series
 
+        };
 
+        return option;
 
       }
 
+
 
+      // 传入数据生成 option
 
+      option = getPie3D([{
 
+        name: '传统产业投资',
 
+        value: 405.29,
 
+        itemStyle: {
 
+          color: '#f77b66'
 
+        }
 
+      }, {
 
+        name: '战略新兴产业投资',
 
+        value: 196.44,
 
+        itemStyle: {
 
+          color: '#3edce0'
 
+        }
 
+      }, {
 
+        name: '基础产业投资',
 
+        value: 722.34,
 
+        itemStyle: {
 
+          color: '#f94e76'
 
+        }
 
+      }], 0.39);
 
+
 
+      myChart.setOption(option);
 
+      // tools.loopShowTooltip(myChart, option, {
 
+      //   nterval: 2000,
 
+      //   loopSeries: true,
 
+      // })
 
+      // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
 
+      let selectedIndex = '';
 
+      let hoveredIndex = '';
 
+
 
+      // 监听点击事件，实现选中效果（单选）
 
       let that = this
 
-      myChart.on('click', function (param) {
 
-        console.log(param)
 
-        if (param.name == '战略新兴产业投资') {
 
-          that.tipTitle2 = param.name
 
+      myChart.on('click', function (params) {
 
+        if (option.series[params.seriesIndex].name == '战略新兴产业投资') {
 
+
 
+          that.tipTitle2 = option.series[params.seriesIndex].name
 
           that.showTip2 = true
 
         }
 
+        // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
 
+        // let isSelected = !option.series[params.seriesIndex].pieStatus.selected;
 
+        // let isHovered = option.series[params.seriesIndex].pieStatus.hovered;
 
+        // let k = option.series[params.seriesIndex].pieStatus.k;
 
+        // let startRatio = option.series[params.seriesIndex].pieData.startRatio;
 
+        // let endRatio = option.series[params.seriesIndex].pieData.endRatio;
 
 
-      })
 
-      myChart.setOption(option)
 
-      tools.loopShowTooltip(myChart, option, {
 
-        nterval: 2000,
 
-        loopSeries: true,
 
-      })
 
+
 
+        // // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
 
+        // if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
 
+        //   option.series[selectedIndex].parametricEquation = getParametricEquation(option.series[selectedIndex].pieData.startRatio, option.series[selectedIndex].pieData.endRatio, false, false, k, option.series[selectedIndex].pieData.value);
 
+        //   option.series[selectedIndex].pieStatus.selected = false;
 
+        // }
 
+
 
+        // // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
 
+        // option.series[params.seriesIndex].parametricEquation = getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, option.series[selectedIndex].pieData.value);
 
+        // option.series[params.seriesIndex].pieStatus.selected = isSelected;
 
+
 
+        // // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
 
+        // isSelected ? selectedIndex = params.seriesIndex : null;
 
+
 
+        // 使用更新后的 option，渲染图表
 
+        myChart.setOption(option);
 
+      });
 
+
 
+      // 监听 mouseover，近似实现高亮（放大）效果
 
+      myChart.on('mouseover', function (params) {
 
+
 
+        // 准备重新渲染扇形所需的参数
 
+        let isSelected;
 
+        let isHovered;
 
+        let startRatio;
 
+        let endRatio;
 
+        let k;
 
+
 
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
 
+        if (hoveredIndex === params.seriesIndex) {
 
+          return;
 
+
 
+          // 否则进行高亮及必要的取消高亮操作
 
+        } else {
 
+
 
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
 
+          if (hoveredIndex !== '') {
 
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
 
+            isSelected = option.series[hoveredIndex].pieStatus.selected;
 
+            isHovered = false;
 
+            startRatio = option.series[hoveredIndex].pieData.startRatio;
 
+            endRatio = option.series[hoveredIndex].pieData.endRatio;
 
+            k = option.series[hoveredIndex].pieStatus.k;
 
+
 
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
 
+            option.series[hoveredIndex].parametricEquation = getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, option.series[hoveredIndex].pieData.value);
 
+            option.series[hoveredIndex].pieStatus.hovered = isHovered;
 
+
 
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
 
+            hoveredIndex = '';
 
+          }
 
+
 
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
 
+          if (params.seriesName !== 'mouseoutSeries') {
 
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
 
+            isSelected = option.series[params.seriesIndex].pieStatus.selected;
 
+            isHovered = true;
 
+            startRatio = option.series[params.seriesIndex].pieData.startRatio;
 
+            endRatio = option.series[params.seriesIndex].pieData.endRatio;
 
+            k = option.series[params.seriesIndex].pieStatus.k;
 
+
 
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
 
+            option.series[params.seriesIndex].parametricEquation = getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, option.series[params.seriesIndex].pieData.value + 5);
 
+            option.series[params.seriesIndex].pieStatus.hovered = isHovered;
 
+
 
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
 
+            hoveredIndex = params.seriesIndex;
 
+          }
 
+
 
+          // 使用更新后的 option，渲染图表
 
+
 
+          myChart.setOption(option);
 
+        }
 
+      });
 
+
 
+      // 修正取消高亮失败的 bug
 
+      myChart.on('globalout', function () {
 
+        if (hoveredIndex !== '') {
 
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
 
+          isSelected = option.series[hoveredIndex].pieStatus.selected;
 
+          isHovered = false;
 
+          k = option.series[hoveredIndex].pieStatus.k;
 
+          startRatio = option.series[hoveredIndex].pieData.startRatio;
 
+          endRatio = option.series[hoveredIndex].pieData.endRatio;
 
+
 
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
 
+          option.series[hoveredIndex].parametricEquation = getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, option.series[hoveredIndex].pieData.value);
 
+          option.series[hoveredIndex].pieStatus.hovered = isHovered;
 
+
 
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
 
+          hoveredIndex = '';
 
+        }
 
+
 
+        // 使用更新后的 option，渲染图表
 
+        myChart.setOption(option);
 
+
 
+      });
 
+      //var zrender = myChart.getZrender();
 
+      //var elements = zrender.storage._elements;
 
+      console.log('66', myChart);
 
     },
 
-    initChartL2 () {
 
+    // initChartL1 () {
 
+    //   let myChart = echarts.init(this.$refs['echartR1'])
 
+    //   let option = {
 
+    //     tooltip: {
 
+    //       trigger: 'item',
 
+    //       formatter: params => {
 
+    //         return `<span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${params.color}"></span> ${params.name}：${params.value} <br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${params.color}"></span> 投资占比：${params.percent}%`
 
+    //       },  //+ '<br/>'+ '{a1}：{c1}' + '%',
 
+    //       axisPointer: {
 
+    //         type: 'cross',
 
+    //       },
 
+    //     },
 
+    //     color: ['#6682f5', '#69c0ff', '#43ede3', '#8ba2ff'],
 
+    //     legend: {
 
+    //       top: 'center',
 
+    //       orient: 'vertical',
 
+    //       right: '2%',
 
+    //       textStyle: {
 
+    //         color: '#9DB9EB',
 
+    //       },
 
+    //     },
 
+    //     series: [
 
+
 
+    //       // {
 
+    //       //   hoverOffset: 0,
 
+    //       //   startAngle: 90,
 
+    //       //   type: "pie",
 
+    //       //   radius: [48, 55],
 
+    //       //   center: ["50%", "50%"],
 
+    //       //   itemStyle: {
 
+    //       //     normal: {
 
+    //       //         borderColor: 'rgba(1,31,6,0.7)',
 
+    //       //         borderWidth: 4
 
+    //       //     }
 
+    //       //   },
 
+    //       //   tooltip: {
 
+    //       //     show: false
 
+    //       //   },
 
+    //       //   labelLine: {
 
+    //       //     show: false
 
+    //       //   },
 
+    //       //   label: {
 
+    //       //     show: false
 
+    //       //   },
 
+    //       //   data: industryList
 
+    //       // },
 
+    //       {
 
+    //         name: '',
 
+    //         type: 'pie',
 
+    //         radius: ['55%', '80%'],
 
+    //         itemStyle: {
 
+    //           normal: {
 
+    //             borderColor: 'rgba(1,31,64,0.7)',
 
+    //             borderWidth: 6
 
+    //           }
 
+    //         },
 
+    //         labelLine: {
 
+    //           normal: {
 
+    //             lineStyle: {
 
+    //               width: 1,
 
+    //             },
 
+    //           },
 
+    //         },
 
+    //         data: industryList,
 
+    //       },
 
+    //     ],
 
+    //   }
 
+    //   let that = this
 
+    //   myChart.on('click', function (param) {
 
+    //     console.log(param)
 
+    //     if (param.name == '战略新兴产业投资') {
 
+    //       that.tipTitle2 = param.name
 
+    //       that.showTip2 = true
 
+    //     }
 
+
 
+    //   })
 
+    //   myChart.setOption(option)
 
+    //   tools.loopShowTooltip(myChart, option, {
 
+    //     nterval: 2000,
 
+    //     loopSeries: true,
 
+    //   })
 
+    // },
 
+    initChartL2() {
 
       let myChart = echarts.init(this.$refs['echartL2'])
 
       let option = {
 
         tooltip: {
 
@@ -1247,7 +1656,7 @@ let app = new Vue({
 
         loopSeries: true,
 
       })
 
     },
 
-    initChartR1 () {
 
+    initChartR1() {
 
       let myChart = echarts.init(this.$refs['echartL1'])
 
       let option = {
 
         tooltip: {
 
@@ -1362,20 +1771,20 @@ let app = new Vue({
 
         loopSeries: true,
 
       })
 
     },
 
-    initProjectList () {
 
+    initProjectList() {
 
       let dataList = []
 
       projectList.map(item => {
 
-        dataList.push([item.name, item.value + '亿', item.status])
 
+        dataList.push([item.name, item.office, item.value + '亿', item.status])
 
       })
 
       this.storageRecordConfig = {
 
-        header: ['项目名称', '投资金额', '项目进度'],
 
+        header: ['项目名称', '企业集团', '投资金额', '项目进度'],
 
         headerBGC: '#05507b33',
 
         oddRowBGC: '#05507b33',
 
         evenRowBGC: '',
 
         headerHeight: '40',
 
         rowNum: 5,
 
-        columnWidth: [350, 100],
 
-        align: ['center', 'center', 'center'],
 
+        //columnWidth: [150],
 
+        align: ['center', 'center', 'center', 'center'],
 
         data: dataList,
 
       }
 
     }

+ 325 - 292
investment/js/investHome2.js
查看文件 

@@ -67,12 +67,13 @@ let app = new Vue({
 
       this.initChartL2()
 
       this.initChartL3()
 
       this.initChartL4()
 
+      this.initChartL5()
 
+      this.initChartL6()
 
+      this.initChartL7()
 
       this.initChartR1()
 
       this.initChartR2()
 
       this.initChartR3()
 
-      this.initChartR4()
 
-      this.initChartR5()
 
-    }, 0)
 
+    },)
 
   },
 
   methods: {
 
     convertData (data) {
 
@@ -525,63 +526,144 @@ let app = new Vue({
 
       })
 
     },
 
     initChartL1 () {
 
-      let myChart = echarts.init(this.$refs['echartL1'])
 
+      let myChart = echarts.init(document.getElementById("echartL1"));
 
       let option = {
 
-        title: {
 
-          text: '储备项目产业分布',
 
-          x: 'center',
 
-          y: '87%',
 
-          textStyle: {
 
-            color: 'rgba(255,255,255,0.6)',
 
-            fontSize: 12,
 
-          },
 
+        grid: {
 
+          top: 35,
 
+          right: 40,
 
+          left: 60,
 
+          bottom: 40,
 
         },
 
         tooltip: {
 
-          trigger: 'item',
 
+          show: true,
 
+          trigger: "axis",
 
+          axisPointer: {
 
+            // 坐标轴指示器，坐标轴触发有效
 
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
 
+          },
 
         },
 
-        color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'],
 
-        legend: {
 
-          icon: 'circle',
 
-          top: 'bottom',
 
-          orient: 'vertical',
 
-          right: '1%',
 
-          textStyle: {
 
-            color: '#9DB9EB',
 
+        xAxis: {
 
+          data: ["山西焦煤", "晋能控股", "华阳新材", "潞安化工", "华新燃气", "太重集团", "国际能源", "华远陆港", "水控集团", "文旅集团", "交控集团", '航产集团', '山西建设', '汾酒集团', '大地控股'],
 
+          axisTick: {
 
+            show: false,
 
+          },
 
+          // x轴的字体颜色
 
+          axisLabel: {
 
+            rotate: 40,
 
+            textStyle: {
 
+              color: "white",
 
+            },
 
+          },
 
+          //y轴线的颜色以及宽度
 
+          axisLine: {
 
+            show: true,
 
+            lineStyle: {
 
+              color: "#1E5389",
 
+              width: 1,
 
+              type: "solid",
 
+            },
 
+          },
 
+        },
 
+        yAxis: {
 
+          // name: '亿元',
 
+          nameTextStyle: {//y轴上方单位的颜色
 
+            color: '#fff',
 
+          },
 
+          axisTick: {
 
+            lineStyle: {
 
+              color: "#18416F",
 
+            },
 
+          },
 
+          // y轴的字体颜色
 
+          axisLabel: {
 
+            textStyle: {
 
+              color: "white",
 
+            },
 
+          },
 
+          splitLine: {
 
+            show: false,
 
+            lineStyle: {
 
+              color: "#204561",
 
+              width: 1,
 
+              type: "dotted",
 
+            },
 
+          },
 
+          //y轴线的颜色以及宽度
 
+          axisLine: {
 
+            show: true,
 
+            lineStyle: {
 
+              color: "#1E5389",
 
+              width: 1,
 
+              type: "solid",
 
+            },
 
           },
 
         },
 
         series: [
 
           {
 
-            name: '',
 
-            type: 'pie',
 
-            radius: ['50%', '70%',],
 
-            center: ['50%', '45%'],
 
+            name: "2022年额度",
 
+            type: "bar",
 
+            data: [1200, 680, 562, 268, 717, 843, 987, 126, 723, 569, 534, 753, 864, , 834, 764, 978],
 
+            showBackground: false,
 
+            backgroundStyle: {
 
+              color: "#18416F",
 
+            },
 
+            barWidth: "10%",
 
             itemStyle: {
 
-              normal: {
 
-                label: {
 
-                  show: false,
 
+              barBorderRadius: [10, 10, 0, 0],
 
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
 
+                {
 
+                  offset: 0,
 
+                  color: "#132543",
 
+                }, //柱图渐变色
 
+                {
 
+                  offset: 1,
 
+                  color: "#897DFF",
 
                 },
 
-              },
 
+              ]),
 
             },
 
-            labelLine: {
 
-              show: false,
 
-              emphasis: {
 
-                show: true
 
-              }
 
+          },
 
+          {
 
+            name: "2023年额度",
 
+            type: "bar",
 
+            data: [658, 1125, 658, 999, 643, 675, 743, 724, 733, 725, 652, 865, 749, 359, 241],
 
+            showBackground: false,
 
+            backgroundStyle: {
 
+              color: "#18416F",
 
+            },
 
+            barWidth: "10%",
 
+            itemStyle: {
 
+              barBorderRadius: [10, 10, 0, 0],
 
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
 
+                {
 
+                  offset: 0,
 
+                  color: "#132543",
 
+                }, //柱图渐变色
 
+                {
 
+                  offset: 1,
 
+                  color: "#FED95B",
 
+                },
 
+              ]),
 
             },
 
-            data: [
 
-              { value: 1048, name: '煤炭' },
 
-              { value: 735, name: '火电' },
 
-              { value: 580, name: '焦化' },
 
-              { value: 484, name: '风电' },
 
-            ],
 
           },
 
         ],
 
-      }
 
-      myChart.setOption(option)
 
+        legend: {
 
+          data: ["2022年额度", "2023年额度"],
 
+          textStyle: {
 
+            // 图列内容样式
 
+            color: "#fff", // 字体颜色
 
+            // fontSize: "10",
 
+          },
 
+          right: 'center',
 
+          icon: "roundRect",
 
+          // 小图标的宽高
 
+          itemHeight: 5,
 
+        },
 
+      };
 
       tools.loopShowTooltip(myChart, option, {
 
         nterval: 2000,
 
         loopSeries: true,
 
       })
 
+      myChart.setOption(option);
 
     },
 
     initChartL2 () {
 
       let myChart = echarts.init(this.$refs['echartL2'])
 
@@ -670,7 +752,7 @@ let app = new Vue({
 
           bottom: '25%',
 
         },
 
         xAxis: {
 
-          data: ['总投资收益率', '销售利润率'],
 
+          data: ['总投资收益率', '销售利润率', '成本费用利润率', '总资产周转率', '财务内部收益率'],
 
           axisLine: {
 
             show: true, //隐藏X轴轴线
 
             lineStyle: {
 
@@ -735,7 +817,7 @@ let app = new Vue({
 
                 ]),
 
               },
 
             },
 
-            data: [10, 20],
 
+            data: [10, 20, 30, 40, 50],
 
             markLine: {
 
               symbol: ['none', 'none'],
 
               data: [
 
@@ -783,9 +865,9 @@ let app = new Vue({
 
       let myChart = echarts.init(this.$refs['echartL4'])
 
       let option = {
 
         title: {
 
-          text: '储备项目产业分布',
 
+          text: '产业类型分析',
 
           x: 'center',
 
-          y: '87%',
 
+          y: '0%',
 
           textStyle: {
 
             color: 'rgba(255,255,255,0.6)',
 
             fontSize: 12,
 
@@ -796,6 +878,7 @@ let app = new Vue({
 
         },
 
         color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'],
 
         legend: {
 
+          show: false,
 
           icon: 'circle',
 
           top: 'bottom',
 
           orient: 'vertical',
 
@@ -808,8 +891,177 @@ let app = new Vue({
 
           {
 
             name: '',
 
             type: 'pie',
 
-            radius: ['50%', '70%'],
 
-            center: ['50%', '45%'],
 
+            radius: ['0%', '70%'],
 
+            center: ['50%', '60%'],
 
+            itemStyle: {
 
+              normal: {
 
+                label: {
 
+                  show: false,
 
+                },
 
+              },
 
+            },
 
+            labelLine: {
 
+              show: false,
 
+            },
 
+            data: [
 
+              { value: 1048, name: '煤炭' },
 
+              { value: 735, name: '火电' },
 
+              { value: 580, name: '焦化' },
 
+              { value: 484, name: '风电' },
 
+            ],
 
+          },
 
+        ],
 
+      }
 
+      myChart.setOption(option)
 
+      tools.loopShowTooltip(myChart, option, {
 
+        nterval: 2000,
 
+        loopSeries: true,
 
+      })
 
+    },
 
+    initChartL5 () {
 
+      let myChart = echarts.init(this.$refs['echartL5'])
 
+      let option = {
 
+        title: {
 
+          text: '传统产业',
 
+          x: 'center',
 
+          y: '0%',
 
+          textStyle: {
 
+            color: 'rgba(255,255,255,0.6)',
 
+            fontSize: 12,
 
+          },
 
+        },
 
+        tooltip: {
 
+          trigger: 'item',
 
+        },
 
+        color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'],
 
+        legend: {
 
+          show: false,
 
+          icon: 'circle',
 
+          top: 'bottom',
 
+          orient: 'vertical',
 
+          right: '1%',
 
+          textStyle: {
 
+            color: '#9DB9EB',
 
+          },
 
+        },
 
+        series: [
 
+          {
 
+            name: '',
 
+            type: 'pie',
 
+            radius: ['0%', '70%'],
 
+            center: ['50%', '60%'],
 
+            itemStyle: {
 
+              normal: {
 
+                label: {
 
+                  show: false,
 
+                },
 
+              },
 
+            },
 
+            labelLine: {
 
+              show: false,
 
+            },
 
+            data: [
 
+              { value: 1048, name: '煤炭' },
 
+              { value: 735, name: '火电' },
 
+              { value: 580, name: '焦化' },
 
+              { value: 484, name: '风电' },
 
+            ],
 
+          },
 
+        ],
 
+      }
 
+      myChart.setOption(option)
 
+      tools.loopShowTooltip(myChart, option, {
 
+        nterval: 2000,
 
+        loopSeries: true,
 
+      })
 
+    }, initChartL6 () {
 
+      let myChart = echarts.init(this.$refs['echartL6'])
 
+      let option = {
 
+        title: {
 
+          text: '战略性新兴产业',
 
+          x: 'center',
 
+          y: '0%',
 
+          textStyle: {
 
+            color: 'rgba(255,255,255,0.6)',
 
+            fontSize: 12,
 
+          },
 
+        },
 
+        tooltip: {
 
+          trigger: 'item',
 
+        },
 
+        color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'],
 
+        legend: {
 
+          show: false,
 
+          icon: 'circle',
 
+          top: 'bottom',
 
+          orient: 'vertical',
 
+          right: '1%',
 
+          textStyle: {
 
+            color: '#9DB9EB',
 
+          },
 
+        },
 
+        series: [
 
+          {
 
+            name: '',
 
+            type: 'pie',
 
+            radius: ['0%', '70%'],
 
+            center: ['50%', '60%'],
 
+            itemStyle: {
 
+              normal: {
 
+                label: {
 
+                  show: false,
 
+                },
 
+              },
 
+            },
 
+            labelLine: {
 
+              show: false,
 
+            },
 
+            data: [
 
+              { value: 1048, name: '煤炭' },
 
+              { value: 735, name: '火电' },
 
+              { value: 580, name: '焦化' },
 
+              { value: 484, name: '风电' },
 
+            ],
 
+          },
 
+        ],
 
+      }
 
+      myChart.setOption(option)
 
+      tools.loopShowTooltip(myChart, option, {
 
+        nterval: 2000,
 
+        loopSeries: true,
 
+      })
 
+    }, initChartL7 () {
 
+      let myChart = echarts.init(this.$refs['echartL7'])
 
+      let option = {
 
+        title: {
 
+          text: '基础产业',
 
+          x: 'center',
 
+          y: '0%',
 
+          textStyle: {
 
+            color: 'rgba(255,255,255,0.6)',
 
+            fontSize: 12,
 
+          },
 
+        },
 
+        tooltip: {
 
+          trigger: 'item',
 
+        },
 
+        color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'],
 
+        legend: {
 
+          show: false,
 
+          icon: 'circle',
 
+          top: 'bottom',
 
+          orient: 'vertical',
 
+          right: '1%',
 
+          textStyle: {
 
+            color: '#9DB9EB',
 
+          },
 
+        },
 
+        series: [
 
+          {
 
+            name: '',
 
+            type: 'pie',
 
+            radius: ['0%', '70%'],
 
+            center: ['50%', '60%'],
 
             itemStyle: {
 
               normal: {
 
                 label: {
 
@@ -840,7 +1092,7 @@ let app = new Vue({
 
       let option = {
 
         title: {
 
           text: '储备项目产业分布',
 
-          x: '15%',
 
+          x: 'center',
 
           y: '87%',
 
           textStyle: {
 
             color: 'rgba(255,255,255,0.6)',
 
@@ -852,6 +1104,7 @@ let app = new Vue({
 
         },
 
         color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'],
 
         legend: {
 
+          show: false,
 
           icon: 'circle',
 
           top: 'bottom',
 
           orient: 'vertical',
 
@@ -865,7 +1118,7 @@ let app = new Vue({
 
             name: '',
 
             type: 'pie',
 
             radius: ['40%', '60%'],
 
-            center: ['40%', '45%'],
 
+            center: ['50%', '45%'],
 
             itemStyle: {
 
               normal: {
 
                 label: {
 
@@ -896,7 +1149,7 @@ let app = new Vue({
 
       let option = {
 
         title: {
 
           text: '储备项目产业分布',
 
-          x: '15%',
 
+          x: 'center',
 
           y: '87%',
 
           textStyle: {
 
             color: 'rgba(255,255,255,0.6)',
 
@@ -908,6 +1161,7 @@ let app = new Vue({
 
         },
 
         color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'],
 
         legend: {
 
+          show: false,
 
           icon: 'circle',
 
           top: 'bottom',
 
           orient: 'vertical',
 
@@ -921,7 +1175,7 @@ let app = new Vue({
 
             name: '',
 
             type: 'pie',
 
             radius: ['40%', '60%'],
 
-            center: ['40%', '45%'],
 
+            center: ['50%', '45%'],
 
             itemStyle: {
 
               normal: {
 
                 label: {
 
@@ -973,10 +1227,27 @@ let app = new Vue({
 
           }
 
         },
 
         grid: {
 
-          top: '22%',
 
+          top: '25%',
 
           right: '5%',
 
           left: '10%',
 
-          bottom: '15%',
 
+          bottom: '0',
 
+        },
 
+        visualMap: {
 
+          type: 'piecewise',
 
+          top: 'top',
 
+          min: 0,
 
+          right: 100,
 
+          textStyle: {
 
+            color: 'white',
 
+          },
 
+          // pieces: ['固定投资累类', '股权及其他类']
 
+          pieces: [{
 
+            label: '固定资产类',
 
+            color: 'orange'
 
+          }, {
 
+            label: '股权及其他类',
 
+            color: '#6b61a8'
 
+          }]
 
         },
 
         yAxis: {
 
           data: ['批量备案', '特别监管'],
 
@@ -1087,244 +1358,6 @@ let app = new Vue({
 
         nterval: 2000,
 
         loopSeries: true,
 
       })
 
-    },
 
-    initChartR4 () {
 
-      let myChart = echarts.init(this.$refs['echartR4'])
 
-      let option = {
 
-        title: {
 
-          text: '当居企后评价项目数后',
 
-          x: 'center',
 
-          y: '3%',
 
-          textStyle: {
 
-            color: '#69C0FF',
 
-            fontSize: 14,
 
-          },
 
-        },
 
-        tooltip: {
 
-          trigger: 'axis',
 
-          axisPointer: {
 
-            type: 'shadow',
 
-          },
 
-        },
 
-        grid: {
 
-          top: '22%',
 
-          right: '5%',
 
-          left: '10%',
 
-          bottom: '15%',
 
-        },
 
-        legend: {
 
-          data: '',
 
-          top: '12%',
 
-          right: '5%',
 
-          textStyle: {
 
-            color: 'rgba(250,250,250,0.6)',
 
-            fontSize: 16,
 
-          },
 
-        },
 
-        xAxis: {
 
-          data: ['一级', '二级'],
 
-          axisLine: {
 
-            show: true, //隐藏X轴轴线
 
-            lineStyle: {
 
-              color: '#005094',
 
-              width: 1,
 
-            },
 
-          },
 
-          axisTick: {
 
-            show: false, //隐藏X轴刻度
 
-          },
 
-          axisLabel: {
 
-            show: true,
 
-            rotate: 15,
 
-            textStyle: {
 
-              color: 'rgba(255,255,255,0.6)', //X轴文字颜色
 
-              fontSize: 16,
 
-            },
 
-          },
 
-        },
 
-        yAxis: [
 
-          {
 
-            type: 'value',
 
-            nameTextStyle: {
 
-              color: '#ebf8ac',
 
-              fontSize: 16,
 
-            },
 
-            splitLine: {
 
-              show: true,
 
-              lineStyle: {
 
-                color: '#68b4dd66',
 
-                type: 'dashed',
 
-              },
 
-            },
 
-            axisLine: {
 
-              show: false,
 
-            },
 
-            axisLabel: {
 
-              show: true,
 
-              textStyle: {
 
-                color: 'rgba(250,250,250,0.6)',
 
-                fontSize: 16,
 
-              },
 
-            },
 
-          },
 
-        ],
 
-        series: [
 
-          {
 
-            name: '',
 
-            type: 'bar',
 
-            barWidth: 15,
 
-            itemStyle: {
 
-              normal: {
 
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
 
-                  {
 
-                    offset: 0,
 
-                    color: '#69c0ff',
 
-                  },
 
-                  {
 
-                    offset: 1,
 
-                    color: '#082550',
 
-                  },
 
-                ]),
 
-              },
 
-            },
 
-            data: [10, 20],
 
-          },
 
-        ],
 
-      }
 
-      myChart.setOption(option)
 
-      tools.loopShowTooltip(myChart, option, {
 
-        nterval: 2000,
 
-        loopSeries: true,
 
-      })
 
-    },
 
-    initChartR5 () {
 
-      let myChart = echarts.init(this.$refs['echartR5'])
 
-      let option = {
 
-        title: {
 
-          text: '当属企业评分情况',
 
-          x: 'center',
 
-          y: '3%',
 
-          textStyle: {
 
-            color: '#69C0FF',
 
-            fontSize: 14,
 
-          },
 
-        },
 
-        tooltip: {
 
-          trigger: 'axis',
 
-          axisPointer: {
 
-            type: 'shadow',
 
-          },
 
-        },
 
-        grid: {
 
-          top: '22%',
 
-          right: '5%',
 
-          left: '10%',
 
-          bottom: '15%',
 
-        },
 
-        legend: {
 
-          data: ['过程管控企业层得分', '发展线指标情况企业层得分'],
 
-          top: '12%',
 
-          right: '5%',
 
-          textStyle: {
 
-            color: 'rgba(250,250,250,0.6)',
 
-            fontSize: 12,
 
-          },
 
-        },
 
-        xAxis: {
 
-          data: ['一级', '二级'],
 
-          axisLine: {
 
-            show: true, //隐藏X轴轴线
 
-            lineStyle: {
 
-              color: '#005094',
 
-              width: 1,
 
-            },
 
-          },
 
-          axisTick: {
 
-            show: false, //隐藏X轴刻度
 
-          },
 
-          axisLabel: {
 
-            show: true,
 
-            rotate: 15,
 
-            textStyle: {
 
-              color: 'rgba(255,255,255,0.6)', //X轴文字颜色
 
-              fontSize: 16,
 
-            },
 
-          },
 
-        },
 
-        yAxis: [
 
-          {
 
-            type: 'value',
 
-            nameTextStyle: {
 
-              color: '#ebf8ac',
 
-              fontSize: 16,
 
-            },
 
-            splitLine: {
 
-              show: true,
 
-              lineStyle: {
 
-                color: '#68b4dd66',
 
-                type: 'dashed',
 
-              },
 
-            },
 
-            axisLine: {
 
-              show: false,
 
-            },
 
-            axisLabel: {
 
-              show: true,
 
-              textStyle: {
 
-                color: 'rgba(250,250,250,0.6)',
 
-                fontSize: 16,
 
-              },
 
-            },
 
-          },
 
-        ],
 
-        series: [
 
-          {
 
-            name: '过程管控企业层得分',
 
-            type: 'bar',
 
-            barWidth: 15,
 
-            itemStyle: {
 
-              normal: {
 
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
 
-                  {
 
-                    offset: 0,
 
-                    color: '#5e7ae9',
 
-                  },
 
-                  {
 
-                    offset: 1,
 
-                    color: '#082550',
 
-                  },
 
-                ]),
 
-              },
 
-            },
 
-            data: [10, 20],
 
-          },
 
-          {
 
-            name: '发展线指标情况企业层得分',
 
-            type: 'bar',
 
-            barWidth: 15,
 
-            itemStyle: {
 
-              normal: {
 
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
 
-                  {
 
-                    offset: 0,
 
-                    color: '#69c0ff',
 
-                  },
 
-                  {
 
-                    offset: 1,
 
-                    color: '#082550',
 
-                  },
 
-                ]),
 
-              },
 
-            },
 
-            data: [10, 20],
 
-          },
 
-        ],
 
-      }
 
-      myChart.setOption(option)
 
-      tools.loopShowTooltip(myChart, option, {
 
-        nterval: 2000,
 
-        loopSeries: true,
 
-      })
 
     }
 
   },
 
 })

+ 1330 - 0
investment/js/investHome2compound.js
查看文件 

@@ -0,0 +1,1330 @@
 
+let app = new Vue({
 
+  el: '#app',
 
+  data () {
 
+    return {
 
+      year: '2022',
 
+      time: '',
 
+      timer: '',
 
+      mapName: 'shanxi',
 
+      geoCoordMap: {},
 
+      config1: {
 
+        number: [100],
 
+        content: '{nt}个',
 
+      },
 
+      storageRecordConfig: {
 
+        header: [],
 
+        headerBGC: '#05507b33',
 
+        oddRowBGC: '#05507b33',
 
+        evenRowBGC: '',
 
+        headerHeight: '40',
 
+        rowNum: 4,
 
+        align: ['center'],
 
+        data: [
 
+          ['工程建设项目'],
 
+          ['施工图设计'],
 
+          ['工程建设项目'],
 
+          ['施工图设计'],
 
+          ['工程建设项目'],
 
+        ],
 
+      },
 
+      companyList: [
 
+        { name: '山西焦煤' },
 
+        { name: '晋能控股' },
 
+        { name: '华新燃气' },
 
+        { name: '山西建投' },
 
+        { name: '潞安化工' },
 
+        { name: '华远陆港' },
 
+        { name: '航产集团' },
 
+        { name: '大地控股' },
 
+        { name: '国新能源' },
 
+        { name: '汾酒集团' },
 
+        { name: '云时代' },
 
+        { name: '神农科技' },
 
+        { name: '华阳新材' },
 
+        { name: '华舰体育' },
 
+        { name: '交控集团' },
 
+        { name: '文旅集团' },
 
+        { name: '水控集团' },
 
+        { name: '太重集团' },
 
+      ],
 
+    }
 
+  },
 
+  created () {
 
+    this.time = formatDate()
 
+    this.timer = setInterval(() => {
 
+      this.time = formatDate()
 
+    }, 1000)
 
+  },
 
+  beforeDestroy () {
 
+    if (this.timer) {
 
+      clearInterval(this.timer);
 
+    }
 
+  },
 
+  mounted () {
 
+    // 左侧图表
 
+    setTimeout(() => {
 
+      this.initChartL1()
 
+      this.initChartL2()
 
+      this.initChartL3()
 
+      this.initChartL4()
 
+      this.initChartR1()
 
+      this.initChartR2()
 
+      this.initChartR3()
 
+      this.initChartR4()
 
+      this.initChartR5()
 
+    }, 0)
 
+  },
 
+  methods: {
 
+    convertData (data) {
 
+      var res = []
 
+      for (var i = 0; i < data.length; i++) {
 
+        var geoCoord = this.geoCoordMap[data[i].name]
 
+        if (geoCoord) {
 
+          res.push({
 
+            name: data[i].name,
 
+            value: geoCoord.concat(data[i].value),
 
+          })
 
+        }
 
+      }
 
+      return res
 
+    },
 
+    initChinaChart () {
 
+      var data = [
 
+        { name: '吕梁市', value: 150 },
 
+        { name: '大同市', value: 190 },
 
+        { name: '忻州市', value: 140 },
 
+        { name: '朔州市', value: 160 },
 
+        { name: '晋中市', value: 100 },
 
+        { name: '太原市', value: 300 },
 
+        { name: '临汾市', value: 190 },
 
+        { name: '长治市', value: 100 },
 
+        { name: '晋城市', value: 280 },
 
+        { name: '运城市', value: 180 },
 
+        { name: '阳泉市', value: 110 },
 
+      ]
 
+
 
+      var moveLine = {
 
+        normal: [
 
+          {
 
+            fromName: '太原市',
 
+            toName: '吕梁市',
 
+            coords: [
 
+              [112.3352, 37.9413],
 
+              [111.3574, 37.7325],
 
+            ],
 
+          },
 
+          {
 
+            fromName: '太原市',
 
+            toName: '忻州市',
 
+            coords: [
 
+              [112.3352, 37.9413],
 
+              [112.4561, 38.8971],
 
+            ],
 
+          },
 
+          {
 
+            fromName: '太原市',
 
+            toName: '临汾市',
 
+            coords: [
 
+              [112.3352, 37.9413],
 
+              [111.4783, 36.1615],
 
+            ],
 
+          },
 
+          {
 
+            fromName: '太原市',
 
+            toName: '阳泉市',
 
+            coords: [
 
+              [112.3352, 37.9413],
 
+              [113.4778, 38.0951],
 
+            ],
 
+          },
 
+          {
 
+            fromName: '太原市',
 
+            toName: '晋中市',
 
+            coords: [
 
+              [112.3352, 37.9413],
 
+              [112.7747, 37.37],
 
+            ],
 
+          },
 
+          {
 
+            fromName: '太原市',
 
+            toName: '运城市',
 
+            coords: [
 
+              [112.3352, 37.9413],
 
+              [111.1487, 35.2002],
 
+            ],
 
+          },
 
+          {
 
+            fromName: '太原市',
 
+            toName: '大同市',
 
+            coords: [
 
+              [112.3352, 37.9413],
 
+              [113.7854, 39.8035],
 
+            ],
 
+          },
 
+          {
 
+            fromName: '太原市',
 
+            toName: '晋城市',
 
+            coords: [
 
+              [112.3352, 37.9413],
 
+              [112.7856, 35.6342],
 
+            ],
 
+          },
 
+          {
 
+            fromName: '太原市',
 
+            toName: '长治市',
 
+            coords: [
 
+              [112.3352, 37.9413],
 
+              [112.8625, 36.4746],
 
+            ],
 
+          },
 
+          {
 
+            fromName: '太原市',
 
+            toName: '朔州市',
 
+            coords: [
 
+              [112.3352, 37.9413],
 
+              [113.0713, 39.6991],
 
+            ],
 
+          },
 
+        ],
 
+      }
 
+      /*获取地图数据*/
 
+      let myChart = echarts.init(this.$refs['echarts-map'])
 
+      echarts.registerMap('shanxi', {
 
+        type: 'FeatureCollection',
 
+        features: [
 
+          {
 
+            type: 'Feature',
 
+            id: '1409',
 
+            properties: { name: '忻州市', cp: [112.4561, 38.8971], childNum: 14 },
 
+            geometry: {
 
+              type: 'Polygon',
 
+              coordinates: [
 
+                '@@Vx@lnbn¦WlnnUšmš°š²VšV‚VVVnUn„ºlz@l„„@Jƒ@kXWVXl@Lƒa@„ƒKUL„ŽlbnKlLnK‚LnKÆXn°šbVV@bUVl°Un@LnaVJUbW@UX²l‚@ČwlVVIšWnkÆa°„„anV‚Kn°™UW¯@™aVUVk@Un@„aV@ValwUanmWU„k@WVUUanaVwnLVl°@nk@mVU@UVK@w„LVKVU@ƒ„K@UUKVUV@@bnL„a‚V„aôšlIXmlKX_°KVV@bVV„@šzV`kblI„V„Ul‚šL@bnV@V„Ċll„„VlIXW@k„a‚U²blKšVnIlJ„albXXlWVn°JnšnL@l@XlJlaX@„X˜W²@l_VmnKšU„blU@mnkVK„¯@U@ƒma@kX¥VƒmakkƒLƒa@aƒ@WIUUVXWWnk@a°a@kkm@kUUmJm@WUUUIk`m@V—kaWWkX™KmƒXk¯ƒ@WKƒLkak@±bƒw@ƒaƒa@akaƒ@ma¯@ƒL—KÇÅkKWbkmġ™±ÅUƒLUK™VVkƒm¯LUVVbƒ„UwUW¯bm„ƒULƒxWJ—@ƒklmkUm@@KnwVkVK@akwƒ@@a¯bƒKkn›VUI™b¯mmbk@UbmKUL@xUUƒ@klmLUŽlVXI‚VVVUVUœU`mLXVWbXnW`Ų°xmŽxU@mĉƒƒwU@mbU@UƒmbkVW¦kJ™@ƒX@`¯Im@UlUVVnb@bWJXnmbƒJUU™UUaƒ@UamIkaƒxƒ@@x@b',
 
+              ],
 
+              encodeOffsets: [[113614, 39657]],
 
+            },
 
+          },
 
+          {
 
+            type: 'Feature',
 
+            id: '1411',
 
+            properties: { name: '吕梁市', cp: [111.3574, 37.7325], childNum: 13 },
 
+            geometry: {
 
+              type: 'Polygon',
 
+              coordinates: [
 
+                '@@@a@w„@„wlbnJVb„@VbšVVV„InaWmXI@a‚aUmVUVkn@°J@_„Wš@lIX¥lUnaV„V@naV@„xĊ„n‚V@‚wn¯wƱX_WmXaWUnKV_V›VUUUUWJkUVnKlk¯™@@kmKUaŁ±KkU@WmI@WUIlUUmVwXƒ‚w@ƒUlUVwœV‚@„Lnb‚W@anU@UšaVkô@l»n@na˜JnUÈLVaƃUUVm„VKVƒ²L@mU_lK@UVWkU‚a@a@U¯aUaƒÑóÑUb™„ƒKk@@aƒk¯mVaUwVƒÑkWUmK@UUKmXUWÝwUa™LUU@aWJUUU@Ua݄U@WL@VKVaVI@WnU@alIVKƒƒ@kIƒmIkJ@™m@ƒ™@@_™K@xƒ@kaW@U„@Vmn@ŽUK@mIƒJUXV¤XXWlkKƒkkK@XmJVakImJU@ó™¯LWKUV@nUVƒLkxmKkLma@kXKmmƒLƒab™LmK@V@mXVÆUxƒX@`nL„aV@@VmLUVnLlLš˜„b@„šŽ°²nx@b‚VUxlb@V¯bUV@zV‚XVĊXVx@lVn@VnnmŽUš@LlJXVƒz¯VWVXbšV@bmn™VUVk„Çþń@XVxmbUlV„Uln„W„@„Xl‚@VLXÒ@bÞJ°¦„L˜ò„@nU‚b@°„X@ŽXbmVU„V„nb@x‚x',
 
+              ],
 
+              encodeOffsets: [[113614, 39657]],
 
+            },
 
+          },
 
+          {
 
+            type: 'Feature',
 
+            id: '1410',
 
+            properties: { name: '临汾市', cp: [111.4783, 36.1615], childNum: 17 },
 
+            geometry: {
 
+              type: 'Polygon',
 
+              coordinates: [
 
+                '@@nW‚@@UnLšK‚a„b„KnnWL@lnblKnLlw„KVU@mVUXL°KôšV@nIlJUbnI@WlL„llLXkWWU£VW„InJ‚@VL@nm@UVƒX@lb„@@wšL@`‚@„šn@V@lw„@n„VmVX„WmwnUlƒœa@_lK„wVlUn°xVKVXXWlUšVVI@K@K„n°KœwlVlU@kna@V_„Wn‚m„UVm@kXml_@m„LlKXw°m@_ôJVUV@X™l@UaV@Va°I„lk»VwUkVmwUmmVn@V¯@KƒU—wmK@U¯wUVÝ@mJƒU—nWK™@@UnKVa„_lykUmKÛnm@™x@ƒUUlwVk™ƒXW@ƒa@Uƒ@@K@ƒkIV™nammVakUlƒ@wX@@kƒ™¯@ƒVVbml@„„°UbULmlVbnbÅK±VƒKVXUJWa@ULWaUU@@U@aWK@UkxUKƒLUUUJ±UkL@V±kk@kam@UV@l@LWl@n@VVUx„LlUUx@VUV™U@aƒIUl™L@°mLU‚ƒbkUUaWUUaUU@aWK—LWJ@bUL@VUVVbU@m@a@kmKmnĉlUK™XƒWUblb—xmIkƒƒU@xWb@lkšVx™LXŽmzVV@bklVVUzm˜@bk„@Vx@xlŽU„@lUbVnl@„Wxnl@n@ŽUbV„mL‚mƒb@`X@lUX@@xlnkLWaUJnnWV™Vn@l„@bULVV@l™V@XnJVX',
 
+              ],
 
+              encodeOffsets: [[113063, 37784]],
 
+            },
 
+          },
 
+          {
 
+            type: 'Feature',
 
+            id: '1407',
 
+            properties: { name: '晋中市', cp: [112.7747, 37.37], childNum: 11 },
 
+            geometry: {
 
+              type: 'Polygon',
 
+              coordinates: [
 
+                '@@@šlInJ„lJ„@‚„ULkJ@bmV@XUJUb‚L@UXKV@ރVbV@VVXI@bVVšKVbÞxVXnWVL@VnLV‚lX„ÒUŽVxUb°n„l@bl@„LšƒVaô҄ÒVb°b@VnLnnV@lmn@lb„U„V@„‚JœUVV‚Xkl@lUzmJ@xšXkl‚bUn„JVšUb„nU‚lb„V@nlLX@lakšV`Ub°š@XVJnU‚L²KlxnI@KV@lbUbVV„KnVl@„zlm@Uš@nŽšI@WUaVl@@mVU„@XkW@ƒnkVKVƒ„_Vw„y@knwVa‚@XalU„@šVnml@„X@V„L‚KVaÞbnnlJšI„mVKn„VVVInVlU„@„m@™mXK@UmyUI@mWUUakamw@wUwmLkakwVƒmK™w@wUam£y@am_ƒW@™UU@knmm„amU@WUa@knw@ƒUUUUV@nƒJm@mVUkKVUUUkKmwƒKULƒKUImV@lUn™nŽm@mbUK@°™bUnmbUmkkƒWUb@am@UXkK@a±@™V™@ĉř„V‚UXVxUVkLWl¯@@bULUlm@@nm`—XƒlWakIkm›VUbUL@Vm@kIƒ@@Kšm@—VaX‚I@W@aU@kUƒVU_™KƒbƒJkkǎ™b@nkKmL™wÅW@kVUUƒVU@WUIƒJmIXmma@_kyVaUUlkUm@ƒkU›x¯Lƒm@L@LUJ™UkVWXUWUL¯wVmUkƒxkL@`›bk„mVnxƒXUWUnmƒƒ@kxU@',
 
+              ],
 
+              encodeOffsets: [[114087, 37682]],
 
+            },
 
+          },
 
+          {
 
+            type: 'Feature',
 
+            id: '1408',
 
+            properties: { name: '运城市', cp: [111.1487, 35.2002], childNum: 13 },
 
+            geometry: {
 
+              type: 'Polygon',
 
+              coordinates: [
 
+                '@@„Vl„nJ˜wkaVa„XšWVLĊknmnL‚l@@bn‚V@UaVU@UVK@aXI˜KXL@bVVVbXVVblV„aVnK@¯šKVk„J@bšVVU@UVwkVƒKVwUUm@@Xk@K@kVUn@lbl@²l@UlK²VVIVV„KVLlw@VXL@b@VV@VŽXbVK‚@XbVIUW„L‚U²ÆLmaUankVKVaƒ¯@ƒnkUa„U°@„š‚n@@kWa„UVaXUW@IXKVw@U™ƒ„™WU@W@@UUƒU@mn@ƒ`m@UUULkUmJ™IUƒ@@UƒK@U@›anƒ™ak_@wmKUwmakV™kmK™V™k¯b™wƒ`kwUIÇx¯»ÇaŃmn@@™mƒmUkV@wkKW@kxmL™UkĉLÝk™xÝw¯lóVU„mV@ĀVVX¦W¤kz@`Vx°„²ĸ‚š@„Ul@x„êĸNJ°¤V„VlXLWnXxmV@nUl@„',
 
+              ],
 
+              encodeOffsets: [[113232, 36597]],
 
+            },
 
+          },
 
+          {
 
+            type: 'Feature',
 
+            id: '1402',
 
+            properties: { name: '大同市', cp: [113.7854, 39.8035], childNum: 8 },
 
+            geometry: {
 
+              type: 'Polygon',
 
+              coordinates: [
 
+                '@@²£šyl@Ȑ˜Ė@bĸŽĢbĸ„˜X„a‚KŤnn@ŎôllÈx„nVnÞDŽV@b‚nXllL°KšbVb@J@b—„‚„@ŽU„„xlKXLlKlXk„@Ulk„JlkUƒVKXUƒÇVIVm@_nǚLšašl‚w„VnU@UUwma@aƒaÝaLmUk@@Wƒ@U@@X™wVWÝUUUk@@VmLƒKV»nwUw™aUL@`mzƒJUIVƒUaUw™KUaVIlJôanÑlLVUn@ša„@VV„@@UUwVK°Vn_lJÆLœéW@UUUÅ@»lm@aÞIVwXW˜UUkkm@U@aƒU@mwU£VWU_kWmƒXwW_°yUkkK@UÇK@kkUVymóK—U@KWIƒbUak@mJ@bkbmLkŽ™UmƒkVU„W¦@lnb@„@Vƒ°ULml@nkVƒa™VmLUnk`±@—XƒWW@kbǦXŽ¯„WxI@xmbmxXlWV„„@bŎUz@J‚b@bÞb™ŽU@Wbk@ƒxk@WX¯VۙƒWÝbÝUkVUU@alI@a@akLWa™m@U¯UUmÇL@K@aU@¯VUkƒKmX@`@œkJ@nV‚Ub@lbVÆXVW„ULU`VbkLUV@XWl@bXJ˜@VbV@Vl',
 
+              ],
 
+              encodeOffsets: [[115335, 41209]],
 
+            },
 
+          },
 
+          {
 
+            type: 'Feature',
 
+            id: '1404',
 
+            properties: { name: '长治市', cp: [112.8625, 36.4746], childNum: 12 },
 
+            geometry: {
 
+              type: 'Polygon',
 
+              coordinates: [
 
+                '@@Uk™Lky@I‚JVa@mÞaWšy@_W@_WƒXVlUVwš@nw°K@m„UƒVaƒmVkU@mmmnLVUmKXa™U@IlKVUnK@UmWkX@WV_Vƒ@akU@a„KWIXyƒIUVmUn™Ua@WaXUVKVmkUWVkUƒLU@@VƒbƒKbƒIUmƒ@mbVL—x›WUUkn±V¯wƒbÅJUbmLkbmKÅKƒbVnUbƒV™KUb™KUbmLKmƒb™aƒKkUm@UŽnn‚VnxUVlUxl¼ƒk¯JUbU@Vbk@WšU@UVóI@`¯nWxkLƒK@nk`Wn@lUnƒVnm‚ƒXU`@mb@lkV@„VnklVVUblz@`nbWnnJ„IVJ@XUVV„UV@lÆXšxnKlL@mšaȍll„I„ašLV`„UlVV@@b@XJWUb@˜™n@L„@lJn@@UVKVaœUlnlJXb„k˜Wn_@mn@VkVK@a°@XklKVUUwVWUšƒĊƚ@šU²@@blLVWn@@bVa„XllVnnaVmša@¯VLnan@‚šmVm@knUVJ',
 
+              ],
 
+              encodeOffsets: [[116269, 37637]],
 
+            },
 
+          },
 
+          {
 
+            type: 'Feature',
 
+            id: '1406',
 
+            properties: { name: '朔州市', cp: [113.0713, 39.6991], childNum: 5 },
 
+            geometry: {
 
+              type: 'Polygon',
 
+              coordinates: [
 
+                '@@XXWVXVWnnlnn@èƼ@„„xlš„ŽV„nblšššVŽÈUVl‚š@„blnœL܃ĊmUkU@Ua‚—@WI@aXk@WVUlKUaV_VKXƒWUUÅka@VaU@mlI@›@_nW„LVl°UV@@b@LÈKVn°V@VšnXblK@b@bkJ@bVVlUÞVÞa„Xܚ°UXWl@„wl@XaV@šÝa@aa@IVyƍ@aƒƒXUWknwna@w‚JXw°ƒWÈ¥kI@W@kmKm™¯IUmkXWWkaƒbkImJ™UkL±aVƒb@lWXkJƒUkƒĉkƒ@UmU@a™KkƒVƒUkJlaU_™yƒ@UU@aUU¯LW`kLWnkJó™ƒbUƒbmK@aU@UVVL@VƒL@„UVULƒK@xUL@VUV@nml¯@UkmKUxmbVbUV@XƒlXVmnVbkxUbU@ƒbm@@VUlUVšb°@VX¯šm‚',
 
+              ],
 
+              encodeOffsets: [[114615, 40562]],
 
+            },
 
+          },
 
+          {
 
+            type: 'Feature',
 
+            id: '1405',
 
+            properties: { name: '晋城市', cp: [112.7856, 35.6342], childNum: 6 },
 
+            geometry: {
 
+              type: 'Polygon',
 
+              coordinates: [
 
+                '@@lV„Lšb„an‚LnKVašLVašL„UVaUm„aÆLnLlanKVaÆI„a°x²UlmVVœX˜wUKna„@Vn„J‚a„L„a@UV@@alUkKVKnkmmVwUk„w@ƒ™@kxWUXƒW@@mƒk@aUa@a¯aƒLkKmwkUm@kL@K@aWIXmƒVƒXƒWkUVakL@UVKƒw@aUK@UUKmLU@¯n™KUwVƒUIWJUWmka™@UXƒJƒk@UkmW@kLWKVƒx@bmI@VUaVU@a¯@UUmVKmX@±`kÝKVxUL±akL@V™bƒLkKmVƒ@XWVUbƒVXb@lm@@lW@@xk„lVUbnnmbUšlJ@„@L„@@V„b@‚WXš„UlkxVV@„šwn@ÜmnLlVkzƒ`UbmL@Vš@XL˜m„VnIÞ@VU°x@VnL˜x„V@LU°',
 
+              ],
 
+              encodeOffsets: [[115223, 36895]],
 
+            },
 
+          },
 
+          {
 
+            type: 'Feature',
 
+            id: '1401',
 
+            properties: { name: '太原市', cp: [112.3352, 37.9413], childNum: 5 },
 
+            geometry: {
 
+              type: 'Polygon',
 
+              coordinates: [
 
+                '@@„@VV@wVKnLVal@na°nšaVJœUlm„L°a@b„@lx@bULUlmx@Ln@lVkn„l˜@XI„w‚K„Vnƒ°aVXVx„ƒUaVU°K„nUlšUVL„KÆVš²Ģ‚lnXalLÈƘL„KUaVkUanmWU™a@WwkUWU¯y¯Ñ@anIl@@aVU„m„I„ymUƒLUUVakaU@@LmJkw±LKmVUI@W¯™VaU_l™kbW@kK@mƒUkaVƒmVaU™ƒIVmalk™W@wnIVy@klkWUU›VI@ƒƒUƒVkam@knU@mmmK@bblVUX@VkLV`@n±KU„ULƒ‚UnVVńUbÇKmV—Imbm@k¼ó@Ul™b@VmV@bXmaƒK@›UUxkV‚V@„xW„UxVnkVVJ@XnJ@XlV²LƂVbnL@lš@°',
 
+              ],
 
+              encodeOffsets: [[114503, 39134]],
 
+            },
 
+          },
 
+          {
 
+            type: 'Feature',
 
+            id: '1403',
 
+            properties: { name: '阳泉市', cp: [113.4778, 38.0951], childNum: 3 },
 
+            geometry: {
 
+              type: 'Polygon',
 
+              coordinates: [
 
+                '@@°@nb„@lb@b„b„b‚@„x²al@lb„KXU@m‚kUWkkmUUƒVwV@XUW@™naVklKXblKnL‚ƒnLVanImaXKlL„ašV@U@KUKW„alƒXK@£WKXUV@VU„ƒUUVW„_V™@W@@K„@šƒUƒƒIWmXUmƒULƒn™JkImmÝaUbLƒK@UƒWk@mn™Uƒ@kVWb@Ubmx@lƒzUxƒ`U„ULml@„XWlƒ@UV@nk@U‚Vb@X™Jm™@@Vknƒyk@ƒzƒJƒnUV@bk@mJ@b°Ò°zXVlVXx‚@šbXVmnVbUlVb',
 
+              ],
 
+              encodeOffsets: [[115864, 39336]],
 
+            },
 
+          },
 
+        ],
 
+        UTF8Encoding: true,
 
+      })
 
+      var mapFeatures = echarts.getMap(this.mapName).geoJson.features
 
+      mapFeatures.forEach(v => {
 
+        // 地区名称
 
+        var name = v.properties.name
 
+        // 地区经纬度
 
+        this.geoCoordMap[name] = v.properties.cp
 
+      })
 
+
 
+      myChart.setOption({
 
+        tooltip: {
 
+          padding: 15,
 
+          enterable: true,
 
+          transitionDuration: 1,
 
+          formatter: (params, ticket, callback) => {
 
+            let tipHtml = `
 
+              <div class="tooltip-cont">
 
+                <p>新开工：<span>工程建设项目</span></p>
 
+                <p>总投资额：<span>${params.data.value}亿</span></p>
 
+                <p>当前阶段：<span>可论证阶段</span></p>
 
+                <p>时间节点：<span>2021.10-2022.10</span></p>
 
+            </div>`
 
+            return tipHtml
 
+          },
 
+        },
 
+        visualMap: {
 
+          min: 0,
 
+          max: 300,
 
+          right: 0,
 
+          bottom: 0,
 
+          text: ['高', '低'],
 
+          textStyle: {
 
+            color: '#f1f1f1'
 
+          },
 
+          realtime: false,
 
+          calculable: true,
 
+          inRange: {
 
+            color: ['lightskyblue', '#2754b7']
 
+          }
 
+        },
 
+        geo: {
 
+          show: true,
 
+          map: 'shanxi',
 
+          layoutCenter: ['50%', '50%'], //地图位置
 
+          layoutSize: '100%',
 
+          label: {
 
+            normal: {
 
+              show: false,
 
+            },
 
+            emphasis: {
 
+              show: false,
 
+            },
 
+          },
 
+          roam: false,
 
+          itemStyle: {
 
+            normal: {
 
+              areaColor: '#1946a8',
 
+              shadowColor: '#1946a8',
 
+              borderWidth: 1, //设置外层边框
 
+              borderColor: '#1946a8',
 
+              shadowOffsetX: 10,
 
+              shadowOffsetY: 5,
 
+              shadowBlur: 2,
 
+            },
 
+            emphasis: {
 
+              areaColor: '#1946a8',
 
+              borderColor: '#d4bc1d',
 
+              borderWidth: 2, //设置外层边框
 
+            },
 
+          },
 
+        },
 
+        series: [
 
+          {
 
+            name: '散点',
 
+            type: 'scatter',
 
+            coordinateSystem: 'geo',
 
+            data: this.convertData(data),
 
+            symbolSize: function (val) {
 
+              return 10
 
+            },
 
+            label: {
 
+              normal: {
 
+                formatter: '{b}',
 
+                position: [10, 10],
 
+                fontSize: 15,
 
+                fontWeight: 600,
 
+                fontStyle: 'italic',
 
+                color: '#fff',
 
+                show: true,
 
+              },
 
+              emphasis: {
 
+                show: true,
 
+              },
 
+            },
 
+            itemStyle: {
 
+              normal: {
 
+                color: '#000',
 
+                borderWidth: 2,
 
+                borderColor: '#fff',
 
+              },
 
+            },
 
+          },
 
+          {
 
+            type: 'map',
 
+            map: this.mapName,
 
+            geoIndex: 0,
 
+            aspectScale: 0.75, //长宽比
 
+            showLegendSymbol: true, // 存在legend时显示
 
+            label: {
 
+              normal: {
 
+                show: true,
 
+              },
 
+              emphasis: {
 
+                show: false,
 
+                textStyle: {
 
+                  color: '#fff',
 
+                },
 
+              },
 
+            },
 
+            roam: true,
 
+            itemStyle: {
 
+              normal: {
 
+                areaColor: '#031525',
 
+                borderColor: '#3B5077',
 
+              },
 
+              emphasis: {
 
+                areaColor: '#2B91B7',
 
+              },
 
+            },
 
+            animation: false,
 
+            data: data,
 
+          },
 
+          {
 
+            name: '点',
 
+            type: 'scatter',
 
+            coordinateSystem: 'geo',
 
+            zlevel: 6,
 
+          },
 
+          {
 
+            name: 'Top 5',
 
+            type: 'effectScatter',
 
+            coordinateSystem: 'geo',
 
+            data: this.convertData(
 
+              data
 
+                .sort(function (a, b) {
 
+                  return b.value - a.value
 
+                })
 
+                .slice(0, 5)
 
+            ),
 
+            symbolSize: function (val) {
 
+              return 15
 
+            },
 
+            showEffectOn: 'render',
 
+            rippleEffect: {
 
+              brushType: 'stroke',
 
+            },
 
+            hoverAnimation: true,
 
+            label: {
 
+              normal: {
 
+                formatter: '{b}',
 
+                position: 'left',
 
+                show: false,
 
+              },
 
+            },
 
+            itemStyle: {
 
+              normal: {
 
+                color: 'yellow',
 
+                shadowBlur: 10,
 
+                shadowColor: 'yellow',
 
+              },
 
+            },
 
+            zlevel: 1000,
 
+          },
 
+          {
 
+            name: '线路',
 
+            type: 'lines',
 
+            zlevel: 2,
 
+            effect: {
 
+              show: true,
 
+              period: 4, //箭头指向速度，值越小速度越快
 
+              trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
 
+              symbol: 'arrow', //箭头图标
 
+              symbolSize: 5, //图标大小
 
+            },
 
+            lineStyle: {
 
+              normal: {
 
+                color: '#00FFFF',
 
+                width: 1,
 
+                type: 'dashed',
 
+                opacity: 0.5, //尾迹线条透明度
 
+                curveness: -0.3, //尾迹线条曲直度
 
+              },
 
+            },
 
+            data: moveLine.normal,
 
+          },
 
+        ],
 
+      })
 
+    },
 
+    initChartL1 () {
 
+      let myChart = echarts.init(this.$refs['echartL1'])
 
+      let option = {
 
+        title: {
 
+          text: '储备项目产业分布',
 
+          x: 'center',
 
+          y: '87%',
 
+          textStyle: {
 
+            color: 'rgba(255,255,255,0.6)',
 
+            fontSize: 12,
 
+          },
 
+        },
 
+        tooltip: {
 
+          trigger: 'item',
 
+        },
 
+        color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'],
 
+        legend: {
 
+          icon: 'circle',
 
+          top: 'bottom',
 
+          orient: 'vertical',
 
+          right: '1%',
 
+          textStyle: {
 
+            color: '#9DB9EB',
 
+          },
 
+        },
 
+        series: [
 
+          {
 
+            name: '',
 
+            type: 'pie',
 
+            radius: ['50%', '70%',],
 
+            center: ['50%', '45%'],
 
+            itemStyle: {
 
+              normal: {
 
+                label: {
 
+                  show: false,
 
+                },
 
+              },
 
+            },
 
+            labelLine: {
 
+              show: false,
 
+              emphasis: {
 
+                show: true
 
+              }
 
+            },
 
+            data: [
 
+              { value: 1048, name: '煤炭' },
 
+              { value: 735, name: '火电' },
 
+              { value: 580, name: '焦化' },
 
+              { value: 484, name: '风电' },
 
+            ],
 
+          },
 
+        ],
 
+      }
 
+      myChart.setOption(option)
 
+      tools.loopShowTooltip(myChart, option, {
 
+        nterval: 2000,
 
+        loopSeries: true,
 
+      })
 
+    },
 
+    initChartL2 () {
 
+      let myChart = echarts.init(this.$refs['echartL2'])
 
+      var value = 0.45;
 
+      var data = [value];
 
+      let option = {
 
+        backgroundColor: 'transparent',
 
+        title: [
 
+          {
 
+            text: '450.12亿',
 
+            x: '38%',
 
+            y: '80%',
 
+            textStyle: {
 
+              fontSize: 24,
 
+              fontWeight: 'bold',
 
+              color: '#2CB7E0',
 
+              lineHeight: 16,
 
+              textAlign: 'center',
 
+            },
 
+          }
 
+        ],
 
+        series: [
 
+          {
 
+            type: 'liquidFill',
 
+            radius: '70%',
 
+            center: ['50%', '40%'],
 
+            color: [
 
+              {
 
+                type: 'linear',
 
+                x: 0,
 
+                y: 0,
 
+                x2: 0,
 
+                y2: 1,
 
+                colorStops: [
 
+                  {
 
+                    offset: 0,
 
+                    color: '#446bf5',
 
+                  },
 
+                  {
 
+                    offset: 1,
 
+                    color: '#2ca3e2',
 
+                  },
 
+                ],
 
+                globalCoord: false,
 
+              },
 
+            ],
 
+            data: [value, value], // data个数代表波浪数
 
+            backgroundStyle: {
 
+              borderWidth: 1,
 
+              color: 'RGBA(51, 66, 127, 0.7)',
 
+            },
 
+            label: {
 
+              normal: {
 
+                textStyle: {
 
+                  fontSize: 30,
 
+                  color: '#fff',
 
+                },
 
+              },
 
+            },
 
+            outline: {
 
+              // show: false
 
+              borderDistance: 0,
 
+              itemStyle: {
 
+                borderWidth: 2,
 
+                borderColor: 'transparent',
 
+              },
 
+            },
 
+          },
 
+        ],
 
+      }
 
+      myChart.setOption(option)
 
+    },
 
+    initChartL3 () {
 
+      let myChart = echarts.init(this.$refs['echartL3'])
 
+      let option = {
 
+        tooltip: {
 
+          trigger: 'axis',
 
+          axisPointer: {
 
+            type: 'shadow',
 
+          },
 
+        },
 
+        grid: {
 
+          top: '22%',
 
+          right: '5%',
 
+          left: '10%',
 
+          bottom: '25%',
 
+        },
 
+        xAxis: {
 
+          data: ['总投资收益率', '销售利润率'],
 
+          axisLine: {
 
+            show: true, //隐藏X轴轴线
 
+            lineStyle: {
 
+              color: '#005094',
 
+              width: 1,
 
+            },
 
+          },
 
+          axisTick: {
 
+            show: true, //隐藏X轴刻度
 
+          },
 
+          axisLabel: {
 
+            show: true,
 
+            rotate: 15,
 
+            textStyle: {
 
+              color: 'rgba(255,255,255,0.6)', //X轴文字颜色
 
+              fontSize: 12,
 
+            },
 
+          },
 
+        },
 
+        yAxis: [
 
+          {
 
+            type: 'value',
 
+            splitLine: {
 
+              show: true,
 
+              lineStyle: {
 
+                color: '#68b4dd66',
 
+                type: 'dashed',
 
+              },
 
+            },
 
+            axisLine: {
 
+              show: false
 
+            },
 
+            axisLabel: {
 
+              show: true,
 
+              formatter: '{value}',
 
+              textStyle: {
 
+                color: 'rgba(250,250,250,0.6)',
 
+              },
 
+            },
 
+            nameTextStyle: {
 
+              color: '#ebf8ac',
 
+              fontSize: 16,
 
+            },
 
+          },
 
+        ],
 
+        series: [
 
+          {
 
+            name: '',
 
+            type: 'bar',
 
+            barWidth: 15,
 
+            itemStyle: {
 
+              normal: {
 
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
 
+                  {
 
+                    offset: 0,
 
+                    color: '#69c0ff',
 
+                  },
 
+                  {
 
+                    offset: 1,
 
+                    color: '#082550',
 
+                  },
 
+                ]),
 
+              },
 
+            },
 
+            data: [10, 20],
 
+            markLine: {
 
+              symbol: ['none', 'none'],
 
+              data: [
 
+                {
 
+                  name: '生存线',
 
+                  yAxis: 10,
 
+                  lineStyle: {
 
+                    color: '#FF8F0A',
 
+                  },
 
+                  label: {
 
+                    formatter: '{b}',
 
+                    position: 'middle',
 
+                    color: '#FF8F0A',
 
+                    fontSize: 12,
 
+                  },
 
+                },
 
+                {
 
+                  name: '发展线',
 
+                  yAxis: 15,
 
+                  lineStyle: {
 
+                    color: '#00EEA2',
 
+                  },
 
+                  label: {
 
+                    formatter: '{b}',
 
+                    position: 'middle',
 
+                    color: '#00EEA2',
 
+                    fontSize: 12,
 
+                  },
 
+                },
 
+              ],
 
+              label: {
 
+                distance: [50, 0],
 
+              },
 
+            },
 
+          },
 
+        ],
 
+      }
 
+      myChart.setOption(option)
 
+      tools.loopShowTooltip(myChart, option, {
 
+        nterval: 2000,
 
+        loopSeries: true,
 
+      })
 
+    },
 
+    initChartL4 () {
 
+      let myChart = echarts.init(this.$refs['echartL4'])
 
+      let option = {
 
+        title: {
 
+          text: '储备项目产业分布',
 
+          x: 'center',
 
+          y: '87%',
 
+          textStyle: {
 
+            color: 'rgba(255,255,255,0.6)',
 
+            fontSize: 12,
 
+          },
 
+        },
 
+        tooltip: {
 
+          trigger: 'item',
 
+        },
 
+        color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'],
 
+        legend: {
 
+          icon: 'circle',
 
+          top: 'bottom',
 
+          orient: 'vertical',
 
+          right: '1%',
 
+          textStyle: {
 
+            color: '#9DB9EB',
 
+          },
 
+        },
 
+        series: [
 
+          {
 
+            name: '',
 
+            type: 'pie',
 
+            radius: ['50%', '70%'],
 
+            center: ['50%', '45%'],
 
+            itemStyle: {
 
+              normal: {
 
+                label: {
 
+                  show: false,
 
+                },
 
+              },
 
+            },
 
+            labelLine: {
 
+              show: false,
 
+            },
 
+            data: [
 
+              { value: 1048, name: '煤炭' },
 
+              { value: 735, name: '火电' },
 
+              { value: 580, name: '焦化' },
 
+              { value: 484, name: '风电' },
 
+            ],
 
+          },
 
+        ],
 
+      }
 
+      myChart.setOption(option)
 
+      tools.loopShowTooltip(myChart, option, {
 
+        nterval: 2000,
 
+        loopSeries: true,
 
+      })
 
+    },
 
+    initChartR1 () {
 
+      let myChart = echarts.init(this.$refs['echartR1'])
 
+      let option = {
 
+        title: {
 
+          text: '储备项目产业分布',
 
+          x: '15%',
 
+          y: '87%',
 
+          textStyle: {
 
+            color: 'rgba(255,255,255,0.6)',
 
+            fontSize: 12,
 
+          },
 
+        },
 
+        tooltip: {
 
+          trigger: 'item',
 
+        },
 
+        color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'],
 
+        legend: {
 
+          icon: 'circle',
 
+          top: 'bottom',
 
+          orient: 'vertical',
 
+          right: '1%',
 
+          textStyle: {
 
+            color: '#9DB9EB',
 
+          },
 
+        },
 
+        series: [
 
+          {
 
+            name: '',
 
+            type: 'pie',
 
+            radius: ['40%', '60%'],
 
+            center: ['40%', '45%'],
 
+            itemStyle: {
 
+              normal: {
 
+                label: {
 
+                  show: false,
 
+                },
 
+              },
 
+            },
 
+            labelLine: {
 
+              show: false,
 
+            },
 
+            data: [
 
+              { value: 1048, name: '煤炭' },
 
+              { value: 735, name: '火电' },
 
+              { value: 580, name: '焦化' },
 
+              { value: 484, name: '风电' },
 
+            ],
 
+          },
 
+        ],
 
+      }
 
+      myChart.setOption(option)
 
+      tools.loopShowTooltip(myChart, option, {
 
+        nterval: 2000,
 
+        loopSeries: true,
 
+      })
 
+    },
 
+    initChartR2 () {
 
+      let myChart = echarts.init(this.$refs['echartR2'])
 
+      let option = {
 
+        title: {
 
+          text: '储备项目产业分布',
 
+          x: '15%',
 
+          y: '87%',
 
+          textStyle: {
 
+            color: 'rgba(255,255,255,0.6)',
 
+            fontSize: 12,
 
+          },
 
+        },
 
+        tooltip: {
 
+          trigger: 'item',
 
+        },
 
+        color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'],
 
+        legend: {
 
+          icon: 'circle',
 
+          top: 'bottom',
 
+          orient: 'vertical',
 
+          right: '1%',
 
+          textStyle: {
 
+            color: '#9DB9EB',
 
+          },
 
+        },
 
+        series: [
 
+          {
 
+            name: '',
 
+            type: 'pie',
 
+            radius: ['40%', '60%'],
 
+            center: ['40%', '45%'],
 
+            itemStyle: {
 
+              normal: {
 
+                label: {
 
+                  show: false,
 
+                },
 
+              },
 
+            },
 
+            labelLine: {
 
+              show: false,
 
+            },
 
+            data: [
 
+              { value: 1048, name: '煤炭' },
 
+              { value: 735, name: '火电' },
 
+              { value: 580, name: '焦化' },
 
+              { value: 484, name: '风电' },
 
+            ],
 
+          },
 
+        ],
 
+      }
 
+      myChart.setOption(option)
 
+      tools.loopShowTooltip(myChart, option, {
 
+        nterval: 2000,
 
+        loopSeries: true,
 
+      })
 
+    },
 
+    initChartR3 () {
 
+      let myChart = echarts.init(this.$refs['echartR3'])
 
+      let option = {
 
+        title: {
 
+          text: '固定资产项目',
 
+          textStyle: {
 
+            color: '#69C0FF',
 
+          },
 
+          top: '10',
 
+          left: '10'
 
+        },
 
+        textStyle: {
 
+          color: '#fff',
 
+        },
 
+        tooltip: {
 
+          trigger: "axis",
 
+          axisPointer: {
 
+            lineStyle: {
 
+              type: 'dashed',
 
+              width: 2,
 
+              color: 'rgba(255,255,255,0.6)'
 
+            },
 
+            animation: true
 
+          }
 
+        },
 
+        grid: {
 
+          top: '22%',
 
+          right: '5%',
 
+          left: '10%',
 
+          bottom: '15%',
 
+        },
 
+        yAxis: {
 
+          data: ['批量备案', '特别监管'],
 
+          splitLine: {
 
+            show: true,
 
+            lineStyle: {
 
+              color: '#68b4dd66',
 
+              type: 'dashed',
 
+            },
 
+          },
 
+          axisLine: {
 
+            show: false
 
+          },
 
+          axisLabel: {
 
+            show: true,
 
+            formatter: '{value}',
 
+            textStyle: {
 
+              color: 'rgba(250,250,250,0.6)',
 
+            },
 
+          },
 
+          nameTextStyle: {
 
+            color: '#ebf8ac',
 
+            fontSize: 16,
 
+          },
 
+        },
 
+        xAxis: {
 
+          data: ['项目储备', '项目立项', '项目可研', '可研论证', '投资决策'],
 
+          axisLine: {
 
+            show: true, //隐藏X轴轴线
 
+            lineStyle: {
 
+              color: '#005094',
 
+              width: 1,
 
+            },
 
+          },
 
+          axisTick: {
 
+            show: false, //隐藏X轴刻度
 
+          },
 
+          axisLabel: {
 
+            show: true,
 
+            textStyle: {
 
+              color: 'rgba(255,255,255,0.6)', //X轴文字颜色
 
+              fontSize: 12,
 
+            },
 
+          },
 
+        },
 
+        series: [
 
+          {
 
+            name: '批量备案',
 
+            type: 'scatter',
 
+            symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
 
+            symbolSize: function (data) {
 
+              return Math.sqrt(data[2]) * 0.5;
 
+            },
 
+            label: {
 
+              emphasis: {
 
+                show: true,
 
+                formatter: function (param) {
 
+                  return param.data[2];
 
+                },
 
+                position: 'top'
 
+              }
 
+            },
 
+            itemStyle: {
 
+              normal: {
 
+                color: '#45DAD1'
 
+              }
 
+            },
 
+            data: [
 
+              ['项目储备', '批量备案', 200],
 
+              ['项目立项', '批量备案', 1500],
 
+              ['项目可研', '批量备案', 2000],
 
+              ['可研论证', '批量备案', 2500],
 
+              ['投资决策', '批量备案', 3000],
 
+            ]
 
+          },
 
+          {
 
+            name: '特别监管',
 
+            type: 'scatter',
 
+            symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
 
+            symbolSize: function (data) {
 
+              return Math.sqrt(data[2]) * 0.5;
 
+            },
 
+            label: {
 
+              emphasis: {
 
+                show: true,
 
+                formatter: function (param) {
 
+                  return param.data[2];
 
+                },
 
+                position: 'top'
 
+              }
 
+            },
 
+            itemStyle: {
 
+              normal: {
 
+                color: '#40A9FF'
 
+              }
 
+            },
 
+            data: [
 
+              ['项目储备', '特别监管', 1400],
 
+              ['项目立项', '特别监管', 1500],
 
+              ['项目可研', '特别监管', 5500],
 
+              ['可研论证', '特别监管', 500],
 
+            ]
 
+          }
 
+        ]
 
+      }
 
+      myChart.setOption(option)
 
+      tools.loopShowTooltip(myChart, option, {
 
+        nterval: 2000,
 
+        loopSeries: true,
 
+      })
 
+    },
 
+    initChartR4 () {
 
+      let myChart = echarts.init(this.$refs['echartR4'])
 
+      let option = {
 
+        title: {
 
+          text: '当居企后评价项目数后',
 
+          x: 'center',
 
+          y: '3%',
 
+          textStyle: {
 
+            color: '#69C0FF',
 
+            fontSize: 14,
 
+          },
 
+        },
 
+        tooltip: {
 
+          trigger: 'axis',
 
+          axisPointer: {
 
+            type: 'shadow',
 
+          },
 
+        },
 
+        grid: {
 
+          top: '22%',
 
+          right: '5%',
 
+          left: '10%',
 
+          bottom: '15%',
 
+        },
 
+        legend: {
 
+          data: '',
 
+          top: '12%',
 
+          right: '5%',
 
+          textStyle: {
 
+            color: 'rgba(250,250,250,0.6)',
 
+            fontSize: 16,
 
+          },
 
+        },
 
+        xAxis: {
 
+          data: ['一级', '二级'],
 
+          axisLine: {
 
+            show: true, //隐藏X轴轴线
 
+            lineStyle: {
 
+              color: '#005094',
 
+              width: 1,
 
+            },
 
+          },
 
+          axisTick: {
 
+            show: false, //隐藏X轴刻度
 
+          },
 
+          axisLabel: {
 
+            show: true,
 
+            rotate: 15,
 
+            textStyle: {
 
+              color: 'rgba(255,255,255,0.6)', //X轴文字颜色
 
+              fontSize: 16,
 
+            },
 
+          },
 
+        },
 
+        yAxis: [
 
+          {
 
+            type: 'value',
 
+            nameTextStyle: {
 
+              color: '#ebf8ac',
 
+              fontSize: 16,
 
+            },
 
+            splitLine: {
 
+              show: true,
 
+              lineStyle: {
 
+                color: '#68b4dd66',
 
+                type: 'dashed',
 
+              },
 
+            },
 
+            axisLine: {
 
+              show: false,
 
+            },
 
+            axisLabel: {
 
+              show: true,
 
+              textStyle: {
 
+                color: 'rgba(250,250,250,0.6)',
 
+                fontSize: 16,
 
+              },
 
+            },
 
+          },
 
+        ],
 
+        series: [
 
+          {
 
+            name: '',
 
+            type: 'bar',
 
+            barWidth: 15,
 
+            itemStyle: {
 
+              normal: {
 
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
 
+                  {
 
+                    offset: 0,
 
+                    color: '#69c0ff',
 
+                  },
 
+                  {
 
+                    offset: 1,
 
+                    color: '#082550',
 
+                  },
 
+                ]),
 
+              },
 
+            },
 
+            data: [10, 20],
 
+          },
 
+        ],
 
+      }
 
+      myChart.setOption(option)
 
+      tools.loopShowTooltip(myChart, option, {
 
+        nterval: 2000,
 
+        loopSeries: true,
 
+      })
 
+    },
 
+    initChartR5 () {
 
+      let myChart = echarts.init(this.$refs['echartR5'])
 
+      let option = {
 
+        title: {
 
+          text: '当属企业评分情况',
 
+          x: 'center',
 
+          y: '3%',
 
+          textStyle: {
 
+            color: '#69C0FF',
 
+            fontSize: 14,
 
+          },
 
+        },
 
+        tooltip: {
 
+          trigger: 'axis',
 
+          axisPointer: {
 
+            type: 'shadow',
 
+          },
 
+        },
 
+        grid: {
 
+          top: '22%',
 
+          right: '5%',
 
+          left: '10%',
 
+          bottom: '15%',
 
+        },
 
+        legend: {
 
+          data: ['过程管控企业层得分', '发展线指标情况企业层得分'],
 
+          top: '12%',
 
+          right: '5%',
 
+          textStyle: {
 
+            color: 'rgba(250,250,250,0.6)',
 
+            fontSize: 12,
 
+          },
 
+        },
 
+        xAxis: {
 
+          data: ['一级', '二级'],
 
+          axisLine: {
 
+            show: true, //隐藏X轴轴线
 
+            lineStyle: {
 
+              color: '#005094',
 
+              width: 1,
 
+            },
 
+          },
 
+          axisTick: {
 
+            show: false, //隐藏X轴刻度
 
+          },
 
+          axisLabel: {
 
+            show: true,
 
+            rotate: 15,
 
+            textStyle: {
 
+              color: 'rgba(255,255,255,0.6)', //X轴文字颜色
 
+              fontSize: 16,
 
+            },
 
+          },
 
+        },
 
+        yAxis: [
 
+          {
 
+            type: 'value',
 
+            nameTextStyle: {
 
+              color: '#ebf8ac',
 
+              fontSize: 16,
 
+            },
 
+            splitLine: {
 
+              show: true,
 
+              lineStyle: {
 
+                color: '#68b4dd66',
 
+                type: 'dashed',
 
+              },
 
+            },
 
+            axisLine: {
 
+              show: false,
 
+            },
 
+            axisLabel: {
 
+              show: true,
 
+              textStyle: {
 
+                color: 'rgba(250,250,250,0.6)',
 
+                fontSize: 16,
 
+              },
 
+            },
 
+          },
 
+        ],
 
+        series: [
 
+          {
 
+            name: '过程管控企业层得分',
 
+            type: 'bar',
 
+            barWidth: 15,
 
+            itemStyle: {
 
+              normal: {
 
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
 
+                  {
 
+                    offset: 0,
 
+                    color: '#5e7ae9',
 
+                  },
 
+                  {
 
+                    offset: 1,
 
+                    color: '#082550',
 
+                  },
 
+                ]),
 
+              },
 
+            },
 
+            data: [10, 20],
 
+          },
 
+          {
 
+            name: '发展线指标情况企业层得分',
 
+            type: 'bar',
 
+            barWidth: 15,
 
+            itemStyle: {
 
+              normal: {
 
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
 
+                  {
 
+                    offset: 0,
 
+                    color: '#69c0ff',
 
+                  },
 
+                  {
 
+                    offset: 1,
 
+                    color: '#082550',
 
+                  },
 
+                ]),
 
+              },
 
+            },
 
+            data: [10, 20],
 
+          },
 
+        ],
 
+      }
 
+      myChart.setOption(option)
 
+      tools.loopShowTooltip(myChart, option, {
 
+        nterval: 2000,
 
+        loopSeries: true,
 
+      })
 
+    }
 
+  },
 
+})

+ 37 - 30
investment/js/investHomeChild.js
查看文件 

@@ -1,6 +1,6 @@
 
 let app = new Vue({
 
   el: '#app',
 
-  data () {
 
+  data() {
 
     return {
 
       time: '',
 
       timer: '',
 
@@ -31,30 +31,37 @@ let app = new Vue({
 
         waitTime: 1000,
 
         header: ["项目名称", "所属组织", '实施主体', '产业类别I级', '产业类别II级', '2022年投资完成额（万元）'],
 
         data: [
 
-          ["6万吨/年PBAT项目", "华阳新材", "华阳新材", "战略新兴", "新材料", "20,340.00"],
 
-          ["2万吨/年生物降解改性材料及塑料制品项目", "华阳新材", "华阳新材", "战略新兴", "新材料", "5,270.00"],
 
-          ["2万吨/年全系列生物降解新材料项目", "华阳新材", "华阳新材", "战略新兴", "新材料", "5,560.00"],
 
-          ["30万吨/年PBAT项目一期10万吨PBAT", "华阳新材", "华阳新材", "战略新兴", "新材料", "0.00"],
 
-          ["30万吨/年PBAT项目一期20万吨BDO", "华阳新材", "华阳集团", "战略新兴", "新材料", "0.00"],
 
-          ["开元煤层气发电项目", "华阳新材", "华阳股份", "战略新兴", "煤层气", "880.00"],
 
-          ["平舒翟下庄煤层气发电项目", "华阳新材", "华阳股份", "战略新兴", "煤层气", "570.00"],
 
-          ["5GW高效光伏组件制造项目一期2GW", "华阳新材", "新阳公司", "战略新兴", "新能源", "10,000.00"],
 
-          ["钠离子电池正极材料千吨级生产项目", "华阳新材", "新阳公司", "战略新兴", "新能源", "6,060.00"],
 
-          ["钠离子电池负极材料千吨级生产项目", "华阳新材", "新阳公司", "战略新兴", "新能源", "4,080.00"],
 
-          ["1GWh钠离子Pack电池生产线建设项目", "华阳新材", "新阳公司", "战略新兴", "新能源", "2,790.00"],
 
-          ["天成光储网充项目", "华阳新材", "新阳公司", "战略新兴", "新能源", "1,680.00"],
 
-          ["华豹绿色涂层材料智造项目", "华阳新材", "阳煤华豹", "战略新兴", "新材料", "0.00"],
 
-          ["宏厦三建绿色建材工业园区项目", "华阳新材", "宏厦三建", "战略新兴", "新材料", "2,550.00"],
 
-          ["气凝胶科创城标准化厂房项目", "华阳新材", "华阳科创城", "战略新兴", "新材料", "0.00"],
 
-          ["超净滤材项目", "华阳新材", "华阳科创城", "战略新兴", "新材料", "5,510.00"],
 
-          ["华阳集团网络安全工作顶层设计及整体整改项目", "华阳新材", "华阳集团", "战略新兴", "新一代信息技术", "814.00"],
 
-          ["财务共享二期项目", "华阳新材", "华阳集团", "战略新兴", "新一代信息技术", "0.00"],
 
-          ["山西科技创新城阳煤设计研发中心项目", "华阳新材", "华阳集团", "战略新兴", "其他", "12,930.00"],
 
-          ["洪城北路与平阳路节点立交工程", "华阳新材", "华阳集团", "战略新兴", "其他", "0.00"],
 
-          ["阳煤西110kv变电站及线路建设工程", "华阳新材", "华阳股份", "战略新兴", "其他", "7,060.00"],
 
-          ["一矿高家沟风井矿井瓦斯利用工程项目", "华阳新材", "华阳股份", "战略新兴", "煤层气", "0.00"],
 
-          ["郊区35kV输变电工程", "华阳新材", "新阳公司", "战略新兴", "其他", "1,250.00"],
 
-          ["环境保护及治理", "华阳新材", "华阳股份", "战略新兴", "节能环保", "5,890.00"]
 
+          ["6万吨/年PBAT项目", "华阳新材", "华阳生物降解公司", "战略性新兴产业", "新材料", "20340.00"],
 
+          ["2万吨/年生物降解改性材料及塑料制品项目", "华阳新材", "华阳生物降解公司", "战略性新兴产业", "新材料", "5270.00"],
 
+          ["2万吨/年全系列生物降解新材料项目", "华阳新材", "华阳新材", "战略性新兴产业", "新材料", "5560.00"],
 
+          ["开元煤层气发电项目", "华阳新材", "阳煤扬德公司", "战略性新兴产业", "煤层气", "880.00"],
 
+          ["平舒翟下庄煤层气发电项目", "华阳新材", "阳煤扬德公司", "战略性新兴产业", "煤层气", "570.00"],
 
+          ["5GW高效光伏组件制造项目一期2GW", "华阳新材", "华储光电公司", "战略性新兴产业", "新能源", "10000.00"],
 
+          ["钠离子电池正极材料千吨级生产项目", "华阳新材", "华钠铜能公司", "战略性新兴产业", "新能源", "6060.00"],
 
+          ["钠离子电池负极材料千吨级生产项目", "华阳新材", "华钠碳能公司", "战略性新兴产业", "新能源", "4080.00"],
 
+          ["1GWh钠离子Pack电池生产线建设项目", "华阳新材", "华钠芯能公司", "战略性新兴产业", "新能源", "2790.00"],
 
+          ["天成光储网充项目", "华阳新材", "新阳公司", "战略性新兴产业", "新能源", "1680.00"],
 
+          ["宏厦三建绿色建材工业园区项目", "华阳新材", "宏厦三建", "战略性新兴产业", "新材料", "2550.00"],
 
+          ["亚美公司超低排放改造及节能技改项目", "华阳新材", "亚美公司", "战略性新兴产业", "其他", "20101.00"],
 
+          ["超净滤材项目", "华阳新材", "华阳科创城", "战略性新兴产业", "新材料", "5510.00"],
 
+          ["华阳集团网络安全工作顶层设计及整体整改项目", "华阳新材", "华阳集团", "战略性新兴产业", "新一代信息技术", "814.00"],
 
+          ["山西科技创新城阳煤设计研发中心项目", "华阳新材", "碳基合成新材料公司", "战略性新兴产业", "其他", "12930.00"],
 
+          ["阳煤西110kv变电站及线路建设工程", "华阳新材", "华阳股份", "战略性新兴产业", "其他", "7060.00"],
 
+          ["郊区35kV输变电工程", "华阳新材", "华储光电公司", "战略性新兴产业", "其他", "1250.00"],
 
+          ["环境保护及治理", "华阳新材", "华阳股份", "战略性新兴产业", "节能环保", "5890.00"],
 
+          ["增资山西新阳清洁能源有限公司", "华阳新材", "华阳股份", "战略性新兴产业", "新能源产业", "101700.00"],
 
+          ["增资阳煤集团纳谷（山西）气凝胶科创城管理有限责任公司", "华阳新材", "华阳集团", "战略性新兴产业", "新材料产业", "34582.00"],
 
+          ["太化集团普田农业有限公司股权收购及增资", "华阳新材", "华阳新材", "战略性新兴产业", "新材料产业", "7400.00"],
 
+          ["山西阳煤道得新材股权投资合伙企业（有限合伙）", "华阳新材", "华阳资本", "战略性新兴产业", "新材料产业", "5000.00"],
 
+          ["阳泉市梧桐树嘉裕阳煤智能制造股权投资合伙企业（有限合伙）", "华阳新材", "华阳资本华阳股份", "战略性新兴产业", "新材料产业", "6576.29"],
 
+          ["阳煤纳谷（山西）气凝胶经销有限责任公司", "华阳新材", "气凝胶科创城", "战略性新兴产业", "新材料产业", "4335.00"],
 
+          ["阳煤纳谷（山西）节能服务有限责任公司", "华阳新材", "气凝胶科创城", "战略性新兴产业", "新材料产业", "3674.00"],
 
+          ["华阳诺爱特（山西）新材料科技有限公司", "华阳新材", "气凝胶科创城", "战略性新兴产业", "新材料产业", "500.00"],
 
+          ["华阳纳谷（北京）新材料科技有限公司", "华阳新材", "气凝胶科创城", "战略性新兴产业", "新材料产业", "250.00"],
 
+          ["山西华储光电有限责任公司", "华阳新材", "山西新阳清洁能源有限公司", "战略性新兴产业", "新材料产业", "45000.00"],
 
+          ["山西华钠铜能科技有限责任公司", "华阳新材", "山西新阳清洁能源有限公司", "战略性新兴产业", "新能源产业", "900.00"],
 
+          ["山西华钠碳能科技有限责任公司", "华阳新材", "山西新阳清洁能源有限公司", "战略性新兴产业", "新能源产业", "450.00"]
 
+
 
         ],
 
         align: ["center", "center", "center", "center", "center", "center", "center"],
 
         headerBGC: "#153A62",
 
@@ -64,25 +71,25 @@ let app = new Vue({
 
       },
 
     }
 
   },
 
-  created () {
 
+  created() {
 
     this.getUrlParams()
 
     this.time = formatDate()
 
     this.timer = setInterval(() => {
 
       this.time = formatDate()
 
     }, 1000)
 
   },
 
-  beforeDestroy () {
 
+  beforeDestroy() {
 
     if (this.timer) {
 
       clearInterval(this.timer);
 
     }
 
   },
 
-  mounted () {
 
+  mounted() {
 
   },
 
   methods: {
 
-    handleGoBack () {
 
+    handleGoBack() {
 
       window.history.go(-1)
 
     },
 
-    getUrlParams () {
 
+    getUrlParams() {
 
       let url = window.location.href
 
       // 通过 ? 分割获取后面的参数字符串
 
       let urlStr = url.split('?')[1]

File diff suppressed because it is too large
+ 11991 - 0
investment/libs/echarts-gl.min.js


File diff suppressed because it is too large
+ 9 - 1
investment/libs/echarts.min.js


+ 80 - 26
investment/styles/investHome2.css
查看文件 

@@ -9,8 +9,9 @@ html,
 
 body {
 
   height: 100%;
 
   font-size: 14px;
 
-  background-color: #ECFFFF;
 
-  font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', Arial, sans-serif;
 
+  background-color: #ecffff;
 
+  font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, 'PingFang SC',
 
+    'Hiragino Sans GB', Arial, sans-serif;
 
 }
 
 
 .flex {
 
@@ -88,7 +89,7 @@ a {
 
   font-weight: 600;
 
 }
 
 .my-header span {
 
-  background: linear-gradient(-3deg, #99EEFF 0%, #99EEFF 30%, #FFFFFF 91%);
 
+  background: linear-gradient(-3deg, #99eeff 0%, #99eeff 30%, #ffffff 91%);
 
   -webkit-background-clip: text;
 
   -webkit-text-fill-color: transparent;
 
 }
 
@@ -170,7 +171,7 @@ a {
 
   flex-direction: column;
 
 }
 
 .item .item-title {
 
-  color: #69C0FF;
 
+  color: #69c0ff;
 
   font-size: 28px;
 
   font-weight: bold;
 
 }
 
@@ -184,7 +185,7 @@ a {
 
   margin-bottom: 9px;
 
 }
 
 .item .item-text {
 
-  color: rgba(255,255,255,0.6);
 
+  color: rgba(255, 255, 255, 0.6);
 
   font-size: 14px;
 
 }
 
 
@@ -208,7 +209,7 @@ a {
 
   margin-top: -20px;
 
 }
 
 .item2 .item2-text {
 
-  color: rgba(255,255,255,0.6);
 
+  color: rgba(255, 255, 255, 0.6);
 
   font-size: 12px;
 
 }
 
 
@@ -220,7 +221,7 @@ a {
 
 .item3 .item3-title {
 
   font-weight: bold;
 
   font-size: 24px;
 
-  color: #69C0FF;
 
+  color: #69c0ff;
 
 }
 
 .item3 .item3-title span {
 
   font-size: 14px;
 
@@ -234,12 +235,12 @@ a {
 
 }
 
 .item3 .item3-text {
 
   font-size: 14px;
 
-  color: rgba(255,255,255,0.6);
 
+  color: rgba(255, 255, 255, 0.6);
 
 }
 
 .item4 .item4-title {
 
   position: relative;
 
   padding-left: 10px;
 
-  color: #69C0FF;
 
+  color: #69c0ff;
 
   margin-left: 10px;
 
   margin-top: 10px;
 
 }
 
@@ -252,7 +253,7 @@ a {
 
   width: 5px;
 
   height: 5px;
 
   border-radius: 50%;
 
-  background-color: #69C0FF;
 
+  background-color: #69c0ff;
 
 }
 
 
 .item4 .item4-con {
 
@@ -261,14 +262,14 @@ a {
 
   justify-content: space-around;
 
   height: 100%;
 
 }
 
-.item4 .item4-con .item{
 
+.item4 .item4-con .item {
 
   display: flex;
 
   flex-direction: column;
 
   align-items: center;
 
   justify-content: center;
 
 }
 
 .item4 .item4-con .item .title {
 
-  color: #69C0FF;
 
+  color: #69c0ff;
 
   font-weight: bold;
 
   font-size: 28px;
 
 }
 
@@ -278,7 +279,7 @@ a {
 
 }
 
 .item4 .item4-con .item .text {
 
   font-size: 14px;
 
-  color: rgba(255,255,255,0.6);
 
+  color: rgba(255, 255, 255, 0.6);
 
 }
 
 
 .item5 {
 
@@ -287,8 +288,8 @@ a {
 
 }
 
 .item5 .title {
 
   height: 30px;
 
-  color: #69C0FF;
 
-  border: 1px solid #40A9FF;
 
+  color: #69c0ff;
 
+  border: 1px solid #40a9ff;
 
   border-radius: 5px;
 
   display: flex;
 
   align-items: center;
 
@@ -296,18 +297,19 @@ a {
 
   padding: 0 6px;
 
 }
 
 
-
 
-
 
-
 
 .left .content .content-con {
 
   margin-right: 10px;
 
 }
 
-.left .content .content-left, .left .content .content-right, .left .content .content-con {
 
+.left .content .content-left,
 
+/* .left .content .content-right, */
 
+.topChange2,
 
+.left .content .content-con {
 
   background-color: rgb(18 81 128 / 22%);
 
   flex: 1;
 
 }
 
-
 
-
 
+.left .content .content-right {
 
+  flex: 1;
 
+}
 
 .right .title {
 
   position: relative;
 
   text-align: center;
 
@@ -350,14 +352,16 @@ a {
 
 .right .content .content-left {
 
   margin-right: 10px;
 
 }
 
-.right .content .content-left, .right .content .content-right {
 
+.right .content .content-left,
 
+.right .content .content-right {
 
   display: flex;
 
   flex: 1;
 
 }
 
 .right .content .content-top {
 
   margin-bottom: 10px;
 
 }
 
-.right .content .content-top, .right .content .content-bot {
 
+.right .content .content-top,
 
+.right .content .content-bot {
 
   background-color: rgb(18 81 128 / 22%);
 
   flex: 1;
 
 }
 
@@ -377,14 +381,16 @@ a {
 
 .right .content .content-left .content-left-r .content-left-r-t {
 
   margin-bottom: 10px;
 
 }
 
-.right .content .content-left .content-left-r .content-left-r-t, .right .content .content-left .content-left-r .content-left-r-b{
 
+.right .content .content-left .content-left-r .content-left-r-t,
 
+.right .content .content-left .content-left-r .content-left-r-b {
 
   background-color: rgb(18 81 128 / 22%);
 
   flex: 1;
 
 }
 
 .right .content .content-right .content-right-l {
 
   margin-right: 10px;
 
 }
 
-.right .content .content-right .content-right-l, .right .content .content-right .content-right-r{
 
+.right .content .content-right .content-right-l,
 
+.right .content .content-right .content-right-r {
 
   background-color: rgb(18 81 128 / 22%);
 
   flex: 1;
 
 }
 
@@ -405,4 +411,52 @@ a {
 
   border-top-right-radius: 10px;
 
   cursor: pointer;
 
   box-sizing: border-box;
 
-}
 
+}
 
+.fourPie {
 
+  width: 100%;
 
+  height: 100%;
 
+  display: grid;
 
+  grid-template-columns: repeat(4, minmax(0, 1fr));
 
+}
 
+.content-right table {
 
+  width: 100%;
 
+  height: 100%;
 
+  text-align: center;
 
+  border: #f0d2d180;
 
+  background-color: rgba(60, 99, 99, 0.409);
 
+}
 
+.topChange1 {
 
+  display: grid;
 
+  grid-template-columns: repeat(2, minmax(0, 1fr));
 
+  grid-template-rows: repeat(2, minmax(0, 1fr));
 
+  width: 80%;
 
+  height: 100%;
 
+  padding: 10px;
 
+}
 
+.topChange1 .item2 {
 
+  width: 100%;
 
+}
 
+.topChange0 {
 
+  width: 20%;
 
+  height: 100%;
 
+  text-align: center;
 
+  padding-top: 20px;
 
+  color: #a0ead9;
 
+  font-size: 16px;
 
+}
 
+.jt {
 
+  border-top: 50px solid transparent;
 
+  border-bottom: 50px solid transparent;
 
+  border-left: 30px solid #81c14f;
 
+  width: 0;
 
+  height: 0;
 
+  margin: 0 20px;
 
+}
 
+.content-right {
 
+  display: flex;
 
+  align-items: center;
 
+}
 
+.content-right-l,
 
+.content-right-r {
 
+  height: 100%;
 
+}

+ 408 - 0
investment/styles/investHome2compound.css
查看文件 

@@ -0,0 +1,408 @@
 
+*,
 
+*:before,
 
+*:after {
 
+  padding: 0;
 
+  margin: 0;
 
+  box-sizing: border-box;
 
+}
 
+html,
 
+body {
 
+  height: 100%;
 
+  font-size: 14px;
 
+  background-color: #ECFFFF;
 
+  font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', Arial, sans-serif;
 
+}
 
+
 
+.flex {
 
+  display: flex;
 
+}
 
+.flex1 {
 
+  flex: 1;
 
+}
 
+.flex2 {
 
+  flex: 2;
 
+}
 
+.flex-around {
 
+  display: flex;
 
+  justify-content: space-around;
 
+}
 
+.flex-between {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+}
 
+.flex-end {
 
+  display: flex;
 
+  justify-content: flex-end;
 
+}
 
+.flex-align-center {
 
+  display: flex;
 
+  align-items: center;
 
+}
 
+.text-center {
 
+  text-align: center;
 
+}
 
+.font12 {
 
+  font-size: 12px;
 
+}
 
+.main-color {
 
+  color: #0bf1ff;
 
+}
 
+.danger-color {
 
+  color: #f15450 !important;
 
+}
 
+.error-color {
 
+  color: #ffc704 !important;
 
+}
 
+.btm10 {
 
+  margin-bottom: 10px;
 
+}
 
+.btm20 {
 
+  margin-bottom: 20px;
 
+}
 
+a {
 
+  text-decoration: none;
 
+  cursor: pointer;
 
+}
 
+
 
+[v-cloak] {
 
+  display: none;
 
+}
 
+#app {
 
+  background: url('../images/page-bg.png') center center no-repeat;
 
+  background-size: 100% 100%;
 
+  padding-top: 10px;
 
+  height: 100vh;
 
+  overflow: hidden;
 
+  color: #fff;
 
+}
 
+.my-header {
 
+  position: relative;
 
+  height: 70px;
 
+  line-height: 70px;
 
+  background: url('../images/header-bg.png') center center no-repeat;
 
+  background-size: 100% 100%;
 
+  text-align: center;
 
+  font-weight: bold;
 
+  font-size: 32px;
 
+  font-weight: 600;
 
+}
 
+.my-header span {
 
+  background: linear-gradient(-3deg, #99EEFF 0%, #99EEFF 30%, #FFFFFF 91%);
 
+  -webkit-background-clip: text;
 
+  -webkit-text-fill-color: transparent;
 
+}
 
+.my-header span.right {
 
+  position: absolute;
 
+  right: 60px;
 
+  top: 0px;
 
+  font-size: 16px;
 
+}
 
+.main {
 
+  padding: 15px;
 
+  display: flex;
 
+  height: calc(100vh - 25px);
 
+  background: url('../images/content-bg2.png') no-repeat center bottom;
 
+  display: flex;
 
+  padding-bottom: 65px;
 
+}
 
+.left {
 
+  margin-right: 10px;
 
+}
 
+.left,
 
+.right {
 
+  flex: 1;
 
+  display: flex;
 
+  flex-direction: column;
 
+}
 
+.dv-border-box-8 {
 
+  background: url('../images/left-border2.png') no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.left .title {
 
+  position: relative;
 
+  text-align: center;
 
+  height: 50px;
 
+  line-height: 50px;
 
+}
 
+.left .title .text {
 
+  font-size: 20px;
 
+  font-weight: 600;
 
+  color: #05fbfe;
 
+  text-shadow: 0px 2px 10px rgba(10, 30, 52, 0.48);
 
+  background: linear-gradient(0deg, #ffffff 0%, #63dcff 0%, #e0f3ff 100%);
 
+  -webkit-background-clip: text;
 
+  -webkit-text-fill-color: transparent;
 
+  position: relative;
 
+}
 
+.left .title .text::before {
 
+  position: absolute;
 
+  content: ' ';
 
+  top: 10px;
 
+  left: -40px;
 
+  width: 30px;
 
+  height: 10px;
 
+  background: url('../images/title-left.png') no-repeat;
 
+}
 
+.left .title .text::after {
 
+  position: absolute;
 
+  content: ' ';
 
+  top: 10px;
 
+  right: -40px;
 
+  width: 30px;
 
+  height: 10px;
 
+  background: url('../images/title-right.png') no-repeat;
 
+}
 
+.left .content {
 
+  height: calc(100% - 60px);
 
+  padding: 0 17px 14px;
 
+  display: flex;
 
+}
 
+.left .content .content-left {
 
+  margin-right: 10px;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: space-evenly;
 
+}
 
+.item {
 
+  display: flex;
 
+  align-items: center;
 
+  flex-direction: column;
 
+}
 
+.item .item-title {
 
+  color: #69C0FF;
 
+  font-size: 28px;
 
+  font-weight: bold;
 
+}
 
+.item .item-title span {
 
+  font-weight: 500;
 
+  font-size: 14px;
 
+}
 
+.item .item-img {
 
+  width: 106px;
 
+  height: 106px;
 
+  margin-bottom: 9px;
 
+}
 
+.item .item-text {
 
+  color: rgba(255,255,255,0.6);
 
+  font-size: 14px;
 
+}
 
+
 
+.item2 {
 
+  width: 50%;
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: center;
 
+}
 
+.item2 .item2-title {
 
+  font-weight: bold;
 
+  font-size: 18px;
 
+}
 
+.item2 .item2-title span {
 
+  font-weight: 500;
 
+  font-size: 12px;
 
+}
 
+.item2 .item2-img {
 
+  width: 67px;
 
+  height: 66px;
 
+  margin-top: -20px;
 
+}
 
+.item2 .item2-text {
 
+  color: rgba(255,255,255,0.6);
 
+  font-size: 12px;
 
+}
 
+
 
+.item3 {
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: center;
 
+}
 
+.item3 .item3-title {
 
+  font-weight: bold;
 
+  font-size: 24px;
 
+  color: #69C0FF;
 
+}
 
+.item3 .item3-title span {
 
+  font-size: 14px;
 
+  font-weight: 500;
 
+}
 
+.item3 .item3-img {
 
+  margin-top: -20px;
 
+  width: 100px;
 
+  height: 102px;
 
+  margin-bottom: 18px;
 
+}
 
+.item3 .item3-text {
 
+  font-size: 14px;
 
+  color: rgba(255,255,255,0.6);
 
+}
 
+.item4 .item4-title {
 
+  position: relative;
 
+  padding-left: 10px;
 
+  color: #69C0FF;
 
+  margin-left: 10px;
 
+  margin-top: 10px;
 
+}
 
+.item4 .item4-title::before {
 
+  content: '';
 
+  position: absolute;
 
+  left: 0;
 
+  top: 50%;
 
+  transform: translate(0, -50%);
 
+  width: 5px;
 
+  height: 5px;
 
+  border-radius: 50%;
 
+  background-color: #69C0FF;
 
+}
 
+
 
+.item4 .item4-con {
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: space-around;
 
+  height: 100%;
 
+}
 
+.item4 .item4-con .item{
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: center;
 
+  justify-content: center;
 
+}
 
+.item4 .item4-con .item .title {
 
+  color: #69C0FF;
 
+  font-weight: bold;
 
+  font-size: 28px;
 
+}
 
+.item4 .item4-con .item .title span {
 
+  font-weight: 500;
 
+  font-size: 14px;
 
+}
 
+.item4 .item4-con .item .text {
 
+  font-size: 14px;
 
+  color: rgba(255,255,255,0.6);
 
+}
 
+
 
+.item5 {
 
+  padding: 14px;
 
+  height: 100%;
 
+}
 
+.item5 .title {
 
+  height: 30px;
 
+  color: #69C0FF;
 
+  border: 1px solid #40A9FF;
 
+  border-radius: 5px;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: end;
 
+  padding: 0 6px;
 
+}
 
+
 
+
 
+
 
+
 
+.left .content .content-con {
 
+  margin-right: 10px;
 
+}
 
+.left .content .content-left, .left .content .content-right, .left .content .content-con {
 
+  background-color: rgb(18 81 128 / 22%);
 
+  flex: 1;
 
+}
 
+
 
+
 
+.right .title {
 
+  position: relative;
 
+  text-align: center;
 
+  height: 50px;
 
+  line-height: 50px;
 
+}
 
+.right .title .text {
 
+  font-size: 20px;
 
+  font-weight: 600;
 
+  color: #05fbfe;
 
+  text-shadow: 0px 2px 10px rgba(10, 30, 52, 0.48);
 
+  background: linear-gradient(0deg, #ffffff 0%, #63dcff 0%, #e0f3ff 100%);
 
+  -webkit-background-clip: text;
 
+  -webkit-text-fill-color: transparent;
 
+  position: relative;
 
+}
 
+.right .title .text::before {
 
+  position: absolute;
 
+  content: ' ';
 
+  top: 10px;
 
+  left: -40px;
 
+  width: 30px;
 
+  height: 10px;
 
+  background: url('../images/title-left.png') no-repeat;
 
+}
 
+.right .title .text::after {
 
+  position: absolute;
 
+  content: ' ';
 
+  top: 10px;
 
+  right: -40px;
 
+  width: 30px;
 
+  height: 10px;
 
+  background: url('../images/title-right.png') no-repeat;
 
+}
 
+.right .content {
 
+  height: calc(100% - 60px);
 
+  padding: 0 17px 14px;
 
+  display: flex;
 
+}
 
+.right .content .content-left {
 
+  margin-right: 10px;
 
+}
 
+.right .content .content-left, .right .content .content-right {
 
+  display: flex;
 
+  flex: 1;
 
+}
 
+.right .content .content-top {
 
+  margin-bottom: 10px;
 
+}
 
+.right .content .content-top, .right .content .content-bot {
 
+  background-color: rgb(18 81 128 / 22%);
 
+  flex: 1;
 
+}
 
+.right .content .content-left .content-left-l {
 
+  background-color: rgb(18 81 128 / 22%);
 
+  flex: 1;
 
+  margin-right: 10px;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+}
 
+.right .content .content-left .content-left-r {
 
+  flex: 2;
 
+  display: flex;
 
+  flex-direction: column;
 
+}
 
+.right .content .content-left .content-left-r .content-left-r-t {
 
+  margin-bottom: 10px;
 
+}
 
+.right .content .content-left .content-left-r .content-left-r-t, .right .content .content-left .content-left-r .content-left-r-b{
 
+  background-color: rgb(18 81 128 / 22%);
 
+  flex: 1;
 
+}
 
+.right .content .content-right .content-right-l {
 
+  margin-right: 10px;
 
+}
 
+.right .content .content-right .content-right-l, .right .content .content-right .content-right-r{
 
+  background-color: rgb(18 81 128 / 22%);
 
+  flex: 1;
 
+}
 
+
 
+.tip-window {
 
+  display: inline-flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  position: absolute;
 
+  right: 15px;
 
+  top: 10px;
 
+  height: 30px;
 
+  padding: 0 10px;
 
+  color: #69c0ff;
 
+  background-color: rgba(64, 169, 255, 0.12);
 
+  border: 2px solid #40a9ff;
 
+  border-radius: 5px;
 
+  border-top-right-radius: 10px;
 
+  cursor: pointer;
 
+  box-sizing: border-box;
 
+}

Some files were not shown because too many files changed in this diff