首页地图

src/pages/index/list/index.vue

@@ -83,7 +83,7 @@
                         <img src="@/assets/img/index/pro-bg1-1.png" alt="" class="bg1 wow fadeInDown" data-wow-delay="0.6s">
                         <img src="@/assets/img/index/pro-bg1-2.png" alt="" class="bg2 wow fadeInDown" data-wow-delay="0.7s">
                         <img src="@/assets/img/index/pro-bg1-3.png" alt="" class="bg3 wow fadeInDown" data-wow-delay="0.2s">
-                        <el-carousel class="carousel" ref="carousel" height="338px" :autoplay="false" arrow="never">
+                        <el-carousel class="carousel" ref="carousel" height="338px" autoplay :interval="5000" arrow="never">
                           <el-carousel-item>
                             <img src="@/assets/img/index/slide1.png" alt="">
                           </el-carousel-item>
@@ -136,7 +136,7 @@
                         <img src="@/assets/img/index/pro-bg1-1.png" alt="" class="bg1 wow fadeInDown" data-wow-delay="0.6s">
                         <img src="@/assets/img/index/pro-bg1-2.png" alt="" class="bg2 wow fadeInDown" data-wow-delay="0.7s">
                         <img src="@/assets/img/index/pro-bg1-4.png" alt="" class="bg3 wow fadeInDown" data-wow-delay="0.2s">
-                        <el-carousel class="carousel" ref="carousel1" height="338px" :autoplay="false" arrow="never">
+                        <el-carousel class="carousel" ref="carousel1" height="338px" autoplay :interval="5000" arrow="never">
                           <el-carousel-item>
                             <img src="@/assets/img/index/slide4.png" alt="">
                           </el-carousel-item>
@@ -177,6 +177,7 @@
             <h6 class="i-title">城市合伙人联盟</h6>
             <p class="en">ALLIANCE MAP</p>
             <p class="brief">共创、共享、共赢</p>
+            <div class="chart" id="map"></div>
           </div>
         </div>
         <!-- 合作客户 -->
@@ -262,6 +263,9 @@
 import Setting from '@/setting'
 import util from '@/libs/util'
 import WOW from 'wow.js'
+import * as echarts from 'echarts'
+import 'echarts/map/js/china.js'
+import chinaFull from './chinaFull.json'
 export default {
     name: 'index',
     data() {
@@ -271,7 +275,8 @@ export default {
         }
     },
     mounted() {
-        new WOW().init()
+      new WOW().init()
+      this.initMap()
     },
     methods: {
       // 轮播图翻页
@@ -290,7 +295,84 @@ export default {
       // 问卷调查
       toQues() {
         window.open('https://www.wjx.cn/vm/wB0RcMm.aspx')
-      }
+      },
+      // 中国地图
+      initMap() {
+        echarts.registerMap('china', chinaFull)
+        const chart = echarts.init(document.querySelector(`#map`))
+        chart.setOption({
+          // 提示框组件
+          tooltip: {
+            show: false
+          },
+          grid: {
+            y: 200
+          },
+          visualMap: {
+            show: false,
+          },
+          // defaultCenter: [ 117.283042, 31.86119 ],
+          geo: {
+            map: 'china',       
+            silent: false,       
+            itemStyle: {
+              color: '#0D336F', //地图颜色   
+              borderColor: '#5D7AA5',// 边框颜色
+              borderWidth : 1
+            },
+            label:{
+              color: '#fff', //文字颜色
+              show: false,
+              formatter: function(params) {
+                return params.name
+              },
+              rich: {
+              }
+            },
+            zoom : 1.1, //缩放
+            roam: true, //鼠标可拖动、缩放
+          },
+          series: [
+            {
+              emphasis: {
+                  show: false,
+                  focus: 'item',
+                  itemStyle:{
+                    color: '#fff'
+                  }
+                },
+                tooltip:{
+                  show: false,
+                  formatter: function(params) {
+                    return params.name + " " + params.data.quantity
+                  }
+                },
+                type: 'scatter',
+                coordinateSystem: 'geo',
+                symbolSize: 15,
+                symbolRotate: 10,
+                label: {
+                  show:true,
+                  normal: {
+                      formatter: function(params) {
+                        return params.name 
+                        // return params.name + " " + params.data.quantity + params.data.unit
+                      },
+                      position: 'right',
+                      show: true
+                  }
+                },
+              data:[
+                  {name:"武汉", value: [114.311582,30.598467], quantity: 55.5, unit: '吨'},
+                  {name:"广州", value: [113.23333, 23.16667], quantity: 12.5, unit: '吨'},
+                  {name:"深圳", value: [114.064552,22.548457], quantity: 13.4, unit: '吨'},
+                  {name:"成都", value: [104.06667, 30.66667], quantity: 568.2, unit: '吨'},
+                  {name:"合肥", value: [117.17,31.52], quantity: 876.2, unit: '吨'},
+              ]
+            }
+          ]
+        })
+      },
     }
 };
 </script>
@@ -514,7 +596,9 @@ export default {
       }
     }
     .product {
-      background: #fff url(../../../assets/img/index/pro-bg1.png) (right 828px)/auto no-repeat;
+      background: url(../../../assets/img/index/pro-bg1.png) (right 828px)/auto no-repeat,
+                  url(../../../assets/img/index/pro-bg8.png) (left bottom)/auto no-repeat;
+      background-color: #fff;
       .list{
         display: flex;
         margin: 40px 0 80px;
@@ -651,6 +735,9 @@ export default {
         color: #465779;
       }
     }
+    .chart {
+      height: 500px;
+    }
     .client-pic {
       display: flex;
       padding: 32px 55px 32px 32px;