Article directory
written in front
In fact, this article is mainly a knot left by me before. I vaguely remember that when I worked on a large-screen project before, I was too busy at that time to organize articles about large-screen development. This is not a technology two days ago. The community saw that someone asked about how to implement the map module of echarts and pop up the map of the lower-level city, so I recalled the previous knowledge and combined some knowledge points on the Internet to sort it out, hoping to bring some help to everyone.
Knowledge points involved
Echarts can click on the map of China, and based on Echarts, you can view the map of lower-level cities. jQuery+html5 is based on echarts.js China map. Click to pop up the lower-level city map, China map and lower-level city display.
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。
achieve effect
This is mainly to give you a feedback on the final implementation effect, and the sharing link of the complete code package is attached at the end of the article.
1. Realize the map of China
1.1 Create dom elements
Create a map.html, which is mainly used to display the first-level areas of provinces, municipalities, autonomous regions, special administrative regions and territorial waters on the map of China. Of course, this is actually inside.
<button id="back">返回全国</button>
<div id="china-map"></div>
1.2 Realize map rendering
Of course, here I use the json data list method to organize, that is, to store the provinces, municipalities, autonomous regions, special administrative regions, and territorial waters on the map of China in the form of json data. In fact, json files can also be placed online. There are also many available for download. The implementation is as follows:
var myChart = echarts.init(document.getElementById('china-map'));
var oBack = document.getElementById("back");
var provinces = ['shanghai', 'hebei', 'shanxi', 'neimenggu', 'liaoning', 'jilin', 'heilongjiang', 'jiangsu', 'zhejiang', 'anhui', 'fujian', 'jiangxi', 'shandong', 'henan', 'hubei', 'hunan', 'guangdong', 'guangxi', 'hainan', 'sichuan', 'guizhou', 'yunnan', 'xizang', 'shanxi1', 'gansu', 'qinghai', 'ningxia', 'xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen'];
var provincesText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门'];
var seriesData = [{
name: '北京',
value: 100
}, {
name: '天津',
value: 0
}, {
name: '上海',
value: 60
}, {
name: '重庆',
value: 0
}, {
name: '河北',
value: 60
}, {
name: '河南',
value: 60
}, {
name: '云南',
value: 0
}, {
name: '辽宁',
value: 0
}, {
name: '黑龙江',
value: 0
}, {
name: '湖南',
value: 60
}, {
name: '安徽',
value: 0
}, {
name: '山东',
value: 60
}, {
name: '新疆',
value: 0
}, {
name: '江苏',
value: 0
}, {
name: '浙江',
value: 0
}, {
name: '江西',
value: 0
}, {
name: '湖北',
value: 60
}, {
name: '广西',
value: 60
}, {
name: '甘肃',
value: 0
}, {
name: '山西',
value: 60
}, {
name: '内蒙古',
value: 0
}, {
name: '陕西',
value: 0
}, {
name: '吉林',
value: 0
}, {
name: '福建',
value: 0
}, {
name: '贵州',
value: 0
}, {
name: '广东',
value: 597
}, {
name: '青海',
value: 0
}, {
name: '西藏',
value: 0
}, {
name: '四川',
value: 60
}, {
name: '宁夏',
value: 0
}, {
name: '海南',
value: 60
}, {
name: '台湾',
value: 0
}, {
name: '香港',
value: 0
}, {
name: '澳门',
value: 0
}];
oBack.onclick = function () {
initEcharts("china", "中国");
};
initEcharts("china", "中国");
// 初始化echarts
function initEcharts(pName, Chinese_) {
var tmpSeriesData = pName === "china" ? seriesData : [];
var option = {
title: {
text: Chinese_ || pName,
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{b}<br/>{c} (p / km2)'
},
series: [
{
name: Chinese_ || pName,
type: 'map',
mapType: pName,
roam: false,//是否开启鼠标缩放和平移漫游
data: tmpSeriesData,
top: "3%",//组件距离容器的距离
zoom:1.1,
selectedMode : 'single',
label: {
normal: {
show: true,//显示省份标签
textStyle:{
color:"#fbfdfe"}//省份标签字体颜色
},
emphasis: {
//对应的鼠标悬浮效果
show: true,
textStyle:{
color:"#323232"}
}
},
itemStyle: {
normal: {
borderWidth: .5,//区域边框宽度
borderColor: '#0550c3',//区域边框颜色
areaColor:"#4ea397",//区域颜色
},
emphasis: {
borderWidth: .5,
borderColor: '#4b0082',
areaColor:"#ece39e",
}
},
}
]
};
myChart.setOption(option);
myChart.off("click");
if (pName === "china") {
// 全国时，添加click 进入省级
myChart.on('click', function (param) {
console.log(param.name);
// 遍历取到provincesText 中的下标 去拿到对应的省js
for (var i = 0; i < provincesText.length; i++) {
if (param.name === provincesText[i]) {
//显示对应省份的方法
showProvince(provinces[i], provincesText[i]);
break;
}
}
if (param.componentType === 'series') {
var provinceName =param.name;
$('#box').css('display','block');
$("#box-title").html(provinceName);
}
});
} else {
// 省份，添加双击 回退到全国
myChart.on("dblclick", function () {
initEcharts("china", "中国");
});
}
}
// 展示对应的省
function showProvince(pName, Chinese_) {
//这写省份的js都是通过在线构建工具生成的，保存在本地，需要时加载使用即可，最好不要一开始全部直接引入。
loadBdScript('$' + pName + 'JS', './js/map/province/' + pName + '.js', function () {
initEcharts(Chinese_);
});
}
// 加载对应的JS
function loadBdScript(scriptId, url, callback) {
var script = document.createElement("script");
script.type = "text/javascript";
if (script.readyState) {
//IE
script.onreadystatechange = function () {
if (script.readyState === "loaded" || script.readyState === "complete") {
script.onreadystatechange = null;
callback();
}
};
} else {
// Others
script.onload = function () {
callback();
};
}
script.src = url;
script.id = scriptId;
document.getElementsByTagName("head")[0].appendChild(script);
};
1.3 Click on the map to enter the city and return
In fact, the core method is:
function showProvince(pName, Chinese_) {
//这写省份的js都是通过在线构建工具生成的，保存在本地，需要时加载使用即可，最好不要一开始全部直接引入。
loadBdScript('$' + pName + 'JS', './js/map/province/' + pName + '.js', function () {
initEcharts(Chinese_);
});
}
// 加载对应的JS
function loadBdScript(scriptId, url, callback) {
var script = document.createElement("script");
script.type = "text/javascript";
if (script.readyState) {
//IE
script.onreadystatechange = function () {
if (script.readyState === "loaded" || script.readyState === "complete") {
script.onreadystatechange = null;
callback();
}
};
} else {
// Others
script.onload = function () {
callback();
};
}
script.src = url;
script.id = scriptId;
document.getElementsByTagName("head")[0].appendChild(script);
};
There is one to access different js files, because I have compiled a js file for different provinces (municipalities, autonomous regions, special administrative regions, etc.), in fact, it stores the information of the local cities under its jurisdiction, and some of them are displayed as follows
: I can take a screenshot of the content, and you can take a look:
In fact, it is not difficult to find out why you can click to see the map of a specific city from the above. The main thing is to read the temporary storage data. Of course, if you have a better implementation method, you can leave a message Ha, learn from each other and make progress together!
2. Source code sharing
2.1 Baidu Netdisk
Link: https://pan.baidu.com/s/1cSPIjMkxw28WjzzFQJa6rg
Extraction code: hdd6
2.2 123 cloud disk
Link: https://www.123pan.com/s/ZxkUVv-kpI4.html
Extraction code: hdd6
2.3 Email message
Leave your email account in the comment area, and the blogger will send it to you as soon as he sees it. I wish you a happy life!
Summarize
The above is what I want to talk about today. This article mainly introduces how Echarts realizes the clickable map of China. Based on Echarts, the map of lower-level cities can be viewed. jQuery+html5 is based on echarts.js China map. , I also look forward to everyone making progress together, let's work together in 2023! ! !
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。