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 学习初步 入门教程
Mar 25 Javascript
js函数setTimeout延迟执行的简单介绍
Jul 17 Javascript
Script标签与访问HTML页面详解
Jan 10 Javascript
js动态拼接正则表达式的两种方法
Mar 04 Javascript
jquery插件qrcode在线生成二维码
Apr 26 Javascript
聊聊Vue.js的template编译的问题
Oct 09 Javascript
bootstrap table实现横向合并与纵向合并
Jul 18 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
Sep 05 Javascript
javascript 函数的暂停和恢复实例详解
Apr 25 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
May 28 Javascript
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
避坑之 JavaScript 中的toFixed()和正则表达式
Apr 19 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
《斗罗大陆》六翼天使武魂最强,为什么老千家不是上三宗?
2020/03/02 国漫
php一些公用函数的集合
2008/03/27 PHP
javascript some()函数用法详解
2014/11/13 PHP
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
Thinkphp 框架扩展之数据库驱动常用方法小结
2020/04/23 PHP
javascript replace方法与正则表达式
2008/02/19 Javascript
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
2011/04/26 Javascript
JQuery给元素添加/删除节点比如select
2013/04/02 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
2013/08/25 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
javascript基本包装类型介绍
2015/04/10 Javascript
javascript 中的 delete及delete运算符
2015/11/15 Javascript
Angularjs实现多个页面共享数据的方式
2016/03/29 Javascript
JavaScript监听手机物理返回键的两种解决方法
2017/08/14 Javascript
vue+element实现批量删除功能的示例
2018/02/28 Javascript
JavaScript使用面向对象实现的拖拽功能详解
2019/06/12 Javascript
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
vue 项目引入echarts 添加点击事件操作
2020/09/09 Javascript
[00:32]2018DOTA2亚洲邀请赛VGJ.T出场
2018/04/03 DOTA
python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法
2019/07/04 Python
python getpass实现密文实例详解
2019/09/24 Python
python调用HEG工具批量处理MODIS数据的方法及注意事项
2020/02/18 Python
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
2014/11/05 HTML / CSS
HTML5+CSS3应用详解
2014/02/24 HTML / CSS
美国祛痘、抗衰老药妆品牌:Murad
2016/08/27 全球购物
Nuts.com:优质散装,批发坚果、干果和巧克力等
2017/03/21 全球购物
J2SDK1.5与J2SDK5.0有什么区别
2012/09/19 面试题
计算机专业个人简短的自我评价
2013/10/23 职场文书
三好学生个人先进事迹材料
2014/05/17 职场文书
读后感作文评语
2014/12/25 职场文书
导游词之重庆钓鱼城
2019/09/19 职场文书
go语言中json数据的读取和写出操作
2021/04/28 Golang
使用php的mail()函数实现发送邮件功能
2021/06/03 PHP
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS