組件部分
components/ComWorldMap/index.vue
<template>
<div
ref="chart"
style="height: 350px"
/>
</template>
<script lang="ts">
import { Component, Vue, PropSync } from 'vue-property-decorator'
import echarts from 'echarts'
import option from './option'
@Component
export default class WorldMap extends Vue {
@PropSync('country') selectedVal!: string
private chart: any = {}
private option: any = {}
private created () {
this.init()
}
private init () {
this.option = option
}
private mounted () {
this.chart = echarts.init(this.$refs.chart)
// this.chart.on("click", (params: any) => {
// console.log(params);
// if (params.name === "中國") {
// this.chart.setOption(CHINA_OPTION, true)
// }
// })
}
public setData (seriesData: any) {
this.seriesData = seriesData
if (seriesData.country === '中國') {
this.option.series[0].name = '中國地圖'
this.option.series[0].mapType = 'china'
} else {
this.option.series[0].name = '世界地圖'
this.option.series[0].mapType = 'world'
}
this.option.series[0].data = seriesData.items
this.onRender()
}
private onRender (): void {
this.chart.setOption(this.option, true)
}
}
</script>
這里主要對series的mapType進(jìn)行設(shè)置
main.ts
// 地圖數(shù)據(jù)
import '../node_modules/echarts/map/js/world.js'
import '../node_modules/echarts/map/js/china.js'
需要注意的是一定要引入地圖數(shù)據(jù)
components/ComWorld/option.ts
export default {
tooltip: {
show: true
},
series: [
{
type: "map", // 類型
// 系列名稱，用于tooltip的顯示口芍，legend 的圖例篩選 在 setOption 更新數(shù)據(jù)和配置項時用于指定對應(yīng)的系列
name: "世界地圖",
mapType: "world", // 地圖類型
// 是否開啟鼠標(biāo)縮放和平移漫游 默認(rèn)不開啟 如果只想要開啟縮放或者平移雇卷，可以設(shè)置成 'scale' 或者 'move' 設(shè)置成 true 為都開啟
roam: true,
// 圖形上的文本標(biāo)簽
label: {
show: false // 是否顯示對應(yīng)地名
},
// 地圖區(qū)域的多邊形 圖形樣式
itemStyle: {
areaColor: "#CDE1F5", // 地圖區(qū)域的顏色 如果設(shè)置了visualMap关划，areaColor屬性將不起作用
borderWidth: 0.5, // 描邊線寬 為 0 時無描邊
borderColor: "#ffffff", // 圖形的描邊顏色 支持的顏色格式同 color翘瓮，不支持回調(diào)函數(shù)
borderType: "solid" // 描邊類型，默認(rèn)為實線调榄，支持 'solid', 'dashed', 'dotted'
},
emphasis: {
itemStyle: {
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
areaColor: '#FFDF33',
shadowColor: "rgba(0, 0, 0, 0.5)"
}
},
// 自定義地區(qū)的名稱映射
nameMap: {},
// 地圖系列中的數(shù)據(jù)內(nèi)容數(shù)組 數(shù)組項可以為單個數(shù)值
data: []
}
大家切換的時候會發(fā)現(xiàn)世界地圖是英文的呵扛，可以通過設(shè)置nameMap映射名字
以下提供了一些數(shù)據(jù)：
{
"Afghanistan": "阿富汗",
"Angola": "安哥拉",
"Albania": "阿爾巴尼亞",
"Algeria": "阿爾及利亞",
"Argentina": "阿根廷",
"Armenia": "亞美尼亞",
"Australia": "澳大利亞",
"Austria": "奧地利",
"Azerbaijan": "阿塞拜疆",
"Bahamas": "巴哈馬",
"Bangladesh": "孟加拉國",
"Belgium": "比利時",
"Benin": "貝寧",
"Burkina Faso": "布基納法索",
"Burundi": "布隆迪",
"Bulgaria": "保加利亞",
"Bosnia and Herz.": "波斯尼亞和黑塞哥維那",
"Belarus": "白俄羅斯",
"Belize": "伯利茲",
"Bermuda": "百慕大群島",
"Bolivia": "玻利維亞",
"Brazil": "巴西",
"Brunei": "文萊",
"Bhutan": "不丹",
"Botswana": "博茨瓦納",
"Cambodia": "柬埔寨",
"Cameroon": "喀麥隆",
"Canada": "加拿大",
"Central African Rep.": "中非共和國",
"Chad": "乍得",
"Chile": "智利",
"China": "中國",
"Colombia": "哥倫比亞",
"Congo": "剛果",
"Costa Rica": "哥斯達(dá)黎加",
"C?te d'Ivoire": "科特迪瓦",
"Croatia": "克羅地亞",
"Cuba": "古巴",
"Cyprus": "塞浦路斯",
"Czech Rep.": "捷克共和國",
"Dem. Rep. Korea": "韓國",
"Dem. Rep. Congo": "民主剛果",
"Denmark": "丹麥",
"Djibouti": "吉布提",
"Dominican Rep.": "多米尼加共和國",
"Ecuador": "厄瓜多爾",
"Egypt": "埃及",
"El Salvador": "薩爾瓦多",
"Eq. Guinea": "赤道幾內(nèi)亞",
"Eritrea": "厄立特里亞",
"Estonia": "愛沙尼亞",
"Ethiopia": "埃塞俄比亞",
"Falkland Is.": "附翊克蘭群島",
"Fiji": "斐濟(jì)",
"Finland": "芬蘭",
"France": "法國",
"French Guiana": "法屬圭亞那",
"Fr. S. Antarctic Lands": "法屬南部領(lǐng)地",
"Gabon": "加蓬",
"Gambia": "岡比亞",
"Germany": "德國",
"Georgia": "佐治亞州",
"Ghana": "加納",
"Greece": "希臘",
"Greenland": "格陵蘭",
"Guatemala": "危地馬拉",
"Guinea": "幾內(nèi)亞",
"Guinea-Bissau": "幾內(nèi)亞比紹",
"Guyana": "圭亞那",
"Haiti": "海地",
"Heard I. and McDonald Is.": "赫德島和麥克唐納群島",
"Honduras": "洪都拉斯",
"Hungary": "匈牙利",
"Iceland": "冰島",
"India": "印度",
"Indonesia": "印度尼西亞",
"Iran": "伊朗",
"Iraq": "伊拉克",
"Ireland": "愛爾蘭",
"Israel": "以色列",
"Italy": "意大利",
"Ivory Coast": "象牙海岸",
"Jamaica": "牙買加",
"Japan": "日本",
"Jordan": "喬丹",
"Kashmir": "克什米爾",
"Kazakhstan": "哈薩克斯坦",
"Kenya": "肯尼亞",
"Kosovo": "科索沃",
"Kuwait": "科威特",
"Kyrgyzstan": "吉爾吉斯斯坦",
"Laos": "老撾",
"Lao PDR": "老撾人民民主共和國",
"Latvia": "拉脫維亞",
"Lebanon": "黎巴嫩",
"Lesotho": "萊索托",
"Liberia": "利比里亞",
"Libya": "利比亞",
"Lithuania": "立陶宛",
"Luxembourg": "盧森堡",
"Madagascar": "馬達(dá)加斯加",
"Macedonia": "馬其頓",
"Malawi": "馬拉維",
"Malaysia": "馬來西亞",
"Mali": "馬里",
"Mauritania": "毛里塔尼亞",
"Mexico": "墨西哥",
"Moldova": "摩爾多瓦",
"Mongolia": "蒙古",
"Montenegro": "黑山",
"Morocco": "摩洛哥",
"Mozambique": "莫桑比克",
"Myanmar": "緬甸",
"Namibia": "納米比亞",
"Netherlands": "荷蘭",
"New Caledonia": "新喀里多尼亞",
"New Zealand": "新西蘭",
"Nepal": "尼泊爾",
"Nicaragua": "尼加拉瓜",
"Niger": "尼日爾",
"Nigeria": "尼日利亞",
"Korea": "朝鮮",
"Northern Cyprus": "北塞浦路斯",
"Norway": "挪威",
"Oman": "阿曼",
"Pakistan": "巴基斯坦",
"Panama": "巴拿馬",
"Papua New Guinea": "巴布亞新幾內(nèi)亞",
"Paraguay": "巴拉圭",
"Peru": "秘魯",
"Republic of the Congo": "剛果共和國",
"Philippines": "菲律賓",
"Poland": "波蘭",
"Portugal": "葡萄牙",
"Puerto Rico": "波多黎各",
"Qatar": "卡塔爾",
"Republic of Serbia": "塞爾維亞共和國",
"Romania": "羅馬尼亞",
"Russia": "俄羅斯",
"Rwanda": "盧旺達(dá)",
"Samoa": "薩摩亞",
"Saudi Arabia": "沙特阿拉伯",
"Senegal": "塞內(nèi)加爾",
"Serbia": "塞爾維亞",
"Sierra Leone": "塞拉利昂",
"Slovakia": "斯洛伐克",
"Slovenia": "斯洛文尼亞",
"Solomon Is.": "所羅門群島",
"Somaliland": "索馬里蘭",
"Somalia": "索馬里",
"South Africa": "南非",
"S. Geo. and S. Sandw. Is.": "南喬治亞和南桑德威奇群島",
"S. Sudan": "南蘇丹",
"Spain": "西班牙",
"Sri Lanka": "斯里蘭卡",
"Sudan": "蘇丹",
"Suriname": "蘇里南",
"Swaziland": "斯威士蘭",
"Sweden": "瑞典",
"Switzerland": "瑞士",
"Syria": "敘利亞",
"Tajikistan": "塔吉克斯坦",
"Tanzania": "坦桑尼亞",
"Thailand": "泰國",
"Timor-Leste": "東帝汶",
"Togo": "多哥",
"Trinidad and Tobago": "特立尼達(dá)和多巴哥",
"Tunisia": "突尼斯",
"Turkey": "土耳其",
"Turkmenistan": "土庫曼斯坦",
"Uganda": "烏干達(dá)",
"Ukraine": "烏克蘭",
"United Arab Emirates": "阿拉伯聯(lián)合酋長國",
"United Kingdom": "大不列顛聯(lián)合王國",
"United Republic of Tanzania": "坦桑尼亞聯(lián)合共和國",
"United States": "美國",
"United States of America": "美利堅合眾國",
"Uruguay": "烏拉圭",
"Uzbekistan": "烏茲別克斯坦",
"Vanuatu": "瓦努阿圖",
"Venezuela": "委內(nèi)瑞拉",
"Vietnam": "越南",
"West Bank": "西岸",
"W. Sahara": "西撒哈拉",
"Yemen": "也門",
"Zambia": "贊比亞",
"Zimbabwe": "津巴布韋"
}
使用
<template>
<world-map
ref="worldMap"
:country.sync="formData.country"
/>
</template>
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import WorldMap from '@/components/ComWordMap/index.vue'
@Component({
components: {
WorldMap
}
})
export default class AttackLog extends Vue {
formData = {
country: '中國'
}
@Watch('formData', {immediate: true, deep: true})
onFormChange () {
//getAPI()
}
private async getProtectChartRegion () { // 攻擊區(qū)域分布
const res = await api(this.formData)
if (res.code === 1) {
res.data.items.map((v: any) => {v.name = v.key; v.value = v.val});
(this.$refs.worldMap as any).setData(res.data)
}
}
}
</script>
如此一來就完成了芝薇，看看效果圖
world.gif
