Vue Echarts实现可视化世界地图代码实例


Posted in Javascript onMay 07, 2019

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 Echarts实现可视化世界地图详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于JQuery实现的Select级联
Jan 27 Javascript
javascript几个易错点记录
Nov 26 Javascript
javascript函数声明和函数表达式区别分析
Dec 02 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
Dec 20 Javascript
javascript下拉列表中显示树形菜单的实现方法
Nov 17 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
Oct 09 Javascript
小程序分页实践之编写可复用分页组件
Jul 18 Javascript
layui实现三级联动效果
Jul 26 Javascript
手写Vue弹窗Modal的实现代码
Sep 11 Javascript
vue实现鼠标移过出现下拉二级菜单功能
Dec 12 Javascript
微信小程序实现上传多个文件 超过10个
Mar 30 Javascript
Js实现复选框的全选、全不选反选功能代码实例
Feb 28 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
May 07 #Javascript
webpack-mvc 传统多页面组件化开发详解
May 07 #Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
May 07 #Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
May 07 #Javascript
vue接入腾讯防水墙代码
May 07 #Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
May 07 #Javascript
详解vue中使用protobuf踩坑记
May 07 #Javascript
You might like
Laravel中使用阿里云OSS Composer包分享
2015/02/10 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
PHP APP微信提现接口代码
2018/09/30 PHP
PHP实现文件上传操作和封装
2020/03/04 PHP
父窗口获取弹出子窗口文本框的值
2006/06/27 Javascript
XHTML下,JS浮动代码失效的问题
2009/11/12 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
2012/05/04 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
2013/06/14 Javascript
12行javascript代码绘制一个八卦图
2015/04/02 Javascript
jquery代码实现多选、不同分享功能
2015/07/31 Javascript
jquery日历插件datepicker用法分析
2016/01/22 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
2018/03/16 Javascript
JS实现页面侧边栏效果探究
2021/01/08 Javascript
Python使用scrapy抓取网站sitemap信息的方法
2015/04/08 Python
Python爬虫之模拟知乎登录的方法教程
2017/05/25 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
PyQt5创建一个新窗口的实例
2019/06/20 Python
django框架使用orm实现批量更新数据的方法
2019/06/21 Python
python and or用法详解
2019/06/26 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
PyTorch中Tensor的拼接与拆分的实现
2019/08/18 Python
django使用xadmin的全局配置详解
2019/11/15 Python
将tensorflow.Variable中的某些元素取出组成一个新的矩阵示例
2020/01/04 Python
python 中的[:-1]和[::-1]的具体使用
2020/02/13 Python
python爬虫开发之使用Python爬虫库requests多线程抓取猫眼电影TOP100实例
2020/03/10 Python
python应用Axes3D绘图(批量梯度下降算法)
2020/03/25 Python
Python实现扫码工具的示例代码
2020/10/09 Python
C#如何调用Word并打开一个Word文档
2013/05/08 面试题
风险评估实施方案
2014/03/09 职场文书
夫妻房产协议书的格式
2014/10/11 职场文书
工程部岗位职责
2015/02/10 职场文书
2015国庆节66周年标语
2015/07/30 职场文书
详解JS WebSocket断开原因和心跳机制
2021/05/07 Javascript
MySQL中存储时间的最佳实践指南
2021/07/01 MySQL