Home Explore Help
Sign In
kingdee_large_screen
/
pc_kingdee_large_screen
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

update for shanxi mapChart

liyongyong 1 year ago
parent
81fd267814
commit
51dfda3c2b
3 changed files with 607 additions and 159 deletions
Unified View Show Diff Stats
  1. 147 143
      investment/investHome.html
  2. 453 16
      investment/js/investHome.js
  3. 7 0
      investment/styles/investHome.css

+ 147 - 143
investment/investHome.html
View File 

@@ -18,162 +18,166 @@
 
   </head>
 
   </head>
 
   <body>
 
   <body>
 
     <div id="app">
 
     <div id="app">
 
-      <header class="my-header">投资管理数智中心</header>
 
-      <div class="main">
 
-        <div class="left">
 
-          <dv-border-box-8 :dur="10">
 
-            <div class="my-panel">
 
-              <div class="panel-title">
 
-                <span class="text">投资关键指标</span>
 
-                <el-date-picker v-model="year" size="small" type="year" class="right-opr"></el-date-picker>
 
-              </div>
 
-              <div class="content">
 
-                <div class="boxs">
 
-                  <div>
 
-                    <p>
 
-                      <span class="name">投资总额</span>
 
-                      <i class="el-icon-more"></i>
 
-                    </p>
 
-                    <p>
 
-                      <i><span class="num">825.60</span>亿</i>
 
-                      <span class="change"><img src="./images/down.png" /> 12.1%</span>
 
-                    </p>
 
-                  </div>
 
-                  <div>
 
-                    <p>
 
-                      <span class="name">项目总数</span>
 
-                      <i class="el-icon-more"></i>
 
-                    </p>
 
-                    <p>
 
-                      <i><span class="num">654</span>个</i>
 
-                      <span class="change"><img src="./images/down.png" /> 12.1%</span>
 
-                    </p>
 
-                  </div>
 
-                  <div>
 
-                    <p>
 
-                      <span class="name">固定资产</span>
 
-                      <i class="el-icon-more"></i>
 
-                    </p>
 
-                    <p>
 
-                      <i><span class="num">825.60</span>亿</i>
 
-                      <span class="change up"><img src="./images/up.png" /> 12.1%</span>
 
-                    </p>
 
-                  </div>
 
-                  <div>
 
-                    <p>
 
-                      <span class="name">股权投资</span>
 
-                      <i class="el-icon-more"></i>
 
-                    </p>
 
-                    <p>
 
-                      <i><span class="num">325.00</span>亿</i>
 
-                      <span class="change"><img src="./images/down.png" /> 12.1%</span>
 
-                    </p>
 
+      <!-- <dv-full-screen-container> -->
 
+        <header class="my-header">投资管理数智中心</header>
 
+        <div class="main">
 
+          <div class="left">
 
+            <dv-border-box-8 :dur="10">
 
+              <div class="my-panel">
 
+                <div class="panel-title">
 
+                  <span class="text">投资关键指标</span>
 
+                  <el-date-picker v-model="year" size="small" type="year" class="right-opr"></el-date-picker>
 
+                </div>
 
+                <div class="content">
 
+                  <div class="boxs">
 
+                    <div>
 
+                      <p>
 
+                        <span class="name">投资总额</span>
 
+                        <i class="el-icon-more"></i>
 
+                      </p>
 
+                      <p>
 
+                        <i><span class="num">825.60</span>亿</i>
 
+                        <span class="change"><img src="./images/down.png" /> 12.1%</span>
 
+                      </p>
 
+                    </div>
 
+                    <div>
 
+                      <p>
 
+                        <span class="name">项目总数</span>
 
+                        <i class="el-icon-more"></i>
 
+                      </p>
 
+                      <p>
 
+                        <i><span class="num">654</span>个</i>
 
+                        <span class="change"><img src="./images/down.png" /> 12.1%</span>
 
+                      </p>
 
+                    </div>
 
+                    <div>
 
+                      <p>
 
+                        <span class="name">固定资产</span>
 
+                        <i class="el-icon-more"></i>
 
+                      </p>
 
+                      <p>
 
+                        <i><span class="num">825.60</span>亿</i>
 
+                        <span class="change up"><img src="./images/up.png" /> 12.1%</span>
 
+                      </p>
 
+                    </div>
 
+                    <div>
 
+                      <p>
 
+                        <span class="name">股权投资</span>
 
+                        <i class="el-icon-more"></i>
 
+                      </p>
 
+                      <p>
 
+                        <i><span class="num">325.00</span>亿</i>
 
+                        <span class="change"><img src="./images/down.png" /> 12.1%</span>
 
+                      </p>
 
+                    </div>
 
                   </div>
 
                   </div>
 
                 </div>
 
                 </div>
 
               </div>
 
               </div>
 
-            </div>
 
-          </dv-border-box-8>
 
-          <dv-border-box-8 :dur="11">
 
-            <div class="my-panel">
 
-              <div class="panel-title">
 
-                <span class="text">投资收益情况</span>
 
+            </dv-border-box-8>
 
+            <dv-border-box-8 :dur="11">
 
+              <div class="my-panel">
 
+                <div class="panel-title">
 
+                  <span class="text">投资收益情况</span>
 
+                </div>
 
+                <div ref="echartL1" class="content"></div>
 
               </div>
 
               </div>
 
-              <div ref="echartL1" class="content"></div>
 
-            </div>
 
-          </dv-border-box-8>
 
-          <dv-border-box-8 :dur="12">
 
-            <div class="my-panel">
 
-              <div class="panel-title">
 
-                <span class="text">投资执行情况</span>
 
+            </dv-border-box-8>
 
+            <dv-border-box-8 :dur="12">
 
+              <div class="my-panel">
 
+                <div class="panel-title">
 
+                  <span class="text">投资执行情况</span>
 
+                </div>
 
+                <div ref="echartL2" class="content"></div>
 
               </div>
 
               </div>
 
-              <div ref="echartL2" class="content"></div>
 
-            </div>
 
-          </dv-border-box-8>
 
-        </div>
 
-        <div class="center">
 
-          <div class="top">
 
-            <div class="box">
 
-              <img src="./images/center-icon1.png"/>
 
-              <div>
 
-                <p>总投资额：</p>
 
-                <p><span style="color: #2efff3">25.12</span>亿</p>
 
+            </dv-border-box-8>
 
+          </div>
 
+          <div class="center">
 
+            <div class="top">
 
+              <div class="box">
 
+                <img src="./images/center-icon1.png"/>
 
+                <div>
 
+                  <p>总投资额：</p>
 
+                  <p><span style="color: #2efff3">25.12</span>亿</p>
 
+                </div>
 
               </div>
 
               </div>
 
-            </div>
 
-            <div class="box">
 
-              <img src="./images/center-icon2.png"/>
 
-              <div>
 
-                <p>固定资产项目数：</p>
 
-                <p><span style="color: #efe102">100</span>个</p>
 
+              <div class="box">
 
+                <img src="./images/center-icon2.png"/>
 
+                <div>
 
+                  <p>固定资产项目数：</p>
 
+                  <p><span style="color: #efe102">100</span>个</p>
 
+                </div>
 
               </div>
 
               </div>
 
-            </div>
 
-            <div class="box">
 
-              <img src="./images/center-icon3.png"/>
 
-              <div>
 
-                <p>股权项目数：</p>
 
-                <p><span style="color: #37ec66">16</span>个</p>
 
+              <div class="box">
 
+                <img src="./images/center-icon3.png"/>
 
+                <div>
 
+                  <p>股权项目数：</p>
 
+                  <p><span style="color: #37ec66">16</span>个</p>
 
+                </div>
 
               </div>
 
               </div>
 
             </div>
 
             </div>
 
-          </div>
 
-          <div class="map-box"></div>
 
-        </div>
 
-        <div class="right">
 
-          <dv-border-box-8 :dur="10">
 
-            <div class="my-panel">
 
-              <div class="panel-title">
 
-                <span class="text">投资产业分布</span>
 
-              </div>
 
-              <div ref="echartR1" class="content"></div>
 
+            <div class="map-box" style="height: 86%;padding-top: 5%;">
 
+              <div ref="echarts-map" style="height: 100%;"></div>
 
             </div>
 
             </div>
 
-          </dv-border-box-8>
 
-          <dv-border-box-8 :dur="11">
 
-            <div class="my-panel">
 
-              <div class="panel-title">
 
-                <span class="text">投资额度分析</span>
 
+          </div>
 
+          <div class="right">
 
+            <dv-border-box-8 :dur="10">
 
+              <div class="my-panel">
 
+                <div class="panel-title">
 
+                  <span class="text">投资产业分布</span>
 
+                </div>
 
+                <div ref="echartR1" class="content"></div>
 
               </div>
 
               </div>
 
-              <ul class="list content">
 
-                <li class="list-item">
 
-                  <i>NO.1</i>
 
-                  <div class="flex1">
 
-                    <p>山西焦煤</p>
 
-                    <el-progress percentage="80" stroke-width="10" define-back-color="#005094" text-color="#43FF6B"></el-progress>
 
-                  </div>
 
-                </li>
 
-                <li class="list-item">
 
-                  <i>NO.1</i>
 
-                  <div class="flex1">
 
-                    <p>晋能控股</p>
 
-                    <el-progress percentage="70" stroke-width="10"></el-progress>
 
-                  </div>
 
-                </li>
 
-                <li class="list-item">
 
-                  <i>NO.1</i>
 
-                  <div class="flex1">
 
-                    <p>华阳新材</p>
 
-                    <el-progress percentage="60" stroke-width="10"></el-progress>
 
-                  </div>
 
-                </li>
 
-                <li class="list-item">
 
-                  <i>NO.1</i>
 
-                  <div class="flex1">
 
-                    <p>陆港国际</p>
 
-                    <el-progress percentage="50" stroke-width="10"></el-progress>
 
-                  </div>
 
-                </li>
 
-              </ul>
 
-            </div>
 
-          </dv-border-box-8>
 
-          <dv-border-box-8 :dur="12"
 
-            ><div class="my-panel">
 
-              <div class="panel-title">
 
-                <span class="text">重点项目监控</span>
 
+            </dv-border-box-8>
 
+            <dv-border-box-8 :dur="11">
 
+              <div class="my-panel">
 
+                <div class="panel-title">
 
+                  <span class="text">投资额度分析</span>
 
+                </div>
 
+                <ul class="list content">
 
+                  <li class="list-item">
 
+                    <i>NO.1</i>
 
+                    <div class="flex1">
 
+                      <p>山西焦煤</p>
 
+                      <el-progress percentage="80" stroke-width="10" define-back-color="#005094" text-color="#43FF6B"></el-progress>
 
+                    </div>
 
+                  </li>
 
+                  <li class="list-item">
 
+                    <i>NO.1</i>
 
+                    <div class="flex1">
 
+                      <p>晋能控股</p>
 
+                      <el-progress percentage="70" stroke-width="10"></el-progress>
 
+                    </div>
 
+                  </li>
 
+                  <li class="list-item">
 
+                    <i>NO.1</i>
 
+                    <div class="flex1">
 
+                      <p>华阳新材</p>
 
+                      <el-progress percentage="60" stroke-width="10"></el-progress>
 
+                    </div>
 
+                  </li>
 
+                  <li class="list-item">
 
+                    <i>NO.1</i>
 
+                    <div class="flex1">
 
+                      <p>陆港国际</p>
 
+                      <el-progress percentage="50" stroke-width="10"></el-progress>
 
+                    </div>
 
+                  </li>
 
+                </ul>
 
               </div>
 
               </div>
 
-              <dv-scroll-board :config="storageRecordConfig" class="content" /></div
 
-          ></dv-border-box-8>
 
+            </dv-border-box-8>
 
+            <dv-border-box-8 :dur="12"
 
+              ><div class="my-panel">
 
+                <div class="panel-title">
 
+                  <span class="text">重点项目监控</span>
 
+                </div>
 
+                <dv-scroll-board :config="storageRecordConfig" class="content" /></div
 
+            ></dv-border-box-8>
 
+          </div>
 
+        </div>
 
+        <div class="footer">
 
+          <a class="item" v-for="(item,index) in companyList" :key="index">{{item.name}}</a>
 
         </div>
 
         </div>
 
-      </div>
 
-      <div class="footer">
 
-        <a class="item" v-for="(item,index) in companyList" :key="index">{{item.name}}</a>
 
-      </div>
 
+      <!-- </dv-full-screen-container> -->
 
     </div>
 
     </div>
 
     <script src="./js/investHome.js"></script>
 
     <script src="./js/investHome.js"></script>
 
   </body>
 
   </body>

+ 453 - 16
investment/js/investHome.js
View File 

@@ -3,6 +3,8 @@ let app = new Vue({
 
   data() {
 
   data() {
 
     return {
 
     return {
 
       year: '2022',
 
       year: '2022',
 
+      mapName: 'shanxi',
 
+      geoCoordMap: {},
 
       config1: {
 
       config1: {
 
         number: [100],
 
         number: [100],
 
         content: '{nt}个',
 
         content: '{nt}个',
 
@@ -68,8 +70,443 @@ let app = new Vue({
 
     this.initChartL1()
 
     this.initChartL1()
 
     this.initChartL2()
 
     this.initChartL2()
 
     this.initChartR1()
 
     this.initChartR1()
 
+    this.initChinaChart()
 
   },
 
   },
 
   methods: {
 
   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>21.455亿</span></p>
 
+                <p>当前阶段：<span>可论证阶段</span></p>
 
+                <p>时间节点：<span>2021.10-2022.10</span></p>
 
+            </div>`
 
+            return tipHtml
 
+          },
 
+        },
 
+        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: '#54c5e0',
 
+              shadowOffsetX: 10,
 
+              shadowOffsetY: 5,
 
+              shadowBlur: 3,
 
+            },
 
+            emphasis: {
 
+              areaColor: '#0b0098',
 
+              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: false, // 存在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: 1,
 
+          },
 
+          {
 
+            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() {
 
     initChartL1() {
 
       let myChart = echarts.init(this.$refs['echartL1'])
 
       let myChart = echarts.init(this.$refs['echartL1'])
 
       let option = {
 
       let option = {
 
@@ -121,8 +558,8 @@ let app = new Vue({
 
             axisLine: {
 
             axisLine: {
 
               show: true,
 
               show: true,
 
               lineStyle: {
 
               lineStyle: {
 
-                color: '#3D7495'
 
-              }
 
+                color: '#3D7495',
 
+              },
 
             },
 
             },
 
             axisLabel: {
 
             axisLabel: {
 
               show: true,
 
               show: true,
 
@@ -130,7 +567,7 @@ let app = new Vue({
 
                 color: 'rgba(250,250,250,0.6)',
 
                 color: 'rgba(250,250,250,0.6)',
 
               },
 
               },
 
             },
 
             },
 
-          }
 
+          },
 
         ],
 
         ],
 
         series: [
 
         series: [
 
           {
 
           {
 
@@ -233,8 +670,8 @@ let app = new Vue({
 
             axisLine: {
 
             axisLine: {
 
               show: true,
 
               show: true,
 
               lineStyle: {
 
               lineStyle: {
 
-                color: '#3D7495'
 
-              }
 
+                color: '#3D7495',
 
+              },
 
             },
 
             },
 
             axisLabel: {
 
             axisLabel: {
 
               show: true,
 
               show: true,
 
@@ -293,15 +730,15 @@ let app = new Vue({
 
       let myChart = echarts.init(this.$refs['echartR1'])
 
       let myChart = echarts.init(this.$refs['echartR1'])
 
       let option = {
 
       let option = {
 
         tooltip: {
 
         tooltip: {
 
-          trigger: 'item'
 
+          trigger: 'item',
 
         },
 
         },
 
         legend: {
 
         legend: {
 
           top: 'center',
 
           top: 'center',
 
           orient: 'vertical',
 
           orient: 'vertical',
 
           right: '2%',
 
           right: '2%',
 
           textStyle: {
 
           textStyle: {
 
-            color: '#9DB9EB'
 
-          }
 
+            color: '#9DB9EB',
 
+          },
 
         },
 
         },
 
         series: [
 
         series: [
 
           {
 
           {
 
@@ -310,19 +747,19 @@ let app = new Vue({
 
             radius: ['55%', '80%'],
 
             radius: ['55%', '80%'],
 
             labelLine: {
 
             labelLine: {
 
               normal: {
 
               normal: {
 
-                  lineStyle: {
 
-                    width: 1
 
-                  }
 
-              }
 
-          },
 
+                lineStyle: {
 
+                  width: 1,
 
+                },
 
+              },
 
+            },
 
             data: [
 
             data: [
 
               { value: 1048, name: '煤炭' },
 
               { value: 1048, name: '煤炭' },
 
               { value: 735, name: '火电' },
 
               { value: 735, name: '火电' },
 
               { value: 580, name: '焦化' },
 
               { value: 580, name: '焦化' },
 
               { value: 484, name: '风电' },
 
               { value: 484, name: '风电' },
 
-            ]
 
-          }
 
-        ]
 
+            ],
 
+          },
 
+        ],
 
       }
 
       }
 
       myChart.setOption(option)
 
       myChart.setOption(option)
 
     },
 
     },

+ 7 - 0
investment/styles/investHome.css
View File 

@@ -258,3 +258,10 @@ a {
 
   border-radius: 8px;
 
   border-radius: 8px;
 
   margin-right: 15px;
 
   margin-right: 15px;
 
 }
 
 }
 
+.tooltip-cont p {
 
+  line-height: 1.8;
 
+  color: #f3f3f3;
 
+}
 
+.tooltip-cont span{
 
+  color: #15F7FF;
 
+}