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 相关文章推荐
javascript xml为数据源的下拉框控件
Jul 07 Javascript
jquery.ui.draggable中文文档
Nov 24 Javascript
测试JavaScript字符串处理性能的代码
Dec 07 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
Sep 04 Javascript
jquery实现的树形目录实例
Jun 26 Javascript
js实现Form栏显示全格式时间时钟效果代码
Aug 19 Javascript
浅析JavaScript作用域链、执行上下文与闭包
Feb 01 Javascript
JS显示日历和天气的方法
Mar 01 Javascript
input file上传 图片预览功能实例代码
Oct 25 Javascript
Node.js中process模块常用的属性和方法
Dec 13 Javascript
javascript实现简易数码时钟
Mar 30 Javascript
JavaScript中交换值的10种方法总结
Aug 18 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
火车头采集器3.0采集图文教程
2007/03/17 PHP
php环境配置之CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI比较?
2011/10/17 PHP
php判断用户是否手机访问代码
2015/06/08 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
js不是基础的基础
2006/12/24 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
2013/04/07 Javascript
JavaScript中的无阻塞加载性能优化方案
2014/10/10 Javascript
Jquery 实现弹出层插件
2015/01/28 Javascript
详解JavaScript编程中正则表达式的使用
2015/10/25 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
浅谈jquery上下滑动的注意事项
2016/10/13 Javascript
学习Node.js模块机制
2016/10/17 Javascript
Vue数据驱动模拟实现4
2017/01/12 Javascript
js中document.referrer实现移动端返回上一页
2017/02/22 Javascript
node前端开发模板引擎Jade的入门
2018/05/11 Javascript
vue响应式系统之observe、watcher、dep的源码解析
2019/04/09 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
2019/11/04 Javascript
[41:08]TNC vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
CentOS 6.5下安装Python 3.5.2(与Python2并存)
2017/06/05 Python
Python基于回溯法子集树模板解决马踏棋盘问题示例
2017/09/11 Python
python读取文本中数据并转化为DataFrame的实例
2018/04/10 Python
python构建基础的爬虫教学
2018/12/23 Python
OpenCV 之按位运算举例解析
2020/06/19 Python
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
英国领先品牌手动工具和电动工具供应商:Tooled Up
2018/11/24 全球购物
Otticanet英国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/02/10 全球购物
Myprotein荷兰官网:欧洲第一运动营养品牌
2020/07/11 全球购物
请解释接口的显式实现有什么意义
2012/05/26 面试题
小学三好学生事迹材料
2014/08/15 职场文书
2014年小学教导处工作总结
2014/12/19 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
2016教师国培研修感言
2015/12/08 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js
SpringBoot+Vue+JWT的前后端分离登录认证详细步骤
2021/09/25 Java/Android
Python开发五子棋小游戏
2022/04/28 Python