導入方法：1、使用“npm install echarts -S”命令安裝echarts依賴；2、在“main.js”中全局引入echarts；3、在需要地圖的頁面中使用import語句引入“china.js”文件，添加相關代碼即可。

本教程操作環境：windows7系統、vue2.9.6版、DELL G3電腦。

需求：顯示各省名字，滑過標記地顯示接入數量，點擊標記地 顯示系統數量已接入及能跳轉對應頁面信息的入口；

配置：

1.安裝依賴

npm install echarts -S

2.全局引入main.js

// 引入echarts import echarts from 'echarts'   Vue.prototype.$echarts = echarts

3.在需要地圖的頁面引入 地圖 china.js 查看官方文檔 ，我自己保存的 china.js 點擊下載（提取碼 4rxi ）

import '../../../static/js/chinamap/china.js' // 引入中國地圖數據

使用：

完整實例代碼：

<template>   <div class="Page">     <div id="myChartChina" :style="{width: '100%', height: '710px'}"></div>     <div class="projectList">       <div>         <p> <i class="el-icon-share"></i> 客戶數量</p>         <div class="inputList">3600</div>       </div>       <div>         <p> <i class="el-icon-share"></i> 租戶數量</p>         <div class="inputList">1500</div>       </div>       <div>         <p> <i class="el-icon-share"></i> 控制系統數量</p>         <div class="inputList">20800</div>       </div>       <div>         <p> <i class="el-icon-share"></i> 接入系統數量</p>         <div class="inputList">3600</div>       </div>     </div>         <div id="box" v-if="ifbox">       <div class="box_left">         <div class="box_title">{{TipsList.name}}</div>         <div class="box_list">           <p>{{TipsList.value[2]}}</p>           <p>系統數量</p>         </div>         <div class="box_list box_lists">           <p>{{TipsList.num[2]}}</p>           <p>已接入</p>         </div>         <div></div>       </div>       <div class="box_right" @click="toClient(TipsList.id[2])">         <i class="el-icon-arrow-right"></i>       </div>     </div>       <div class="box_Tips">       <p>提示：滾動鼠標滾輪控制地圖縮放</p>     </div>     </div>    </template>   <script> import '../../../static/js/chinamap/china.js' // 引入中國地圖數據 export default {   data() {     return {       ifbox:false,       TipsList:[],     }   },   mounted() {     this.ChinaMap();   },   methods: {     //點擊模擬數據右箭頭跳轉外頁面，     toClient(id){       this.$router.push({         path: "/Client",         query: { lesseeCompanyId: id }       });     },     ChinaMap(){       var that=this;               //模擬數據       let data = [           {name: '海門', value: 90 ,num: 5,id:8},           {name: '鄂爾多斯', value: 102 , num: 15, id:16},           {name: '齊齊哈爾', value: 140, num: 30 ,id:20}       ];       let geoCoordMap = {           '海門':[121.15,31.89],           '鄂爾多斯':[109.781327,39.608266],           '齊齊哈爾':[123.97,47.33]       };         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),                     num: geoCoord.concat(data[i].num),                     id: geoCoord.concat(data[i].id)                   });               }           }           return res;       };           let myChartChina = this.$echarts.init(document.getElementById('myChartChina')) //這里是為了獲得容器所在位置             window.onresize = myChartChina.resize;         myChartChina.setOption({ // 進行相關配置           backgroundColor: '#1c2431',//地圖背景色           geo: { // 這個是重點配置區             map: 'china', // 表示中國地圖             label: {               normal:{                 show: true, // 是否顯示對應地名                 textStyle: { //字體顏色                   color: '#797979'                 }               },               emphasis: {                 show: false,                 textStyle: {                   color: '#fff'                 }               }             },             roam: true,             itemStyle: {               normal: {                 borderWidth: 1, // 地圖邊框寬度                 borderColor: '#014888', // 地圖邊框顏色                 areaColor: '#026295' // 地圖顏色               },               emphasis: {//選中省份的顏色                 areaColor: '#026295',                 shadowOffsetX: 0,                 shadowOffsetY: 0,                 shadowBlur: 0,                 borderWidth: 1,                 shadowColor: '#fff'               }             }           },           //滑動顯示數據           tooltip: {               trigger: 'item',               formatter: function(params) {                   return params.name + ' 已接入: ' + params.data.num[2];               }           },           series: [{               name: '散點',               type: 'scatter',               coordinateSystem: 'geo',               color:"#e1ebe3",//點的顏色               data: convertData(data),               symbolSize: 25,//點的大小               symbol:"pin",//點的樣式               cursor:"pointer",//鼠標放上去的效果               label: {                 normal: {//默認展示                     show: false                 },                 emphasis: {//滑過展示                     show: false                 }               },               itemStyle: {                 emphasis: {                   borderColor: '#5c8f6e',                   borderWidth: 5                 }               }             },               {               type: 'map',               map: 'china',               geoIndex: 0,               aspectScale: 0.75,               tooltip: {                   show: false               }             },                          ],         })         // if (myChartChina && typeof myChartChina === "object") {         //     myChartChina.setOption(myChartChina, true);         // }         myChartChina.on('click', function (params) { //點擊事件           if (params.componentType === 'series') {             if(params.data){               that.TipsList=params.data               that.ifbox=true               that.boxPosition()               }else{               that.ifbox=false             }           }         });     },     //點擊地點顯示對應位置數據     boxPosition(){       var e = event || window.event;       var x=e.clientX+145+"px",           y=e.clientY+5+"px";       clearTimeout(t)       var t = setTimeout(function (){         $('#box').css('top',y),         $('#box').css('left',x)       }, 100);       t     },     }    } </script> <style scoped> .Page{   position: relative; } .projectList{   position: absolute;   bottom:0;   left:0;   z-index: 100;   width: 280px;   height: 150px;   background: linear-gradient(#1d4978, #081630);   display: flex;   flex-wrap:wrap;   justify-content:space-around;   align-items:center;   } .projectList>div{   width: 120px;   height: 55px; } .projectList>div>p{   color: #fff;   font-size: 16px; } .projectList>div>p>i{   color: #12baf9; } .inputList{   width: 120px;   height: 30px;   background: #1a3c7b;   border: 2px solid #0f5390;   margin-top:7px;   border-radius: 5px;   letter-spacing:5px;   color: #65ddd3;   line-height: 26px;   text-indent: 1em; }     #box{   width:280px;   height: 80px;   background: #026295;   box-shadow: 0 0 10px #008b9a;   border: 1px solid #008b9a;   position: absolute;   top:10px;   left: 50%;   margin-left: -140px;   color: #fff;   text-align: center; } .box_left{   width: 239px;   height: 80px;   float: left; } .box_title{   width: 238px;   height: 30px;   border-bottom: 1px solid #008b9a;   line-height: 30px; } .box_list{   width: 119px;   height: 50px;   float: left; } .box_lists{   border-left: 1px solid #008b9a; } .box_list>p:nth-child(1){   font-size: 20px;   line-height: 28px;   color: yellow; } .box_lists>p:nth-child(1){   color: rgb(111, 185, 234); }   .box_right{   width: 39px;   height: 80px;   border-left: 1px solid #008b9a;   float: left; } .box_right i{   line-height: 80px; }       .dilog {   /* width: 180px; */   height: 80px;   background: black;   position: absolute;   border-radius: 5px;   border: solid 1px rgb(0, 139, 154);   z-index: 11111;   display: flex;   box-shadow: 0 0 10px rgb(0, 139, 154); } .dilog_title {   text-align: center;   height: 30px;   border-bottom: solid 1px grey;   line-height: 30px;   color: white; } .box_Tips{   width:96%;   height: 20px;   position: absolute;   bottom: 5px;   right: 5px;   font-size: 14px;   color: #fff; } .box_Tips>p{   white-space: nowrap;   position: absolute;   top: 0px;   left: 0;   animation:mymove 30s infinite; } @keyframes mymove { from {left: 70%;} to {left: 0%;} } </style>

完成后的圖片：樣式更改可查看官方文檔自行修改；