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&