<template>
<div class="mapBox">
<div id="map"
style="position: relative; width: 100%; height: 600px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
</div>
<div class="mapTableBox">
<div class="sort">
<el-radio-group v-model="sort" @input="sortChnage" size="mini">
<el-radio-button label="总金额"></el-radio-button>
<el-radio-button label="订单量"></el-radio-button>
</el-radio-group>
</div>
<el-table :data="tableList" stripe style="width: 100%;">
<el-table-column label="排名" align="center" width="60">
<template slot-scope="{row,$index}">
<span>{{ $index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="国家" align="center" min-width="100">
<template slot-scope="{row}">
<span>{{ row.country_name }}</span>
</template>
</el-table-column>
<el-table-column label="订单量" align="center" width="80">
<template slot-scope="{row}">
<span>{{ row.order_number }}</span>
</template>
</el-table-column>
<el-table-column label="总金额" align="center" width="140">
<template slot-scope="{row}">
<span>{{ row.order_total_amount }}</span>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
import world from './world.json'
import echarts from 'echarts'
import { addressCountryOrderNumberData } from '@/api/byte'
export default {
name: "HelloWorld",
data() {
return {
dataList: [
{name: "马来西亚",value: 1000,cityName: "(亚洲)马来西亚"},
{name: "新加坡",value: 800,cityName: "(亚洲)新加坡"},
{name: "阿富汗",value: 0,cityName: "(亚洲)阿富汗"},
{name: "安哥拉",value: 0,cityName: "(非洲)安哥拉"},
{name: "阿尔巴尼亚",value: 0,cityName: "(欧洲)阿尔巴尼亚"},
{name: "阿拉伯联合酋长国",value: 0,cityName: "(亚洲)阿拉伯联合酋长国"},
{name: "阿根廷",value: 0,cityName: "(南美洲)阿根廷"},
{name: "亚美尼亚",value: 0,cityName: "(亚洲)亚美尼亚"},
{name: "南极洲陆地",value: 0,cityName: "(南极洲)南极洲陆地"},
{name: "澳大利亚",value: 0,cityName: "(大洋洲)澳大利亚"},
{name: "奥地利",value: 0,cityName: "(欧州)奥地利"},
{name: "阿塞拜疆",value: 0,cityName: "(亚州)阿塞拜疆"},
{name: "布隆迪",value: 0,cityName: "(非州)布隆迪"},
{name: "比利时",value: 0,cityName: "(欧州)比利时"},
{name: "贝宁",value: 0,cityName: "(非州)贝宁"},
{name: "布基纳法索",value: 0,cityName: "(非州)布基纳法索"},
{name: "基里巴斯",value: 0,cityName: "基里巴斯"},
{name: "孟加拉国",value: 0,cityName: "(亚州)孟加拉国"},
{name: "保加利亚",value: 0,cityName: "(欧州)保加利亚"},
{name: "巴哈马群岛",value: 0,cityName: "(南美州)巴哈马群岛"},
{name: "波斯尼亚和赫尔兹",value: 0,cityName: "(欧州)波斯尼亚和赫尔兹"},
{name: "白俄罗斯",value: 0,cityName: "(欧州)白俄罗斯"},
{name: "伯利兹",value: 0,cityName: "(北美州)伯利兹"},
{name: "百慕大群岛",value: 0,cityName: "(北美州)百慕大群岛",},
{name: "玻利维亚",value: 0,cityName: "(南美州)玻利维亚"},
{name: "巴西",value: 0,cityName: "(南美州)巴西"},
{name: "巴西文莱",value: 0,cityName: "(南美州)巴西文莱"},
{name: "不丹",value: 0,cityName: "(亚州)不丹"},
{name: "博茨瓦纳",value: 0,cityName: "(非州)博茨瓦纳"},
{name: "中非共和国",value: 0,cityName: "(非州)中非共和国"},
{name: "加拿大",value: 0,cityName: "(北美州)加拿大"},
{name: "印尼",value: 0,cityName: "(亚洲)印度尼西亚"},
{name: "瑞士",value: 0,cityName: "(欧州)瑞士"},
{name: "智利",value: 0,cityName: "(南美州)智利"},
{name: "中国",value: 0,cityName: "(亚洲)中国"},
{name: "象牙海岸",value: 0,cityName: "(非州)象牙海岸"},
{name: "喀麦隆",value: 0,cityName: "(非州)喀麦隆"},
{name: "刚果共和国",value: 0,cityName: "(非州)刚果共和国"},
{name: "刚果",value: 0,cityName: "(非州)刚果"},
{name: "哥伦比亚",value: 0,cityName: "(南美州)哥伦比亚"},
{name: "哥伦比亚哥斯达黎加",value: 0,cityName: "(北美州)哥伦比亚哥斯达黎加"},
{name: "古巴",value: 0,cityName: "(北美州)古巴"},
{name: "北塞浦路斯",value: 0,cityName: "(欧州)北塞浦路斯"},
{name: "塞浦路斯",value: 0,cityName: "(亚州)塞浦路斯"},
{name: "捷克共和国",value: 0,cityName: "(欧州)捷克共和国"},
{name: "德国",value: 0,cityName: "(欧州)德国"},
{name: "吉布提",value: 0,cityName: "(非州)吉布提"},
{name: "丹麦",value: 0,cityName: "(欧州)丹麦"},
{name: "多米尼加共和国",value: 0,cityName: "(北美州)多米尼加共和国"},
{name: "阿尔及利亚",value: 0,cityName: "(欧州)阿尔及利亚"},
{name: "厄瓜多尔",value: 0,cityName: "(南美州)厄瓜多尔"},
{name: "埃及",value: 0,cityName: "(非州)埃及"},
{name: "厄立特里亚",value: 0,cityName: "(非州)厄立特里亚"},
{name: "西班牙",value: 0,cityName: "(欧州)西班牙"},
{name: "爱沙尼亚",value: 0,cityName: "(欧州)爱沙尼亚"},
{name: "埃塞俄比亚",value: 0,cityName: "(非州)埃塞俄比亚"},
{name: "芬兰",value: 0,cityName: "(欧州)芬兰"},
{name: "斐济",value: 0,cityName: "(大洋州)斐济"},
{name: "福克兰群岛",value: 0,cityName: "(南美州)福克兰群岛"},
{name: "法国",value: 0,cityName: "(欧州)法国"},
{name: "加蓬",value: 0,cityName: "(非州)加蓬"},
{name: "英国",value: 0,cityName: "(欧州)英国"},
{name: "佐治亚州",value: 0,cityName: "(北美州)佐治亚州"},
{name: "加纳",value: 0,cityName: "(非州)加纳"},
{name: "几内亚",value: 0,cityName: "(非州)几内亚"},
{name: "冈比亚",value: 0,cityName: "(非州)冈比亚"},
{name: "几内亚比绍",value: 0,cityName: "(非州)几内亚比绍"},
{name: "几内亚比索赤道几内亚",value: 0,cityName: "(非州)几内亚比索赤道几内亚"},
{name: "希腊",value: 0,cityName: "(欧州)希腊"},
{name: "格陵兰",value: 0, cityName: "(北美州)格陵兰"},
{name: "危地马拉",value: 0, cityName: "(北美州)危地马拉"},
{name: "危地马拉法属圭亚那",value: 0, cityName: "(南美州)危地马拉法属圭亚那"},
{name: "圭亚那",value: 0, cityName: "(南美州)圭亚那"},
{name: "洪都拉斯",value: 0, cityName: "(北美州)洪都拉斯"},
{name: "克罗地亚",value: 0, cityName: "(南美州)克罗地亚"},
{name: "海地",value: 0, cityName: "(北美州)海地"},
{name: "匈牙利",value: 0,cityName: "(欧州)匈牙利"},
{name: "印度尼西亚",value: 0,cityName: "(亚州)印度尼西亚"},
{name: "印度",value: 0,cityName: "(亚州)印度"},
{name: "爱尔兰",value: 0,cityName: "(欧州)爱尔兰"},
{name: "伊朗",value: 0,cityName: "(亚州)伊朗"},
{name: "伊拉克",value: 0,cityName: "(亚州)伊拉克"},
{name: "冰岛",value: 0,cityName: "(欧州)冰岛"},
{name: "以色列",value: 0,cityName: "(亚州)以色列"},
{name: "意大利",value: 0,cityName: "(欧州)意大利"},
{name: "牙买加",value: 0,cityName: "(北美州)牙买加"},
{name: "约旦",value: 0,cityName: "(亚州)约旦"},
{name: "日本",value: 0,cityName: "(亚州)日本"},
{name: "哈萨克斯坦",value: 0,cityName: "(亚州)哈萨克斯坦"},
{name: "肯尼亚",value: 0,cityName: "(非州)肯尼亚"},
{name: "吉尔吉斯斯坦",value: 0,cityName: "(亚州)吉尔吉斯斯坦"},
{name: "柬埔寨",value: 0,cityName: "(亚州)柬埔寨"},
{name: "韩国",value: 0,cityName: "(亚州)韩国"},
{name: "科索沃",value: 0,cityName: "(欧州)科索沃"},
{name: "科威特",value: 0,cityName: "(亚州)科威特"},
{name: "老挝",value: 0,cityName: "(亚州)老挝"},
{name: "黎巴嫩",value: 0,cityName: "(亚州)黎巴嫩"},
{name: "利比里亚",value: 0,cityName: "(非州)利比里亚"},
{name: "利比亚",value: 0,cityName: "(非州)利比亚"},
{name: "斯里兰卡",value: 0,cityName: "(亚州)斯里兰卡"},
{name: "莱索托",value: 0,cityName: "(非州)莱索托"},
{name: "立陶宛",value: 0,cityName: "(欧州)立陶宛"},
{name: "卢森堡",value: 0,cityName: "(欧州)卢森堡"},
{name: "拉脱维亚",value: 0,cityName: "(欧州)拉脱维亚"},
{name: "摩洛哥",value: 0,cityName: "(非州)摩洛哥"},
{name: "摩尔多瓦",value: 0,cityName: "(欧州)摩尔多瓦"},
{name: "马达加斯加",value: 0,cityName: "(非州)马达加斯加"},
{name: "墨西哥",value: 0,cityName: "(南美州)墨西哥"},
{name: "马其顿",value: 0,cityName: "(欧州)马其顿"},
{name: "马里",value: 0,cityName: "(非州)马里"},
{name: "缅甸",value: 0,cityName: "(亚州)缅甸"},
{name: "黑山",value: 0,cityName: "(欧州)黑山"},
{name: "蒙古",value: 0,cityName: "(亚州)蒙古"},
{name: "莫桑比克",value: 0,cityName: "(非州)莫桑比克"},
{name: "毛里塔尼亚",value: 0,cityName: "(非州)毛里塔尼亚"},
{name: "马拉维",value: 0,cityName: "(非州)马拉维"},
{name: "纳米比亚",value: 0,cityName: "(非州)纳米比亚"},
{name: "新喀里多尼亚",value: 0,cityName: "(大洋州)新喀里多尼亚"},
{name: "尼日尔",value: 0,cityName: "(非州)尼日尔"},
{name: "尼日利亚",value: 0,cityName: "(非州)尼日利亚"},
{name: "尼加拉瓜",value: 0,cityName: "(北美州)尼加拉瓜"},
{name: "荷兰",value: 0,cityName: "(欧州)荷兰"},
{name: "挪威",value: 0,cityName: "(欧州)挪威"},
{name: "尼泊尔",value: 0,cityName: "(亚州)尼泊尔"},
{name: "新西兰",value: 0,cityName: "(大洋州)新西兰"},
{name: "阿曼",value: 0,cityName: "(大洋州)阿曼"},
{name: "巴基斯坦",value: 0,cityName: "(亚州)巴基斯坦"},
{name: "巴拿马",value: 0,cityName: "(北美州)巴拿马"},
{name: "秘鲁",value: 0,cityName: "(南美州)秘鲁"},
{name: "菲律宾",value: 0,cityName: "(亚州)菲律宾"},
{name: "巴布亚新几内亚",value: 0,cityName: "(大洋州)巴布亚新几内亚"},
{name: "波兰",value: 0,cityName: "(欧州)波兰"},
{name: "波多黎各",value: 0,cityName: "(北美州)波多黎各"},
{name: "朝鲜",value: 0,cityName: "(亚州)朝鲜"},
{name: "葡萄牙",value: 0,cityName: "(欧州)葡萄牙"},
{name: "巴拉圭",value: 0,cityName: "(南美州)巴拉圭"},
{name: "卡塔尔",value: 0,cityName: "(亚州)卡塔尔"},
{name: "罗马尼亚",value: 0,cityName: "(欧州)罗马尼亚"},
{name: "俄罗斯",value: 0,cityName: "(欧洲)俄罗斯"},
{name: "卢旺达",value: 0,cityName: "(非州)卢旺达"},
{name: "撒哈拉沙漠",value: 0,cityName: "(非州)撒哈拉沙漠"},
{name: "沙特阿拉伯",value: 0,cityName: "(亚州)沙特阿拉伯"},
{name: "苏丹",value: 0,cityName: "(非州)苏丹"},
{name: "南苏丹",value: 0,cityName: "(非州)南苏丹"},
{name: "塞内加尔",value: 0,cityName: "(非州)塞内加尔"},
{name: "所罗门群岛",value: 0,cityName: "(大洋州)所罗门群岛"},
{name: "塞拉利昂",value: 0,cityName: "(非州)塞拉利昂"},
{name: "萨尔瓦多",value: 0,cityName: "(北美州)萨尔瓦多"},
{name: "索马里兰",value: 0,cityName: "(非州)索马里兰"},
{name: "索马里",value: 0,cityName: "(非州)索马里"},
{name: "塞尔维亚",value: 0,cityName: "(欧州)塞尔维亚"},
{name: "苏里南",value: 0,cityName: "(南美州)苏里南"},
{name: "斯洛伐克",value: 0,cityName: "(欧州)斯洛伐克"},
{name: "斯洛文尼亚",value: 0,cityName: "(欧州)斯洛文尼亚"},
{name: "瑞典",value: 0,cityName: "(欧州)瑞典"},
{name: "斯威士兰",value: 0,cityName: "(非州)斯威士兰"},
{name: "叙利亚",value: 0,cityName: "(亚州)叙利亚"},
{name: "乍得",value: 0,cityName: "(非州)乍得"},
{name: "多哥",value: 0,cityName: "(非州)多哥"},
{name: "泰国",value: 0,cityName: "(亚州)泰国"},
{name: "塔吉克斯坦",value: 0,cityName: "(亚州)塔吉克斯坦"},
{name: "土库曼斯坦",value: 0,cityName: "(亚州)土库曼斯坦"},
{name: "霍尼亚拉东帝汶",value: 0,cityName: "(亚州)霍尼亚拉东帝汶"},
{name: "特立尼达和多巴哥",value: 0,cityName: "(北美州)特立尼达和多巴哥"},
{name: "突尼斯",value: 0,cityName: "(非州)突尼斯"},
{name: "土耳其",value: 0,cityName: "(亚州)土耳其"},
{name: "坦桑尼亚联合共和国",value: 0,cityName: "(非州)坦桑尼亚联合共和国"},
{name: "乌干达",value: 0,cityName: "(非州)乌干达"},
{name: "乌克兰",value: 0,cityName: "(欧州)乌克兰"},
{name: "乌拉圭",value: 0,cityName: "(南美州)乌拉圭"},
{name: "美国",value: 0,cityName: "(北美州)美国"},
{name: "乌兹别克斯坦",value: 0,cityName: "(亚州)乌兹别克斯坦"},
{name: "委内瑞拉",value: 0,cityName: "(南美州)委内瑞拉"},
{name: "越南",value: 0,cityName: "(亚州)越南"},
{name: "瓦努阿图",value: 0,cityName: "(大洋州)瓦努阿图"},
{name: "西岸",value: 0,cityName: "(亚州)西岸"},
{name: "也门",value: 0,cityName: "(亚州)也门"},
{name: "南非",value: 0,cityName: "(非州)南非"},
{name: "赞比亚",value: 0,cityName: "(非州)赞比亚"},
{name: "津巴布韦",value: 0,cityName: "(非州)津巴布韦"},
{name: "西撒哈拉",value: 0,cityName: "西撒哈拉"},
{name: "坦桑尼亚",value: 0,cityName: "坦桑尼亚"},
],
geoCoordMap: {
'马来西亚': [101.681865, 3.136134],
'新加坡': [103.813384, 1.370925]
},
// 全球地域中文映射
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 Herzegovina': '波斯尼亚和黑塞哥维那',
'Botswana': '博茨瓦纳',
'Brazil': '巴西',
'Brunei': '文莱',
'Bulgaria': '保加利亚',
'Burkina Faso': '布基纳法索',
'Burundi': '布隆迪',
'Cambodia': '柬埔寨',
'Cameroon': '喀麦隆',
'Canada': '加拿大',
'Cape Verde': '佛得角',
'Central African Rep.': '中非共和国',
"Côte d'Ivoire": '象牙海岸',
'Chad': '乍得',
'Chile': '智利',
'China': '中国',
'Colombia': '哥伦比亚',
'Comoros': '科摩罗',
'Dem. Rep. Congo': '刚果共和国',
'Congo': '刚果',
'Costa Rica': '哥斯达黎加',
'Croatia': '克罗地亚',
'Cuba': '古巴',
'Cyprus': '塞浦路斯',
'Czech Republic': '捷克共和国',
'Denmark': '丹麦',
'Djibouti': '吉布提',
'Dominica': '多米尼加',
'Dominican Republic': '多明尼加共和国',
'Ecuador': '厄瓜多尔',
'Egypt': '埃及',
'El Salvador': '萨尔瓦多',
'Equatorial 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': '基里巴斯',
'North Korea': '北朝鲜',
'South 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 Islands': '所罗门群岛',
'Somalia': '索马里',
'S. Sudan': '苏丹',
'South Africa': '南非',
'Spain': '西班牙',
'Sri Lanka': '斯里兰卡',
'St. Christopher-Nevis': '圣',
'St. Lucia': '圣露西亚',
'St. Vincent and the Grenadines': '圣文森特和格林纳丁斯',
'Sudan': '苏丹',
'Suriname': '苏里南',
'Svalbard': '斯瓦尔巴特群岛',
'Swaziland': '斯威士兰',
'Sweden': '瑞典',
'Switzerland': '瑞士',
'Syria': '叙利亚',
'Taiwan': '台湾',
'Tajikistan': '塔吉克斯坦',
'United Republic of Tanzania': '坦桑尼亚',
'Thailand': '泰国',
'Togo': '多哥',
'Tonga': '汤加',
'Trinidad and Tobago': '特里尼达和多巴哥',
'Tunisia': '突尼斯',
'Turkey': '土耳其',
'Turkmenistan': '土库曼斯坦',
'Tanzania': '坦桑尼亚',
'Turks and Caicos Islands': '特克斯和凯科斯群岛',
'Uganda': '乌干达',
'Ukraine': '乌克兰',
'United Arab Emirates': '阿联酋',
'United Kingdom': '英国',
'United States': '美国',
'Uruguay': '乌拉圭',
'Uzbekistan': '乌兹别克斯坦',
'Vanuatu': '瓦努阿图',
'Venezuela': '委内瑞拉',
'Vietnam': '越南',
'Western Sahara': '西撒哈拉',
'Western Samoa': '西萨摩亚',
'Yemen': '也门',
'Yugoslavia': '南斯拉夫',
'Democratic Republic of the Congo': '刚果民主共和国',
'Zambia': '赞比亚',
'Zimbabwe': '津巴布韦',
'South Sudan': '南苏丹',
'Somaliland': '索马里兰',
'Montenegro': '黑山',
'Kosovo': '科索沃',
'Republic of Serbia': '塞尔维亚',
},
tableList: [],
sort: '总金额'
};
},
created() {
// echarts.registerMap('world', world)
},
mounted() {
// 初始化地图
this.getList()
},
methods: {
convertData(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = this.geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
num: data[i].num,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
},
getList(sort) {
var obj = {
origin: 'bd_mall',
}
if (this.sort == '总金额') {
obj.sort_amount = 'desc'
}
if (this.sort == '订单量') {
obj.sort_number = 'desc'
}
addressCountryOrderNumberData(obj).then(response => {
response.data.forEach(n => {
if (this.nameMap[n.country]) {
n.country_name = this.nameMap[n.country]
this.dataList.forEach(m => {
if (this.nameMap[n.country] == m.name) {
m.value = n.order_total_amount
m.num = n.order_number
}
})
}
})
this.tableList = response.data
if (sort == 'sort') {} else {
this.initEchart();
}
})
},
initEchart() {
let dataList = this.dataList;
const _this = this;
var myChart = echarts.init(document.getElementById("map"));
echarts.registerMap('world', world)
var option = {
tooltip: {
//数据格式化
formatter: function(params, callback) {
// return (
// "国家" + "<br />" + params.name + "：" + params.value[2]
// );
return (
params.name + "<br />" + '订单量：' + params.data.num + "<br />" + '总金额：' + params.value[2]
);
},
},
nameMap: this.nameMap,
visualMap: {
type: 'piecewise',
inRange: {color: ['#02F6F9', '#02F6F9', '#02F6F9']},
pieces: [
{ min: 0, max: 1000000, color: 'rgba(2,246,249, 1)' },
{
min: 1000000,
max: 50000000,
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [
{ offset: 0, color: 'rgba(11,28,92,0)' },
{ offset: 0.9, color: 'rgba(10,94,137, 0.5)' },
{ offset: 1, color: 'rgba(2, 246, 249, 1)' }
],
globalCoord: false // 缺省为 false
}
}
],
show: false,
textStyle: {
color: '#ffffff',
fontSize: 16
}
},
geo: {
map: 'world',
roam: true,
zoom: 2,
label: {
normal: {
show: false, // 是否显示对应地名
textStyle: {
color: '#02F6F9'
}
},
emphasis: { // 对应的鼠标悬浮效果
show: true,
textStyle: {
color: '#02F6F9'
}
}
},
itemStyle: {
normal: {
areaColor: '#091E64',
borderColor: '#024DBA'
},
emphasis: {
borderWidth: 1,
areaColor: '#091E64',
borderColor: '#02F6F9'
}
},
center:[101.681865, 3.136134] //设置地图中心点的坐标
},
series: [{
type: 'scatter',
coordinateSystem: 'geo',
mapType: 'world',
symbol: 'circle',
symbolSize: 12,
tooltip: { // 提示框样式
backgroundColor: '#232425',
borderColor: '#008aff',
borderWidth: 1,
extraCssText: 'box-shadow: 0 0 5px #008aff;'
},
itemStyle: {
normal: {
borderColor: 'rgba(12, 30, 99, 0.2)',
color: '#fff'
}
},
data: this.convertData(dataList)
}]
};
myChart.setOption(option);
},
sortChnage() {
this.getList('sort')
}
}
};
</script>
<style scoped>
.mapBox {
background: rgb(6, 23, 72);
margin-top: 20px;
position: relative;
}
.mapTableBox {
width: 420px;
position: absolute;
bottom: 10px;
right: 10px;
padding: 10px;
border: 1px solid #02F6F9;
border-radius: 5px;
box-shadow: 0px 0px 10px 5px #02f6f9;
}
.sort {
margin-bottom: 10px;
float: right;
}
</style>
<style>
.mapTableBox thead {
color: #ffffff !important;
}
.mapTableBox .el-table {
color: #ffffff !important;
background-color: transparent !important;
}
.mapTableBox .el-table__header-wrapper th {
background-color: rgba(2, 77, 186, 1) !important;
}
.mapTableBox tbody tr {
background-color: #091E64 !important;
}
.mapTableBox .el-table__row--striped td {
background-color: rgba(2, 77, 186, 1) !important;
}
.mapTableBox .el-table th.is-leaf, .mapTableBox .el-table td {
border: none !important;
}
.mapTableBox .el-table::before {
display: none !important;
}
.mapTableBox .el-table--enable-row-hover .el-table__body tr:hover>td {
background-color: #091E64;
}
.mapTableBox .el-radio-button__orig-radio:checked+.el-radio-button__inner {
background-color: rgba(2, 77, 186, 1) !important;
border-color: rgba(2, 77, 186, 1) !important;
-webkit-box-shadow: -1px 0 0 0 rgba(2, 77, 186, 1) !important;
box-shadow: -1px 0 0 0 rgba(2, 77, 186, 1) !important;
}
</style>
image.png
网友评论