效果图
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>
