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 相关文章推荐
如何实现JS函数的重载
Sep 22 Javascript
javascript基础第一章 JavaScript与用户端
Jul 22 Javascript
JavaScript实现QueryString获取GET参数的方法
Jul 02 Javascript
jQuery分组选择器用法实例
Dec 23 Javascript
javascript实现模拟时钟的方法
May 13 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
Jun 30 Javascript
Node.js返回JSONP详解
May 18 Javascript
jQuery包裹节点用法完整示例
Sep 13 Javascript
webpack 2.x配置reactjs基本开发环境详解
Aug 08 Javascript
微信小程序上线发布流程图文详解
May 06 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
Jul 26 Javascript
js利用拖放实现添加删除
Aug 27 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
推荐php模板技术[转]
2007/01/04 PHP
php 搜索框提示(自动完成)实例代码
2012/02/05 PHP
使用PHP编写发红包程序
2015/07/22 PHP
Symfony2学习笔记之插件格式分析
2016/03/17 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
PHPMailer发送邮件
2016/12/28 PHP
PHP FileSystem 文件系统常用api整理总结
2019/07/12 PHP
js实现的牛顿摆效果
2015/03/31 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
学习JavaScript事件流和事件处理程序
2016/01/25 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
2016/08/19 Javascript
用jQuery实现可输入多选下拉组合框实例代码
2017/01/18 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
2017/03/25 Javascript
浅谈Angular 中何时取消订阅
2017/11/22 Javascript
Vue实现搜索 和新闻列表功能简单范例
2018/03/16 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
2018/09/28 Javascript
JavaScript页面加载事件实例讲解
2019/09/01 Javascript
vue 自动化路由实现代码
2019/09/03 Javascript
es6 for循环中let和var区别详解
2020/01/12 Javascript
[20:21]《一刀刀一天》第十六期:TI国际邀请赛正式打响,总奖金超过550万
2014/05/23 DOTA
python基于windows平台锁定键盘输入的方法
2015/03/05 Python
用Python进行基础的函数式编程的教程
2015/03/31 Python
深入解析Python中的线程同步方法
2016/06/14 Python
Django项目中实现使用qq第三方登录功能
2019/08/13 Python
keras实现VGG16方式(预测一张图片)
2020/07/07 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
Python如何测试stdout输出
2020/08/10 Python
Pycharm操作Git及GitHub的步骤详解
2020/10/27 Python
捷克电器和DJ设备网上商店:Electronic-star
2017/07/18 全球购物
Parfume Klik丹麦:香水网上商店
2018/07/10 全球购物
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
文体活动总结范文
2014/05/05 职场文书
2015年乡镇残联工作总结
2015/05/13 职场文书
大学生如何逃脱“毕业季创业队即散伙”魔咒?
2019/08/19 职场文书
html输入两个数实现加减乘除功能
2021/07/01 HTML / CSS
Python echarts实现数据可视化实例详解
2022/03/03 Python