search

apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.44k stars 19.61k forks source link

echarts 4.0.4 在设置 geo 为 world 的情况下，使用nameMap 映射中文后发生的一系列bug #8205

Closed hl-stone closed 2 years ago

hl-stone commented 6 years ago

One-line summary [问题简述]

  1. echarts 使用过程中发现在设置 geo 为 world 的情况下，使用 nameMap 映射中文名称后，regions 属性不起作用 2 国家名称发生便宜的问题【例如俄罗斯、美国、新西兰】（此bug可以修改源码或者修改 world.json或world.js） 3 在 Issues 5745 发现有针对 regions 属性不好使的解决方法，参考链接 https://github.com/apache/incubator-echarts/issues/5745，使用此方式后会导致另外一个问题的发生，如果在第二条里面如果采用修改 echarts 源码修正俄罗斯、美国 label 偏移，代码如下： var geoCoordMap = { 'Russia': [100, 60], '俄罗斯': [100, 60], 'United States': [-99, 38], '美国': [-99, 38], 'United States of America': [-99, 38], '新西兰': [170, -45] }; 采用 5745 里面的处理方式，发现名称便宜的bug 有复现了！

Version & Environment [版本及环境]

Expected behaviour [期望结果]

1 期望在使用 nameMap 映射后 regions 属性好使 2 期望能修正名称映射后的位置显示

ECharts option [ECharts配置项]

var nameMap = {
    Afghanistan: "阿富汗",
    Albania: "阿尔巴尼亚",
    Algeria: "阿尔及利亚",
    Andorra: "安道尔",
    Angola: "安哥拉",
    Antarctica: "南极洲",
    "Antigua and Barbuda": "安提瓜和巴布达",
    Argentina: "阿根廷",
    Armenia: "亚美尼亚",
    Australia: "澳大利亚",
    Austria: "奥地利",
    Azerbaijan: "阿塞拜疆",
    "The Bahamas": "巴哈马",
    Bahrain: "巴林",
    Bangladesh: "孟加拉国",
    Barbados: "巴巴多斯",
    Belarus: "白俄罗斯",
    Belgium: "比利时",
    Belize: "伯利兹",
    Benin: "贝宁",
    Bermuda: "百慕大",
    Bhutan: "不丹",
    Bolivia: "玻利维亚",
    "Bosnia and Herz.": "波黑",
    Botswana: "博茨瓦纳",
    Brazil: "巴西",
    Brunei: "文莱",
    Bulgaria: "保加利亚",
    "Burkina Faso": "布基纳法索",
    Burundi: "布隆迪",
    Bahamas: "巴哈马国",
    Cambodia: "柬埔寨",
    Cameroon: "喀麦隆",
    Canada: "加拿大",
    "Cape Verde": "佛得角",
    "Central African Rep.": "中非共和国",
    Chad: "乍得",
    Chile: "智利",
    China: "中国",
    Colombia: "哥伦比亚",
    Comoros: "科摩罗",
    Congo: "刚果共和国",
    "Costa Rica": "哥斯达黎加",
    Croatia: "克罗地亚",
    Cuba: "古巴",
    Cyprus: "塞浦路斯",
    "Czech Rep.": "捷克共和国",
    "Côte d'Ivoire": "科特迪瓦",
    Denmark: "丹麦",
    Djibouti: "吉布提",
    "Dominican Rep.": "多米尼加",
    "Dominican Republic": "多明尼加共和国",
    Ecuador: "厄瓜多尔",
    Egypt: "埃及",
    "El Salvador": "萨尔瓦多",
    "Eq. Guinea": "赤道几内亚",
    Eritrea: "厄立特里亚",
    Estonia: "爱沙尼亚",
    Ethiopia: "埃塞俄比亚",
    "Falkland Islands": "福克兰群岛",
    "Faroe Islands": "法罗群岛",
    Fiji: "斐济",
    Finland: "芬兰",
    France: "法国",
    "French Guiana": "法属圭亚那",
    "French Southern and Antarctic Lands": "法属南半球和南极领地",
    Gabon: "加蓬",
    Gambia: "冈比亚",
    "Gaza Strip": "加沙",
    Georgia: "格鲁吉亚",
    Germany: "德国",
    Ghana: "加纳",
    Greece: "希腊",
    Greenland: "格陵兰",
    Grenada: "格林纳达",
    Guadeloupe: "瓜德罗普",
    Guatemala: "危地马拉",
    Guinea: "几内亚",
    "Guinea-Bissau": "几内亚比绍",
    Guyana: "圭亚那",
    Haiti: "海地",
    Honduras: "洪都拉斯",
    "Hong Kong": "香港",
    Hungary: "匈牙利",
    Iceland: "冰岛",
    India: "印度",
    Indonesia: "印尼",
    Iran: "伊朗",
    Iraq: "伊拉克",
    "Iraq-Saudi Arabia Neutral Zone": "伊拉克阿拉伯中立区",
    Ireland: "爱尔兰",
    "Isle of Man": "马恩岛",
    Israel: "以色列",
    Italy: "意大利",
    "Ivory Coast": "科特迪瓦",
    Jamaica: "牙买加",
    "Jan Mayen": "扬马延岛",
    Japan: "日本",
    Jordan: "约旦",
    Kazakhstan: "哈萨克斯坦",
    Kenya: "肯尼亚",
    Kerguelen: "凯尔盖朗群岛",
    Kiribati: "基里巴斯",
    "Dem. Rep. Korea": "朝鲜",
    "Korea": "韩国",
    Kuwait: "科威特",
    Kyrgyzstan: "吉尔吉斯斯坦",
    "Lao PDR": "老挝",
    Latvia: "拉脱维亚",
    Lebanon: "黎巴嫩",
    Lesotho: "莱索托",
    Liberia: "利比里亚",
    Libya: "利比亚",
    Liechtenstein: "列支敦士登",
    Lithuania: "立陶宛",
    Luxembourg: "卢森堡",
    Macau: "澳门",
    Macedonia: "马其顿",
    Madagascar: "马达加斯加",
    Malawi: "马拉维",
    Malaysia: "马来西亚",
    Maldives: "马尔代夫",
    Mali: "马里",
    Malta: "马耳他",
    Martinique: "马提尼克",
    Mauritania: "毛里塔尼亚",
    Mauritius: "毛里求斯",
    Mexico: "墨西哥",
    Moldova: "摩尔多瓦",
    Monaco: "摩纳哥",
    Mongolia: "蒙古",
    Morocco: "摩洛哥",
    Mozambique: "莫桑比克",
    Myanmar: "缅甸",
    Namibia: "纳米比亚",
    Nepal: "尼泊尔",
    Netherlands: "荷兰",
    "New Caledonia": "新喀里多尼亚",
    "New Zealand": "新西兰",
    Nicaragua: "尼加拉瓜",
    Niger: "尼日尔",
    Nigeria: "尼日利亚",
    "Northern Mariana Islands": "北马里亚纳群岛",
    Norway: "挪威",
    Oman: "阿曼",
    Pakistan: "巴基斯坦",
    Panama: "巴拿马",
    "Papua New Guinea": "巴布亚新几内亚",
    Paraguay: "巴拉圭",
    Peru: "秘鲁",
    Philippines: "菲律宾",
    Poland: "波兰",
    Portugal: "葡萄牙",
    "Puerto Rico": "波多黎各",
    Qatar: "卡塔尔",
    Reunion: "留尼旺岛",
    Romania: "罗马尼亚",
    Russia: "俄罗斯",
    Rwanda: "卢旺达",
    "San Marino": "圣马力诺",
    "Sao Tome and Principe": "圣多美和普林西比",
    "Saudi Arabia": "沙特阿拉伯",
    Senegal: "塞内加尔",
    Seychelles: "塞舌尔",
    "Sierra Leone": "塞拉利昂",
    Singapore: "新加坡",
    Slovakia: "斯洛伐克",
    Slovenia: "斯洛文尼亚",
    "Solomon Is.": "所罗门群岛",
    Somalia: "索马里",
    "South Africa": "南非",
    Spain: "西班牙",
    "Sri Lanka": "斯里兰卡",
    "St. Christopher-Nevis": "圣",
    "St. Lucia": "圣露西亚",
    "St. Vincent and the Grenadines": "圣文森特和格林纳丁斯",
    'Sudan': "苏丹",
    Suriname: "苏里南",
    Svalbard: "斯瓦尔巴特群岛",
    Swaziland: "斯威士兰",
    Sweden: "瑞典",
    Switzerland: "瑞士",
    Syria: "叙利亚",
    Taiwan: "台湾",
    Tajikistan: "塔吉克斯坦",
    Tanzania: "坦桑尼亚",
    Thailand: "泰国",
    Togo: "多哥",
    Tonga: "汤加",
    "Trinidad and Tobago": "特里尼达和多巴哥",
    Tunisia: "突尼斯",
    Turkey: "土耳其",
    Turkmenistan: "土库曼斯坦",
    "Turks and Caicos Islands": "特克斯和凯科斯群岛",
    "Timor-Leste": "东帝汶",
    Uganda: "乌干达",
    Ukraine: "乌克兰",
    "United Arab Emirates": "阿联酋",
    "United Kingdom": "英国",
    "United States": "美国",
    Uruguay: "乌拉圭",
    Uzbekistan: "乌兹别克斯坦",
    Vanuatu: "瓦努阿图",
    Venezuela: "委内瑞拉",
    Vietnam: "越南",
    "W. Sahara": "西撒哈拉",
    "Western Samoa": "西萨摩亚",
    Yemen: "也门",
    Yugoslavia: "南斯拉夫",
    "Dem. Rep. Congo": "刚果民主共和国",
    Zambia: "赞比亚",
    Zimbabwe: "津巴布韦",
    "S. Sudan": "南苏丹",
    Somaliland: "索马里兰",
    Montenegro: "黑山",
    Kosovo: "科索沃",
    Serbia: "塞尔维亚"
};
// 国家颜色映射
var colorMapData = [
    { name: "中国", value: 1 },  //亚洲
    { name: "朝鲜", value: 1 },
    { name: "蒙古", value: 1 },
    { name: "越南", value: 1 },
    { name: "泰国", value: 1 },
    { name: "柬埔寨", value: 1 },
    { name: "尼泊尔", value: 1 },
    { name: "缅甸", value: 1 },
    { name: "印度", value: 1 },
    { name: "斯里兰卡", value: 1 },
    { name: "巴基斯坦", value: 1 },
    { name: "塔吉克斯坦", value: 1 },
    { name: "吉尔吉斯斯坦", value: 1 },
    { name: "乌兹别克斯坦", value: 1 },
    { name: "土库曼斯坦", value: 1 },
    { name: "哈萨克斯坦", value: 1 },
    { name: "老挝", value: 1 },
    { name: "阿富汗", value: 1 },
    { name: "菲律宾", value: 1 },
    { name: "新加坡", value: 5 },
    { name: "印尼", value: 2 },
    { name: "韩国", value: 1 },
    { name: "黎巴嫩", value: 3 },
    { name: "伊拉克", value: 1 },
    { name: "孟加拉国", value: 1 },
    { name: "伊朗", value: 1 },
    { name: "土耳其", value: 1 },
    { name: "叙利亚", value: 1 },
    { name: "阿联酋", value: 1 },
    { name: "马来西亚", value: 1 },
    { name: "日本", value: 1 },
    { name: "以色列", value: 1 },
    { name: "卡塔尔", value: 1 },
    { name: "巴林", value: 5 },
    { name: "沙特阿拉伯", value: 1 },
    { name: "亚美尼亚", value: 3 },
    { name: "科威特", value: 1 },
    { name: "塞浦路斯", value: 3 },
    { name: "阿曼", value: 1 },
    { name: "格鲁吉亚", value: 3 },
    { name: "阿塞拜疆", value: 1 },
    { name: "文莱", value: 5 },
    { name: "不丹", value: 1 },
    { name: "约旦", value: 1 },
    { name: "也门", value: 1 },
    { name: "东帝汶", value: 1 },
    { name: "卢旺达", value: 25 },  //非洲
    { name: "布隆迪", value: 25 },
    { name: "乌干达", value: 25 },
    { name: "埃塞俄比亚", value: 25 },
    { name: "马达加斯加", value: 25 },
    { name: "海地", value: 25 },
    { name: "肯尼亚", value: 25 },
    { name: "索马里", value: 25 },
    { name: "厄立特里亚", value: 25 },
    { name: "布基纳法索", value: 25 },
    { name: "马拉维", value: 25 },
    { name: "埃及", value: 25 },
    { name: "塞拉利昂", value: 25 },
    { name: "坦桑尼亚", value: 25 },
    { name: "尼日利亚", value: 25 },
    { name: "尼日尔", value: 25 },
    { name: "毛里塔尼亚", value: 25 },
    { name: "喀麦隆", value: 25 },
    { name: "贝宁", value: 25 },
    { name: "摩洛哥", value: 25 },
    { name: "马里", value: 25 },
    { name: "刚果民主共和国", value: 25 },
    { name: "几内亚", value: 25 },
    { name: "利比里亚", value: 25 },
    { name: "多哥", value: 25 },
    { name: "毛里求斯", value: 25 },
    { name: "莫桑比克", value: 25 },
    { name: "阿尔及利亚", value: 25 },
    { name: "斯威士兰", value: 25 },
    { name: "乍得", value: 25 },
    { name: "塞内加尔", value: 25 },
    { name: "津巴布韦", value: 25 },
    { name: "科特迪瓦", value: 25 },
    { name: "赞比亚", value: 25 },
    { name: "突尼斯", value: 25 },
    { name: "加纳", value: 25 },
    { name: "中非共和国", value: 25 },
    { name: "安哥拉", value: 25 },
    { name: "冈比亚", value: 25 },
    { name: "刚果共和国", value: 25 },
    { name: "苏丹", value: 25 },
    { name: "加蓬", value: 25 },
    { name: "利比亚", value: 25 },
    { name: "南非", value: 25 },
    { name: "纳米比亚", value: 25 },
    { name: "博茨瓦纳", value: 25 },
    { name: "南苏丹", value: 25 },
    { name: "索马里兰", value: 25 },
    { name: "赤道几内亚", value: 25 },
    { name: "几内亚比绍", value: 25 },
    { name: "西撒哈拉", value: 25 },
    { name: "莱索托", value: 25 },
    { name: "吉布提", value: 25 },  
    { name: "俄罗斯", value: 15 },   //欧洲
    { name: "波兰", value: 15 },
    { name: "希腊", value: 15 },
    { name: "马其顿", value: 15 },
    { name: "阿尔巴尼亚", value: 15 },
    { name: "西班牙", value: 15 },
    { name: "克罗地亚", value: 15 },
    { name: "瑞士", value: 15 },
    { name: "英国", value: 15 },
    { name: "爱尔兰", value: 15 },
    { name: "意大利", value: 15 },
    { name: "荷兰", value: 15 },
    { name: "黑山", value: 15 },
    { name: "斯洛文尼亚", value: 15 },
    { name: "德国", value: 15 },
    { name: "卢森堡", value: 15 },
    { name: "葡萄牙", value: 15 },
    { name: "塞尔维亚", value: 15 },
    { name: "法国", value: 15 },
    { name: "奥地利", value: 15 },
    { name: "捷克共和国", value: 15 },
    { name: "斯洛伐克", value: 15 },
    { name: "拉脱维亚", value: 15 },
    { name: "挪威", value: 15 },
    { name: "比利时", value: 15 },
    { name: "丹麦", value: 15 },
    { name: "匈牙利", value: 15 },
    { name: "瑞典", value: 15 },
    { name: "罗马尼亚", value: 15 },
    { name: "保加利亚", value: 15 },
    { name: "立陶宛", value: 15 },
    { name: "爱沙尼亚", value: 15 },
    { name: "白俄罗斯", value: 15 },
    { name: "摩尔多瓦", value: 15 },
    { name: "芬兰", value: 15 },
    { name: "乌克兰", value: 15 },
    { name: "科索沃", value: 15 },
    { name: "波黑", value: 15 },
    { name: "哥斯达黎加", value: 32 },   //北美洲
    { name: "萨尔瓦多", value: 32 },
    { name: "多米尼加", value: 32 },
    { name: "危地马拉", value: 32 },
    { name: "洪都拉斯", value: 32 },
    { name: "巴拿马", value: 32 },
    { name: "古巴", value: 32 },
    { name: "牙买加", value: 32 },
    { name: "墨西哥", value:32 },
    { name: "波多黎各", value: 32 },
    { name: "特立尼达和多巴哥", value: 32 },
    { name: "伯利兹", value: 32 },
    { name: "加拿大", value:32 },
    { name: "美国", value: 32 },
    { name: "巴哈马", value: 32 },
    { name: "格陵兰", value: 32 }, 
    { name: "哥伦比亚", value: 32 },   //南美洲
    { name: "尼加拉瓜", value: 32 },
    { name: "厄瓜多尔", value: 32 },
    { name: "秘鲁", value: 32 },
    { name: "委内瑞拉", value: 32 },
    { name: "玻利维亚", value: 32 },
    { name: "巴西", value: 32 },
    { name: "智利", value: 32 },
    { name: "苏里南", value: 32 },
    { name: "乌拉圭", value: 32 },
    { name: "巴拉圭", value: 32 },
    { name: "圭亚那", value: 32 },
    { name: "阿根廷", value: 32 },
    { name: "澳大利亚", value: 7 },   //大洋洲
    { name: "巴布亚新几内亚", value: 7 },
    { name: "斐济", value: 7 },
    { name: "新喀里多尼亚", value: 7 },
    { name: "新西兰", value: 7 },
    { name: "北马里亚纳", value: 7 }
];
var latlong = {},latlong1 = {};
  latlong.AF = { latitude: 33, longitude: 65 };
  latlong.AL = { latitude: 41, longitude: 20 };
  latlong.DZ = { latitude: 28, longitude: 3 };
  latlong.CN = { latitude: 35, longitude: 105 };
  latlong1.AF = { latitude: 32, longitude: 65 };
  latlong1.AL = { latitude: 43, longitude: 21 };
  latlong1.DZ = { latitude: 34, longitude: 4 };
  latlong1.CN = { latitude: 35, longitude: 98 };
  var mapData = [
    {
      code: "AF",
      name: "Afghanistan",
      value: 32358260,
      color: "#eea638",
      number: 1
    },
    {
      code: "AL",
      name: "Albania",
      value: 3215988,
      color: "#d8854f",
      number: 2
    },
    {
      code: "DZ",
      name: "Algeria",
      value: 35980193,
      color: "#de4c4f",
      number: 3
    },
    {
      code: "CN",
      name: "China",
      value: 1347565324,
      color: "#eea638",
      number: 4
    }
  ];
  var max = -Infinity;
  var min = Infinity;
  mapData.forEach(function(itemOpt) {
    if (itemOpt.value > max) {
      max = itemOpt.value;
    }
    if (itemOpt.value < min) {
      min = itemOpt.value;
    }
  });
  var convertData = function(data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
            });
        }
    }
    return res;
  };
  var option = {
    visualMap: {
      type: 'piecewise',
      min: 1,
      max: 5,
      pieces: [
        {gt: 40},               // (41, Infinity] 一带一路
        {gt: 30, lte: 40},      // (31, 40]  北、南美
        {gt: 20, lte: 30},      // (21, 30]  非洲
        {gt: 10, lte: 20},      // (11, 20]  欧洲
        {gt: 5, lte: 10},       // (6, 10]   大洋洲
        {lt: 5}                 // (-Infinity, 5) 亚洲
      ],
      text: ["High", "Low"],
      inRange: {
        color: ["#8ff202", "#e9e9eb", "#004fed", "#01e098", "#00deeb","#ffdc7b"]
      },
      show: false
    },
    geo: {
      show: true,
      type: "map",
      map: "world",
      roam: true,
      zoom: 1,
      nameMap:nameMap,
      selectedMode: "single",
      label: {
        normal: { 
          show: false, 
          color: "#fff" 
        },
        emphasis: { 
          show: true, 
          color: "#ff5400",
          fontSize: 22,
          fontWeight: "bold"
        }
      },
      itemStyle: {
        normal: { 
          areaColor: "#02dce3", 
          borderColor: "#017688" 
        },
        emphasis: { 
          areaColor: "#ffdc7b" 
        }
      }
    },
    series: [
      {
        name: "mapBg",
        type: "map",
        map: "world",
        geoIndex: 0,
        roam: true,
        selectedMode: "single",
        nameMap: nameMap,
        data: colorMapData
      },
      {
        type: "scatter",
        coordinateSystem: "geo",
        symbol: "arrow",
        symbolSize:20,
        data: mapData.map(function(itemOpt) {
          return {
            name: itemOpt.name,
            value: [
              latlong[itemOpt.code].longitude,
              latlong[itemOpt.code].latitude,
              itemOpt.value
            ],
            label: { 
              emphasis: { 
                position: "right", 
                show: false 
              } 
            },
            itemStyle: { normal: { color: '#000' }}
            };
          }
        )
      },
      {
        type: "scatter",
        coordinateSystem: "geo",
        symbol: "pin",
        symbolSize:20,
        data: mapData.map(function(itemOpt) {
          return {
            name: itemOpt.name,
            value: [
              latlong1[itemOpt.code].longitude,
              latlong1[itemOpt.code].latitude,
              itemOpt.value
            ],
            label: {
              emphasis: {
                position: "right",
                show: false,
              }
            },
            itemStyle: {
              normal: {
                color: '#000'
              }
            }
          };
        })
      }
    ]
  };

Other comments [其他信息]

gallery 例子 http://gallery.echartsjs.com/editor.html?c=xS1Edb0qnz

shuangmianxiaoQ commented 5 years ago

@hl-stone 请问下国家名称发生偏移的问题，修改源码或者修改 world.json或world.js，具体是如何修改的呢？

hl-stone commented 5 years ago

@shuangmianxiaoQ 可以参考 链接1 链接2

shuangmianxiaoQ commented 5 years ago

@hl-stone 好的，十分感谢！

xieyezi commented 4 years ago

我的版本是echarts 4.2.1 世界地图 鼠标悬浮在新西兰上面，label会偏移到地图正中间，请问如何解决？

hl-stone commented 4 years ago

@xieyezi 查看上面回复，我的4.0.4版本是修改了源码，不知道新版本是否修复了

github-actions[bot] commented 2 years ago

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

github-actions[bot] commented 2 years ago

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!