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', 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: '*', 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实现可视化世界地图详解整合，希望对大家有所帮助