代码效果

https://www.makeapie.com/editor.html?c=xp2-DidkB5&v=2

准备工作

在实现中国地图之前可以先下载需要的json数据

在该网站上下载需要的地图json
- http://datav.aliyun.com/tools/atlas/#&lat=30.37018632615852&lng=106.68898666525287&zoom=3.5
- 点击右下角的geojson下载

html简单搭建

开始之前我们需要构建好基础的html

需要用到的js有echarts.min.js，jquery.js

<html>
<head><!-- 页面meta --><meta charset="utf-8"><!-- 引入js --><script  type="text/javascript"  src="js/echarts.min.js"></script><script  type="text/javascript"  src="js/jquery.js"></script>
</head>
<body>
<div><div><!-- 设置一个区域 用来存放我们的地图--><div class="box"><div id="main" style="width: 100%;height:100%;"></div></div></div></div>
</body>
<script>//编写中国地图代码
</script>
</html>

引入地图json数据

//获取到需要添加地图的位置
var myChart = echarts.init(document.getElementById('main'));
//1.中国地图
var chinaMap = "json/中国地图.json";
//2.台湾省地图
var taiWanMap = "json/台湾省.json";
//3.海南省地图
var haiNanMap = "json/海南省.json";
//4.安徽省地图
var anHuiMap = "json/安徽省.json";
//5.江西省地图
var jiangXiMap = "json/江西省.json";
//6.湖南省地图
var huNanMap = "json/湖南省.json";
//7.云南省地图
var yunNanMap = "json/云南省.json";
//8.贵州省地图
var guiZhouMap = "json/贵州省.json";
//9.广东省地图
var guangDongMap = "json/广东省.json";
//10.福建省地图
var fuJianMap = "json/福建省.json";
//11.浙江省地图
var zheJiangMap = "json/浙江省.json";
//12.江苏省地图
var jiangSuMap = "json/江苏省.json";
//13.四川省地图
var siChuanMap = "json/四川省.json";
//14.重庆市市地图
var chongQingMap = "json/重庆市.json";
//15.湖北省地图
var huBeiMap = "json/湖北省.json";
//16.河南省地图
var heNanMap = "json/河南省.json";
//17.山东省地图
var shanDongMap = "json/山东省.json";
//18.吉林省地图
var jiLinMap = "json/吉林省.json";
//19.辽宁省地图
var liaoNingMap = "json/辽宁省.json";
//20.天津市市地图
var tianJinMap = "json/天津市.json";
//21.北京市市地图
var beiJingMap = "json/北京市.json";
//22.河北省地图
var heBeiMap = "json/河北省.json";
//23.山西省地图
var shanXiMap = "json/山西省.json";
//24.陕西省地图
var shanXi2Map = "json/陕西省.json";
//25.宁夏回族自治区省地图
var ningXiaMap = "json/宁夏回族自治区.json";
//26.青海省地图
var qingHaiMap = "json/青海省.json";
//27.西藏自治区地图
var xiZangMap = "json/西藏自治区.json";
//28.黑龙江省地图
var heiLongJiangMap = "json/黑龙江省.json";
//29.内蒙古自治区地图
var neimengGuMap = "json/内蒙古自治区.json";
//30.甘肃省地图
var ganSuMap = "json/甘肃省.json";
//31.新疆维吾尔自治区省地图
var xinJiangMap = "json/新疆维吾尔自治区.json";
//32.广西壮族自治区地图
var guangxiMap = "json/广西壮族自治区.json";
//设置初始地图
var mapname = chinaMap;

配置好各省的json数据

这里记住一点，想要实现点击效果配置的json中的name必须和中国地图上的名字一致

//设置省份的json 这里注意名字要和中国地图上的名字一致
var mapJson = [{name: "台湾省",json: taiWanMap,},{name: "海南省",json: haiNanMap,},{name: "安徽省",json: anHuiMap,},{name: "江西省",json: jiangXiMap,},{name: "湖南省",json: huNanMap,},{name: "云南省",json: yunNanMap,},{name: "贵州省",json: guiZhouMap,},{name: "广东省",json: guangDongMap,},{name: "福建省",json: fuJianMap,},{name: "浙江省",json: zheJiangMap,},{name: "江苏省",json: jiangSuMap,},{name: "四川省",json: siChuanMap,},{name: "重庆市",json: chongQingMap,},{name: "湖北省",json: huBeiMap,},{name: "河南省",json: heNanMap,},{name: "山东省",json: shanDongMap,},{name: "吉林省",json: jiLinMap,},{name: "辽宁省",json: liaoNingMap,},{name: "天津市",json: tianJinMap,},{name: "北京市",json: beiJingMap,},{name: "河北省",json: heBeiMap,},{name: "山西省",json: shanXiMap,},{name: "陕西省",json: shanXi2Map,},{name: "宁夏回族自治区",json: ningXiaMap,},{name: "青海省",json: qingHaiMap,},{name: "西藏自治区",json: xiZangMap,},{name: "黑龙江省",json: heiLongJiangMap,},{name: "内蒙古自治区",json: neimengGuMap,},{name: "甘肃省",json: ganSuMap,},{name: "新疆维吾尔自治区",json: xinJiangMap,},{name: "广西壮族自治区",json: guangxiMap,},
];

自动高亮

因为我们各省的城市数量不同，使用我们可以先定义一个num用来接收各省的数据（这一行可以写在最上面）

//定义一个全局变量，用来统计每个省有几个市
let num = 0;

编辑自动播放时的代码

//提取自动播放的代码
function timing() {// 取消高亮指定的数据图形myChart.dispatchAction({type: 'downplay',seriesIndex: 0,dataIndex: index,});// 高亮指定的数据图形myChart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: index + 1,});index++;//判断长度是否和城市的长度一样，如果一样重新播放if (index > num) {index = -1;}
}

设置鼠标移入移除事件

//加载时的文字提示
myChart.showLoading({ text: '正在加载数据' });  //增加等待提示
//设置开始位置（播放的位置）
let index = -1;
//定时播放
var timer = setInterval(function () {//调用定时播放代码timing()
}, 1500);
//鼠标移入
myChart.on('mousemove', function (e) {//取消定时clearInterval(timer);//取消高亮myChart.dispatchAction({type: 'downplay',seriesIndex: 0,});//高亮鼠标移入的位置myChart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: e.dataIndex,});});
//鼠标移出
myChart.on('mouseout', function (e) {//取消定时clearInterval(timer);//取消高亮myChart.dispatchAction({type: 'downplay',seriesIndex: 0,dataIndex: e.dataIndex,});//重新开始定时播放timer = setInterval(function () {//调用定时播放代码timing()}, 1500);
});

设置鼠标点击事件

//点击事件
myChart.on('click', function (e) {//过滤 这里是es6语法 filter函数可以看成是一个过滤函数，返回符合条件的元素的数组var chooseName = mapJson.filter((item) => {//我们根据名字来判断是否选择一种return item.name == e.name;});//这里的chooseName是一个数组，我们需要获取到json 有兴趣可以打印//{name: "新疆维吾尔自治区", json: "json/新疆维吾尔自治区.json"}mapname = chooseName[0].json;//添加一个返回按键$('<div class="back">返回中国地图</div>').appendTo($('#main'));//给返回按键设置样式$('.back').css({position: 'absolute',//绝对地位left: '20px',//设置位置top: '20px',//设置位置color: 'pink',//设置字体颜色'font-size': '20px',//设置字体大小cursor: 'pointer',//变小手});//设置返回按钮的点击事件$('.back').click(function () {//地图重新设置为中国地图mapname = chinaMap;//隐藏按钮$('.back').css({opacity:0,});//绘制地图mapInit();//重新开始定时播放timer = setInterval(function () {//调用定时播放代码timing()}, 1500);});//绘制地图mapInit();//定时播放timer = setInterval(function () {//调用定时播放代码timing()}, 1500);
});

初始化

//设置初始化时间
setTimeout(function () {mapInit();
}, 500);

创建地图前的准备工作（设置小气泡位置）

创建地图之前需要先获得各省的城市数量，还可以标记处气泡的位置(这里的气泡我的坐标没有特别好，你们有兴趣可以慢慢调整)

//创建地图
var mapInit = () => {//调用中国地图（同步）$.getJSON(mapname, function (geoJson) {//获取到长度（每个省里有几个市）num = geoJson.features.length;//调用我们通过json对象注册的地图echarts.registerMap('China', geoJson);//文件加载的动画myChart.hideLoading();//判断是否为祖国地图if (mapname === chinaMap) {//设置小黄点var geoCoordMap = {'台湾': [122,23],'黑龙江': [129,51],'内蒙古': [110.3467, 41.4899],"吉林": [125.8154, 44.2584],'北京市': [116.4551, 40.2539],"辽宁": [123.1238, 42.1216],"河北": [114.4995, 38.1006],"天津": [117.4219, 39.4189],"山西": [112.3352, 37.9413],"陕西": [109.1162, 34.2004],"甘肃": [103.5901, 36.3043],"宁夏": [106.3586, 38.1775],"青海": [101.4038, 36.8207],"新疆": [87.9236, 43.5883],"西藏": [88.388277,31.56375],"四川": [103.9526, 30.7617],"重庆": [108.384366, 30.439702],"山东": [117.1582, 36.8701],"河南": [113.4668, 34.6234],"江苏": [118.8062, 31.9208],"安徽": [117.29, 32.0581],"湖北": [114.3896, 30.6628],"浙江": [119.5313, 29.8773],"福建": [119.4543, 25.9222],"江西": [116.0046, 28.6633],"湖南": [113.0823, 28.2568],"贵州": [106.6992, 26.7682],"云南": [102.9199, 25.4663],"广东": [113.12244, 23.009505],"广西": [108.479, 23.1152],"海南": [110.3893, 19.8516],'上海': [121.4648, 31.2891],};//设置每个区域的值var data = [{name:"台湾",value:1},{name:"北京",value:2},{name:"天津",value:3},{name:"河北",value:4},{name:"山西",value:5},{name:"内蒙古",value:6},{name:"辽宁",value:7},{name:"吉林",value:8},{name:"黑龙江",value:9},{name:"上海",value:10},{name:"江苏",value:11},{name:"浙江",value:12},{name:"安徽",value:13},{name:"福建",value:14},{name:"江西",value:15},{name:"山东",value:16},{name:"河南",value:17},{name:"湖北",value:18},{name:"湖南",value:19},{name:"重庆",value:20},{name:"四川",value:21},{name:"贵州",value:22},{name:"云南",value:23},{name:"西藏",value:24},{name:"陕西",value:25},{name:"甘肃",value:26},{name:"青海",value:27},{name:"宁夏",value:28},{name:"新疆",value:29},{name:"广东",value:30},{name:"广西",value:31},{name:"海南",value:32},];//给每个地区赋值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)});}}return res;};}else{//这里不为中国地图所以先不设置（后面需要对市区进行标记在设置）//设置小黄点var geoCoordMap = {};//设置每个区域的值var data = [];//给每个地区赋值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)});}}return res;};}//地图开始部分往下查看});
};

创建地图

//地图开始
option = {//设置背景颜色backgroundColor: '#020933',geo: {map: 'China',//地图为刚刚设置的ChinaaspectScale:0.75, //长宽比zoom:1.1,//当前视角的缩放比例roam: false,//是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启itemStyle: {//地图区域的多边形 图形样式normal: {areaColor: '#013C62',//地区颜色shadowColor: '#182f68',//阴影颜色shadowOffsetX: 0,//阴影偏移量shadowOffsetY: 25,//阴影偏移量},emphasis: {areaColor: '#2AB8FF',//地区颜色label: {show: false,//是否在高亮状态下显示标签},},},},series: [//数据系列{type: 'map',//地图类型//地图上文字label: {normal: {show: true,//是否显示标签textStyle: {color: '#fff',},},emphasis: {textStyle: {color: '#fff',},},},//地图区域的多边形 图形样式itemStyle: {normal: {borderColor: '#2ab8ff',borderWidth: 1.5,areaColor: '#12235c',},emphasis: {areaColor: '#2AB8FF',borderWidth: 0,},},zoom: 1.2,//当前视角的缩放比例//是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启roam: false,map: 'China', //使用中国地图},{//设置为分散点type: 'scatter',//series坐标系类型coordinateSystem: 'geo',//设置图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'symbol: 'pin',// //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10symbolSize: [40,40],//气泡字体设置label: {normal: {show: true,//是否显示textStyle: {color: '#fff',//字体颜色fontSize: 8,//字体大小},//返回气泡数据formatter (value){return value.data.value[2]}}},itemStyle: {normal: {color: '#1E90FF', //标志颜色}},//给区域赋值data: convertData(data),showEffectOn: 'render',//配置何时显示特效。可选：'render' 绘制完成后显示特效。'emphasis' 高亮（hover）的时候显示特效。rippleEffect: {//涟漪特效相关配置。brushType: 'stroke'//波纹的绘制方式，可选 'stroke' 和 'fill'},hoverAnimation: true,//是否开启鼠标 hover 的提示动画效果。zlevel: 1//所属图形的 zlevel 值},],
};
myChart.setOption(option);

源码部分
git@github.com:ningmengla/chinaMap.git

小广告

本人承接毕业设计，可以包教学讲解（后端代码和前端js部分一行一行的解释哦），保证论文的通过率！接下来我会慢慢的一点点更新希望大家关注我哦！！！

echart实现中国地图，点击可以显示各省信息相关推荐

Echart实现中国地图和地图打点
一.概述首先ECharts 是一个使用 JavaScript 实现的开源可视化库.兼容当前绝大部分浏览器,而且提供大量可交互.可高度个性化定制的图表,满足开发者各种需求. 今天主要展示echarts ...
Vue + echart 实现中国地图和省市地图（可切换省份
vue + echart 实现中国地图和省市地图(可切换省份) - 伏沙金 - 博客园
Vue中使用echart实现中国地图统计图
Vue中使用echart实现中国地图统计图前言 Echart版本的确定全局导入或按需导入在对应的页面调用echart 前后端数据交互注意事项前言在Vue2.x开发中,为了更好地展示某一个时间 ...
百度地图_自动标记/点击图标显示对应信息
1.百度地图前端页面–根据json数据自动标记,点击标记显示对应信息. 百度地图JavaScript API :http://lbsyun.baidu.com/cms/jsapi/reference/ ...
echart+react实现中国地图点击切换省份（使用react hooks封装echart）
实现效果如下: 一.echart封装(react hooks) 实现容器大小发生改变,重新绘制在页面卸载时清理监听以及清除图例实现代码如下 //index.js import React, { u ...
微信小程序内使用echart实现中国地图，点击省跳转省地图，再点击市跳转到市区详情
目的:在微信小程序内实现一张中国地图,上面要写上一些全国数据,点击省 => 省地图,并请求数据,点击市区 => 跳转到市区地图这样一个功能,具体实现效果如下: 思路: 1.首先我们要先画 ...
echarts，map中国地图点击各省，跳转展示，从省返回到中国地图【china.js】
效果图: 1.点击省,跳转到河北省 2.返回,从省返回到中国地图话不多说,直接上代码,1.复制粘贴,2.在引入对应js即可注:全部各省地图,下载地址:** <!DOCTYPE html> ...
echarts+vue中国地图,点击进入省级地图
先上效果图再说思路第一步: 生成中国地图第二步: 定义点击事件根据反参生成省级地图所需要的参数第三步: 将省级地图所需要的参数传入渲染方法重新渲染最后说步骤准备 1 npm echarts ...
echarts.制作中国地图,点击对应的省市链接到该省份的详细介绍
今天花了一天的时间,用echart弄了一个效果,是从中国地图点进去身份并把改省份的数据渲染出来的效果,刚开始完全没有头绪,只能硬着头皮去看百度echart的api,和博客,看了半天,好家伙,终于给我找 ...
vue + echart +map中国地图，省市地图，区县地图
第一步:安装依赖包 npm install echarts --save 在main.js 中全局引入 import echarts from 'echarts' Vue.prototype.$ech ...

echart实现中国地图，点击可以显示各省信息

文章目录