地图去掉南海诸岛右下角的框显示(因为显示的不是现在的10段线)
资源里面主要是有个改好的中国地图json其他的无所谓,用现有的json也行,主要是为了解决10段线的问题
引入需要注意 import * as echarts from “./echarts”;
目录
注册地图
<div class="chartContent" ref="chart"></div>
import * as echarts from "./echarts";
this.chart = echarts.init(this.$refs.chart);
设置option
import * as echarts from "./echarts";
function setMap(xAxis, legend, data, params) {
return setMapWorld(xAxis, legend, data, params);
}
function setMapWorld() {
let mapJson = require("./world.json");
echarts.registerMap("world", mapJson);
let 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": "刚果民主共和国",
"Dem. Rep. 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: "苏丹",
"South Sudan": "南苏丹",
"S. 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: "刚果",
"Central African Rep.": "中非",
Serbia: "塞尔维亚",
"Côte d'Ivoire": "科特迪瓦共和国",
"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.": "圣文森特和格林纳丁斯",
"S. Geo. and S. Sandw. Is.": "南乔治岛和南桑威群岛",
};
//地图数据值
let _data = [
{ name: "萨摩亚", value: 3427985 },
{ name: "乌克兰", value: 59834567 },
{ name: "越南", value: 53589 },
{ name: "新西兰", value: 93456 },
{ name: "墨西哥", value: 19856 },
{ name: "美国", value: 9876576 },
{ name: "巴拿马", value: 36789 },
{ name: "澳大利亚", value: 945783 },
{ name: "阿富汗", value: 734567 },
{ name: "新加坡", value: 546923 },
{ name: "安哥拉", value: 54345 },
{ name: "阿尔巴尼亚", value: 75678 },
{ name: "阿联酋", value: 98797 },
{ name: "阿根廷", value: 127896 },
{ name: "亚美尼亚", value: 367892 },
{ name: "中国", value: 7876769 },
{ name: "俄罗斯", value: 59834572 },
{ name: "加拿大", value: 5983457 },
];
return {
// 图表主标题
title: {
show: false,
text: "世界地图", // 主标题文本,支持使用 \n 换行
//top: 20, // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
left: "center", // 值: 'left', 'center', 'right' 同上
textStyle: {
// 文本样式
fontSize: 18,
fontWeight: 600,
color: "black",
},
},
grid: {
left: "2%",
right: "2%",
bottom: "6%",
top: "6%",
containLabel: true,
},
tooltip: {
show: true,
trigger: "item",
formatter: function (params) {
// //console.log(params,123)
if (params.name) {
return (
params.name +
" : " +
(isNaN(params.value) ? 0 : parseInt(params.value))
);
}
},
},
// 视觉映射组件
visualMap: {
type: "continuous", // continuous 类型为连续型 piecewise 类型为分段型
show: true, // 是否显示 visualMap-continuous 组件 如果设置为 false,不会显示,但是数据映射的功能还存在
// 指定 visualMapContinuous 组件的允许的最小/大值。'min'/'max' 必须用户指定。
// [visualMap.min, visualMax.max] 形成了视觉映射的『定义域』
right: "0",
// 文本样式
textStyle: {
fontSize: 14,
color: "transparent",
},
realtime: false, // 拖拽时,是否实时更新
calculable: true, // 是否显示拖拽用的手柄
// 定义 在选中范围中 的视觉元素
inRange: {
color: ["#ebdecb", "#8aa87d", "#7d97a8"],
},
},
series: [
{
name: "World",
type: "map",
mapType: "world",
roam: true,
zoom: 1.2,
itemStyle: {
// areaColor: '#ccc', // 地图区域的颜色 如果设置了visualMap,areaColor属性将不起作用
borderWidth: 1, // 描边线宽 为 0 时无描边
borderColor: "#9c978b", // 图形的描边颜色 支持的颜色格式同 color,不支持回调函数
borderType: "solid", // 描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'
emphasis: {
label: { show: true },
areaColor: "#C4E7C0",
borderWidth: 1,
borderColor: "#4EAC41",
},
},
label: {
show: false, // 是否显示对应地名
emphasis: {
show: true,
areaColor: "#C4E7C0",
},
},
data: _data,
nameMap: nameMap,
},
],
};
}
function setMapChina() {
// console.log(require("./china.json"));
//因为现在是测试阶段 地图放在目录下面了 所以直接读,后面正式了就要放在静态路径下加载,用$.getJSON
// $.getJSON("china.json", function (data) {
// console.log(data);
// // d = [];
// // for (var i = 0; i < data.features.length; i++) {
// // d.push({
// // name: data.features[i].properties.name,
// // });
// // }
// // mapdata = d;
// // //注册地图
// // echarts.registerMap("china", data);
// // //绘制地图
// // renderMap("china", d);
// });
let mapJson = require("./china.json");
echarts.registerMap("china", mapJson);
return {
backgroundColor: "#ccc",
tooltip: {
trigger: "item",
formatter: "{b}",
},
visualMap: {
seriesIndex: 0,
min: 0,
max: 2500,
left: "left",
top: "bottom",
text: ["高", "低"], // 文本,默认为数值文本
calculable: true,
},
grid: {
height: 200,
width: 8,
right: 80,
bottom: 10,
},
xAxis: {
type: "category",
data: [],
splitNumber: 1,
show: false,
},
yAxis: {
position: "right",
min: 0,
max: 20,
splitNumber: 20,
inverse: true,
axisLabel: {
show: true,
},
axisLine: {
show: false,
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
data: [],
},
series: [
{
name: "中国",
type: "map",
mapType: "china",
selectedMode: "multiple",
roam: true,
left: 0,
right: "15%",
label: {
normal: {
show: true,
},
emphasis: {
show: true,
},
},
data: [
{ name: "北京", value: randomData() },
{ name: "天津", value: randomData() },
{ name: "上海", value: randomData() },
{ name: "重庆", value: randomData() },
{ name: "河北", value: randomData() },
{ name: "河南", value: randomData() },
{ name: "云南", value: randomData() },
{ name: "辽宁", value: randomData() },
{ name: "黑龙江", value: randomData() },
{ name: "湖南", value: randomData() },
{ name: "安徽", value: randomData() },
{ name: "山东", value: randomData() },
{ name: "新疆", value: randomData() },
{ name: "江苏", value: randomData() },
{ name: "浙江", value: randomData() },
{ name: "江西", value: randomData() },
{ name: "湖北", value: randomData() },
{ name: "广西", value: randomData() },
{ name: "甘肃", value: randomData() },
{ name: "山西", value: randomData() },
{ name: "内蒙古", value: randomData() },
{ name: "陕西", value: randomData() },
{ name: "吉林", value: randomData() },
{ name: "福建", value: randomData() },
{ name: "贵州", value: randomData() },
{ name: "广东", value: randomData() },
{ name: "青海", value: randomData() },
{ name: "西藏", value: randomData() },
{ name: "四川", value: randomData() },
{ name: "宁夏", value: randomData() },
{ name: "海南", value: randomData() },
{ name: "台湾", value: randomData() },
{ name: "香港", value: randomData() },
{ name: "澳门", value: randomData() },
],
},
],
};
}
function randomData() {
return Math.round(Math.random() * 2500);
}