首先跟大家声明哦：不必专门去echarts上面找特点地点的地图，又费神又费力
我们可以直接下载对应地方的json文件（下载链接：免费下载实时更新的geoJson数据、行政区划边界数据、区划边界坐标集合__HashTang），然后就可以得到地图了。
（.json文件和.geoJson文件我在使用当中没有发现什么区别，echarts都可以使用）
需求：在vue3项目里面引入echarts的地图，鼠标放在每一块上面可以有效果，大概是这个样子
一 echarts官网
在这里给大家附上echarts连接，这里面的echarts图很多，
makeapie echarts社区图表可视化案例
https://www.makeapie.cn/echarts大家就会看到很多的地图，多打开几个之后，就会发现，他的配置大致都是
（地图的json文件+option）
所以只需要挑选到自己喜欢的样子之后，直接去下载对应地方的json文件就可以
ps：不需要在csdn里面付费下载哦家人们，我给的连接就可以下载 .geoJson格式的文件也是可以用的
地图的JSON文件一替换，就可以得到自己想要地方的地图了
二 echarts地图里面各个地方地图的json文件下载地址
三 echarts本地运行
我们可以在echarts官网上面下载html的示例，先在本地运行一下看看效果
接下来教一下大家怎么运行
首先先下载下来一个案例，这个是免费的哦
（下面是一个小案例，不想下载的可以直接使用这个案例哦）
<!--
🚨🚨温馨提示🚨🚨
下面代码是程序自动生成，可能存在个别无法运行，如果无法运行，请调整下echarts版本，或者自行浏览器查看报错信息进行修复；
下面代码分为 echarts框架代码这个代码主要用于能运行起来echarts，还有就是核心代码（用🚨🚨非常重要🚨🚨进行标注了），核心代码主要用于显示案例效果
如果有问题请打开社区网站 https://www.makeapie.cn 添加右上角微信群/qq群进行询问
🚨🚨Tips🚨🚨：
不要项目中使用社区链接资源，如https://www.makeapie.cn/dep/echarts/map/js/china.js，请务必下载本地后使用，因为社区地址会不定期更换，可能会导致你们项目出现问题。
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>www.makeApie.cn - ECharts案例下载 - 北京地图</title>
<!--
🚨🚨非常重要🚨🚨：设置相对路径资源url链接
如果你需要本地使用，请下载下来，假设下面代码中有个相对路径资源 /dep/echarts/map/js/china.js，👉👉下载方法：https://www.makeapie.cn/dep/echarts/map/js/china.js
-->
<base href="https://www.makeapie.cn/">
<!-- 引入刚刚下载的 ECharts 文件 和 jquery -->
<script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.1.2/files/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://registry.npmmirror.com/jquery/3.7.1/files/dist/jquery.min.js"></script>
<style>*{padding: 0; margin: 0;}</style>
<!--
🚨🚨非常重要🚨🚨：下面是运行案例需要的第三方脚本，如果是相对链接，下载方法看上面👆👆
如果你需要本地使用，请下载下来，假设下面代码中有个相对路径资源 /dep/echarts/map/js/china.js，下载方法：https://www.makeapie.cn/dep/echarts/map/js/china.js
-->
<!--暂无第三方脚本-->
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="chart-panel" style="width: calc(100vw - 200px);height:calc(100vh - 200px); padding: 100px; margin: 0 auto;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart-panel'));
// 指定图表的配置项和数据
var option = {};
//=============== start ===============//
/**
* 🚨🚨非常重要🚨🚨
* 下面是 网站左侧代码，核心代码
*/
var uploadedDataURL = '/asset/get/s/data-1630027425393-SxVmyjR11.json';
/**
此版本通过设置geoindex && seriesIndex: [1] 属性来实现geo和map共存，来达到hover散点和区域显示tooltip的效果
默认情况下，map series 会自己生成内部专用的 geo 组件。但是也可以用这个 geoIndex 指定一个 geo 组件。这样的话，map 和 其他 series（例如散点图）就可以共享一个 geo 组件了。并且，geo 组件的颜色也可以被这个 map series 控制，从而用 visualMap 来更改。
当设定了 geoIndex 后，series-map.map 属性，以及 series-map.itemStyle 等样式配置不再起作用，而是采用 geo 中的相应属性。
http://echarts.baidu.com/option.html#series-map.geoIndex
并且加了pin气泡图标以示数值大小
*/
var points = [
{
value: [116.4, 39.9],
itemStyle: {
color: '#f58414',
},
},
{
value: [115.9, 39.96],
itemStyle: {
color: '#e7ab0b',
},
},
{
value: [115.98, 39.69],
itemStyle: {
color: '#1DE9B6',
},
} /*{
value: [113.6200,34.7500],
itemStyle: {
color: '#f58414'
}
},{
value: [109.4800, 36.6000],
itemStyle: {
color: '#f58414'
}
},{
value: [107.1300,34.3700],
itemStyle: {
color: '#f58414'
}
},{
value: [113.2300,23.1600],
itemStyle: {
color: '#f58414'
}
},{
value: [117.4219, 39.4189],
itemStyle: {
color: '#f58414'
}
},{
value: [108.3700, 22.8200],
itemStyle: {
color: '#f58f0e'
}
},{
value: [109.1162, 34.2004],
itemStyle: {
color: '#f5a305'
}
},{
value: [103.5901, 36.3043],
itemStyle: {
color: '#e7ab0b'
}
},{
value: [106.3586, 38.1775],
itemStyle: {
color: '#dfae10'
}
},{
value: [103.9526, 30.7617],
itemStyle: {
color: '#c1bb1f'
}
}*/,
];
// var uploadedDataURL = "/asset/get/s/data-1482909892121-BJ3auk-Se.json";
myChart.showLoading();
let index = -1;
$.getJSON(uploadedDataURL, function (geoJson) {
echarts.registerMap('beijing', geoJson);
myChart.hideLoading();
option = {
backgroundColor: '#091c3d',
geo: {
show: false,
map: 'beijing',
label: {
normal: {
show: false,
},
emphasis: {
show: false,
},
},
roam: true,
itemStyle: {
show:true,
normal: {
areaColor: 'transparent',
borderColor: '#3fdaff',
borderWidth: 2,
shadowColor: 'rgba(63, 218, 255, 0.5)',
shadowBlur: 30,
},
emphasis: {
areaColor: '#2B91B7',
},
},
},
series: [
{
type: 'map',
roam: false,
label: {
normal: {
show: true,
textStyle: {
color: '#fff',
fontSize:15,
fontWeight:500,
},
},
emphasis: {
textStyle: {
color: 'rgb(183,185,14)',
},
},
},
itemStyle: {
normal: {
areaColor: '#003669',
borderColor: '#3fdaff',
borderWidth: 2,
shadowColor: 'rgba(63, 218, 255,0.6)',
shadowBlur: 35,
},
emphasis: {
areaColor: '#2B91B7',
},
},
zoom: 1.1,
map: 'beijing', //使用
},
{
type: 'effectScatter',
coordinateSystem: 'geo',
showEffectOn: 'render',
zlevel: 1,
rippleEffect: {
period: 15,
scale: 4,
brushType: 'fill',
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
offset: [15, 0],
color: '#1DE9B6',
show: true,
},
},
itemStyle: {
normal: {
color: '#1DE9B6',
shadowBlur: 20,
shadowColor: '#333',
},
},
symbolSize: 12,
data: points,
}, //地图线的动画效果
],
};
myChart.setOption(option, true);
});
//=============== end ===============//
// 使用刚指定的配置项和数据显示图表。
if (option && typeof option === 'object') {
myChart.setOption(option);
}
window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>这端代码拿到本地直接运行就可以看到效果，但是如果想要资源都是以本地的，还需要改一些地方
1.删除baseURL
把这个标签删除掉，他是官方例子请求文件的地址，我们想要完全在本地运行的话就得把他删除掉
2.将支持echarts运行的两个js文件下载到本地
就是这两个文件，可以直接复制文件地址，在浏览器当中打开，右键有另存为，保存到本地就可以了
两个文件都是如此。
3.下载地图JSON文件，并把它引入到自己的项目当中
下载地址：免费下载实时更新的geoJson数据、行政区划边界数据、区划边界坐标集合__HashTang
下载完是这样的文件：
然后引入就可以了，如下是我改完的代码，由于文件放的位置可能不一样，所以引用文件路径可能不一样，仅供参考哦：
<!--
🚨🚨温馨提示🚨🚨
下面代码是程序自动生成，可能存在个别无法运行，如果无法运行，请调整下echarts版本，或者自行浏览器查看报错信息进行修复；
下面代码分为 echarts框架代码这个代码主要用于能运行起来echarts，还有就是核心代码（用🚨🚨非常重要🚨🚨进行标注了），核心代码主要用于显示案例效果
如果有问题请打开社区网站 https://www.makeapie.cn 添加右上角微信群/qq群进行询问
🚨🚨Tips🚨🚨：
不要项目中使用社区链接资源，如https://www.makeapie.cn/dep/echarts/map/js/china.js，请务必下载本地后使用，因为社区地址会不定期更换，可能会导致你们项目出现问题。
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--
🚨🚨非常重要🚨🚨：设置相对路径资源url链接
如果你需要本地使用，请下载下来，假设下面代码中有个相对路径资源 /dep/echarts/map/js/china.js，👉👉下载方法：https://www.makeapie.cn/dep/echarts/map/js/china.js
-->
<!-- <base href="https://www.makeapie.cn/"> -->
<!-- 引入刚刚下载的 ECharts 文件 和 jquery -->
<script type="text/javascript" src="./echarts.min.js"></script>
<script type="text/javascript" src="./jquery.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
</style>
<!--
🚨🚨非常重要🚨🚨：下面是运行案例需要的第三方脚本，如果是相对链接，下载方法看上面👆👆
如果你需要本地使用，请下载下来，假设下面代码中有个相对路径资源 /dep/echarts/map/js/china.js，下载方法：https://www.makeapie.cn/dep/echarts/map/js/china.js
-->
<!--暂无第三方脚本-->
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="chart-panel"
style="width: calc(100vw - 200px);height:calc(100vh - 200px); padding: 100px; margin: 0 auto;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart-panel'));
// 指定图表的配置项和数据
var option = {};
//=============== start ===============//
/**
* 🚨🚨非常重要🚨🚨
* 下面是 网站左侧代码，核心代码
*/
var uploadedDataURL = './内蒙古自治区.geoJson';
/**
此版本通过设置geoindex && seriesIndex: [1] 属性来实现geo和map共存，来达到hover散点和区域显示tooltip的效果
默认情况下，map series 会自己生成内部专用的 geo 组件。但是也可以用这个 geoIndex 指定一个 geo 组件。这样的话，map 和 其他 series（例如散点图）就可以共享一个 geo 组件了。并且，geo 组件的颜色也可以被这个 map series 控制，从而用 visualMap 来更改。
当设定了 geoIndex 后，series-map.map 属性，以及 series-map.itemStyle 等样式配置不再起作用，而是采用 geo 中的相应属性。
http://echarts.baidu.com/option.html#series-map.geoIndex
并且加了pin气泡图标以示数值大小
*/
var points = [
{
value: [116.4, 39.9],
itemStyle: {
color: '#f58414',
},
},
{
value: [115.9, 39.96],
itemStyle: {
color: '#e7ab0b',
},
},
{
value: [115.98, 39.69],
itemStyle: {
color: '#1DE9B6',
},
},
];
// var uploadedDataURL = "/asset/get/s/data-1482909892121-BJ3auk-Se.json";
myChart.showLoading();
let index = -1;
$.getJSON(uploadedDataURL, function (geoJson) {
echarts.registerMap('beijing', geoJson);
myChart.hideLoading();
option = {
backgroundColor: '#091c3d',
geo: {
show: false,
map: 'beijing',
label: {
normal: {
show: false,
},
emphasis: {
show: false,
},
},
roam: true,
itemStyle: {
show: true,
normal: {
areaColor: 'transparent',
borderColor: '#3fdaff',
borderWidth: 2,
shadowColor: 'rgba(63, 218, 255, 0.5)',
shadowBlur: 30,
},
emphasis: {
areaColor: '#2B91B7',
},
},
},
series: [
{
type: 'map',
roam: false,
label: {
normal: {
show: true,
textStyle: {
color: '#fff',
fontSize: 15,
fontWeight: 500,
},
},
emphasis: {
textStyle: {
color: '',
},
},
},
itemStyle: {
normal: {
areaColor: '#003669',
borderColor: '#3fdaff',
borderWidth: 2,
shadowColor: 'rgba(63, 218, 255,0.6)',
shadowBlur: 35,
},
emphasis: {
areaColor: '#2B91B7',
},
},
zoom: 1.1,
map: 'beijing', //使用
},
{
type: 'effectScatter',
coordinateSystem: 'geo',
showEffectOn: 'render',
zlevel: 1,
rippleEffect: {
period: 15,
scale: 4,
brushType: 'fill',
},
hoverAnimation: false,
label: {
normal: {
formatter: '{b}',
position: 'right',
offset: [15, 0],
color: '#1DE9B6',
show: true,
},
},
itemStyle: {
normal: {
color: '#1DE9B6',
shadowBlur: 20,
shadowColor: '#333',
},
},
symbolSize: 12,
data: points,
}, //地图线的动画效果
],
};
myChart.setOption(option, true);
});
//=============== end ===============//
// 使用刚指定的配置项和数据显示图表。
if (option && typeof option === 'object') {
myChart.setOption(option);
}
window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>这样的话，这个echarts就可以在本地运行并且不需要依赖echarts官网的文件了。本地独立运行项目结束。
四 echarts引入vue3项目当中
接下来就是在自己的vue项目中引入echarts文件了，需要解决的问题就是两个js文件（echarts.min.js和jquery.min.js）还有一个地图的json文件，
大家仔细看代码就会发现，jquery只在获取JSON时使用了，我们现在已经有了JSON文件了，所以我们其实可以不用引入jquery.min.js了，现在只需要引入两个就行了
1.echarts.min.js文件引入
找到vue项目里面的index.html文件，然后使用script标签将他引入（body结束标签前就可以）
<script type="text/javascript" src="stactic/echarts.min.js"></script>文件放到public文件夹下就可以，否则打包完成之后可能找不到文件
这样echarts.min.js文件就算引入进来了
2.引入json文件
json文件的引入需要使用到fetch，简单来说需要写一个方法来把json拿进项目里面，并把json数据赋值给vue文件的变量，下面是获取json的方法
async loadMapData() {
try {
// 使用 fetch 方法加载 JSON 文件
const response = await fetch('/stactic/长春市.json');
// 解析 JSON 文件内容
this.mapData = await response.json();
console.log("地图数据获取成功")
this.initmap();
// 在这里可以使用 this.mapData，例如传递给 echarts.registerMap 方法
} catch (error) {
console.error('Failed to load map data:', error);
}
},在mounted函数里面调用这个方法就可以获取到json数据了（this.mapData就是我定义的存放地图json数据的变量）
当然拿到json数据之后就可以渲染地图啦
this.initmap()就是我定义的渲染地图的函数
3.在.vue文件里渲染地图
（1）需要先准备一个元素，用来放我们的地图
<div id="bdmap"
style="width: calc(100vw - 200px);height:calc(100vh - 200px); padding: 100px; margin: 0 auto;"></div>（2）把html文件里面js代码放到一个方法里面，这个方法就是上面的this.initmap()
initmap(){
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('bdmap'));
// 指定图表的配置项和数据
var option = {};
var points = [
{
value: [116.4, 39.9],
itemStyle: {
color: '#f58414',
},
},
{
value: [115.9, 39.96],
itemStyle: {
color: '#e7ab0b',
},
},
{
value: [115.98, 39.69],
itemStyle: {
color: '#1DE9B6',
},
}
];
myChart.showLoading();
let index = -1;
echarts.registerMap('changchun', this.mapData);
myChart.hideLoading();
option = {
// backgroundColor: '',
select: {
itemStyle: {
color: '#fff',
width: '100%',
areaColor: "rgba(63, 218, 255, 0.5)",
// borderColor: '#000',
// borderWidth: 20
},
},
geo: {
show: false,
map: 'changchun',
label: {
normal: {
show: false,
},
emphasis: {
show: false,
},
},
roam: true,
itemStyle: {
show: true,
normal: {
areaColor: 'transparent',
borderColor: '#3fdaff',
borderWidth: 2,
shadowColor: 'rgba(63, 218, 255, 0.5)',
shadowBlur: 30,
},
emphasis: {
areaColor: '#2B91B7',
},
},
},
series: [
{
type: 'map',
roam: false,
label: {
normal: {
show: true,
textStyle: {
color: '#fff',
fontSize: 15,
fontWeight: 500,
},
},
emphasis: {
textStyle: {
color: '#003669',
},
},
},
itemStyle: {
normal: {
areaColor: '#0C7E7E',
borderColor: '#00F1EF',
borderWidth: 2,
shadowColor: 'rgba(63, 218, 255,0.6)',
shadowBlur: 35,
},
emphasis: {
areaColor: '#1CC5C4',
},
},
zoom: 1.1,
map: 'changchun', //使用
},
{
type: 'effectScatter',
coordinateSystem: 'geo',
showEffectOn: 'render',
zlevel: 1,
rippleEffect: {
period: 15,
scale: 4,
brushType: 'fill',
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
offset: [15, 0],
color: '#1DE9B6',
show: true,
},
},
itemStyle: {
normal: {
color: '#1DE9B6',
shadowBlur: 20,
shadowColor: '#333',
},
},
symbolSize: 12,
data: points,
}, //地图线的动画效果
],
};
myChart.setOption(option, true);
// 使用刚指定的配置项和数据显示图表。
if (option && typeof option === 'object') {
myChart.setOption(option);
}
window.addEventListener('resize', myChart.resize);
},至此文章结束，如果地图没显示出来的话，可以是父元素宽高是0，可以看一下。
最后效果就是
有什么问题的话大家可以问我哦
5483
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
