echarts实现可视化世界地图模拟迁徙，以我自己开发过程。
下载echarts依赖：
npm install echarts
成功以后引入依赖：
import echarts from 'echarts'
peopleinsertcharts为生成echarts容器。
我要评论
let mychart = echarts.init(document.getelementbyid('peopleinsertcharts'))
容器一定要给宽高，否则echarts生成初始化页面不会显示。需要自适应的可以js获取宽高给定容器。
直接贴代码
// 绘制图表
mychart.setoption({
title: {
text: 'demo',
left: '50%',
top: '30px',
textstyle: {
color: '#fff',
opacity: 0.7
},
itemstyle: {
normal: {
bordercolor: 'rgba(100,149,237,1)',
borderwidth: 0.5,
areastyle: {
color: '#fff'
}
}
}
},
datarange: {
show: false,
min: 0,
max: 1000000,
text: ['high', 'low'],
realtime: true,
calculable: true,
color: ['orangered', 'yellow', 'lightskyblue']
},
tooltip: {
trigger: 'item'
},
geo: {
map: 'world',
label: {
emphasis: {
show: false
}
},
roam: false,
silent: true,
itemstyle: {
normal: {
areacolor: '#37376e',
bordercolor: '#000'
},
emphasis: {
areacolor: '#2a333d'
}
}
},
series: [{
type: 'map',
maptype: 'world',
zoom: 1.2,
maplocation: {
y: 100
},
itemstyle: {
emphasis: {label: {show: true}}
},
data: [
{name: 'afghanistan', value: 28397.812},
{name: 'angola', value: 19549.124},
{name: 'albania', value: 3150.143},
{name: 'united arab emirates', value: 8441.537},
{name: 'argentina', value: 40374.224},
{name: 'armenia', value: 2963.496},
{name: 'french southern and antarctic lands', value: 268.065},
{name: 'australia', value: 22404.488},
{name: 'austria', value: 8401.924},
{name: 'azerbaijan', value: 9094.718},
{name: 'burundi', value: 9232.753},
{name: 'belgium', value: 10941.288},
{name: 'benin', value: 9509.798},
{name: 'burkina faso', value: 15540.284},
{name: 'bangladesh', value: 151125.475},
{name: 'bulgaria', value: 7389.175},
{name: 'the bahamas', value: 66402.316},
{name: 'bosnia and herzegovina', value: 3845.929},
{name: 'belarus', value: 9491.07},
{name: 'belize', value: 308.595},
{name: 'bermuda', value: 64.951},
{name: 'bolivia', value: 716.939},
{name: 'brazil', value: 195210.154},
{name: 'brunei', value: 27.223},
{name: 'bhutan', value: 716.939},
{name: 'botswana', value: 1969.341},
{name: 'central african republic', value: 4349.921},
{name: 'canada', value: 34126.24},
{name: 'switzerland', value: 7830.534},
{name: 'chile', value: 17150.76},
{name: 'china', value: 1359821.465},
{name: 'ivory coast', value: 60508.978},
{name: 'cameroon', value: 20624.343},
{name: 'democratic republic of the congo', value: 62191.161},
{name: 'republic of the congo', value: 3573.024},
{name: 'colombia', value: 46444.798},
{name: 'costa rica', value: 4669.685},
{name: 'cuba', value: 11281.768},
{name: 'northern cyprus', value: 1.468},
{name: 'cyprus', value: 1103.685},
{name: 'czech republic', value: 10553.701},
{name: 'germany', value: 83017.404},
{name: 'djibouti', value: 834.036},
{name: 'denmark', value: 5550.959},
{name: 'dominican republic', value: 10016.797},
{name: 'algeria', value: 37062.82},
{name: 'ecuador', value: 15001.072},
{name: 'egypt', value: 78075.705},
{name: 'eritrea', value: 5741.159},
{name: 'spain', value: 46182.038},
{name: 'estonia', value: 1298.533},
{name: 'ethiopia', value: 87095.281},
{name: 'finland', value: 5367.693},
{name: 'fiji', value: 860.559},
{name: 'falkland islands', value: 49.581},
{name: 'france', value: 63230.866},
{name: 'gabon', value: 1556.222},
{name: 'united kingdom', value: 62066.35},
{name: 'georgia', value: 4388.674},
{name: 'ghana', value: 24262.901},
{name: 'guinea', value: 10876.033},
{name: 'gambia', value: 1680.64},
{name: 'guinea bissau', value: 10876.033},
{name: 'equatorial guinea', value: 696.167},
{name: 'greece', value: 11109.999},
{name: 'greenland', value: 56.546},
{name: 'guatemala', value: 14341.576},
{name: 'french guiana', value: 231.169},
{name: 'guyana', value: 786.126},
{name: 'honduras', value: 7621.204},
{name: 'croatia', value: 4338.027},
{name: 'haiti', value: 9896.4},
{name: 'hungary', value: 10014.633},
{name: 'indonesia', value: 240676.485},
{name: 'india', value: 12054.648},
{name: 'ireland', value: 4467.561},
{name: 'iran', value: 240676.485},
{name: 'iraq', value: 30962.38},
{name: 'iceland', value: 318.042},
{name: 'israel', value: 7420.368},
{name: 'italy', value: 60508.978},
{name: 'jamaica', value: 2741.485},
{name: 'jordan', value: 6454.554},
{name: 'japan', value: 127352.833},
{name: 'kazakhstan', value: 15921.127},
{name: 'kenya', value: 40909.194},
{name: 'kyrgyzstan', value: 5334.223},
{name: 'cambodia', value: 14364.931},
{name: 'south korea', value: 51452.352},
{name: 'kosovo', value: 97.743},
{name: 'kuwait', value: 2991.58},
{name: 'laos', value: 6395.713},
{name: 'lebanon', value: 4341.092},
{name: 'liberia', value: 3957.99},
{name: 'libya', value: 6040.612},
{name: 'sri lanka', value: 20758.779},
{name: 'lesotho', value: 2008.921},
{name: 'lithuania', value: 3068.457},
{name: 'luxembourg', value: 507.885},
{name: 'latvia', value: 2090.519},
{name: 'morocco', value: 31642.36},
{name: 'moldova', value: 103.619},
{name: 'madagascar', value: 21079.532},
{name: 'mexico', value: 117886.404},
{name: 'macedonia', value: 507.885},
{name: 'mali', value: 13985.961},
{name: 'myanmar', value: 51931.231},
{name: 'montenegro', value: 620.078},
{name: 'mongolia', value: 2712.738},
{name: 'mozambique', value: 23967.265},
{name: 'mauritania', value: 3609.42},
{name: 'malawi', value: 15013.694},
{name: 'malaysia', value: 28275.835},
{name: 'namibia', value: 2178.967},
{name: 'new caledonia', value: 246.379},
{name: 'niger', value: 15893.746},
{name: 'nigeria', value: 159707.78},
{name: 'nicaragua', value: 5822.209},
{name: 'netherlands', value: 16615.243},
{name: 'norway', value: 4891.251},
{name: 'nepal', value: 26846.016},
{name: 'new zealand', value: 4368.136},
{name: 'oman', value: 2802.768},
{name: 'pakistan', value: 173149.306},
{name: 'panama', value: 3678.128},
{name: 'peru', value: 29262.83},
{name: 'philippines', value: 93444.322},
{name: 'papua new guinea', value: 6858.945},
{name: 'poland', value: 38198.754},
{name: 'puerto rico', value: 3709.671},
{name: 'north korea', value: 1.468},
{name: 'portugal', value: 10589.792},
{name: 'paraguay', value: 6459.721},
{name: 'qatar', value: 1749.713},
{name: 'romania', value: 21861.476},
{name: 'russia', value: 21861.476},
{name: 'rwanda', value: 10836.732},
{name: 'western sahara', value: 514.648},
{name: 'saudi arabia', value: 27258.387},
{name: 'sudan', value: 35652.002},
{name: 'south sudan', value: 9940.929},
{name: 'senegal', value: 12950.564},
{name: 'solomon islands', value: 526.447},
{name: 'sierra leone', value: 5751.976},
{name: 'el salvador', value: 6218.195},
{name: 'somaliland', value: 9636.173},
{name: 'somalia', value: 9636.173},
{name: 'republic of serbia', value: 3573.024},
{name: 'suriname', value: 524.96},
{name: 'slovakia', value: 5433.437},
{name: 'slovenia', value: 2054.232},
{name: 'sweden', value: 9382.297},
{name: 'swaziland', value: 1193.148},
{name: 'syria', value: 7830.534},
{name: 'chad', value: 11720.781},
{name: 'togo', value: 6306.014},
{name: 'thailand', value: 66402.316},
{name: 'tajikistan', value: 7627.326},
{name: 'turkmenistan', value: 5041.995},
{name: 'east timor', value: 10016.797},
{name: 'trinidad and tobago', value: 1328.095},
{name: 'tunisia', value: 10631.83},
{name: 'turkey', value: 72137.546},
{name: 'united republic of tanzania', value: 44973.33},
{name: 'uganda', value: 33987.213},
{name: 'ukraine', value: 46050.22},
{name: 'uruguay', value: 3371.982},
{name: 'united states of america', value: 312247.116},
{name: 'uzbekistan', value: 27769.27},
{name: 'venezuela', value: 236.299},
{name: 'vietnam', value: 89047.397},
{name: 'vanuatu', value: 236.299},
{name: 'west bank', value: 13.565},
{name: 'yemen', value: 22763.008},
{name: 'south africa', value: 51452.352},
{name: 'zambia', value: 13216.985},
{name: 'zimbabwe', value: 13076.978}
]
}, {
type: 'lines',
zlevel: 2,
effect: {
show: true,
period: 6,
traillength: 0.1,
color: '#db9982',
symbol: planepath,
symbolsize: 8
},
linestyle: {
normal: {
color: '#fff',
width: 1,
opacity: 0.4,
curveness: 0.2
}
},
itemstyle: {
normal: {
label: {
show: true,
textstyle: {
color: 'rgb(249, 249, 249)'
}
}
}
},
data: formtgcdata(geocoordmap, data, 'china', true)
}, {
type: 'lines',
color: '#000',
zlevel: 2,
effect: {
show: true,
period: 6,
traillength: 0.1,
color: '#000',
symbol: planepath,
symbolsize: 8
},
linestyle: {
normal: {
color: '#fff',
width: 1,
opacity: 0.4,
curveness: 0.2
}
},
data: formtgcdata(geocoordmap, data, 'china', false)
},
{
type: 'effectscatter',
coordinatesystem: 'geo',
zlevel: 2,
rippleeffect: {
period: 4,
scale: 10,
brushtype: 'stroke'
},
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}',
color: '#fff',
fontsize: 15
}
},
symbolsize: 10,
itemstyle: {
normal: {
color: '#0d6695',
bordercolor: 'gold'
}
},
data: formtvdata(geocoordmap, data, 'china')
},
{
type: 'effectscatter',
coordinatesystem: 'geo',
zlevel: 2,
rippleeffect: {
period: 4,
scale: 10,
brushtype: 'stroke'
},
symbolsize: 10,
itemstyle: {
normal: {
color: '#0d6695',
bordercolor: 'gold'
}
},
data: formtvdata(geocoordmap, data, 'brazil')
}
]
})
地图颜色代码控制：
datarange: {
show: false,
min: 0,
max: 1000000,
text: ['high', 'low'],
realtime: true,
calculable: true,
color: ['orangered', 'yellow', 'lightskyblue']
},
效果图：
以上所述是小编给大家介绍的vue echarts实现可视化世界地图详解整合，希望对大家有所帮助
如对本文有疑问， 点击进行留言回复！！
vue-directive-ellipsis 超过内容显示省略号并出现tooltip，不超过时则都没有
网友评论