demo提交

investmentNew/index.html

@@ -15,6 +15,7 @@
   <script src="./libs/axios.min.js"></script>
   <script src="./js/request.js"></script>
   <script src="./js/map/china.json"></script>
+  <script src="./js/Data.js"></script>
   <script src="./libs/echarts-tooltip-carousel.js"></script>
 </head>
 
@@ -66,26 +67,66 @@
                 <div style="font-size: 28px;">年度投资计划总额</div>
               </div>
               <div class="left1C">
-                <div class="flex left1C-child">
-                  <div style="height: 100%;width: 48%;" class="flex items-center justify-center font28">主辅业计划占比</div>
-                  <div style="height: 100%;width: 48%;" class="flex items-center justify-center font28">项目管理类型</div>
+                <div class="flex justify-between left1C-child">
+                  <div style="height: 100%;width: 48%;" class="flex items-center justify-center font28 pointer"
+                    @click="industryProportionChange(1)"
+                    :class="industryProportion==1?'industryProportion1':'industryProportion2'">主辅业计划占比</div>
+                  <div style="height: 100%;width: 48%;" class="flex items-center justify-center font28 pointer"
+                    @click="industryProportionChange(2)"
+                    :class="industryProportion==2?'industryProportion1':'industryProportion2'">项目管理类型</div>
                 </div>
-                <div class="flex overflow-hidden items-center">
-                  <div></div>
-                  <div></div>
+                <div class="flex overflow-hidden items-center" style="padding: 1% 0;">
+                  <div ref="leftEcharts1" style="height: 100%;aspect-ratio:1/1;flex-shrink: 0;"></div>
+                  <div style="width:95%;margin-left: 5%;">
+                    <div class="flex items-center font28">
+                      <img src="./img/title-icon.png" style="width: 32px;height: 52px;" alt="">
+                      <span style="margin: 0 10px;">{{industryProportion==1?'主业':'特别监管类'}}</span>
+                      <span style="color: #68BDFF;">41个</span>
+                    </div>
+                    <div ref="leftEcharts2" style="height: 50%;width: 100%;"></div>
+                  </div>
+                </div>
+                <div class="flex overflow-hidden items-center" style="padding: 1% 0;">
+                  <div ref="leftEcharts3" style="height: 100%;aspect-ratio:1/1;flex-shrink: 0;"></div>
+                  <div style="width:95%;margin-left: 5%;">
+                    <div class="flex items-center font28">
+                      <img src="./img/title-icon.png" style="width: 32px;height: 52px;" alt="">
+                      <span style="margin: 0 10px;">{{industryProportion==1?'辅业':'备案类'}}</span>
+                      <span style="color: #68BDFF;">62个</span>
+                    </div>
+                    <div ref="leftEcharts4" style="height: 50%;width: 100%;"></div>
+                  </div>
                 </div>
-                <div></div>
               </div>
             </div>
           </div>
         </div>
         <div>
           <div class="title">投资额度分析</div>
-          <div class="content"></div>
+          <div class="content left3">
+            <div ref="leftEcharts6" style="width: 100%;height: 100%;"></div>
+            <div></div>
+          </div>
         </div>
         <div>
           <div class="title">产业布局分析</div>
-          <div class="content"></div>
+          <div class="content left2">
+            <div class="flex items-center justify-around font28" style="padding: 0 10%;">
+              <div @click="industryLayoutChange(0)" class="pointer"
+                :class="industryLayout==0?'industryProportion1':'industryProportion2'" style="padding: 1% 2%;">传统产业分析
+              </div>
+              <div @click="industryLayoutChange(1)" class="pointer"
+                :class="industryLayout==1?'industryProportion1':'industryProportion2'" style="padding: 1% 2%;">战略性新兴产业
+              </div>
+              <div @click="industryLayoutChange(2)" class="pointer"
+                :class="industryLayout==2?'industryProportion1':'industryProportion2'" style="padding: 1% 2%;">特色优势产业
+              </div>
+              <div @click="industryLayoutChange(3)" class="pointer"
+                :class="industryLayout==3?'industryProportion1':'industryProportion2'" style="padding: 1% 2%;">公共基础等产业
+              </div>
+            </div>
+            <div ref="leftEcharts5" style="width: 100%;height: 100%;"></div>
+          </div>
         </div>
         <div>
           <div class="title">企业额度分析</div>
@@ -93,7 +134,84 @@
         </div>
         <div>
           <div class="title">项目阶段分析</div>
-          <div class="content"></div>
+          <div class="content left4">
+            <div ref="leftEcharts7" style="height: 100%;width: 100%;"></div>
+            <div ref="leftEcharts8" style="height: 100%;width: 100%;"></div>
+            <div class="left4A">
+              <!-- 第一列 -->
+              <div style="width:104px;top: 21%;left: 9%;animation-delay:1s">
+                <div class="text-center">1230亿</div>
+                <img src="./img/left-blue.png" class="" style="width:104px;height: 112px;" alt="">
+              </div>
+              <div style="width:104px;top: 51%;left: 9%;animation-delay:1s">
+                <img src="./img/left-green.png" class="" style="width:104px;height: 112px;" alt="">
+                <div class="text-center">1036亿</div>
+              </div>
+              <!-- 第二列 -->
+              <div style="width:104px;top: 30%;left: 19%;">
+                <div class="text-center">1830亿</div>
+                <img src="./img/left-blue.png" class="" style="width:104px;height: 112px;" alt="">
+              </div>
+              <div style="width:104px;top: 62%;left: 19%;">
+                <img src="./img/left-green.png" class="" style="width:104px;height: 112px;" alt="">
+                <div class="text-center">1025亿</div>
+              </div>
+              <!-- 第三列 -->
+              <div style="width:104px;top: 35%;left: 29%;animation-delay:1s">
+                <div class="text-center">1830亿</div>
+                <img src="./img/left-blue.png" class="" style="width:104px;height: 112px;" alt="">
+              </div>
+              <div style="width:104px;top: 60%;left: 29%;animation-delay:1s">
+                <img src="./img/left-green.png" class="" style="width:104px;height: 112px;" alt="">
+                <div class="text-center">1025亿</div>
+              </div>
+              <!-- 第四列 -->
+              <div style="width:104px;top: 31%;left: 39%;">
+                <div class="text-center">1830亿</div>
+                <img src="./img/left-blue.png" class="" style="width:104px;height: 112px;" alt="">
+              </div>
+              <div style="width:104px;top: 61%;left: 39%;">
+                <img src="./img/left-green.png" class="" style="width:104px;height: 112px;" alt="">
+                <div class="text-center">1025亿</div>
+              </div>
+              <!-- 第五列 -->
+              <div style="width:104px;top: 41%;left: 58%;animation-delay:1s">
+                <div class="text-center">1830亿</div>
+                <img src="./img/left-blue.png" class="" style="width:104px;height: 112px;" alt="">
+              </div>
+              <div style="width:104px;top: 65%;left: 58%;animation-delay:1s">
+                <img src="./img/left-green.png" class="" style="width:104px;height: 112px;" alt="">
+                <div class="text-center">1025亿</div>
+              </div>
+              <!-- 第六列 -->
+              <div style="width:104px;top: 35%;left: 68%;">
+                <div class="text-center">1830亿</div>
+                <img src="./img/left-blue.png" class="" style="width:104px;height: 112px;" alt="">
+              </div>
+              <div style="width:104px;top: 63%;left: 68%;">
+                <img src="./img/left-green.png" class="" style="width:104px;height: 112px;" alt="">
+                <div class="text-center">1025亿</div>
+              </div>
+              <!-- 第七列 -->
+              <div style="width:104px;top: 21%;left: 78%;animation-delay:1s">
+                <div class="text-center">1830亿</div>
+                <img src="./img/left-blue.png" class="" style="width:104px;height: 112px;" alt="">
+              </div>
+              <div style="width:104px;top: 51%;left: 78%;animation-delay:1s">
+                <img src="./img/left-green.png" class="" style="width:104px;height: 112px;" alt="">
+                <div class="text-center">1025亿</div>
+              </div>
+              <!-- 第八列 -->
+              <div style="width:104px;top: 31%;left: 88%;">
+                <div class="text-center">1830亿</div>
+                <img src="./img/left-blue.png" class="" style="width:104px;height: 112px;" alt="">
+              </div>
+              <div style="width:104px;top: 61%;left: 88%;">
+                <img src="./img/left-green.png" class="" style="width:104px;height: 112px;" alt="">
+                <div class="text-center">1025亿</div>
+              </div>
+            </div>
+          </div>
         </div>
         <div>
           <div class="title">重点项目两线指标</div>
@@ -101,12 +219,108 @@
         </div>
       </div>
       <div class="center">
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
+        <div>
+          <div>
+            <div class="title">两个转型</div>
+            <div class="content relative center1">
+              <div class="flex items-center justify-end" style="font-size: 24px;">
+                <span
+                  style="display:inline-block;margin-right:15px;border-radius:10px;width:25px;height:25px;background: url('../img/blueBig.png') no-repeat center center;background-size: 100% 100%;"></span>
+                <span style="margin-right: 40px;">产业转型</span>
+                <span
+                  style="display:inline-block;margin-right:15px;border-radius:10px;width:25px;height:25px;background: url('../img/greenBig.png') no-repeat center center;background-size: 100% 100%;"></span>
+
+                <span>数字转型</span>
+              </div>
+              <div></div>
+              <div class="absolute flex items-center justify-center flex-col bubble"
+                style="width: 192px;height: 192px;top: 25%;left: 25%;animation-delay:1s;">
+                <span style="font-size: 30px;font-weight: bold;color: #68BDFF;">206<span class="font28">亿</span></span>
+                <span class="font28">投资金额</span>
+              </div>
+              <div class="absolute flex items-center justify-center flex-col bubble"
+                style="width: 170px;height: 170px;top: 60%;left: 70%;animation-delay:1s">
+                <span style="font-size: 30px;font-weight: bold;color: #68BDFF;">153<span class="font28">个</span></span>
+                <span class="font28">项目数量</span>
+              </div>
+              <div class="absolute flex items-center justify-center flex-col bubble"
+                style="width: 175px;height: 175px;top: 65%;left: 15%;">
+                <span style="font-size: 30px;font-weight: bold;color: #EBDE27;">113<span class="font28">个</span></span>
+                <span class="font28">项目数量</span>
+              </div>
+              <div class="absolute flex items-center justify-center flex-col bubble"
+                style="width: 190px;height: 190px;top: 35%;left: 50%;">
+                <span style="font-size: 30px;font-weight: bold;color: #EBDE27;">168<span class="font28">亿</span></span>
+                <span class="font28">投资金额</span>
+              </div>
+            </div>
+          </div>
+          <div>
+            <div class="title">投资产业分布</div>
+            <div class="content"></div>
+          </div>
+          <div>
+            <div class="title">投资执行情况</div>
+            <div class="content"></div>
+          </div>
+        </div>
+        <div class="center2">
+          <div>
+            <div class="flex justify-center  flex-col">
+              <div style="padding-left: 40%;">
+                <div style="font-size: 60px;color: #68BDFF;font-weight: bold">17.09<span
+                    style="font-size: 28px;">亿</span>
+                </div>
+                <div style="font-size: 28px;justify-self:center">总投资额</div>
+              </div>
+            </div>
+            <div class="flex justify-center  flex-col">
+              <div style="padding-left: 40%;">
+                <div style="font-size: 60px;color: #5BDCC8;font-weight: bold">353.07<span
+                    style="font-size: 28px;">亿</span>
+                </div>
+                <div style="font-size: 28px;justify-self:center">项目总数</div>
+              </div>
+            </div>
+            <div class="flex justify-center flex-col">
+              <div style="padding-left: 40%;">
+                <div style="font-size: 60px;color: #5BDCC8;font-weight: bold">2.22<span
+                    style="font-size: 28px;">亿</span>
+                </div>
+                <div style="font-size: 28px;justify-self:center">股权资产</div>
+              </div>
+            </div>
+            <div class="flex justify-center  flex-col">
+              <div style="padding-left: 40%;">
+                <div style="font-size: 60px;color: #68BDFF;font-weight: bold">66.28<span
+                    style="font-size: 28px;">亿</span>
+                </div>
+                <div style="font-size: 28px;justify-self:center">固定资产</div>
+              </div>
+            </div>
+          </div>
+          <div ref="shanxi" style="width: 100%;height: 100%;"></div>
+        </div>
+        <div>
+          <div>
+            <div>
+              <div class="title">五个一体化</div>
+              <div class="content"></div>
+            </div>
+          </div>
+          <div>
+            <div>
+              <div class="title">投资阶段分析</div>
+              <div class="content"></div>
+            </div>
+          </div>
+          <div>
+            <div>
+              <div class="title">重点项目监控</div>
+              <div class="content"></div>
+            </div>
+          </div>
+        </div>
       </div>
       <div class="right">
         <div></div>

investmentNew/js/Data.js

@@ -1,572 +1,133 @@
-let commonCompany = ["山西焦煤", "晋能控股", "华阳新材", "潞安化工", "华新燃气", "太重集团", "国际能源", "华远陆港", "水控集团", "文旅集团", "交控集团", '航产集团', '山西建投', '汾酒集团', '大地控股', '云时代', '华舰体育', '神农科技']
-// 左边大屏
-// 左上
-let left1 = [522.84, 179.39, 621.62]
-let left2 = [0.30, 1323.85]
-// 左中
-let left3 = [[359.91, 400.49, 117.65, 148.96, 34.84, 17.79, 26.15, 26.18, 16.83, 0.00, 43.49, 0.00, 43.39, 76.53, 5.05, 8.59, 0.00, 0.28]]
-// 右上
-let left4 = [1363.88, 1198.19, 372, 165.69, 261]
-let left5 = [{
-  name: '辅业',
-  y: 76.38,
-  num: 84,
-  sliced: false,
-  selected: false,
-},
-{
-  name: '主业',
-  y: 1287.50,
-  num: 713,
-  sliced: false,
-  selected: false,
-}]
-let left6 = [
-  {
-    name: '特别监管类',
-    y: 635.84,
-    num: 168,
-    sliced: false,
-    selected: false,
-  },
-  {
-    name: '备案类',
-    y: 728.04,
-    num: 465,
-    sliced: false,
-    selected: false,
-  }
-]
-// 右中
-let left7 = [
-  {
-    name: '煤炭',
-    y: 294.61,
-    num: 95,
-    sliced: false,
-    selected: false,
-  },
-  {
-    name: '火电',
-    y: 39.24,
-    num: 1,
-    sliced: false,
-    selected: false,
-  },
-  {
-    name: '冶金',
-    y: 38.85,
-    num: 6,
-    sliced: false,
-    selected: false,
-  },
-  {
-    name: '焦化',
-    y: 16.49,
-    num: 4,
-    sliced: false,
-    selected: false,
-  },
-  {
-    name: '其他',
-    y: 14.19,
-    num: 5,
-    sliced: false,
-    selected: false,
-  }
-]
-let left8 = [
-  {
-    name: '新一代信息技术',
-    y: 29.26,
-    num: 75,
-    //x: 75,
-    sliced: false,
-    selected: false,
-  },
-  {
-    name: '高端装备制造',
-    y: 100.41,
-    num: 28,
-    sliced: false,
-    selected: false,
-  },
-  {
-    name: '新材料',
-    y: 6.72,
-    num: 4,
-    sliced: false,
-    selected: false,
-  },
-  {
-    name: '生物',
-    y: 3.60,
-    num: 58,
-    sliced: false,
-    selected: false,
-  },
-  {
-    name: '新能源',
-    y: 170.03,
-    num: 58,
-    sliced: false,
-    selected: false,
-  },
-  {
-    name: '节能环保',
-    y: 26.30,
-    num: 24,
-    sliced: false,
-    selected: false,
-  },
-  {
-    name: '现代服务业',
-    y: 5.10,
-    num: 2,
-    sliced: false,
-    selected: false,
-  }
-]
-let left9 = [
-  {
-    name: '化工',
-    y: 43.86,
-    num: 32,
-    sliced: false,
-    selected: false,
-  },
-  {
-    name: '煤层气',
-    y: 29.49,
-    num: 16,
-    sliced: false,
-    selected: false,
-  },
-  {
-    name: '文旅康养',
-    y: 0.07,
-    num: 1,
-    sliced: false,
-    selected: false,
-  },
-  {
-    name: '体育',
-    y: 2.57,
-    num: 5,
-    sliced: false,
-    selected: false,
-  },
-  {
-    name: '酿造',
-    y: 15.83,
-    num: 4,
-    sliced: false,
-    selected: false,
-  },
-  {
-    name: '建筑房地产',
-    y: 120.81,
-    num: 96,
-    sliced: false,
-    selected: false,
-  },
-  {
-    name: '农业',
-    y: 15.47,
-    num: 10,
-    sliced: false,
-    selected: false,
-  }
-]
-let left10 = [
-  {
-    name: '交通运输业',
-    y: 264.70,
-    num: 38,
-    sliced: false,
-    selected: false,
-  },
-  {
-    name: '煤气层管网',
-    y: 14.39,
-    num: 14,
-    sliced: false,
-    selected: false,
-  },
-  {
-    name: '物流贸易',
-    y: 18.07,
-    num: 18,
-    sliced: false,
-    selected: false,
-  },
-  {
-    name: '水务',
-    y: 69.73,
-    num: 34,
-    sliced: false,
-    selected: false,
-  },
-  {
-    name: '其他',
-    y: 3.64,
-    num: 5,
-    sliced: false,
-    selected: false,
-  }
-]
-// 左下
-let left11 = {
-  // waitTime: '30000',
-  hoverPause: true,
-  header: ['企业集团', '项目名 ', '投资总额'],
-  headerHeight: 80,
-  headerBGC: '#042148',
-  oddRowBGC: '#001c42',
-  evenRowBGC: '#001c42',
-  // oddRowBGC: '#05507b33',
-  rowNum: 6,
-  columnWidth: [150, 450, 150],
-  align: ['center', 'center', 'center'],
-  data: [
-    ['国际能源', '娄烦县120MW智慧光伏发电项目+10%储能', "6.78亿元"],
-    ['国际能源', '平朔矿区150MW农光储氢一体化项目', "7.84亿元"],
-    ['汾酒集团', '汾酒2030技改原酒产储能扩建项目（一期）', "91.02亿元"],
-    ['大地控股', '山西大地控股忻州新店矿业有限公司投资建设年产800万吨精品砂石骨料项目', "8.67亿元"],
-    ['潞安化工', '分布式光伏发电项目', "2.01亿元"],
-    ['太重集团', '设立太重（大同）新能源产业投资公司', "0.30亿元"],
-    ['大地控股', '山西大地宏翔环保科技有限公司电厂固废资源化综合利用建设项目', "3.60亿元"],
-    ['大地控股', '山西大地海科环保科技有限公司电厂固废资源化综合利用建设项目', "3.11亿元"],
-    ['汾酒集团', '保健酒园区新增原酒产能项目', "4.98亿元"],
-    ['汾酒集团', '白玉酒厂改扩建项目', "4.96亿元"],
-    ['华阳新材', '5GW高效光伏组件制造项目', "4.82亿元"],
-    ['华新燃气', '吉县—延长输气管道项目（一期工程）', "3.54亿元"],
-    ['太重集团', '建设液压挖掘机配套油缸项目', "2.60亿元"],
-    ['华远陆港', '物产集团参股设立项目公司投资建设山西物产万科（太原）综合物流产业园项目', "6.60亿元"],
-    ['太重集团', '设立昔阳县晶能新能源有限公司', "0.50亿元"],
-    ['山西建投', '设立山西低碳环保产业集团有限公司', "30.00亿元"],
-    ['山西建投', '设立山西省太忻经济一体化发展投资集团有限公司', "30.00亿元"],
-    ['华新燃气', '设立山西华新液化天然气集团有限公司', "3.00亿元"],
-    ['交控集团', '设立山西交控新能源发展有限公司', "3.00亿元"]
-  ],
-}
-let left12 = [
-  [[4.59, 26.32, 3.24, 17.17, 9.96], [5.74, 49.35, 4.62, 24.53, 24.90], [9.57, 32.90, 5.78, 40.89, 12.45]],
-  [[2.16, 21.98, 15.73, 14.18, 4.54], [2.71, 41.21, 22.47, 20.26, 11.36], [4.51, 27.47, 28.09, 45.02, 5.68]],
-  [[11.85, 0.14, 47.81, 9.64, 5.38], [33.17, 0.17, 68.30, 13.78, 10.75], [23.69, 0.34, 52.54, 34.44, 21.50]],
-  [[5.34, 9.49, 16.99, 0.67, 3.39], [16.02, 18.98, 24.27, 1.35, 6.77], [10.68, 23.73, 31.11, 0.71, 13.54]],
-  [[5.13, 7.63, 7.35, 29.63, 2.31], [15.38, 15.26, 10.50, 59.27, 4.63], [10.25, 19.08, 13.46, 39.51, 9.25]],
-  [[8.50, 11.05, 10.32, 17.21, 4.72], [10.63, 22.10, 14.75, 24.58, 9.44], [30.73, 15.74, 18.98, 23.02, 15.05]],
-  [[11.53, 3.24, 9.30, 5.98, 10.23], [14.41, 6.47, 13.29, 19.92, 20.47], [24.90, 34.11, 25.73, 6.74, 13.56]],
-  [[5.06, 7.36, 11.81, 1.82, 23.31], [12.03, 14.71, 16.87, 2.60, 46.62], [6.33, 16.53, 28.11, 4.33, 25.90]],
-  [[19.26, 0.40, 6.05, 5.29, 16.56], [45.75, 0.80, 8.65, 7.55, 33.12], [24.08, 0.90, 14.41, 12.59, 18.40]],
-  [[6.82, 0.59, 3.05, 2.56, 19.80], [16.19, 1.18, 4.35, 3.65, 39.60], [8.52, 1.33, 7.25, 6.09, 22.00]],
-  [[6.05, 7.36, 6.59, 17.14, 6.60], [10.58, 14.71, 9.42, 24.49, 16.50], [7.56, 21.02, 13.45, 34.98, 8.25]],
-  [[10.85, 15.94, 4.17, 2.22, 8.25], [13.56, 31.88, 5.95, 5.56, 16.51], [22.98, 26.57, 11.90, 2.78, 27.98]],
-  [[14.69, 3.77, 27.28, 14.01, 11.12], [31.47, 7.54, 38.97, 20.02, 22.23], [20.98, 12.56, 29.98, 25.02, 24.98]],
-  [[3.86, 17.12, 17.06, 28.74, 5.59], [4.82, 34.24, 24.37, 41.06, 11.17], [9.64, 19.02, 43.51, 29.33, 16.43]],
-  [[5.53, 0.91, 17.91, 12.14, 15.10], [11.06, 1.51, 44.78, 21.67, 25.17], [7.90, 1.89, 55.98, 36.12, 17.98]],
-  [[5.79, 2.74, 8.51, 9.87, 9.62], [11.58, 9.12, 21.27, 24.68, 16.03], [20.67, 4.56, 23.90, 12.34, 23.57]],
-  [[7.16, 4.26, 14.94, 4.17, 9.76], [14.32, 10.66, 37.35, 7.45, 16.27], [25.57, 5.33, 28.73, 8.56, 27.11]],
-  [[21.92, 7.25, 7.30, 6.66, 3.54], [43.85, 12.08, 18.24, 16.66, 5.90], [33.73, 15.49, 21.98, 8.33, 6.56]],
-  [[9.01, 20.65, 5.25, 12.25, 27.49], [18.02, 34.41, 13.12, 21.87, 45.82], [26.50, 24.58, 23.02, 24.57, 32.73]]
-]
-let left15 = [
-  ['总投资收益率', '销售利润率', '成本费用利润率', '总资产周转率', '财务内部收益率'],
-  ['净投资收益率', '销售利润率', '成本费用利润率', '总资产周转率', '经济增加值率']
-]
-// 右下
-let left13 = [
+commonColor = ["#40A9FF", "#68BDFF", "#58F7DF", "#D2706D", '#FFE036', "#B78CFF", "#7784FF", "#477BFF", "#15D476"]
+commonColor2 = ["#40A9FF50", "#68BDFF50", "#58F7DF50", "#D2706D50", '#FFE03650', "#B78CFF50", "#7784FF50", "#477BFF50", "#15D47650"]
+left1 = [
   [
-    ['项目储备', '特别监管', 14, 12.05],
-    ['项目立项', '特别监管', 2, 1.25],
-    ['可研论证', '特别监管', 10, 32.69],
-    ['投资决策', '特别监管', 15, 28.53]
+    {
+      name: '煤炭',
+      y: 94.61,
+      num: 95,
+    },
+    {
+      name: '火电',
+      y: 39.24,
+      num: 1,
+    },
+    {
+      name: '冶金',
+      y: 38.85,
+      num: 6,
+    },
+    {
+      name: '焦化',
+      y: 16.49,
+      num: 4,
+    },
+    {
+      name: '其他',
+      y: 14.19,
+      num: 5,
+    }
   ],
   [
-    ['项目储备', '备案', 27, 23.86],
-    ['项目立项', '备案', 1, 1.05],
-    ['可研论证', '备案', 14, 18.46],
-    ['投资决策', '备案', 40, 38.86]
-  ]
-]
-let left14 = [
-  [
-    ['项目储备', '特别监管', 9, 6.49],
-    ['项目立项', '特别监管', 0, 0.00],
-    ['可研论证', '特别监管', 2, 0.10],
-    ['投资决策', '特别监管', 27, 15.52]
-  ],
-  [
-    ['项目储备', '备案', 39, 8.08],
-    ['项目立项', '备案', 7, 1.83],
-    ['可研论证', '备案', 19, 1.01],
-    ['投资决策', '备案', 73, 17.65]
-  ]
-]
-
-// 中间大屏
-// 左上
-let center1 = [1324.08, 442, 1169.91, 154.17]
-// 左中
-let center2 = [
-  {
-    name: '传统产业', value: 405.29, value2: '0.30', y: 405.29, num: 95, sliced: false, selected: false,
-  },
-  {
-    name: '战略新兴产业', value: 196.44, value2: '0.15', y: 196.44, num: 95, sliced: false, selected: false
-  },
-  {
-    name: '基础产业', value: 722.34, value2: '0.55', y: 722.34, num: 95, sliced: false, selected: false
-  }
-]
-// 左下
-let center3 = [
-  { name: '山西焦煤', value: 189.07, value2: 121.59 },
-  { name: '晋能控股', value: 385.25, value2: 224.89 },
-  { name: '华阳新材', value: 82.95, value2: 71.34 },
-  { name: '潞安化工', value: 106.84, value2: 59.93 },
-  { name: '华新燃气', value: 31.83, value2: 25.20 },
-  { name: '太重集团', value: 80.01, value2: 42.46 },
-  { name: '国际能源', value: 64.20, value2: 12.19 },
-  { name: '华远陆港', value: 97.57, value2: 112.67 },
-  { name: '万家寨水控', value: 46.99, value2: 50.89 },
-  { name: '文旅集团', value: 26.79, value2: 9.64 },
-  { name: '山西交控', value: 346.36, value2: 335.91 },
-  { name: '航产集团', value: 41.09, value2: 42.67 },
-  { name: '山西建投', value: 218.35, value2: 143.84 },
-  { name: '汾酒集团', value: 14.03, value2: 7.69 },
-  { name: '大地控股', value: 47.05, value2: 23.93 },
-  { name: '云时代', value: 63.45, value2: 32.60 },
-  { name: '华舰体育', value: 5.33, value2: 0.80 },
-  { name: '神农科技', value: 14.76, value2: 5.84 }
-]
-// 中上
-let center4 = [769.3, 153, 129.26, 113]
-// 中下
-let center5 = [
-  { name: '大同市', value: 60.35, value2: 28 },
-  { name: '朔州市', value: 33.61, value2: 13 },
-  { name: '忻州市', value: 73.35, value2: 25 },
-  { name: '吕梁市', value: 109.04, value2: 45 },
-  { name: '太原市', value: 251.67, value2: 113 },
-  { name: '阳泉市', value: 25.12, value2: 28 },
-  { name: '晋中市', value: 148.57, value2: 52 },
-  { name: '临汾市', value: 130.55, value2: 30 },
-  { name: '长治市', value: 103.00, value2: 23 },
-  { name: '运城市', value: 41.06, value2: 23 },
-  { name: '晋城市', value: 45.43, value2: 31 }
-]
-// 右上
-let center6 = [
-  { name: '煤炭和煤电', value: 77.22 },
-  { name: '煤电和新能源', value: 519.43 },
-  { name: '煤炭和化工', value: 82.8 },
-  { name: '煤炭和数字', value: 3.78 },
-  { name: '煤炭和降碳', value: 6.08 },
-]
-// 右中
-let center7 = [
-  { name: '新建', value: 204, value2: 345.53, y: 345.53, num: 204, sliced: false, selected: false },
-  { name: '续建', value: 385, value2: 978.55, y: 978.55, num: 385, sliced: false, selected: false },
-]
-// 右下
-let center8 = [
-  { value: 17.8, name: '太重智能高端液压挖掘机产业项目', office: '太重集团' },
-  { value: 18.1, name: '太重退城入园智能高端装备生产线升级改造项目', office: '太重集团' },
-  { value: 4.9, name: '汾酒保健酒园区新增1万吨原酒产能项目', office: '汾酒集团' },
-  { value: 4, name: '汾酒新增5.88万吨原酒储能项目', office: '汾酒集团' },
-  { value: 3.5, name: '吉县-延长输气管道一期工程项目', office: '华新燃气' },
-  { value: 3, name: '太原武宿（国际）机场三期改扩建工程供热制冷项目', office: '国际能源' },
-  { value: 100, name: '山西路桥绿色智慧交通换电站项目', office: '交控集团' },
-  { value: 1, name: '山西省静态交通大数据平台项目', office: '山西建投' },
-  { value: 6.39, name: '太重3.0兆瓦以上风电用变速箱生产线升级改造项目', office: '太重集团' },
-  { value: 5.45, name: '太重高端冶金矿山机械用变速箱生产线升级改造项目', office: '太重集团' },
-  { value: 6, name: '山西普勤300MW机组低热值煤热解燃烧分级利用多联产技术改造项目', office: '国际能源' },
-  { value: 10, name: '大地控股忻州新店矿业年产800万吨精品砂石骨料项目', office: '大地控股' },
-  { value: 3.6, name: '山西大地100万吨脱硫石膏循环利用项目', office: '大地控股' },
-  { value: 1.72, name: '中国北方林果苗木繁育基地项目', office: '神农科技' },
-  { value: 4, name: '山西种业创新园一期项目', office: '山西焦煤' },
-  { value: 1.53, name: '智慧农机装备园项目', office: '神农科技' },
-  { value: 5.9, name: '山西蓝远快递物流园项目', office: '华远陆港' },
-  { value: 2.64, name: '山西省智慧旅游云平台二期项目', office: '文旅集团' },
-  { value: 9.34, name: '清凉湾温泉康养项目', office: '文旅集团' },
-  { value: 5.93, name: '山西建筑产业现代化临汾园区一期项目', office: '山西建投' },
-  { value: 4.01, name: '晋城市万鑫顺达100MW光伏二期项目', office: '山西建投' },
-  { value: 2, name: '潇河产业园钢结构生产基地项目', office: '山西建投' },
-  { value: 0.5, name: '山西省马铃薯工程技术研究中心项目', office: '神农科技' },
-  { value: 0.4, name: '晋能控股矿井透水智能应急救援系统研究项目', office: '晋能控股' },
-  { value: 1.2, name: '智慧交通山西省实验室项目', office: '交控集团' },
-  { value: 3, name: '山西“时代云”项目', office: '云时代' },
-  { value: 0.7, name: '山西新元煤炭5G+智能化矿井项目', office: '潞安化工' },
-  { value: 1, name: '山西高河能源智能化矿井项目', office: '潞安化工' },
-  { value: 192, name: '新建雄安新区至忻州高速铁路（山西段）项目', office: '华远陆港' },
-  { value: 248.2, name: '新建集宁经大同至原平铁路项目', office: '华远陆港' },
-  { value: 246.1, name: '太原武宿（国际）机场三期改扩建工程', office: '航产集团' },
-  { value: 15, name: '山西省万家寨引黄入晋工程总干线南干线泵站二期扩机工程', office: '水控集团' },
-  { value: 132.55, name: '山西省中部引黄工程', office: '水控集团' },
-  { value: 58.27, name: '山西智能高端装备产业园区基础设施建设及厂房配套项目', office: '太重集团' },
-  { value: 146.2, name: '潇河新城项目', office: '山西建投' },
-  { value: 12.76, name: '山西体育职业学院新校区项目', office: '华舰体育' },
-]
-let center9 = {
-  header: ['企业集团', '项目名称', '投资金额'],
-  headerBGC: '#042148',
-  oddRowBGC: '#011e48',
-  evenRowBGC: '#042148',
-  headerHeight: '80',
-  rowNum: 6,
-  columnWidth: [150, 450, 150],
-  align: ['center', 'center', 'center'],
-  data: [],
-}
-// 右边大屏
-// 上面
-let right1 = [
-  { name: '初步设计', type: 1, number: '106' },
-  { name: '', type: 1, number: '' },
-  { name: '详细设计', type: 1, number: '103' },
-  { name: '', type: 1, number: '' },
-  { name: '施工', type: 1, number: '62' },
-  { name: '', type: 1, number: '' },
-  { name: '完工', type: 1, number: '35' },
-  { name: '', type: 1, number: '' },
-  { name: '验收', type: 1, number: '42' },
-  { name: '', type: 1, number: '' },
-  { name: '决算', type: 1, number: '33' },
-  { name: '', type: 1, number: '' },
-  { name: '前期准备', type: 1, number: '66' },
-  { name: '', type: 1, number: '' },
-  { name: '工商变更登记', type: 1, number: '77' },
-  { name: '', type: 1, number: '' },
-]
-let right2 = [[120, 3423094], [], [121, 3423094], [], [122, 3423094], [], [123, 3423094], [], [124, 3423094], [], [125, 3423094], [], [126, 3423094], [], [127, 3423094]]
-// 中间左边
-let right3 = [
-  { name: '正偏差', value: '160', value2: '500' },
-  { name: '容差内', value: '28', value2: '264' },
-  { name: '负偏差', value: '103', value2: '182' }
-]
-// 中间右边
-let right4 = [
-  { name: '山西焦煤', value: 189.07, value2: 121.59 },
-  { name: '晋能控股', value: 385.25, value2: 224.89 },
-  { name: '华阳新材', value: 82.95, value2: 71.34 },
-  { name: '潞安化工', value: 106.84, value2: 59.93 },
-  { name: '华新燃气', value: 31.83, value2: 25.20 },
-  { name: '太重集团', value: 80.01, value2: 42.46 },
-  { name: '国际能源', value: 64.20, value2: 12.19 },
-  { name: '华远陆港', value: 97.57, value2: 112.67 },
-  { name: '万家寨水控', value: 46.99, value2: 50.89 },
-  { name: '文旅集团', value: 26.79, value2: 9.64 },
-  { name: '山西交控', value: 346.36, value2: 335.91 },
-  { name: '航产集团', value: 41.09, value2: 42.67 },
-  { name: '山西建投', value: 218.35, value2: 143.84 },
-  { name: '汾酒集团', value: 14.03, value2: 7.69 },
-  { name: '大地控股', value: 47.05, value2: 23.93 },
-  { name: '云时代', value: 63.45, value2: 32.60 },
-  { name: '华舰体育', value: 5.33, value2: 0.80 },
-  { name: '神农科技', value: 14.76, value2: 5.84 }
-]
-// 左边下面
-let right5 = [
-  [
-    ['山西焦煤', 43.8],
-    ['晋能控股', 49.8],
-    ['华阳新材', 46],
-    ['潞安化工', 53.8],
-    ['华新燃气', 59],
-    ['太重集团', 57],
-    ['国际能源', 44],
-    ['华远陆港', 46],
-    ['万家寨水控', 57],
-    ['文旅集团', 62.8],
-    ['山西交控', 55.8],
-    ['航产集团', 44.2],
-    ['山西建投', 49.6],
-    ['汾酒集团', 66.65],
-    ['大地控股', 45.6],
-    ['云时代', 63.9],
-    ['华舰体育', 70.6],
-    ['神农科技', 45.6]
+    {
+      name: '新一代信息技术',
+      y: 29.26,
+      num: 75,
+      //x: 75,
+    },
+    {
+      name: '高端装备制造',
+      y: 100.41,
+      num: 28,
+    },
+    {
+      name: '新材料',
+      y: 6.72,
+      num: 4,
+    },
+    {
+      name: '生物',
+      y: 3.60,
+      num: 58,
+    },
+    {
+      name: '新能源',
+      y: 70.03,
+      num: 58,
+    },
+    {
+      name: '节能环保',
+      y: 26.30,
+      num: 24,
+    },
+    {
+      name: '现代服务业',
+      y: 5.10,
+      num: 2,
+    }
   ],
   [
-    ['山西焦煤', 25.8],
-    ['晋能控股', 25.8],
-    ['华阳新材', 38],
-    ['潞安化工', 37.8],
-    ['华新燃气', 28],
-    ['太重集团', 38],
-    ['国际能源', 28],
-    ['华远陆港', 38],
-    ['万家寨水控', 35.8],
-    ['文旅集团', 22.8],
-    ['山西交控', 25.8],
-    ['航产集团', 24.2],
-    ['山西建投', 23.6],
-    ['汾酒集团', 26.65],
-    ['大地控股', 25.6],
-    ['云时代', 30.9],
-    ['华舰体育', 38.6],
-    ['神农科技', 35.6]
+    {
+      name: '化工',
+      y: 43.86,
+      num: 32,
+    },
+    {
+      name: '煤层气',
+      y: 29.49,
+      num: 16,
+    },
+    {
+      name: '文旅康养',
+      y: 0.07,
+      num: 1,
+    },
+    {
+      name: '体育',
+      y: 2.57,
+      num: 5,
+    },
+    {
+      name: '酿造',
+      y: 15.83,
+      num: 4,
+    },
+    {
+      name: '建筑房地产',
+      y: 120.81,
+      num: 96,
+    },
+    {
+      name: '农业',
+      y: 15.47,
+      num: 10,
+    }
   ],
   [
-    ['山西焦煤', 15.8],
-    ['晋能控股', 15.8],
-    ['华阳新材', 8],
-    ['潞安化工', 17.8],
-    ['华新燃气', 18],
-    ['太重集团', 18],
-    ['国际能源', 8],
-    ['华远陆港', 5.8],
-    ['万家寨水控', 5.8],
-    ['文旅集团', 2.8],
-    ['山西交控', 5.8],
-    ['航产集团', 12.2],
-    ['山西建投', 13.6],
-    ['汾酒集团', 16.65],
-    ['大地控股', 15.6],
-    ['云时代', 13.9],
-    ['华舰体育', 18.6],
-    ['神农科技', 15.6]
+    {
+      name: '交通运输业',
+      y: 264.70,
+      num: 38,
+    },
+    {
+      name: '煤气层管网',
+      y: 14.39,
+      num: 14,
+    },
+    {
+      name: '物流贸易',
+      y: 18.07,
+      num: 18,
+    },
+    {
+      name: '水务',
+      y: 69.73,
+      num: 34,
+    },
+    {
+      name: '其他',
+      y: 3.64,
+      num: 5,
+    }
   ]
-]
-// 右边下面
-let right6 = [
-  { value: 189.07, value2: 121.59, value3: 212.6, value4: 35.8 },
-  { value: 385.25, value2: 224.89, value3: 12.6, value4: 35.8 },
-  { value: 82.95, value2: 71.34, value3: 12.6, value4: 35.8 },
-  { value: 106.84, value2: 59.93, value3: 312.6, value4: 35.8 },
-  { value: 31.83, value2: 25.20, value3: 12.6, value4: 35.8 },
-  { value: 80.01, value2: 42.46, value3: 12.6, value4: 35.8 },
-  { value: 64.20, value2: 12.19, value3: 412.6, value4: 35.8 },
-  { value: 97.57, value2: 112.67, value3: 12.6, value4: 35.8 },
-  { value: 46.99, value2: 50.89, value3: 12.6, value4: 35.8 },
-  { value: 26.79, value2: 9.64, value3: 12.6, value4: 35.8 },
-  { value: 346.36, value2: 335.91, value3: 12.6, value4: 35.8 },
-  { value: 41.09, value2: 42.67, value3: 12.6, value4: 35.8 },
-  { value: 218.35, value2: 143.84, value3: 12.6, value4: 35.8 },
-  { value: 14.03, value2: 7.69, value3: 12.6, value4: 35.8 },
-  { value: 47.05, value2: 23.93, value3: 12.6, value4: 35.8 },
-  { value: 63.45, value2: 32.60, value3: 12.6, value4: 35.8 },
-  { value: 5.33, value2: 0.80, value3: 12.6, value4: 35.8 },
-  { value: 14.76, value2: 5.84, value3: 12.6, value4: 35.8 }
-]
-let right7 = [
-  [88200, 80000, 20000, 35000, 50000, 18000]
-]
-let right8 = [
-  { value: 189.07, value2: 121.59, value3: 12.6, value4: 35.8 },
-  { value: 385.25, value2: 224.89, value3: 12.6, value4: 35.8 },
-  { value: 82.95, value2: 71.34, value3: 12.6, value4: 35.8 },
-  { value: 106.84, value2: 59.93, value3: 12.6, value4: 35.8 }
-]
-// 公共
-// 球弹窗
-let common1 = [135.26, 186.82, 78.40, 46.02, 354.47, 400.49]
-let common2 = [0.1463]
-// 单柱状图弹窗
-let common3 = [359.91, 400.49, 117.65, 148.96, 34.84, 17.79, 26.15, 26.18, 16.83, 0.00, 43.49, 0.00, 43.39, 76.53, 5.05, 8.59, 0.00, 0.28]
-// 双柱状图弹窗
-let common4 = [359.91, 400.49, 117.65, 148.96, 34.84, 17.79, 26.15, 26.18, 16.83, 0.00, 43.49, 0.00, 43.39, 76.53, 5.05, 8.59, 0.00, 0.28]
-let common5 = [359.91, 400.49, 117.65, 148.96, 34.84, 17.79, 26.15, 26.18, 16.83, 0.00, 43.49, 0.00, 43.39, 76.53, 5.05, 8.59, 0.00, 0.28]
+]

investmentNew/js/index.js

@@ -1,7 +1,21 @@
 let app = new Vue({
   el: '#app',
   data () {
-    return {}
+    return {
+      leftEcharts1: '',
+      leftEcharts2: '',
+      leftEcharts3: '',
+      leftEcharts4: '',
+      leftEcharts5: '',
+      leftEcharts6: '',
+      leftEcharts7: '',
+      leftEcharts8: '',
+      shanxiMap: '',// 山西地图
+      industryProportion: 1, // 主辅业占比轮播
+      industryLayout: 0,//产业布局分析
+      time1: '', // 4秒定时器
+      time2: '', // 针对投前产业布局分析的定时器
+    }
   },
   created () {
 
@@ -10,52 +24,72 @@ let app = new Vue({
 
   },
   mounted () {
-    // setTimeout(() => {
-    //   this.moChart()
-    // })
-    this.moChart()
+    this.time4s()
+    this.timeNs()
+    setTimeout(() => {
+      this.leftEcharts1Fun()
+      this.leftEcharts2Fun()
+      this.leftEcharts3Fun()
+      this.leftEcharts4Fun()
+      this.leftEcharts5Fun()
+      this.leftEcharts6Fun()
+      this.leftEcharts7Fun()
+      this.leftEcharts8Fun()
+      this.chinaEchartsFun()
+    })
+    // this.moChart()
 
   },
   methods: {
-    moChart () {
-      //获取dom元素
-      let myChart = echarts.init(this.$refs['echart1'])
-      option = {
-        animationDuration: 2000,
-        xAxis: {
-          type: 'category',
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-        },
-        yAxis: {
-          type: 'value'
-        },
-        series: [
-          {
-            data: [
-              120,
-              {
-                value: 200,
-                itemStyle: {
-                  color: '#a90000'
-                }
-              },
-              150,
-              80,
-              70,
-              110,
-              130
-            ],
-            type: 'bar'
-          }
-        ]
-      };
-      //轮播
-      // tools.loopShowTooltip(myChart, option, {
-      //   nterval: 2000,
-      //   loopSeries: true,
-      // });
-      //注册
-      myChart.setOption(option)
+    // 4秒定时器
+    time4s () {
+      let that = this
+      // 4秒定时器
+      this.time1 = setInterval(() => {
+        that.industryProportion == 1 ? that.industryProportion = 2 : that.industryProportion = 1
+        that.leftEcharts1.dispose()
+        that.leftEcharts2.dispose()
+        that.leftEcharts3.dispose()
+        that.leftEcharts4.dispose()
+        that.leftEcharts1Fun()
+        that.leftEcharts2Fun()
+        that.leftEcharts3Fun()
+        that.leftEcharts4Fun()
+      }, 4000);
+    },
+    // 针对投前产业布局分析的定时器
+    timeNs () {
+      let that = this
+      this.time2 = setInterval(() => {
+        if (that.industryLayout < 3) {
+          that.industryLayout = that.industryLayout + 1
+        } else {
+          that.industryLayout = 0
+        }
+        this.time2 && clearInterval(this.time2)
+        this.timeNs()
+        that.leftEcharts5.dispose()
+        that.leftEcharts5Fun()
+      }, left1[that.industryLayout].length * 2000);
+    },
+    // 主辅业占比点击方法
+    industryProportionChange (e) {
+      let that = this
+      this.industryProportion = e
+      this.time1 && clearInterval(this.time1)
+      that.leftEcharts1.dispose()
+      that.leftEcharts2.dispose()
+      that.leftEcharts3.dispose()
+      that.leftEcharts4.dispose()
+      that.leftEcharts1Fun()
+      that.leftEcharts2Fun()
+      that.leftEcharts3Fun()
+      that.leftEcharts4Fun()
+      this.time4s()
+    },
+    // 产业布局分析点击方法
+    industryLayoutChange (e) {
+      this.industryLayout = e
     },
     yuanChange (value) {
       return Number((value / 100000000).toFixed(2))
@@ -83,4 +117,1608 @@ let app = new Vue({
         return intPartFormat
       }
     },
-  })
+    leftEcharts1Fun () {
+      let that = this
+      this.leftEcharts1 = echarts.init(this.$refs['leftEcharts1'])
+      option = {
+        title: {
+          text: that.industryProportion == 1 ? '30%' : '70%',
+          x: 'center',
+          y: 'center',
+          textStyle: {
+            fontWeight: 'normal',
+            color: '#68BDFF',
+            fontSize: '20'
+          }
+        },
+        color: ['#68BDFF', '#254F7F'],
+        series: [{
+          name: 'Line 1',
+          type: 'pie',
+          clockWise: true,
+          radius: ['80%', '100%'],
+          itemStyle: {
+            normal: {
+              label: {
+                show: false
+              },
+              labelLine: {
+                show: false
+              }
+            }
+          },
+          hoverAnimation: false,
+          data: [{
+            value: 80,
+            name: '01',
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false
+                },
+                labelLine: {
+                  show: false
+                }
+              }
+            }
+          }, {
+            name: '02',
+            value: 20
+          }]
+        }]
+      }
+      //轮播
+      // tools.loopShowTooltip(leftEcharts1, option, {
+      //   interval: 2000,
+      //   loopSeries: true,
+      // });
+      //注册
+      that.leftEcharts1.setOption(option)
+    },
+    leftEcharts2Fun () {
+      let that = this
+      this.leftEcharts2 = echarts.init(this.$refs['leftEcharts2'])
+      let nameList = ['a'];
+      let valueList = that.industryProportion == 1 ? [30] : [70];
+      let total = 100; // 数据总数
+      var category = nameList.map((item, index) => {
+        return {
+          value: valueList[index],
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(
+              1,
+              0,
+              0,
+              1,
+              [
+                {
+                  offset: 0,
+                  color: '#40A9FF50',
+                },
+                {
+                  offset: 1,
+                  color: '#40A9FF',
+                },
+              ],
+              false
+            ),
+          },
+        };
+      });
+      var totalList = [];
+      var totalBorderList = [];
+      nameList.map((item, index) => {
+        totalList.push({
+          value: total,
+          itemStyle: {
+            color: 'rgba(51, 147, 236, 0.29)',
+          },
+        });
+        totalBorderList.push({
+          value: total,
+          itemStyle: {
+            borderColor: 'rgba(51, 147, 236, 0.29)',
+            color: 'transparent',
+          },
+        });
+      });
+      var datas = [];
+      category.forEach((value) => {
+        datas.push(value.value);
+      });
+      option = {
+        // backgroundColor: 'rgb(231,238,249)',
+        xAxis: {
+          max: total,
+          splitLine: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisLabel: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        grid: {
+          left: '0%',
+          top: '15%', // 设置条形图的边距
+          right: '15%',
+          bottom: '5%',
+        },
+        yAxis: [
+          {
+            type: 'category',
+            inverse: false,
+            data: nameList,
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            // 内
+            type: 'bar',
+            barWidth: 16,
+            barGap: '20%',
+            silent: true,
+            // label: {
+            //     normal: {
+            //         formatter: (item) => {
+            //             return `${item['name']}：${item['value']} `;
+            //         },
+            //         textStyle: {
+            //             color: 'rgba(105, 120, 136, 1)',
+            //             fontSize: 14,
+            //         },
+            //         position: [0, '-25px'],
+            //         show: true,
+            //     },
+            // },
+            data: category,
+            z: 1,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  1,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: 'rgba(81, 193, 156, 1)',
+                    },
+                    {
+                      offset: 1,
+                      color: 'rgba(234, 177, 100, 1)',
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            animationEasing: 'elasticOut',
+          },
+
+          {
+            // 分隔
+            type: 'pictorialBar',
+            itemStyle: {
+              normal: {
+                color: '#143362',
+              },
+            },
+            symbolRepeat: 'fixed',
+            symbolMargin: 8,
+            symbol: 'rect',
+            symbolClip: false,
+            symbolSize: [4, 20],
+            symbolPosition: 'start',
+            symbolOffset: [0, -2],
+            symbolBoundingData: total,
+            data: [total, total, total, total],
+            z: 2,
+            animationEasing: 'elasticOut',
+          },
+          {
+            // label
+            type: 'pictorialBar',
+            symbolBoundingData: total,
+            itemStyle: {
+              normal: {
+                color: 'none',
+              },
+            },
+            label: {
+              normal: {
+                formatter: (params) => {
+                  var text;
+                  text = `${((params['data'] * 100) / total).toFixed(2)}亿`;
+                  return text;
+                },
+                textStyle: {
+                  // 图列内容样式
+                  fontSize: "20",
+                  fontWeight: 800
+                },
+                position: 'right',
+                offset: [0, -3],
+                distance: 10, // 向右偏移位置
+                show: true,
+                color: '#68BDFF',
+              },
+            },
+            data: datas,
+            z: 0,
+          },
+          {
+            name: '外框',
+            type: 'bar',
+            barGap: '-130%', // 设置外框粗细
+            data: totalBorderList,
+            barWidth: 26,
+            itemStyle: {
+              normal: {
+                // barBorderRadius: [5, 5, 5, 5],
+                borderWidth: 1, // 边框宽度
+                borderColor: 'rgb(51, 147, 236)', // 边框色
+                color: 'rgb(231,238,249)'
+              },
+            },
+            z: 0,
+          }
+        ],
+      };
+
+      //轮播
+      // tools.loopShowTooltip(leftEcharts1, option, {
+      //   interval: 2000,
+      //   loopSeries: true,
+      // });
+      //注册
+      that.leftEcharts2.setOption(option)
+    },
+    leftEcharts3Fun () {
+      let that = this
+      this.leftEcharts3 = echarts.init(this.$refs['leftEcharts3'])
+      option = {
+        title: {
+          text: that.industryProportion == 1 ? '70%' : '30%',
+          x: 'center',
+          y: 'center',
+          textStyle: {
+            fontWeight: 'normal',
+            color: '#68BDFF',
+            fontSize: '20'
+          }
+        },
+        color: ['#5BDCC8', '#254F7F'],
+        series: [{
+          name: 'Line 1',
+          type: 'pie',
+          clockWise: true,
+          radius: ['80%', '100%'],
+          itemStyle: {
+            normal: {
+              label: {
+                show: false
+              },
+              labelLine: {
+                show: false
+              }
+            }
+          },
+          hoverAnimation: false,
+          data: [{
+            value: 80,
+            name: '01',
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false
+                },
+                labelLine: {
+                  show: false
+                }
+              }
+            }
+          }, {
+            name: '02',
+            value: 20
+          }]
+        }]
+      }
+      //轮播
+      // tools.loopShowTooltip(leftEcharts1, option, {
+      //   interval: 2000,
+      //   loopSeries: true,
+      // });
+      //注册
+      that.leftEcharts3.setOption(option)
+    },
+    leftEcharts4Fun () {
+      let that = this
+      this.leftEcharts4 = echarts.init(this.$refs['leftEcharts4'])
+      let nameList = ['a'];
+      let valueList = that.industryProportion == 1 ? [70] : [30];
+      let total = 100; // 数据总数
+      var category = nameList.map((item, index) => {
+        return {
+          value: valueList[index],
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(
+              1,
+              0,
+              0,
+              1,
+              [
+                {
+                  offset: 0,
+                  color: '#5BDCC850',
+                },
+                {
+                  offset: 1,
+                  color: '#5BDCC8',
+                },
+              ],
+              false
+            ),
+          },
+        };
+      });
+      var totalList = [];
+      var totalBorderList = [];
+      nameList.map((item, index) => {
+        totalList.push({
+          value: total,
+          itemStyle: {
+            color: 'rgba(51, 147, 236, 0.29)',
+          },
+        });
+        totalBorderList.push({
+          value: total,
+          itemStyle: {
+            borderColor: 'rgba(51, 147, 236, 0.29)',
+            color: 'transparent',
+          },
+        });
+      });
+      var datas = [];
+      category.forEach((value) => {
+        datas.push(value.value);
+      });
+      option = {
+        // backgroundColor: 'rgb(231,238,249)',
+        xAxis: {
+          max: total,
+          splitLine: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisLabel: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        grid: {
+          left: '0%',
+          top: '15%', // 设置条形图的边距
+          right: '15%',
+          bottom: '5%',
+        },
+        yAxis: [
+          {
+            type: 'category',
+            inverse: false,
+            data: nameList,
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            // 内
+            type: 'bar',
+            barWidth: 16,
+            barGap: '20%',
+            silent: true,
+            // label: {
+            //     normal: {
+            //         formatter: (item) => {
+            //             return `${item['name']}：${item['value']} `;
+            //         },
+            //         textStyle: {
+            //             color: 'rgba(105, 120, 136, 1)',
+            //             fontSize: 14,
+            //         },
+            //         position: [0, '-25px'],
+            //         show: true,
+            //     },
+            // },
+            data: category,
+            z: 1,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  1,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: 'rgba(81, 193, 156, 1)',
+                    },
+                    {
+                      offset: 1,
+                      color: 'rgba(234, 177, 100, 1)',
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            animationEasing: 'elasticOut',
+          },
+
+          {
+            // 分隔
+            type: 'pictorialBar',
+            itemStyle: {
+              normal: {
+                color: '#143362',
+              },
+            },
+            symbolRepeat: 'fixed',
+            symbolMargin: 8,
+            symbol: 'rect',
+            symbolClip: false,
+            symbolSize: [4, 20],
+            symbolPosition: 'start',
+            symbolOffset: [0, -2],
+            symbolBoundingData: total,
+            data: [total, total, total, total],
+            z: 2,
+            animationEasing: 'elasticOut',
+          },
+          {
+            // label
+            type: 'pictorialBar',
+            symbolBoundingData: total,
+            itemStyle: {
+              normal: {
+                color: 'none',
+              },
+            },
+            label: {
+              normal: {
+                formatter: (params) => {
+                  var text;
+                  text = `${((params['data'] * 100) / total).toFixed(2)}亿`;
+                  return text;
+                },
+                textStyle: {
+                  // 图列内容样式
+                  fontSize: "20",
+                  fontWeight: 800
+                },
+                position: 'right',
+                offset: [0, -3],
+                distance: 10, // 向右偏移位置
+                show: true,
+                color: '#68BDFF',
+              },
+            },
+            data: datas,
+            z: 0,
+          },
+          {
+            name: '外框',
+            type: 'bar',
+            barGap: '-130%', // 设置外框粗细
+            data: totalBorderList,
+            barWidth: 26,
+            itemStyle: {
+              normal: {
+                // barBorderRadius: [5, 5, 5, 5],
+                borderWidth: 1, // 边框宽度
+                borderColor: 'rgb(51, 147, 236)', // 边框色
+                color: 'rgb(231,238,249)'
+              },
+            },
+            z: 0,
+          }
+        ],
+      };
+
+      //轮播
+      // tools.loopShowTooltip(leftEcharts1, option, {
+      //   interval: 2000,
+      //   loopSeries: true,
+      // });
+      //注册
+      that.leftEcharts4.setOption(option)
+    },
+    leftEcharts5Fun () {
+      let that = this
+      this.leftEcharts5 = echarts.init(this.$refs['leftEcharts5'])
+      let dataList = []
+      left1[that.industryLayout].forEach((item, index) => {
+        dataList[index] = {
+          value: item.y,
+          name: item.name,
+          itemStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: commonColor2[index], //顶部颜色
+                },
+                {
+                  offset: 1,
+                  color: commonColor[index],// 底部颜色
+                },
+              ]),
+              borderColor: commonColor[index],
+              borderWidth: 3
+            }
+          }
+        }
+      })
+      let option = {
+        tooltip: {
+          trigger: 'item',
+          formatter: function (e) {
+            return `<span style="display:inline-block;margin-right:15px;border-radius:10px;width:20px;height:20px;background-color:${e.borderColor};"></span>${e.name} ${e.percent}%<br>${e.value}亿 ${left1[that.industryLayout][e.seriesIndex].num}个`
+          },
+          backgroundColor: 'rgba(50,50,50,0.7)',    // 提示框浮层的背景颜色
+          textStyle: {
+            color: '#fff',
+            fontStyle: 'normal',    // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体） 
+            fontWeight: 'normal',    // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
+            fontSize: '28',    // 文字字体大小
+          },
+        },
+        legend: {
+          top: 'center',
+          orient: 'vertical',
+          left: '75%',
+          textStyle: {
+            color: '#fff',
+            fontSize: 28,
+            padding: [0, 20]
+          },
+        },
+        graphic: {
+          elements: [{
+            type: 'image',//需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
+            style: {
+              image: './img/whiteCircle.png', //这里添加图片地址
+              width: 80,
+              height: 80
+            },
+            left: 'center',//
+            top: 'middle' //配置图片居中
+          }]
+        },
+        series: [
+          {
+            name: '',
+            type: 'pie',
+            radius: ['20%', '80%'],
+            labelLine: {
+              normal: {
+                lineStyle: {
+                  width: 1,
+                }
+              },
+            },
+            label: {
+              "normal": {
+                "show": false,
+                "textStyle": {
+                  "fontSize": 28,
+                  color: '#fff'
+                }
+              }
+            },
+            roseType: 'area',
+            data: dataList,
+          },
+          {
+            tooltip: {
+              show: false
+            },
+            type: 'pie',
+            radius: ["80%", "82%"],
+            hoverAnimation: false,
+            name: "",
+            data: [{
+              name: '',
+              value: 0,
+              itemStyle: {
+                normal: {
+                  color: "#345189"
+                }
+              }
+            }]
+          },
+        ],
+      }
+      //轮播
+      tools.loopShowTooltip(that.leftEcharts5, option, {
+        interval: 2000,
+        loopSeries: true,
+      });
+      //注册
+      that.leftEcharts5.setOption(option)
+    },
+    leftEcharts6Fun () {
+      let that = this
+      this.leftEcharts6 = echarts.init(this.$refs['leftEcharts6'])
+      var dataArr = 44;
+      var colorSet = {
+        color: '#22B95E'
+      };
+      var color1 = {
+        type: "linear",
+        x: 0,
+        y: 0,
+        x2: 1,
+        y2: 1,
+        colorStops: [
+          {
+            offset: 0,
+            color: "rgba(255,255,255,0.1)"
+          },
+          {
+            offset: 1,
+            color: "rgba(255,255,255,0.3)"
+          }
+        ],
+        global: false
+      }
+      var color2 = {
+        type: "linear",
+        x: 0,
+        y: 0,
+        x2: 1,
+        y2: 1,
+        colorStops: [
+          {
+            offset: 0,
+            color: "#30DBBA"
+          },
+          {
+            offset: 1,
+            color: "#2DE696"
+          }
+        ],
+        global: false
+      }
+
+      option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%"
+        },
+        series: [
+          {
+            name: "内部进度条",
+            type: "gauge",
+            // center: ['20%', '50%'],
+            radius: '50%',
+
+            splitNumber: 10,
+            axisLine: {
+              lineStyle: {
+                color: [
+                  [dataArr / 100, 'rgba(0,0,0,0)'],
+                  [1, 'rgba(0,0,0,0)']
+                ],
+                width: 1
+              }
+            },
+            axisLabel: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+
+            },
+            splitLine: {
+              show: false,
+            },
+            itemStyle: {
+              color: "#ffffff"
+            },
+            detail: {
+              formatter: function (value) {
+                if (value !== 0) {
+                  var num = Math.round(value);
+                  return parseInt(num).toFixed(0) + "%";
+                } else {
+                  return 0;
+                }
+              },
+              offsetCenter: [0, 117],
+              textStyle: {
+                padding: [0, 0, 0, 0],
+                fontSize: 60,
+                color: "#58F7DF"
+              }
+            },
+            title: { //标题
+              show: true,
+              offsetCenter: [0, 220], // x, y，单位px
+              textStyle: {
+                color: "#40A9FF",
+                fontSize: 34, //表盘上的标题文字大小
+                fontWeight: 400,
+                fontFamily: 'MicrosoftYaHei'
+              }
+            },
+            data: [{
+              name: "总额度:1,323.85亿",
+              value: dataArr,
+              itemStyle: {
+                fontSize: '50', //y轴上方单位的大小
+                color: "#FFF666",
+                fontFamily: "MicrosoftYaHei",
+              }
+            }],
+            pointer: {
+              show: true,
+              length: '100%',
+              radius: '20%',
+              width: 3 //指针粗细
+
+            },
+            animationDuration: 4000,
+          },
+          {
+            name: "内部阴影",
+            type: "gauge",
+            radius: '75%',
+            splitNumber: 10,
+            axisLine: {
+              lineStyle: {
+                color: [
+                  [dataArr / 100, new echarts.graphic.LinearGradient(
+                    0, 1, 0, 0, [{
+                      offset: 0,
+                      color: '#081947',
+                    }, {
+                      offset: 0.5,
+                      color: '#5DF5A9',
+                    },
+                    {
+                      offset: 1,
+                      color: '#F6F16A',
+                    }
+                  ]
+                  )],
+                  [
+                    1, '#0E4889'
+                  ]
+                ],
+                width: 70
+
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+
+            },
+            splitLine: {
+              show: false,
+            },
+            itemStyle: {
+              show: false,
+            },
+
+          },
+          {
+            name: '外部刻度',
+            type: 'gauge',
+            //  center: ['20%', '50%'],
+            radius: '90%',
+            min: 0, //最小刻度
+            max: 100, //最大刻度
+            splitNumber: 5, //刻度数量
+            startAngle: 225,
+            endAngle: -45,
+            axisLine: {
+              show: true,
+              lineStyle: {
+                width: 1,
+                color: [
+                  [1, 'rgba(0,0,0,0)']
+                ]
+              }
+            }, //仪表盘轴线
+            axisLabel: {
+              show: false,
+              color: '#ffffff',
+              fontSize: 28,
+              fontFamily: 'SourceHanSansSC-Regular',
+              fontWeight: 'bold',
+              // position: "top",
+              distance: -45,
+              formatter: function (v) {
+                switch (v + '') {
+                  case '0':
+                    return '0';
+                  case '10':
+                    return '10';
+                  case '20':
+                    return '20';
+                  case '30':
+                    return '30';
+                  case '40':
+                    return '40';
+                  case '50':
+                    return '50';
+                  case '60':
+                    return '60';
+                  case '70':
+                    return '70';
+                  case '80':
+                    return '80';
+                  case '90':
+                    return '90';
+                  case '100':
+                    return '100';
+                }
+              }
+            }, //刻度标签。
+            axisTick: {
+              show: true,
+              splitNumber: 10,
+              lineStyle: {
+                color: '#3798D7', //用颜色渐变函数不起作用
+                width: 1,
+              },
+              length: -6
+            }, //刻度样式
+            splitLine: {
+              show: true,
+              length: -12,
+              lineStyle: {
+                color: '#3798D7', //用颜色渐变函数不起作用
+              }
+            }, //分隔线样式
+            detail: {
+              show: false
+            }
+          },
+          { //指针上的圆
+            type: 'pie',
+            tooltip: {
+              show: false
+            },
+            hoverAnimation: false,
+            legendHoverLink: false,
+            radius: ['0%', '4%'],
+            center: ['50%', '50%'],
+            label: {
+              normal: {
+                show: false
+              }
+            },
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+            data: [{
+              value: 120,
+              itemStyle: {
+                normal: {
+                  color: "#ffffff",
+                },
+              }
+            }]
+          },
+
+        ]
+      };
+
+      //轮播
+      // tools.loopShowTooltip(leftEcharts1, option, {
+      //   interval: 2000,
+      //   loopSeries: true,
+      // });
+      //注册
+      that.leftEcharts6.setOption(option)
+    },
+    leftEcharts7Fun () {
+      let that = this
+      this.leftEcharts7 = echarts.init(this.$refs['leftEcharts7'])
+      let option = {
+        title: {
+          text: '固定资产进度分布',
+          textStyle: {
+            color: '#fff',
+            fontSize: 28,
+            fontWeight: 500,
+            fontFamily: 'Microsoft YaHei'
+          },
+          top: '20',
+          left: '220'
+        },
+        textStyle: {
+          color: '#fff',
+        },
+        tooltip: {
+          show: false,
+          trigger: "axis",
+          formatter: function (params) {
+            var tip = params[0].axisValue + '<br/>' + params[0].marker + params[0].data[1] + '：' + params[0].data[2] + '个，' + params[0].data[3] + '亿元' + '<br/>' + params[1].marker + params[1].data[1] + '：' + params[1].data[2] + '个，' + params[1].data[3] + '亿元';
+            return tip
+          },
+          textStyle: {
+            color: '#ffffff',     // 文字的颜色
+            fontSize: '20',    // 文字字体大小
+            fontFamily: 'Microsoft YaHei'
+          },
+          axisPointer: {
+            // lineStyle: {
+            //   type: 'dashed',
+            //   width: 2,
+            //   color: 'rgba(255,255,255,0.6)'
+            // },
+            animation: false
+          }
+        },
+        grid: {
+          top: '0%',
+          right: '5%',
+          left: '15%',
+          bottom: '-10%',
+        },
+        yAxis: {
+          data: ['备案', '特别监管'],
+          splitLine: {
+            show: false,
+            lineStyle: {
+              color: '#68b4dd66',
+              type: 'dashed',
+            },
+          },
+          axisLine: {
+            show: false
+          },
+          axisLabel: {
+            show: true,
+            formatter: '{value}',
+            textStyle: {
+              color: function (data) {
+                if (data == '特别监管') {
+                  return '#40A9FF'
+                } else if (data == '备案') {
+                  return '#5BDCC8'
+                }
+              },
+              fontSize: 20,
+              padding: [0, -10, 0, 0],
+              fontFamily: 'Microsoft YaHei',
+            },
+          },
+          nameTextStyle: {
+            color: '#ebf8ac',
+            fontSize: 16,
+            fontFamily: 'Microsoft YaHei'
+          },
+        },
+        xAxis: {
+          data: ['项目储备', '项目立项', '可研论证', '投资决策'],
+          axisLine: {
+            show: true, //隐藏X轴轴线
+            lineStyle: {
+              color: 'red',
+              width: 1,
+            },
+          },
+          axisTick: {
+            show: false, //隐藏X轴刻度
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: '#fff', //X轴文字颜色
+              fontSize: 20,
+              padding: [-80, 0, 0, 0],
+              fontFamily: 'Microsoft YaHei'
+            },
+          }
+        },
+        series: [
+          {
+            name: '特别监管',
+            type: 'scatter',
+            symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
+            symbolSize: function (data) {
+              return Math.sqrt(data[2]) * 5;
+            },
+            // label: {
+            //   emphasis: {
+            //     show: true,
+            //     formatter: function (param) {
+            //       return param.data[2];
+            //     },
+            //     position: 'top'
+            //   }
+            // },
+            itemStyle: {
+              normal: {
+                color: '#69c0ff'
+              }
+            },
+            // data: left13[0]
+          },
+          {
+            name: '备案',
+            type: 'scatter',
+            symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
+            symbolSize: function (data) {
+              return Math.sqrt(data[2]) * 5;
+            },
+            // label: {
+            //   emphasis: {
+            //     show: true,
+            //     formatter: function (param) {
+            //       return param.data[2];
+            //     },
+            //     position: 'top'
+            //   }
+            // },
+            itemStyle: {
+              normal: {
+                color: '#957DFF'
+              }
+            },
+            // data: left13[1]
+          },
+        ]
+      }
+      //轮播
+      // tools.loopShowTooltip(leftEcharts1, option, {
+      //   interval: 2000,
+      //   loopSeries: true,
+      // });
+      //注册
+      that.leftEcharts7.setOption(option)
+    },
+    leftEcharts8Fun () {
+      let that = this
+      this.leftEcharts8 = echarts.init(this.$refs['leftEcharts8'])
+      let option = {
+        title: {
+          text: '固定资产进度分布',
+          textStyle: {
+            color: '#fff',
+            fontSize: 28,
+            fontWeight: 500,
+            fontFamily: 'Microsoft YaHei'
+          },
+          top: '20',
+          left: '220'
+        },
+        textStyle: {
+          color: '#fff',
+        },
+        tooltip: {
+          show: false,
+          trigger: "axis",
+          formatter: function (params) {
+            var tip = params[0].axisValue + '<br/>' + params[0].marker + params[0].data[1] + '：' + params[0].data[2] + '个，' + params[0].data[3] + '亿元' + '<br/>' + params[1].marker + params[1].data[1] + '：' + params[1].data[2] + '个，' + params[1].data[3] + '亿元';
+            return tip
+          },
+          textStyle: {
+            color: '#ffffff',     // 文字的颜色
+            fontSize: '20',    // 文字字体大小
+            fontFamily: 'Microsoft YaHei'
+          },
+          axisPointer: {
+            // lineStyle: {
+            //   type: 'dashed',
+            //   width: 2,
+            //   color: 'rgba(255,255,255,0.6)'
+            // },
+            animation: false
+          }
+        },
+        grid: {
+          top: '0%',
+          right: '5%',
+          left: '15%',
+          bottom: '-10%',
+        },
+        yAxis: {
+          data: ['备案', '特别监管'],
+          splitLine: {
+            show: false,
+            lineStyle: {
+              color: '#68b4dd66',
+              type: 'dashed',
+            },
+          },
+          axisLine: {
+            show: false
+          },
+          axisLabel: {
+            show: false,
+            formatter: '{value}',
+            textStyle: {
+              color: '#fff',
+              fontSize: 20,
+              padding: [0, -10, 0, 0],
+              fontFamily: 'Microsoft YaHei',
+            },
+          },
+          nameTextStyle: {
+            color: '#ebf8ac',
+            fontSize: 16,
+            fontFamily: 'Microsoft YaHei'
+          },
+        },
+        xAxis: {
+          data: ['项目储备', '项目立项', '可研论证', '投资决策'],
+          axisLine: {
+            show: true, //隐藏X轴轴线
+            lineStyle: {
+              color: 'red',
+              width: 1,
+            },
+          },
+          axisTick: {
+            show: false, //隐藏X轴刻度
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: '#fff', //X轴文字颜色
+              fontSize: 20,
+              padding: [-80, 0, 0, 0],
+              fontFamily: 'Microsoft YaHei'
+            },
+          }
+        },
+        series: [
+          {
+            name: '特别监管',
+            type: 'scatter',
+            symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
+            symbolSize: function (data) {
+              return Math.sqrt(data[2]) * 5;
+            },
+            // label: {
+            //   emphasis: {
+            //     show: true,
+            //     formatter: function (param) {
+            //       return param.data[2];
+            //     },
+            //     position: 'top'
+            //   }
+            // },
+            itemStyle: {
+              normal: {
+                color: '#69c0ff'
+              }
+            },
+            // data: left13[0]
+          },
+          {
+            name: '备案',
+            type: 'scatter',
+            symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
+            symbolSize: function (data) {
+              return Math.sqrt(data[2]) * 5;
+            },
+            // label: {
+            //   emphasis: {
+            //     show: true,
+            //     formatter: function (param) {
+            //       return param.data[2];
+            //     },
+            //     position: 'top'
+            //   }
+            // },
+            itemStyle: {
+              normal: {
+                color: '#957DFF'
+              }
+            },
+            // data: left13[1]
+          },
+        ]
+      }
+      //轮播
+      // tools.loopShowTooltip(leftEcharts1, option, {
+      //   interval: 2000,
+      //   loopSeries: true,
+      // });
+      //注册
+      that.leftEcharts8.setOption(option)
+    },
+    chinaEchartsFun () {
+      this.geoCoordMap = []
+      /*获取地图数据*/
+      this.shanxiMap = echarts.init(this.$refs['shanxi'])
+      // echarts.registerMap('china', china)
+      echarts.registerMap('china', shanxi)
+      // var mapFeatures = echarts.getMap('china').geoJson.features
+      // mapFeatures.forEach(v => {
+      //   // 地区名称
+      //   var name = v.properties.name
+      //   // 地区经纬度
+      //   this.geoCoordMap[name] = v.properties.cp
+      //   data.push({ name: v.properties.name, value: v.properties.cp[0], value2: v.properties.cp[1] })
+      // })
+      // var data = [
+      //   { "name": "新疆", value: 29780 },
+      //   { "name": "西藏", value: 2186 },
+      //   { "name": "内蒙古", value: 1135 },
+      //   { "name": "青海", value: 29780 },
+      //   { "name": "四川", value: 2568 },
+      //   { "name": "黑龙江", value: 29780 },
+      //   { "name": "甘肃", value: 6959 },
+      //   { "name": "云南", value: 5632 },
+      //   { "name": "广西", value: 6707 },
+      //   { "name": "湖南", value: 29780 },
+      //   { "name": "陕西", value: 1894 },
+      //   { "name": "广东", value: 15769 },
+      //   { "name": "吉林", value: 8259 },
+      //   { "name": "河北", value: 5741 },
+      //   { "name": "湖北", value: 3030 },
+      //   { "name": "贵州", value: 4542 },
+      //   { "name": "山东", value: 19780 },
+      //   { "name": "江西", value: 3157 },
+      //   { "name": "河南", value: 6690 },
+      //   { "name": "辽宁", value: 8678 },
+      //   { "name": "山西", value: 5303 },
+      //   { "name": "安徽", value: 29780 },
+      //   { "name": "福建", value: 10259 },
+      //   { "name": "浙江", value: 3016 },
+      //   { "name": "江苏", value: 3202 },
+      //   { "name": "重庆", value: 4540 },
+      //   { "name": "宁夏", value: 19780 },
+      //   { "name": "海南", value: 8626 },
+      //   { "name": "台湾", value: 4361 },
+      //   { "name": "北京", value: 20000 },
+      //   { "name": "天津", value: 4080 },
+      //   { "name": "上海", value: 19780 },
+      //   { "name": "香港", value: 6991 },
+      //   { "name": "澳门", value: 13873 },
+      //   { "name": "南海诸岛", value: 0 }
+      // ];
+      // var geoCoordMap = {
+      //   "新疆": [86.9023, 41.148],
+      //   "西藏": [87.8695, 31.6846],
+      //   "内蒙古": [110.5977, 41.3408],
+      //   "青海": [95.2402, 35.4199],
+      //   "四川": [102.9199, 30.1904],
+      //   "黑龙江": [128.1445, 46.7156],
+      //   "甘肃": [102.7129, 38.166],
+      //   "云南": [101.0652, 24.6807],
+      //   "广西": [108.7813, 23.6426],
+      //   "湖南": [111.5332, 27.3779],
+      //   "陕西": [108.5996, 33.7396],
+      //   "广东": [113.8668, 22.8076],
+      //   "吉林": [126.1746, 43.5938],
+      //   "河北": [115.4004, 38.1688],
+      //   "湖北": [112.2363, 30.8572],
+      //   "贵州": [106.6113, 26.6385],
+      //   "山东": [118.2402, 36.2307],
+      //   "江西": [115.7156, 27.99],
+      //   "河南": [113.0668, 33.8818],
+      //   "辽宁": [123.0438, 41.0889],
+      //   "山西": [112.44, 37.73],
+      //   "安徽": [117.2461, 31.0361],
+      //   "福建": [118.3008, 25.9277],
+      //   "浙江": [120.498, 29.0918],
+      //   "江苏": [119.8586, 32.915],
+      //   "重庆": [107.7539, 29.8904],
+      //   "宁夏": [105.9961, 37.1096],
+      //   "海南": [109.9512, 19.2041],
+      //   "台湾": [120.8254, 23.5986],
+      //   "北京": [116.4551, 40.2539],
+      //   "天津": [117.4219, 39.4189],
+      //   "上海": [121.4648, 31.2891],
+      //   "香港": [114.6178, 22.3242],
+      //   "澳门": [113.5547, 21.6484],
+      //   '南海诸岛': [128.8254, 21.5986]
+      // };
+      var data = [
+        { name: '大同市', value: 6035, value2: 28 },
+        { name: '朔州市', value: 3361, value2: 13 },
+        { name: '忻州市', value: 7335, value2: 25 },
+        { name: '吕梁市', value: 10904, value2: 45 },
+        { name: '太原市', value: 25167, value2: 113 },
+        { name: '阳泉市', value: 2512, value2: 28 },
+        { name: '晋中市', value: 14857, value2: 52 },
+        { name: '临汾市', value: 13055, value2: 30 },
+        { name: '长治市', value: 10300, value2: 23 },
+        { name: '运城市', value: 4106, value2: 23 },
+        { name: '晋城市', value: 4543, value2: 31 }
+      ]
+      var geoCoordMap = {
+        '太原市': [112.53, 37.87],
+        '大同市': [113.3, 40.12],
+        '阳泉市': [113.57, 37.85],
+        '长治市': [113.08, 36.18],
+        '晋城市': [112.83, 35.52],
+        '朔州市': [112.43, 39.33],
+        '晋中市': [112.94, 37.4],
+        '运城市': [110.97, 35.03],
+        '忻州市': [112.53, 38.72],
+        '临汾市': [111.5, 36.08],
+        '吕梁市': [111.13, 37.52],
+      }
+      var convertData = function (data) {
+        var res = [];
+        for (var i = 0; i < data.length; i++) {
+          var geoCoord = geoCoordMap[data[i].name];
+          if (geoCoord) {
+            res.push({
+              name: data[i].name,
+              value: geoCoord.concat(data[i].value)
+            });
+          }
+        }
+        return res;
+      };
+
+      var convertedData = [
+        convertData(data),
+        convertData(data.sort(function (a, b) {
+          return b.value - a.value;
+        }).slice(0, 6))
+      ];
+      data.sort(function (a, b) {
+        return a.value - b.value;
+      })
+      option = {
+        // backgroundColor: '#404a59',
+        animation: true,
+        animationDuration: 1000,
+        animationEasing: 'cubicInOut',
+        animationDurationUpdate: 1000,
+        animationEasingUpdate: 'cubicInOut',
+        geo: {
+          map: 'china',
+          center: [112.53, 37.67],
+          zoom: 4.5,
+          label: {
+            emphasis: {
+              show: false
+            }
+          },
+          tooltip:{
+            trigger: 'item',
+            formatter: function (params) {
+              console.log(params,'??????????')
+            }
+          },
+          roam: false,
+          itemStyle: {
+            normal: {
+              // borderColor: 'rgba(147, 235, 248, 1)',
+              borderColor: '#7fb3ff',
+              borderWidth: 3,
+              areaColor: {
+                type: 'radial',
+                x: 0.5,
+                y: 0.5,
+                r: 0.8,
+                colorStops: [{
+                  offset: 0,
+                  color: '#468ff8' // 0% 处的颜色
+                }, {
+                  offset: 1,
+                  color: '#0a2c6d' // 100% 处的颜色
+                }],
+                globalCoord: false // 缺省为 false
+              },
+              // shadowColor: 'rgba(128, 217, 248, 1)',
+              shadowColor: '#468ff8',
+              shadowOffsetX: -2,
+              shadowOffsetY: 2,
+              shadowBlur: 20
+            },
+            emphasis: {
+              areaColor: {
+                colorStops: [{
+                  offset: 0,
+                  color: '#3844aa' // 0% 处的颜色
+                }, {
+                  offset: 1,
+                  color: '#7284fc' // 100% 处的颜色
+                }],
+              },
+              borderColor: '#b3baff',
+              borderWidth: 5
+            }
+          },
+          regions: [
+            {
+              name: '太原市',
+              value: 2000,
+              itemStyle: {
+                emphasis: {
+                  borderColor: '#ffe036',
+                  borderWidth: 5,
+                  areaColor: {
+                    type: 'radial',
+                    x: 0.5,
+                    y: 0.5,
+                    r: 0.8,
+                    colorStops: [{
+                      offset: 0,
+                      color: '#ffe036' // 0% 处的颜色
+                    }, {
+                      offset: 1,
+                      color: '#7c732a' // 100% 处的颜色
+                    }],
+                    globalCoord: false // 缺省为 false
+                  },
+                }
+              }
+            },
+            {
+              name: "南海诸岛",
+              itemStyle: {
+                // 隐藏地图
+                normal: {
+                  opacity: 0, // 为 0 时不绘制该图形
+                }
+              },
+              label: {
+                show: false // 隐藏文字
+              }
+            }
+          ],
+        },
+        tooltip: {
+          trigger: 'item',
+          className: 'custom-tooltip-box',
+          confine: true, // 不超出当前表
+          formatter: function (params) {
+            console.log(params)
+            return `<div class="bgTooltip" style="background: url('../img/shanxi/${params.name}.png') no-repeat center center;background-size: 100% 100%;font-size:36px">
+          <div class="flex items-center">
+            <img src="./img/yellowArrow.png" style="width: 12px;height: 22px;margin-right:10px" alt=""><span class="fb">${params.name}</span>
+          </div>
+            <div class="blueIcon flex items-center">项目数量：<span class="fb" style="color:#68BDFF;">26<span style="font-size:20px" class="fn">个</span></span></div>
+            <div class="blueIcon flex items-center">投资总额：<span class="fb" style="color:#68BDFF">180<span style="font-size:20px" class="fn">亿</span></span></div>
+          </div>`
+          },
+        },
+        xAxis: {
+          type: 'value',
+          scale: true,
+          position: 'top',
+          boundaryGap: false,
+          splitLine: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            margin: 2,
+            textStyle: {
+              color: '#aaa'
+            }
+          },
+        },
+        yAxis: {
+          type: 'category',
+          nameGap: 16,
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: '#ddd'
+            }
+          },
+          axisTick: {
+            show: false,
+            lineStyle: {
+              color: '#ddd'
+            }
+          },
+          axisLabel: {
+            interval: 0,
+            textStyle: {
+              color: '#ddd'
+            }
+          },
+          data: categoryData
+        },
+        series: [
+          {
+            type: 'effectScatter',
+            coordinateSystem: 'geo',
+            data: convertedData[0],
+            symbolSize: function (val) {
+              return Math.max(val[2] / 500, 8);
+            },
+            showEffectOn: 'render',
+            rippleEffect: {
+              brushType: 'stroke'
+            },
+            hoverAnimation: true,
+            label: {
+              normal: {
+                formatter: '{b}',
+                position: 'right',
+                show: true,
+                fontSize: '30',
+                color: '#fff'
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: '#ffc809',
+                shadowBlur: 50,
+                shadowColor: '#ffc809',
+                fontSize: "500",
+              }
+            },
+            zlevel: 1
+          }
+        ]
+      };
+      var categoryData = [];
+      var barData = [];
+      var sum = 0;
+      for (var i = 0; i < data.length; i++) {
+        categoryData.push(data[i].name);
+        barData.push(data[i].value);
+        sum += data[i].value;
+      }
+      let that = this
+      // this.shanxiMap.on('click', function (params) {
+      //   if (params.name == '山西') {
+      //     that.shanxiMap.dispose()
+      //     that.centerShow = true
+      //     setTimeout(() => {
+      //     })
+      //   }
+      // })
+      tools.loopShowTooltip(this.shanxiMap, option, {
+        interval: 2000,
+        loopSeries: false,
+      });
+      this.shanxiMap.setOption(option)
+    },
+  }
+})

investmentNew/styles/index.css

@@ -8,6 +8,12 @@ body {
   font-family: 'Microsoft YaHei';
   overflow-y: hidden;
 }
+* {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
 img *,
 *,
 *:before,
@@ -43,7 +49,7 @@ a {
   font-weight: bold;
   letter-spacing: 5px;
 }
-.top .title>span:before {
+.top .title > span:before {
   content: '';
   display: inline-block;
   width: 66px; /*图标宽度*/
@@ -52,13 +58,13 @@ a {
   background-size: contain; /*图标大小适应*/
   margin-right: 20px; /*图标与文字的间距*/
 }
-.top .title>div {
+.top .title > div {
   height: 30px;
   width: 40%;
   background: url('../img/title-light.png') center bottom no-repeat;
   background-size: 100% 100%;
 }
-.top .title>span:after {
+.top .title > span:after {
   content: '';
   display: inline-block;
   width: 66px; /*图标宽度*/
@@ -81,9 +87,9 @@ a {
   grid-template-columns: repeat(3, 1fr);
   gap: 10px;
   padding: 0 1% 1% 1%;
+  align-items: end;
 }
 .left,
-.center,
 .right {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -100,9 +106,11 @@ a {
   height: 100%;
   overflow: hidden;
 }
-.left .title {
+.left .title,
+.center .title {
   width: 100%;
-  height: calc(100% / 7);
+  /* height: calc(100% / 7); */
+  height: 100px;
   overflow: hidden;
   background: url('../img/small-title.png') no-repeat center bottom; /*图标路径*/
   background-size: 100% 50%;
@@ -114,9 +122,15 @@ a {
   text-shadow: 2px 3px 1px black;
   letter-spacing: 5px;
 }
-.left .content {
+.left .child > div:nth-child(1):before {
+  content: '●';
+  margin-right: 10px;
+  color: #40a9ff;
+}
+.left .content,
+.center .content {
   width: 100%;
-  height: calc(100% - 100% / 7);
+  height: calc(100% - 100px);
   overflow: hidden;
   padding: 1%;
 }
@@ -135,35 +149,192 @@ a {
   background: url('../img/left1.png') no-repeat center center; /*图标路径*/
   background-size: 100% 100%;
   display: grid;
-  grid-template-columns: repeat(2, 1fr);  
-  grid-template-rows: repeat(3, 1fr); 
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(3, 1fr);
   padding: 1% 3%;
   align-items: center;
 }
-.left1B{
+.left1B {
   display: grid;
-  grid-template-columns: 4fr 6fr; 
+  grid-template-columns: 4fr 6fr;
   overflow: hidden;
 }
-.left1B>div:nth-child(1){
+.left1B > div:nth-child(1) {
   overflow: hidden;
   background: url('../img/disk.png') no-repeat center center; /*图标路径*/
   background-size: 100% 100%;
 }
-.left1C{
+.left1C {
   display: grid;
-  grid-template-rows: 1fr 2fr 2fr; 
+  grid-template-rows: 1fr 2fr 2fr;
   overflow: hidden;
 }
-.checkBg{
+.left1C-child {
+  padding: 1%;
+}
+.checkBg {
   background: url('../img/disk.png') no-repeat center center; /*图标路径*/
   background-size: 100% 100%;
 }
+.left .industryProportion1,
+.left2 .industryProportion1 {
+  background: url('../img/industryProportion.png') no-repeat center center; /*图标路径*/
+  background-size: 100% 100%;
+}
+.left .industryProportion2 {
+  background-color: #1f3152;
+}
+.left2 .industryProportion2 {
+  background-color: #264580;
+}
+.left2 {
+  display: grid;
+  grid-template-rows: 3fr 17fr;
+}
+.left3 {
+  display: grid;
+  grid-template-columns: 9fr 11fr;
+}
+.left4 {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+}
+.left4A {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: absolute;
+}
+.left4A > div,
+.bubble {
+  position: absolute;
+  animation: moveUpDown 4s infinite;
+}
+@keyframes moveUpDown {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+.center {
+  display: grid;
+  grid-template-columns: 33fr 50fr 33fr;
+  height: 95%;
+  width: 100%;
+  overflow: hidden;
+  gap: 10px;
+}
+.center > div:nth-child(1),
+.center > div:nth-child(3) {
+  display: grid;
+  grid-template-rows: repeat(3, 1fr);
+  overflow: hidden;
+}
+.center1 {
+  display: grid;
+  grid-template-rows: 7fr 13fr;
+  overflow: hidden;
+}
+.center1 > div:nth-child(2) {
+  background: url('../img/bubbleBg.png') no-repeat center center; /*图标路径*/
+  background-size: 100% 100%;
+}
+.center1 > div:nth-child(3) {
+  background: url('../img/blueBig.png') no-repeat center center; /*图标路径*/
+  background-size: 100% 100%;
+}
+.center1 > div:nth-child(4) {
+  background: url('../img/blueSmall.png') no-repeat center center; /*图标路径*/
+  background-size: 100% 100%;
+}
+.center1 > div:nth-child(5) {
+  background: url('../img/greenSmall.png') no-repeat center center; /*图标路径*/
+  background-size: 100% 100%;
+}
+.center1 > div:nth-child(6) {
+  background: url('../img/greenBig.png') no-repeat center center; /*图标路径*/
+  background-size: 100% 100%;
+}
+.center2 {
+  display: grid;
+  grid-template-rows: 1fr 4fr;
+  overflow: hidden;
+}
+.center2 > div:nth-child(1) > div {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.center2 > div:nth-child(1) {
+  display: grid;
+  grid-template-rows: repeat(2, 1fr);
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+  overflow: hidden;
+}
+.center2 > div:nth-child(1) > div:nth-child(1) {
+  background: url('../img/centerTop1.png') no-repeat center left; /*图标路径*/
+  background-size: 140% 100%;
+  overflow: hidden;
+}
+.center2 > div:nth-child(1) > div:nth-child(2) {
+  background: url('../img/centerTop2.png') no-repeat center left; /*图标路径*/
+  background-size: 140% 100%;
+  overflow: hidden;
+}
+.center2 > div:nth-child(1) > div:nth-child(3) {
+  background: url('../img/centerTop3.png') no-repeat center left; /*图标路径*/
+  background-size: 140% 100%;
+  overflow: hidden;
+}
+.center2 > div:nth-child(1) > div:nth-child(4) {
+  background: url('../img/centerTop4.png') no-repeat center left; /*图标路径*/
+  background-size: 140% 100%;
+  overflow: hidden;
+}
+.bgTooltip {
+  overflow: hidden;
+  padding: 10% 15% !important;
+  margin: 0 !important;
+  width: 450px;
+  height: 250px;
+  color: #fff;
+  display: grid;
+  grid-template-rows: repeat(3, 1fr);   
+}
+.custom-tooltip-box {
+  padding: 0 !important;
+  border: none !important;
+  background-color: transparent !important;
+}
+.blueIcon{
+  font-size: 32px !important;
+}
+.blueIcon::before{
+  content: '●';
+  margin-right: 10px;
+  color: #40a9ff;
+}
 /* 公共css */
 /* 宽高纵横比 */
-.font28{
+.font28 {
   font-size: 28px;
 }
+.fb {
+  font-weight: bold !important;
+}
+.fn{
+  font-weight: normal !important;
+}
 .pointer {
   cursor: pointer;
 }
@@ -353,7 +524,6 @@ i {
 .overflow-y-auto {
   overflow-y: auto;
 }
-
 /* 定位 */
 .fixed {
   position: fixed;

investmentOld/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}

investmentOld/js/investHomeGroup.js

@@ -3942,7 +3942,7 @@ let app = new Vue({
       })
       myChart.setOption(option)
       tools.loopShowTooltip(myChart, option, {
-        nterval: 2000,
+        interval: 2000,
         loopSeries: true,
       })