当前位置：首页 > news >正文

Echarts中文版 2D世界地图

news 来源：原创 2024/9/19 2:47:52

vue组件

<template><div ref="myChartMapRef" class="map-e-chart" :style="{width: props.width,height: props.height}"></div>
</template><script setup lang="ts">
import * as echarts from 'echarts'
import { ref, onMounted } from "vue"
import worldMap from "@/assets/tmp.json"
import { nameMap } from "@/assets/constants/eCharts"const props = defineProps({mapData: {type: Array,default: () => [{name: "Afghanistan", value: 700000},{name: "Singapore", value: 7000},{name: "Angola", value: 7000},{name: "Albania", value: 7000},{name: "Armenia", value: 7000}]},width: {type: String,default: "100%"},height: {type: String,default: "80%"}
})const myChart: any = ref()
const myChartMapRef: any = ref()
const mapRange = ref([1, 700000])function initChart() {myChart.value = echarts.init(myChartMapRef.value)echarts.registerMap("world", JSON.stringify(worldMap))updateChart()myChart.value.on("datarangeselected", (params: any) => {// range 值改变后触发的事件。if(params?.selected?.length){mapRange.value = [...params.selected]}updateChart()})
}
function updateChart() {let option = {title: {text: "",left: "left",textStyle: {fontSize: 10,},},tooltip: {trigger: "item",formatter: function (params: any) {var value = params.value ? params.value : 0;return (`${nameMap[params.name]}<br/>${value}`);},},visualMap: {min: 1,max: 700000,range: mapRange.value,text: ['', ''],realtime: false,calculable: true,inRange: {// color: ['lightskyblue','#003AC6', '#0081FF']color: [ '#0081FF', '#003AC6']},outOfRange: {color: [ '#bbbbbb']},itemWidth: 20,itemHeight: 80,left: 80},series: [{name: "",type: "map",map: "world",roam: true, //禁止缩放itemStyle: {areaColor: "rgb(187,187,187)",},data: props.mapData,// nameMap: nameMap,emphasis: {label: {formatter: function (params: any) {return nameMap[params.name]},},itemStyle:{areaColor: "#FFEE74"}},select: {label: {formatter: function (params: any) {return nameMap[params.name]},},itemStyle:{areaColor: "#FFEE74"}},},],}myChart.value.setOption(option)
}onMounted(() => {setTimeout(() => {initChart()}, 100);
})</script><style lang="scss" scoped></style>

@/assets/constants/eCharts nameMap

// 全世界国家中文名称
export const nameMap = {Afghanistan: "阿富汗",Singapore: "新加坡",Angola: "安哥拉",Albania: "阿尔巴尼亚","United Arab Emirates": "阿联酋",Argentina: "阿根廷",Armenia: "亚美尼亚","French Southern and Antarctic Lands": "法属南半球和南极领地",Australia: "澳大利亚",Austria: "奥地利",Azerbaijan: "阿塞拜疆",Burundi: "布隆迪",Belgium: "比利时",Benin: "贝宁","Burkina Faso": "布基纳法索",Bangladesh: "孟加拉国",Bulgaria: "保加利亚","The Bahamas": "巴哈马","Bosnia and Herzegovina": "波斯尼亚和黑塞哥维那",Belarus: "白俄罗斯",Belize: "伯利兹",Bermuda: "百慕大",Bolivia: "玻利维亚",Brazil: "巴西",Brunei: "文莱",Bhutan: "不丹",Botswana: "博茨瓦纳","Central African Republic": "中非共和国",Canada: "加拿大",Switzerland: "瑞士",Chile: "智利",China: "中国","Ivory Coast": "象牙海岸",Cameroon: "喀麦隆","Democratic Republic of the Congo": "刚果民主共和国","Republic of the Congo": "刚果共和国",Colombia: "哥伦比亚","Costa Rica": "哥斯达黎加",Cuba: "古巴","Northern Cyprus": "北塞浦路斯",Cyprus: "塞浦路斯","Czech Republic": "捷克共和国",Germany: "德国",Djibouti: "吉布提",Denmark: "丹麦","Dominican Republic": "多明尼加共和国",Algeria: "阿尔及利亚",Ecuador: "厄瓜多尔",Egypt: "埃及",Eritrea: "厄立特里亚",Spain: "西班牙",Estonia: "爱沙尼亚",Ethiopia: "埃塞俄比亚",Finland: "芬兰",Fiji: "斐","Falkland Islands": "福克兰群岛",France: "法国",Gabon: "加蓬","United Kingdom": "英国",Georgia: "格鲁吉亚",Ghana: "加纳",Guinea: "几内亚",Gambia: "冈比亚","Guinea Bissau": "几内亚比绍",Greece: "希腊",Greenland: "格陵兰",Guatemala: "危地马拉","French Guiana": "法属圭亚那",Guyana: "圭亚那",Honduras: "洪都拉斯",Croatia: "克罗地亚",Haiti: "海地",Hungary: "匈牙利",Indonesia: "印度尼西亚",India: "印度",Ireland: "爱尔兰",Iran: "伊朗",Iraq: "伊拉克",Iceland: "冰岛",Israel: "以色列",Italy: "意大利",Jamaica: "牙买加",Jordan: "约旦",Japan: "日本",Kazakhstan: "哈萨克斯坦",Kenya: "肯尼亚",Kyrgyzstan: "吉尔吉斯斯坦",Cambodia: "柬埔寨",Kosovo: "科索沃",Kuwait: "科威特",Laos: "老挝",Lebanon: "黎巴嫩",Liberia: "利比里亚",Libya: "利比亚","Sri Lanka": "斯里兰卡",Lesotho: "莱索托",Lithuania: "立陶宛",Luxembourg: "卢森堡",Latvia: "拉脱维亚",Morocco: "摩洛哥",Moldova: "摩尔多瓦",Madagascar: "马达加斯加",Mexico: "墨西哥",Macedonia: "马其顿",Mali: "马里",Myanmar: "缅甸",Montenegro: "黑山",Mongolia: "蒙古",Mozambique: "莫桑比克",Mauritania: "毛里塔尼亚",Malawi: "马拉维",Malaysia: "马来西亚",Namibia: "纳米比亚","New Caledonia": "新喀里多尼亚",Niger: "尼日尔",Nigeria: "尼日利亚",Nicaragua: "尼加拉瓜",Netherlands: "荷兰",Norway: "挪威",Nepal: "尼泊尔","New Zealand": "新西兰",Oman: "阿曼",Pakistan: "巴基斯坦",Panama: "巴拿马",Peru: "秘鲁",Philippines: "菲律宾","Papua New Guinea": "巴布亚新几内亚",Poland: "波兰","Puerto Rico": "波多黎各","North Korea": "北朝鲜",Portugal: "葡萄牙",Paraguay: "巴拉圭",Qatar: "卡塔尔",Romania: "罗马尼亚",Russia: "俄罗斯",Rwanda: "卢旺达","Western Sahara": "西撒哈拉","Saudi Arabia": "沙特阿拉伯",Sudan: "苏丹","S. Sudan": "南苏丹","South Sudan": "南苏丹",Senegal: "塞内加尔","Solomon Islands": "所罗门群岛","Sierra Leone": "塞拉利昂","El Salvador": "萨尔瓦多",Somaliland: "索马里兰",Somalia: "索马里","Republic of Serbia": "塞尔维亚",Suriname: "苏里南",Slovakia: "斯洛伐克",Slovenia: "斯洛文尼亚",Sweden: "瑞典",Swaziland: "斯威士兰",Syria: "叙利亚",Chad: "乍得",Togo: "多哥",Thailand: "泰国",Tajikistan: "塔吉克斯坦",Turkmenistan: "土库曼斯坦","East Timor": "东帝汶","Trinidad and Tobago": "特里尼达和多巴哥",Tunisia: "突尼斯",Turkey: "土耳其","United Republic of Tanzania": "坦桑尼亚",Uganda: "乌干达",Ukraine: "乌克兰",Uruguay: "乌拉圭","United States": "美国",Uzbekistan: "乌兹别克斯坦",Venezuela: "委内瑞拉",Vietnam: "越南",Vanuatu: "瓦努阿图","West Bank": "西岸",Yemen: "也门","South Africa": "南非",Zambia: "赞比亚",Korea: "韩国",Tanzania: "坦桑尼亚",Zimbabwe: "津巴布韦",Congo: "刚果","Dem. Rep. Congo": "刚果民主共和国","Central African Rep.": "中非",Serbia: "塞尔维亚","Bosnia and Herz.": "波黑","Czech Rep.": "捷克","W. Sahara": "西撒哈拉","Lao PDR": "老挝","Dem.Rep.Korea": "朝鲜","Falkland Is.": "福克兰群岛","Timor-Leste": "东帝汶","Solomon Is.": "所罗门群岛",Palestine: "巴勒斯坦","N. Cyprus": "北塞浦路斯",Aland: "奥兰群岛","Fr. S. Antarctic Lands": "法属南半球和南极陆地",Mauritius: "毛里求斯",Comoros: "科摩罗","Eq. Guinea": "赤道几内亚","Guinea-Bissau": "几内亚比绍","Dominican Rep.": "多米尼加","Saint Lucia": "圣卢西亚",Dominica: "多米尼克","Antigua and Barb.": "安提瓜和巴布达","U.S. Virgin Is.": "美国原始岛屿",Montserrat: "蒙塞拉特",Grenada: "格林纳达",Barbados: "巴巴多斯",Samoa: "萨摩亚",Bahamas: "巴哈马","Cayman Is.": "开曼群岛","Faeroe Is.": "法罗群岛","IsIe of Man": "马恩岛",Malta: "马耳他共和国",Jersey: "泽西","Cape Verde": "佛得角共和国","Turks and Caicos Is.": "特克斯和凯科斯群岛","St. Vin. and Gren.": "圣文森特和格林纳丁斯",
}