一.实现效果
图片上面的水印是公司软件自带的
二.html块代码
<div class="source-map-panel" id="chinaMap" ref="mapRef"></div>三.主代码
this.myChart = this.$echarts.init(document.getElementById("chinaMap")); // 这里是为了获得容器所在位置
let options = {};
options.tooltip = getTooltip(this); //设置鼠标移动上去参数配置
options.geo = getGeo(this); //设置地图底层（实现3d效果）
options.series = getSeries(this); //设置地图数据
this.myChart.setOption(options);四.配置数据
toolTip配置js文件如下
import {toWan} from '@/utils/public.js'
export const getTooltip = (that) => {
return {
enterable: true, // 鼠标是否可进入提示框浮层中\
hideDelay: 200, // 浮层隐藏的延迟
confine: true,
position: function (point, params, dom, rect, size) {
// 提示框位置
let x = 0; // x坐标位置
let y = 0; // y坐标位置
// 当前鼠标位置
let pointX = point[0];
let pointY = point[1];
// 提示框大小
let boxWidth = size.contentSize[0];
let boxHeight = size.contentSize[1];
if (boxWidth > pointX) {
x = 5; // 自己定个x坐标值，以防出屏
y -= 15; // 防止点被覆盖住，可根据情况自行调节
} else {
// 左边放的下
x = pointX - boxWidth - 15;
}
if (boxHeight + 20 > pointY) {
y = pointY + 15;
} else if (boxHeight > pointY) {
y = 5;
} else {
// 上边放得下
y += pointY - boxHeight;
}
return [point[0] - boxWidth - 20, point[1] - 30];
},
backgroundColor: "rgba(255, 255, 255, 0.7)",
padding: [15, 15, 15, 15],
formatter: (params) => {
let sumaryAmount, sumaryCnt, userCnt;
var htmlStr = "";
if (that.mapList) {
let list = that.mapList;
let dataList = list.filter(item => {
return item.name === params.name //判断返回数据的name和实际散点的name相同
})
if (dataList.length > 0) {
sumaryAmount = dataList[0].amount;
sumaryCnt = dataList[0].count;
userCnt = dataList[0].traderCount;
htmlStr = `<div class="tooltip-style" style="position:relative;">
<span style="margin-bottom: 10px;color: #0081CC;font-size:20px;font-weight:600;padding-top: 0">${params.name}</span><br />
<div style="line-height:30px;margin-top:10px">
<span style="color: #333;font-size:14px">融资金额（万元）: ${sumaryAmount?sumaryAmount:''}</span><br />
<span style="color: #333;font-size:14px">融资笔数（笔）: ${sumaryCnt?sumaryCnt:''}</span><br />
<span style="color: #333;font-size:14px">融资笔数（人）: ${userCnt?userCnt:''}</span><br />
</div>
</div>`;
}
return htmlStr;
}
},
extraCssText: "box-shadow: 4px 6px 25px 0px rgba(163, 177, 190, 0.4), inset 0px 0px 2px 0px #FFFFFF; backdropFilter: blur(4px);border-radius:12px;width:auto;",
textStyle: {
fontSize: 16,
color: "#fff",
},
}
}
geo配置数据如下：
export const getGeo = (that) => {
//这里设置为地图的阴影
return [{ // 这个是重点 —— 这里设置为地图的阴影
map: 'china',
roam: false, // 禁止拖拽
silent: true, // 禁止hover效果
zoom: that.zoomSize, // 地图比例
center: [105.194115019531, 36.582111640625], // 地图中心位置， 此处的纬度与下面的center相差1度是形成阴影的距离，可自己随意调整
itemStyle: {
normal: {
borderColor: 'transparent',
areaColor: "rgb(1,42,170)",
},
},
regions: [{
name: "南海诸岛",
itemStyle: {
// 隐藏地图
normal: {
opacity: 0, // 为 0 时不绘制该图形
}
},
label: {
show: false // 隐藏文字
}
}],
}]
}
series配置如下：
export const getSeries = (that) => {
// 此处为真正的地图
let series = [{
name: "", // 浮动框的标题
type: "map",
map: "china",
zoom: that.zoomSize,
layoutSize: "100%",
emphasis: {
// 鼠标hover是否显示内容，
label: {
//用于显示地图文本内容
show: true,
textStyle: {
color: "#fff",
},
},
},
label: {
//这儿自定义图形样式
// 地图标注
normal: {
show: false, // 是否显示对应地名
textStyle: {
// color: "#fff",
},
},
},
center: [105.194115019531, 35.582111640625], // 设置地图中心
itemStyle: {
// 地图的样式
normal: {
borderColor: "#FFFFFF", // 省份边框颜色
areaColor: {
type: "linear",
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [{
offset: 0,
color: "rgb(93,170,242)", // 100% 处的颜色
},
{
offset: 1,
color: "rgb(2,128,241)", // 0% 处的颜色
},
],
global: false, // 缺省为 false
},
borderWidth: 1, // 省份边框宽度
// shadowColor: "rgba(100,255,238,0.5)", // 省份边框阴影
shadowColor: "rgba(255,255,255,0.5)", // 省份边框阴影
shadowBlur: 5, // 省份边框聚焦
},
emphasis: {
// 鼠标hover显示
show: false,
//areaColor: "#0D30D4",
areaColor: {
type: "linear",
x: 1,
y: 0,
x2: 0,
y2: 0,
colorStops: [{
offset: 0,
color: "rgb(243,135,36)", // 0% 处的颜色
},
{
offset: 1,
color: "rgb(218,172,113)", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
color: "#fff",
// textStyle: {
// color: "#fff",
// },
},
},
data: that.mapList,
}]
if (that.mapList && that.mapList.length > 0) {
that.mapList.forEach(item => {
item.itemStyle = {
// 单个区域的样式设置
color: "rgb(251, 189, 108)",
opacity: 1,
}
})
}
return series;
}
五.其他配置数据说明
1. zoomSize设置值为1.4
2.series数据格式为：[{name:'四川省',amount:'123456'},{name:'海南省,amount:'456'}]文章来源：https://www.toymoban.com/news/detail-507328.html
3.加上地图适配文章来源地址https://www.toymoban.com/news/detail-507328.html
mounted() {
window.addEventListener("resize", this.handleResize);
},
handleResize() {
// 地图自适应缩放
this.myChart.resize();
let domWidth =
document.body.clientWidth || document.documentElement.clientWidth;
if (domWidth > 1440) {
return {
"this.zoomSzie": 1.6,
};
} else {
return {
"this.zoomSzie": 1.2,
};
}
},
到了这里，关于vue下echarts的地图配置(3d悬浮效果)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
