vue2创建echarts地图--可切换国家、省份
版本说明
vue
公司用的版本是vue2，vue3没有试，有时间之后会用vue3再试一次
echarts
直接复制粘贴了公司的echarts离线文档，版本是2.2.7，但是echarts高版本可以兼容低版本，所以不用担心
创建步骤
自己新建的文件需要按步骤来
公司文件的话可以省略步骤1、2，有包的话也可以省略步骤3
1、下载echarts
npm install echarts --save-dev
2、在main.js引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
可能存在的报错
解决办法：main.js中的
import echarts from 'echarts'
改为
import * as echarts from 'echarts'
3、从网上下载地图js或者json文件，并放到指定文件夹下
自己整理了一些js、json地图文件，有时间会上传
- node_modules
- echarts
- map
- js
- world.js
- china.js
- province
- 各省市地图js文件
- countries
- 各国地图js文件
- json
- world.json
- china.json
- province
- 各省市地图json文件
- countries
- 各国地图js文件
- js
- map
- echarts
4、创建.vue文件并引入需要的地图包
地图包有全球、国家、省份等，需要哪个就要引入哪个，否则无法正常显示。
注意：
1、用npm下载echarts之后是没有这些js、json文件的，需要自己从网上下载并导入
2、两种引入地图文件的方式
引入js地图文件
import "../../../node_modules/echarts/map/js/world.js";//引入世界地图
import '../../node_modules/echarts/map/js/china.js' // 引入中国地图
import '../../node_modules/echarts/map/js/province/guangdong.js' // 引入中国广东地图
引入json地图文件
在data中返回变量
jsonUSA: require("../../../node_modules/echarts/map/json/countries/USA.json"),
在initChart方法中重命名，第一个参数"usa"需要与mapType对应
this.$echarts.registerMap("usa", this.jsonUSA, {});
5、在.vue文件创建echarts
直接复制echarts2.2.7版本中标准地图（世界地图，值域漫游）的option配置文件。
有一些地方需要注意：（代码里做了注释）
1、mapType–地图类型（更改此处可以切换地图类型）
2、nameMap–名称映射（如果给的数据中name想改成中文需要用到）
全部代码如下：
<template>
<div class="echarts">
<!-- 切换显示地图区域 -->
<el-dropdown @command="selectArea">
<span
>{{ areaSelect }}<i class="el-icon-arrow-down el-icon--right"></i
></span>
<el-dropdown-menu>
<el-dropdown-item
v-for="(item, index) of areaList"
:key="index"
:command="item"
>{{ item.mapArea }}</el-dropdown-item
>
</el-dropdown-menu>
</el-dropdown>
<!-- 显示地图 -->
<div style="height: 300px; width: 400px" ref="myEchart"></div>
</div>
</template>
<script>
// 两种方式引入地图文件
// 第一种，引入js地图文件
import "../../../node_modules/echarts/map/js/world.js"; //引入世界地图js文件
import "../../../node_modules/echarts/map/js/china.js"; //引入中国地图js文件
import "../../../node_modules/echarts/map/js/province/beijing.js"; //引入北京地图js文件
import "../../../node_modules/echarts/map/js/province/taiwan.js"; //引入台湾地图js文件
import "../../../node_modules/echarts/map/js/province/hebei.js"; //引入河北地图js文件
export default {
name: "echarts",
data() {
return {
// 第二种，引入json地图文件，下方还需要用registerMap处理
jsonUSA: require("../../../node_modules/echarts/map/json/countries/USA.json"), //引入美国地图json文件
nameMap: require("@/assets/echarts/nameMap.json"), //引入地区映射文件--引入该文件后，echarts.data.name的值便可写成中国、美国等中文名称，nameMap json文件附在最后
areaList: [
{
mapType: "world",
mapArea: "世界",
},
{
mapType: "china",
mapArea: "中国",
},
{
mapType: "usa",
mapArea: "美国",
},
{
mapType: "北京",
mapArea: "北京",
},
{
mapType: "台湾",
mapArea: "台湾",
},
{
mapType: "河北",
mapArea: "河北",
},
],
areaSelect: "世界",
typeSelect: "world",
};
},
mounted() {
this.initChart();
},
methods: {
// 选择需要显示的地区
selectArea(val) {
this.areaSelect = val.mapArea; //绑定el-dropdown选择的区域
this.typeSelect = val.mapType; //绑定所选区域对应的maptype
this.initChart();
},
initChart() {
// this.$nextTick(() => {
let chart = this.$echarts.init(this.$refs.myEchart);
this.$echarts.registerMap("usa", this.jsonUSA, {}); //我把此处理解为重命名，usa与mapType需要一致
// window.onresize = echarts.init(this.$refs.myEchart).resize;
// 把配置和数据放这里
chart.setOption({
// 标题
title: {
text: "World Population (2010)",
subtext:
"from United Nations, Total population, both sexes combined, as of 1 July (thousands)",
sublink: "http://esa.un.org/wpp/Excel-Data/population.htm",
x: "center",
y: "top",
},
// 鼠标悬浮提示框
tooltip: {
trigger: "item",
formatter: function (params) {
var value = (params.value + "").split(".");
value =
value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, "$1,") +
"." +
value[1];
return params.seriesName + "<br/>" + params.name + " : " + value;
},
},
// 右侧工具栏
toolbox: {
show: true,
orient: "vertical",
x: "right",
y: "center",
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true },
},
},
// 左侧数值范围
dataRange: {
min: 0,
max: 1000000,
text: ["High", "Low"],
realtime: false,
calculable: true,
color: ["orangered", "yellow", "lightskyblue"],
},
// ****数据源及相关配置，重点注意****
series: [
{
name: "World Population (2010)",
type: "map",
// ****mapType--显示的地图区域****
//1、mapType可以写成定值
// mapType: "台湾",
//2、也可以绑定变量切换显示不同区域的地图
mapType: this.typeSelect,
// ****引入nameMap之后，data.name也要同时更改****
// 1、可以写定nameMap属性
// nameMap: {
// China: "中国",
// Japan: "日本",
// },
// 2、可以从外部导入nameMap属性
// nameMap: this.nameMap,
roam: true,
mapLocation: {
y: 60,
},
itemStyle: {
emphasis: { label: { show: true } },
},
// 数据源
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 },
],
},
],
});
// });
},
},
};
</script>
</script>
附上地区映射表-namemap
{
"Afghanistan": "阿富汗",
"Angola": "安哥拉",
"Albania": "阿尔巴尼亚",
"Algeria": "阿尔及利亚",
"Argentina": "阿根廷",
"Armenia": "亚美尼亚",
"Australia": "澳大利亚",
"Austria": "奥地利",
"Azerbaijan": "阿塞拜疆",
"Bahamas": "巴哈马",
"Bangladesh": "孟加拉国",
"Belgium": "比利时",
"Benin": "贝宁",
"Burkina Faso": "布基纳法索",
"Burundi": "布隆迪",
"Bulgaria": "保加利亚",
"Bosnia and Herz.": "波斯尼亚和黑塞哥维那",
"Belarus": "白俄罗斯",
"Belize": "伯利兹",
"Bermuda": "百慕大群岛",
"Bolivia": "玻利维亚",
"Brazil": "巴西",
"Brunei": "文莱",
"Bhutan": "不丹",
"Botswana": "博茨瓦纳",
"Cambodia": "柬埔寨",
"Cameroon": "喀麦隆",
"Canada": "加拿大",
"Central African Rep.": "中非共和国",
"Chad": "乍得",
"Chile": "智利",
"China": "中国",
"Colombia": "哥伦比亚",
"Congo": "刚果",
"Costa Rica": "哥斯达黎加",
"Côte d'Ivoire": "科特迪瓦",
"Croatia": "克罗地亚",
"Cuba": "古巴",
"Cyprus": "塞浦路斯",
"Czech Rep.": "捷克共和国",
"Dem. Rep. Korea": "韩国",
"Dem. Rep. Congo": "民主刚果",
"Denmark": "丹麦",
"Djibouti": "吉布提",
"Dominican Rep.": "多米尼加共和国",
"Ecuador": "厄瓜多尔",
"Egypt": "埃及",
"El Salvador": "萨尔瓦多",
"Eq. Guinea": "赤道几内亚",
"Eritrea": "厄立特里亚",
"Estonia": "爱沙尼亚",
"Ethiopia": "埃塞俄比亚",
"Falkland Is.": "福克兰群岛",
"Fiji": "斐济",
"Finland": "芬兰",
"France": "法国",
"French Guiana": "法属圭亚那",
"Fr. S. Antarctic Lands": "法属南部领地",
"Gabon": "加蓬",
"Gambia": "冈比亚",
"Germany": "德国",
"Georgia": "佐治亚州",
"Ghana": "加纳",
"Greece": "希腊",
"Greenland": "格陵兰",
"Guatemala": "危地马拉",
"Guinea": "几内亚",
"Guinea-Bissau": "几内亚比绍",
"Guyana": "圭亚那",
"Haiti": "海地",
"Heard I. and McDonald Is.": "赫德岛和麦克唐纳群岛",
"Honduras": "洪都拉斯",
"Hungary": "匈牙利",
"Iceland": "冰岛",
"India": "印度",
"Indonesia": "印度尼西亚",
"Iran": "伊朗",
"Iraq": "伊拉克",
"Ireland": "爱尔兰",
"Israel": "以色列",
"Italy": "意大利",
"Ivory Coast": "象牙海岸",
"Jamaica": "牙买加",
"Japan": "日本",
"Jordan": "乔丹",
"Kashmir": "克什米尔",
"Kazakhstan": "哈萨克斯坦",
"Kenya": "肯尼亚",
"Kosovo": "科索沃",
"Kuwait": "科威特",
"Kyrgyzstan": "吉尔吉斯斯坦",
"Laos": "老挝",
"Lao PDR": "老挝人民民主共和国",
"Latvia": "拉脱维亚",
"Lebanon": "黎巴嫩",
"Lesotho": "莱索托",
"Liberia": "利比里亚",
"Libya": "利比亚",
"Lithuania": "立陶宛",
"Luxembourg": "卢森堡",
"Madagascar": "马达加斯加",
"Macedonia": "马其顿",
"Malawi": "马拉维",
"Malaysia": "马来西亚",
"Mali": "马里",
"Mauritania": "毛里塔尼亚",
"Mexico": "墨西哥",
"Moldova": "摩尔多瓦",
"Mongolia": "蒙古",
"Montenegro": "黑山",
"Morocco": "摩洛哥",
"Mozambique": "莫桑比克",
"Myanmar": "缅甸",
"Namibia": "纳米比亚",
"Netherlands": "荷兰",
"New Caledonia": "新喀里多尼亚",
"New Zealand": "新西兰",
"Nepal": "尼泊尔",
"Nicaragua": "尼加拉瓜",
"Niger": "尼日尔",
"Nigeria": "尼日利亚",
"Korea": "朝鲜",
"Northern Cyprus": "北塞浦路斯",
"Norway": "挪威",
"Oman": "阿曼",
"Pakistan": "巴基斯坦",
"Panama": "巴拿马",
"Papua New Guinea": "巴布亚新几内亚",
"Paraguay": "巴拉圭",
"Peru": "秘鲁",
"Republic of the Congo": "刚果共和国",
"Philippines": "菲律宾",
"Poland": "波兰",
"Portugal": "葡萄牙",
"Puerto Rico": "波多黎各",
"Qatar": "卡塔尔",
"Republic of Seychelles": "塞舌尔共和国",
"Romania": "罗马尼亚",
"Russia": "俄罗斯",
"Rwanda": "卢旺达",
"Samoa": "萨摩亚",
"Saudi Arabia": "沙特阿拉伯",
"Senegal": "塞内加尔",
"Serbia": "塞尔维亚",
"Sierra Leone": "塞拉利昂",
"Slovakia": "斯洛伐克",
"Slovenia": "斯洛文尼亚",
"Solomon Is.": "所罗门群岛",
"Somaliland": "索马里兰",
"Somalia": "索马里",
"South Africa": "南非",
"S. Geo. and S. Sandw. Is.": "南乔治亚和南桑德威奇群岛",
"S. Sudan": "南苏丹",
"Spain": "西班牙",
"Sri Lanka": "斯里兰卡",
"Sudan": "苏丹",
"Suriname": "苏里南",
"Swaziland": "斯威士兰",
"Sweden": "瑞典",
"Switzerland": "瑞士",
"Syria": "叙利亚",
"Tajikistan": "塔吉克斯坦",
"Tanzania": "坦桑尼亚",
"Thailand": "泰国",
"The Kingdom of Tonga": "汤加王国",
"Timor-Leste": "东帝汶",
"Togo": "多哥",
"Trinidad and Tobago": "特立尼达和多巴哥",
"Tunisia": "突尼斯",
"Turkey": "土耳其",
"Turkmenistan": "土库曼斯坦",
"Uganda": "乌干达",
"Ukraine": "乌克兰",
"United Arab Emirates": "阿拉伯联合酋长国",
"United Kingdom": "大不列颠联合王国",
"United Republic of Tanzania": "坦桑尼亚联合共和国",
"United States": "美国",
"United States of America": "美利坚合众国",
"Uruguay": "乌拉圭",
"Uzbekistan": "乌兹别克斯坦",
"Vanuatu": "瓦努阿图",
"Venezuela": "委内瑞拉",
"Vietnam": "越南",
"West Bank": "西岸",
"W. Sahara": "西撒哈拉",
"Yemen": "也门",
"Zambia": "赞比亚",
"Zimbabwe": "津巴布韦"
},
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
