效果图
1. 引入echarts?
npm install echarts --save
2.在main.js
//?引入echarts
import?echarts?from?'echarts'
Vue.prototype.$echarts?=?echarts
3.在需要引入地图的页面
//?引入基本模板
let?echarts?=?require('echarts/lib/echarts')
import?'@/assets/js/china.js'?//?引入中国地图数据
引入的china.js代码在这里拿? https://blog.csdn.net/qq_42221334/article/details/95493484
4.全部代码
<template>
??<div?class="post-new">
????<div?class="map-btn">
??????<el-button?class="btn"?type="primary"?size="medium">今年项目</el-button>
??????<el-button?class="btn"?type="primary"?size="medium">全部</el-button>
??????<div?class="year-select">
????????<span>其他年份?:?</span>
??????????<el-date-picker
??????????v-model="value3"
??????????@change="selectChange"
??????????type="year"
??????????placeholder="选择年">
????????</el-date-picker>
??????</div>
??????<el-button?type="primary"?class="btn"?size="medium">十亿以上项目</el-button>
??????<el-button?type="danger"?class="btn"?size="medium">十亿以下项目</el-button>
????</div>
????<div?class="Page">
??????<div?id="myChartChina"?ref="myEchart"?:style="{width:?'100%',?height:?'710px'}"></div>
?????????<div?id="box"?v-if="ifbox">
??????????<div?class="box_left">
????????????<div?class="box_title">xxx智慧工地项目?<i?class="el-icon-close?close-box"?@click="closeBox"></i></div>
????????????<div>
??????????????<div>项目详情</div>
??????????????<div>项目名称:</div>
??????????????<div>项目编号:</div>
??????????????<div>项目概述:</div>
??????????????<div>项目状态:</div>
??????????????<div>工地项目管理系统:?<el-button?type="primary"?plain?class="btn"?size="mini">点击进入</el-button></div>
??????????????<div>项目效果图集:?<el-button?type="primary"?plain?class="btn"?size="mini">点击进入</el-button></div>
????????????</div>
??????????</div>
??????</div>
??????<!--?<div?class="box_Tips">
????????<p>提示：滚动鼠标滚轮控制地图缩放</p>
??????</div>?-->
??</div>
??</div>
</template>
<script>
//?引入基本模板
let?echarts?=?require('echarts/lib/echarts')
import?'@/assets/js/china.js'?//?引入中国地图数据
export?default?{
??name:?"projectMap",
??components:?{},
??data()?{
????return?{
??????selectVal1:"",
??????ifbox:false,
??????TipsList:[],
??????value3:''
????};
??},
??computed:?{
??},
??watch:?{},
??created()?{},
??mounted()?{
????this.$nextTick(()=>{
??????this.ChinaMap();
????})
??},
??methods:?{
????selectChange(e){
??????console.log(e)
????},
????closeBox(){
??????this.ifbox?=?false
????},
????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),?
//一定要有value这个字段,?写法一定要geoCoord.concat(data[i].itemId),
????????????????????num:?geoCoord.concat(data[i].num),
????????????????????id:?geoCoord.concat(data[i].id)
??????????????????});
??????????????}
??????????}
??????????return?res;
??????};
??????let?myChartChina?=?echarts.init(document.getElementById('myChartChina'))?//这里是为了获得容器所在位置????
????????window.onresize?=?myChartChina.resize;
????????myChartChina.setOption({?//?进行相关配置
??????????backgroundColor:?'#fff',//地图背景色
??????????geo:?{?//?这个是重点配置区
????????????map:?'china',?//?表示中国地图
????????????label:?{
??????????????normal:{
????????????????show:?true,?//?是否显示对应地名
????????????????textStyle:?{?//字体颜色
??????????????????color:?'#797979'
????????????????}
??????????????},
??????????????emphasis:?{
????????????????show:?false,
????????????????textStyle:?{
??????????????????color:?'#fff'
????????????????}
??????????????}
????????????},
????????????roam:?true,
????????????itemStyle:?{
??????????????normal:?{
????????????????borderWidth:?1,?//?地图边框宽度
????????????????borderColor:?'#474646',?//?地图边框颜色
????????????????areaColor:?'#fff'?//?地图颜色
??????????????},
??????????????emphasis:?{//选中省份的颜色
????????????????areaColor:?'#CCEBEB',
????????????????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:function(params){
??????????????//???var?colorlist?=?['#F56C6C','#409EFF'];
??????????????//???console.log(params)
??????????????//???console.log(params.dataIndex)
??????????????//???return?colorlist[0];
??????????????//?},//点的颜色
??????????????data:?convertData(data),
??????????????symbolSize:?25,//点的大小
??????????????symbol:"pin",//点的样式
??????????????cursor:"pointer",//鼠标放上去的效果
??????????????label:?{
????????????????normal:?{//默认展示
????????????????????show:?false
????????????????},
????????????????emphasis:?{//滑过展示
????????????????????show:?false
????????????????}
??????????????},
??????????????itemStyle:?{
?????????????????color:function(params){
??????????????????var?colorlist?=?['#F56C6C','#409EFF'];
??????????????????console.log(params)
??????????????????console.log(params.dataIndex)?//这里判断颜色
??????????????????return?colorlist[0];
????????????????},//点的颜色
????????????????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-233+"px"
??????var?y?=?e.clientY-510+"px"
??????clearTimeout(t)
??????var?t?=?setTimeout(function?(){
????????document.getElementById('box').style.top?=?y
????????document.getElementById('box').style.left?=?x?
??????},?50);
??????t
????},
??},
};
</script>
<style?lang="scss"?scoped>
??.map-btn{
????margin:?50px?auto?70px;
????text-align:?center;
????.btn{
??????margin:?0?10px;
????}
????.year-select{
??????display:?inline-block;
??????margin:?0?30px;
????}
??}
??::v-deep{
??}
??.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:270px;
??height:?240px;
??line-height:?29px;
??font-size:?14px;
??padding:?5px?15px;
??background:?#fff;
??//?color:?#081630;
??//?background:?#026295;
??box-shadow:?0?0?10px?#3d4141;
??position:?absolute;
??top:10px;
??left:?50%;
??margin-left:?-140px;
}
.box_left{
??width:?239px;
??height:?80px;
??float:?left;
}
.box_title{
??width:?238px;
??height:?30px;
??border-bottom:?1px?solid?#2a2c2c;
??line-height:?30px;
}
.close-box{
??float:?right;
??font-size:?15px;
??margin:?4px;
}
.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>