大致实现就是这个效果，鼠标滑过的时候会显示该区域的一个信息，加上自定义的显示图标
有需要希望可以帮到各位
目录
一、在vue中引入Echarts
二、下载并引入china.json文件
三、准备html容器、css中给图表需要的宽高
四、完整代码
一、在vue中引入Echarts
这个可以看Echarts官方文档，按照步骤一步一步来就可以了
Echarts文档地址
https://echarts.apache.org/handbook/zh/basics/import/
//1.安装Echartsnpm install echarts --save//2.局部引入import * as echarts from 'echarts';//3. 基于准备好的dom，初始化echarts实例，此处我们也可以通过ref来获取dom//通常我们封装一个函数来获取dom和绘制Echarts然后在mounted这个钩子里去调用var myChart = echarts.init(document.getElementById('main'));//4. 绘制图表 myChart.setOption({});
二、下载并引入china.json文件
因为我们绘制的是中国地图，所以需要到china.json的数据,我们在组件中引入并使用
有需要的可以上我的资源去免费下载，
注意修改成自己的路径，此处echarts和china.json必须全部正确引入
import geoJson from '@/utils/china.json'import * as echarts from 'echarts';echarts.registerMap('china', geoJson)三、准备html容器、css中给图表需要的宽高
这里用到了elementui的布局，需要的自行引入
这部分大家就按照自己需要的宽高去设定就可以了
.managingPatientSize {width: 100%;height: 100%;// background-color: #111b41;color: #fff;.el-row {height: 100%;.el-col {height: 100%;position: relative;#china-map {height: 100%;}}}}四、完整代码
这里代码直接cv放在组件里引入就可以看到效果，数据都是死的，根据实际需要去改动就可以了
代码是什么意思看注释去修改。
这里我使用自定义png图片去绘制散点，就不能修改涟漪特效的颜色了，有会的兄弟可以评论交流一下
import geoJson from '@/utils/china.json'import * as echarts from 'echarts';echarts.registerMap('china', geoJson)export default {name: 'ChinaMap',data () {return {provinceInfo: [{name: "北京",oredrNum: 599,//订单数量goodsNum: 599,//货品数量},{name: "上海",oredrNum: 142,goodsNum: 599,},{name: "黑龙江",oredrNum: 44,goodsNum: 599,},{name: "深圳",oredrNum: 92,goodsNum: 599,},{name: "湖北",oredrNum: 810,goodsNum: 599,},{name: "四川",oredrNum: 453,goodsNum: 599,},{name: "新疆",oredrNum: 36,goodsNum: 31,},{name: "福建",oredrNum: 106,goodsNum: 30211111,},],}},methods: {drawCharts () {// 基于准备好的dom，初始化echarts实例var chinaMap = echarts.init(document.getElementById("china-map"));window.onresize = chinaMap.resize; // 窗口或框架被调整大小时执行chinaMap.resizechinaMap.setOption({// 进行相关配置tooltip: {// 鼠标移到图里面的浮动提示框backgroundColor: 'rgba(0,0,0,0.5)',//提示框背景色borderColor: 'rgba(0,0,0,0)',//边框夜色textStyle: {color: 'rgba(255, 255, 255, 1)'//文字颜色},//自定义提示框自动调用函数formatter: function (params) {let showname = params;return (`${showname.data ? showname.data.name : '暂无信息'}
订单总数:${showname.data ? showname.data.oredrNum : '暂无信息'}
货品数量:${showname.data ? showname.data.goodsNum : '暂无信息'}
`);}},dataRange: {show: false,min: 0,max: 1000,text: ["High", "Low"],realtime: true,calculable: true,color: ["#fd7b78"],},geo: {// 这个是重点配置区map: "china", // 表示中国地图// roam: true, //是否允许放大label: {normal: {show: false, // 是否显示对应地名textStyle: {color: "#fd7b88", //对应地名颜色},},},//点击变色select: {itemStyle: {areaColor: "#fd7b88", //点击之后的省份颜色},},itemStyle: {normal: {//正常状态下的地图背景色borderColor: "#fff",borderWidth: "0.5",color: new echarts.graphic.LinearGradient( // 渐变色0,0,1,0, // 渐变色的起止位置, 右/下/左/上[// offset 位置{ offset: 0.8, color: '#f2aca0' },{ offset: 0, color: '#fd7b78' }]),},emphasis: {areaColor: null,shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 20,//聚焦时候的阴影范围borderWidth: 0,shadowColor: "#f04b30",//聚焦时候的阴影颜色// 鼠标放上去地图区域背景颜色areaColor: '#fd7b78',//聚焦之后的颜色borderWidth: 0},},},series: [{type: "scatter",coordinateSystem: "geo", // 对应上方配置},{// name: "启动次数", // 浮动框的标题type: "map",geoIndex: 0,data: this.provinceInfo},],});// 地图打点-----var cityData = [{name: "北京",oredrNum: 599,//订单数量goodsNum: 599,//货品数量},{name: "天津",ename: "天津",},{name: "上海",oredrNum: 142,goodsNum: 599,},{name: "重庆",ename: "重庆",},{name: "河北",ename: "河北",},{name: "河南",ename: "河南",},{name: "云南",ename: "云南",},{name: "辽宁",ename: "辽宁",},{name: "黑龙江",oredrNum: 44,goodsNum: 599,},{name: "湖南",ename: "湖南",},{name: "安徽",ename: "安徽",},{name: "山东",ename: "山东",},{name: "新疆",oredrNum: 1,//订单数量goodsNum: 599,//货品数量ename: "新疆",},{name: "江苏",ename: "江苏",},{name: "浙江",value: 3,ename: "浙江",},{name: "江西",ename: "江西",},{name: "湖北",oredrNum: 810,goodsNum: 599,},{name: "广西",ename: "广西",},{name: "甘肃",ename: "甘肃",},{name: "山西",ename: "山西",},{name: "内蒙古",ename: "内蒙古",},{name: "陕西",ename: "陕西",},{name: "吉林",ename: "吉林",},{name: "福建",oredrNum: 106,goodsNum: 30211111,},{name: "贵州",ename: "贵州",},{name: "广东",value: 53,ename: "广东",},{name: "青海",ename: "青海",},{name: "西藏",ename: "西藏",},{name: "四川",oredrNum: 453,goodsNum: 599,},{name: "宁夏",ename: "宁夏",},{name: "海南",ename: "海南",},{name: "台湾",ename: "台湾",},{name: "香港",ename: "香港",},{name: "澳门",ename: "澳门",},];const geoCoordMap = {广东: [113.75, 23.04,],黑龙江: [128.34, 47.05],北京: [116.40, 40.40],新疆: [86.61, 40.79,],内蒙古: [112.17, 42.81],青海: [97.07, 35.62],西藏: [89.13, 30.66],}this.convertData = (data) => {var res = [];for (var i = 0; i {});myChart.setOption(option);window.onresize = () => {myChart.resize();}},},mounted () {this.drawCharts();}}.managingPatientSize {width: 100%;height: 100%;// background-color: #111b41;color: #fff;.el-row {height: 100%;.el-col {height: 100%;position: relative;#china-map {height: 100%;}}}}