溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“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地圖”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
