echart 三维可视化地图_Vue Echarts实现可视化世界地图代码实例

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', val