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

世界地图里，如何让国内某些地市的数据显示出来 #4126

Closed Togal closed 8 years ago

Togal commented 8 years ago

问题简述 (One-line summary)

当mapType:'world'时，国内的某些省市如台湾省，即使在series里的geoCoord指定经纬度 '台湾':[121.0793,23.9036],； data里添加{name:'台湾',value:'120'}, 也不能在世界地图的页面上显示出来，请问要怎样实现呢？

版本及环境 (Version & Environment)

1. 2.

期望结果 (Expected behaviour)

可能哪里有问题 (What went wrong)

ECharts配置项 (ECharts option)

option = {
            series : [{
                name: 'xb',
                type: 'map',
                mapType: 'world',
                roam: true,
                nameMap : {
                    'Afghanistan':'阿富汗',
                    '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':'几内亚比绍',
                    'Equatorial Guinea':'赤道几内亚',
                    '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':'柬埔寨',
                    'South Korea':'韩国',
                    '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':'南苏丹',
                    '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 of America':'美国',
                    'Uzbekistan':'乌兹别克斯坦',
                    'Venezuela':'委内瑞拉',
                    'Vietnam':'越南',
                    'Vanuatu':'瓦努阿图',
                    'West Bank':'西岸',
                    'Yemen':'也门',
                    'South Africa':'南非',
                    'Zambia':'赞比亚',
                    'Zimbabwe':'津巴布韦',
                    'TaiWan':'台湾',
                    'Taiwan':'台湾',
                    'taiwan':'台湾'
                },
                data:[
                    {name:'阿拉斯加',itemStyle: {normal: {color: '#32cd32',label: {show: true,textStyle: {color: '#02b4d2',fontSize: 15},formatter: '{b}\n{a}'}},},value:1113},
                    {name:'加拿大',itemStyle: {normal: {color: '#32cd32',label: {show: true,textStyle: {color: '#02b4d2',fontSize: 15},formatter: '{b}\n{a}'}},},value:1134},
                    {name:'美国',itemStyle: {normal: {color: '#32cd32',label: {show: true,textStyle: {color: '#02b4d2',fontSize: 15},formatter: '{b}\n{a}'}},},value:1000},
                    {name:'巴西',itemStyle: {normal: {color: '#32cd32',label: {show: true,textStyle: {color: '#02b4d2',fontSize: 15},formatter: '{b}\n{a}'}},},value:6},
                    {name:'法国',itemStyle: {normal: {color: '#32cd32',label: {show: true,textStyle: {color: '#02b4d2',fontSize: 15},formatter: '{b}\n{a}'}},},value:214},
                    {name:'瑞士',itemStyle: {normal: {color: '#32cd32',label: {show: true,textStyle: {color: '#02b4d2',fontSize: 15},formatter: '{b}\n{a}'}},},value:314},
                    {name:'德国',itemStyle: {normal: {color: '#32cd32',label: {show: true,textStyle: {color: '#02b4d2',fontSize: 15},formatter: '{b}\n{a}'}},},value:136},
                    {name:'意大利',itemStyle: {normal: {color: '#32cd32',label: {show: true,textStyle: {color: '#02b4d2',fontSize: 15},formatter: '{b}\n{a}'}},},value:110},
                    {name:'南非',itemStyle: {normal: {color: '#32cd32',label: {show: true,textStyle: {color: '#02b4d2',fontSize: 15},formatter: '{b}\n{a}'}},},value:110},
                    {name:'俄罗斯',itemStyle: {normal: {color: '#32cd32',label: {show: true,textStyle: {color: '#02b4d2',fontSize: 15},formatter: '{b}\n{a}'}},},value:86},
                    {name:'印度',itemStyle: {normal: {color: '#32cd32',label: {show: true,textStyle: {color: '#02b4d2',fontSize: 15},formatter: '{b}\n{a}'}},},value:15},
                    {name:'澳门',itemStyle: {normal: {color: '#32cd32',label: {show: true,textStyle: {color: '#02b4d2',fontSize: 15},formatter: '{b}\n{a}'}},},value:15},
                    {name:'台湾',itemStyle: {normal: {color: '#32cd32',label: {show: true,textStyle: {color: '#02b4d2',fontSize: 15},formatter: '{b}\n{a}'}},},value:15}
                   ],
                mapLocation: {
                    y : 60
                },
                itemStyle: {
                    normal: {
                        borderColor:'#158DA4',
                        borderWidth:1,
                        color:'#064355',
                        label: {
                            show: false,
                           // position: 'center',
                            formatter: '{b}\n{a}'
                       //'{a} < br/>{b} : {c}'
                        }
                    },
                    emphasis:{
                        areaColor: '#fff',
                        label:{show:false}}
                },
                geoCoord : {
                    '阿拉斯加':[-149.4936,64.2008],
                    '加拿大':[-106.3467,56.1303],
                    '美国':[-102.5243,40.4993],
                    '巴西':[-51.9252,-14.2350],
                    '法国':[2.2137,46.2276],
                    '瑞士':[8.227,46.818],
                    '德国':[10.4515,51.1656],
                    '意大利':[12.5673,41.8719],
                    '南非':[22.9375,-30.5594],
                    '俄罗斯':[105.3187,61.5240],
                    '印度':[78.9628,20.5936],
                    '孟加拉国':[90.3563,23.6849],
                    '泰国':[100.9925,15.87],
                    '台湾':[121.0793,23.9036],
                    '马来西亚':[101.9757,4.2104],
                    '印度尼西亚':[113.9213,-0.789],
                    '澳大利亚':[133.7751,-25.2743],
                    '新西兰':[174.8859,-40.9005],
                    '日本':[138.2529,36.2048],
                    '韩国':[127.7669,35.9077],
                             '台湾':[-51.961454,-14],
                             '澳门':[113.5438730000,22.1987450000]
                   },
                  markPoint : {
                    symbol:'emptyCircle',
                    symbolSize : function (v){
                      return 10 + v/100
                    },
                    effect : {
                      show: true,
                      shadowBlur : 0,
                      color :'#158DA4',
                    },
                    itemStyle:{
                      normal:{
                          color :'#158DA4',
                          label:{
                              show:false,

                          }
                      },
                      emphasis: {
                        label:{position:'top',show:false}
                      }
                    },
                    data : [
                      {name:'阿拉斯加',value:1113},
                      {name:'加拿大',value:1134},
                      {name:'美国',value:1000},
                      {name:'巴西',value:600},
                      {name:'法国',value:214},
                      {name:'瑞士',value:314},
                      {name:'德国',value:136},
                      {name:'意大利',value:110},
                      {name:'南非',value:110},
                      {name:'俄罗斯',value:806},
                      {name:'印度',value:150},
                      {name:'孟加拉国',value:150},
                      {name:'台湾',value:180},
                      {name:'澳门',value:250}
                    ]
                  }

                }

            ]

}

其他信息 (Other comments)

![Uploading image.png…]()

Togal commented 8 years ago

image

100pah commented 8 years ago

如果使用的是 ec2，那么要显示出台湾等自定义地区，需要自己修改出有其定义地区信息的 geojson。

Togal commented 8 years ago

@pissang 谢谢您的回答！ 这里还有个问题：比如mapType:'world',那么需要修改world.json里的信息吗？将台湾或者其他信息的geojson区域定义信息添加进去？

100pah commented 8 years ago

是的。如果使用 ec3，则可以使用 geo 上的 scatter，那么就直接在台湾坐标上画点就可以了，不用改 world.json