這篇文章主要為大家展示了“vue如何導(dǎo)入echarts地圖”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue如何導(dǎo)入echarts地圖”這篇文章吧。

成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供馬邊彝族網(wǎng)站建設(shè)、馬邊彝族做網(wǎng)站、馬邊彝族網(wǎng)站設(shè)計(jì)、馬邊彝族網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、馬邊彝族企業(yè)網(wǎng)站模板建站服務(wù)，十多年馬邊彝族做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

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

本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版、DELL G3電腦。

需求：顯示各省名字，滑過標(biāo)記地顯示接入數(shù)量，點(diǎn)擊標(biāo)記地 顯示系統(tǒng)數(shù)量已接入及能跳轉(zhuǎn)對(duì)應(yīng)頁面信息的入口；

配置：

1.安裝依賴

npm install echarts -S

2.全局引入main.js

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

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

import '../../../static/js/chinamap/china.js' // 引入中國地圖數(shù)據(jù)

使用：

完整實(shí)例代碼：

 


.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%;}
}

以上是“vue如何導(dǎo)入echarts地圖”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！