vue如何導入echarts地圖

這篇文章主要為大家展示了“vue如何導入echarts地圖”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“vue如何導入echarts地圖”這篇文章吧。

導入方法：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>

以上是“vue如何導入echarts地圖”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！