Make writing a habit together! This is the 12th day of my participation in the “Gold Digging Day New Plan · April More text Challenge”. Click here for more details.
💪~ If you like it, you can like it or leave a message 💕~~~, thank you ⭐️ 💕 ️~~
Demand: World map and China map can switch with each other, click the first level of China map jump belt drill down the second page (drill down to the municipal map is displayed in the second page)
The renderings are as follows:
In order for you to see the specific effect more clearly, made a GIF display
Here, I use the Echars map implementation and vUE technology stack
The preparatory work
Several files need to be referenced: echars.js, China. js, world.js, geoatlasjson.js
<! -- Map of China -->
<script src=".. /.. / static/modify_echarts - 4.7.0 / China. Js. ""></script>
<! -- World Map -->
<script src=".. /.. / static/modify_echarts - 4.7.0 / world. Js. ""></script>
<script src=".. /js/geoAtlasJson.js"></script>
Copy the codeLevel 1 page section
HTML part
Create two containers for the China map and the world map
<div>
<div class="chinaMap" ref="chinaMap"></div>
<div class="miniWorldMap" ref="miniWorldMap"></div>
</div>
Copy the codeData section
data: function () {
return {
chinaMap: "".// Map of China
worldMap: "".// World map
worldoption: {},
chinaoption:}}, {},mounted: function () {
setTimeout(() = > {
this.$nextTick(function () {
this.chinaConfigure();
this.worldConfigure();
});
}, 0)},Copy the codeChina map configuration section
methods: {
// Map of China configuration code
chinaConfigure() {
this.chinaMap = echarts.init(document.querySelector('.chinaMap'));
//1. Map of China
var chinaMap = ".. /.. /static/echartsMapjsondata/json/province/china.json";
//2. Map of Taiwan Province
var taiWanMap = ".. /.. /static/echartsMapjsondata/json/province/taiwan.json";
//3. Map of Hainan Province
var haiNanMap = ".. /.. /static/echartsMapjsondata/json/province/hainan.json";
//4. Map of Anhui Province
var anHuiMap = ".. /.. /static/echartsMapjsondata/json/province/anhui.json";
//5. Map of Jiangxi Province
var jiangXiMap = ".. /.. /static/echartsMapjsondata/json/province/jiangxi.json";
//6. Map of Hunan Province
var huNanMap = ".. /.. /static/echartsMapjsondata/json/province/hunan.json";
//7. Map of Yunnan Province
var yunNanMap = "/echartsMapjsondata/json/province/yunnan.json";
//8. Map of Guizhou Province
var guiZhouMap = ".. /.. /static/echartsMapjsondata/json/province/guizhou.json";
//9. Map of Guangdong Province
var guangDongMap = ".. /.. /static/echartsMapjsondata/json/province/guangdong.json";
//10. Map of Fujian Province
var fuJianMap = ".. /.. /static/echartsMapjsondata/json/province/fujian.json";
//11. Map of Zhejiang Province
var zheJiangMap = ".. /.. /static/echartsMapjsondata/json/province/zhejiang.json";
//12. Map of Jiangsu Province
var jiangSuMap = ".. /.. /static/echartsMapjsondata/json/province/jiangsu.json";
//13. Map of Sichuan Province
var siChuanMap = ".. /.. /static/echartsMapjsondata/json/province/sichuan.json";
//14. Map of Chongqing
var chongQingMap = ".. /.. /static/echartsMapjsondata/json/province/chongqing.json";
//15. Map of Hubei Province
var huBeiMap = ".. /.. /static/echartsMapjsondata/json/province/hubei.json";
// map of Henan Province
var heNanMap = ".. /.. /static/echartsMapjsondata/json/province/henan.json";
// map of Shandong Province
var shanDongMap = ".. /.. /static/echartsMapjsondata/json/province/shandong.json";
// map of Jilin Province
var jiLinMap = ".. /.. /static/echartsMapjsondata/json/province/jilin.json";
// map of Liaoning Province
var liaoNingMap = ".. /.. /static/echartsMapjsondata/json/province/liaoning.json";
//20. Map of Tianjin
var tianJinMap = ".. /.. /static/echartsMapjsondata/json/province/tianjin.json";
//21. A map of Beijing
var beiJingMap = ".. /.. /static/echartsMapjsondata/json/province/beijing.json";
//22. Map of Hebei Province
var heBeiMap = ".. /.. /static/echartsMapjsondata/json/province/hebei.json";
//23. Map of Shanxi Province
var shanXiMap = ".. /.. /static/echartsMapjsondata/json/province/shanxi.json";
//24. Map of Shaanxi Province
var shanXi2Map = ".. /.. /static/echartsMapjsondata/json/province/shanxi1.json";
//25. Map of Ningxia Hui Autonomous Region
var ningXiaMap = ".. /.. /static/echartsMapjsondata/json/province/ningxia.json";
// map of Qinghai Province
var qingHaiMap = ".. /.. /static/echartsMapjsondata/json/province/qinghai.json";
//27. Map of Tibet Autonomous Region
var xiZangMap = ".. /.. /static/echartsMapjsondata/json/province/xizang.json";
//28. Map of Heilongjiang Province
var heiLongJiangMap = ".. /.. /static/echartsMapjsondata/json/province/heilongjiang.json";
//29. Map of Inner Mongolia Autonomous Region
var neimengGuMap = ".. /.. /static/echartsMapjsondata/json/province/neimenggu.json";
//30. Map of Gansu Province
var ganSuMap = ".. /.. /static/echartsMapjsondata/json/province/gansu.json";
//31. Map of Xinjiang Uygur Autonomous Region
var xinJiangMap = ".. /.. /static/echartsMapjsondata/json/province/xinjiang.json";
//32. Map of Guangxi Zhuang Autonomous Region
var guangxiMap = ".. /.. /static/echartsMapjsondata/json/province/guangxi.json";
var mapJson = [
{
name: "Taiwan".json: taiWanMap,
},
{
name: "Hainan".json: haiNanMap,
},
{
name: "Anhui province".json: anHuiMap,
},
{
name: "Jiangxi".json: jiangXiMap,
},
{
name: "Hunan".json: huNanMap,
},
{
name: "Yunnan".json: yunNanMap,
},
{
name: "Guizhou".json: guiZhouMap,
},
{
name: "Guangdong".json: guangDongMap,
},
{
name: "Fujian".json: fuJianMap,
},
{
name: "Zhejiang".json: zheJiangMap,
},
{
name: "Jiangsu".json: jiangSuMap,
},
{
name: "Sichuan".json: siChuanMap,
},
{
name: "Chongqing".json: chongQingMap,
},
{
name: "Hubei".json: huBeiMap,
},
{
name: "Henan".json: heNanMap,
},
{
name: "Shandong".json: shanDongMap,
},
{
name: "Jilin".json: jiLinMap,
},
{
name: "Liaoning".json: liaoNingMap,
},
{
name: "Tianjin".json: tianJinMap,
},
{
name: "Beijing".json: beiJingMap,
},
{
name: "Hebei".json: heBeiMap,
},
{
name: "Shanxi".json: shanXiMap,
},
{
name: "Shaanxi".json: shanXi2Map,
},
{
name: "The ningxia".json: ningXiaMap,
},
{
name: "Qinghai".json: qingHaiMap,
},
{
name: "Tibet".json: xiZangMap,
},
{
name: "Heilongjiang".json: heiLongJiangMap,
},
{
// name: Inner Mongolia Autonomous Region,
name: Inner Mongolia.json: neimengGuMap,
},
{
name: "Gansu".json: ganSuMap,
},
{
name: "Xinjiang".json: xinJiangMap,
},
{
name: "Guangxi".json: guangxiMap,
},
];
// Set the initial map
var mapname = this.chinaMap;
var data = [
{ _id: "Taiwan".value: 1.NDTZJH: 188.GSZE: "3330156".count: "9,01,302" },
{ _id: "Beijing".value: 2.NDTZJH: 488.GSZE: "3330156".count: "9,01,302" },
{ _id: "Tianjin".value: 3.NDTZJH: 288.GSZE: "3330156".count: "9,01,302" },
{ _id: "Hebei".value: 4.NDTZJH: 388.GSZE: "3330156".count: "9,01,302" },
{ _id: "Shanxi".value: 5.NDTZJH: 188.GSZE: "3330156".count: "9,01,302" },
{ _id: Inner Mongolia.value: 6.NDTZJH: 88.GSZE: "3330156".count: "9,01,302" },
{ _id: "Liaoning".value: 7.NDTZJH: 488.GSZE: "3330156".count: "9,01,302" },
{ _id: "Jilin".value: 8.NDTZJH: 588.GSZE: "3330156".count: "9,01,302" },
{ _id: "Heilongjiang".value: 9.NDTZJH: 688.GSZE: "3330156".count: "9,01,302" },
{ _id: "Shanghai".value: 10.NDTZJH: 788.GSZE: "3330156".count: "9,01,302" },
{ _id: "Jiangsu".value: 11.NDTZJH: 388.GSZE: "3330156".count: "9,01,302" },
{ _id: "Zhejiang".value: 12.NDTZJH: 58.GSZE: "3330156".count: "9,01,302" },
{ _id: "Anhui province".value: 13.NDTZJH: 88.GSZE: "3330156".count: "9,01,302" },
{ _id: "Fujian".value: 14.NDTZJH: 88.GSZE: "3330156".count: "9,01,302" },
{ _id: "Jiangxi".value: 15.NDTZJH: 88.GSZE: "3330156".count: "9,01,302" },
{ _id: "Shandong".value: 16.NDTZJH: 88.GSZE: "3330156".count: "9,01,302" },
{ _id: "Henan".value: 17.NDTZJH: 88.GSZE: "3330156".count: "9,01,302" },
{ _id: "Hubei".value: 18.NDTZJH: 88.GSZE: "3330156".count: "9,01,302" },
{ _id: "Hunan".value: 19.NDTZJH: 88.GSZE: "3330156".count: "9,01,302" },
{ _id: "Chongqing".value: 20.NDTZJH: 88.GSZE: "3330156".count: "9,01,302" },
{ _id: "Sichuan".value: 21.NDTZJH: 88.GSZE: "3330156".count: "9,01,302" },
{ _id: "Guizhou".value: 22.NDTZJH: 88.GSZE: "3330156".count: "9,01,302" },
{ _id: "Yunnan".value: 23.NDTZJH: 88.GSZE: "3330156".count: "9,01,302" },
{ _id: "Tibet".value: 24.NDTZJH: 88.GSZE: "3330156".count: "9,01,302" },
{ _id: "Shaanxi".value: 25.NDTZJH: 88.GSZE: "3330156".count: "9,01,302" },
{ _id: "Gansu".value: 26.NDTZJH: 88.GSZE: "3330156".count: "9,01,302" },
{ _id: "Qinghai".value: 27.NDTZJH: 88.GSZE: "3330156".count: "9,01,302" },
{ _id: "The ningxia".value: 28.NDTZJH: 118.GSZE: "3330156".count: "9,01,302" },
{ _id: "Xinjiang".value: 29.NDTZJH: 88.GSZE: "3330156".count: "9,01,302" },
{ _id: "Guangdong".value: 30.NDTZJH: 88.GSZE: "3330156".count: "9,01,302" },
{ _id: "Guangxi".value: 31.NDTZJH: 88.GSZE: "3330156".count: "9,01,302" },
{ _id: "Hainan".value: 32.NDTZJH: 28.GSZE: "3330156".count: "9,01,302"}, {_id: "Baicheng".value: 132.NDTZJH: 128.GSZE: "3330156".count: "9,01,302"},];this.chinaMap.on('click'.function (e) {
var chooseName = mapJson.filter((item) = > {// We choose one according to the name
return item.name == e.name;
});
// Here chooseName is an array, we need to get json to be interested in printing
SessionStorage will chooseName value to the secondary page, I here different scenes using sessionStorage, we can pass the normal value through vUE.
window.sessionStorage.setItem('mapnamedata'.JSON.stringify(chooseName));
window.parent.parent.location = ".. /group_summarize/group_summarizesec.html";
})
window.onresize = this.chinaMap.resize // Implement map adaptation
var geoCoordMap = {
'Taiwan': [122.23].'Heilongjiang': [126.661669.45.742347].Inner Mongolia: [110.3467.41.4899]."Jilin": [125.8154.44.2584].'Beijing': [116.4551.40.2539]."Liaoning": [123.1238.42.1216]."Hebei": [114.4995.38.1006]."Tianjin": [117.4219.39.4189]."Shanxi": [112.3352.37.9413]."Shaanxi": [109.1162.34.2004]."Gansu": [103.5901.36.3043]."The ningxia": [106.3586.38.1775]."Qinghai": [101.4038.36.8207]."Xinjiang": [87.9236.43.5883]."Tibet": [88.388277.31.56375]."Sichuan": [103.9526.30.7617]."Chongqing": [108.384366.30.439702]."Shandong": [117.1582.36.8701]."Henan": [113.4668.34.6234]."Jiangsu": [118.8062.31.9208]."Anhui province": [117.29.32.0581]."Hubei": [114.3896.30.6628]."Zhejiang": [119.5313.29.8773]."Fujian": [119.4543.25.9222]."Jiangxi": [116.0046.28.6633]."Hunan": [113.0823.28.2568]."Guizhou": [106.6992.26.7682]."Yunnan": [102.9199.25.4663]."Guangdong": [113.12244.23.009505]."Guangxi": [108.479.23.1152]."Hainan": [110.3893.19.8516].'Shanghai': [121.4648.31.2891]};// Assign a value to each locale
var convertData = function (data) {
// Define an array
var res = [];
// Loop over each region value
for (var i = 0; i < data.length; i++) {
// Get the coordinates
var geoCoord = geoCoordMap[data[i]._id];
// Check if there are coordinates
if (geoCoord) {
// Set the value in the array
res.push({
name: data[i]._id,
value: geoCoord.concat(i + 1),
NDTZJH: data[i].NDTZJH,// Annual investment plan
GSZE: data[i].GSZE,// Total estimate
count: data[i].count,// Number of projects}); }}return res;
};
this.chinaoption = {
backgroundColor: 'transparent'.geo: {
map: 'china'.roam: false.zoom: 0.8.label: {
normal: {
show: true.// Whether to display the corresponding place name
textStyle: {
color: '#fff'}},emphasis: { // Corresponding mouse hover effect
show: true.textStyle: {
color: '#fff'}}},itemStyle: {
normal: {
areaColor: "Rgba (2,68,158,. 5)".// Map color RGBA (11, 50, 119,.5)
borderWidth: 1.// Set the outer border
borderColor: "Rgba (65154225, 1)".Rgba (43, 196, 243, 1)
label: {
show: true.// Whether to display the label
textStyle: {
color: "Rgba (255255255, 5)"// Map text color}}},emphasis: {
areaColor: '#01215c',}},regions: [{name: "South Sea Islands".itemStyle: {
// Hide the map of Nanhai Islands
normal: {
Opacity: 0; // This graph is not drawn when it is 0}},label: {
show: false // Hide the text}}],},tooltip: {
trigger: 'item'.show: true.backgroundColor: "transparent".formatter: function (params) {
if (params.data) {
var htmlStr = ' ';
htmlStr += '<div class="bgboder">';
htmlStr += '<div id="city">' + params.name + '/div>
Annual Investment plan:'
+ params.data.NDTZJH + '< span > ten thousand < / span >' +
+ params.data.GSZE + '< span > ten thousand < / span >' + '
+ params.data.count + '< span > ten thousand < / span >' + '</div>';
htmlStr += '</div>';
return htmlStr;
} else{}},textStyle: {
width: 300.height: 300,}},visualMap: {
type: 'piecewise'.inRange: {
color: ['#02F6F9'.'#02F6F9'.'#02F6F9']},pieces: [{min: 0.max: 99.color: 'transparent' }, // Make the map dot transparent
{
min: 100.max: 10000.color: {
type: 'radial'.x: 0.5.y: 0.5.r: 0.5.colorStops: [{offset: 0.color: 'rgba (11,28,92,0)' },
{ offset: 0.8.color: 'rgba (10,94,137, 0.5) },
{ offset: 1.color: 'rgba(2, 246, 249, 1)'}].globalCoord: false // The default is false}}].show: false.textStyle: {
color: '#ffffff'.fontSize: 16}},series: [{type: 'scatter'.coordinateSystem: 'geo'.data: convertData(data),
},
]
}
this.chinaMap.setOption(this.chinaoption);
window.onresize = () = > {
this.chinaMap.resize()
}
window.addEventListener('resize'.() = > {
this.chinaMap.resize()
})
},
},
Copy the codeWorld map configuration section
// World map
worldConfigure() {
this.worldMap = echarts.init(document.querySelector('.miniWorldMap'));
this.worldoption = {
series: [{name: 'World Population (2010)'.type: 'map'.mapType: 'world'.clickable: false.// selectedMode:true,
silent: true.// zoom:2,// Map zoom 1.2 times
// roam: true,
itemStyle: {
normal: {
areaColor: '#1044A9'.borderColor: 'none'
},
emphasis: {// Corresponding mouse hover effect
show: true.itemStyle: { areaColor: '#1044A9'}}},label: {
show: false,},emphasis: {
show: false
},
data: [{name: 'Afghanistan'.value: 28397.812 },
{ name: 'Angola'.value: 19549.124 },
{ name: 'Albania'.value: 3150.143 },
{ name: 'United Arab Emirates'.value: 8441.537 },
{ name: 'Argentina'.value: 40374.224 },
{ name: 'Armenia'.value: 2963.496 },
{ name: 'French Southern and Antarctic Lands'.value: 268.065 },
{ name: 'Australia'.value: 22404.488 },
{ name: 'Austria'.value: 8401.924 },
{ name: 'Azerbaijan'.value: 9094.718 },
{ name: 'Burundi'.value: 9232.753 },
{ name: 'Belgium'.value: 10941.288 },
{ name: 'Benin'.value: 9509.798 },
{ name: 'Burkina Faso'.value: 15540.284 },
{ name: 'Bangladesh'.value: 151125.475 },
{ name: 'Bulgaria'.value: 7389.175 },
{ name: 'The Bahamas'.value: 66402.316 },
{ name: 'Bosnia and Herzegovina'.value: 3845.929 },
{ name: 'Belarus'.value: 9491.07 },
{ name: 'Belize'.value: 308.595 },
{ name: 'Bermuda'.value: 64.951 },
{ name: 'Bolivia'.value: 716.939 },
{ name: 'Brazil'.value: 195210.154 },
{ name: 'Brunei'.value: 27.223 },
{ name: 'Bhutan'.value: 716.939 },
{ name: 'Botswana'.value: 1969.341 },
{ name: 'Central African Republic'.value: 4349.921 },
{ name: 'Canada'.value: 34126.24 },
{ name: 'Switzerland'.value: 7830.534 },
{ name: 'Chile'.value: 17150.76 },
{ name: 'China'.value: 1359821.465 },
{ name: 'Ivory Coast'.value: 60508.978 },
{ name: 'Cameroon'.value: 20624.343 },
{ name: 'Democratic Republic of the Congo'.value: 62191.161 },
{ name: 'Republic of the Congo'.value: 3573.024 },
{ name: 'Colombia'.value: 46444.798 },
{ name: 'Costa Rica'.value: 4669.685 },
{ name: 'Cuba'.value: 11281.768 },
{ name: 'Northern Cyprus'.value: 1.468 },
{ name: 'Cyprus'.value: 1103.685 },
{ name: 'Czech Republic'.value: 10553.701 },
{ name: 'Germany'.value: 83017.404 },
{ name: 'Djibouti'.value: 834.036 },
{ name: 'Denmark'.value: 5550.959 },
{ name: 'Dominican Republic'.value: 10016.797 },
{ name: 'Algeria'.value: 37062.82 },
{ name: 'Ecuador'.value: 15001.072 },
{ name: 'Egypt'.value: 78075.705 },
{ name: 'Eritrea'.value: 5741.159 },
{ name: 'Spain'.value: 46182.038 },
{ name: 'Estonia'.value: 1298.533 },
{ name: 'Ethiopia'.value: 87095.281 },
{ name: 'Finland'.value: 5367.693 },
{ name: 'Fiji'.value: 860.559 },
{ name: 'Falkland Islands'.value: 49.581 },
{ name: 'France'.value: 63230.866 },
{ name: 'Gabon'.value: 1556.222 },
{ name: 'United Kingdom'.value: 62066.35 },
{ name: 'Georgia'.value: 4388.674 },
{ name: 'Ghana'.value: 24262.901 },
{ name: 'Guinea'.value: 10876.033 },
{ name: 'Gambia'.value: 1680.64 },
{ name: 'Guinea Bissau'.value: 10876.033 },
{ name: 'Equatorial Guinea'.value: 696.167 },
{ name: 'Greece'.value: 11109.999 },
{ name: 'Greenland'.value: 56.546 },
{ name: 'Guatemala'.value: 14341.576 },
{ name: 'French Guiana'.value: 231.169 },
{ name: 'Guyana'.value: 786.126 },
{ name: 'Honduras'.value: 7621.204 },
{ name: 'Croatia'.value: 4338.027 },
{ name: 'Haiti'.value: 9896.4 },
{ name: 'Hungary'.value: 10014.633 },
{ name: 'Indonesia'.value: 240676.485 },
{ name: 'India'.value: 1205624.648 },
{ name: 'Ireland'.value: 4467.561 },
{ name: 'Iran'.value: 240676.485 },
{ name: 'Iraq'.value: 30962.38 },
{ name: 'Iceland'.value: 318.042 },
{ name: 'Israel'.value: 7420.368 },
{ name: 'Italy'.value: 60508.978 },
{ name: 'Jamaica'.value: 2741.485 },
{ name: 'Jordan'.value: 6454.554 },
{ name: 'Japan'.value: 127352.833 },
{ name: 'Kazakhstan'.value: 15921.127 },
{ name: 'Kenya'.value: 40909.194 },
{ name: 'Kyrgyzstan'.value: 5334.223 },
{ name: 'Cambodia'.value: 14364.931 },
{ name: 'South Korea'.value: 51452.352 },
{ name: 'Kosovo'.value: 97.743 },
{ name: 'Kuwait'.value: 2991.58 },
{ name: 'Laos'.value: 6395.713 },
{ name: 'Lebanon'.value: 4341.092 },
{ name: 'Liberia'.value: 3957.99 },
{ name: 'Libya'.value: 6040.612 },
{ name: 'Sri Lanka'.value: 20758.779 },
{ name: 'Lesotho'.value: 2008.921 },
{ name: 'Lithuania'.value: 3068.457 },
{ name: 'Luxembourg'.value: 507.885 },
{ name: 'Latvia'.value: 2090.519 },
{ name: 'Morocco'.value: 31642.36 },
{ name: 'Moldova'.value: 103.619 },
{ name: 'Madagascar'.value: 21079.532 },
{ name: 'Mexico'.value: 117886.404 },
{ name: 'Macedonia'.value: 507.885 },
{ name: 'Mali'.value: 13985.961 },
{ name: 'Myanmar'.value: 51931.231 },
{ name: 'Montenegro'.value: 620.078 },
{ name: 'Mongolia'.value: 2712.738 },
{ name: 'Mozambique'.value: 23967.265 },
{ name: 'Mauritania'.value: 3609.42 },
{ name: 'Malawi'.value: 15013.694 },
{ name: 'Malaysia'.value: 28275.835 },
{ name: 'Namibia'.value: 2178.967 },
{ name: 'New Caledonia'.value: 246.379 },
{ name: 'Niger'.value: 15893.746 },
{ name: 'Nigeria'.value: 159707.78 },
{ name: 'Nicaragua'.value: 5822.209 },
{ name: 'Netherlands'.value: 16615.243 },
{ name: 'Norway'.value: 4891.251 },
{ name: 'Nepal'.value: 26846.016 },
{ name: 'New Zealand'.value: 4368.136 },
{ name: 'Oman'.value: 2802.768 },
{ name: 'Pakistan'.value: 173149.306 },
{ name: 'Panama'.value: 3678.128 },
{ name: 'Peru'.value: 29262.83 },
{ name: 'Philippines'.value: 93444.322 },
{ name: 'Papua New Guinea'.value: 6858.945 },
{ name: 'Poland'.value: 38198.754 },
{ name: 'Puerto Rico'.value: 3709.671 },
{ name: 'North Korea'.value: 1.468 },
{ name: 'Portugal'.value: 10589.792 },
{ name: 'Paraguay'.value: 6459.721 },
{ name: 'Qatar'.value: 1749.713 },
{ name: 'Romania'.value: 21861.476 },
{ name: 'Russia'.value: 21861.476 },
{ name: 'Rwanda'.value: 10836.732 },
{ name: 'Western Sahara'.value: 514.648 },
{ name: 'Saudi Arabia'.value: 27258.387 },
{ name: 'Sudan'.value: 35652.002 },
{ name: 'South Sudan'.value: 9940.929 },
{ name: 'Senegal'.value: 12950.564 },
{ name: 'Solomon Islands'.value: 526.447 },
{ name: 'Sierra Leone'.value: 5751.976 },
{ name: 'El Salvador'.value: 6218.195 },
{ name: 'Somaliland'.value: 9636.173 },
{ name: 'Somalia'.value: 9636.173 },
{ name: 'Republic of Serbia'.value: 3573.024 },
{ name: 'Suriname'.value: 524.96 },
{ name: 'Slovakia'.value: 5433.437 },
{ name: 'Slovenia'.value: 2054.232 },
{ name: 'Sweden'.value: 9382.297 },
{ name: 'Swaziland'.value: 1193.148 },
{ name: 'Syria'.value: 7830.534 },
{ name: 'Chad'.value: 11720.781 },
{ name: 'Togo'.value: 6306.014 },
{ name: 'Thailand'.value: 66402.316 },
{ name: 'Tajikistan'.value: 7627.326 },
{ name: 'Turkmenistan'.value: 5041.995 },
{ name: 'East Timor'.value: 10016.797 },
{ name: 'Trinidad and Tobago'.value: 1328.095 },
{ name: 'Tunisia'.value: 10631.83 },
{ name: 'Turkey'.value: 72137.546 },
{ name: 'United Republic of Tanzania'.value: 44973.33 },
{ name: 'Uganda'.value: 33987.213 },
{ name: 'Ukraine'.value: 46050.22 },
{ name: 'Uruguay'.value: 3371.982 },
{ name: 'United States of America'.value: 312247.116 },
{ name: 'Uzbekistan'.value: 27769.27 },
{ name: 'Venezuela'.value: 236.299 },
{ name: 'Vietnam'.value: 89047.397 },
{ name: 'Vanuatu'.value: 236.299 },
{ name: 'West Bank'.value: 13.565 },
{ name: 'Yemen'.value: 22763.008 },
{ name: 'South Africa'.value: 51452.352 },
{ name: 'Zambia'.value: 13216.985 },
{ name: 'Zimbabwe'.value: 13076.978}]}]};this.worldMap.setOption(this.worldoption);
window.onresize = () = > {
this.worldMap.resize()
}
window.addEventListener('resize'.() = > {
this.worldMap.resize()
})
this.chgMap();// Toggle the map function
},
Copy the codeToggle map function configuration
// Toggle the map
chgMap() {
var worldBox = document.querySelector(".miniWorldMap");
var flag = true;
var _this = this;
worldBox.onclick = function () {
if (flag) {
_this.chinaMap.clear();// Clear the chart
_this.chinaMap.setOption(_this.worldoption);// Change the map of China to the world map
_this.worldMap.clear();// Clear the chart
// Hide the words on the map of China
_this.chinaoption.geo.label.normal.show = false;
_this.chinaoption.geo.label.emphasis.show = false;
_this.chinaoption.tooltip.show = false;// Hide the prompt hover box
_this.chinaoption.geo.itemStyle.emphasis.areaColor = 'rgba (2,68,158,. 5)';
_this.worldMap.setOption(_this.chinaoption);// Change the world map to China map
_this.worldMap.off('click');
flag = false;
} else {
_this.chinaMap.clear();
_this.chinaMap.setOption(_this.worldoption);
_this.chinaoption.geo.label.normal.show = true;// Redisplay the characters on the map of China
_this.chinaoption.geo.label.emphasis.show = true;
_this.chinaoption.tooltip.show = true;// Hide the prompt hover box
_this.chinaoption.geo.itemStyle.emphasis.areaColor = '#01215c';
_this.chinaMap.setOption(_this.chinaoption);// Change the map of China to the world map
_this.worldMap.clear();// Clear the chart
_this.worldMap.setOption(_this.worldoption);// Change the world map to China map
_this.worldMap.off('click');
flag = true; }}},Copy the codeSecondary page section
The secondary page is mainly the drill down part of the Map of China and shows some other HTML elements
HTML part
Second level pages first have to create a container to hold the map
<div class="chinaMap" ref="chinaMap"></div>
Copy the codeData section
data: function () {
return {
mapname: "".The name / / map
mapnamejson: "".Json / / map
chinaMap: "".// Map of China
chinaoption:}}, {},Copy the codeSecond page drill down the map section
Mapname and mapNamejson are used to flexibly correspond to maps under provinces
mounted: function () {
this.mapnamefun();
},
methods: {
// Get the value from the first page and assign it
mapnamefun() {
var chooseName = JSON.parse(window.sessionStorage.getItem('mapnamedata'));
this.mapname = chooseName[0].name;
this.mapnamejson = chooseName[0].json;
},
// Map of China configuration code
chinaConfigure() {
this.chinaMap = echarts.init(document.querySelector('.chinaMap'));
// Define a global variable to count the number of municipalities in each province
let num = 0;
//1. Map of China
var chinaMap = ".. /.. /static/echartsMapjsondata/json/province/china.json";
//2. Map of Taiwan Province
var taiWanMap = ".. /.. /static/echartsMapjsondata/json/province/taiwan.json";
//3. Map of Hainan Province
var haiNanMap = ".. /.. /static/echartsMapjsondata/json/province/hainan.json";
//4. Map of Anhui Province
var anHuiMap = ".. /.. /static/echartsMapjsondata/json/province/anhui.json";
//5. Map of Jiangxi Province
var jiangXiMap = ".. /.. /static/echartsMapjsondata/json/province/jiangxi.json";
//6. Map of Hunan Province
var huNanMap = ".. /.. /static/echartsMapjsondata/json/province/hunan.json";
//7. Map of Yunnan Province
var yunNanMap = "/echartsMapjsondata/json/province/yunnan.json";
//8. Map of Guizhou Province
var guiZhouMap = ".. /.. /static/echartsMapjsondata/json/province/guizhou.json";
//9. Map of Guangdong Province
var guangDongMap = ".. /.. /static/echartsMapjsondata/json/province/guangdong.json";
//10. Map of Fujian Province
var fuJianMap = ".. /.. /static/echartsMapjsondata/json/province/fujian.json";
//11. Map of Zhejiang Province
var zheJiangMap = ".. /.. /static/echartsMapjsondata/json/province/zhejiang.json";
//12. Map of Jiangsu Province
var jiangSuMap = ".. /.. /static/echartsMapjsondata/json/province/jiangsu.json";
//13. Map of Sichuan Province
var siChuanMap = ".. /.. /static/echartsMapjsondata/json/province/sichuan.json";
//14. Map of Chongqing
var chongQingMap = ".. /.. /static/echartsMapjsondata/json/province/chongqing.json";
//15. Map of Hubei Province
var huBeiMap = ".. /.. /static/echartsMapjsondata/json/province/hubei.json";
// map of Henan Province
var heNanMap = ".. /.. /static/echartsMapjsondata/json/province/henan.json";
// map of Shandong Province
var shanDongMap = ".. /.. /static/echartsMapjsondata/json/province/shandong.json";
// map of Jilin Province
var jiLinMap = ".. /.. /static/echartsMapjsondata/json/province/jilin.json";
// map of Liaoning Province
var liaoNingMap = ".. /.. /static/echartsMapjsondata/json/province/liaoning.json";
//20. Map of Tianjin
var tianJinMap = ".. /.. /static/echartsMapjsondata/json/province/tianjin.json";
//21. A map of Beijing
var beiJingMap = ".. /.. /static/echartsMapjsondata/json/province/beijing.json";
//22. Map of Hebei Province
var heBeiMap = ".. /.. /static/echartsMapjsondata/json/province/hebei.json";
//23. Map of Shanxi Province
var shanXiMap = ".. /.. /static/echartsMapjsondata/json/province/shanxi.json";
//24. Map of Shaanxi Province
var shanXi2Map = ".. /.. /static/echartsMapjsondata/json/province/shanxi1.json";
//25. Map of Ningxia Hui Autonomous Region
var ningXiaMap = ".. /.. /static/echartsMapjsondata/json/province/ningxia.json";
// map of Qinghai Province
var qingHaiMap = ".. /.. /static/echartsMapjsondata/json/province/qinghai.json";
//27. Map of Tibet Autonomous Region
var xiZangMap = ".. /.. /static/echartsMapjsondata/json/province/xizang.json";
//28. Map of Heilongjiang Province
var heiLongJiangMap = ".. /.. /static/echartsMapjsondata/json/province/heilongjiang.json";
//29. Map of Inner Mongolia Autonomous Region
var neimengGuMap = ".. /.. /static/echartsMapjsondata/json/province/neimenggu.json";
//30. Map of Gansu Province
var ganSuMap = ".. /.. /static/echartsMapjsondata/json/province/gansu.json";
//31. Map of Xinjiang Uygur Autonomous Region
var xinJiangMap = ".. /.. /static/echartsMapjsondata/json/province/xinjiang.json";
//32. Map of Guangxi Zhuang Autonomous Region
var guangxiMap = ".. /.. /static/echartsMapjsondata/json/province/guangxi.json";
var mapJson = [
{
name: "Taiwan".json: taiWanMap,
},
{
name: "Hainan".json: haiNanMap,
},
{
name: "Anhui province".json: anHuiMap,
},
{
name: "Jiangxi".json: jiangXiMap,
},
{
name: "Hunan".json: huNanMap,
},
{
name: "Yunnan".json: yunNanMap,
},
{
name: "Guizhou".json: guiZhouMap,
},
{
name: "Guangdong".json: guangDongMap,
},
{
name: "Fujian".json: fuJianMap,
},
{
name: "Zhejiang".json: zheJiangMap,
},
{
name: "Jiangsu".json: jiangSuMap,
},
{
name: "Sichuan".json: siChuanMap,
},
{
name: "Chongqing".json: chongQingMap,
},
{
name: "Hubei".json: huBeiMap,
},
{
name: "Henan".json: heNanMap,
},
{
name: "Shandong".json: shanDongMap,
},
{
name: "Jilin".json: jiLinMap,
},
{
name: "Liaoning".json: liaoNingMap,
},
{
name: "Tianjin".json: tianJinMap,
},
{
name: "Beijing".json: beiJingMap,
},
{
name: "Hebei".json: heBeiMap,
},
{
name: "Shanxi".json: shanXiMap,
},
{
name: "Shaanxi".json: shanXi2Map,
},
{
name: "The ningxia".json: ningXiaMap,
},
{
name: "Qinghai".json: qingHaiMap,
},
{
name: "Tibet".json: xiZangMap,
},
{
name: "Heilongjiang".json: heiLongJiangMap,
},
{
// name: Inner Mongolia Autonomous Region,
name: Inner Mongolia.json: neimengGuMap,
},
{
name: "Gansu".json: ganSuMap,
},
{
name: "Xinjiang".json: xinJiangMap,
},
{
name: "Guangxi".json: guangxiMap,
},
];
// There are only some data below Jilin province
var data = [
{ name: "White City".value: 1.ndtzjh: 128.gsze: "3330156".xmsl: "9,01,302" },
{ name: "Songyuan".value: 2.ndtzjh: 22.gsze: "3330156".xmsl: "9,01,302" },
{ name: "Hulun Buir".value: 3.ndtzjh: 128.gsze: "3330156".xmsl: "9,01,302" },
{ name: "Baotou".value: 4.ndtzjh: 22.gsze: "3330156".xmsl: "9,01,302" },
{ name: "Changchun".value: 4.ndtzjh: 22.gsze: "3330156".xmsl: "9,01,302" },
{ name: Jilin City.value: 4.ndtzjh: 22.gsze: "3330156".xmsl: "9,01,302"},];window.onresize = this.chinaMap.resize // Implement map adaptation
var _this = this;
$.getJSON(_this.mapnamejson, function (geoJson) {
// console.log(geoJson.features)
var geoCoorddata = geoJson.features;
echarts.registerMap(_this.mapname, geoJson);// Call the map we registered with the JSON object
_this.chinaMap.hideLoading();// File loading animation
var geoCoordMap = {};
geoCoordMap = geoCoorddata.reduce((res, { properties: { cp, name } }) = > (res[name] = cp, res), {});
// console.log(geoCoordMap)
// Assign a value to each locale
var convertData = function (data) {
// Define an array
var res = [];
// Loop over each region value
for (var i = 0; i < data.length; i++) {
// Get the coordinates
var geoCoord = geoCoordMap[data[i].name];
// Check if there are coordinates
if (geoCoord) {
// Set the value in the array
res.push({
name: data[i].name,
value: geoCoord.concat(i + 1),
ndtzjh: data[i].ndtzjh,// Annual investment plan
gsze: data[i].gsze,// Total estimate
xmsl: data[i].xmsl,// Number of projects}); }}return res;
};
_this.chinaoption = {
backgroundColor: 'transparent'.geo: {
// map: 'china',
map: _this.mapname,
roam: false.zoom: 1.label: {
normal: {
show: true.// Whether to display the corresponding place name
textStyle: {
color: '#fff'}},emphasis: { // Corresponding mouse hover effect
show: true.textStyle: {
color: '#fff'}}},itemStyle: {
normal: {
areaColor: "Rgba (2,68,158,. 5)".// Map color RGBA (11, 50, 119,.5)
borderWidth: 1.// Set the outer border
borderColor: "Rgba (65154225, 1)".Rgba (43, 196, 243, 1)
label: {
show: true.// Whether to display the label
textStyle: {
color: "Rgba (255255255, 5)"// Map text color}}},emphasis: {
areaColor: '#01215c',}},regions: [{name: "South Sea Islands".itemStyle: {
// Hide the map of Nanhai Islands
normal: {
Opacity: 0; // This graph is not drawn when it is 0}},label: {
show: false // Hide the text}}],},tooltip: {
trigger: 'item'.show: true.backgroundColor: "transparent".formatter: function (params) {
// console.log(params)
if (params.data) {
var htmlStr = ' ';
htmlStr += '<div class="bgboder">';
htmlStr += '<div id="city">' + params.name + '/div>
Annual Investment plan:'
+ params.data.ndtzjh + '< span > ten thousand < / span >' +
+ params.data.gsze + '< span > ten thousand < / span >' + '
+ params.data.xmsl + '< span > ten thousand < / span >' + '</div>';
htmlStr += '</div>';
return htmlStr;
} else{}},textStyle: {
width: 300.height: 300,}},visualMap: {
type: 'piecewise'.inRange: {
color: ['#02F6F9'.'#02F6F9'.'#02F6F9']},pieces: [
// {min: 0, Max: 99, color: 'transparent'}, // set the map dots to a transparent color
{ min: 0.max: 99.color: 'transparent' }, // Set the map dot to transparent color
{
min: 100.max: 10000.color: {
type: 'radial'.x: 0.5.y: 0.5.r: 0.5.colorStops: [{offset: 0.color: 'rgba (11,28,92,0)' },
{ offset: 0.8.color: 'rgba (10,94,137, 0.5) },
{ offset: 1.color: 'rgba(2, 246, 249, 1)'}].globalCoord: false // The default is false}}].show: false.textStyle: {
color: '#ffffff'.fontSize: 16}},series: [{type: 'scatter'.coordinateSystem: 'geo'.data: convertData(data),
},
]
}
_this.chinaMap.clear()
_this.chinaMap.setOption(_this.chinaoption);
})
window.onresize = () = > {
this.chinaMap.resize()
}
window.addEventListener('resize'.() = > {
this.chinaMap.resize()
})
},
},
Copy the codeNote: China configuration map reference multiple JSON files, we can extract it will be better, I did not do here, we have what good suggestions or better methods can be put forward for your reference and learning, continuous progress and growth.
Thank you for reading this article. If you like it, you can like it or leave a comment 💕~~~~. Thank you for your time
Column recommended
Recommend their own column, welcome everyone to collect attention to 😊~
- Set the interview
- Native js set
- Vue set
- Visual set
- CSS set